<x-layout>
    <div class="container  2xl:pt-20 px-4">
        <div class="flex justify-start items-center">
            <div class="pt-24 pb-2 md:pb-4 lg:pb- lg:pt-24 2xl:pt-2">
                <nav class="flex" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
                        <li class="inline-flex items-center">
                            <a href="{{ route('wisata.pengunjung') }}"
                                class="font-poppins inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 ">
                                Wisata
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center font-poppins">
                                <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 9 4-4-4-4" />
                                </svg>
                                <a href="#"
                                    class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 ">{{ $data->nama_wisata }}</a>
                            </div>
                        </li>

                    </ol>
                </nav>
            </div>
        </div>
        <div class="">
            <div class="xl:grid grid-cols-1 xl:grid-cols-8 gap-4 flex flex-col-reverse xl:flex-col">
                <div class="xl:col-span-3 dm-sans rounded-xl">
                    <!-- Tombol Navigasi -->
                    <p class="font-bold text-2xl 2xl:text-6xl mb-8 text-[#004165] font-fjalla uppercase">
                        {{ $data->nama_wisata }}
                    </p>

                    <div class="flex items-start space-x-2 text-md font-semibold">
                        <!-- Tombol Navigasi -->
                        <div class="flex space-x-2">
                            <!-- Tombol "Deskripsi" -->
                            <button id="btn-deskripsi"
                                class="tab-button active rounded-xl px-4 py-1 font-poppins
            bg-[#F8FAFC] text-[#6B7280] hover:bg-[#E2E8F0] hover:text-[#1A202C] hover:scale-105 hover:shadow-lg transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95">
                                Deskripsi
                            </button>

                            <!-- Tombol "Detail" -->
                            <button id="btn-detail"
                                class="tab-button rounded-xl px-4 py-1 font-poppins
            bg-[#F8FAFC] text-[#6B7280] hover:bg-[#E2E8F0] hover:text-[#1A202C] hover:scale-105 hover:shadow-lg transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95">
                                Detail
                            </button>

                            <!-- Tombol "Komentar" -->
                            <button id="btn-komentar"
                                class="tab-button rounded-xl px-4 py-1 font-poppins
            bg-[#F8FAFC] text-[#6B7280] hover:bg-[#E2E8F0] hover:text-[#1A202C] hover:scale-105 hover:shadow-lg transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95">
                                Tulis Ulasan
                            </button>

                            <!-- Tombol "Rute" -->
                            <a href="{{ route('ruteTerdekat.index', $data->nama_wisata) }}" target="_blank"
                                class="flex rounded-xl px-4 py-1 font-poppins
            bg-[#F8FAFC] text-[#6B7280] hover:bg-[#E2E8F0] hover:text-[#1A202C] hover:scale-105 hover:shadow-lg transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95">
                                Rute
                            </a>
                        </div>

                        <!-- Style Tombol Aktif -->
                        <style>
                            .tab-button {
                                transition: background-color 0.2s ease-in-out;
                            }

                            .tab-button.active {
                                background-color: #60A5FA;
                                /* blue-400 */
                                color: white;
                            }
                        </style>

                        <!-- Script Navigasi -->
                        <script>
                            document.addEventListener("DOMContentLoaded", function() {
                                const btnDeskripsi = document.getElementById("btn-deskripsi");
                                const btnDetail = document.getElementById("btn-detail");
                                const btnKomentar = document.getElementById("btn-komentar");

                                const deskripsi = document.getElementById("deskripsi");
                                const detail = document.getElementById("detail");
                                const komentar = document.getElementById("komentar");
                                const buttons = document.querySelectorAll(".tab-button");

                                function showContent(showSection, activeButton) {
                                    // Sembunyikan semua section
                                    [deskripsi, detail, komentar].forEach(section => section.classList.add("hidden"));

                                    // Tampilkan yang aktif
                                    showSection.classList.remove("hidden");

                                    // Reset semua tombol
                                    buttons.forEach(btn => btn.classList.remove("active", "bg-blue-300", "text-white"));
                                    activeButton.classList.add("active", "bg-blue-300", "text-white");
                                }

                                // Event listener
                                btnDeskripsi.addEventListener("click", () => showContent(deskripsi, btnDeskripsi));
                                btnDetail.addEventListener("click", () => showContent(detail, btnDetail));
                                btnKomentar.addEventListener("click", () => showContent(komentar, btnKomentar));

                                // Default aktif di Deskripsi
                                showContent(deskripsi, btnDeskripsi);
                            });
                        </script>

                    </div>

                    <!-- Konten -->
                    <div class="py-4 pr-4">
                        <div id="deskripsi">
                            <p
                                class=" text-lg md:text-xl font-poppins text-gray-700 leading-loose text-justify indent-8 md:indent-12 first-letter:text-4xl first-letter:font-bold first-letter:text-gray-900 first-letter:mr-2 first-letter:font-serif">
                                {{ $data->deskripsi_wisata }}
                            </p>
                        </div>
                        <div id="detail" class="hidden">
                            <!-- Informasi Wisata -->
                            <div class="grid grid-cols-1 gap-4 text-gray-800">

                                <div class="grid grid-cols-12">
                                    <div class="col-span-2">
                                        <p class="font-semibold font-poppins">Kategori</p>
                                    </div>
                                    <div class="col-span-1">:</div>
                                    <div class="col-span-9">
                                        <p class="flex ml-2 font-poppins">
                                            {{ $data->kategori_detail->kategori->nama_kategori }},
                                            {{ $data->kategori_detail->nama_kategori_detail }}
                                        </p>
                                    </div>
                                </div>

                                <div class="grid grid-cols-12">
                                    <div class="col-span-2">
                                        <p class="font-semibold font-poppins">Lokasi</p>
                                    </div>
                                    <div class="col-span-1">:</div>
                                    <div class="col-span-9">
                                        <p class="flex ml-2 font-poppins">{{ $data->lokasi }}</p>
                                    </div>
                                </div>

                                <div class="grid grid-cols-12">
                                    <div class="col-span-2">
                                        <p class="font-semibold font-poppins">Fasilitas</p>
                                    </div>
                                    <div class="col-span-1">:</div>
                                    <div class="col-span-9">
                                        <p class="flex ml-2 font-poppins">{{ $data->fasilitas }}</p>
                                    </div>
                                </div>

                                <div class="grid grid-cols-12">
                                    <div class="col-span-2">
                                        <p class="font-semibold font-poppins">HTM</p>
                                    </div>
                                    <div class="col-span-1">:</div>
                                    <div class="col-span-9">
                                        <p class="flex ml-2 font-poppins">Rp {{ $data->htm_wisata }}</p>
                                    </div>
                                </div>

                                <div class="grid grid-cols-12">
                                    <div class="col-span-2">
                                        <p class="font-semibold font-poppins">Parkir</p>
                                    </div>
                                    <div class="col-span-1">:</div>
                                    <div class="col-span-9">
                                        <p class="flex ml-2 font-poppins">{{ $data->parkir ?? 'Tidak tersedia' }}</p>
                                    </div>
                                </div>

                                <!-- Jam Operasional -->
                                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2">
                                    <p class="font-semibold col-span-full font-poppins">Jam Operasional</p>
                                    @php
                                        $jamOperasional = json_decode($data->jam_operasional, true) ?? [];
                                    @endphp

                                    @foreach (['senin', 'selasa', 'rabu', 'kamis', 'jumat', 'sabtu', 'minggu'] as $hari)
                                        @php
                                            $jamBuka = $jamOperasional[$hari]['buka'] ?? null;
                                            $jamTutup = $jamOperasional[$hari]['tutup'] ?? null;

                                            if ($jamBuka === '00:00' && $jamTutup === '00:00') {
                                                $status = '24 Jam';
                                            } elseif (empty($jamBuka) || empty($jamTutup)) {
                                                $status = 'Tutup';
                                            } else {
                                                $status = "Buka: $jamBuka<br>Tutup: $jamTutup";
                                            }
                                        @endphp
                                        <div class="border-2 border-slate-500 p-2 rounded-lg bg-gray-50">
                                            <p class="font-semibold font-poppins">{{ ucfirst($hari) }}</p>
                                            @if ($status === '24 Jam' || $status === 'Tutup')
                                                <p class="text-sm font-poppins font-medium">{!! $status !!}</p>
                                            @else
                                                <p class="text-sm font-poppins">Buka: <span
                                                        class="font-medium">{{ $jamBuka }}</span></p>
                                                <p class="text-sm font-poppins">Tutup: <span
                                                        class="font-medium">{{ $jamTutup }}</span></p>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <!-- Section Ulasan -->
                        <div id="komentar" class="font-poppins">
                            {{-- Form Review --}}
                            <form action="{{ route('komentar.store', ['id_wisata' => $data->id]) }}" method="POST"
                                class="bg-white p-6 rounded-md shadow-md">
                                @csrf
                                <h3 class="text-xl font-semibold mb-4 text-gray-800">Bagikan pengalaman Anda</h3>

                                {{-- Nama (opsional) --}}
                                <input type="text" name="nama"
                                    class="w-full border border-gray-300 p-2 rounded mb-4 focus:outline-none focus:ring focus:border-blue-300"
                                    placeholder="Nama Anda (opsional)" value="{{ old('nama') }}">

                                {{-- Judul Ulasan --}}
                                <input type="text" name="judul" required
                                    class="w-full border border-gray-300 p-2 rounded mb-4 focus:outline-none focus:ring focus:border-blue-300"
                                    placeholder="Judul ulasan (misal: Tempat yang sangat menyenangkan)"
                                    value="{{ old('judul') }}">

                                {{-- Rating --}}
                                <div class="mb-4">
                                    <span class="block mb-2 text-gray-700">Rating:</span>
                                    <div class="flex space-x-1" id="star-rating">
                                        @for ($i = 1; $i <= 5; $i++)
                                            <input type="radio" id="star{{ $i }}" name="rating"
                                                value="{{ $i }}" class="hidden"
                                                {{ old('rating') == $i ? 'checked' : '' }}>
                                            <label for="star{{ $i }}" data-star="{{ $i }}"
                                                class="cursor-pointer">
                                                <svg class="w-8 h-8 star {{ old('rating') >= $i ? 'text-yellow-400' : 'text-gray-300' }}"
                                                    fill="currentColor" viewBox="0 0 20 20">
                                                    <path
                                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.3 4.005h4.21c.969 0 1.371 1.24.588 1.81l-3.404 2.474 1.3 4.005c.3.921-.755 1.688-1.54 1.118L10 13.347l-3.404 2.474c-.785.57-1.84-.197-1.54-1.118l1.3-4.005L2.952 8.742c-.783-.57-.38-1.81.588-1.81h4.21l1.3-4.005z" />
                                                </svg>
                                            </label>
                                        @endfor
                                    </div>
                                </div>

                                {{-- Komentar --}}
                                <textarea name="komentar" rows="4" required
                                    class="w-full border border-gray-300 p-2 rounded mb-4 resize-none focus:outline-none focus:ring focus:border-blue-300"
                                    placeholder="Tulis ulasan Anda di sini...">{{ old('komentar') }}</textarea>

                                {{-- Submit --}}
                                <button type="submit"
                                    class="font-poppins px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all duration-200 ease-in-out hover:-translate-y-1 active:translate-y-0 active:scale-95">
                                    Kirim Ulasan
                                </button>
                            </form>

                            {{-- Script rating --}}
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    const stars = document.querySelectorAll('#star-rating label');
                                    const radios = document.querySelectorAll('#star-rating input[type="radio"]');

                                    stars.forEach((star, index) => {
                                        star.addEventListener('click', () => {
                                            // Set checked pada input radio
                                            radios[index].checked = true;

                                            // Update warna semua bintang
                                            stars.forEach((s, i) => {
                                                const svg = s.querySelector('svg');
                                                if (i <= index) {
                                                    svg.classList.remove('text-gray-300');
                                                    svg.classList.add('text-yellow-400');
                                                } else {
                                                    svg.classList.remove('text-yellow-400');
                                                    svg.classList.add('text-gray-300');
                                                }
                                            });
                                        });
                                    });
                                });
                            </script>


                            @if ($errors->any())
                                <div class="mt-4 p-3 bg-red-100 text-red-700 rounded">
                                    <ul class="list-disc ml-5">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif


                        </div>


                        <!-- HASIL ULASAN -->
                        {{-- <div class="mb-6">
                            <h2 class="text-xl font-semibold text-gray-700 mb-4">Ulasan Pengunjung</h2>

                            <div class="flex flex-col md:flex-row gap-6">
                                <!-- Kiri: Ringkasan Rating -->
                                <div class="md:w-1/3 bg-white shadow-md p-4 rounded-md border border-gray-200">
                                    <div class="text-3xl font-bold text-green-600 mb-2">
                                        {{ number_format($reviews->avg('rating'), 1) }} / 5
                                    </div>
                                    <div class="text-sm text-gray-500 mb-4">{{ $reviews->count() }} ulasan</div>

                                    @for ($i = 5; $i >= 1; $i--)
                                        @php
                                            $jumlah = $reviews->where('rating', $i)->count();
                                            $persentase =
                                                $reviews->count() > 0 ? ($jumlah / $reviews->count()) * 100 : 0;
                                        @endphp
                                        <div class="flex items-center text-sm mb-1">
                                            <span class="w-10">{{ $i }}★</span>
                                            <div class="w-full bg-gray-200 rounded h-2 mx-2">
                                                <div class="bg-green-500 h-2 rounded"
                                                    style="width: {{ $persentase }}%"></div>
                                            </div>
                                            <span class="w-6 text-right">{{ $jumlah }}</span>
                                        </div>
                                    @endfor
                                </div>

                                <!-- Kanan: Daftar Ulasan -->
                                <div class="md:w-2/3 space-y-4">
                                    @forelse ($reviews as $item)
                                        <div class="p-4 bg-white shadow-md rounded-md border border-gray-200">
                                            <div class="flex items-center justify-between mb-1">
                                                <p class="text-sm text-gray-600 font-semibold">{{ $item->nama }}</p>
                                                <p class="text-xs text-gray-400">
                                                    {{ $item->created_at->diffForHumans() }}</p>
                                            </div>
                                            <!-- Tampilkan rating sebagai bintang -->
                                            <div class="flex items-center text-yellow-400 text-sm mb-1">
                                                @for ($i = 1; $i <= 5; $i++)
                                                    @if ($i <= $item->rating)
                                                        ★
                                                    @else
                                                        <span class="text-gray-300">★</span>
                                                    @endif
                                                @endfor
                                            </div>
                                            <p class="text-gray-800 text-sm">{{ $item->komentar }}</p>
                                        </div>
                                    @empty
                                        <p class="text-gray-500">Belum ada ulasan. Jadilah yang pertama!</p>
                                    @endforelse
                                </div>
                            </div>
                        </div> --}}


                    </div>

                </div>

                <div class="xl:col-span-5 flex flex-col rounded-lg xl:rounded-2xl overflow-hidden ">
                    <!-- Gambar Utama dan Galeri -->
                    <div class="col-span-4 rounded-lg overflow-hidden">
                        <!-- Gambar Utama -->
                        <div class="w-full">
                            @if (!empty($imgDetails) && isset($imgDetails[0]))
                                <img id="main-image" src="{{ asset('storage/' . $imgDetails[0]) }}"
                                    class="object-cover w-full h-auto aspect-[16/9] rounded-lg"
                                    alt="Gambar utama {{ $data->nama_wisata }}">
                            @else
                                <div
                                    class="flex justify-center items-center h-[300px] md:h-[400px] lg:h-[500px] bg-gray-200 text-gray-500 rounded-lg font-poppins">
                                    <p>Gambar Kosong</p>
                                </div>
                            @endif
                        </div>

                        <!-- Gambar Kecil -->
                        @if (!empty($imgDetails))
                            <div class="grid grid-cols-8">
                                @foreach ($imgDetails as $img)
                                    <img src="{{ asset('storage/' . $img) }}"
                                        class="object-cover w-full aspect-[1/1] cursor-pointer  border-transparent hover:border-blue-500 "
                                        alt="Gambar detail"
                                        onclick="changeMainImage('{{ asset('storage/' . $img) }}')">
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-4 text-gray-500 font-poppins">
                                <p>Gambar Detail Tidak Tersedia</p>
                            </div>
                        @endif
                    </div>

                    <!-- Script untuk Pergantian Gambar -->
                    <script>
                        function changeMainImage(newSrc) {
                            const mainImage = document.getElementById('main-image');
                            mainImage.src = newSrc;
                        }
                    </script>
                </div>
            </div>

        </div>

        {{-- Daftar Komentar --}}
        <div class="mt-10">
            <h4 class="font-bold text-2xl 2xl:text-4xl mb-4 text-[#004165] font-fjalla">Komentar Pengunjung</h4>

            @if ($data->komentars->count() > 0)
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        @foreach ($data->komentars as $review)
                            <div class="swiper-slide">
                                <div class="flex bg-white border rounded-lg shadow p-4 gap-6">
                                    <!-- Kiri: info -->
                                    <div
                                        class="w-1/3 flex flex-col justify-between text-sm text-gray-700 font-poppins">
                                        <div class="flex items-center gap-3">
                                            <!-- Foto profil -->
                                            <div class="mb-2">
                                                <div
                                                    class="w-14 h-14 rounded-full bg-[#e1effe] text-[#004165] flex items-center justify-center text-lg font-semibold font-poppins shadow-sm">
                                                    {{ strtoupper(substr($review->nama, 0, 2)) }}
                                                </div>
                                            </div>

                                            <!-- Nama -->
                                            <p class="font-semibold text-xl">{{ $review->nama }}</p>
                                        </div>
                                        <!-- Rating -->
                                        <div class="flex mt-2">
                                            @for ($i = 1; $i <= 5; $i++)
                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                    class="h-5 w-5 {{ $i <= $review->rating ? 'text-yellow-400' : 'text-gray-300' }}"
                                                    fill="currentColor" viewBox="0 0 20 20">
                                                    <path
                                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.3 4.005h4.21c.969 0 1.371 1.24.588 1.81l-3.404 2.474 1.3 4.005c.3.921-.755 1.688-1.54 1.118L10 13.347l-3.404 2.474c-.785.57-1.84-.197-1.54-1.118l1.3-4.005L2.952 8.742c-.783-.57-.38-1.81.588-1.81h4.21l1.3-4.005z" />
                                                </svg>
                                            @endfor
                                        </div>
                                        <!-- Tanggal -->
                                        <span class="text-xs text-gray-500 mt-2">
                                            {{ $review->created_at->translatedFormat('H:i, d F Y') }}
                                        </span>
                                    </div>

                                    <!-- Kanan: judul + komentar -->
                                    <div class="w-2/3 flex flex-col justify-start">
                                        <div class="flex items-center h-[40px]">
                                            <h5 class="font-semibold text-xl text-gray-800 font-poppins">
                                                {{ $review->judul }}
                                            </h5>
                                        </div>
                                        <p class="text-sm text-gray-700 font-poppins mt-1">
                                            {{ $review->komentar }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @else
                <p class="pl-0 text-gray-500 font-poppins">Belum ada komentar untuk tempat ini.</p>
            @endif
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                new Swiper(".mySwiper", {
                    slidesPerView: 2,
                    spaceBetween: 20,
                    loop: true,
                    speed: 800,
                    autoplay: {
                        delay: 5000,
                        disableOnInteraction: false,
                    },
                    keyboard: {
                        enabled: true,
                    },
                    breakpoints: {
                        640: {
                            slidesPerView: 1
                        },
                        1024: {
                            slidesPerView: 2
                        },
                    },
                });
            });
        </script>


        {{-- LOKASI --}}
        <div class="pt-8 xl:pt-16 pb-4">
            <p class="font-bold text-2xl 2xl:text-4xl mb-4 text-[#004165] font-fjalla">Lokasi Wilayah</p>
            <div class="grid ">
                <div id="map" class="aspect-[1920/1920] sm:aspect-[1920/1080] xl:sm:aspect-[1920/540] z-[1]">
                </div> <!-- Tentukan tinggi untuk peta -->
            </div>

            <!-- Memuat Leaflet -->
            <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
            <script>
                // Inisialisasi peta dengan titik tengah menggunakan koordinat dari variabel $data
                var map = L.map('map', {
                    center: [{{ $data->latitude }}, {{ $data->longitude }}], // Atur titik pusat
                    zoom: 13, // Atur level zoom
                    scrollWheelZoom: false // Menonaktifkan zoom menggunakan scroll mouse
                });

                // Tambahkan tile layer dari OpenStreetMap
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);

                // Tambahkan marker lokasi wisata dengan popup
                L.marker([{{ $data->latitude }}, {{ $data->longitude }}]).addTo(map)
                    .bindPopup(
                        `<a href="{{ route('ruteTerdekat.index', $data->nama_wisata) }}" target="_blank">
                            <b>{{ $data->nama_wisata }}</b>
                        </a><br>
                        {{ $data->kategori_detail->kategori->nama_kategori }},
                        {{ $data->kategori_detail->nama_kategori_detail }}.`
                    );
            </script>
        </div>


        {{-- KULINER --}}
        <div class="mb-4 pt-10">
            <p class="text-2xl 2xl:text-4xl font-bold pb-2 text-[#004165] font-fjalla">Kuliner Yang Tersedia</p>
            <h5 class="pl-0 text-gray-500 font-poppins">Berikut adalah kuliner yang tersedia saat ini</h5>
        </div>
        @if ($data->kuliners->isNotEmpty())

            <div class="relative">
                <div class="w-full h-auto overflow-x-auto py-4">
                    <div class="flex gap-4 min-w-max">
                        <!-- Added min-w-max to ensure horizontal overflow when items are many -->
                        @foreach ($data->kuliners as $kulinersss)
                            <button data-modal-target="modal-gambar-detail-wisata-{{ $kulinersss->id }}"
                                data-modal-toggle="modal-gambar-detail-wisata-{{ $kulinersss->id }}"
                                class="relative group flex-shrink-0" type="button">

                                <!-- Aspect ratio and image sizing adjustment -->
                                <div class="w-64 h-80 overflow-hidden rounded-lg">
                                    <!-- Set a fixed size for image container -->
                                    <img src="{{ asset('storage/' . $kulinersss->gambar_kuliner) }}"
                                        alt="{{ $kulinersss->nama_kuliner }}"
                                        class="w-full h-full object-cover transition duration-300 ease-in-out transform group-hover:scale-105 group-hover:brightness-90">
                                </div>

                                <div class="absolute inset-0 flex items-center justify-center">
                                    <figcaption class="absolute bottom-4 z-10 w-full text-center">
                                        <h1
                                            class="font-semibold text-white text-xs md:text-sm uppercase tracking-wide">
                                            {{ $kulinersss->nama_kuliner }}
                                        </h1>
                                    </figcaption>
                                </div>
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>
        @else
            <div class="p-10 mb-10 text-center font-bold text-gray-500 rounded border">
                Kuliner Kosong.
            </div>
        @endif
        {{-- MODAL KULINER --}}
        @foreach ($data->kuliners as $kuliner)
            <div id="modal-gambar-detail-wisata-{{ $kuliner->id }}" data-modal-backdrop="static" tabindex="-1"
                aria-hidden="true"
                class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black bg-opacity-50">
                <div class="relative p-4 w-full max-w-7xl max-h-full">
                    <!-- Modal content -->
                    <div class="relative bg-white rounded-lg shadow-sm">
                        <!-- Modal header -->
                        <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
                            <h3 class="text-xl font-semibold text-gray-900">
                                Kuliner
                            </h3>
                            <button type="button"
                                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
                                data-modal-hide="modal-gambar-detail-wisata-{{ $kuliner->id }}">
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 14 14">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                                </svg>
                                <span class="sr-only">Close modal</span>
                            </button>
                        </div>
                        <!-- Modal body -->
                        <div class="p-4 md:p-5 space-y-4">
                            <!-- Modal Body -->
                            <div class="p-6 grid grid-cols-1 md:grid-cols-10 gap-4">
                                <!-- Kolom Gambar -->
                                <div class="md:col-span-4 flex flex-col  space-y-4 max-h-[500px]">
                                    @if (!empty($kuliner->gambar_menu))
                                        <div class="overflow-x-auto flex pb-4">
                                            @foreach (json_decode($kuliner->gambar_menu, true) as $gambar_menu)
                                                <div class="flex-shrink-0 w-auto h-[500px] mr-4">
                                                    <button type="button"
                                                        class="open-image-modal w-full h-full border border-slate-200 rounded-lg overflow-hidden hover:shadow-xl"
                                                        data-src="{{ asset('storage/' . $gambar_menu) }}">
                                                        <img src="{{ asset('storage/' . $gambar_menu) }}"
                                                            class="object-cover h-full w-auto rounded-lg"
                                                            alt="Gambar Kuliner {{ $kuliner->nama_kuliner }}">
                                                    </button>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <p class="text-center text-gray-500">Tidak ada gambar yang tersedia.</p>
                                    @endif
                                </div>
                                <!-- Kolom Informasi -->
                                <div class="md:col-span-6 space-y-2 overflow-y-auto max-h-[500px]">
                                    <!-- Deskripsi -->
                                    <div>
                                        <p class="text-gray-800 font-bold text-3xl poppins-bold uppercase ">
                                            {{ $kuliner->nama_kuliner ?? 'Nama tidak tersedia.' }}
                                        </p>

                                    </div>
                                    <div>
                                        <h3 class="text-xl font-semibold text-gray-600">Deskripsi</h3>
                                        <p class="text-gray-700 leading-relaxed">
                                            {{ $kuliner->deskripsi_kuliner ?? 'Deskripsi tidak tersedia.' }}

                                        </p>
                                    </div>

                                    <!-- Kontak -->
                                    @if (!empty($kuliner->no_hp))
                                        <div>
                                            <h3 class="text-xl font-semibold text-gray-600">Kontak</h3>
                                            <p class="text-gray-700">
                                                <a href="https://wa.me/{{ '62' . ltrim($kuliner->no_hp, '0') }}"
                                                    class="text-blue-600 hover:text-blue-800" target="_blank">
                                                    {{ $kuliner->no_hp }}
                                                </a>

                                            </p>
                                        </div>
                                    @endif

                                    <!-- Jam Operasional -->
                                    @if (!empty($kuliner->jam_operasional))
                                        @php
                                            $jamOperasional = json_decode($kuliner->jam_operasional, true);
                                        @endphp
                                        @if (is_array($jamOperasional))
                                            <div>
                                                <h3 class="text-xl font-semibold text-gray-600">Jam Operasional</h3>
                                                <ul class="space-y-2">
                                                    @foreach ($jamOperasional as $jam)
                                                        <li class="flex">
                                                            <span
                                                                class="w-28 font-medium text-gray-600">{{ ucfirst($jam['hari']) }}:</span>
                                                            <span class="text-gray-500">
                                                                @if ($jam['buka'] == '00:00' && $jam['tutup'] == '00:00')
                                                                    <span class="text-green-600">24 Jam</span>
                                                                @elseif($jam['buka'] && $jam['tutup'])
                                                                    <span
                                                                        class="text-green-600">{{ $jam['buka'] }}</span>
                                                                    <span class="text-gray-400">-</span>
                                                                    <span
                                                                        class="text-red-500">{{ $jam['tutup'] }}</span>
                                                                @else
                                                                    <span class="text-red-500">Tutup</span>
                                                                @endif
                                                            </span>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif
                                    @endif


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

                    </div>
                </div>
            </div>
        @endforeach

        <!-- Modal Kuliner Fullscreen For Image -->
        <div id="imageModal" class="hidden fixed inset-0 z-[999] bg-black bg-opacity-90 items-center justify-center">

            <button type="button"
                class="absolute top-4 right-4 text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 rounded-lg text-sm p-2.5 inline-flex items-center z-50"
                id="closeModalBtn">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
            <img id="modalImage" src="" class="max-h-screen max-w-screen object-contain rounded-lg"
                alt="Preview Gambar">
        </div>
        {{-- JS Untuk Modal --}}
        <script>
            // Untuk semua tombol yang punya class 'open-image-modal'
            document.querySelectorAll('.open-image-modal').forEach(button => {
                button.addEventListener('click', () => {
                    const src = button.getAttribute('data-src');
                    const modal = document.getElementById('imageModal');
                    const modalImg = document.getElementById('modalImage');

                    // Set gambar dan tampilkan modal
                    modalImg.src = src;
                    modal.classList.remove('hidden'); // Hilangkan hidden
                    modal.classList.add('flex'); // Tambahkan flex supaya tampil
                });
            });

            // Tombol untuk menutup modal
            document.getElementById('closeModalBtn').addEventListener('click', () => {
                const modal = document.getElementById('imageModal');
                const modalImg = document.getElementById('modalImage');

                modal.classList.add('hidden'); // Sembunyikan lagi
                modal.classList.remove('flex'); // Hilangkan flex
                modalImg.src = ''; // Kosongkan gambar
            });

            // Klik area luar gambar untuk menutup modal
            document.getElementById('imageModal').addEventListener('click', (e) => {
                // Pastikan yang diklik adalah area gelap, bukan gambar atau tombol
                if (e.target.id === 'imageModal') {
                    const modal = e.currentTarget;
                    const modalImg = document.getElementById('modalImage');

                    modal.classList.add('hidden');
                    modal.classList.remove('flex');
                    modalImg.src = '';
                }
            });
        </script>


        <div class="mb-4 pt-10 ">
            <p class="text-2xl 2xl:text-4xl font-bold pb-2 text-[#004165] font-fjalla">Event Yang Akan Datang</p>
            <h5 class="pl-0 text-gray-500 font-poppins">Berikut adalah event yang akan datang saat ini</h5>
        </div>


        {{-- EVENT --}}
        @if ($data->events->isNotEmpty())
            <div class="w-full pt-4 pb-4 mb-8">
                <div class="swiper eventSwiper w-full h-auto">
                    <div class="swiper-wrapper">
                        @foreach ($data->events as $event)
                            @if ($event->is_temporer == 0 || ($event->is_temporer == 1 && $event->event_berakhir > now()))
                                <div class="swiper-slide flex items-center justify-center cursor-pointer">
                                    <div data-modal-target="img-event-{{ $event->id }}"
                                        data-modal-toggle="img-event-{{ $event->id }}"
                                        class="relative block w-full">
                                        <!-- Gambar Event dengan Aspect Ratio 3:4 -->
                                        <img src="{{ asset('storage/' . $event->img) }}"
                                            class="aspect-[3/4] w-full object-cover rounded-lg transition-all duration-300 filter"
                                            alt="{{ $event->nama_event ?? 'Event Image' }}">

                                        <!-- Overlay Blur di Bagian Bawah -->
                                        <div
                                            class="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-black/100 via-black/50 to-transparent backdrop-blur- rounded-b-lg">
                                        </div>

                                        <!-- Nama Event di Tengah -->
                                        <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2">
                                            <p
                                                class="text-white text-center font-fjalla uppercase font-semibold text-lg md:text-xl lg:text-3xl px-4 py-2">
                                                {{ $event->nama_event }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>

                    <!-- Pagination -->
                    <div class="swiper-pagination"></div>

                    <!-- Navigation -->
                    <div class="swiper-button-next">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                    <div class="swiper-button-prev">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                </div>
            </div>

            <!-- Swiper Script -->
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    new Swiper(".eventSwiper", {
                        slidesPerView: 2, // Default untuk mobile
                        spaceBetween: 10,
                        loop: true,
                        autoplay: {
                            delay: 5000,
                            disableOnInteraction: false,
                        },
                        pagination: {
                            el: ".swiper-pagination",
                            clickable: true,
                        },
                        navigation: {
                            nextEl: ".swiper-button-next",
                            prevEl: ".swiper-button-prev",
                        },
                        breakpoints: {
                            640: { // Untuk tablet
                                slidesPerView: 3,
                            },
                            1024: { // Untuk desktop
                                slidesPerView: 4,
                            }
                        },
                        on: {
                            init: function() {
                                // Set gambar agar potongannya berada di tengah
                                const images = document.querySelectorAll('.swiper-slide img');
                                images.forEach(image => {
                                    image.style.objectPosition = 'center';
                                });
                            }
                        }
                    });
                });
            </script>

            <!-- Styling untuk tombol navigasi -->
            <style>
                .swiper-button-next,
                .swiper-button-prev {
                    background-color: rgba(0, 0, 0, 0.5);
                    color: white;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: background-color 0.3s ease;
                }

                .swiper-button-next:hover,
                .swiper-button-prev:hover {
                    background-color: rgba(0, 0, 0, 0.8);
                }

                .swiper-button-next::after,
                .swiper-button-prev::after {
                    display: none;
                }

                .swiper-button-next i,
                .swiper-button-prev i {
                    font-size: 20px;
                }
            </style>
        @else
            <div class="p-10 mb-10 text-center font-bold text-gray-500 rounded border font-poppins">
                Event yang akan datang sedang tidak ada.
            </div>
        @endif




        {{-- MODAL EVENT --}}
        @foreach ($data->events as $event)
            <div id="img-event-{{ $event->id }}" tabindex="-1" aria-hidden="true"
                class="hidden fixed inset-0 z-50 flex justify-center items-center w-full h-full min-h-screen bg-black bg-opacity-50 aspect-[1920/1440]">
                <div
                    class="relative p-4 w-full max-w-2xl max-h-full sm:max-w-3xl md:max-w-4xl lg:max-w-5xl xl:max-w-6xl">
                    <!-- Modal content -->
                    <div class="relative bg-white rounded-lg shadow-sm">
                        <div class="flex items-center justify-between p-4 md:px-5 border-b rounded-t border-gray-200">
                            <h3 class="text-lg md:text-2xl font-semibold text-gray-900 font-poppins">
                                Detail Event
                            </h3>
                            <button type="button"
                                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
                                data-modal-hide="img-event-{{ $event->id }}">
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 14 14">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                                </svg>
                                <span class="sr-only font-poppins">Close modal</span>
                            </button>
                        </div>
                        <div
                            class="grid grid-cols-10 p-4 md:p-5 aspect-[16/14] lg:aspect-[16/9]  md:space-x-5 text-gray-700 break-words">
                            <!-- Left Column: Image -->
                            <div data-modal-target="img-event-detail{{ $event->id }}"
                                data-modal-toggle="img-event-detail{{ $event->id }}"
                                class="w-full hidden lg:block col-span-0 lg:col-span-4 pb-5 cursor-pointer  overflow-hidden">
                                <img src="{{ asset('storage/' . $event->img) }}"
                                    class="w-full h-full object-cover rounded-lg"
                                    alt="{{ $event->nama_event ?? 'Event Image' }}">
                            </div>

                            <!-- Right Column: Event Details -->
                            <div class="w-full col-span-10  lg:col-span-6 lg:p-4 space-y-4  overflow-y-auto">
                                <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 font-poppins leading-snug">
                                    {{ $event->nama_event ?? 'Event Name' }}
                                </h3>

                                <div class="flex lg:hidden bg-blue-400 cursor-pointer items-center justify-center w-fit text-white font-medium py-2 px-4 rounded-lg shadow-md cursor-pointer transition-all duration-300 hover:bg-blue-600"
                                    data-modal-target="img-event-detail{{ $event->id }}"
                                    data-modal-toggle="img-event-detail{{ $event->id }}">
                                    <p>Lihat Gambar</p>
                                </div>
                                <p class="text-base sm:text-lg leading-relaxed tracking-wide">
                                    <strong>Deskripsi:</strong> <br>
                                    {{ $event->deskripsi_event ?? '-' }}
                                </p>

                                @if ($event->is_temporer == 1)
                                    <div class="space-y-2 text-sm sm:text-base text-gray-600">
                                        <div class="flex items-start gap-2">
                                            <i class="fas fa-calendar-day text-blue-500 mt-1"></i>
                                            <p><strong>Mulai:</strong>
                                                {{ \Carbon\Carbon::parse($event->event_mulai)->format('d M Y, H:i') }}
                                            </p>
                                        </div>
                                        <div class="flex items-start gap-2">
                                            <i class="fas fa-calendar-day text-red-500 mt-1"></i>
                                            <p><strong>Berakhir:</strong>
                                                {{ \Carbon\Carbon::parse($event->event_berakhir)->format('d M Y, H:i') }}
                                            </p>
                                        </div>
                                    </div>
                                @else
                                    <div class="space-y-2 text-sm sm:text-base text-gray-600">
                                        <strong>Jadwal Mingguan:</strong>
                                        @foreach (['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'] as $day)
                                            @php
                                                $schedule =
                                                    json_decode($event->jadwal_mingguan ?? '{}', true)[$day] ?? null;
                                            @endphp
                                            <div class="flex items-start gap-2">
                                                <i class="fas fa-clock text-gray-500 mt-1"></i>
                                                <p><strong>{{ $day }}:</strong>
                                                    @if ($schedule === null || ($schedule['mulai'] === null && $schedule['akhir'] === null))
                                                        Tutup
                                                    @elseif ($schedule['mulai'] == '00:00' && $schedule['akhir'] == '00:00')
                                                        24 Jam
                                                    @else
                                                        Mulai: {{ $schedule['mulai'] }} - Selesai:
                                                        {{ $schedule['akhir'] }}
                                                    @endif
                                                </p>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif

                                <div class="flex items-center gap-2 text-lg sm:text-xl font-poppins">
                                    <i class="fas fa-ticket-alt text-gray-800"></i>
                                    <span><strong>HTM:</strong>
                                        <span class="font-extrabold text-gray-900">
                                            Rp{{ number_format($event->htm_event, 0, ',', '.') }}
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach

        @forelse ($data->events as $event)
            {{-- id="static-modal" data-modal-backdrop="static" tabindex="-1" aria-hidden="true" --}}
            <div id="img-event-detail{{ $event->id }}" data-modal-backdrop="static" tabindex="-1"
                aria-hidden="true"
                class="hidden fixed inset-0 z-[999] bg-black bg-opacity-90 items-center justify-center">
                <!-- Close Button -->
                <button type="button"
                    class="absolute top-4 right-4 text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 rounded-lg text-sm p-2.5 inline-flex items-center z-50"
                    data-modal-hide="img-event-detail{{ $event->id }}" aria-hidden="true">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>

                <!-- Modal Image -->
                <img src="{{ asset('storage/' . $event->img) }}"
                    class="max-h-screen max-w-screen object-contain rounded-lg"
                    alt="{{ $event->nama_event ?? 'Event Image' }}">
            </div>
        @empty
        @endforelse



        {{-- Wisata lain --}}
        <div class="pb-10">
            <div class="py-4">
                <p class="text-2xl 2xl:text-4xl font-bold pb-2 text-[#004165] font-fjalla ">Wisata Lainnya</p>
                <h5 class="pl-0 text-gray-500 font-poppins">Berikut adalah beberapa rekomendasi wisata saat ini</h5>
            </div>

            <div class="grid xl:grid-cols-4 grid-cols-2 gap-4 xl:gap-8">
                @foreach ($lainnya as $filter)
                    <a href="{{ route('profilWisata.index', $filter->nama_wisata) }}"
                        class="shadow-xl shadow-slate-400 bg-white flex justify-between flex-col h-auto w-auto border-slate-500 rounded-lg
                                                                                                                                        transition-transform duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl hover:shadow-slate-400">
                        <div>
                            <img class="object-cover w-full aspect-[1080/540] rounded-t-xl"
                                src="{{ $filter->img ? asset('storage/' . $filter->img) : asset('images/placeholder.png') }}"
                                alt="{{ $filter->nama_wisata }}" />
                            <div class="w-auto h-auto pt-2 px-4 pb-4">
                                <p class="text-black font-bold text-md">{{ $filter->nama_wisata }}</p>
                                <p class="text-black text-sm">
                                    {{ $filter->kategori_detail->nama_kategori_detail ?? 'Kategori Tidak Tersedia' }}
                                    {{ $filter->kategori_detail->kategori->nama_kategori ?? '' }}
                                </p>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

        </div>
    </div>











</x-layout>
