@section('seo')
    @include('layouts._front_includes._seo', ['seo' => $setting->seo])
@endsection
@push('frontend_css')
    <style>
        .stat-heading {
            color: #fffafa;
            font-weight: 500
        }

        .stat-val {
            font-size: 28px;
            font-weight: 500
        }
    </style>
@endpush
@extends('layouts.frontend_master')

@section('content')

    @if (!empty($slider?->sliderGalleryMeta()) && count($slider->sliderGalleryMeta()) > 0)

        <section class="hero-banner position-relative w-100" style="min-height: 120vh; overflow: hidden;">
            @php
                $media = collect($slider->sliderGalleryMeta());

                $videos = $media->filter(function ($item) {
                    $ext = strtolower(pathinfo($item->meta['slider_image'], PATHINFO_EXTENSION));
                    return in_array($ext, ['mp4', 'webm', 'ogg']);
                });

                $images = $media->filter(function ($item) {
                    $ext = strtolower(pathinfo($item->meta['slider_image'], PATHINFO_EXTENSION));
                    return in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                });
            @endphp

            {{-- First Video Background --}}
            @if ($videos->isNotEmpty())
                <video autoplay muted loop playsinline class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover">
                    <source src="{{ $videos->first()->getFileUrl('slider_image') }}" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            @endif

            {{-- Image Carousel --}}
            @if ($images->isNotEmpty())
                <div id="heroSlider" class="carousel slide position-absolute top-0 start-0 w-100 h-100"
                    data-bs-ride="carousel">
                    <div class="carousel-inner h-100">
                        @foreach ($images as $key => $item)
                            <div class="carousel-item {{ $key === 0 ? 'active' : '' }} h-100">
                                <img src="{{ $item->getFileUrl('slider_image') }}"
                                    class="d-block w-100 h-100 object-fit-cover" alt="{{ $item?->meta['alt'] ?? '' }}">
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            @php
                $firstSlider = $slider->sliderGalleryMeta()->first();
            @endphp

            <!-- Overlay -->
            <div class="hero-overlay position-absolute top-0 start-0 w-100 h-100" style="background: rgba(0,0,0,0.4);">
            </div>

            <!-- Content -->
            <div class="container-fluid hero-content position-relative z-10 text-center text-white d-flex flex-column justify-content-center align-items-center"
                style="min-height: 100vh; max-width: 1600px; margin: 0 auto;">

                <p class="banner-heading primary-font fw-medium fs-1">{!! $firstSlider->meta['alt'] !!}</p>
                <p class="banner-subheading primary-font fw-medium fs-5">{!! $firstSlider->meta['description'] !!}</p>

                <!-- Search Form -->
                <div class="search-form-container bg-white mt-5 p-4 w-100"
                    style="border-radius: 32px; max-width: 1600px; margin: 0 auto;" id="section">

                    <div class="location-indicator mb-3 text-start">
                        <div class="text-dark primary-font fw-medium">
                            <p class="text-secondary fs-6 fw-normal font-family-Onest m-0 px-3 py-2"
                                style="color: #A3A3A3;">
                                <i class="fas fa-map-marker-alt me-2"></i>Your Location
                            </p>
                            <p id="user-location" class="text-dark fs-5 fw-semibold font-family-Onest m-0 px-3 py-2"
                                style="border-bottom:1px solid #E5E5E5;">
                                Loading location...
                            </p>
                        </div>
                    </div>

                    <!-- Responsive Row -->
                    <div class="px-2 px-lg-4 px-xl-5" style="max-width: 1600px; margin: 0 auto;">
                        <form class="row g-4 align-items-end" method="get" action="{{ route('welcome.search') }}#section">

                            <!-- Destination -->
                            <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                                <label class="text-secondary fs-6 fw-normal font-family-Onest m-0 py-1 text-start d-block"
                                    for="destinationSelect">
                                    Country
                                </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-12 col-md-6 col-lg-4 col-xl-3">
                                <label class="text-secondary fs-6 fw-normal font-family-Onest m-0 py-1 text-start d-block"
                                    for="activitySelect">
                                    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>
                                    </select>
                                </div>
                            </div>

                            <!-- Price Range -->
                            <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                                <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-12 col-md-6 col-lg-4 col-xl-3">
                                <button type="submit" class="btn btn-primary w-100 mt-2 mt-md-4 custom-btn"
                                    style="border-radius: 14px;">
                                    Search
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </section>
    @endif

  
