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

@section('content')
    <!-- Breadcrumb -->
    <div class="pt-24 md:pt-32 pb-5">
        <div class="container mx-auto px-4">
            <nav class="flex overflow-x-auto" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3 whitespace-nowrap">
                    <li class="inline-flex items-center">
                        <a href="/"
                            class="inline-flex items-center text-gray-400 hover:text-teal-400 transition-colors">
                            Home
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] size-4 text-gray-600"></span>
                            <a href="/tours" class="ml-1 text-gray-400 hover:text-teal-400 transition-colors md:ml-2">
                                Tours
                            </a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] size-4 text-gray-600"></span>
                            <span
                                class="ml-1 md:ml-2 truncate max-w-[200px] md:max-w-none bg-gradient-to-r from-teal-400 to-emerald-400 bg-clip-text text-transparent font-medium">
                                Thai Temple Tour
                            </span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Tour Detail Section -->
    <section class="lg:pb-16">
        <div class="container mx-auto px-4">
            <!-- Main Content Container -->
            <div class="bg-white/5 backdrop-blur-lg rounded-[40px] overflow-hidden border border-white/10">
                <!-- Hero Image Section -->
                <div class="relative h-[60vh]">
                    <div class="absolute inset-0">
                        <img src="https://images.unsplash.com/photo-1493221875746-1203de4f7a56?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                            alt="Thai Temple Tour" class="w-full h-full object-cover">
                        <!-- Dark gradient overlay -->
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                    </div>
                    <div class="absolute bottom-8 left-8 z-10">
                        <h1 class="text-5xl font-bold text-white mb-4">Thai Temple Tour</h1>
                        <div class="flex gap-6">
                            <div class="flex items-center gap-2 text-white">
                                <span class="icon-[tabler--clock] size-5"></span>
                                <span>8 hours</span>
                            </div>
                            <div class="flex items-center gap-2 text-white">
                                <span class="icon-[tabler--users] size-5"></span>
                                <span>Max 15 people</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 py-8 relative min-h-screen">
                    <!-- Left Content -->
                    <div class="lg:col-span-2">
                        <!-- Tour Overview -->
                        <div class="mb-12">
                            <h2
                                class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-emerald-400 bg-clip-text text-transparent mb-6">
                                Tour Overview
                            </h2>
                            <p class="text-gray-700 leading-relaxed text-lg">
                                Explore the most beautiful and historic temples of Thailand on this guided tour. Visit
                                iconic
                                temples including Wat Phra Kaew, Wat Arun, and Wat Pho. Learn about Buddhist culture and
                                Thai
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis ex pariatur dolor earum
                                quos assumenda facere magnam ipsum. Mollitia quia qui unde possimus sed quam, in laborum.
                                Unde ipsa qui nostrum, modi dignissimos facere. Nobis non id beatae quam libero quidem vel
                                soluta aliquid voluptatum? Rem minima ea doloremque nobis est voluptas reprehenderit itaque
                                repudiandae provident quos. Accusantium, praesentium ipsam similique quia iste ex nobis
                                adipisci id ipsa maxime quam velit illum quisquam? Dolor alias ex quos accusamus ut hic
                                ipsam reiciendis nesciunt ipsum, atque, nulla expedita facilis, deserunt sapiente velit
                                molestiae voluptatum maiores eos beatae eum. Mollitia, quae tempore esse voluptates sapiente
                                quos ullam sint qui aspernatur, commodi labore, itaque doloremque tenetur facilis
                                architecto! Consequuntur numquam, maiores fugiat sed nulla expedita itaque minus eveniet
                                esse voluptatibus quo optio placeat aliquid corrupti quisquam? Ipsum accusantium illo
                                distinctio impedit cupiditate vitae tempora, quibusdam ipsam delectus deleniti id provident
                                quam debitis molestiae natus nisi porro! Totam, cum tenetur ipsam atque obcaecati blanditiis
                                provident earum necessitatibus maxime adipisci. Debitis nihil nisi quaerat aliquid, commodi
                                exercitationem. Sit amet neque soluta hic blanditiis molestiae accusantium exercitationem?
                                Rerum obcaecati vitae minima libero. Ipsa fugiat dolore itaque ipsum, atque ullam excepturi
                                quidem provident dolorem nostrum sint harum.
                            </p>
                        </div>

                        <!-- Image Gallery -->
                        <div class="space-y-6">
                            <h2
                                class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-emerald-400 bg-clip-text text-transparent">
                                Gallery
                            </h2>
                            <div class="">
                                @php
                                    $slideDatas = [
                                        [
                                            'type' => 'image',
                                            'src' =>
                                                'https://images.unsplash.com/photo-1490077476659-095159692ab5?q=80&w=2051&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
                                            'alt' => 'วัดไทย',
                                            'url' => '#',
                                        ],
                                        [
                                            'type' => 'image',
                                            'src' =>
                                                'https://images.unsplash.com/photo-1490077476659-095159692ab5?q=80&w=2051&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
                                            'alt' => 'วัดไทย',
                                            'url' => '#',
                                        ],
                                        [
                                            'type' => 'image',
                                            'src' =>
                                                'https://images.unsplash.com/photo-1490077476659-095159692ab5?q=80&w=2051&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
                                            'alt' => 'วัดไทย',
                                            'url' => '#',
                                        ],
                                        [
                                            'type' => 'image',
                                            'src' =>
                                                'https://images.unsplash.com/photo-1490077476659-095159692ab5?q=80&w=2051&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
                                            'alt' => 'วัดไทย',
                                            'url' => '#',
                                        ],
                                    ];
                                @endphp
                                <div class="com-carousel-thumbnail pb-6 md:sticky top-[70px]">
                                    <section class="splide no-drag relative" id="main-carousel">
                                        <div class="splide__track">
                                            <ul class="splide__list">
                                                @if (!empty($slideDatas))
                                                    @foreach ($slideDatas as $item)
                                                        <li class="splide__slide">
                                                            <img class="starting-image" src="{{ $item['src'] ?? '' }}"
                                                                alt="{{ $item['alt'] ?? '' }}">
                                                        </li>
                                                    @endforeach
                                                @endif
                                            </ul>
                                            <ul class="splide__pagination --prevent-on-load-init" role="tablist"></ul>
                                        </div>
                                    </section>
                                    <section class="splide mt-2" id="thumbnail-carousel">
                                        <div class="splide__track">
                                            <ul class="splide__list">
                                                @if (!empty($slideDatas))
                                                    @foreach ($slideDatas as $item)
                                                        <li class="splide__slide overflow-hidden flex items-center">
                                                            <img class="w-full h-full object-contain object-center"
                                                                src="{{ $item['src'] ?? '' }}"
                                                                alt="{{ $item['alt'] ?? '' }}">
                                                        </li>
                                                    @endforeach
                                                @endif
                                            </ul>
                                        </div>
                                        <ul class="splide__pagination --prevent-on-load-init" role="tablist"></ul>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Sidebar -->
                    <div class="lg:col-span-1">
                        <div class="sticky top-24 bg-gray-50 rounded-3xl p-6 border border-gray-100 space-y-6">
                            <h3 class="text-xl font-semibold text-gray-800">Ready to Experience?</h3>
                            <button
                                class="w-full py-4 px-6 rounded-2xl bg-gradient-to-r from-teal-500 to-emerald-500 
                                         hover:from-teal-600 hover:to-emerald-600 text-white font-medium text-lg 
                                         transition-all duration-300 flex items-center justify-center gap-2 group">
                                <span>Contact Us</span>
                                <span
                                    class="icon-[tabler--arrow-right] group-hover:translate-x-1 transition-transform"></span>
                            </button>
                        </div>
                        <!-- Tour Information -->
                        {{-- <div class="mt-6 space-y-4">
                            <div class="flex justify-between items-center text-gray-700">
                                <span>Price per person</span>
                                <span class="font-semibold">฿2,500</span>
                            </div>
                            <div class="flex justify-between items-center text-gray-700">
                                <span>Duration</span>
                                <span>8 hours</span>
                            </div>
                            <div class="flex justify-between items-center text-gray-700">
                                <span>Group size</span>
                                <span>2-15 people</span>
                            </div>
                            <div class="flex justify-between items-center text-gray-700">
                                <span>Languages</span>
                                <span>English, Thai</span>
                            </div>
                            <div class="border-t border-gray-200 pt-4">
                                <div class="flex items-center gap-2 text-gray-700">
                                    <span class="icon-[tabler--clock-check] size-5 text-teal-500"></span>
                                    <span>Free cancellation up to 24 hours before start</span>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                    <!-- Additional Details Section -->
                    <div class="lg:col-span-2">
                        <!-- Highlights -->
                        <div class="mb-12">
                            <h2
                                class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-emerald-400 bg-clip-text text-transparent mb-6">
                                Tour Highlights
                            </h2>
                            <ul class="space-y-4">
                                <li class="flex items-start gap-3">
                                    <span class="icon-[tabler--check] size-5 text-teal-500 mt-1"></span>
                                    <span class="text-gray-700">Visit the most iconic temples in Bangkok</span>
                                </li>
                                <li class="flex items-start gap-3">
                                    <span class="icon-[tabler--check] size-5 text-teal-500 mt-1"></span>
                                    <span class="text-gray-700">Professional English-speaking guide</span>
                                </li>
                                <li class="flex items-start gap-3">
                                    <span class="icon-[tabler--check] size-5 text-teal-500 mt-1"></span>
                                    <span class="text-gray-700">Traditional Thai lunch included</span>
                                </li>
                            </ul>
                        </div>

                        <!-- What's Included -->
                        <div class="lg:mb-12">
                            <h2
                                class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-emerald-400 bg-clip-text text-transparent mb-6">
                                What's Included
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="flex items-center gap-3">
                                    <span class="icon-[tabler--bus] size-5 text-teal-500"></span>
                                    <span class="text-gray-700">Hotel pickup and drop-off</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <span class="icon-[tabler--user] size-5 text-teal-500"></span>
                                    <span class="text-gray-700">Professional guide</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <span class="icon-[tabler--ticket] size-5 text-teal-500"></span>
                                    <span class="text-gray-700">Entrance fees</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <span class="icon-[tabler--coffee] size-5 text-teal-500"></span>
                                    <span class="text-gray-700">Lunch and refreshments</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection