@extends('layouts.app')

@section('title', __('pages.meta.index.title'))
@section('meta_description', __('pages.meta.index.description'))
@section('meta_keywords', __('pages.meta.index.keywords'))
@section('meta_author', __('pages.meta.author'))

@section('content')
    @php
        $bannerSlides = $homePageData['bannerSlides'] ?? [];
        $highlights = $homePageData['highlights'] ?? [];
        $benefits = $homePageData['benefits'] ?? [];
        $trends = $homePageData['trends'] ?? [];
        $categories = $homePageData['categories'] ?? [];
        $stories = $homePageData['stories'] ?? [];
        $about = $homePageData['about'] ?? [];
        $floatingActions = $homePageData['floatingActions'] ?? [];
        $mobileNavData = $homePageData['mobileNavData'] ?? [];
    @endphp

    <div class="site" id="home-page">
        @include('pages.home.shared.header')

        <!-- body -->
        <main class="site-content">
            <!--------------------- 1. section-1 BANNER --------------------->
            <section class="section-1-banner  pt-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">
                        <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>

                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach ($bannerSlides as $slide)
                                    <div class="swiper-slide slide-1"
                                        @if (!empty($slide['image'])) style="background-image: url('{{ $slide['image'] }}')" @endif>
                                        <div class="section-1-content container">
                                            <h1 class="section-1-title section-title text-white fw-600 text-uppercase">
                                                {{ $slide['title'] ?? '' }}
                                            </h1>
                                            <p class="section-1-subtitle text-white text-16">{{ $slide['subtitle'] ?? '' }}</p>

                                            <div class="search-container">
                                                <input type="text" class="search-input"
                                                    placeholder="{{ $slide['searchPlaceholder'] ?? '' }}">
                                                <button class="btn-gradient">
                                                    <span
                                                        class="section__1-icon--pc show-pc">{{ $slide['searchButtonText'] ?? 'Discover' }}</span>
                                                    <span class="section__1-icon--mobile show-mobile">
                                                        <i
                                                            class="fa-light fa-magnifying-glass fw-500 search-icon text-26"></i>
                                                    </span>
                                                </button>

                                                <div class="search-popup">
                                                    <div>
                                                        <div class="search-section-title">
                                                            {{ $slide['hotSearchesLabel'] ?? 'Hot Searches' }}</div>
                                                        <div class="search-tags" id="hotSearches">
                                                            @foreach (($slide['hotSearches'] ?? []) as $tag)
                                                                <button class="search-tag"
                                                                    data-id="{{ $tag['id'] ?? '' }}">{{ $tag['text'] ?? '' }}</button>
                                                            @endforeach
                                                        </div>
                                                    </div>

                                                    <div>
                                                        <div class="search-section-title">
                                                            {{ $slide['recentSearchesLabel'] ?? 'Recent Searches' }}</div>
                                                        <div class="search-tags" id="recentSearches">
                                                            @foreach (($slide['recentSearches'] ?? []) as $tag)
                                                                @php
                                                                    $tagText = is_array($tag) ? (string) ($tag['text'] ?? '') : (string) $tag;
                                                                    $tagId = is_array($tag) ? (string) ($tag['id'] ?? '') : '';
                                                                @endphp
                                                                @if ($tagText !== '')
                                                                    <button class="search-tag" data-id="{{ $tagId }}">{{ $tagText }}</button>
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!--------------------- 2. RED RIVER RAMBLE HIGHLIGHT --------------------->
            <section class="section-2">
                <div class="container">
                    <div class="section__2-swiper relative" data-swiper data-loop="true" data-speed="1000"
                        data-space="30" data-effect="slide" data-pagination=".swiper-pagination-section-2">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach ($highlights as $item)
                                    <div class="swiper-slide">
                                        <div class="section__2-grid">
                                            <div class="section__2-img">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}"
                                                    alt="{{ $item['alt'] ?? ($item['title'] ?? '') }}">
                                            </div>
                                            <div class="section__2-content">
                                                <h2 class="section-title">{{ $item['title'] ?? '' }}</h2>
                                                <p class="line-height-32px">{{ $item['description'] ?? '' }}</p>
                                                <div class="text-center">
                                                    <a href="{{ $item['buttonLink'] ?? '#' }}"
                                                        class="btn-gradient inline-block">
                                                        {{ $item['buttonText'] ?? '' }}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="swiper-pagination swiper-pagination-section-2"></div>
                    </div>

                </div>
            </section>

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

            <!--------------------- 4. PERSONALIZED TRAVEL TRENDS 2025 --------------------->
            <section class="section-4">
                <div class="container">
                    <div class="mb-4 text-center section-4-header">
                        @if (!empty($trends['title']))
                            <h2 class="section-title">{{ $trends['title'] }}</h2>
                        @endif
                        @if (!empty($trends['subtitle']))
                            <h5 class="text-18 fw-500 text-left">{{ $trends['subtitle'] }}</h5>
                        @endif
                    </div>
                    <div id="section-4-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 (($trends['items'] ?? []) as $item)
                                    <div class="swiper-slide">
                                        <a href="{{ $item['link'] ?? '#' }}" class="text-decoration-none text-reset">
                                            <div class="card h-100 section-4-card">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}"
                                                    class="card-img-top img-fluid fit-cover"
                                                    alt="{{ $item['alt'] ?? '' }}">
                                                <div class="card-body">
                                                    <h3 class="h6 card-title fw-500 mb-3">{{ $item['title'] ?? '' }}</h3>
                                                    <p class="card-text text-muted mb-3">{{ $item['location'] ?? '' }}</p>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <span class="fw-500 text-16">{{ $item['price'] ?? '' }}</span>
                                                        @if (!empty($item['sale']))
                                                            <span class="span-gradient">{{ $item['sale'] }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <p class="mt-5">{!! $trends['disclaimer'] ?? '' !!}</p>
                </div>
            </section>

            <!--------------------- 5. SECTION 5 (CULTURE, RELAXING, BUSINESS...) --------------------->
            <section class="section-5">
                <div class="container">
                    <h2 class="section-title">{{ $categories['title'] ?? '' }}</h2>

                    <div class="section-5-swiper relative" data-swiper data-loop="true" data-space="30"
                        data-slides-mobile="2" data-slides-desktop="5" data-prev=".swiper5-prev"
                        data-next=".swiper5-next">

                        <div class="swiper-button-prev-border swiper5-prev"></div>
                        <div class="swiper-button-next-border swiper5-next"></div>

                        <div class="swiper swiper5">
                            <div class="swiper-wrapper">
                                @foreach (($categories['groups'] ?? []) as $group)
                                    <div class="swiper-slide">
                                        @foreach ($group as $item)
                                            <a href="{{ $item['link'] ?? '#' }}" class="section-5-item">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}"
                                                    alt="{{ $item['text'] ?? '' }}">
                                                <p>{{ $item['text'] ?? '' }}</p>
                                            </a>
                                        @endforeach
                                    </div>
                                @endforeach
                            </div>
                        </div>

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

            <!--------------------- 6. STORIES & EXPERIENCE JOURNEYS --------------------->
            <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 (($stories['content'] ?? []) 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>

            <!--------------------- 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>
        </main>

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

        <!-- Floating Action Buttons (Mobile Only) -->
        <div class="floating-actions" id="floatingActions">
            @foreach ($floatingActions as $action)
                @php
                    $width = $action['width'] ?? 25;
                    $height = $action['height'] ?? 25;
                    $actionId = $action['id'] ?? '';
                @endphp
                <a href="{{ $action['href'] ?? '#' }}"
                    class="floating-btn{{ $actionId === 'saveBtn' ? ' save-btn' : '' }}"
                    @if ($actionId !== '') id="{{ $actionId }}" @endif>
                    <img loading="lazy" decoding="async" src="{{ $action['img'] ?? '' }}" width="{{ $width }}" height="{{ $height }}"
                        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>

        <!-- Mobile Bottom Navigation -->
        <div class="mobile-bottom-nav" id="mobileBottomNav">
            <div class="nav-container bottom-menu">
                @foreach ($mobileNavData as $item)
                    @php
                        $href = (string) ($item['href'] ?? '#');
                        $isTrends = $href === './trends.html';
                        $isHome = in_array($href, ['/', '/vi', './index.html'], true);
                        $hasTwoStates = !empty($item['imgCurrent']) && !empty($item['imgNotCurrent']);
                    @endphp

                    @if ($isTrends)
                        <a href="{{ $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="{{ $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="{{ $href }}" class="nav-item">
                            <div class="nav-icon">
                                <img loading="lazy" decoding="async" src="{{ $item['imgNotCurrent'] ?? '' }}" width="25" height="25"
                                    alt="{{ $item['alt'] ?? '' }}">
                            </div>
                            <div class="nav-label">{{ $item['label'] ?? '' }}</div>
                        </a>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
@endsection

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