@push('metadata')
    @php
        $page_id = 36;
        $mTitle = @$cryptoDetails['seo_title'];
        $mDescr = @$cryptoDetails['meta_description'];
        $mKWords = @$cryptoDetails['meta_keywords'];
        $mUrl = url()->current();
        $mImage = config('constants.advertise');
        $seoParams = RssFeedHelper::getIcoType($cryptoDetails['ico_ido_type']);
    @endphp

    <title>{{ @$mTitle }}</title>
    <meta name="keywords" content="{{ @$mKWords }}" />
    <meta name="description" content="{{ @$mDescr }}" />
    <meta property=og:locale content="{{ app()->getLocale() }}" />
    <meta property=og:type content="{{config('constants.organisation_type_news')}}" />
    <meta property="og:site_name" content="Crypto Presale" />
    <meta property="og:title" content="{{ @$mTitle }}" />
    <meta property="og:description" content="{{ @$mDescr }}" />
    <meta property="og:url" content="{{ @$mUrl }}" />
    <meta property="og:image" content="{{ @$mImage }}" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="628">
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="{{ @$mTitle }}" />
    <meta name="twitter:description" content="{{ @$mDescr }}" />
    <meta name="twitter:url" content="{{ @$mUrl }}" />
    <meta name="twitter:image" content="{{ @$mImage }}" />
    <meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
    <meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
    <link rel="alternate" type="application/rss+xml" title="Crypto Display RSS Feed"
        href="{{ RssFeedHelper::getRssFeedUrl($seoParams['slug']) }}" />
@endpush

@push('head_scripts')

    {!! SchemaHelper::webpageSchema($mTitle ?? null, $mDescr ?? null) !!}
    {!! SchemaHelper::getBreadcrumbSchema([
        ['name' => 'Home', 'url' => url('/')],
        ['name' => $seoParams['title'], 'url' => $seoParams['slug']],
        ['name' => $cryptoDetails['title'], 'url' => $mUrl]
    ]) !!}
    {!! SchemaHelper::getImageObjectSchema($cryptoDetails['image'], $cryptoDetails['title']) !!}
    @if(!empty($cryptoDetails['faq']))
        {!! SchemaHelper::getFaqSchema($cryptoDetails['faq']) !!}
    @endif
    {!! SchemaHelper::icoDetailArticleSchema($cryptoDetails) !!}
@endpush