<style>
    .service-thumb {
        transition: all 0.25s ease;
        border: 2px solid transparent;
    }

    .service-thumb.active-thumb {
        border: 2px solid #007bff;
        transform: scale(1.05);
        border-radius: 8px;
    }
</style>


<section class="container py-5" style="background-color: #ffffff;">
<h2 class="fw-bold text-center mb-5 m-0 px-3">
  <span class="text-dark fs-1 fw-medium font-family-Onest">
    Our
  </span>
  <span class="text-warning fs-1 fw-medium font-family-Onest">
    Services
  </span>
</h2>

    @php
        $fallback = asset('images/default.jpg');
        $mainService = $services->first();
        $mainImage = $mainService && $mainService->cover_image
            ? $mainService->cover_image->getPath()
            : $fallback;
        $mainLink = $mainService ? route('service-detail', $mainService->slug) : '#';
    @endphp

    <!-- SAME WRAPPER AS VIDEO -->
    <div class="position-relative rounded-4 overflow-hidden"
         style="aspect-ratio: 16/9;">

        <!-- DESKTOP CLICKABLE PANEL -->
        <a id="desktopServiceLink"
           href="{{ $mainLink }}"
           class="d-none d-md-block position-relative w-100 h-100 text-decoration-none">

            <img id="mainServiceImage"
                 src="{{ $mainImage }}"
                 onerror="this.src='{{ $fallback }}'"
                 class="w-100 h-100 object-fit-cover" />

            <div class="position-absolute top-0 start-0 w-100 h-100"
                 style="background-color: rgba(0,0,0,0.25);"></div>

            <div class="position-absolute top-0 start-0 text-white p-4 p-md-5">
                <h2 id="serviceTitle" class="fw-bold fs-2">
                    {{ $mainService->title }}
                </h2>
                <p id="serviceDesc" class="mb-0">
                    {{ $mainService->short_description }}
                </p>
            </div>
        </a>

        <!-- DESKTOP THUMBNAILS -->
        <div class="position-absolute bottom-0 start-50 translate-middle-x bg-white
                    rounded-4 shadow d-none d-md-flex gap-2 p-2 mb-3">

            @foreach ($services as $service)
                @php
                    $thumb = $service->cover_image
                        ? $service->cover_image->getPath()
                        : $fallback;
                @endphp

                <img src="{{ $thumb }}"
                     onerror="this.src='{{ $fallback }}'"
                     class="rounded-3 service-thumb"
                     data-img="{{ $thumb }}"
                     data-title="{{ $service->title }}"
                     data-desc="{{ $service->short_description }}"
                     data-link="{{ route('service-detail', $service->slug) }}"
                     style="height: 60px; width: 80px; cursor:pointer; object-fit: cover;" />
            @endforeach
        </div>

        <!-- MOBILE SWIPER -->
        <div class="d-md-none w-100 h-100">
            <div class="swiper serviceMobileSwiper h-100">
                <div class="swiper-wrapper h-100">

                    @foreach ($services as $service)
                        @php
                            $thumb = $service->cover_image
                                ? $service->cover_image->getPath()
                                : $fallback;
                        @endphp

                        <div class="swiper-slide h-100">
                            <a href="{{ route('service-detail', $service->slug) }}"
                               class="text-decoration-none text-white">

                                <div class="position-relative h-100">
                                    <img src="{{ $thumb }}"
                                         onerror="this.src='{{ $fallback }}'"
                                         class="w-100 h-100 object-fit-cover" />

                                    <div class="position-absolute top-0 start-0 w-100 h-100"
                                         style="background-color: rgba(0,0,0,0.25);"></div>

                                    <div class="position-absolute top-0 start-0 text-white p-4">
                                        <h2 class="fw-bold fs-2">{{ $service->title }}</h2>
                                        <p class="mb-0">{{ $service->short_description }}</p>
                                    </div>
                                </div>

                            </a>
                        </div>
                    @endforeach

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

    </div>
