@push('metadata')
@php
$page_id = 36;
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords= $seoData['meta_keywords'];
$mUrl = url()->current();
$mImage = config('constants.crypto-presale');
@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

@push('styles')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="{{URL::asset('/assets/css/daterangepicker.css')}}">
<style type="text/css">
    .sliderview .owl-nav i {
        margin: 0;
        cursor: pointer;
        width: 30px;
        height: 30px;
        color: #fff;
        background-color: rgba(0, 0, 0, .4);
        font-weight: 700;
        font-size: 16px;
        transition: .6s;
        border-radius: 50%;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sliderview .owl-nav {
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        margin-top: 0 !important;
    }

    .sliderview .owl-nav {
        position: absolute;
        top: 50%;
        background-color: #000;
        color: #fff;
        margin: 0;
        transition: all 0.3s ease-in-out;
    }

    .sliderview .owl-nav button.owl-prev {
        left: 0;
    }

    .sliderview .owl-nav button.owl-next {
        right: 0;
    }


    .sliderview .owl-nav button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.38) !important;
    }

    .sliderview span {
        font-size: 70px;
        position: relative;
        top: -5px;
    }

    .sliderview .owl-nav button:focus {
        outline: none;
    }

    .sliderview .item {
        width: 100%;
    }
</style>

<div>
    <section class="bg-darkpink p-2 breadcrumb mb-0">
        <div class="container">
            <div class="row">
                <div class="d-flex gap-2 p-0 m-0 list-unstyled justify-content-center text-white">
                    <ul class="d-flex p-0 m-0 list-unstyled align-items-center">
                        <li><a href="{{ URL('/') }}" class="text-decoration-none text-white" title="Home">Home</a></li>
                        <li>{{ $seoData['breadcrumb'] }}</li>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-lightgray py-3 mt-2">
        <div class="container">
            <div class="row">
                <div class="col-xxl-5 col-xl-5 col-lg-6 topheading headingcondition">
                    {!! $seoData['top_page_content'] !!}
                </div>
                <div class="col-xxl-7 col-xl-7 col-lg-6 mb-3">
                    <div class="tophalf">
                        <a href="https://bmic.ai/" title="Half Banner" target="blank" rel="noreffer nofollow noopener">
                            <img src="{{ URL::asset('assets/images/halfbanner.jpg') }}" class="img-fluid w-100 h-auto rounded-3" alt="Half Banner" width="730" height="154">
                            <span class="d-none">Half Banner</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="row">
                <form method="GET" class="row flex-wrap d-none d-lg-flex mb-2" id="airdrop-form">
                    <div class="col-xxl-3 col-xl-2 col-lg-2 col-md-3 col-sm-6 py-2 px-xl-2">
                        <input type="text" class="prf-int" name="search_text" id="search_text" value="" placeholder="सर्च बाय कीवर्ड...">
                    </div>
                    <div class="col-xxl-2 col-xl-2 py-2 col-lg-2">
                        <select class="form-select prf-int" name="ico_type" aria-label="Ico Type" id="ico_type">
                            <option value="Ongoing">
                                ऑनगोइंग</option>
                            <option value="Upcoming">
                                अपकमिंग</option>
                            <option value="Ended">
                                एंडेड</option>
                        </select>
                    </div>
                    <div class="col-xxl-3 col-xl-3 col-lg-2 py-2">
                        <input type="text" name="datefilter" value="" class="prf-int" placeholder="सेलेक्ट डेट">
                    </div>
                    <div class="col-xxl-2 col-xl-2 col-lg-3 py-2 d-flex d-sm-block align-items-center text-center">
                        <button type="submit" class="limegreen-btn mx-1" title="सर्च" id="form-submit">सर्च</button>
                        <a href="{{ url('upcoming-crypto-presale-ico-ido-ieo') }}" class="limegreen-btn mx-1" title="रीसेट">रीसेट</a>
                    </div>
                </form>
                <div class="col-lg-12 pb-3">
                    <table class="table table-bordered table-responsive d-xl-table even-odd-tbl d-lg-table d-block">
                        <thead>
                            <tr class="text-center">
                                <th>नाम</th>
                                <th>स्टेज</th>
                                <th>लांच पैड</th>
                                <th>समाप्त होता है</th>
                                <th>टोकन फॉर सेल</th>
                                <th>रेट</th>
                                <th>फ़ंडरेज़िंग गोल</th>
                            </tr>
                        </thead>
                        <tbody id="presale-table-body">
                            @foreach ($icoData as $ico)
                                                        <tr class="{{ $class }}">
                                <td>
                                    <div class="d-flex align-items-center justify-content-between gap-2">
                                        <a href="{{ config('app.coingabbar_domain_en') . 'crypto-ico-details/' . $ico['slug'] }}" target="_blank" rel="noopener noreferrer nofollow" class="tbl-data-heading d-flex justify-content-between align-items-center">
                                            <div>
                                                <img src="{{ $ico['image'] }}" alt="{{ $ico['img_alt_title']??$ico['name'] }}" width="18" height="18" class="me-2 object-fit-cover">
                                                {{$ico['name']}}
                                                <small class="text-dark small ms-4 ps-1 d-block">({{$ico['alias']}})</small>
                                            </div>
                                        </a>
                                        @if ($ico['featured'] == 1)
                                        <span class='btn-sm ms-2 bg-feature-btn'>Featured</span>
                                        @elseif ($ico['featured'] == 2)
                                        <button class='bg-premium-btn btn btn-warning btn-sm ms-2'>Premium</button>
                                        @endif

                                    </div>
                                </td>
                                <td class="text-center">{{ $ico['project_type']['title'] }}</td>
                                <td class="text-center">{{ $ico['ico_launchpad']['title'] }}</td>
                                <td class="text-end">
                                    <span class="cursor-pointer" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="Starts from 24 Jun, 2025 to 15 Nov, 2025">
                                        {{ CommonHelper::timeElapsedString($ico['end_time'])}}
                                    </span>
                                </td>
                                <td class="text-end">{{ isset($ico['quantity_of_coin']) ? CommonHelper::numberToMbtShort($ico['quantity_of_coin']) : 'N/A' }}</td>
                                <td class="text-end">{{ $ico['ico_price'] }} <span class="text-dark">(${{ $ico['accept_type']  }})</span></td>
                                <td class="text-end">{{ isset($ico['fund_asking_for']) ? CommonHelper::numberToMbtShort($ico['fund_asking_for']) : 'N/A' }} <span class="text-dark">(${{ $ico['accept_type']  }})</span></td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="content-view">
                    {!! CommonHelper::addNoFollowToExternalLinks(@$seoData['description']) !!}
                </div>
            </div>
        </div>
    </div>

    @if(!empty($faqs))
    <livewire:faq-section pageType="{{ $slug }}" />
    @endif
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"
    integrity="sha384-DRe+1gYJauFEenXeWS8TmYdBmDUqnR5Rcw7ax4KTqOxXWd4NAMP2VPU5H69U7yP9" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js" defer></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type="text/javascript">
    $('.slidertopsection').owlCarousel({
        autoplay: true,
        rewind: false,
        /* use rewind if you don't want loop */
        margin: 20,
        loop: true,
        responsiveClass: true,
        autoHeight: false,
        autoplayTimeout: 2000,
        smartSpeed: 800,
        dots: false,
        nav: true,
        navText: [
            '<i class="fa-solid fa-chevron-left fa-2x"></i>',
            '<i class="fa-solid fa-chevron-right fa-2x"></i>'
        ],
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 1
            },
            1024: {
                items: 1
            },
            1366: {
                items: 1
            }
        }
    });
</script>
@endpush