@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_token_exchange_listings');
$baseUrl = 'https://www.coingabbar.com/en/crypto-listings/';
@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('pageId')
<script>
    window.pageId = "{{ $seoData['id'] ?? '' }}";
</script>
@endpush

@push('head_scripts')
{!! SchemaHelper::webpageSchema($mTitle ?? null, $mDescr ?? null) !!}
{!! SchemaHelper::getImageObjectSchema('https://cryptohindinews.in/assets/images/logo/hindi-black-logo.webp',$mTitle) !!}
{!! SchemaHelper::getFaqSchema(json_encode($seoData['faq'])) !!}
{!! SchemaHelper::getBreadcrumbSchema([['name' => 'Home', 'url' => url('/')],['name' => $seoData['breadcrumb'], 'url' => $mUrl]]) !!}
{!! SchemaHelper::itemListSchema($mTitle ?? null, $mUrl ?? null, $baseUrl ?? null, $listingData ?? [],1,'') !!}
@endpush
@push('styles')

<link rel="stylesheet" type="text/css" href="{{URL::asset('/assets/css/daterangepicker.css')}}">
{{--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">--}}
@endpush
<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'] ?? 'Lost Password'}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-lightgray py-3">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 col-12 text-center topheading">
                    {!! $seoData['top_page_content'] !!}
                </div>
            </div>
            <div class="row">
                <div class="col-xl-12">
                    <form wire:submit.prevent="search"
                        class="justify-content-end align-items-center d-flex flex-wrap my-2 gap-2"
                        x-data
                        x-init="
        const el = $refs.datefilter;
        $(el).daterangepicker({
            autoUpdateInput: false,
            locale: { cancelLabel: 'Clear' }
        });

        $(el).on('apply.daterangepicker', function(ev, picker) {
            const val = picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD');
            el.value = val;
            el.dispatchEvent(new Event('input'));
        });

        $(el).on('cancel.daterangepicker', function() {
            el.value = '';
            el.dispatchEvent(new Event('input'));
        });
      ">
                        <!-- Keyword -->
                        <div class="">
                            <input type="text" class="prf-int" wire:model.defer="filters.keyword" placeholder="सर्च बाय कीवर्ड...">
                        </div>

                        <!-- Exchange Type -->
                        <div class="">
                            <label for="type" class="visually-hidden">Type</label>
                            <select class="form-select prf-int" id="type" wire:model="filters.exchange_type">
                                <option value="">सिलेक्ट एक्सचेंज टाइप</option>
                                <option value="upcoming">अपकमिंग</option>
                                <option value="listed">लिस्टेड</option>
                            </select>
                        </div>

                        <!-- Platform -->
                        <div class="">
                            <label for="platform" class="visually-hidden">Platform</label>
                            <select class="form-select prf-int" id="platform" wire:model="filters.exchange_id">
                                <option value="">सेलेक्ट प्लैटफ़ॉर्म</option>
                                @foreach ($coinData as $coin)
                                <option value="{{ $coin['id'] }}">{{ $coin['name'] }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Date Range -->
                        <div class="">
                            <input x-ref="datefilter" type="text" class="form-control rounded-4"
                                readonly placeholder="Search by Date"
                                wire:model.defer="filters.date">
                        </div>

                        <!-- Buttons -->
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary py-1 rounded-pill fw-bold mx-1">सर्च</button>
                            <button type="button" wire:click="resetFilters" class="btn btn-primary py-1 rounded-pill fw-bold mx-1">रीसेट</button>
                        </div>
                    </form>

                    <div class="row">
                        <div class="col-lg-12 pb-3">
                            <table class="table table-bordered table-responsive d-md-table even-odd-tbl d-lg-table d-block">
                                <thead>
                                    <tr class="text-center">
                                        <th>दिनांक / समय</th>
                                        <th>नाम</th>
                                        <th>एक्सचेंज</th>
                                        <th>लिस्टिंग / डीलिस्टिंग</th>
                                        <th>नंबर ऑफ़ लिस्टिंग</th>
                                    </tr>
                                </thead>
                                <tbody id="listing-table-body">

                                    @foreach ($listingData as $listing)
                                                                        <tr>
                                        <td>
                                            @if (date('d-M-Y', strtotime($listing['end_date'])) == '31-Dec-2029')
                                            <div class="d-flex flex-column text-center">
                                                TBA
                                            </div>
                                            @else
                                            <div class="d-flex flex-column text-center">
                                                <span class="fs-6 fw-medium">{{ date('d-M-Y', strtotime($listing['end_date']))  }}</span>
                                                <span class="small text-dark fw-medium">UTC {{ date('h:i', strtotime($listing['time'])) }}</span>
                                            </div>
                                            @endif
                                        </td>
                                        <td>
                                            <a href="{{ config('app.coingabbar_domain_en') . 'crypto-listings/' . $listing['slug'] }}" target="_blank" rel="noreferrer noopener" class="tbl-data-heading d-flex align-items-center text-decoration-none" title="{{ $listing['alias'] }}">
                                                <div>
                                                    <img src="{{CommonHelper::s3ImageOrDefault( $listing['image']) }}" class="me-2 object-fit-cover" alt="{{ $listing['img_alt_title'] ?? $listing['alias'] }} logo" width="18" height="18" loading="lazy"><span class="text-paragraph">{{ $listing['alias'] }}</span>
                                                </div>
                                            </a>
                                        </td>
                                        <td>
                                            <img src="{{$listing['exchange_image']}}" alt="{{ $listing['exchange_name'] }} logo" width="20" height="20" class="rounded-circle me-1 ms-2">
                                            <span>{{ $listing['exchange_name'] }}</span>
                                        </td>
                                        <td class="text-center">Listing</td>
                                        <td class="text-center">1</td>
                                    </tr>
                                    @endforeach

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

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

    <livewire:faq-section pageType="crypto-token-exchange-listings" />
</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 src="https://cdn.jsdelivr.net/npm/flatpickr"></script>--}}

@endpush