</section>


<script>
document.addEventListener("DOMContentLoaded", () => {

    const mainImage = document.getElementById("mainServiceImage");
    const mainTitle = document.getElementById("serviceTitle");
    const mainDesc = document.getElementById("serviceDesc");
    const mainLink = document.getElementById("desktopServiceLink");

    const thumbs = document.querySelectorAll(".service-thumb");

    let currentIndex = 0;

    // Highlight function
    function setActiveThumbnail(index) {
        thumbs.forEach(t => t.classList.remove("active-thumb"));
        thumbs[index].classList.add("active-thumb");
    }

    // Update main card content
    function updateMainFromThumb(index) {
        const thumb = thumbs[index];

        mainImage.src = thumb.dataset.img;
        mainTitle.innerText = thumb.dataset.title;
        mainDesc.innerText = thumb.dataset.desc;
        mainLink.href = thumb.dataset.link;

        setActiveThumbnail(index);
    }

    // CLICK event for manual switching
    thumbs.forEach((thumb, index) => {
        thumb.addEventListener("click", () => {
            currentIndex = index;
            updateMainFromThumb(currentIndex);
        });
    });

    // AUTO-SLIDE every 4 seconds
    setInterval(() => {
        currentIndex = (currentIndex + 1) % thumbs.length;
        updateMainFromThumb(currentIndex);
    }, 4000);

    // Initialize first thumb highlight
    setActiveThumbnail(0);
});
</script>

    <!-- Top Value Section -->
    @if (isset($why_choose_us) && $why_choose_us->aboutUsWhyChooseUsMeta->isNotEmpty())
        <section class="container-fluid py-5 bg-light">
            <div class="section-with-dots">
                <div class="dot dot-1"></div>
                <div class="dot dot-2"></div>
                <div class="dot dot-3"></div>
                <div class="dot dot-4"></div>
                <div class="container">
                    <!-- Main Heading Section -->
                    <div class="row justify-content-center mb-4">
                        <div class="col-lg-8 text-center">
<h1 class="display-5 fw-bold mb-3 m-0 px-3">
  <span class="text-dark font-family-Onest">
    Top Value
  </span>
  <span class="text-warning font-family-Onest">
    From Us to You
  </span>
</h1>
                            <p class="fs-5 text-muted">Try a variety of benefits when using our services</p>
                        </div>
                    </div>


                    <!-- Features Section -->
                    <div class="row g-4 justify-content-center">
                        <!-- Feature 1 -->
                        @foreach ($why_choose_us->aboutUsWhyChooseUsMeta as $index => $why_us)
                            <div class="col-md-4">
                                <div class="p-4 bg-white rounded-3 shadow-sm text-center"
                                    style="height: 200px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #ebab00 #ffffff;">
                                    <div class="d-flex justify-content-center mb-3">
                                        <div class=" bg-success bg-white">
                                            <img src="{{ $why_us->getFileUrl('image') }}" height="50px" width="50px"
                                                alt="">



                                        </div>
                                    </div>
                                    <h3 class="h5 mb-3">{{ $why_us->meta['name'] }}</h3>
                                    <p class="text-muted mb-0">
                                        {{ $why_us->meta['description'] }}
                                    </p>
                                </div>
                            </div>
                        @endforeach


                    </div>
                </div>
            </div>
        </section>
    @endif




    {{-- @dd($international_packages) --}}
    @if ($inbound_packages->count() > 0 || $international_packages->count() > 0)
        <section class="container py-5">
<h2 class="mb-4 fw-semibold m-0 px-3">
  <span class="text-dark font-family-Onest">
    Book your
  </span>
  <span class="text-warning font-family-Onest">
    Next Trip
  </span>
