@push('metadata')
@php
$page_id = 36;
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords= $seoData['meta_keywords'];
$mUrl = url()->current();

if (Str::contains($mUrl, 'crypto-upcoming-airdrop')) {
$mImage = config('constants.crypto_upcoming_airdrop');
} else {
$mImage = config('constants.crypto_airdrop_token_giveaway');
}
@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, $airdropData ?? [],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">--}}

<link rel="stylesheet" href="{{URL::asset('/assets/css/daterangepicker.css')}}" 
    media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="{{URL::asset('/assets/css/daterangepicker.css')}}"></noscript>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" 
    media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"></noscript>

@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'] }}</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">
                <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'));
                        });
                    ">

                    <div>
                        <input type="text"
                            class="prf-int"
                            placeholder="सर्च बाय कीवर्ड..."
                            wire:model="search_text">
                    </div>

                    <div>
                        <label for="airdrop-type" class="visually-hidden">Airdrop Type</label>
                        <select id="airdrop-type" class="form-select prf-int"
                            wire:model="airdrop_neft_type">
                            <option value="">एयरड्रॉप टाइप</option>
                            <option value="0">एयरड्रॉप</option>
                            <option value="1">NFTs</option>
                        </select>
                    </div>

                    <div>
                        <label for="platform" class="visually-hidden">Platform</label>
                        <select id="platform" class="form-select prf-int"
                            wire:model="platform">
                            <option value="">सेलेक्ट प्लैटफ़ॉर्म</option>

                            @foreach ($airdropPlatfrom as $plat)
                                <option value="{{ $plat['id'] }}">
                                    {{ $plat['title'] }}
                                </option>
                            @endforeach

                        </select>
                    </div>

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

                    <div class="gap-2 d-flex align-items-center text-center">

                        <button type="submit"
                            class="btn btn-primary py-1 rounded-pill fw-bold">
                            सर्च
                        </button>

                        <button type="button"
                            wire:click="resetFilters"
                            class="btn btn-primary py-1 rounded-pill fw-bold">
                            रीसेट
                        </button>

                    </div>

                </form>
                <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>
                                <th>कार्य की संख्या</th>
                            </tr>
                        </thead>
                        <tbody id="airdrop-table-body">
                            @forelse ($airdropData as $airdrop)
                                                        <tr>
                                <td>
                                    <a href="{{ config('app.coingabbar_domain_en') . 'crypto-airdrops/' . $airdrop['slug'] }}" target="_blank" rel="noopener noreferrer nofollow" class="text-pink text-decoration-none ms-2 d-block">
                                        <div class="d-flex justify-content-start align-items-center gap-2 my-1">
                                            <img src="{{  CommonHelper::s3ImageOrDefault($image )}}" class="rounded-circle" alt="{{ $airdrop['crypto_name'] ?? $airdrop['coin_name'] }}" width="40" height="40" loading="lazy">
                                            <div>
                                            {{ $airdrop['crypto_name'] ?? $airdrop['coin_name'] }}
                                            <small class="text-paragraph small d-block">
                                                ({{ $airdrop['crypto_symbol'] ?? $airdrop['coin_symbol'] }})
                                            </small>
                                            </div>
                                        </div>
                                    </a>
                                </td>
                                <td class="text-center">{{ $airdrop['airdrop_neft_type'] == 0 ? 'Airdrop' : 'NEFt'}}</td>
                                <td class="text-center">{{ $airdrop['platform'] }}</td>
                                <td class="text-center">{{ date('d M, Y', strtotime($airdrop['detail_end_date'])) }}</td>
                                <td class="text-center">{{ number_format((float) $airdrop['detail_airdrop_qty']) }}</td>
                                <td class="text-center">{{ $airdrop['total_task'] ?? 'NA' }}</td>
                            </tr>

                            @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-3">
                                    No Records Found
                                </td>
                            </tr>
                            @endforelse

                        </tbody>
                    </table>
                    @if($hasMore)
                            <div class="text-center mt-1">
                                <button
                                    type="button"
                                    class="btn btn-primary rounded-3"
                                    wire:click="loadMore"
                                    wire:loading.attr="disabled"
                                    wire:loading.class="opacity-50"
                                >
                                    <span wire:loading.remove wire:target="loadMore">Load More</span>
                                    <span wire:loading wire:target="loadMore">
                                        <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                                        Loading...
                                    </span>
                                </button>
                            </div>
                        @endif
                </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-airdrop-token-giveaway" />
</div>

@push('scripts')

<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js" defer
    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" defer></script>

@endpush