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

                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-lightgray py-3 mt-2">
        <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="row justify-content-center align-items-center d-none d-lg-flex" 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')); // <-- this line notifies Livewire
                                    });

                                    $(el).on('cancel.daterangepicker', function() {
                                        el.value = '';
                                        el.dispatchEvent(new Event('input')); // notify Livewire about clear
                                    });
                                ">

                        <div class="col-xxl-3 col-xl-3 col-lg-3 py-2 px-xl-2">
                            <input type="text" class="prf-int rounded-3" wire:model="keyword" placeholder="सर्च बाय कीवर्ड...">
                        </div>

                        <div class="col-xxl-2 col-xl-2 col-lg-2 col-md-3  py-2">
                            <select wire:model="country" class="form-select prf-int rounded-3">
                                <option value="">All</option>
                                @foreach ($eventCountry as $country)
                                <option value="{{ $country['id'] }}">{{ $country['country'] }}</option>
                                @endforeach

                                <!-- Add more countries -->
                            </select>
                        </div>

                        <div class="col-xxl-2 col-xl-2 col-lg-2 py-2">
                            <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="col-xxl-3 col-xl-3 col-lg-3 col-12 py-2">
                            <select wire:model="category" class="form-select prf-int rounded-3">

                                <option value="">All</option>
                                <option value="blockchain"
                                    >
                                    ब्लॉकचेन</option>
                                <option value="nfts"
                                    >
                                    NFT</option>
                                <option value="ai"
                                    >
                                    AI</option>
                                <option value="tech"
                                    >
                                    टेक</option>
                            </select>
                        </div>

                        <div class="col-xxl-2 col-xl-2 col-lg-2 py-2 d-flex align-items-center text-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>
                <div class="col-lg-12 pb-3 eventtable">
                    <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>
                            </tr>
                        </thead>
                        <tbody id="event-table-body">
                            @forelse ($eventData as $event)
                            <tr>
                                <td class="text-center position-relative fw-medium fs-6">
                                    <div class="d-flex flex-column align-items-center pt-2">
                                        {{-- Start Date --}}
                                        <span class="border-bottom gradient-bdr-clr">
                                            {{ \Carbon\Carbon::parse($event['start_date'])->format('d M Y') }}
                                        </span>

                                        {{-- End Date --}}
                                        <span>
                                            {{ \Carbon\Carbon::parse($event['end_date'])->format('d M Y') }}
                                        </span>
                                    </div>
                                </td>

                                <td class="tbl-data-heading">
                                    <a href="{{ config('app.coingabbar_domain_en') . 'event-details/' . $event['slug'] }}"
                                        title="{{ $event['title'] }}"
                                        class="text-paragraph text-decoration-none d-flex flex-column"
                                        target="_blank"
                                        rel="noreferrer noopener">

                                        <div class="d-flex justify-content-between align-items-center w-100">
                                            <div class="d-flex">
                                                {{-- Event Image --}}
                                                <img src="{{ $event['image'] ?? 'assets/images/default.png' }}"
                                                    class="mt-1 me-2 object-fit-cover"
                                                    alt="{{ $event['img_alt_title'] ?? $event['title'] }}"
                                                    width="18"
                                                    height="18"
                                                    loading="lazy">

                                                {{-- Event Title --}}
                                                <span class="w-170 two-line-text text-wrap">
                                                    {{ $event['title'] }}
                                                </span>
                                                @if ($event['featured'])
                                                <span class="btn btn-success fw-semibold small text-white py-0 rounded-pill ms-3 mt-1">Featured</span>
                                                @endif

                                            </div>

                                            {{-- Featured Badge --}}
                                            @if(!empty($event['is_featured']) && $event['is_featured'] == 1)
                                            <span class="btn btn-success fw-semibold small text-white py-0 rounded-pill ms-3 mt-1">
                                                Featured
                                            </span>
                                            @endif
                                        </div>
                                    </a>
                                </td>

                                {{-- Location --}}
                                <td class="text-center">
                                    <div class="w-170 two-line-text text-wrap mx-auto">
                                        {{$event['city']}} ,{{$event['country']}}
                                    </div>
                                </td>

                                {{-- External Link --}}
                                <td class="text-center">
                                    <div class="d-flex justify-content-center">
                                        <a href="{{ URL('https://www.coingabbar.com/en/event-details/'.$event['slug']) }}"
                                            class="text-paragraph text-decoration-none"
                                            title="{{ $event['title'] }}"
                                            target="_blank"
                                            rel="noreferrer noopener nofollow">
                                            <i class="fa-solid fa-link hyperlink"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-3 fw-semibold">
                                    No Records Found
                                </td>
                            </tr>
                            @endforelse

                        </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>

    <livewire:faq-section pageType="crypto-web3-events-expo" />
</div>
@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.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