<x-layout>
    <div class="py-10 bg-white ">
        <div class="bg-[#EBFEA1] poppins-extrabold m-auto flex items-center justify-center p-2">
            <p>Halaman ini berisi tentang kursus di Pare! </p>
        </div>
    </div>
    <div class="container flex justify-end items-center pb-16">
        <div id="default-carousel" class="relative w-full" data-carousel="slide">
            <!-- Carousel wrapper -->
            <div class="relative h-48 sm:h-[250px] md:h-[350px] lg:h-[450px] xl:h-[500px] 2xl:h-[600px] overflow-hidden rounded-lg">
                @foreach ($imageNames as $index => $imageName)
                    <!-- Item {{ $index + 1 }} -->
                    <div class="{{ $index === 0 ? 'block' : 'hidden' }} duration-700 ease-in-out h-full" data-carousel-item>
                        <img src="{{ asset('storage/logo/' . $imageName) }}"
                            class="absolute block w-full h-full object-cover -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
                            alt="...">
                    </div>
                @endforeach
            </div>


            </div>
            <!-- Slider indicators -->
            <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
                <button type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1"
                    data-carousel-slide-to="0"></button>
                <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2"
                    data-carousel-slide-to="1"></button>
                <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3"
                    data-carousel-slide-to="2"></button>
                <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4"
                    data-carousel-slide-to="3"></button>
                <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 5"
                    data-carousel-slide-to="4"></button>
            </div>
            <!-- Slider controls -->
            <button type="button"
                class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                data-carousel-prev>
                <span
                    class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                    <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" 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="M5 1 1 5l4 4" />
                    </svg>
                    <span class="sr-only">Previous</span>
                </span>
            </button>
            <button type="button"
                class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                data-carousel-next>
                <span
                    class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                    <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" 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>
                    <span class="sr-only">Next</span>
                </span>
            </button>
        </div>
    </div>
    <div class="container">
        <p class="poppins-medium text-3xl text-black py-4">Kampung Inggris LC - Language Center </p>
        <button class="poppins-regular py-2 px-4 bg-[#4F7F81] text-white rounded-xl text-xl shadow-xl">Rute
            Terdekat</button>
        <p class="text-black text-lg py-4 poppins-semibold">Deskripsi</p>
        <p class="poppins-regular text-black text-2xl pb-2 max-w-7xl">
            {{ $data->deskripsi }}
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-20 py-14">
            <div class="max-w-80 space-y-2">

                {{--  Page untuk paket  --}}
{{ strip_tags($data->paket) }}
            </div>
            <div class="max-w-max space-y-2">
                <p class="poppins-semibold text-2xl text-black ">
                    Metode Pembelajaran
                </p>
                <h1 class="popins-reguler text-2xl text-black ">
                    {{ $data->metode }}
                </h1>
                <p class="poppins-semibold text-2xl text-black pt-6">
                    Fasilitas
                </p>
                <h1 class="popins-reguler text-2xl text-black ">
                    {{ $data->fasilitas }}
                </h1>
            </div>
            <div class="max-w-max space-y-2">
                <p class="poppins-semibold text-2xl text-black ">
                    Lokasi
                </p>
                <h1 class="popins-reguler text-2xl text-black ">
                   {{ $data->lokasi }}
                </h1>
            </div>
            </div>
    </div>

</x-layout>