</h2>

            <!-- Nav Tabs -->
            <ul class="nav custom-tabs mb-5" id="tripTab" role="tablist">
                {{-- @if ($inbound_packages->count() > 0) --}}
                <li class="nav-item" role="presentation">
                    <span class="custom-tab active" id="nepal-tab" data-bs-toggle="pill" data-bs-target="#nepal"
                        role="tab" type="button">
                        Nepal
                    </span>
                </li>
                {{-- @endif --}}

                {{-- @if ($international_tour->count() > 0) --}}
                <li class="nav-item" role="presentation">
                    <span class="custom-tab {{ $inbound_packages->count() == 0 ? 'active' : '' }}" id="international-tab"
                        data-bs-toggle="pill" data-bs-target="#international" role="tab" type="button">
                        International
                    </span>
                </li>
                {{-- @endif --}}
            </ul>

            <div class="tab-content" id="tripTabContent">

                {{-- Nepal Tab --}}
                {{-- @if ($inbound_packages->count() > 0) --}}
                <div class="tab-pane fade show active" id="nepal" role="tabpanel">
                    <div class="row g-4">
                        @forelse ($inbound_packages as $package)
                            @include('web.package.package-card')
                        @empty
                            <p class="text-muted">No package available.</p>
                        @endforelse
                    </div>
                </div>


                <div class="tab-pane fade {{ $international_packages->count() == 0 ? 'show active' : '' }}"
                    id="international" role="tabpanel">
                    <div class="row g-4">
                        @forelse ($international_packages as $package)
                            @include('web.package.package-card')
                        @empty
                            <p class="text-muted">No package available.</p>
                        @endforelse
                    </div>
                </div>

                {{-- @endif --}}

            </div>
        </section>
    @endif


    <!-- new video-section -->
    @if (!empty($home_ads))
        <section class="container py-5">
            <div class="position-relative rounded-4 overflow-hidden" style="aspect-ratio: 16/9;">
                <!-- YouTube Player -->
                <div id="ytPlayerContainer" class="w-100 h-100 position-relative">
                    <div id="player" class="w-100 h-100"></div>
                </div>

                <!-- Left Control -->
                <button id="prevVideo" type="button"
                    class="btn btn-light rounded-circle shadow position-absolute top-50 start-0 translate-middle-y ms-2 d-flex align-items-center justify-content-center"
                    style="width: 44px; height: 44px; z-index: 10;">
                    <i class="bi bi-chevron-left fs-4 m-0"></i>
                </button>

                <!-- Right Control -->
                <button id="nextVideo" type="button"
                    class="btn btn-light rounded-circle shadow position-absolute top-50 end-0 translate-middle-y me-2 d-flex align-items-center justify-content-center"
                    style="width: 44px; height: 44px; z-index: 10;">
                    <i class="bi bi-chevron-right fs-4 m-0"></i>
                </button>
            </div>
        </section>

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const videoList = {!! json_encode($home_ads->meta2 ? json_decode($home_ads->meta2, true) : []) !!};

                function extractYouTubeID(u) {
                    try {
                        const url = new URL(u);
                        if (url.hostname.includes('youtu.be')) {
                            return url.pathname.split('/').filter(Boolean)[0];
                        }
                        if (url.searchParams.has('v')) {
                            return url.searchParams.get('v');
                        }
                        const parts = url.pathname.split('/').filter(Boolean);
                        if (['embed', 'shorts', 'v'].includes(parts[0]) && parts[1]) {
                            return parts[1];
                        }
                    } catch (e) {
                        const m = String(u).match(/[A-Za-z0-9_-]{11}/);
                        if (m) return m[0];
                    }
                    return null;
                }

                let currentIndex = 0;
                let player;
                const prevBtn = document.getElementById('prevVideo');
                const nextBtn = document.getElementById('nextVideo');

                // Load YouTube IFrame API
                (function() {
                    const s = document.createElement('script');
                    s.src = "https://www.youtube.com/iframe_api";
                    document.head.appendChild(s);
                })();

                // Global API callback
                window.onYouTubeIframeAPIReady = function() {
                    loadPlayer(videoList[currentIndex]);
                };

                function loadPlayer(url) {
                    const videoId = extractYouTubeID(url);
                    if (!videoId) {
                        console.error('Invalid YouTube URL:', url);
                        return;
                    }
                    if (player) {
                        player.loadVideoById(videoId);
                    } else {
                        player = new YT.Player('player', {
                            videoId: videoId,
                            playerVars: {
                                rel: 0,
                                modestbranding: 1,
                                playsinline: 1,
                                controls: 1
                            }
                        });
                    }
                }

                // Prev/Next controls
                prevBtn.addEventListener('click', function() {
                    currentIndex = (currentIndex - 1 + videoList.length) % videoList.length;
                    loadPlayer(videoList[currentIndex]);
                });

                nextBtn.addEventListener('click', function() {
                    currentIndex = (currentIndex + 1) % videoList.length;
                    loadPlayer(videoList[currentIndex]);
                });
            })
        </script>
    @endif



    <!-- Feature Cards Panel -->
    @if ($featured_packages->count() > 0)
        <section class="container">
            <div class="container">
                <p class="text-center  m-0 px-3"><span class="text-dark fs-1 fw-medium font-family-Onest">Featured
                    </span><span class="text-warning fs-1 fw-medium font-family-Onest">Tour</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 breach getaway, mountain trek, or city exploration, we have some thing
                    special</p>
            </div>
            <div class="row g-4 my-3">
                <!-- Card 1 -->
                @foreach ($featured_packages as $package)
                    @include('web.package.package-card', ['is_featured' => true])
                @endforeach

                <!-- Book now Button -->
                @if (isset($destination_page))
                    <div class="container pb-5">
                        <div class="text-center mt-5">
                            <a href="{{ $destination_page->slug }}"
                                class="btn bg-primary g-recaptcha text-white px-4 py-2 align-self-start rounded-3 font-family-Onest fw-medium"
                                style="font-size: 16px; line-height: 24px;">
                                View More &gt;
                            </a>

                        </div>
                    </div>
                @endif
            </div>
        </section>
    @endif


    <!-- our-latest-article -->
    <section class="container-fluid py-5" style="background-color: #FAFAFA;">
        <div class="container">
            <!-- Heading and Subheading -->
            <div class="row justify-content-center text-center mb-5">
                <div class="col-lg-8">
                    <h2
  class="fw-medium font-family-Onest"
  style="font-size: 48px; line-height: 56px;"
