@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');
@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 name="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="{{ @$mTitle }}" />
<meta property="twitter:description" content="{{ @$mDescr }}" />
<meta property="twitter:url" content="{{ @$mUrl }}" />
<meta property="twitter:image" content="{{ @$mImage }}" />
<meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
<meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
@endpush

<div>
    <section class="brdcrumb">
        <div class="container">
            <ul class="mb-0">
                <li><a href="/" title="Home">Home</a><i class="fas fa-chevron-right small text-dark mx-2"></i></li>
                <li><a href="{{ $cryptoDetails['ico_url'] }}" title="Home">{{ CommonHelper::stageNameById($cryptoDetails['ico_ido_type']) ?? 'Presale' }}</a><i
                        class="fas fa-chevron-right small text-dark mx-2"></i></li>
                <li>{{ $cryptoDetails['title'] ?? 'Crypto Ico Details' }}</li>
            </ul>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="token-card">
                <div class="token-header flex-wrap">
                    <div class="token-title d-flex align-items-center">
                        <img src="{{ $cryptoDetails['image'] }}"
                            class="object-fit-cover rounded-circle me-3 ico-detail-logo"
                            alt="{{ $cryptoDetails['img_alt_title'] ?: $cryptoDetails['title'] }}"
                            title="{{ $cryptoDetails['title'] }}" width="80" height="80" />
                        <span class="d-none">Logo</span>
                        <div>
                            <div class="token-name d-flex align-items-center gap-0 gap-md-2 mb-0 flex-wrap">
                                <h1 class="mb-0 fs-3 fw-semibold">
                                    {{ $cryptoDetails['name'] }}
                                </h1>
                                <span class="fs-6">({{ $cryptoDetails['alias'] }})</span>
                                <span
                                    class="presale-badge">{{ CommonHelper::stageNameById($cryptoDetails['ico_ido_type']) ?? 'Presale' }}</span>
                            </div>
                            <div class="whitepaper-section mt-2 mt-md-0">
                                <div class="social-icons">
                                    @php
                                    $socials = [
                                    'twitter' => ['url' => $cryptoDetails['twitter'] ?? null, 'class' => 'buy-button
                                    p-2',
                                    'icon' => 'fab fa-twitter text-white'],
                                    'discord' => ['url' => $cryptoDetails['discord'] ?? null, 'class' => 'buy-button
                                    p-2',
                                    'icon' => 'fab fa-discord text-white'],
                                    'youtube' => ['url' => $cryptoDetails['youtube_link'] ?? null, 'class' =>
                                    'buy-button p-2', 'icon' => 'fab fa-youtube text-white'],
                                    'telegram' => ['url' => $cryptoDetails['telegram'] ?? null, 'class' => 'buy-button
                                    p-2',
                                    'icon' => 'fab fa-telegram text-white'],
                                    'telegram_group' => ['url' => $cryptoDetails['telegram_group'] ?? null, 'class' =>
                                    'buy-button p-2', 'icon' => 'fab fa-telegram text-white'],
                                    'facebook' => ['url' => $cryptoDetails['facebook'] ?? null, 'class' =>
                                    'buy-button p-2', 'icon' => 'fab fa-facebook-f text-white'],
                                    'medium' => ['url' => $cryptoDetails['medium'] ?? null, 'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-medium text-white'],
                                    'instagram' => ['url' => $cryptoDetails['instagram'] ?? null, 'class' =>
                                    'buy-button p-2', 'icon' => 'fab fa-instagram text-white'],
                                    'reddit' => ['url' => $cryptoDetails['reddit'] ?? null, 'class' => 'buy-button p-2',
                                    'icon' => 'fab fa-reddit text-white'],
                                    'linkedin' => ['url' => $cryptoDetails['linkedin'] ?? null, 'class' =>
                                    'buy-button p-2', 'icon' => 'fab fa-linkedin-in text-white'],
                                    'white_paper' => ['url' => $cryptoDetails['white_paper_url'] ?? null, 'class' =>
                                    'buy-button p-2', 'icon' => 'fas fa-file-lines text-white']
                                    ];
                                    @endphp

                                    @foreach($socials as $key => $item)
                                    @if(!empty($item['url']))
                                    <a href="{{ $item['url'] }}" class="{{ $item['class'] }}" target="_blank"
                                        rel="noopener" title="{{  ucfirst($key) }}">
                                        <i class="{{ $item['icon'] }}"></i>
                                    </a>
                                    @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="timerSection" class="timer-section mt-3 mt-lg-0">
                        <div class="presale-live">
                            <p class="mb-0">
                                {{ CommonHelper::stageNameById($cryptoDetails['ico_ido_type']) }}
                                <span id="presaleStatus" class="live-now"></span>
                            </p>
                        </div>

                        <div>
                            <span id="countdownTimer">--D : --H : --M : --S</span>
                        </div>

                        <div class="dates">
                            <span id="dateRange">-- - --</span>
                        </div>
                    </div>
                </div>
                <div class="action-buttons d-flex justify-content-between align-items-center flex-wrap px-0">
                    <div class="d-flex gap-2 flex-wrap">
                        <a href="{{ CommonHelper::makeUrl('/submit-crypto-presale-ico-ido-ieo-projects') }}"
                            class="btn btn-outline-dark btn-sm action-btn me-2" title="Submit New Crypto Presale">
                            <i class="fas fa-paper-plane me-1"></i> Submit
                        </a>
                        <form action="{{ route('update-request', ['slug' => $slug]) }}" method="POST" class="d-inline">
                            @csrf
                            <button type='submit' class="btn btn-outline-dark btn-sm action-btn me-2" @if(Auth::check())
                                wire:click.="checkLoginAndEdit" @else onclick="openLoginPopup()" @endif>
                                <i class="fas fa-pen-to-square me-1"></i> Edit
                            </button>
                        </form>
                        <a href="{{ CommonHelper::makeUrl('/crypto-presale-ico-marketing-campaign') }}"
                            class="btn btn-outline-dark btn-sm action-btn" title="Advertise">
                            <i class="fas fa-bullhorn me-1"></i> Advertise
                        </a>
                    </div>
                    <div class="d-flex gap-2 flex-wrap">
                        @if(! empty($cryptoDetails['where_to_buy']))
                        <a href="{{  $cryptoDetails['where_to_buy'] ?? '#'}}" target="_blank"
                            rel="noopener noreferrer nofollow" class="link-customize457 buy-button" title="Buy Now">Buy
                            Now</a>
                        @endif
                        @if(!empty($cryptoDetails['website']))
                        <a href="{{  $cryptoDetails['website'] ?? '#'}}" target="_blank"
                            rel="noopener noreferrer nofollow" class="link-customize457 buy-button"
                            title="Visit Website">Visit
                            Website</a>
                        @endif
                    </div>
                </div>
                <!-- Tokonomics Section -->
                <div class="tokonomics-section mt-4">
                    <div class="tokonomics-header">
                        <div class="tokonomics-title">
                            <span>Tokonomics</span>
                        </div>
                    </div>
                    <div class="tokonomics-container">
                        <div class="row tokonomics-row pt-3">
                            <div class="col-sm-4 mb-3 mb-sm-0">
                                <div class="tokonomics-label"><span>Category</span></div>
                                <div class="tokonomics-value">
                                    <span>{{ $cryptoDetails['project_category']['title'] ?? 'N/A'}}</span>
                                </div>
                            </div>
                            <div class="col-sm-4 mb-3 mb-sm-0">
                                <div class="tokonomics-label"><span>Platform</span></div>
                                <div class="tokonomics-value">
                                    <span>{{ $cryptoDetails['ico_launchpad']['title'] ?? 'N/A'}}</span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="tokonomics-label"><span>Accept Type</span></div>
                                <div class="tokonomics-value">
                                    <span>{{ $cryptoDetails['accept_type'] ?? '"USDT'}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row tokonomics-row">
                            <div class="col-sm-4 mb-3 mb-sm-0">
                                <div class="tokonomics-label"><span>{{ CommonHelper::stageNameById($cryptoDetails['ico_ido_type']) }} Price</span></div>
                                <div class="tokonomics-value">
                                    <span>{{ $cryptoDetails['ico_price'] . ' (' . $cryptoDetails['accept_type'] . ' )' ?? 'N/A'}}</span>
                                </div>
                            </div>
                            <div class="col-sm-4 mb-3 mb-sm-0">
                                <div class="tokonomics-label"><span>1 USDT</span></div>
                                @php
                                function calculateTokensPerUsdt($price)
                                {
                                if ($price === 'TBA' || empty($price) || !is_numeric($price) || $price <= 0) {
                                    return 'TBA' ; } return number_format(1 / $price, 4); } @endphp <div
                                    class="tokonomics-value">
                                    <span>{{ $cryptoDetails['one_usdt'] ?? calculateTokensPerUsdt($cryptoDetails['ico_price']) }}
                                    </span>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="tokonomics-label"><span>Fundraising Goal</span></div>
                            <div class="tokonomics-value">
                                <span>
                                    {{ is_numeric($cryptoDetails['fund_asking_for'] ?? null)
                                    ? number_format($cryptoDetails['fund_asking_for'])
                                    : 'TBA' }}
                                </span>

                            </div>
                        </div>
                    </div>
                    <div class="row tokonomics-row">
                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Total Supply</span></div>
                            <div class="tokonomics-value">
                                <span>{{ $cryptoDetails['total_coin'] ? number_format($cryptoDetails['total_coin']) : 'N/A' }}</span>
                            </div>
                        </div>
                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Tokens for Sale</span></div>
                            <div class="tokonomics-value">
                                <span>{{ $cryptoDetails['quantity_of_coin'] ? number_format($cryptoDetails['quantity_of_coin']) : 'N/A' }}</span>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="tokonomics-label"><span>% of Supply</span></div>
                            <div class="tokonomics-value"><span>
                                    @if(!empty($cryptoDetails['total_coin']) &&
                                    !empty($cryptoDetails['quantity_of_coin']) && $cryptoDetails['quantity_of_coin'] >
                                    0)
                                    {{ number_format(($cryptoDetails['quantity_of_coin'] / $cryptoDetails['total_coin']) * 100, 2) }}%
                                    @else
                                    N/A
                                    @endif
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="row tokonomics-row pb-0">
                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Blockchain</span></div>
                            <div class="tokonomics-value">
                                <span>{{ $cryptoDetails['project']['title'] ?? 'others' }}</span>
                            </div>
                        </div>
                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Contract Address</span></div>
                            <div class="tokonomics-value d-flex align-items-center">
                                @if (!empty($cryptoDetails['contract_address']))
                                <span id="tokenId" data-copy="{{ $cryptoDetails['contract_address'] ?? '' }}">
                                    {{ $cryptoDetails['contract_address'] ?? '' }}
                                </span>
                                <button class="mainbluebtn px-2 rounded-circle" title="Copy to clipboard"
                                    onclick="copyToClipboard(this)">
                                    <i class="far fa-copy fs-14"></i>
                                </button>
                                @else
                                -
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="tokonomics-label"><span>Website</span></div>
                            <div class="tokonomics-value">
                                <a href="{{  $cryptoDetails['website'] ?? '#'}}" target="_blank"
                                    rel="noopener noreferrer nofollow" class="text-decoration-underline"
                                    title="Visit Website">Visit
                                    Website</a>
                            </div>
                        </div>

                    </div>
                    @if($cryptoDetails['hard_cap'] || $cryptoDetails['soft_cap'] || $cryptoDetails['personal_cap'])
                    <div class="row tokonomics-row">
                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Hard Cap</span></div>
                            <div class="tokonomics-value">
                                <span>
                                    {{ is_numeric($cryptoDetails['hard_cap'] ?? null)
                    ? number_format($cryptoDetails['hard_cap']) . ' (' . ($cryptoDetails['accept_type'] ?? '-') . ')'
                    : 'N/A' }}
                                </span>
                            </div>
                        </div>

                        <div class="col-sm-4 mb-3 mb-sm-0">
                            <div class="tokonomics-label"><span>Soft Cap</span></div>
                            <div class="tokonomics-value">
                                <span>
                                    {{ is_numeric($cryptoDetails['soft_cap'] ?? null)
                    ? number_format($cryptoDetails['soft_cap']) . ' (' . ($cryptoDetails['accept_type'] ?? '-') . ')'
                    : 'N/A' }}
                                </span>
                            </div>
                        </div>

                        <div class="col-sm-4 mb-3">
                            <div class="tokonomics-label"><span>Personal Cap</span></div>
                            <div class="tokonomics-value">
                                <span>
                                    {{ is_numeric($cryptoDetails['personal_cap'] ?? null)
                    ? number_format($cryptoDetails['personal_cap']) . ' (' . ($cryptoDetails['accept_type'] ?? '-') . ')'
                    : 'N/A' }}
                                </span>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        <!-- Project Description -->
        <div class="row">
            <div class="col-12 my-2 text-center d-block"></div>
            <div class="col-12 mb-3 mt-3 mt-lg-0">
                <div>
                    <h2 class="h4 heading-bdr-left">About
                        {{ $cryptoDetails['name']  }} ({{ $cryptoDetails['alias'] }}) Project
                    </h2>
                    <div class="details-page">
                        <p>
                            {!! $cryptoDetails['description'] !!}
                        </p>
                    </div>
                    <div class="nav-buttons d-flex justify-content-center justify-content-lg-between flex-wrap">
                        @if(!empty($prev))
                        <a class="prev-btn interlink-btn" href="{{ $prev['slug'] }}" title="{{ $prev['title'] }}">
                            <i class="fas fa-arrow-left me-1"></i> {{ $prev['title'] ?? '' }}
                        </a>
                        @endif
                        @if(!empty($next))
                        <a class="next-btn interlink-btn" href="{{ $next['slug'] }}" title="{{ $next['title'] }}">
                            {{ $next['title'] }} <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
</div>
</section>

<section class="py-4">
    <div class="container">
        <div class="row">
            <div class="col-xl-8">
                <div class="section-title text-center">
                    <span class="fw-bold h4 d-block">Frequently Asked Questions</span>
                    <p>Have questions? We have answers!</p>
                </div>
                <div class="accordion" id="faqAccordion">
                    @if(!empty($loadedFaqs))
                    @foreach($loadedFaqs as $key => $faq)
                    <div class="accordion-item">
                        <h2 class="mb-0" id="heading{{ $key }}">
                            <button class="accordion-header collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapse{{ $key }}" aria-expanded="false"
                                aria-controls="collapse{{ $key }}">
                                {{ $faq['question'] }}
                            </button>
                        </h2>

                        <div id="collapse{{ $key }}" class="accordion-collapse collapse"
                            aria-labelledby="heading{{ $key }}" data-bs-parent="#faqAccordion">

                            <div class="accordion-body">
                                {!! $faq['answer'] !!}
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @else
                    <div>
                        <p class="text-center">No Faqs Are Available</p>
                    </div>
                    @endif
                </div>
                @if($hasMore)
                <div class="text-center mt-3">
                    <button wire:click="loadMore" wire:key="load-more-{{ count($loadedFaqs) }}" class="btn btn-primary">
                        Load More
                    </button>
                </div>
                @endif

            </div>

            <div class="col-xl-4 aos-init aos-animate" data-aos="fade-down">
                <div class="contact_block text-center">
                    <div class="iconbox mb-4"><img alt="Contact Us" loading="lazy" width="75" height="75"
                            decoding="auto"
                            loading="eager" data-nimg="1" src="/assets/images/contactus/contact-us.png"
                            style="color: transparent;"><span class="d-none">Banner header</span></div>
                    <div class="contact_faq"><span>You have different questions?</span>
                        <p>Our team will answer all your questions. We ensure a quick response.</p><a
                            class="btn-main primary-btn shadow" title="Contact Us"
                            href="{{ CommonHelper::makeUrl('/contact-crypto-presale-team') }}"
                            title="Contact Us For Query">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script>
    let startTime = @json($cryptoDetails['start_time'] ?? null);
    let endTime = @json($cryptoDetails['end_time'] ?? null);

    const timerSection = document.getElementById("timerSection");
    const statusEl = document.getElementById("presaleStatus");
    const timerEl = document.getElementById("countdownTimer");
    const dateRangeEl = document.getElementById("dateRange");

    if (!timerSection || !statusEl || !timerEl || !dateRangeEl) {
        console.warn('Timer: missing DOM element(s).');
    } else {
        if (!startTime || !endTime) {
            timerSection.style.display = "none";
        } else {
            try {
                const s = startTime.split("T")[0];
                const e = endTime.split("T")[0];
                dateRangeEl.textContent = `${s} - ${e}`;
                timerSection.style.display = "";
            } catch (err) {
                console.warn('Timer: invalid date format', err);
            }

            function updateCountdown() {
                const now = Date.now();
                const start = new Date(startTime).getTime();
                const end = new Date(endTime).getTime();

                if (isNaN(start) || isNaN(end)) {
                    statusEl.textContent = "Invalid date";
                    timerEl.textContent = "--D : --H : --M : --S";
                    return;
                }

                if (now < start) {
                    statusEl.textContent = "Coming Soon";
                    let diff = start - now;
                    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
                    const minutes = Math.floor((diff / (1000 * 60)) % 60);
                    const seconds = Math.floor((diff / 1000) % 60);
                    const pad = (n) => String(n).padStart(2, '0');
                    timerEl.style.display = "inline";
                    timerEl.textContent = `${days}D : ${pad(hours)}H : ${pad(minutes)}M : ${pad(seconds)}S`;
                    return;
                }

                if (now >= end) {
                    statusEl.textContent = "Ended";
                    timerEl.style.display = "inline";
                    timerEl.textContent = "00D : 00H : 00M : 00S";
                    timerEl.style.display = "none";
                    return;
                }

                statusEl.textContent = "Live Now";
                let diff = end - now;
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
                const minutes = Math.floor((diff / (1000 * 60)) % 60);
                const seconds = Math.floor((diff / 1000) % 60);
                const pad = (n) => String(n).padStart(2, '0');
                timerEl.style.display = "inline";
                timerEl.textContent = `${days}D : ${pad(hours)}H : ${pad(minutes)}M : ${pad(seconds)}S`;
            }

            updateCountdown();
            setInterval(updateCountdown, 1000);
        }
    }
</script>
<script>
    function copyToClipboard(button) {
        const parentDiv = button.closest('.address-text, .copy-icon, div');
        const target = document.querySelector('[data-copy]');

        if (!target) return;

        const text = target.getAttribute('data-copy');
        if (!text) return;

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text)
                .then(() => showCheck(button))
                .catch(() => fallbackCopy(text, button));
        } else {
            fallbackCopy(text, button);
        }
    }

    function fallbackCopy(text, button) {
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();

        try {
            document.execCommand('copy');
            showCheck(button);
        } catch {
            alert("Copy failed");
        }

        document.body.removeChild(textarea);
    }

    function showCheck(button) {
        const originalHTML = button.innerHTML;
        button.innerHTML = '✔️';
        setTimeout(() => button.innerHTML = originalHTML, 1000);
    }
</script>
@endpush
</div>