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

@extends('layouts.frontend_master')

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

    <!-- content Section -->
    <section class="travel-deals py-5">
        <div class="container">
            <p class=" text-secondary fs-6 fw-medium font-family-Onest  m-0 px-5 py-2">
                {!! preg_replace('/\s*class="[^"]*"/i', '', $page->description) !!}
            </p>
        </div>
    </section>

    <!-- Travel Deals Section -->
    <section class="travel-deals py-5">
        <div class="container">
            <p class="text-center m-0 px-3 py-2">
                <span class="text-dark fs-1 fw-medium font-family-Onest">Discover the </span>
                <span class="text-warning fs-1 fw-medium font-family-Onest">Best Travel </span>
                <span class="text-dark fs-1 fw-medium font-family-Onest">Deals of the Month</span>
            </p>

            <p class="text-center text-secondary fs-6 fw-medium font-family-Onest m-0 px-3 py-2">
                Explore our travel packages for every traveler. Whether a beach getaway, mountain trek, or city exploration,
                we have something special.
            </p>
        </div>
    </section>

    {{-- <div class="container">
        <div class="d-flex align-items-center justify-content-between  flex-wrap gap-2 ">

            @foreach (\App\Models\Page::getContinentList() as $item)
                <span
                    class="btn bg-primary text-white rounded-pill  px-4 primary-font font-medium mt-4">{!! ucwords(str_replace('_', ' ', $item)) !!}</span>
            @endforeach

        </div>
    </div>

    <section class="container-fluid py-3 py-lg-5 bg-white">
        <div class="container">

            <div class="row g-3 g-lg-0">
                <!-- Brazil (Left) -->
                @if (isset($destinations))
                    <div class="col-12 col-lg-5 mb-lg-0 pe-lg-3">
                        <a href="{{ route('page', $destinations[0]->slug) }}">
                            <div class="position-relative rounded-4 overflow-hidden" style="aspect-ratio: 6/9.8;">
                                <img src="{{ $destinations[0]->feature_image->getPath() }}"
                                    class="img-fluid w-100 h-100 object-fit-cover" alt="Brazil" />
                                <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">{{ $destinations[0]->title }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                @endif

                <!-- Right Countries Grid -->
                <div class="col-12 col-lg-7 ps-lg-3">
                    <div class="row g-3">
                        @foreach ($destinations->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>
            </div>

            <!-- View More Button -->
            @if (isset($destination_page))
                <div class="text-center mt-5">
                    <a class="btn bg-primary text-white px-4 py-2 rounded-pill font-family-Onest fw-medium"
                        style="font-size: 16px; line-height: 24px;" href="{{ route('page', $destination_page->slug) }}">
                        View More >
                    </a>
                </div>
            @endif
        </div>
    </section> --}}


    <div class="container">
        <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">
            <div class="row g-3 g-lg-0">
                <!-- Brazil (Left) -->
                @if (isset($destinations))
                    <div class="col-12 col-lg-5 mb-lg-0 pe-lg-3 country-item"
                        data-continent="{{ $destinations[0]->continent }}">
                        <a href="{{ route('page', $destinations[0]->slug) }}">
                            <div class="position-relative rounded-4 overflow-hidden" style="aspect-ratio: 6/9.8;">
                                <img src="{{ $destinations[0]->feature_image->getPath() }}"
                                    class="img-fluid w-100 h-100 object-fit-cover" alt="Brazil" />
                                <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">{{ $destinations[0]->title }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                @endif
                <!-- Right Countries Grid -->
                <div class="col-12 col-lg-7 ps-lg-3">
                    <div class="row g-3" id="countriesGrid">
                        @foreach ($destinations->slice(1) as $country)
                            <div class="col-6 col-md-6 country-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>
            </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>

            <!-- View More Button -->
            @if (isset($destination_page))
                <div class="text-center mt-5" id="viewMoreBtn">
                    <a class="btn bg-primary text-white px-4 py-2 rounded-pill font-family-Onest fw-medium"
                        style="font-size: 16px; line-height: 24px;" href="{{ route('page', $destination_page->slug) }}">
                        View More >
                    </a>
                </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;
        }

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

        .country-item.hidden {
            display: none !important;
        }

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

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const continentTabs = document.querySelectorAll('.continent-tab');
            const countryItems = document.querySelectorAll('.country-item');
            const noResults = document.getElementById('noResults');
            const viewMoreBtn = document.getElementById('viewMoreBtn');

            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 countries
                    countryItems.forEach(item => {
                        const itemContinent = item.getAttribute('data-continent');

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

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


    <!-- Holiday Packages Cards Panel -->
    <section class="container py-3 py-lg-5" id="content">
        <!-- Heading -->
        <div class="row mb-3 mb-lg-4">
            <div class="col-12">
                <h2 class="text-center m-0 px-3 fs-1 fw-medium font-family-Onest">
  <span class="text-dark">
    Popular International
  </span>
  <span class="text-warning">
    Holiday Packages
  </span>
</h2>

            </div>
        </div>

        <!-- Search Form -->
        <form class="row g-4 align-items-end" method="GET" action="{{ route('page', ['page' => $page->slug]) }}#content">
            <!-- Location -->
            <div class="col-lg-3 col-md-6">
                <label for="destinationSelect"
                    class="text-secondary fs-6 fw-normal font-family-Onest m-0 py-1 text-start d-block">
                    Location
                </label>
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0">
                        <i class="bi bi-geo-alt-fill"></i>
                    </span>
                    <select name="destination" id="destinationSelect"
                        class="form-select border-start-0 rounded-3 px-3 py-2 fs-6 fw-medium font-family-Onest custom-form-select"
                        style="border-color: #E5E5E5;">
                        <option value="">-- Select Destination --</option>
                        @foreach ($destinations as $des)
                            <option value="{{ $des->slug }}"
                                {{ request('destination') == $des->slug ? 'selected' : '' }}>
                                {{ $des->title }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Activity -->
            <div class="col-lg-3 col-md-6">
                <label for="activitySelect"
                    class="text-secondary fs-6 fw-normal font-family-Onest m-0 py-1 text-start d-block">
                    Activity
                </label>
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0">
                        <i class="bi bi-bicycle"></i>
                    </span>
                    <select name="activity" id="activitySelect"
                        class="form-select border-start-0 rounded-3 px-3 py-2 fs-6 fw-medium font-family-Onest custom-form-select"
                        style="border-color: #E5E5E5;">
                        <option value="">-- Select Activity --</option>
                        @if (request('destination'))
                            @php
                                $selectedDestination = $destinations->firstWhere('slug', request('destination'));
                            @endphp
                            @if ($selectedDestination && $selectedDestination->childActivity)
                                @foreach ($selectedDestination->childActivity as $activity)
                                    <option value="{{ $activity->slug }}"
                                        {{ request('activity') == $activity->slug ? 'selected' : '' }}>
                                        {{ $activity->title }}
                                    </option>
                                @endforeach
                            @endif
                        @endif
                    </select>
                </div>
            </div>

            <!-- Price Range -->
            <div class="col-lg-3 col-md-6">
                <label class="text-secondary fs-6 fw-normal font-family-Onest m-0 py-1 text-start d-block">
                    Price Range
                </label>
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0">
                        <img src="{{ asset('assets_moondrop/svgs/dollar.svg') }}" alt="$"
                            style="width: 16px; height: 16px;">
                    </span>
                    <select class="form-select border-start-0 custom-form-select" name="price_range">
                        <option value="">-- Select Price Range --</option>
                        <option value="500-1000" {{ request('price_range') == '500-1000' ? 'selected' : '' }}>$500-$1000
                        </option>
                        <option value="1000-2000" {{ request('price_range') == '1000-2000' ? 'selected' : '' }}>$1000-$2000
                        </option>
                        <option value="2000-3000" {{ request('price_range') == '2000-3000' ? 'selected' : '' }}>$2000-$3000
                        </option>
                        <option value="3000-4000" {{ request('price_range') == '3000-4000' ? 'selected' : '' }}>$3000-$4000
                        </option>
                        <option value="4000-5000" {{ request('price_range') == '4000-5000' ? 'selected' : '' }}>$4000-$5000
                        </option>
                        <option value="5000-above" {{ request('price_range') == '5000-above' ? 'selected' : '' }}>$5000
                            Above</option>
                    </select>
                </div>
            </div>

            <!-- Search Button -->
            <div class="col-lg-3 col-md-6 d-flex align-items-end">
                <button type="submit" class="btn text-white w-100 mt-2 mt-md-4 custom-btn"
                    style="border-radius: 14px; background-color: #00278f;">
                    Search
                </button>
            </div>
        </form>

        <!-- Debug Script -->
        <script>
            let destinationData = @json($destinations);

            document.addEventListener('DOMContentLoaded', function() {
                const destinationSelect = document.getElementById('destinationSelect');
                const activitySelect = document.getElementById('activitySelect');

                function populateActivities(destinationSlug) {
                    activitySelect.innerHTML = '<option value="">-- Select Activity --</option>';

                    if (destinationSlug) {
                        const destination = destinationData.find(dest => dest.slug === destinationSlug);

                        if (destination && destination.child_activity && destination.child_activity.length > 0) {
                            destination.child_activity.forEach(function(activity) {
                                const option = document.createElement('option');
                                option.value = activity.slug;
                                option.text = activity.title;
                                activitySelect.appendChild(option);
                            });
                        }
                    }
                }

                destinationSelect.addEventListener('change', function() {
                    populateActivities(this.value);
                    activitySelect.value = '';
                });

                document.querySelector('form').addEventListener('submit', function(e) {
                    const formData = new FormData(this);
                    for (let [key, value] of formData.entries()) {
                        console.log(`${key}: ${value}`);
                    }
                });
            });
        </script>

        <!-- Packages -->
        @if (!empty($international_packages) && count($international_packages) > 0)
            <div class="row g-4 my-3">
                @foreach ($international_packages as $package)
                    <div class="col-12 col-md-6 col-xl-4">
                        <a href="{{ route('package-detail', $package->slug) }}" class="text-decoration-none">
                            <div class="card border-0 h-100 shadow-sm">
                                <div class="position-relative ratio ratio-4x3 overflow-hidden"
                                    style="border-radius: 20px;">
                                    <img src="{{ $package->feature_image->getPath() }}" alt="{{ $package->title }}"
                                        loading="lazy" class="w-100 h-100 object-fit-cover" />
                                </div>
                                <div class="card-body">
                                    <h6 class="fw-bold mb-2">{{ $package->title }}</h6>
                                    <div class="desc text-secondary fs-6 fw-normal font-family-Onest line-clamp-3">
                                        {!! $package->description !!}
                                    </div>
                                </div>
                                <div
                                    class="card-footer bg-white border-0 d-flex justify-content-between align-items-center px-3 py-2">
                                    <span class="text-warning fw-semibold">${{ $package->price }}</span>
                                    <button class="btn btn-outline-secondary btn-sm rounded-3">Book Now ></button>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        @endif

        @include('web._partials.blogs-section', [])
    </section>
@endsection

@push('frontend_js')
    <script>
        document.querySelectorAll('.clamp-lines').forEach(el => {
            const lines = parseInt(el.dataset.lines || '4', 10);
            const cs = getComputedStyle(el);
            let lh = parseFloat(cs.lineHeight);

            if (isNaN(lh)) lh = parseFloat(cs.fontSize) * 1.2;

            el.style.maxHeight = (lh * lines) + 'px';
        });
    </script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        const tabs = document.querySelectorAll('.continent-tab');
        const countries = document.querySelectorAll('.country-item');

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const selectedContinent = tab.dataset.continent;

                // Highlight selected tab
                tabs.forEach(t => t.classList.remove('active-tab'));
                tab.classList.add('active-tab');

                // Show/hide countries
                countries.forEach(country => {
                    if (selectedContinent === 'all' || country.dataset.continent ===
                        selectedContinent) {
                        country.style.display = 'block';
                    } else {
                        country.style.display = 'none';
                    }
                });
            });
        });
    </script>

    <style>
        .active-tab {
            background-color: #0d6efd;
            /* stronger highlight */
            color: #fff;
        }
    </style>
@endpush