>
  <span class="text-dark">
    Our Latest Articles
  </span>
  <span class="text-warning">
    About Travel
  </span>
</h2>

                    <p class="text-secondary fw-medium font-family-Onest mt-3"
                        style="font-size: 18px; line-height: 28px;">
                        Know the latest articles about travel
                    </p>
                </div>
            </div>

            <!-- Article Cards Grid -->
            <div class="row g-4">
                <!-- CARD START -->
                @foreach ($featured_blogs as $blog)
                    <div class="col-md-6 col-xl-4">
                        <a href="{{ route('blog-detail', $blog->slug) }}">

                            <div class="position-relative rounded-4 overflow-hidden shadow" style="height: 408px;">
                                <div class="w-100 h-100 position-absolute top-0 start-0"
                                    style="background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, black 100%), url({{ $blog->feature_image->getPath() }}); background-size: cover; background-position: center;">
                                </div>

                                <div class="position-absolute bottom-0 p-4" style="z-index: 2;">
                                    <p class="text-light fw-medium font-family-Onest m-0"
                                        style="font-size: 20px; line-height: 28px;">
                                        {!! $blog->title !!}
                                    </p>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>

            <!-- Read More Button -->
            @if (!empty($blogs_page))
                <div class="container">
                    <div class="text-center mt-5">
                        <a href="{{ route('page', $blogs_page->slug) }}"
                            class="btn bg-primary g-recaptcha text-white px-4 py-2 align-self-start rounded-3 font-family-Onest fw-medium"
                            style="font-size: 16px; line-height: 24px;">
                            Read More &gt;
                        </a>

                    </div>
                </div>
            @endif

        </div>
    </section>

    <!-- testimonials-section -->
    @if (!empty($reviews) && count($reviews) > 0)
        <section class="container-fluid py-5 testimonials-section">
            <div class="container">
                <div class="row justify-content-center text-center mb-5">
                    <div class="col-lg-8">
                       <h2 class="fw-medium font-family-Onest section-title">
  <span class="text-dark">
    What our Client Say
  </span>
  <span class="text-warning">
    about us
  </span>