<div>
    <!-- brdcrmb -->
    <section class="web-color py-2 breadcrumb">
        <div class="container">
            <div class="row">
                <div class="d-flex flex-wrap gap-2 p-0 m-0 list-unstyled justify-content-center text-white">
                    <ul class="d-flex flex-wrap p-0 m-0 list-unstyled">
                        <li class="position-relative"><a href="{{ CommonHelper::makeUrl('/') }}" title="Home"
                                class="text-white text-decoration-none">Home</a></li>
                        <li class="position-relative">
                            <a href="{{ CommonHelper::makeUrl('/crypto-presale') }}" title="Crypto Presale" class="text-white text-decoration-none">Crypto Presale</a>
                        </li>
                        <li>{{ $cryptoDetails['name'] }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="my-3">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="gradientbg p-4 rounded-3">
                        <div class="row justify-content-between align-items-center">
                            <div class="col-xl-5 col-md-7 d-flex flex-wrap ">
                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    <div class="details_topimg">
                                        <img src="{{ CommonHelper::s3ImageOrDefault($cryptoDetails['imageUrl']) }}"
                                            class="attachment-full" loading="lazy"
                                            alt="{{ $cryptoDetails['img_alt_title'] ?: $cryptoDetails['title'] }}"
                                            title="{{ $cryptoDetails['title'] }}" width="60" height="60"
                                            onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                    </div>
                                    <div class="details_topcontent">
                                        <div class="d-flex flex-wrap align-items-center gap-2">
                                            @php
                                                $types = [
                                                    0 => 'ICO',
                                                    1 => 'IDO',
                                                    2 => 'IEO',
                                                    3 => 'Presale',
                                                ];
                                            @endphp

                                            <h1 class="fw-bold h5 mb-0">
                                                {{ $cryptoDetails['name'] }}
                                                {{ $types[$type] ?? '' }}
                                                <span class="fw-normal">({{ $cryptoDetails['alias'] }})</span>
                                            </h1>
                                            <!-- <a href="" class="bg-premium-btn text-black rounded-3 fw-bold fs-12 py-1 px-2 position-relative">PREMIUM</a> -->
                                        </div>
                                        <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
                                            <span><i class="fa-solid fa-calendar-days me-1"></i>
                                                @php
                                                    $start = $cryptoDetails['start_time'] ?? null;
                                                    $end = $cryptoDetails['end_time'] ?? null;
                                                    $isTba = ($cryptoDetails['start_end_tba'] ?? null) === 'TBA';
                                                @endphp

                                                @if($start === 'TBA' && $end === 'TBA')
                                                    TBA

                                                @elseif($start && $end)
                                                    {{ $start }} to {{ $end }}

                                                @elseif($start && !$end)
                                                    {{ $start }} to {{ $isTba ? 'TBA' : '' }}

                                                @elseif(!$start && $end)
                                                    {{ $isTba ? 'TBA' : '' }} to {{ $end }}

                                                @else
                                                    TBA
                                                @endif
                                            </span>
                                            @php
                                                $startTime = $cryptoDetails['start_time'] ?? null;
                                                $endTime   = $cryptoDetails['end_time'] ?? null;

                                                $now = now();

                                                $status = 'Upcoming';

                                                if ($cryptoDetails['start_end_tba'] == 'TBA') {
                                                    $status = 'Upcoming';
                                                } else {

                                                    $start = ($startTime && $startTime !== 'TBA') ? \Carbon\Carbon::parse($startTime) : null;
                                                    $end   = ($endTime && $endTime !== 'TBA') ? \Carbon\Carbon::parse($endTime) : null;

                                                    // Fix invalid range
                                                    if ($start && $end && $start > $end) {
                                                        [$start, $end] = [$end, $start];
                                                    }

                                                    if ($end && $now > $end) {
                                                        $status = 'Ended';
                                                    } elseif ($start && $end && $now >= $start && $now <= $end) {
                                                        $status = 'Ongoing';
                                                    } elseif ($start && $now < $start) {
                                                        $status = 'Upcoming';
                                                    }
                                                }
                                            @endphp

                                            <span class="bg-ongoing fs-11">{{ $status }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-5 text-end">
                                {{-- <a href="{{ route('submit-list-token-sale-crypto-presale-ico-ido-ieo', ['slug' => $slug]) }}"
                                    class="btn btn-primary fs-14">
                                    Edit Listing
                                </a> --}}
                                <a href="{{ $cryptoDetails['where_to_buy'] }}" class="btn btn-primary fs-14"
                                    title="Buy {{ $cryptoDetails['alias'] }}" target="_blank"
                                    rel="noreferrer nofollow noopener">Buy
                                    {{ $cryptoDetails['alias'] }}</a>
                            </div>
                        </div>

                        <div class="d-flex flex-wrap justify-content-between gap-2 mt-3">
                            <div class="detailsleftbtn">
                                <a href="{{ $cryptoDetails['website'] }}" title="{{ $cryptoDetails['name'] }}"
                                    class="mb-2 mb-md-0 btn btn-gradient fs-14 rounded-pill fw-bold" target="_blank"
                                    rel="noreferrer nofollow noopener">
                                    {{ $cryptoDetails['name'] }}({{ $cryptoDetails['alias'] }})
                                </a>
                                @if($cryptoDetails['white_paper_url'])
                                    <a href="{{ $cryptoDetails['white_paper_url'] }}" title="{{ $cryptoDetails['name'] }}"
                                        class="btn btn-gradient fs-14 rounded-pill fw-bold" target="_blank"
                                        rel="noreferrer nofollow noopener">
                                        {{ $cryptoDetails['name'] }} White Paper
                                    </a>
                                @endif
                            </div>

                            <div class="socialright d-flex flex-wrap gap-2 align-items-center">
                                <span class="fw-bold text-black h6 mb-0">Social Media:</span>
                                <div class="d-flex flex-wrap justify-content-center gap-2">
                                    @if (!empty($cryptoDetails['telegram']))
                                        <a href="{{ $cryptoDetails['telegram'] }}" class="social-icon d-flex justify-content-center align-items-center rounded-3 fs-6 telegram"
                                            title="Telegram" target="_blank" rel="noreferrer nofollow noopener"><i
                                                class="fa-brands fa-telegram"></i><span class="d-none">Telegram</span></a>
                                    @endif
                                    @if(!empty($cryptoDetails['twitter']))
                                        <a href="{{ $cryptoDetails['twitter'] }}" class="social-icon d-flex justify-content-center align-items-center rounded-3 fs-6 twitter"
                                            title="Twitter" target="_blank" rel="noreferrer nofollow noopener"><i
                                                class="fa-brands fa-x-twitter"></i><span class="d-none">Twitter</span></a>
                                    @endif
                                    @if(!empty($cryptoDetails['instagram']))
                                        <a href="{{ $cryptoDetails['instagram'] }}" class="social-icon d-flex justify-content-center align-items-center rounded-3 fs-6 instagram"
                                            title="Instagram" target="_blank" rel="noreferrer nofollow noopener"><i
                                                class="fab fa-instagram"></i><span class="d-none">Instagram</span></a>
                                    @endif
                                    @if(!empty($cryptoDetails['reddit']))
                                        <a href="{{ $cryptoDetails['reddit'] }}" class="social-icon d-flex justify-content-center align-items-center rounded-3 fs-6 reddit" target="_blank"
                                            title="Reddit" rel="noreferrer nofollow noopener"><i
                                                class="fa-brands fa-reddit-alien"></i><span class="d-none">Reddit</span></a>
                                    @endif
                                    @if(!empty($cryptoDetails['discord']))
                                        <a href="{{ $cryptoDetails['discord'] }}" class="social-icon d-flex justify-content-center align-items-center rounded-3 fs-6 discord"
                                            title="Discord" target="_blank" rel="noreferrer nofollow noopener"><i
                                                class="fab fa-discord"></i><span class="d-none">Discord</span></a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between mt-2 flex-wrap gap-2">
                    <p class="mb-0">Published By: <span>{{ $cryptoDetails['post_author']['dispaly_name'] }}</span></p>
                    <p class="mb-0">Published at:
                        <span>{{ \Carbon\Carbon::parse($cryptoDetails['created_at'])->format('Y-m-d') }}</span></p>
                </div>
                <div class="col-md-12 my-3">
                    <div class="bordertopview p-2 rounded-3">
                        <div class="d-flex flex-wrap justify-content-center align-items-center border-bottom pb-2 my-2">
                            <div class="detailsheading  text-center">
                                <span class="fw-bold h5 text-black">Token Details</span>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap justify-content-between px-3 py-2 gap-3 flex-column flex-md-row">
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Token Type</span>
                                <span class="btn btn-gradient fs-12 rounded-pill fw-bold">{{ CommonHelper::stageNameById($cryptoDetails['ico_ido_type'] ?? null) }}</span>
                            </div>
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Token Price</span>
                                <span
                                    class="fw-bold text-center mt-2 d-block h5">{{ $cryptoDetails['ico_price'] }}</span>
                            </div>
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Total Tokens</span>
                                <span
                                    class="fw-bold text-center mt-2 d-block h5">{{ $cryptoDetails['total_coin'] }}</span>
                            </div>

                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Tokens for Sale</span>
                                <span
                                    class="fw-bold text-center mt-2 d-block h5">{{ $cryptoDetails['quantity_of_coin'] }}</span>
                            </div>

                            @php
                                $quantity = $cryptoDetails['quantity_of_coin'] ?? 0;
                                $total = $cryptoDetails['total_coin'] ?? 0;

                                if (is_numeric($quantity) && is_numeric($total) && $total > 0) {
                                    $percent = number_format(($quantity / $total) * 100, 2) . '%';
                                } else {
                                    $percent = 'TBA';
                                }
                            @endphp
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">% of Supply</span>
                                <span class="fw-bold text-center mt-2 d-block h5">{{ $percent }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 my-3">
                    <div class="bordertopview p-2 rounded-3">
                        <div class="text-center border-bottom pb-2 my-2">
                            <div class="detailsheading  text-center">
                                <span class="fw-bold h5 text-black">Listing Information</span>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap justify-content-between px-3 py-2 gap-3 flex-column flex-md-row">
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Contract Address</span>
                                <span class="fw-bold darkredcolor text-center mt-2 d-block h5">
                                    {{ !empty($cryptoDetails['ico_project_id']) && !empty($contract[$cryptoDetails['ico_project_id']]) ? $contract[$cryptoDetails['ico_project_id']] : '-' }}</span>
                            </div>

                            @php
                                $qty = $cryptoDetails['quantity_of_coin'] ?? null;
                                $price = $cryptoDetails['ico_price'] ?? null;
                                $goal = $cryptoDetails['fund_asking_for'] ?? null;

                                if (!empty($goal) && $goal !== 'TBA') {
                                    $totalAmount = number_format((float) $goal);
                                } elseif (!empty($qty) && $qty !== 'TBA' && !empty($price) && $price !== 'TBA') {
                                    $totalAmount = number_format((float) $qty * (float) $price);
                                } else {
                                    $totalAmount = 'TBA';
                                }
                            @endphp

                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Fundraising Goal</span>
                                <span class="fw-bold text-center mt-2 d-block h5">
                                    {{ $totalAmount }}
                                </span>
                            </div>
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Soft Cap</span>
                                <span
                                    class="fw-bold text-center mt-2 d-block h5">{{ !empty($cryptoDetails['soft_cap']) ? $cryptoDetails['soft_cap'] : 'TBA' }}</span>
                            </div>
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Hard Cap</span>
                                <span
                                    class="fw-bold text-center mt-2 d-block h5">{{ !empty($cryptoDetails['hard_cap']) ? $cryptoDetails['hard_cap'] : 'TBA' }}</span>
                            </div>
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Personal Cap</span>
                                <span
                                    class="fw-bold text-center mt-2 d-block h5">{{ !empty($cryptoDetails['personal_cap']) ? $cryptoDetails['personal_cap'] : 'TBA' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 my-3">
                    <div class="bordertopview p-2 rounded-3">
                        <div class="text-center border-bottom pb-2 my-2">
                            <div class="detailsheading  text-center">
                                <span class="fw-bold h5 text-black">Other Information</span>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap justify-content-between px-3 py-2 gap-3 flex-column flex-md-row">
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Restricted Countries</span>
                                <span
                                    class="fw-bold text-center mt-2 d-block h5">{{ $cryptoDetails['country'] ?? 'Other'}}</span>
                            </div>
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Category</span>
                                <span
                                    class="fw-bold text-center mt-2 d-block h5">{{ $cryptoDetails['project_category']['title'] ?? 'N/A'}}</span>
                            </div>
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Launchpad</span>
                                <span
                                    class="fw-bold text-center mt-2 d-block h5">{{ $cryptoDetails['ico_launchpad']['title'] ?? 'N/A' }}</span>
                            </div>
                            <div class="informationblock text-center d-flex justify-content-between align-items-center flex-md-column gap-2">
                                <span class="d-block text-grey">Currency</span>
                                <span
                                    class="fw-bold text-center mt-2 d-block h5">{{ $cryptoDetails['accept_type'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 my-1">
                    <div class="d-flex justify-content-between">
                        <div>
                            @if($previous)
                                <a href="{{ CommonHelper::getIcoUrl($previous) }}"
                                    title="{{ $previous->title ?? $previous->name }}" class="btn btn-primary"><i
                                        class="fa-solid fa-left-long"></i> Previous</a>
                            @endif
                        </div>

                        @if($next)
                            <a href="{{ CommonHelper::getIcoUrl($next) }}" title="{{ $next->title ?? $next->name }}"
                                class="btn btn-primary">Next <i class="fa-solid fa-right-long"></i></a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="contentview contentconditon">
                        <h2>About {{ $cryptoDetails['name'] }} {{ $types[$type] ?? '' }} Project</h2>
                        {!! CommonHelper::addNoFollowToExternalLinks($cryptoDetails['description']) !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if (!empty($cryptoDetails['author_id']))
        <section>
            <div class="container">
                <div class="author-card rounded-3 position-relative">
                    <div class="d-flex align-items-start gap-2 align-items-center">
                        <div class="author-avatar rounded-circle d-flex align-items-center justify-content-center text-white fw-bold me-2">
                            <img src="{{ $cryptoDetails['post_author']['image'] }}"
                                alt="{{ $cryptoDetails['post_author']['dispaly_name'] ?? 'Author' }}" loading="lazy"
                                class="avatar avatar-120 photo rounded-circle td-animation-stack-type0-1" height="80"
                                width="80" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                        </div>

                        <div>
                            <p class="mb-0">About the Author <a
                                    href="{{URL::to('crypto-author/' . $cryptoDetails['post_author']['slug'])}}"
                                    class="text-decoration-none web-textcolor"
                                    title="{{ $cryptoDetails['post_author']['dispaly_name'] ?? 'Author' }}">
                                    <span
                                        class="h5 fw-bold web-textcolor">{{ $cryptoDetails['post_author']['dispaly_name'] ?? 'Author' }}</span>
                                </a></p>
                            <p class="author-role mb-0">Crypto Journalist at <a href="{{ URL::to('/')}}" title="Home"
                                    class="small web-textcolor">Cryptodisplay</a></p>
                        </div>
                    </div>

                    <div class="author-content">
                        <p class="author-bio my-2">
                            {!! $cryptoDetails['post_author']['about_us'] ?? 'No author description is
                            available.' !!}
                        </p>
                        <div class="d-flex gap-3">
                            <a class=" border-end pe-3 read-more-link text-decoration-none fw-bold fs-14 d-inline-flex align-items-center"
                                href="{{URL::to('crypto-author/' . $cryptoDetails['post_author']['slug'])}}">Read
                                More Articles By
                                {{ $cryptoDetails['post_author']['dispaly_name'] ?? 'Author' }}</a>
                            @if (!empty($cryptoDetails['post_author']['user']['linkedin_url']))
                                <a href="{{ $cryptoDetails['post_author']['user']['linkedin_url'] }}" target="_blank"
                                    rel="noopener noreferrer nofollow" class="read-more-link text-decoration-none fw-bold fs-14 d-inline-flex align-items-center">Connect Linkedin</a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if(!empty($loadedFaqs))
        <section class="faqsection bg-white p-4">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12 text-center mb-5">
                        <p class="h3 fw-bold heading-bdr position-relative mb-0">
                            Frequently Asked <span class="darkredcolor">Questions</span>
                        </p>
                    </div>

                    <div class="col-xl-5 text-center">
                        <img src="{{ asset('assets/images/faqdisplay.gif') }}" class="img-fluid mb-3" width="150"
                            height="150" alt="faq" loading="lazy"
                            onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                        <span class="h3 text-black d-block fw-bold">Explore Our FAQs</span>
                        <p>Find quick answers to commonly asked questions.</p>
                    </div>

                    <div class="col-xl-6 offset-xl-1">
                        <div class="accordion custom-accordion" id="faqAccordion">

                            {{-- SHOW ONLY LOADED FAQS --}}
                            @foreach ($loadedFaqs as $i => $faq)
                                @php $faqId = "faq_{$i}"; @endphp

                                <div class="accordion-item">
                                    <span class="accordion-header" id="heading{{ $faqId }}">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#{{ $faqId }}" aria-expanded="false" aria-controls="{{ $faqId }}">
                                            {!! $faq['question'] !!}
                                        </button>
                                    </span>

                                    <div id="{{ $faqId }}" class="accordion-collapse collapse"
                                        aria-labelledby="heading{{ $faqId }}" data-bs-parent="#faqAccordion">
                                        <div class="accordion-body">
                                            {!! $faq['answer'] !!}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        {{-- LOAD MORE BUTTON --}}
                        @if($hasMore)
                            <div class="text-center mt-3">
                                <button class="btn btn-primary" wire:click="loadMore">
                                    Load More
                                </button>
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </section>
    @endif


</div>