@extends('layouts.app')

@section('title', __('pages.meta.product-detail-1.title'))
@section('meta_description', __('pages.meta.product-detail-1.description'))
@section('meta_keywords', __('pages.meta.product-detail-1.keywords'))
@section('meta_author', __('pages.meta.author'))

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/compare-experiences.css') }}">
@endpush

@php
    $data = $productDetail1Data ?? [];

    $gallery = data_get($data, 'gallery', []);
    $galleryMainImages = data_get($gallery, 'mainImages', []);
    $priceBar = data_get($data, 'priceBar', []);

    $breadcrumb = data_get($data, 'breadcrumb.items', data_get($data, 'breadcrumb', []));
    $productInfo = data_get($data, 'productInfo', []);

    $travelExperience = data_get($data, 'travelExperience', []);
    $travelTabs = data_get($travelExperience, 'tabs', []);
    $glance = data_get($travelExperience, 'glance', []);
    $glanceDays = data_get($glance, 'days', []);

    $itinerary = data_get($data, 'itinerary', []);
    $itineraryGallery = data_get($itinerary, 'gallery', []);
    $itineraryDays = data_get($itinerary, 'days', []);

    $accommodations = data_get($data, 'accommodations', []);
    $accommodationsGallery = data_get($accommodations, 'gallery', []);
    $accommodationsItems = data_get($accommodations, 'items', []);

    $notes = data_get($data, 'notes', []);
    $noteSections = data_get($notes, 'sections', []);

    $reviews = data_get($data, 'reviews', []);
    $reviewItems = data_get($reviews, 'items', []);
    $reviewSortOptions = data_get($reviews, 'sortOptions', []);

    $relatedExperiences = data_get($data, 'relatedExperiences', []);
    $trendingSights = data_get($data, 'trendingSights', []);

    $tags = data_get($data, 'tags', []);

    $about = data_get($data, 'about', []);

    $trustpilotReviews = data_get($data, 'trustpilotReviews', []);
    $trustpilotHeader = data_get($trustpilotReviews, 'header', []);
    $trustpilotItems = data_get($trustpilotReviews, 'items', []);

    $mobileCampaign = data_get($data, 'mobileCampaign', []);
    $floatingActions = data_get($data, 'floatingActions', []);
    $mobileNavData = data_get($data, 'mobileNavData', []);

    $compareImage = data_get($galleryMainImages, '0.image', '/assets/images/uploads/9. PRODUCT DETAIL 1-05.png');

    $photoGalleryImagesRaw = [];
    foreach ($galleryMainImages as $image) {
        if (is_array($image)) {
            $photoGalleryImagesRaw[] = $image;
        }
    }
    foreach ($itineraryGallery as $image) {
        if (is_array($image)) {
            $photoGalleryImagesRaw[] = $image;
        }
    }
    foreach ($accommodationsGallery as $image) {
        if (is_array($image)) {
            $photoGalleryImagesRaw[] = $image;
        }
    }
    foreach ($itineraryDays as $day) {
        if (! is_array($day)) {
            continue;
        }
        $dayAccommodationGallery = data_get($day, 'accommodation.gallery', []);
        foreach ($dayAccommodationGallery as $image) {
            if (is_array($image)) {
                $photoGalleryImagesRaw[] = $image;
            }
        }
    }

    $seenPhotoImageUrls = [];
    $photoGalleryImages = [];
    foreach ($photoGalleryImagesRaw as $image) {
        $url = (string) ($image['image'] ?? '');
        if ($url === '' || isset($seenPhotoImageUrls[$url])) {
            continue;
        }
        $seenPhotoImageUrls[$url] = true;
        $photoGalleryImages[] = $image;
    }

    if ($photoGalleryImages === [] && $galleryMainImages !== []) {
        $photoGalleryImages = $galleryMainImages;
    }

    $activeReviewSortText = __('common.page.relevance');
    foreach ($reviewSortOptions as $sortOption) {
        if (!empty($sortOption['active'])) {
            $activeReviewSortText = (string) ($sortOption['label'] ?? $activeReviewSortText);
            break;
        }
    }
@endphp