</h2>

                        <p class="text-secondary fw-medium font-family-Onest section-subtitle">
                            See what our happy travelers are saying about their trekking experience
                        </p>
                    </div>
                </div>
            </div>

            <!-- Google Reviews Scroll -->
            <div class="px-0 auto-scroll-wrapper mb-5">
                <div class="auto-scroll-content">
                    @foreach ($reviews as $review)
                        @if ($review->is_google)
                            <div class="card testimonial-card" data-index="0" data-bs-toggle="modal"
                                data-bs-target="#testimonialModal">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div class="text-warning">
                                        @for ($i = 1; $i <= 5; $i++)
                                            @if ($i <= floor($review->rating))
                                                <i class="fas fa-star"></i>
                                            @elseif ($i - 0.5 == $review->rating)
                                                <i class="fas fa-star-half-alt"></i>
                                            @else
                                                <i class="far fa-star"></i>
                                            @endif
                                        @endfor
                                    </div>


                                    <img src="{{ asset('assets_moondrop/images/logo/Google.png') }}"
                                        class="rounded-circle testimonial-icon" alt="Google">
                                </div>
                                <p class="testimonial-text">{{ $review->review }}</p>
                                <div class="d-flex align-items-center mt-3">
                                    <img src="{{ $review->feature_image->getPath() }}"
                                        class="rounded-circle me-2 testimonial-face"
                                        style="width: 60px; height: 60px; object-fit: cover;" alt="Reviewer">
                                    <p class="m-0 fw-semibold text-primary">{{ $review->name }}</p>
                                </div>
                            </div>
                        @endif
                    @endforeach

                </div>
            </div>

            <!-- TripAdvisor Reviews Scroll -->
            <div class="px-0 auto-scroll-wrapper">
                <div class="auto-scroll-content scroll-right">
                    <!-- Example (shortened): -->
                    @foreach ($reviews as $review)
                        @if ($review->is_tripadvisor)
                            <div class="card testimonial-card" data-index="0" data-bs-toggle="modal"
                                data-bs-target="#testimonialModal">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div class="text-warning">
                                        @for ($i = 1; $i <= 5; $i++)
                                            @if ($i <= floor($review->rating))
                                                <i class="fas fa-star"></i>
                                            @elseif ($i - 0.5 == $review->rating)
                                                <i class="fas fa-star-half-alt"></i>
                                            @else
                                                <i class="far fa-star"></i>
                                            @endif
                                        @endfor
                                    </div>
                                    <img src="{{ asset('assets_moondrop/images/logo/tripadv.png') }}"
                                        class="rounded-circle testimonial-icon" alt="TripAdvisor">
                                </div>
                                <p class="testimonial-text">{{ $review->review }}</p>
                                <div class="d-flex align-items-center mt-3">
                                    <img src="{{ $review->feature_image->getPath() }}"
                                        class="rounded-circle me-2 testimonial-face"
                                        style="width: 60px; height: 60px; object-fit: cover;" alt="Reviewer">
                                    <p class="m-0 fw-semibold text-primary">{{ $review->name }}</p>
                                </div>
                            </div>
                        @endif
                    @endforeach

                </div>
            </div>
            <script>
                // Allow page to scroll vertically even when hovering the auto-scroll rows
                document.querySelectorAll('.auto-scroll-wrapper').forEach((wrap) => {
                    wrap.addEventListener('wheel', (e) => {
                        // If the user is scrolling mostly vertically, send it to the window
                        if (Math.abs(e.deltaY) >= Math.abs(e.deltaX)) {
                            window.scrollBy({
                                top: e.deltaY,
                                left: 0,
                                behavior: 'auto'
                            });
                            e.preventDefault(); // stop the wrapper from trapping the wheel
                        }
                    }, {
                        passive: false
                    });
                });
            </script>

            <!-- Button -->
            @if (!empty($reviews_page))
                <div class="container">
                    <div class="text-center mt-5">
                        <a href="{{ route('page', $reviews_page->slug) }}"
                            class="btn bg-primary g-recaptcha text-white px-4 py-2 align-self-start rounded-3 font-family-Onest fw-medium see-all-btn"
                            style="font-size: 16px; line-height: 24px;">
                            See all Reviews &gt;
                        </a>

                    </div>
                </div>
            @endif
        </section>
    @endif

    <!-- Testimonial Modal -->
    <div class="modal fade" id="testimonialModal" tabindex="-1" aria-labelledby="testimonialModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0 pb-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="text-warning" id="modalStars">★★★★★</div>
                        <img src="" class="rounded-circle testimonial-icon" alt="Platform" id="modalPlatform">
                    </div>
                    <p class="mb-4" id="modalText"></p>
                    <div class="d-flex align-items-center">
                        <img src="" class="rounded-circle me-2 testimonial-face" alt="Reviewer" id="modalFace">
                        <p class="m-0 fw-semibold text-primary" id="modalName"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--second-gallery-->
    @if (!empty($gallery_page->gallery_image))
        <div class="container py-5">
            <style>
                /* Different heights per row */
                .img-small {
                    height: 250px;
                    /* first row image */
                }

                .img-large {
                    height: 450px;
                    /* second row image */
                }

                .gallery-img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 0.75rem;
                }

                .hover-content p {
                    margin: 0;
                }
            </style>
            {{-- @dd($gallery_page) --}}

            @php
                // Filter gallery images where on_cover is 0
                $filteredImages = collect($gallery_page->gallery_image)
                    ->filter(fn($image) => $image->on_cover == 0)
                    ->values(); // Re-index the array
            @endphp

            <div class="row g-3">
                <!-- Column 1 -->
                <div class="col-xl-3 col-md-6 d-flex flex-column gap-3">
                    @if (isset($filteredImages[0]))
                        <div class="position-relative overflow-hidden hover-effect img-small">
                            <img src="{{ $filteredImages[0]->getPath() }}" class="gallery-img"
                                alt="{{ $filteredImages[0]->alt }}">
                            <div class="hover-content position-absolute bottom-0 start-0 w-100 p-3">
                                <p class="text-light fw-medium">{{ $filteredImages[0]->alt }}</p>
                            </div>
                        </div>
                    @endif

                    @if (isset($filteredImages[1]))
                        <div class="position-relative overflow-hidden hover-effect img-large">
                            <img src="{{ $filteredImages[1]->getPath() }}" class="gallery-img"
                                alt="{{ $filteredImages[1]->alt }}">
                            <div class="hover-content position-absolute bottom-0 start-0 w-100 p-3">
                                <p class="text-light fw-medium">{{ $filteredImages[1]->alt }}</p>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Column 2 -->
                <div class="col-xl-3 col-md-6 d-flex flex-column gap-3">
                    @if (isset($filteredImages[2]))
                        <div class="position-relative overflow-hidden hover-effect img-large">
                            <img src="{{ $filteredImages[2]->getPath() }}" class="gallery-img"
                                alt="{{ $filteredImages[2]->alt }}">
                            <div class="hover-content position-absolute bottom-0 start-0 w-100 p-3">
                                <p class="text-light fw-medium">{{ $filteredImages[2]->alt }}</p>
                            </div>
                        </div>
                    @endif

                    @if (isset($filteredImages[3]))
                        <div class="position-relative overflow-hidden hover-effect img-small">
                            <img src="{{ $filteredImages[3]->getPath() }}" class="gallery-img"
                                alt="{{ $filteredImages[3]->alt }}">
                            <div class="hover-content position-absolute bottom-0 start-0 w-100 p-3">
                                <p class="text-light fw-medium">{{ $filteredImages[3]->alt }}</p>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Column 3 -->
                <div class="col-xl-3 col-md-6 d-flex flex-column gap-3">
                    @if (isset($filteredImages[4]))
                        <div class="position-relative overflow-hidden hover-effect img-small">
                            <img src="{{ $filteredImages[4]->getPath() }}" class="gallery-img"
                                alt="{{ $filteredImages[4]->alt }}">
                            <div class="hover-content position-absolute bottom-0 start-0 w-100 p-3">
                                <p class="text-light fw-medium">{{ $filteredImages[4]->alt }}</p>
                            </div>
                        </div>
                    @endif

                    @if (isset($filteredImages[5]))
                        <div class="position-relative overflow-hidden hover-effect img-large">
                            <img src="{{ $filteredImages[5]->getPath() }}" class="gallery-img"
                                alt="{{ $filteredImages[5]->alt }}">
                            <div class="hover-content position-absolute bottom-0 start-0 w-100 p-3">
                                <p class="text-light fw-medium">{{ $filteredImages[5]->alt }}</p>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Column 4 -->
                <div class="col-xl-3 col-md-6 d-flex flex-column gap-3">
                    @if (isset($filteredImages[6]))
                        <div class="position-relative overflow-hidden hover-effect img-large">
                            <img src="{{ $filteredImages[6]->getPath() }}" class="gallery-img"
                                alt="{{ $filteredImages[6]->alt }}">
                            <div class="hover-content position-absolute bottom-0 start-0 w-100 p-3">
                                <p class="text-light fw-medium">{{ $filteredImages[6]->alt }}</p>
                            </div>
                        </div>
                    @endif

                    <!-- Read More Card -->
                    @if (!empty($gallery_page))
                        <div
                            class="bg-white border border-success-subtle shadow rounded-3 p-4 h-100 d-flex flex-column justify-content-center text-center">
                            <h6 class="text-dark fw-semibold mb-2">Want to see more photos?</h6>
                            <p class="text-secondary fs-6">See exciting photos from our photo gallery & choose your next
                                trip
                                easily</p>
                            <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', $gallery_page->slug) }}">
                                View more >
                            </a>
                        </div>
                    @endif
                </div>
            </div>

        </div>
    @endif


