@extends('layouts.app')

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

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

@php
    $data = $productCategory4Data ?? [];
    $banner = data_get($data, 'banner', []);
    $promoCards = data_get($data, 'promoCards', []);
    $saveDeals = data_get($data, 'saveDeals', []);
    $recentSearches = data_get($data, 'recentSearches', []);
    $recentViews = data_get($data, 'recentViews', []);
    $popularDestinations = data_get($data, 'popularDestinations', []);
    $favoriteStays = data_get($data, 'favoriteStays', []);
    $bundlesSaves = data_get($data, 'bundlesSaves', []);
    $cruiseBanner = data_get($data, 'cruiseBanner', []);
    $uniqueStays = data_get($data, 'uniqueStays', []);
    $about = data_get($data, 'about', []);
    $reviews = data_get($data, 'reviews', []);
    $floatingActions = data_get($data, 'floatingActions', []);
    $mobileNavData = data_get($data, 'mobileNavData', []);
    $popularTabs = data_get($popularDestinations, 'tabs', []);
    $activePopularTab = $popularTabs[0] ?? null;
    $bundleTabs = data_get($bundlesSaves, 'tabs', []);
    $activeBundleTab = $bundleTabs[0] ?? null;
@endphp

@section('content')
<div class="site" id="product-category-4-page">
        <!-- load header  -->
        @include('pages.home.shared.header')

        <!-- body -->
        <main class="site-content">
            <div class="container pt-50px">
                <div class="breadcrumb mb-0">
                    <span>{{ __('common.page.home') }}</span>
                    <span class="px-2">/</span>
                    <a class="breadcrumb-link color-body text-decoration-none"
                        href="{{ app()->getLocale() === 'vi' ? '/vi/luu-tru' : '/accommodations' }}">{{ __('common.page.accommodations') }}</a>
                </div>
            </div>
            <section class="section-1__product-category-4-page pt-30px pb-0">
                <!-- PC SEARCH BAR -->
                <div class="d-none d-md-block">
                    <div class="container">
                        <div class="d-flex gap-3 align-items-center justify-content-between">
                            <!-- Where to -->
                            <div class="filter-location w-lg-33">
                                <div class="position-relative">
                                    <div id="destToggleDesktop" class="search-field d-flex align-items-center gap-2">
                                        <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/destination.png') }}" alt="icon" width="20"
                                            height="20">
                                        <div class="flex-grow-1">
                                            <p class="field-label">{{ __('common.page.where_to') }}</p>
                                            <p id="destValueDesktop" class="field-value">Ho Chi Minh, Vietnam</p>
                                        </div>
                                    </div>
                                    <!-- Desktop Destination Dropdown -->
                                    <div id="destDropdownDesktop" class="custom-dropdown mt-1">
                                        <div>
                                            <div class="dropdown-item-custom dest-option" data-value="Ho Chi Minh">
                                                <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/destination.png') }}" alt="icon" width="30"
                                                    height="30">
                                                <span>Ho Chi Minh</span>
                                            </div>
                                            <div class="dropdown-item-custom dest-option"
                                                data-value="JW Marriott Saigon">
                                                <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/accommodation - mobile.png') }}" alt="icon"
                                                    width="30" height="30">
                                                <span>JW Marriott Saigon</span>
                                            </div>
                                            <div class="dropdown-item-custom dest-option"
                                                data-value="Fusion Original Saigon">
                                                <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/accommodation - mobile.png') }}" alt="icon"
                                                    width="30" height="30">
                                                <span>Fusion Original Saigon</span>
                                            </div>
                                            <div class="dropdown-item-custom dest-option"
                                                data-value="An Lam Retreats Saigon River">
                                                <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/accommodation - mobile.png') }}" alt="icon"
                                                    width="30" height="30">
                                                <span>An Lam Retreats Saigon River</span>
                                            </div>
                                            <div class="dropdown-item-custom dest-option" data-value="Park Hyatt">
                                                <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/accommodation - mobile.png') }}" alt="icon"
                                                    width="30" height="30">
                                                <span>Park Hyatt</span>
                                            </div>
                                            <div class="dropdown-item-custom dest-option" data-value="The Reverie">
                                                <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/accommodation - mobile.png') }}" alt="icon"
                                                    width="30" height="30">
                                                <span>The Reverie</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Dates -->
                            <div class="filter-date w-lg-33">
                                <div class="position-relative">
                                    <div id="dateToggleDesktop" class="search-field d-flex align-items-center gap-2">
                                        <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/Booking form - Mobile (2).png') }}" width="25"
                                            height="25" alt="icon">
                                        <div class="flex-grow-1">
                                            <p class="field-label">{{ __('common.page.dates') }}</p>
                                            <p id="dateValueDesktop" class="field-value">Aug 12 - Aug 14</p>
                                        </div>
                                    </div>
                                    <!-- Desktop Calendar Dropdown -->
                                    <div id="dateDropdownDesktop" class="custom-dropdown mt-1"
                                        style="width: 650px; left: 50%; transform: translateX(-50%);">
                                        <div class="">
                                            <div
                                                class="d-flex justify-content-center bg-color-gray height-50px align-items-center mb-3 px-4">
                                                <h5 class="fw-600 text-18 mb-0">{{ __('common.page.calendar') }}</h5>
                                            </div>

                                            <div class="d-flex justify-content-between align-items-center px-5">
                                                <span id="startDateDesktop" class="fw-bold">{{ __('common.page.start_date') }}</span>
                                                <i class="fa-solid fa-arrow-right"></i>
                                                <span id="endDateDesktop" class="fw-bold">{{ __('common.page.end_date') }}</span>
                                            </div>

                                            <div class="p-3">
                                                <div class="row g-4">
                                                    <!-- Calendar 1 -->
                                                    <div class="col-6">
                                                        <div class="border-1px min-height-315px p-10px border-radius">
                                                            <div
                                                                class="d-flex justify-content-between align-items-center mb-3 px-2">
                                                                <button id="prevMonthDesktop"
                                                                    class="btn btn-sm btn-light p-1"><i
                                                                        class="fa-sharp fa-solid text-13 color-body fa-angles-left"></i></button>
                                                                <h6 id="month1TitleDesktop" class="fw-bold mb-0"></h6>
                                                                <div style="width: 32px;"></div>
                                                            </div>
                                                            <div class="calendar-grid mb-2">
                                                                <div class="calendar-header">Su</div>
                                                                <div class="calendar-header">Mo</div>
                                                                <div class="calendar-header">Tu</div>
                                                                <div class="calendar-header">We</div>
                                                                <div class="calendar-header">Th</div>
                                                                <div class="calendar-header">Fr</div>
                                                                <div class="calendar-header">Sa</div>
                                                            </div>
                                                            <div id="calendar1Desktop" class="calendar-grid"></div>
                                                        </div>
                                                    </div>
                                                    <!-- Calendar 2 -->
                                                    <div class="col-6">
                                                        <div class="border-1px min-height-315px p-10px border-radius">
                                                            <div
                                                                class="d-flex justify-content-between align-items-center mb-3 px-2">
                                                                <div style="width: 32px;"></div>
                                                                <h6 id="month2TitleDesktop" class="fw-bold mb-0"></h6>
                                                                <button id="nextMonthDesktop"
                                                                    class="btn btn-sm btn-light p-1"><i
                                                                        class="fa-sharp fa-solid text-13 color-body fa-angles-right"></i></button>
                                                            </div>
                                                            <div class="calendar-grid mb-2">
                                                                <div class="calendar-header">Su</div>
                                                                <div class="calendar-header">Mo</div>
                                                                <div class="calendar-header">Tu</div>
                                                                <div class="calendar-header">We</div>
                                                                <div class="calendar-header">Th</div>
                                                                <div class="calendar-header">Fr</div>
                                                                <div class="calendar-header">Sa</div>
                                                            </div>
                                                            <div id="calendar2Desktop" class="calendar-grid"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="d-flex flex-wrap gap-2 p-3 border-top">
                                                <button class="quick-btn desktop-quick-btn active"
                                                    data-mode="exact">{{ __('common.page.exact_dates') }}</button>
                                                <button class="quick-btn desktop-quick-btn" data-days="1">± 1
                                                    day</button>
                                                <button class="quick-btn desktop-quick-btn" data-days="2">± 2
                                                    days</button>
                                                <button class="quick-btn desktop-quick-btn" data-days="3">± 3
                                                    days</button>
                                                <button class="quick-btn desktop-quick-btn" data-days="7">± 7
                                                    days</button>
                                            </div>

                                            <div class="d-flex justify-content-end gap-2 p-3 border-top">
                                                <button id="clearBtnDesktop" class="btn-clear">{{ __('common.page.clear') }}</button>
                                                <button id="doneBtnDesktop" class="btn-done">{{ __('common.page.done') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Travelers -->
                            <div class="filter-travelers w-lg-33">
                                <div class="position-relative">
                                    <div id="travToggleDesktop" class="search-field d-flex align-items-center gap-2">
                                        <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/sign in - mobile.png') }}" alt="icon" width="20"
                                            height="20">
                                        <div class="flex-grow-1">
                                            <p class="field-label">{{ __('common.page.travelers') }}</p>
                                            <p id="travValueDesktop" class="field-value">4 travelers, 1 room</p>
                                        </div>
                                    </div>
                                    <!-- Desktop Travelers Dropdown -->
                                    <div id="travDropdownDesktop" class="custom-dropdown mt-1" style="right: 0;">
                                        <div class="p-3">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <span class="fw-bold">{{ __('common.page.rooms') }}</span>
                                                <div class="filter-counter-group d-flex align-items-center">
                                                    <button
                                                        class="counter-btn fw-bold text-18 counter-btn-left decrement"
                                                        data-target="roomsDesktop">-</button>
                                                    <span id="roomsDesktop" class="fw-bold"
                                                        style="width: 20px; text-align: center;">1</span>
                                                    <button
                                                        class="counter-btn fw-bold text-18 counter-btn-right increment"
                                                        data-target="roomsDesktop">+</button>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('common.page.adults') }}</span>
                                                <div class="filter-counter-group d-flex align-items-center">
                                                    <button
                                                        class="counter-btn fw-bold text-18 counter-btn-left decrement"
                                                        data-target="adultsDesktop">-</button>
                                                    <span id="adultsDesktop" class="fw-bold"
                                                        style="width: 20px; text-align: center;">2</span>
                                                    <button
                                                        class="counter-btn fw-bold text-18 counter-btn-right increment"
                                                        data-target="adultsDesktop">+</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="filter-button-search">
                                <button class="btn-gradient w-100">{{ __('common.page.search') }}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- MOBILE SEARCH FORM -->
                <div class="d-md-none p-3">
                    <div class="d-flex flex-column gap-3">
                        <div id="destToggleMobile" class="search-field d-flex align-items-center gap-3">
                            <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/destination.png') }}" alt="icon" width="20" height="20">
                            <div class="flex-grow-1">
                                <p class="field-label">{{ __('common.page.where_to') }}</p>
                                <p id="destValueMobile" class="field-value">Ho Chi Minh, Vietnam</p>
                            </div>
                        </div>

                        <div id="dateToggleMobile" class="search-field d-flex align-items-center gap-3">
                            <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/Booking form - Mobile (2).png') }}" width="25" height="25"
                                alt="icon">
                            <div class="flex-grow-1">
                                <p class="field-label">{{ __('common.page.dates') }}</p>
                                <p id="dateValueMobile" class="field-value">Sep 20 - Sep 25</p>
                            </div>
                        </div>

                        <div id="travToggleMobile" class="search-field d-flex align-items-center gap-3">
                            <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/sign in - mobile.png') }}" alt="icon" width="20" height="20">
                            <div class="flex-grow-1">
                                <p class="field-label">{{ __('common.page.travelers') }}</p>
                                <p id="travValueMobile" class="field-value">4 travelers, 1 room</p>
                            </div>
                        </div>

                        <button class="btn-gradient w-100">{{ __('common.page.search') }}</button>
                    </div>
                </div>

                <!-- MOBILE MODALS -->
                <div id="mobileOverlay" class="modal-overlay"></div>

                <!-- Dest Modal -->
                <div id="destModalMobile" class="mobile-modal">
                    <div
                        class="d-flex align-items-center bg-color-gray justify-content-center p-3 border-bottom position-relative">
                        <h5 class="fw-bold mb-0">{{ __('common.page.destination') }}</h5>
                        <button class="btn btn-link position-absolute end-0 close-modal text-dark"><i
                                class="fa-solid fa-xmark fs-4"></i></button>
                    </div>
                    <div class="p-3 border-bottom">
                        <p class="field-label mb-1">{{ __('common.page.where_to') }}</p>
                        <div class="d-flex align-items-center gap-2">
                            <input type="text" class="form-control border-0 p-0 fw-bold">
                            <button class="btn btn-clear-filter-location"><i
                                    class="fa-solid fa-circle-xmark"></i></button>
                        </div>
                    </div>
                    <div class="flex-grow-1 overflow-auto p-3">
                        <div class="d-flex flex-column gap-3">
                            <div class="d-flex align-items-center gap-3 dest-option" data-value="Ho Chi Minh"
                                style="cursor: pointer;">
                                <div class="bg-light rounded-3 d-flex align-items-center justify-content-center"
                                    style="width: 48px; height: 48px;">
                                    <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/destination.png') }}" alt="icon" width="30" height="30">
                                </div>
                                <span class="fw-bold">Ho Chi Minh</span>
                            </div>
                            <div class="d-flex align-items-center gap-3 dest-option" data-value="JW Marriott Saigon"
                                style="cursor: pointer;">
                                <div class="bg-light rounded-3 d-flex align-items-center justify-content-center"
                                    style="width: 48px; height: 48px;">
                                    <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/accommodation - mobile.png') }}" alt="icon" width="30"
                                        height="30">
                                </div>
                                <span class="fw-bold">JW Marriott Saigon</span>
                            </div>
                            <div class="d-flex align-items-center gap-3 dest-option" data-value="Fusion Original Saigon"
                                style="cursor: pointer;">
                                <div class="bg-light rounded-3 d-flex align-items-center justify-content-center"
                                    style="width: 48px; height: 48px;">
                                    <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/accommodation - mobile.png') }}" alt="icon" width="30"
                                        height="30">
                                </div>
                                <span class="fw-bold">Fusion Original Saigon</span>
                            </div>
                            <div class="d-flex align-items-center gap-3 dest-option"
                                data-value="An Lam Retreats Saigon River" style="cursor: pointer;">
                                <div class="bg-light rounded-3 d-flex align-items-center justify-content-center"
                                    style="width: 48px; height: 48px;">
                                    <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/accommodation - mobile.png') }}" alt="icon" width="30"
                                        height="30">
                                </div>
                                <span class="fw-bold">An Lam Retreats Saigon River</span>
                            </div>
                            <div class="d-flex align-items-center gap-3 dest-option" data-value="Park Hyatt"
                                style="cursor: pointer;">
                                <div class="bg-light rounded-3 d-flex align-items-center justify-content-center"
                                    style="width: 48px; height: 48px;">
                                    <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/accommodation - mobile.png') }}" alt="icon" width="30"
                                        height="30">
                                </div>
                                <span class="fw-bold">Park Hyatt</span>
                            </div>
                            <div class="d-flex align-items-center gap-3 dest-option" data-value="The Reverie"
                                style="cursor: pointer;">
                                <div class="bg-light rounded-3 d-flex align-items-center justify-content-center"
                                    style="width: 48px; height: 48px;">
                                    <img loading="lazy" decoding="async" src="{{ asset('assets/images/icons/accommodation - mobile.png') }}" alt="icon" width="30"
                                        height="30">
                                </div>
                                <span class="fw-bold">The Reverie</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 border-top">
                        <button class="btn-gradient w-100 py-3 close-modal">{{ __('common.page.done') }}</button>
                    </div>
                </div>

                <!-- Date Modal -->
                <div id="dateModalMobile" class="mobile-modal">
                    <div
                        class="d-flex align-items-center bg-color-gray justify-content-center p-3 border-bottom position-relative">
                        <h5 class="fw-bold mb-0">{{ __('common.page.calendar') }}</h5>
                        <button class="btn btn-link position-absolute end-0 close-modal text-dark"><i
                                class="fa-solid fa-xmark fs-4"></i></button>
                    </div>
                    <div class="p-3 border-bottom d-flex justify-content-between align-items-center">
                        <span id="startDateMobile" class="fw-bold">{{ __('common.page.start_date') }}</span>
                        <i class="fa-solid fa-arrow-right"></i>
                        <span id="endDateMobile" class="fw-bold">{{ __('common.page.end_date') }}</span>
                    </div>
                    <div class="flex-grow-1 overflow-auto p-3 no-scrollbar">
                        <div class="d-flex flex-column gap-5">
                            <div>
                                <h6 id="month1TitleMobile" class="fw-bold text-center mb-3"></h6>
                                <div class="calendar-grid mb-2">
                                    <div class="calendar-header">Su</div>
                                    <div class="calendar-header">Mo</div>
                                    <div class="calendar-header">Tu</div>
                                    <div class="calendar-header">We</div>
                                    <div class="calendar-header">Th</div>
                                    <div class="calendar-header">Fr</div>
                                    <div class="calendar-header">Sa</div>
                                </div>
                                <div id="calendar1Mobile" class="calendar-grid"></div>
                            </div>
                            <div>
                                <h6 id="month2TitleMobile" class="fw-bold text-center mb-3"></h6>
                                <div class="calendar-grid mb-2">
                                    <div class="calendar-header">Su</div>
                                    <div class="calendar-header">Mo</div>
                                    <div class="calendar-header">Tu</div>
                                    <div class="calendar-header">We</div>
                                    <div class="calendar-header">Th</div>
                                    <div class="calendar-header">Fr</div>
                                    <div class="calendar-header">Sa</div>
                                </div>
                                <div id="calendar2Mobile" class="calendar-grid"></div>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 border-top bg-white">
                        <div class="d-flex gap-2 overflow-auto no-scrollbar pb-3">
                            <button class="quick-btn mobile-quick-btn active" data-mode="exact">{{ __('common.page.exact_dates') }}</button>
                            <button class="quick-btn mobile-quick-btn" data-days="1">± 1 day</button>
                            <button class="quick-btn mobile-quick-btn" data-days="2">± 2 days</button>
                            <button class="quick-btn mobile-quick-btn" data-days="7">± 7 days</button>
                        </div>
                        <div class="d-flex gap-2">
                            <button id="clearBtnMobile" class="btn btn-outline-dark flex-grow-1">{{ __('common.page.clear') }}</button>
                            <button id="doneBtnMobile" class="btn-gradient flex-grow-1 py-3"
                                style="flex: 2;">{{ __('common.page.done') }}</button>
                        </div>
                    </div>
                </div>

                <!-- Travelers Modal -->
                <div id="travModalMobile" class="mobile-modal">
                    <div
                        class="d-flex align-items-center bg-color-gray justify-content-center p-3 border-bottom position-relative">
                        <h5 class="fw-bold mb-0">{{ __('common.page.travelers') }}</h5>
                        <button class="btn btn-link position-absolute end-0 close-modal text-dark"><i
                                class="fa-solid fa-xmark fs-4"></i></button>
                    </div>
                    <div class="flex-grow-1 p-3">
                        <div class="d-flex flex-column gap-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <p class="fw-bold mb-0">{{ __('common.page.rooms') }}</p>
                                <div class="d-flex align-items-center gap-3">
                                    <button class="counter-btn fw-bold text-18 decrement"
                                        data-target="roomsMobile">-</button>
                                    <span id="roomsMobile" class="fw-bold"
                                        style="width: 24px; text-align: center;">1</span>
                                    <button class="counter-btn fw-bold text-18 increment"
                                        data-target="roomsMobile">+</button>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <p class="fw-bold mb-0">{{ __('common.page.adults') }}</p>
                                <div class="d-flex align-items-center gap-3">
                                    <button class="counter-btn fw-bold text-18 decrement"
                                        data-target="adultsMobile">-</button>
                                    <span id="adultsMobile" class="fw-bold"
                                        style="width: 24px; text-align: center;">2</span>
                                    <button class="counter-btn fw-bold text-18 increment"
                                        data-target="adultsMobile">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 border-top">
                        <button class="btn-gradient w-100 py-3 close-modal">{{ __('common.page.done') }}</button>
                    </div>
                </div>
            </section>

            <section class="section-2__product-category-4-page-banner">
                <div class="container">
                    <div class="section-2__product-category-4-page-content" style="background-image: url('{{ $banner['image'] ?? '' }}')">
                        <div class="section-2__product-category-4-page-text text-end">
                            <h1 class="section-title text-white text-40px mb-1">{{ $banner['title'] ?? '' }}</h1>
                            <p class="text-white">{{ $banner['subtitle'] ?? '' }}</p>
                            <button class="btn-gradient">{{ $banner['buttonText'] ?? '' }}</button>
                        </div>
                    </div>

                    <div class="section-3__product-category-4-page-swiper relative mt-5" data-swiper data-loop="true"
                        data-space="15" data-slides-mobile="2" data-slides-desktop="3"
                        data-prev=".section-3__product-category-4-page-prev"
                        data-next=".section-3__product-category-4-page-next">

                        <div class="swiper-button-prev-border section-3__product-category-4-page-prev"></div>
                        <div class="swiper-button-next-border section-3__product-category-4-page-next"></div>

                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach ($promoCards as $card)
                                    <div class="swiper-slide">
                                        <div class="promo-card">
                                            <div class="promo-info">
                                                <h3>{{ $card['title'] ?? '' }}</h3>
                                                <p>{{ $card['description'] ?? '' }}</p>
                                            </div>
                                            <div class="promo-img">
                                                <img loading="lazy" decoding="async" src="{{ $card['image'] ?? '' }}" alt="img">
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-4__product-category-4-page">
                <div class="container">
                    <div class="mb-4 section-4__product-category-4-title text-center">
                        <h2 class="section-title m-0">{{ $saveDeals['title'] ?? '' }}</h2>
                        <a href="{{ data_get($saveDeals, 'link.url', '#') }}">
                            {{ data_get($saveDeals, 'link.text', '') }}
                            <img loading="lazy" decoding="async"class="ml-13" src="/assets/images/icons/arrow-next.svg" alt="">
                        </a>
                    </div>
                    <div id="section-4__product-category-4-page-swiper" class="relative" data-swiper data-loop="true"
                        data-space="30" data-slides-mobile="2" data-slides-desktop="4" data-prev=".swiper4-prev"
                        data-next=".swiper4-next">
                        <div class="swiper-button-prev-border swiper4-prev"></div>
                        <div class="swiper-button-next-border swiper4-next"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($saveDeals, 'items', []) as $item)
                                    <div class="swiper-slide">
                                        <a class="activity-card text-decoration-none">
                                            <div class="activity-image">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}" alt="{{ $item['title'] ?? '' }}">
                                            </div>
                                            <div class="activity-content">
                                                <h6 class="activity-title">{{ $item['title'] ?? '' }}</h6>
                                                <p class="activity-location">{{ $item['location'] ?? '' }}</p>
                                                <div class="activity-rating">
                                                    <span class="stars">★ <span>{{ $item['rating'] ?? '' }}</span></span>
                                                    <span class="rating-count">{{ $item['reviews'] ?? '' }}</span>
                                                    <span class="booked-count"> | {{ $item['booked'] ?? '' }}</span>
                                                </div>
                                                <div class="activity-price">
                                                    <span class="price-label">{{ $item['price'] ?? '' }}</span>
                                                    <span class="badge-sale">{{ $item['sale'] ?? '' }}</span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="">
                <div class="container">
                    <h2 class="section-title">{{ $recentSearches['title'] ?? '' }}</h2>
                    <div class="section-5__product-category-4-page-swiper relative" data-loop="true" data-swiper
                        data-space="20" data-slides-mobile="2" data-slides-desktop="5" data-prev=".search-prev"
                        data-next=".search-next">
                        <div class="swiper-button-prev-border search-prev"></div>
                        <div class="swiper-button-next-border search-next"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($recentSearches, 'items', []) as $item)
                                    <div class="swiper-slide">
                                        <div class="search-item">
                                            <img loading="lazy" decoding="async" src="{{ $item['icon'] ?? '' }}" alt="">
                                            <span>{{ $item['text'] ?? '' }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div class="container">
                    <h2 class="section-title">{{ $recentViews['title'] ?? '' }}</h2>
                    <div class="section-5-2__product-category-4-page-swiper relative" data-loop="true" data-swiper
                        data-space="30" data-slides-mobile="2" data-slides-desktop="3" data-prev=".view-prev"
                        data-next=".view-next">
                        <div class="swiper-button-prev-border view-prev"></div>
                        <div class="swiper-button-next-border view-next"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($recentViews, 'items', []) as $item)
                                    <div class="swiper-slide">
                                        <div class="view-card">
                                            <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}" class="view-img" alt="">
                                            <div class="view-info">
                                                <h4>{{ $item['title'] ?? '' }}</h4>
                                                <p>{{ $item['location'] ?? '' }}</p>
                                                <div class="stars">{{ $item['category'] ?? '' }}</div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-4">
                <div class="container tab-swiper-wrapper">
                    <div class="mb-4 text-center">
                        <h2 class="section-title mb-3">{{ $popularDestinations['title'] ?? '' }}</h2>
                        <p class="text-left">{{ $popularDestinations['subtitle'] ?? '' }}</p>
                    </div>
                    <ul class="section-4-tabs product-category-tabs">
                        @foreach ($popularTabs as $index => $tab)
                            <li class="{{ $index === 0 ? 'active' : '' }}" data-tab="{{ $tab['id'] ?? '' }}">{{ $tab['label'] ?? '' }}</li>
                        @endforeach
                    </ul>

                    <div id="section-4-swiper" class="relative" data-swiper data-loop="false" data-space="30"
                        data-slides-mobile="2" data-slides-desktop="5" data-prev=".swiper4-prev"
                        data-next=".swiper4-next">
                        <div class="swiper-button-prev-border swiper4-prev"></div>
                        <div class="swiper-button-next-border swiper4-next"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($activePopularTab, 'items', []) as $item)
                                    <div class="swiper-slide" data-tab="{{ $activePopularTab['id'] ?? '' }}">
                                        <a href="#" class="text-decoration-none text-reset">
                                            <div class="card h-100 section-4-card min-height-auto">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}" class="card-img-top img-fluid fit-cover" alt="{{ $item['title'] ?? '' }}">
                                                <div class="card-body w-100">
                                                    <h3 class="h6 card-title fw-500 min-height-auto">{{ $item['title'] ?? '' }}</h3>
                                                    <p class="card-text text-muted min-height-auto mb-0">{{ $item['location'] ?? '' }}</p>
                                                    <div>
                                                        <span class="text-18 fw-500">{{ $item['price'] ?? '' }}</span><br>
                                                        <span class="text-muted text-sm">{{ $item['priceLabel'] ?? '' }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="mb-5">
                <div class="container">
                    <h2 class="section-title">{{ $favoriteStays['title'] ?? '' }}</h2>
                    <div class="section-7__product-category-4-page-swiper relative" data-loop="true" data-swiper
                        data-space="20" data-slides-mobile="2" data-slides-desktop="4" data-prev=".cat-prev"
                        data-next=".cat-next">
                        <div class="swiper-button-prev-border cat-prev"></div>
                        <div class="swiper-button-next-border cat-next"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($favoriteStays, 'items', []) as $item)
                                    <div class="swiper-slide">
                                        <div class="style-card" style="background-image: url('{{ $item['image'] ?? '' }}')">
                                            <span>{{ $item['label'] ?? '' }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-8__product-category-4-page">
                <div class="container tab-swiper-wrapper">
                    <div class="mb-4 text-center">
                        <div class="section-8__product-category-4-title d-flex align-items-center justify-content-between">
                            <h2 class="section-title mb-3">{{ $bundlesSaves['title'] ?? '' }}</h2>
                            <a href="{{ data_get($bundlesSaves, 'link.url', '#') }}">
                                {{ data_get($bundlesSaves, 'link.text', '') }}
                                <img loading="lazy" decoding="async"class="ml-13" src="/assets/images/icons/arrow-next.svg" alt="">
                            </a>
                        </div>
                        <p class="text-left">{{ $bundlesSaves['subtitle'] ?? '' }}</p>
                    </div>
                    <ul class="section-8__product-category-4-page-tabs product-category-tabs">
                        @foreach ($bundleTabs as $index => $tab)
                            <li class="{{ $index === 0 ? 'active' : '' }}" data-tab="{{ $tab['id'] ?? '' }}">{{ $tab['label'] ?? '' }}</li>
                        @endforeach
                    </ul>

                    <div id="section-8__product-category-4-page-swiper" class="relative" data-swiper data-loop="false"
                        data-space="30" data-slides-mobile="2" data-slides-desktop="4"
                        data-prev=".section-8__product-category-4-prev" data-next=".section-8__product-category-4-next">
                        <div class="swiper-button-prev-border section-8__product-category-4-prev"></div>
                        <div class="swiper-button-next-border section-8__product-category-4-next"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($activeBundleTab, 'items', []) as $item)
                                    <div class="swiper-slide" data-tab="{{ $activeBundleTab['id'] ?? '' }}">
                                        <a class="activity-card text-decoration-none">
                                            <div class="activity-image">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}" alt="{{ $item['title'] ?? '' }}">
                                            </div>
                                            <div class="activity-content">
                                                <h6 class="activity-title">{{ $item['title'] ?? '' }}</h6>
                                                <p class="activity-location">{{ $item['location'] ?? '' }}</p>
                                                <div class="activity-rating">
                                                    <span class="stars">★ <span>{{ $item['rating'] ?? '' }}</span></span>
                                                    <span class="rating-count">{{ $item['reviews'] ?? '' }}</span>
                                                    <span class="booked-count"> | {{ $item['booked'] ?? '' }}</span>
                                                </div>
                                                <div class="activity-price">
                                                    <span class="price-label">{{ $item['price'] ?? '' }}</span>
                                                    <span class="badge-sale">{{ $item['sale'] ?? '' }}</span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-9__product-category-4-page">
                <div class="container">
                    <div class="section-9__product-category-4-page-content" style="background-image: url('{{ $cruiseBanner['image'] ?? '' }}')">
                        <div class="section-9__product-category-4-page-text text-left">
                            <h1 class="section-title text-white text-40px mb-1">{{ $cruiseBanner['title'] ?? '' }}</h1>
                            <p class="text-white">{{ $cruiseBanner['subtitle'] ?? '' }}</p>
                            <button class="btn-gradient">{{ $cruiseBanner['buttonText'] ?? '' }}</button>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-10__product-category-4-page">
                <div class="container">
                    <h2 class="section-title">{{ $uniqueStays['title'] ?? '' }}</h2>
                    <div id="section-10__product-category-4-page-swiper" class="relative" data-swiper data-loop="true"
                        data-space="30" data-slides-mobile="2" data-slides-desktop="4" data-prev=".swiper10-prev"
                        data-next=".swiper10-next">
                        <div class="swiper-button-prev-border swiper10-prev"></div>
                        <div class="swiper-button-next-border swiper10-next"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($uniqueStays, 'items', []) as $item)
                                    <div class="swiper-slide">
                                        <a class="activity-card text-decoration-none">
                                            <div class="activity-image">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}" alt="{{ $item['title'] ?? '' }}">
                                            </div>
                                            <div class="activity-content">
                                                <h6 class="activity-title">{{ $item['title'] ?? '' }}</h6>
                                                <p class="activity-location">{{ $item['location'] ?? '' }}</p>
                                                <div class="activity-rating">
                                                    <span class="stars">★ <span>{{ $item['rating'] ?? '' }}</span></span>
                                                    <span class="rating-count">{{ $item['reviews'] ?? '' }}</span>
                                                    <span class="booked-count"> | {{ $item['booked'] ?? '' }}</span>
                                                </div>
                                                <div class="activity-price">
                                                    <span class="price-label">{{ $item['price'] ?? '' }}</span>
                                                    <span class="badge-sale">{{ $item['sale'] ?? '' }}</span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </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">
                        <span>{{ __('common.page.home') }}</span>
                        <span class="px-2">/</span>
                        <a class="breadcrumb-link color-body" href="#">Destinations</a>
                    </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' => $reviews])
                </div>
            </section>
        </main>

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

        <div class="floating-actions" 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-container bottom-menu">
                @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/filter-product.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>
@endpush