@section('content')
<div class="site" id="product-detail-1">
        @include('pages.home.shared.header')

        <main class="site-content">
            <section class="section-1__product-detail-1 pt-0 relative">
                <div class="section-1__product-detail-1--button container section-1-navigation">
                    <button id="viewPhotosBtn" class="btn-ss1-product-detail btn-white-small">VIEW PHOTOS</button>
                </div>
                <div class="section-1__product-detail-1--gallery d-flex align-items-center">
                    @foreach ($galleryMainImages as $item)
                        <div class="item-gallery{{ !empty($item['showOnPC']) ? ' show-pc' : '' }}">
                            <img loading="lazy" decoding="async"class="w-100" src="{{ $item['image'] ?? '' }}" alt="{{ $item['alt'] ?? '' }}">
                        </div>
                    @endforeach
                </div>
            </section>

            <div class="photo-modal" id="photoModal">
                <button class="modal-close" id="closeModal" aria-label="Close"></button>

                <div class="modal-main-image">
                    <button class="modal-nav modal-nav-prev" id="prevImage" aria-label="Previous"></button>
                    @foreach ($photoGalleryImages as $index => $image)
                        <img loading="lazy" decoding="async"class="gallery-image{{ $index === 0 ? ' active' : '' }}" src="{{ $image['image'] ?? '' }}" alt="{{ $image['alt'] ?? '' }}">
                    @endforeach
                    <button class="modal-nav modal-nav-next" id="nextImage" aria-label="Next"></button>
                </div>

                <div class="modal-thumbnails">
                    <div class="thumbnail-wrapper">
                        <button class="thumbnail-nav thumbnail-nav-prev" id="thumbnailPrev" aria-label="Scroll Left"></button>
                        <div class="thumbnail-scroll" id="thumbnailScroll">
                            @foreach ($photoGalleryImages as $index => $image)
                                <div class="thumbnail-item{{ $index === 0 ? ' active' : '' }}" data-index="{{ $index }}">
                                    <img loading="lazy" decoding="async" src="{{ $image['image'] ?? '' }}" alt="{{ $image['alt'] ?? '' }}">
                                </div>
                            @endforeach
                        </div>
                        <button class="thumbnail-nav thumbnail-nav-next" id="thumbnailNext" aria-label="Scroll Right"></button>
                    </div>
                </div>
            </div>

            <div class="price-bar-wrapper d-lg-none">
                <div class="price-bar">
                    <div class="days">{{ $priceBar['days'] ?? '' }}<span>{{ $priceBar['daysLabel'] ?? '' }}</span></div>
                    <div class="divider"></div>
                    <div class="label">{{ $priceBar['startingFromLabel'] ?? '' }}</div>
                    <div class="price">{{ $priceBar['price'] ?? '' }}</div>
                    <div class="per-person">{{ $priceBar['perPerson'] ?? '' }}</div>
                </div>
            </div>

            <div class="container">
                <div class="breadcrumb">
                    @foreach ($breadcrumb as $index => $item)
                        @if ($index === 0)
                            <span>{{ $item['text'] ?? '' }}</span>
                        @else
                            <span class="px-2">/</span>
                            @if (!empty($item['link']))
                                <a class="breadcrumb-link color-body text-decoration-none" href="{{ $item['link'] }}">{{ $item['text'] ?? '' }}</a>
                            @else
                                <span>{{ $item['text'] ?? '' }}</span>
                            @endif
                        @endif
                    @endforeach
                </div>
            </div>

            <section class="section-2__product-detail pt-10px">
                <div class="container">
                    <div class="product-detail__content--ss2">
                        <div class="product-detail__left">
                            <div class="price-box d-none d-lg-block">
                                <div class="days">{{ $productInfo['days'] ?? '' }} <span>{{ $productInfo['daysLabel'] ?? '' }}</span></div>
                                <hr>
                                <div>{{ $productInfo['startingFrom'] ?? '' }}</div>
                                <div class="price">{{ $productInfo['priceDesktop'] ?? '' }}</div>
                                <small>{{ $productInfo['perPerson'] ?? '' }}</small>
                            </div>
                        </div>

                        <div class="product-detail__right">
                            <div class="d-flex justify-content-between align-items-start flex-wrap">
                                <div>
                                    <div class="section-title text-uppercase mb-2">{{ $productInfo['title'] ?? '' }}</div>
                                    <div class="d-flex justify-content-between flex-lg-wrap">
                                        <div>
                                            <div class="tour-locations mb-10px">{{ $productInfo['locations'] ?? '' }}</div>
                                            <div class="rating d-lg-block">
                                                <span class="star color-primary"><i class="fa-solid fa-star text-18"></i></span>
                                                <strong class="color-primary">{{ $productInfo['rating'] ?? '' }}</strong>
                                                ({{ $productInfo['reviews'] ?? '' }}) | {{ $productInfo['booked'] ?? '' }} booked
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <div class="best-time mb-10px"><strong class="fw-600">Best time to visit:</strong> {{ $productInfo['bestTimeToVisit'] ?? '' }}</div>
                                            <div class="rating d-lg-none mb-10px">
                                                <span class="star color-primary"><i class="fa-solid fa-star text-18"></i></span>
                                                <strong class="color-primary">{{ $productInfo['rating'] ?? '' }}</strong>
                                                ({{ $productInfo['reviews'] ?? '' }}) | {{ $productInfo['booked'] ?? '' }} booked
                                            </div>
                                            <button class="btn-gradient-small"
                                                data-compare-trigger="product-detail"
                                                data-compare-title="{{ $productInfo['title'] ?? '' }}"
                                                data-compare-image="{{ $compareImage }}">
                                                <i class="fa-solid fa-check"></i> Compare
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <ul class="tour-features mt-3">
                                @foreach (data_get($productInfo, 'features', []) as $feature)
                                    <li>{{ $feature }}</li>
                                @endforeach
                            </ul>
                            <div class="note">{!! $productInfo['note'] ?? '' !!}</div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-3__product-detail-1 pt-0">
                <div class="container">
                    <h2 class="section-title text-uppercase mb-4">{{ $travelExperience['title'] ?? '' }}</h2>
                    <p class="pl-50px">{{ $travelExperience['intro'] ?? '' }}</p>

                    <ul class="nav nav-tabs mb-4 scroll-nav">
                        @foreach ($travelTabs as $tabIndex => $tab)
                            <li class="nav-item">
                                <button class="nav-link{{ $tabIndex === 0 ? ' active' : '' }}" data-scroll="#{{ $tab['id'] ?? '' }}">{{ $tab['label'] ?? '' }}</button>
                            </li>
                        @endforeach
                    </ul>

                    <div class="active" id="glance">
                        <div class="text-16 toggle-wrapper max-height-none">
                            @if (!empty($glance['mapImage']))
                                <div class="map-box mb-4">
                                    <img loading="lazy" decoding="async" src="{{ $glance['mapImage'] }}" alt="Vietnam Map">
                                </div>
                            @endif

                            @php
                                $firstGlanceDay = $glanceDays[0] ?? null;
                                $remainingGlanceDays = array_slice($glanceDays, 1);
                            @endphp

                            @if (is_array($firstGlanceDay))
                                <div class="day-title fw-600">{{ $firstGlanceDay['day'] ?? '' }}</div>
                                <div class="city-title fw-600">{{ $firstGlanceDay['title'] ?? '' }}</div>
                                <ul class="feature-list mb-4">
                                    @foreach (($firstGlanceDay['features'] ?? []) as $feature)
                                        <li>{{ $feature }}</li>
                                    @endforeach
                                </ul>
                            @endif

                            @if ($remainingGlanceDays !== [])
                                <div class="extra-content">
                                    @foreach ($remainingGlanceDays as $day)
                                        <div class="day-title fw-600">{{ $day['day'] ?? '' }}</div>
                                        <div class="city-title fw-600">{{ $day['title'] ?? '' }}</div>
                                        <ul class="feature-list mb-4">
                                            @foreach (($day['features'] ?? []) as $feature)
                                                <li>{{ $feature }}</li>
                                            @endforeach
                                        </ul>
                                    @endforeach
                                </div>
                                <div class="text-end">
                                    <button class="btn-gradient-small text-decoration-underline" onclick="toggleContent(this)">
                                        {{ data_get($homeSharedData, 'ui.seeMore', 'See more') }}
                                        <span class="arrow"><i class="fa-light fa-angle-right"></i></span>
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </section>

            <section id="itinerary" class="section-4__product-detail-1">
                <div class="container">
                    <h2 class="section-title__style2">{{ $itinerary['title'] ?? '' }}</h2>
                    <div class="product-detail-1__ss4--swiper1 py-4 relative" data-swiper data-loop="true"
                        data-speed="1000" data-space="30" data-effect="slide" data-slides-mobile="2"
                        data-slides-desktop="3" data-next=".product-detail-1__ss4--swiper1-next"
                        data-prev=".product-detail-1__ss4--swiper1-prev">

                        <div class="swiper-button-prev-border product-detail-1__ss4--swiper1-prev"></div>
                        <div class="swiper-button-next-border product-detail-1__ss4--swiper1-next"></div>

                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach ($itineraryGallery as $image)
                                    <div class="swiper-slide">
                                        <a href="#" class="text-decoration-none text-reset">
                                            <div class="section-6-item">
                                                <img loading="lazy" decoding="async" src="{{ $image['image'] ?? '' }}" class="section-6-img-top w-100 img-fluid fit-cover" alt="{{ $image['alt'] ?? '' }}">
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="product-detail-1__ss4--des">
                        <div class="text-16 toggle-wrapper">
                            @php
                                $firstItineraryDay = $itineraryDays[0] ?? null;
                                $remainingItineraryDays = array_slice($itineraryDays, 1);
                                $firstDayContent = is_array($firstItineraryDay) ? ($firstItineraryDay['content'] ?? []) : [];
                                $firstDayAccommodation = is_array($firstItineraryDay) ? ($firstItineraryDay['accommodation'] ?? []) : [];
                            @endphp

                            @if (is_array($firstItineraryDay))
                                <div class="day-title fw-600">{{ $firstItineraryDay['day'] ?? '' }}</div>
                                <div class="city-title fw-600">{{ $firstItineraryDay['title'] ?? '' }}</div>
                                @if (!empty($firstDayContent[0]))
                                    <p>{{ $firstDayContent[0] }}</p>
                                @endif
                            @endif

                            <div class="extra-content">
                                @if (count($firstDayContent) > 1)
                                    @foreach (array_slice($firstDayContent, 1) as $content)
                                        <p>{{ $content }}</p>
                                    @endforeach
                                @endif

                                @if (is_array($firstDayAccommodation) && $firstDayAccommodation !== [])
                                    <div class="city-title fw-600">{{ $firstDayAccommodation['title'] ?? '' }}</div>
                                    <ul class="feature-list mb-4">
                                        @foreach (($firstDayAccommodation['items'] ?? []) as $item)
                                            <li>{{ $item }}</li>
                                        @endforeach
                                    </ul>

                                    @php $firstItineraryAccommodationGallery = $firstDayAccommodation['gallery'] ?? []; @endphp
                                    @if (is_array($firstItineraryAccommodationGallery) && $firstItineraryAccommodationGallery !== [])
                                        <div class="product-detail-1__ss4--swiper2 py-4 relative" data-swiper data-loop="true"
                                            data-speed="1000" data-space="30" data-effect="slide" data-slides-mobile="2"
                                            data-slides-desktop="3" data-next=".product-detail-1__ss4--swiper2-next"
                                            data-prev=".product-detail-1__ss4--swiper2-prev">
                                            <div class="swiper-button-prev-border product-detail-1__ss4--swiper2-prev"></div>
                                            <div class="swiper-button-next-border product-detail-1__ss4--swiper2-next"></div>
                                            <div class="swiper">
                                                <div class="swiper-wrapper">
                                                    @foreach ($firstItineraryAccommodationGallery as $image)
                                                        <div class="swiper-slide">
                                                            <a href="#" class="text-decoration-none text-reset">
                                                                <div class="section-6-item">
                                                                    <img loading="lazy" decoding="async" src="{{ $image['image'] ?? '' }}" class="section-6-img-top w-100 img-fluid fit-cover" alt="{{ $image['alt'] ?? '' }}">
                                                                </div>
                                                            </a>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endif

                                @foreach ($remainingItineraryDays as $dayIndex => $day)
                                    <div class="day-title fw-600">{{ $day['day'] ?? '' }}</div>
                                    <div class="city-title fw-600">{{ $day['title'] ?? '' }}</div>

                                    @foreach (($day['content'] ?? []) as $content)
                                        <p>{{ $content }}</p>
                                    @endforeach

                                    @php $dayAccommodation = $day['accommodation'] ?? []; @endphp
                                    @if (is_array($dayAccommodation) && $dayAccommodation !== [])
                                        <div class="city-title fw-600">{{ $dayAccommodation['title'] ?? '' }}</div>
                                        <ul class="feature-list mb-4">
                                            @foreach (($dayAccommodation['items'] ?? []) as $item)
                                                <li>{{ $item }}</li>
                                            @endforeach
                                        </ul>

                                        @php
                                            $dayAccommodationGallery = $dayAccommodation['gallery'] ?? [];
                                            $nestedItinerarySwiper = 'swiper'.(10 + $dayIndex);
                                        @endphp
                                        @if (is_array($dayAccommodationGallery) && $dayAccommodationGallery !== [])
                                            <div class="product-detail-1__ss4--{{ $nestedItinerarySwiper }} py-4 relative" data-swiper data-loop="true"
                                                data-speed="1000" data-space="30" data-effect="slide" data-slides-mobile="2"
                                                data-slides-desktop="3" data-next=".product-detail-1__ss4--{{ $nestedItinerarySwiper }}-next"
                                                data-prev=".product-detail-1__ss4--{{ $nestedItinerarySwiper }}-prev">
                                                <div class="swiper-button-prev-border product-detail-1__ss4--{{ $nestedItinerarySwiper }}-prev"></div>
                                                <div class="swiper-button-next-border product-detail-1__ss4--{{ $nestedItinerarySwiper }}-next"></div>
                                                <div class="swiper">
                                                    <div class="swiper-wrapper">
                                                        @foreach ($dayAccommodationGallery as $image)
                                                            <div class="swiper-slide">
                                                                <a href="#" class="text-decoration-none text-reset">
                                                                    <div class="section-6-item">
                                                                        <img loading="lazy" decoding="async" src="{{ $image['image'] ?? '' }}" class="section-6-img-top w-100 img-fluid fit-cover" alt="{{ $image['alt'] ?? '' }}">
                                                                    </div>
                                                                </a>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                @endforeach
                            </div>

                            <div class="text-end">
                                <button class="btn-gradient-small text-decoration-underline" onclick="toggleContent(this)">
                                    {{ data_get($homeSharedData, 'ui.seeMore', 'See more') }}
                                    <span class="arrow"><i class="fa-light fa-angle-right"></i></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="accommodation" class="section-4__product-detail-1">
                <div class="container">
                    <h2 class="section-title__style2">{{ $accommodations['title'] ?? '' }}</h2>
                    <div class="product-detail-1__ss4--swiper8 py-4 relative" data-swiper data-loop="true"
                        data-speed="1000" data-space="30" data-effect="slide" data-slides-mobile="2"
                        data-slides-desktop="3" data-next=".product-detail-1__ss4--swiper8-next"
                        data-prev=".product-detail-1__ss4--swiper8-prev">

                        <div class="swiper-button-prev-border product-detail-1__ss4--swiper8-prev"></div>
                        <div class="swiper-button-next-border product-detail-1__ss4--swiper8-next"></div>

                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach ($accommodationsGallery as $image)
                                    <div class="swiper-slide">
                                        <a href="#" class="text-decoration-none text-reset">
                                            <div class="section-6-item">
                                                <img loading="lazy" decoding="async" src="{{ $image['image'] ?? '' }}" class="section-6-img-top w-100 img-fluid fit-cover" alt="{{ $image['alt'] ?? '' }}">
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="product-detail-1__ss4--des">
                        <div class="text-16 toggle-wrapper">
                            @php
                                $firstAccommodationItem = $accommodationsItems[0] ?? null;
                                $remainingAccommodationItems = array_slice($accommodationsItems, 1);
                            @endphp

                            @if (is_array($firstAccommodationItem))
                                <div class="day-title fw-600">{{ $firstAccommodationItem['day'] ?? '' }}</div>
                                <div class="city-title fw-600">{{ $firstAccommodationItem['title'] ?? '' }}</div>
                                <p>{{ $firstAccommodationItem['description'] ?? '' }}</p>
                            @endif

                            <div class="extra-content">
                                @php $firstAccommodationGallery = is_array($firstAccommodationItem) ? ($firstAccommodationItem['gallery'] ?? []) : []; @endphp
                                @if (is_array($firstAccommodationGallery) && $firstAccommodationGallery !== [])
                                    <div class="product-detail-1__ss4--swiper13 py-4 relative" data-swiper data-loop="true"
                                        data-speed="1000" data-space="30" data-effect="slide" data-slides-mobile="2"
                                        data-slides-desktop="3" data-next=".product-detail-1__ss4--swiper13-next"
                                        data-prev=".product-detail-1__ss4--swiper13-prev">
                                        <div class="swiper-button-prev-border product-detail-1__ss4--swiper13-prev"></div>
                                        <div class="swiper-button-next-border product-detail-1__ss4--swiper13-next"></div>
                                        <div class="swiper">
                                            <div class="swiper-wrapper">
                                                @foreach ($firstAccommodationGallery as $image)
                                                    <div class="swiper-slide">
                                                        <a href="#" class="text-decoration-none text-reset">
                                                            <div class="section-6-item">
                                                                <img loading="lazy" decoding="async" src="{{ $image['image'] ?? '' }}" class="section-6-img-top w-100 img-fluid fit-cover" alt="{{ $image['alt'] ?? '' }}">
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                @foreach ($remainingAccommodationItems as $item)
                                    <div class="day-title fw-600">{{ $item['day'] ?? '' }}</div>
                                    <div class="city-title fw-600">{{ $item['title'] ?? '' }}</div>
                                    <p>{{ $item['description'] ?? '' }}</p>
                                @endforeach
                            </div>

                            <div class="text-end">
                                <button class="btn-gradient-small text-decoration-underline" onclick="toggleContent(this)">
                                    {{ data_get($homeSharedData, 'ui.seeMore', 'See more') }}
                                    <span class="arrow"><i class="fa-light fa-angle-right"></i></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="notes" class="section-4__product-detail-1">
                <div class="container">
                    <h2 class="section-title__style2">{{ $notes['title'] ?? '' }}</h2>
                    <div class="section-4__product-detail-1--img py-4">
                        <img loading="lazy" decoding="async" src="{{ $notes['mainImage'] ?? '' }}" alt="image">
                    </div>
                    <div class="product-detail-1__ss4--des">
                        <div class="text-16 toggle-wrapper">
                            @php
                                $firstNoteSection = $noteSections[0] ?? null;
                                $remainingNoteSections = array_slice($noteSections, 1);
                            @endphp

                            @if (is_array($firstNoteSection))
                                <div class="day-title fw-600">{{ $firstNoteSection['title'] ?? '' }}</div>
                                <ul class="feature-list mb-4">
                                    @foreach (($firstNoteSection['items'] ?? []) as $item)
                                        <li>{{ $item }}</li>
                                    @endforeach
                                </ul>
                            @endif

                            @if ($remainingNoteSections !== [])
                                <div class="extra-content">
                                    @foreach ($remainingNoteSections as $section)
                                        @if (!empty($section['icon']))
                                            <img loading="lazy" decoding="async" src="{{ $section['icon'] }}" class="mb-4" width="60px" alt="icon">
                                        @endif
                                        <div class="day-title fw-600">{{ $section['title'] ?? '' }}</div>

                                        @if (!empty($section['items']))
                                            <ul class="feature-list mb-4">
                                                @foreach ($section['items'] as $item)
                                                    <li>{{ $item }}</li>
                                                @endforeach
                                            </ul>
                                        @endif

                                        @if (!empty($section['content']))
                                            @foreach ($section['content'] as $paragraph)
                                                <p>{{ $paragraph }}</p>
                                            @endforeach
                                        @endif
                                    @endforeach
                                </div>
                                <div class="text-end">
                                    <button class="btn-gradient-small text-decoration-underline" onclick="toggleContent(this)">
                                        {{ data_get($homeSharedData, 'ui.seeMore', 'See more') }}
                                        <span class="arrow"><i class="fa-light fa-angle-right"></i></span>
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </section>

            <section id="reviews" class="section-5__product-detail-1">
                <div class="container">
                    <h2 class="section-title__style2 mb-4">{{ $reviews['title'] ?? '' }}</h2>
                    <div class="rating text-20 mb-4">
                        <span class="star color-primary"><i class="fa-solid fa-star text-18"></i></span>
                        <strong class="color-primary">{{ data_get($reviews, 'rating.score', '') }}</strong>
                        ({{ data_get($reviews, 'rating.count', '') }}) | {{ data_get($reviews, 'rating.booked', '') }} booked
                    </div>
                    <div class="d-flex justify-content-start align-items-center pr-12px mb-4">
                        <span class="text-12 show-pc mr-10px">{{ __('common.page.sort_by') }}</span>
                        <div class="custom-sort-dropdown">
                            <button class="sort-dropdown-toggle" id="sortDropdownToggle">
                                <span id="sortSelectedText">{{ $activeReviewSortText }}</span>
                                <i class="fas fa-chevron-down"></i>
                            </button>
                            <div class="sort-dropdown-menu" id="sortDropdownMenu">
                                @foreach ($reviewSortOptions as $sortOption)
                                    <div class="sort-option{{ !empty($sortOption['active']) ? ' active' : '' }}" data-value="{{ $sortOption['value'] ?? '' }}">{{ $sortOption['label'] ?? '' }}</div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="section-5__product-detail-1--content">
                        @php
                            $firstReview = $reviewItems[0] ?? null;
                            $remainingReviews = array_slice($reviewItems, 1);
                        @endphp

                        @if (is_array($firstReview))
                            <div class="review-item">
                                <div class="review-header mb-4">
                                    <div class="review-user">
                                        <div class="review-avatar">{{ $firstReview['avatar'] ?? '' }}</div>
                                        <div class="review-meta">
                                            <div class="review-name">{{ $firstReview['name'] ?? '' }}</div>
                                            <div class="review-date">{{ $firstReview['date'] ?? '' }}</div>
                                        </div>
                                    </div>
                                    <div class="review-rating d-flex align-items-center">
                                        <span class="review-rating-text">{{ $firstReview['ratingText'] ?? '' }}</span>
                                        <span class="review-rating-score">{{ $firstReview['ratingScore'] ?? '' }}</span>
                                    </div>
                                </div>
                                <div class="review-content toggle-wrapper">
                                    <p class="review-text">{{ $firstReview['text'] ?? '' }}</p>
                                    <div class="extra-content"></div>
                                    <div class="text-end">
                                        <button class="see-more-btn color-secondary text-decoration-underline float-right" onclick="toggleContent(this)">
                                            {{ data_get($homeSharedData, 'ui.seeMore', 'See more') }}
                                            <span class="arrow"><i class="fa-light fa-angle-right"></i></span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="review-more-content toggle-wrapper max-height-none mt-5">
                                @php $firstReviewGallery = $firstReview['gallery'] ?? []; @endphp
                                @if (is_array($firstReviewGallery) && $firstReviewGallery !== [])
                                    <div class="product-detail-1__ss4--swiper4 relative mb-4 pb-4 border-bottom" data-swiper
                                        data-loop="true" data-speed="1000" data-space="15" data-effect="slide"
                                        data-slides-mobile="3" data-slides-desktop="6"
                                        data-next=".product-detail-1__ss4--swiper4-next"
                                        data-prev=".product-detail-1__ss4--swiper4-prev">
                                        <div class="swiper-button-prev-border product-detail-1__ss4--swiper4-prev"></div>
                                        <div class="swiper-button-next-border product-detail-1__ss4--swiper4-next"></div>
                                        <div class="swiper">
                                            <div class="swiper-wrapper">
                                                @foreach ($firstReviewGallery as $image)
                                                    <div class="swiper-slide">
                                                        <a href="#" class="text-decoration-none text-reset">
                                                            <div class="section-6-item">
                                                                <img loading="lazy" decoding="async" src="{{ $image['image'] ?? '' }}" class="section-6-img-top w-100 img-fluid fit-cover" alt="{{ $image['alt'] ?? '' }}">
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <div class="extra-content">
                                    @foreach ($remainingReviews as $reviewIndex => $review)
                                        <div class="review-more-{{ $reviewIndex + 1 }}">
                                            <div class="review-header mb-4">
                                                <div class="review-user">
                                                    <div class="review-avatar">{{ $review['avatar'] ?? '' }}</div>
                                                    <div class="review-meta">
                                                        <div class="review-name">{{ $review['name'] ?? '' }}</div>
                                                        <div class="review-date">{{ $review['date'] ?? '' }}</div>
                                                    </div>
                                                </div>
                                                <div class="review-rating d-flex align-items-center">
                                                    <span class="review-rating-text">{{ $review['ratingText'] ?? '' }}</span>
                                                    <span class="review-rating-score">{{ $review['ratingScore'] ?? '' }}</span>
                                                </div>
                                            </div>
                                            <div class="review-content">
                                                <p class="review-text">{{ $review['text'] ?? '' }}</p>
                                            </div>

                                            @php
                                                $reviewGallery = $review['gallery'] ?? [];
                                                $reviewSwiperClass = 'swiper'.(5 + $reviewIndex);
                                            @endphp
                                            @if (is_array($reviewGallery) && $reviewGallery !== [])
                                                <div class="product-detail-1__ss4--{{ $reviewSwiperClass }} relative mb-4 pb-4 border-bottom" data-swiper
                                                    data-loop="true" data-speed="1000" data-space="15" data-effect="slide"
                                                    data-slides-mobile="3" data-slides-desktop="6"
                                                    data-next=".product-detail-1__ss4--{{ $reviewSwiperClass }}-next"
                                                    data-prev=".product-detail-1__ss4--{{ $reviewSwiperClass }}-prev">
                                                    <div class="swiper-button-prev-border product-detail-1__ss4--{{ $reviewSwiperClass }}-prev"></div>
                                                    <div class="swiper-button-next-border product-detail-1__ss4--{{ $reviewSwiperClass }}-next"></div>
                                                    <div class="swiper">
                                                        <div class="swiper-wrapper">
                                                            @foreach ($reviewGallery as $image)
                                                                <div class="swiper-slide">
                                                                    <a href="#" class="text-decoration-none text-reset">
                                                                        <div class="section-6-item">
                                                                            <img loading="lazy" decoding="async" src="{{ $image['image'] ?? '' }}" class="section-6-img-top w-100 img-fluid fit-cover" alt="{{ $image['alt'] ?? '' }}">
                                                                        </div>
                                                                    </a>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach

                                    <nav aria-label="Page navigation" class="mt-5 border-bottom pb-4">
                                        <ul class="pagination justify-content-end">
                                            <li class="page-item"><a class="page-link" style="padding: 3px 8px;" href="#"><i class="fa fa-chevron-left text-10" aria-hidden="true"></i></a></li>
                                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                                            <li class="page-item"><a class="page-link" href="#">4</a></li>
                                            <li class="page-item"><a class="page-link" href="#">5</a></li>
                                            <li class="page-item"><a class="page-link" href="#">6</a></li>
                                            <li class="page-item"><a class="page-link" href="#">...</a></li>
                                            <li class="page-item"><a class="page-link" style="padding: 3px 8px;" href="#"><i class="fa fa-chevron-right text-10" aria-hidden="true"></i></a></li>
                                        </ul>
                                    </nav>
                                </div>

                                <button class="btn-gradient-small text-decoration-underline float-right" onclick="toggleContent(this)">
                                    {{ data_get($homeSharedData, 'ui.seeMore', 'See more') }}
                                    <span class="arrow"><i class="fa-light fa-angle-right"></i></span>
                                </button>
                            </div>
                        @endif
                    </div>
                </div>
            </section>

            <section class="section-4">
                <div class="container">
                    <div class="mb-4 text-center section-4-header section-4-header--related">
                        <h2 class="section-title text-uppercase">{{ $relatedExperiences['title'] ?? '' }}</h2>
                    </div>
                    <div class="product-detail-1__ss6--swiper6 py-4 relative" data-swiper data-loop="true"
                        data-speed="1000" data-space="30" data-effect="slide" data-slides-mobile="2"
                        data-slides-desktop="4" data-next=".product-detail-1__ss6--swiper6-next"
                        data-prev=".product-detail-1__ss6--swiper6-prev">
                        <div class="swiper-button-prev-border product-detail-1__ss6--swiper6-next"></div>
                        <div class="swiper-button-next-border product-detail-1__ss6--swiper6-prev"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($relatedExperiences, 'items', []) as $item)
                                    <div class="swiper-slide">
                                        <a href="{{ $item['link'] ?? '#' }}" class="text-decoration-none text-reset">
                                            <div class="card h-100 section-4-card">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}" class="card-img-top img-fluid fit-cover" alt="{{ $item['alt'] ?? '' }}">
                                                <div class="card-body">
                                                    <h3 class="h6 card-title fw-500 mb-3">{{ $item['title'] ?? '' }}</h3>
                                                    <p class="card-text text-muted mb-3">{{ $item['location'] ?? '' }}</p>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <span class="fw-500 text-16">{{ $item['price'] ?? '' }}</span>
                                                        @if (!empty($item['sale']))
                                                            <span class="span-gradient">{{ $item['sale'] }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-4">
                <div class="container">
                    <div class="mb-4 text-center section-4-header section-4-header--trending">
                        <h2 class="section-title text-uppercase">{{ $trendingSights['title'] ?? '' }}</h2>
                    </div>
                    <div class="product-detail-1__ss6--swiper7 py-4 relative" data-swiper data-loop="true"
                        data-speed="1000" data-space="30" data-effect="slide" data-slides-mobile="2"
                        data-slides-desktop="4" data-next=".product-detail-1__ss6--swiper7-next"
                        data-prev=".product-detail-1__ss6--swiper7-prev">
                        <div class="swiper-button-prev-border product-detail-1__ss6--swiper7-next"></div>
                        <div class="swiper-button-next-border product-detail-1__ss6--swiper7-prev"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($trendingSights, 'items', []) as $item)
                                    <div class="swiper-slide">
                                        <a href="{{ $item['link'] ?? '#' }}" class="text-decoration-none text-reset">
                                            <div class="card h-100 section-4-card">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}" class="card-img-top img-fluid fit-cover" alt="{{ $item['alt'] ?? '' }}">
                                                <div class="card-body">
                                                    <h3 class="h6 card-title fw-500 mb-3">{{ $item['title'] ?? '' }}</h3>
                                                    <p class="card-text text-muted mb-3">{{ $item['location'] ?? '' }}</p>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <span class="fw-500 text-16">{{ $item['price'] ?? '' }}</span>
                                                        @if (!empty($item['sale']))
                                                            <span class="span-gradient">{{ $item['sale'] }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <p class="mt-5">{!! $trendingSights['disclaimer'] ?? '' !!}</p>
                </div>
            </section>

            <section class="section-7__product-detail-1">
                <div class="container">
                    <div class="tag-list">
                        @foreach ($tags as $tag)
                            <a href="#" class="tag-item">{{ $tag }}</a>
                        @endforeach
                    </div>
                </div>
            </section>

            <section class="section-7">
                <div class="container">
                    <div class="accordion accordion-flush" id="accordionFlushExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingOne">
                                <button class="section-title accordion-button collapsed p-0" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false"
                                    aria-controls="flush-collapseOne">
                                    {{ $about['title'] ?? '' }}
                                </button>
                            </h2>
                            <div id="flush-collapseOne" class="accordion-collapse collapse"
                                aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">{!! $about['content'] ?? '' !!}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div class="container">
                    <div class="breadcrumb mb-30px">
                        @foreach ($breadcrumb as $index => $item)
                            @if ($index === 0)
                                <span>{{ $item['text'] ?? '' }}</span>
                            @else
                                <span class="px-2">/</span>
                                @if (!empty($item['link']))
                                    <a class="breadcrumb-link color-body text-decoration-none" href="{{ $item['link'] }}">{{ $item['text'] ?? '' }}</a>
                                @else
                                    <span>{{ $item['text'] ?? '' }}</span>
                                @endif
                            @endif
                        @endforeach
                    </div>
                    <div class="border-top border-secondary"></div>
                </div>
            </section>

            @include('pages.home.shared.section-benefits', ['sectionBenefitsData' => $sectionBenefits])

            <section class="section-6-product-2">
                <div class="container">
                    @include('pages.home.shared.trustpilot-section', ['trustpilotData' => $trustpilotReviews])
                </div>
            </section>
        </main>

        @include('pages.home.shared.footer')
        @include('pages.home.shared.popup-booking')

        <div class="floating-actions bottom-160px" id="floatingActions">
            @foreach ($floatingActions as $action)
                <a href="{{ $action['href'] ?? '#' }}" class="floating-btn{{ ($action['id'] ?? '') === 'saveBtn' ? ' save-btn' : '' }}" id="{{ $action['id'] ?? '' }}">
                    <img loading="lazy" decoding="async" src="{{ $action['img'] ?? '' }}" width="{{ $action['width'] ?? 25 }}" height="{{ $action['height'] ?? 25 }}" alt="{{ $action['alt'] ?? '' }}">
                    @if (!empty($action['badge']))
                        <span class="badge">{{ $action['badge'] }}</span>
                    @endif
                    @if (!empty($action['text']))
                        <span class="save-bag">{{ $action['text'] }}</span>
                    @endif
                </a>
            @endforeach
        </div>

        <div class="mobile-bottom-nav" id="mobileBottomNav">
            <div class="nav-campaign-bottom">
                <div class="campaign-content">
                    <div class="ad-content fw-600 color-primary">{{ $mobileCampaign['title'] ?? '' }}</div>
                    <div class="text-16">{{ $mobileCampaign['subtitle'] ?? '' }}</div>
                </div>
                <div class="campaign-button open-booking-btn">
                    <a href="{{ $mobileCampaign['buttonLink'] ?? '#' }}" class="btn-gradient">{{ $mobileCampaign['buttonText'] ?? '' }}</a>
                </div>
            </div>

            <div class="nav-container bottom-menu d-none">
                @foreach ($mobileNavData as $item)
                    @php
                        $isTrends = ($item['href'] ?? '') === './trends.html';
                        $hasTwoStates = !empty($item['imgCurrent']) && !empty($item['imgNotCurrent']);
                        $isHome = in_array($item['href'] ?? '', ['/', '/vi', './index.html'], true);
                    @endphp
                    @if ($isTrends)
                        <a href="{{ $item['href'] ?? '#' }}" class="nav-item nav-top-bottom" id="trends">
                            <div class="nav-icon icon-top-bottom-mobile">
                                <img loading="lazy" decoding="async"class="not-current" src="{{ $item['imgNotCurrent'] ?? '' }}" width="50" height="50" alt="{{ $item['alt'] ?? '' }}">
                                <img loading="lazy" decoding="async"class="current-page" src="{{ $item['imgCurrent'] ?? '' }}" width="50" height="50" alt="{{ $item['alt'] ?? '' }}">
                            </div>
                            <div class="nav-label">{{ $item['label'] ?? '' }}</div>
                        </a>
                    @elseif ($hasTwoStates)
                        <a href="{{ $item['href'] ?? '#' }}" class="nav-item" @if($isHome) id="home" @endif>
                            <div class="nav-icon">
                                <img loading="lazy" decoding="async"class="current-page" src="{{ $item['imgCurrent'] ?? '' }}" width="25" height="25" alt="{{ $item['alt'] ?? '' }}">
                                <img loading="lazy" decoding="async"class="not-current" src="{{ $item['imgNotCurrent'] ?? '' }}" width="25" height="25" alt="{{ $item['alt'] ?? '' }}">
                            </div>
                            <div class="nav-label">{{ $item['label'] ?? '' }}</div>
                        </a>
                    @else
                        <a href="{{ $item['href'] ?? '#' }}" class="nav-item">
                            <div class="nav-icon">
                                <img loading="lazy" decoding="async" src="{{ $item['imgNotCurrent'] ?? '' }}" width="25" height="25" alt="{{ $item['alt'] ?? '' }}">
                            </div>
                            <div class="nav-label">{{ $item['label'] ?? '' }}</div>
                        </a>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        window.__HOME_SSR_SHARED__ = true;
        window.__HOME_UI_TEXTS = @json($homeSharedData['ui'] ?? []);
    </script>
    <script src="{{ asset('assets/js/lib/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/js/lib/swiper-bundle.min.js') }}"></script>
    <script src="{{ asset('assets/js/custom-swiper.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/intlTelInput.min.js"></script>
    <script src="{{ asset('assets/js/header-events.js') }}"></script>
    <script src="{{ asset('assets/js/popup-booking.js') }}"></script>
    <script src="{{ asset('assets/js/home.js') }}"></script>
    <script src="{{ asset('assets/js/compare-manager.js') }}"></script>
    <script src="{{ asset('assets/js/photo-gallery.js') }}"></script>
    <script src="{{ asset('assets/js/product-detail-1.js') }}"></script>
@endpush