@extends('layouts.app')

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

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

@php
    $data = $subProductCategory1Data ?? [];
    $bannerSlides = data_get($data, 'banner.slides', []);
    $breadcrumbItems = data_get($data, 'breadcrumb.items', []);
    $description = data_get($data, 'description', []);
    $serviceIcons = data_get($data, 'serviceIcons', []);
    $recommended = data_get($data, 'recommended', []);
    $activities = data_get($data, 'activities', []);
    $activitiesSortOptions = data_get($activities, 'sortOptions', []);
    $activitiesItems = data_get($activities, 'items', []);
    $activitiesPagination = data_get($activities, 'pagination', []);
    $stories = data_get($data, 'stories', []);
    $storiesItems = data_get($stories, 'content', []);
    $faq = data_get($data, 'faq', []);
    $faqItems = data_get($faq, 'items', []);
    $about = data_get($data, 'about', []);
    $reviews = data_get($data, 'reviews', []);
    $reviewHeader = data_get($reviews, 'header', []);
    $floatingActions = data_get($data, 'floatingActions', []);
    $mobileNavData = data_get($data, 'mobileNavData', []);
    $filterSidebar = data_get($data, 'filterSidebar', []);

    $locale = app()->getLocale();
    $isEnglish = $locale === 'en';

    $bestTimeTitle = $isEnglish
        ? ($description['bestTimeEn'] ?? $description['bestTimeVi'] ?? '')
        : ($description['bestTimeVi'] ?? $description['bestTimeEn'] ?? '');
    $bestTimeDescriptionRaw = $isEnglish
        ? ($description['bestTimeDescriptionEn'] ?? $description['bestTimeDescriptionVi'] ?? '')
        : ($description['bestTimeDescriptionVi'] ?? $description['bestTimeDescriptionEn'] ?? '');
    $bestTimeLines = preg_split('/\r\n|\r|\n/', trim((string) $bestTimeDescriptionRaw)) ?: [];
    $bestTimeValue = $bestTimeLines[0] ?? '';
    $bestTimeNote = count($bestTimeLines) > 1 ? implode(' ', array_slice($bestTimeLines, 1)) : '';

    $recommendedTripTitle = $isEnglish
        ? ($description['recommendedTripDurationEn'] ?? $description['recommendedTripDurationVi'] ?? '')
        : ($description['recommendedTripDurationVi'] ?? $description['recommendedTripDurationEn'] ?? '');
    $recommendedTripRaw = $isEnglish
        ? ($description['durationEn'] ?? $description['duration'] ?? $description['contentEn'] ?? $description['content'] ?? '')
        : ($description['duration'] ?? $description['durationEn'] ?? $description['content'] ?? $description['contentEn'] ?? '');
    $recommendedTripValue = trim(strip_tags((string) $recommendedTripRaw));

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

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

        <!-- body -->
        <main class="site-content">
            <!--------------------- 1. section-1 BANNER --------------------->
            <section class="section-1-banner section-1__sub-product-1 p-0">
                <div class="section-1-section">
                    <div class="section-1-swiper" data-swiper data-loop="true" data-speed="1000" data-space="30"
                        data-effect="slide" data-next=".swiper-button-next" data-prev=".swiper-button-prev"
                        data-pagination=".swiper-pagination-section-1">
                        <!-- Navigation -->
                        <div class="container section-1-navigation">
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                        <div class="swiper-pagination swiper-pagination-section-1"></div>

                        <!-- Swiper container -->
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach ($bannerSlides as $slide)
                                    @php
                                        $bannerImage = $slide['imageUrl'] ?? ($slide['image'] ?? '');
                                    @endphp
                                    <div class="swiper-slide {{ $slide['slideClass'] ?? '' }}" @if(!empty($bannerImage)) style="background-image: url('{{ $bannerImage }}')" @endif>
                                        <div class="container">
                                            <div class="section-1__content text-left">
                                                <h6 class="text-10 text-uppercase text-white">{{ $slide['title'] ?? '' }}</h6>
                                                <p class="text-white">{{ $slide['subtitle'] ?? '' }}</p>
                                                @if (!empty($slide['buttonText']))
                                                    <p class="btn-white open-booking-btn">{{ $slide['buttonText'] }}</p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!--------------------- section-2 Description --------------------->
            <section class="section-2__sub-product-1 pb-30px">
                <div class="container">
                    <div class="breadcrumb mb-30px">
                        @foreach ($breadcrumbItems 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="section-2__sub-product-1--content toggle-wrapper">
                        <h1 class="section-title">{{ $description['title'] ?? '' }}</h1>
                        <div class="description" id="description">
                            {{ $description['mainContent'] ?? '' }}
                            <div class="extra-content" id="extraContent">
                                {!! $description['extraContent'] ?? '' !!}
                            </div>
                        </div>
                        <div class="text-end">
                            <button class="see-more-btn btn-primary-color float-right p-0"
                                onclick="toggleContent(this)">
                                {{ __('common.page.see_more') }}
                                <span class="arrow">
                                    <i class="fa-light fa-angle-right"></i>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="info-section fw-500 text-16">
                        @if ($bestTimeTitle !== '' || $bestTimeValue !== '' || $bestTimeNote !== '')
                            <div class="info-item">
                                <h3 class="fw-500 text-16">{{ $bestTimeTitle }}</h3>
                                <p>{{ $bestTimeValue }}</p>
                                @if ($bestTimeNote !== '')
                                    <p class="text-14">{{ $bestTimeNote }}</p>
                                @endif
                            </div>
                        @endif

                        @if ($recommendedTripTitle !== '' || $recommendedTripValue !== '')
                            <div class="info-item">
                                <h3 class="fw-500 text-16">{{ $recommendedTripTitle }}</h3>
                                <p>{{ $recommendedTripValue }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            </section>

            <!--------------------- section-3 Service Icons --------------------->
            <section class="section-3__sub-product-1 pb-22px pt-0">
                <div class="container">
                    <div id="section-3__sub-product-1--swiper" class="relative" data-swiper data-loop="true"
                        data-speed="450" data-slides-mobile="3" data-slides-desktop="6" data-effect="slide"
                        data-next=".sub-product-1--next" data-prev=".sub-product-1--prev">
                        <div class="swiper-button-prev-border sub-product-1--prev"></div>
                        <div class="swiper-button-next-border sub-product-1--next"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach ($serviceIcons as $icon)
                                    <div class="swiper-slide">
                                        <div class="section-3__sub-product-1--content">
                                            <img loading="lazy" decoding="async" src="{{ $icon['icon'] ?? '' }}" width="{{ $icon['width'] ?? 60 }}" alt="{{ $icon['alt'] ?? '' }}">
                                            <p class="mt-3">{{ $icon['name'] ?? '' }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!--------------------- 4. Recommended Products --------------------->
            <section class="section-4 section-4-product-1">
                <div class="container">
                    <div class="mb-4 text-center section-4-product-1-header">
                        <h2 class="section-title">{{ $recommended['title'] ?? '' }}</h2>
                        <h5 class="text-18 fw-500 text-left">{{ $recommended['subtitle'] ?? '' }}</h5>
                    </div>
                    <div id="section-4-swiper" class="relative" data-swiper data-loop="true" data-speed="1000"
                        data-slides-mobile="2" data-slides-desktop="4" data-space="30" data-effect="slide"
                        data-next=".swiper4-next" data-prev=".swiper4-prev">
                        <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($recommended, '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 5 All Activities with Filters ======================-->
            <section class="section-5__sub-product-1">
                <div class="container">
                    <div class="section-5__sub-product-1--header mb-4">
                        <h2 class="section-title mb-4">{{ $activities['title'] ?? '' }}</h2>

                        <!-- Mobile Filters -->
                        <div class="filter-mobile d-flex gap-2 align-items-center justify-content-start d-lg-none mb-4">
                            <button class="sort-dropdown-toggle" id="mobileFilterDateBtn" data-bs-toggle="modal" data-bs-target="#mobileFilterDateModal">
                                <span>{{ __('common.page.dates') }}</span>
                                <i class="fas fa-chevron-down"></i>
                            </button>
                            <div class="d-flex gap-2 align-items-center justify-content-start" id="mobileFilterBtn">
                                <button class="sort-dropdown-toggle" data-bs-toggle="modal" data-bs-target="#mobileFilterModal">
                                    <span>{{ __('common.page.filter') }}</span>
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                                @foreach ($filterSidebar as $section)
                                    <button class="sort-dropdown-toggle" data-bs-toggle="modal" data-bs-target="#mobileFilterModal">
                                        <span>{{ $section['title'] ?? '' }}</span>
                                        <i class="fas fa-chevron-down"></i>
                                    </button>
                                @endforeach
                            </div>
                        </div>

                        <!-- Sort Dropdown -->
                        <div class="d-flex justify-content-end align-items-center pr-12px">
                            <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">{{ $activeSortText }}</span>
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                                <div class="sort-dropdown-menu" id="sortDropdownMenu">
                                    @foreach ($activitiesSortOptions as $sortOption)
                                        <div class="sort-option{{ !empty($sortOption['active']) ? ' active' : '' }}" data-value="{{ $sortOption['value'] ?? '' }}">
                                            {{ $sortOption['text'] ?? '' }}
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="container-fluid">
                        <div class="row">
                            <!-- Desktop Sidebar Filter -->
                            <aside class="col-lg-3 d-none d-lg-block">
                                <div class="filter-sidebar-container">
                                    <!-- DESKTOP DATE SIDEBAR -->
                                    <div class="date-sidebar">
                                        <button class="date-header filter-toggle" data-bs-toggle="collapse"
                                            data-bs-target="#dateContentDesktop">
                                            <span class="fw-600 text-16 m-0">{{ __('common.page.dates') }}</span>
                                            <i class="icon-toggle fa-sharp fa-solid fa-plus ms-auto"></i>
                                        </button>

                                        <div class="date-content collapse" id="dateContentDesktop">
                                            <div class="selected-dates">
                                                <span class="date-pill" id="startDateDesktop">{{ __('common.page.start_date') }}</span>
                                                <span class="date-arrow"><i class="fa-sharp fa-solid fa-arrow-right"></i></span>
                                                <span class="date-pill" id="endDateDesktop">{{ __('common.page.end_date') }}</span>
                                            </div>

                                            <div class="dual-calendar">
                                                <div class="calendar-month">
                                                    <div class="month-header">
                                                        <button class="nav-btn" id="prevMonthDesktop">
                                                            <i class="fa-sharp fa-solid text-13 color-body fa-angles-left"></i>
                                                        </button>
                                                        <h3 class="month-title" id="month1TitleDesktop"></h3>
                                                        <div class="nav-spacer"></div>
                                                    </div>
                                                    <div class="calendar-grid">
                                                        <div class="weekday">Su</div>
                                                        <div class="weekday">Mo</div>
                                                        <div class="weekday">Tu</div>
                                                        <div class="weekday">We</div>
                                                        <div class="weekday">Th</div>
                                                        <div class="weekday">Fr</div>
                                                        <div class="weekday">Sa</div>
                                                        <div class="calendar-days" id="calendar1Desktop"></div>
                                                    </div>
                                                </div>

                                                <div class="calendar-month">
                                                    <div class="month-header">
                                                        <div class="nav-spacer"></div>
                                                        <h3 class="month-title" id="month2TitleDesktop"></h3>
                                                        <button class="nav-btn" id="nextMonthDesktop">
                                                            <i class="fa-sharp fa-solid text-13 color-body fa-angles-right"></i>
                                                        </button>
                                                    </div>
                                                    <div class="calendar-grid">
                                                        <div class="weekday">Su</div>
                                                        <div class="weekday">Mo</div>
                                                        <div class="weekday">Tu</div>
                                                        <div class="weekday">We</div>
                                                        <div class="weekday">Th</div>
                                                        <div class="weekday">Fr</div>
                                                        <div class="weekday">Sa</div>
                                                        <div class="calendar-days" id="calendar2Desktop"></div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="quick-select">
                                                <button class="quick-btn active desktop-quick-btn" 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="action-buttons">
                                                <button class="btn-clear" id="clearBtnDesktop">{{ __('common.page.clear') }}</button>
                                                <button class="btn-done" id="doneBtnDesktop">{{ __('common.page.done') }}</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="filter-sidebar">
                                        <h5 class="fw-600 text-16 m-0">{{ __('common.page.filter') }}</h5>
                                        @foreach ($filterSidebar as $sectionIndex => $section)
                                            @php $sectionCollapseId = 'desktopFilterSection'.$sectionIndex; @endphp
                                            <div class="filter-section">
                                                <button class="filter-toggle" data-bs-toggle="collapse"
                                                    data-bs-target="#{{ $sectionCollapseId }}">
                                                    <i class="fa-light fa-circle text-13 mr-7px"></i> {{ $section['title'] ?? '' }}
                                                    <i class="icon-toggle fa-sharp fa-solid fa-plus ms-auto"></i>
                                                </button>
                                                <div class="collapse" id="{{ $sectionCollapseId }}">
                                                    <div class="filter-options">
                                                        @foreach (($section['options'] ?? []) as $option)
                                                            <div class="relative round mb-15px">
                                                                <input type="checkbox" data-filter-id="{{ $option['id'] ?? '' }}" @checked(!empty($option['checked']))>
                                                                <label></label>
                                                                {{ $option['label'] ?? '' }}
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </aside>

                            <!-- Main Content -->
                            <div class="col-lg-9">
                                <div class="row g-3" id="activityGrid">
                                    @foreach ($activitiesItems as $activity)
                                        <div class="col-6 col-md-6 col-xl-4">
                                            <a href="{{ $activity['link'] ?? '#' }}" class="activity-card text-decoration-none">
                                                <div class="activity-image">
                                                    <img loading="lazy" decoding="async" src="{{ $activity['image'] ?? '' }}" alt="{{ $activity['alt'] ?? '' }}" class="w-100">
                                                </div>
                                                <div class="activity-content">
                                                    <h6 class="activity-title">{{ $activity['title'] ?? '' }}</h6>
                                                    <p class="activity-location">{{ $activity['location'] ?? '' }}</p>
                                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                                        <div class="activity-rating">
                                                            <span class="stars">★ <span>{{ $activity['rating'] ?? '' }}</span></span>
                                                            <span class="rating-count">({{ $activity['reviews'] ?? '' }})</span>
                                                            <span class="booked-count">{{ $activity['booked'] ?? '' }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="activity-price d-flex justify-content-between align-items-center">
                                                        <span class="price-label">{{ $activity['price'] ?? '' }}</span>
                                                        @if (!empty($activity['discount']))
                                                            <span class="badge-sale">{{ $activity['discount'] }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>

                                @php
                                    $currentPage = max(1, (int) ($activitiesPagination['currentPage'] ?? 1));
                                    $totalPages = max(1, (int) ($activitiesPagination['totalPages'] ?? 1));
                                    $showEllipsis = (bool) ($activitiesPagination['showEllipsis'] ?? false);
                                @endphp
                                <nav aria-label="Page navigation" class="mt-5">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item{{ $currentPage === 1 ? ' disabled' : '' }}">
                                            <a class="page-link" style="padding: 3px 8px;" href="#" data-page="{{ max(1, $currentPage - 1) }}">
                                                <i class="fa fa-chevron-left text-10" aria-hidden="true"></i>
                                            </a>
                                        </li>

                                        @for ($page = 1; $page <= $totalPages; $page++)
                                            @if ($page === $totalPages && $showEllipsis && $totalPages > 6)
                                                <li class="page-item"><a class="page-link" href="#">...</a></li>
                                            @endif
                                            <li class="page-item{{ $page === $currentPage ? ' active' : '' }}">
                                                <a class="page-link" href="#" data-page="{{ $page }}">{{ $page }}</a>
                                            </li>
                                        @endfor

                                        <li class="page-item{{ $currentPage === $totalPages ? ' disabled' : '' }}">
                                            <a class="page-link" style="padding: 3px 8px;" href="#" data-page="{{ min($totalPages, $currentPage + 1) }}">
                                                <i class="fa fa-chevron-right text-10" aria-hidden="true"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>

                    <!-- MOBILE DATE MODAL -->
                    <div class="modal fade" id="mobileFilterDateModal" tabindex="-1">
                        <div class="modal-dialog modal-fullscreen">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    <div class="text-center w-100">
                                        <h5 class="modal-title">{{ __('common.page.dates') }}</h5>
                                    </div>
                                </div>

                                <div class="modal-body">
                                    <div class="date-sidebar">
                                        <!-- Selected Date Display -->
                                        <div class="selected-dates">
                                            <span class="date-pill" id="startDateMobile">{{ __('common.page.start_date') }}</span>
                                            <span class="date-arrow"><i
                                                    class="fa-sharp fa-solid fa-arrow-right"></i></span>
                                            <span class="date-pill" id="endDateMobile">{{ __('common.page.end_date') }}</span>
                                        </div>

                                        <!-- Calendar -->
                                        <div class="dual-calendar">
                                            <!-- Left Calendar -->
                                            <div class="calendar-month">
                                                <div class="month-header">
                                                    <button class="nav-btn" id="prevMonthMobile">
                                                        <i
                                                            class="fa-sharp fa-solid  text-13 color-body fa-angles-left"></i>
                                                    </button>
                                                    <h3 class="month-title" id="month1TitleMobile"></h3>
                                                    <div class="nav-spacer"></div>
                                                </div>
                                                <div class="calendar-grid">
                                                    <div class="weekday">Su</div>
                                                    <div class="weekday">Mo</div>
                                                    <div class="weekday">Tu</div>
                                                    <div class="weekday">We</div>
                                                    <div class="weekday">Th</div>
                                                    <div class="weekday">Fr</div>
                                                    <div class="weekday">Sa</div>
                                                    <div class="calendar-days" id="calendar1Mobile"></div>
                                                </div>
                                            </div>

                                            <!-- Right Calendar -->
                                            <div class="calendar-month">
                                                <div class="month-header">
                                                    <div class="nav-spacer"></div>
                                                    <h3 class="month-title" id="month2TitleMobile"></h3>
                                                    <button class="nav-btn" id="nextMonthMobile">
                                                        <i
                                                            class="fa-sharp fa-solid  text-13 color-body fa-angles-right"></i>
                                                    </button>
                                                </div>
                                                <div class="calendar-grid">
                                                    <div class="weekday">Su</div>
                                                    <div class="weekday">Mo</div>
                                                    <div class="weekday">Tu</div>
                                                    <div class="weekday">We</div>
                                                    <div class="weekday">Th</div>
                                                    <div class="weekday">Fr</div>
                                                    <div class="weekday">Sa</div>
                                                    <div class="calendar-days" id="calendar2Mobile"></div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Quick Select -->
                                        <div class="quick-select">
                                            <button class="quick-btn active mobile-quick-btn" data-mode="exact">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="3">± 3 days</button>
                                            <button class="quick-btn mobile-quick-btn" data-days="7">± 7 days</button>
                                        </div>

                                        <!-- Action Buttons -->
                                        <div class="action-buttons">
                                            <button class="btn-clear" id="clearBtnMobile">{{ __('common.page.clear') }}</button>
                                            <button class="btn-done" id="doneBtnMobile"
                                                data-bs-dismiss="modal">{{ __('common.page.done') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Mobile Filter Modal -->
                    <div class="modal fade" id="mobileFilterModal" tabindex="-1">
                        <div class="modal-dialog modal-fullscreen">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="btn-close text-18 fw-bold" data-bs-dismiss="modal"></button>
                                    <div class="text-center w-100">
                                        <h5 class="modal-title text-16 fw-600">{{ __('common.page.filter') }}</h5>
                                    </div>
                                </div>

                                <div class="modal-body pt-0">
                                    <div class="filter-sidebar">
                                        @foreach ($filterSidebar as $sectionIndex => $section)
                                            @php $sectionCollapseId = 'mobileFilterSection'.$sectionIndex; @endphp
                                            <div class="filter-section">
                                                <button class="filter-toggle" data-bs-toggle="collapse" data-bs-target="#{{ $sectionCollapseId }}">
                                                    <i class="fa-light fa-circle text-13 mr-7px"></i> {{ $section['title'] ?? '' }}
                                                    <i class="icon-toggle fa-sharp fa-solid fa-plus ms-auto"></i>
                                                </button>
                                                <div class="collapse" id="{{ $sectionCollapseId }}">
                                                    <div class="filter-options">
                                                        @foreach (($section['options'] ?? []) as $option)
                                                            <div class="relative round mb-15px">
                                                                <input type="checkbox" data-filter-id="{{ $option['id'] ?? '' }}" @checked(!empty($option['checked']))>
                                                                <label></label>
                                                                {{ $option['label'] ?? '' }}
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-outline-secondary" id="clearFilters">{{ __('common.page.clear') }}</button>
                                    <button type="button" class="btn-gradient" data-bs-dismiss="modal">{{ __('common.page.done') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>

            <!--------------------- section 6 Stories --------------------->
            <section class="section-6">
                <div class="container">
                    <h2 class="section-title">{{ $stories['title'] ?? '' }}</h2>
                    <div class="section-6-swiper relative" data-swiper data-loop="true" data-space="30"
                        data-slides-mobile="2" data-slides-desktop="3" data-prev=".swiper6-prev"
                        data-next=".swiper6-next">
                        <div class="swiper-button-prev-border swiper6-prev"></div>
                        <div class="swiper-button-next-border swiper6-next"></div>
                        <div class="swiper swiper6">
                            <div class="swiper-wrapper">
                                @foreach ($storiesItems as $story)
                                    <div class="swiper-slide">
                                        <a href="{{ $story['link'] ?? '#' }}" class="text-decoration-none text-reset">
                                            <div class="section-6-item">
                                                <img loading="lazy" decoding="async" src="{{ $story['image'] ?? '' }}" class="section-6-img-top w-100 img-fluid fit-cover" alt="{{ $story['alt'] ?? '' }}">
                                                <div class="section-6-body mt-3">
                                                    <h3 class="h6 section-6-title fw-500">{{ $story['title'] ?? '' }}</h3>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!--------------------- section 7 FAQ --------------------->
            <section class="section-7__sub-product-1">
                <div class="container">
                    <h2 class="mb-4 section-title">{{ $faq['title'] ?? '' }}</h2>
                    <div class="accordion accordion-flush" id="hcmcAccordion">
                        @foreach ($faqItems as $index => $item)
                            @php
                                $faqHeaderId = $item['id'] ?? 'flush-heading'.($index + 1);
                                $faqTargetId = $item['targetId'] ?? 'flush-collapse'.($index + 1);
                            @endphp
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="{{ $faqHeaderId }}">
                                    <button class="accordion-button collapsed p-0" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#{{ $faqTargetId }}" aria-expanded="false"
                                        aria-controls="{{ $faqTargetId }}">
                                        {{ $item['question'] ?? '' }}
                                    </button>
                                </h2>
                                <div id="{{ $faqTargetId }}" class="accordion-collapse collapse"
                                    aria-labelledby="{{ $faqHeaderId }}" data-bs-parent="#hcmcAccordion">
                                    <div class="accordion-body">{!! $item['answer'] ?? '' !!}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>

            <!--------------------- 7. ABOUT TEXT + CTA --------------------->
            <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 8 breadcrumb -->
            <section>
                <div class="container">
                    <div class="breadcrumb breadcrumb-bottom mb-30px">
                        @foreach ($breadcrumbItems 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 Reviews --------------------->
            <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>
<!-- filter date  -->
<!-- Sub Product Category 1 Language and Init -->
@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-date-sidebar.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/sub-product-category-1.js') }}"></script>
@endpush