@section('seo')
    @include('layouts._front_includes._seo', ['seo' => $page->seo])
@endsection

@extends('layouts.frontend_master')

@section('content')
    @include('web._partials.page-banner', ['page' => $page])


    {{-- <section class="container-fluid py-3 py-lg-5 bg-white">
        <div class="container">
            @if (isset($destinations) && $destinations->count() > 0)
                @php
                    $destinationChunks = $destinations->chunk(5); // Group destinations into sets of 5
                @endphp

                @foreach ($destinationChunks as $chunkIndex => $chunk)
                    <div class="row g-3 g-lg-0 @if ($chunkIndex > 0) mt-4 @endif">
                        <!-- Left Side - First item of each chunk (Large Image) -->
                        @if ($chunk->isNotEmpty())
                            <div class="col-12 col-lg-5 mb-lg-0 pe-lg-3">
                                <a href="{{ route('page', $chunk->first()->slug) }}">
                                    <div class="position-relative rounded-4 overflow-hidden" style="aspect-ratio: 6/9.8;">
                                        <img src="{{ $chunk->first()->feature_image->getPath() }}"
                                            class="img-fluid w-100 h-100 object-fit-cover"
                                            alt="{{ $chunk->first()->title }}" />
                                        <div class="position-absolute bottom-0 start-0 p-3 p-lg-4">
                                            <p class="text-light fs-4 fs-lg-3 fw-medium m-0">{{ $chunk->first()->title }}
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        <!-- Right Side - Remaining items (2x2 Grid) -->
                        @if ($chunk->count() > 1)
                            <div class="col-12 col-lg-7 ps-lg-3">
                                <div class="row g-3">
                                    @foreach ($chunk->slice(1) as $country)
                                        <div class="col-6 col-md-6">
                                            <a href="{{ route('page', $country->slug) }}">
                                                <div class="position-relative rounded-4 overflow-hidden"
                                                    style="aspect-ratio: 3/3.5;">
                                                    <img src="{{ $country->feature_image->getPath() }}"
                                                        class="img-fluid w-100 h-100 object-fit-cover"
                                                        alt="{{ $country->title }}" />
                                                    <div class="position-absolute bottom-0 start-0 p-3 p-lg-4">
                                                        <p class="text-light fs-4 fs-lg-3 fw-medium m-0">
                                                            {{ $country->title }}</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                @endforeach
            @endif
        </div>
    </section> --}}

    <!-- Continent Tabs -->
    <div class="container mt-3">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <span class="btn bg-primary text-white rounded-pill px-4 primary-font font-medium mt-4 continent-tab active"
                data-continent="all" style="cursor: pointer;">
                All Destinations
            </span>
            @foreach (\App\Models\Page::getContinentList() as $item)
                <span class="btn bg-primary text-white rounded-pill px-4 primary-font font-medium mt-4 continent-tab"
                    data-continent="{{ $item }}" style="cursor: pointer;">
                    {!! ucwords(str_replace('_', ' ', $item)) !!}
                </span>
            @endforeach
        </div>
    </div>

    <section class="container-fluid py-3 py-lg-5 bg-white">
        <div class="container">
            @if (isset($destinations) && $destinations->count() > 0)
                @php
                    $destinationChunks = $destinations->chunk(5); // Group destinations into sets of 5
                @endphp

                <div id="destinationsContainer">
                    @foreach ($destinationChunks as $chunkIndex => $chunk)
                        <div class="row g-3 g-lg-0 @if ($chunkIndex > 0) mt-4 @endif destination-chunk">
                            <!-- Left Side - First item of each chunk (Large Image) -->
                            @if ($chunk->isNotEmpty())
                                <div class="col-12 col-lg-5 mb-lg-0 pe-lg-3 destination-item"
                                    data-continent="{{ $chunk->first()->continent }}">
                                    <a href="{{ route('page', $chunk->first()->slug) }}">
                                        <div class="position-relative rounded-4 overflow-hidden"
                                            style="aspect-ratio: 6/9.8;">
                                            <img src="{{ $chunk->first()->feature_image->getPath() }}"
                                                class="img-fluid w-100 h-100 object-fit-cover"
                                                alt="{{ $chunk->first()->title }}" />
                                            <div class="position-absolute bottom-0 start-0 p-3 p-lg-4">
                                                <p class="text-light fs-4 fs-lg-3 fw-medium m-0">
                                                    {{ $chunk->first()->title }}
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif

                            <!-- Right Side - Remaining items (2x2 Grid) -->
                            @if ($chunk->count() > 1)
                                <div class="col-12 col-lg-7 ps-lg-3">
                                    <div class="row g-3">
                                        @foreach ($chunk->slice(1) as $country)
                                            <div class="col-6 col-md-6 destination-item"
                                                data-continent="{{ $country->continent }}">
                                                <a href="{{ route('page', $country->slug) }}">
                                                    <div class="position-relative rounded-4 overflow-hidden"
                                                        style="aspect-ratio: 3/3.5;">
                                                        <img src="{{ $country->feature_image->getPath() }}"
                                                            class="img-fluid w-100 h-100 object-fit-cover"
                                                            alt="{{ $country->title }}" />
                                                        <div class="position-absolute bottom-0 start-0 p-3 p-lg-4">
                                                            <p class="text-light fs-4 fs-lg-3 fw-medium m-0">
                                                                {{ $country->title }}</p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>

                <!-- No Results Message -->
                <div id="noResults" class="text-center py-5 hidden">
                    <p class="text-muted fs-4 mb-0">No destinations found for this continent.</p>
                </div>
            @endif
        </div>
    </section>

    <style>
        .continent-tab {
            opacity: 0.7;
            transition: opacity 0.3s ease;
        }

        .continent-tab.active {
            opacity: 1;
        }

        .continent-tab:hover {
            opacity: 0.9;
        }

        .destination-item {
            transition: opacity 0.3s ease;
        }

        .destination-chunk {
            transition: opacity 0.3s ease;
        }

        .hidden {
            display: none !important;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const continentTabs = document.querySelectorAll('.continent-tab');
            const destinationItems = document.querySelectorAll('.destination-item');
            const destinationChunks = document.querySelectorAll('.destination-chunk');
            const noResults = document.getElementById('noResults');
            const destinationsContainer = document.getElementById('destinationsContainer');

            continentTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const selectedContinent = this.getAttribute('data-continent');

                    // Update active state
                    continentTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');

                    let visibleCount = 0;

                    // Filter destinations
                    destinationItems.forEach(item => {
                        const itemContinent = item.getAttribute('data-continent');

                        if (selectedContinent === 'all' || itemContinent ===
                            selectedContinent) {
                            item.classList.remove('hidden');
                            visibleCount++;
                        } else {
                            item.classList.add('hidden');
                        }
                    });

                    // Hide empty chunks (rows where all items are hidden)
                    destinationChunks.forEach(chunk => {
                        const visibleItemsInChunk = chunk.querySelectorAll(
                            '.destination-item:not(.hidden)');
                        if (visibleItemsInChunk.length === 0) {
                            chunk.classList.add('hidden');
                        } else {
                            chunk.classList.remove('hidden');
                        }
                    });

                    // Show/hide no results message
                    if (visibleCount === 0) {
                        noResults.classList.remove('hidden');
                        destinationsContainer.classList.add('hidden');
                    } else {
                        noResults.classList.add('hidden');
                        destinationsContainer.classList.remove('hidden');
                    }
                });
            });
        });
    </script>
@endsection