@extends('frontend::layouts.master')
@section('content')

    @if (!empty($banners))
        <div
            class="relative h-auto flex items-center justify-center overflow-hidden bg-kx-dark top-[5rem] mb-[3rem]">
            <!-- Swiper Container หลัก -->
            <div class="swiper index-banner-swiper">
                <div class="swiper-wrapper">
                    @foreach ($banners as $banner)
                        
                        @if ($banner['type'] == 'image')
                            <!-- Slide: Image Only -->
                            <div class="swiper-slide">
                                <a href="{{ $banner['url'] ?? '' }}" class="block w-full h-full">
                                    <img class="slide-image" src="{{ asset($banner['src'] ?? '') }}" alt="...">
                                </a>
                            </div>
                        @endif
                       
                        {{-- @if ($banner['type'] == 'image')
                            <div class="swiper-slide">
                                @if (!empty($banner['url']))
                                    <a href="{{ $banner['url'] ?? '' }}" target="_blank" class="block w-full h-full absolute inset-0" style="z-index:2;">
                                        <span class="sr-only">{{ $banner['name'] ?? 'Banner Link' }}</span>
                                    </a>
                                @endif
                                <img class="slide-image" src="{{ asset($banner['src'] ?? '') }}" alt="...">
                                <div
                                    class="absolute inset-0 bg-black/30 flex flex-col justify-center items-center text-white p-4 z-20 pointer-events-none">
                                    <div class="text-4xl md:text-7xl font-bold mb-[3rem] pointer-events-auto">
                                        {{ $banner['name'] ?? '' }}
                                    </div>
                                    <a class="bg-kx-primary hover:bg-white hover:text-kx-primary text-white p-4 font-bold uppercase tracking-widest transition-all duration-300 shadow-lg border-2 border-kx-primary pointer-events-auto z-50"
                                        href="#book-class">@lang('frontend::lang.get_intro_offer')</a>
                                </div>
                            </div>
                        @endif --}}

                        @if ($banner['type'] == 'video')
                            <!-- Slide: VDO Upload -->
                            <div class="swiper-slide">
                                <!-- muted และ playsinline สำคัญมากเพื่อให้ autoplay ทำงานได้บน Browser สมัยใหม่ -->
                                <video class="slide-video" autoplay muted loop playsinline>
                                    <source src="{{ $banner['src'] ?? '' }}" type="video/mp4">
                                </video>
                            </div>
                        @endif

                        @if ($banner['type'] == 'youtube')
                            <!-- Slide: YouTube Video -->
                            <div class="swiper-slide">
                                <div class="youtube-container">
                                    <!-- ใช้ enablejsapi=1 เพื่อให้เราควบคุมการหยุดเล่นผ่าน JS ได้ -->
                                    <iframe
                                        src="https://www.youtube.com/embed/{{ $banner['src'] ?? '' }}?enablejsapi=1&rel=0"
                                        title="YouTube video player"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                        allowfullscreen>
                                    </iframe>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>

                <!-- ปุ่มลูกศรซ้าย-ขวา -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>

                <!-- จุด Pagination ด้านล่าง -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    @endif

    @if (!empty($about_us))
        <!-- 1. About Us Section -->
        <section class="py-20 bg-white" id="{{ $about_url['url'] ?? '' }}">
            <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
                {!! $about_us['detail'] ?? '' !!}
            </div>
        </section>
    @endif

    <!-- 2. Book A Class Section (4 Tabs) -->
    @if (!empty($book['list']) && count($book['list']) > 0)
        <section class="py-20 bg-kx-gray relative" id="book-class">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="mb-8 text-center md:text-left">
                    <span class="text-kx-primary font-bold tracking-widest uppercase">
                        @if (!empty($book['list'][0]['name']))
                            {!! $book['list'][0]['name'] ?? '' !!}
                        @endif
                    </span>
                    <h2 class="text-4xl font-black text-kx-dark mt-2 uppercase">
                        @lang('frontend::lang.book.title')
                    </h2>
                </div>

                <!-- Tabs Navigation -->
                <div class="bg-white rounded-t-lg shadow-sm border-b border-gray-200 px-4">
                    <nav class="-mb-px flex space-x-8 overflow-x-auto no-scrollbar" aria-label="Tabs">
                        @foreach ($book['list'] as $k => $list)
                            <button
                                class="tab-btn {{ $k == 0 ? 'active text-kx-primary border-kx-primary' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }} whitespace-nowrap border-b-2 py-4 px-1 font-medium  "
                                id="btn-{{ $k }}" onclick="switchTab('{{ $k }}')">
                                {!! $list['name'] ?? '' !!}
                            </button>
                        @endforeach
                    </nav>
                </div>

                <!-- Tab Contents -->
                <div class="min-h-[600px] bg-white rounded-b-lg shadow-md p-4 md:p-8">
                    <!-- Book a Class Tab -->
                    @foreach ($book['list'] as $bid => $book)
                        <div class="tab-content {{ $bid == 0 ? 'block' : 'hidden' }} block" id="tab-{{ $bid }}">
                            {!! $book['embed'] ?? '' !!}
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif


    <!-- 3. Location Section -->
    @if (!empty($contact))
        <section class="py-20 bg-white" id="location">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-10">
                    <span class="text-kx-primary font-bold tracking-widest uppercase">
                        @lang('frontend::lang.contact.find_us')
                    </span>
                    <h2 class="text-4xl font-black text-kx-dark mt-2 uppercase">@lang('frontend::lang.contact.location')</h2>
                </div>

                <div
                    class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 flex flex-col md:flex-row h-auto md:h-[500px]">

                    <!-- Info Side -->
                    <div class="p-8 md:w-1/3 bg-kx-primary text-white flex flex-col space-y-8">
                        <div>
                            <h3 class="text-2xl font-bold text-white mb-2">{!! $contact['name'] ?? '' !!}</h3>
                            <p class="text-white/90 leading-relaxed">
                                {!! $contact['office'] ?? '' !!}
                            </p>
                        </div>

                        <div class="space-y-4">
                            @if (!empty($contact['tel']))
                                <div class="flex items-center space-x-4">
                                    <div
                                        class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white">
                                        <i class="fa-solid fa-phone"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-white/80 uppercase tracking-wider">@lang('frontend::lang.contact.phone')</p>
                                        <p class="font-bold">
                                            <a href="tel:{{ $contact['tel'] ?? '' }}">{{ $contact['tel'] ?? '' }}</a>
                                        </p>
                                    </div>
                                </div>
                            @endif

                            @if (!empty($contact['email']))
                                <div class="flex items-center space-x-4">
                                    <div
                                        class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white">
                                        <i class="fa-solid fa-envelope text-xl"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-white/80 uppercase tracking-wider">@lang('frontend::lang.contact.email')</p>
                                        <p class="font-bold">
                                            <a
                                                href="mailto:{{ $page_init['contact']['email'] ?? '' }}">{{ $page_init['contact']['email'] ?? '' }}</a>
                                        </p>
                                    </div>
                                </div>
                            @endif
                        </div>
                        @if (!empty($contact['social']['google']['url']))
                            <a class="block text-center border border-white/40 hover:bg-white hover:text-kx-primary text-white py-3 rounded-full transition-all font-bold uppercase tracking-wider"
                                href="{{ $contact['social']['google']['url'] ?? '' }}" target="_blank">
                                @lang('frontend::lang.contact.get_directions') <i class="fa-solid fa-location-arrow"></i>
                            </a>
                        @endif

                    </div>

                    @if (!empty($contact['google_map']))
                        <!-- Map Side -->
                        <div class="w-full md:w-2/3 h-[400px] md:h-full bg-gray-200 relative">
                            <!-- Google Map Embed (Thonglor Area) -->
                            {!! $contact['google_map'] ?? '' !!}
                        </div>
                    @endif

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

    @if (!empty($faqs['list']))
        <!-- 4. FAQs Section (Accordion) -->
        <section class="py-20 bg-kx-gray" id="faqs">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <span class="text-kx-primary font-bold tracking-widest uppercase">@lang('frontend::lang.faqs.questions')</span>
                    <h2 class="text-4xl font-black text-kx-dark mt-2 uppercase">
                        @lang('frontend::lang.faqs.title')
                    </h2>
                </div>

                <div class="space-y-4">
                    @foreach ($faqs['list'] as $key => $list)
                        <!-- FAQ Item $key -->
                        <details class="group bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                            <summary
                                class="flex justify-between items-center font-medium cursor-pointer list-none p-6 bg-white hover:bg-gray-50 transition-colors">
                                <span class="text-lg font-bold text-kx-dark">
                                    {!! $list['name'] ?? '' !!}
                                </span>
                                <span class="transition group-open:rotate-180 text-kx-primary">
                                    <svg fill="none" height="24" shape-rendering="geometricPrecision"
                                        stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="1.5" viewBox="0 0 24 24" width="24">
                                        <path d="M6 9l6 6 6-6"></path>
                                    </svg>
                                </span>
                            </summary>
                            <div class="text-gray-600 p-6 pt-5 leading-relaxed border-t border-gray-100">
                                {!! $list['desc'] ?? '' !!}
                            </div>
                        </details>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <!-- 5. Contact Us Section -->
    @php
        $line_url = $page_init['contact']['social']['line']['url'] ?? '';
    @endphp
    @livewire('frontend::contact.contact-form', ['line_url' => $line_url])

@endsection