@extends($data['layout'])
@section('title', $data['page']->meta_title)
@section('meta_keywords', $data['page']->meta_keywords)
@section('meta_description', $data['page']->meta_description)
@push('head-area')
    @if ($data['layout'] == 'frontend.layouts.mobile')
        <link rel="preload" as="style" href="vsi/css/plugins.min.css">
        <link rel="stylesheet" href="vsi/css/plugins.min.css" />
    @endif
    <link rel="stylesheet" href="{{asset('css/events.css?v=1.4')}}">
    <link rel="canonical" href="{{ URL::to('/events') }}" />
    <link rel="amphtml" href="{{ URL::to('/events') }}?amp=1" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
@endpush
@section('content')
    <!-- Cart Page Start -->
    <div class="cart_area cart-area-padding">
        <section class="hero-banner mt-5 mt-sm-0">
            <img class="desktop-image" src="{{asset('img/events-main-banner-1.jpg')}}" alt="event page banner" width="100%">
            <img class="mobile-image" src="{{asset('img/events-main-banner-mobile.jpg')}}" alt="event page banner" width="100%">
        </section>

        <div class="container my-5">
            <!-- Heading Section -->
            <div class="filters_heading mb-5">
                <h1>Upcoming Veterinary Conferences</h1>
                <p>
                    We at GerVetUSA understand the importance of staying updated and continuous learning in the field of veterinary medicine. We update information on veterinary conferences and trade shows.
                    We aim to offer veterinary professionals a convenient way to gain valuable knowledge and refine their skills by participating in these events.
                </p>
            </div>

            <!-- Filters Section -->

            <form method="GET" action="{{ url()->current() }}">
                <div class="filters_section mb-4">
                    <div class="filter-container">

                        <!-- YEAR -->
                        <div class="filter-item">
                            <div class="input-group flex-nowrap">
                                <span class="input-group-text bg-white border-end-0 text-secondary flex-shrink-0" style="cursor: pointer;" onclick="const s=this.parentElement.querySelector('select'); s.focus(); s.showPicker()">
                                    <i class="far fa-calendar"></i>
                                </span>
                                <select class="form-select border-start-0 border-end-0 ps-0 text-secondary shadow-none filter-select-height" name="year" style="background-image: none;">
                                    <option value="">Select Year</option>
                                    @foreach ($data['eventYears'] as $year)
                                        <option value="{{ $year }}" {{ request('year') == $year ? 'selected' : '' }}>
                                            {{ $year }}
                                        </option>
                                    @endforeach
                                </select>
                                <span class="input-group-text bg-blue text-white border-start-0 flex-shrink-0" style="cursor: pointer;" onclick="const s=this.parentElement.querySelector('select'); s.focus(); s.showPicker()">
                                    <i class="fas fa-chevron-down rotate-icon"></i>
                                </span>
                            </div>
                        </div>

                        <!-- MONTH -->
                        <div class="filter-item">
                            <div class="input-group flex-nowrap">
                                <span class="input-group-text bg-white border-end-0 text-secondary flex-shrink-0" style="cursor: pointer;" onclick="const s=this.parentElement.querySelector('select'); s.focus(); s.showPicker()">
                                    <i class="far fa-calendar-alt"></i>
                                </span>
                                <select class="form-select border-start-0 border-end-0 ps-0 text-secondary shadow-none filter-select-height" name="month" style="background-image: none;">
                                    <option value="">Select Month</option>
                                    @foreach ($data['eventMonths'] as $month)
                                        <option value="{{ $month }}" {{ request('month') == $month ? 'selected' : '' }}>
                                            {{ Carbon\Carbon::create()->month($month)->format('F') }}
                                        </option>
                                    @endforeach
                                </select>
                                <span class="input-group-text bg-blue text-white border-start-0 flex-shrink-0" style="cursor: pointer;" onclick="const s=this.parentElement.querySelector('select'); s.focus(); s.showPicker()">
                                    <i class="fas fa-chevron-down rotate-icon"></i>
                                </span>
                            </div>
                        </div>

                        <!-- LOCATION -->
                        <div class="filter-item filter-location">
                            <div class="input-group flex-nowrap">
                                <span class="input-group-text bg-white border-end-0 text-secondary flex-shrink-0" style="cursor: pointer;" onclick="const s=this.parentElement.querySelector('select'); s.focus(); s.showPicker()">
                                    <i class="fas fa-map-marker-alt"></i>
                                </span>
                                <select class="form-select border-start-0 border-end-0 ps-0 text-secondary shadow-none filter-select-height" name="location" style="background-image: none;">
                                    <option value="">Select Location</option>
                                    @foreach ($data['eventLocations'] as $location)
                                        <option value="{{ $location }}" {{ request('location') == $location ? 'selected' : '' }}>
                                            {{ $location }}
                                        </option>
                                    @endforeach
                                </select>
                                <span class="input-group-text bg-blue text-white border-start-0 flex-shrink-0" style="cursor: pointer;" onclick="const s=this.parentElement.querySelector('select'); s.focus(); s.showPicker()">
                                    <i class="fas fa-chevron-down rotate-icon"></i>
                                </span>
                            </div>
                        </div>

                        <!-- BUTTON LOGIC -->
                        <div class="filter-item">
                            @if(request('year') || request('month') || request('location'))
                                <a href="{{ url()->current() }}" class="btn btn-secondary text-white w-100 filter-btn-height">
                                    Reset Filters
                                </a>
                            @else
                                <button class="btn btn-apply-filter w-100 filter-btn-height" type="submit">
                                    Apply Filters
                                </button>
                            @endif
                        </div>

                    </div>
                </div>
            </form>

            <!-- Conference List Section -->

            <div class="conferences_wrapper">
                {{-- <h2 class="conferences_title mb-4">List of Veterinary Conferences 2026</h2> --}}

                <div class="row g-4" style="row-gap: 2rem;">
                    <!-- Conference Card 1 -->
                    @forelse ($data['allShow'] as $show)
                        <div class="col-lg-4 col-md-6">
                            <div class="card conference-card">
                                <div class="position-relative">
                                    @if($show->image_thumbnail != '')
                                        <img src="https://www.gervetusa.com/up_data/shows/{{ $show->image_thumbnail }}" class="card-img-top" alt="{{ $show->name }}">
                                    @else
                                        <div style="background-image: url('https://www.gervetusa.com/up_data/show-image.jpg'); width: 360px; height: 270px; background-repeat: no-repeat; background-position: center center;">
                                            <div style="font-weight: bold; color: #0c7abf; padding: 20px;">{{ $show->start_date.' / '.$show->end_date }}</div>
                                            <div style="text-align: center; margin-top: 30px; padding: 0px 20px; font-weight: bold; font-size: 20px;">{{ $show->name }}</div>
                                        </div>
                                    @endif
                                </div>
                                @php
                                    $link = $blog_link = $detail_link = $association_link = '';

                                    if($show->details_link != '')
                                        $link = $association_link = $show->details_link;

                                    if(trim(strip_tags($show->details)) != null)
                                        $link = $detail_link = 'events/'.$show->id.'-'.str_slug($show->name);

                                    if($show->link != '')
                                        $link = $blog_link = $show->link;

                                @endphp
                                <div class="card-body">
                                    <h5 class="card-title">{{ $show->name }}</h5>
                                    <p class="card-location">
                                        <i class="fas fa-map-marker-alt me-2"></i>{{ $show->location }}
                                    </p>
                                    <div class="card-actions">
                                        @if($detail_link != '')
                                            <button class="btn btn-details"><a href="{{ $detail_link }}" style="color: #ffffff;">Event Details</a></button>
                                        @endif
                                        @if($association_link != '')
                                            <a href="{{ $association_link }}" target="_blank" class="btn btn-details" style="color: #ffffff;">Visit Now</a>
                                        @endif
                                        @if($blog_link != '')
                                            <button class="btn btn-details"><a href="{{ $blog_link }}" target="_blank" style="color: #ffffff;">Learn More</a></button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <h3 class="text-center">No conferences found for the selected filters.</h3>
                        </div>
                    @endforelse
                </div>
                <div class="row mt-5">
                    <div class="col-12 d-flex justify-content-end custom-pagination">
                        {{ $data['allShow']->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('head-area')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selects = document.querySelectorAll('.filters_section select');
            selects.forEach(select => {
                // Find the chevron icon in the same input group (last child of input group)
                const chevronIcon = select.parentElement.querySelector('.rotate-icon');

                if(chevronIcon) {
                    select.addEventListener('focus', () => {
                        chevronIcon.classList.add('rotate-180');
                    });

                    select.addEventListener('blur', () => {
                        chevronIcon.classList.remove('rotate-180');
                    });

                    // Handle click to toggle if focus doesn't work perfectly on some clicks
                    select.addEventListener('click', () => {
                        chevronIcon.classList.add('rotate-180');
                    });
                }
            });
        });
    </script>
@endpush