<script>
document.querySelectorAll('.service-thumb').forEach(thumb => {
    thumb.addEventListener('click', function () {
        document.getElementById('mainServiceImage').src = this.dataset.img;
        document.getElementById('serviceTitle').innerText = this.dataset.title;
        document.getElementById('serviceDesc').innerText = this.dataset.desc;
    });
});
</script>




    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const locationElement = document.getElementById("user-location");

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(success, error);
            } else {
                locationElement.textContent = "Geolocation is not supported by your browser.";
            }

            function success(position) {
                const latitude = position.coords.latitude;
                const longitude = position.coords.longitude;

                // Use a free reverse geocoding API to get city name
                fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`)
                    .then(response => response.json())
                    .then(data => {
                        const city = data.address.city || data.address.town || data.address.village || data
                            .address.county || "Unknown location";
                        const country = data.address.country || "";
                        locationElement.textContent = `${city}, ${country}`;
                    })
                    .catch(() => {
                        locationElement.textContent = `Lat: ${latitude}, Lon: ${longitude}`;
                    });
            }

            function error(err) {
                console.warn(`ERROR(${err.code}): ${err.message}`);
                locationElement.textContent = "Unable to get your location.";
            }
        });
    </script>



@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 line-height is "normal", approximate from font-size
            if (isNaN(lh)) lh = parseFloat(cs.fontSize) * 1.2;

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