@extends('layouts.app')
@section('title', 'Fasilitas - ' . ($setting->nama_sekolah ?? 'Nama Sekolah'))
@section('content')
    <section id="fasilitas" class="bg-gray-50 py-20 px-6">
        <div class="max-w-6xl mx-auto text-center" data-aos="fade-up">
            <h2 class="text-3xl font-bold text-blue-700 mb-6">Fasilitas Sekolah</h2>
            <p class="text-gray-600 mb-12 max-w-3xl mx-auto">
                Sekolah kami memiliki berbagai fasilitas yang mendukung kegiatan belajar mengajar agar siswa dapat belajar
                dengan nyaman dan efektif.
            </p>
        </div>

        <div x-data="{
            fasilitas: {{ Js::from($fasilitas) }},
            perPage: 6,
            currentPage: 0,
            animating: false,
            get totalPages() {
                return Math.ceil(this.fasilitas.length / this.perPage);
            },
            nextPage() {
                this.animating = true;
                setTimeout(() => {
                    this.currentPage = (this.currentPage + 1) % this.totalPages;
                    this.animating = false;
                }, 500);
            },
            paginatedItems() {
                let start = this.currentPage * this.perPage;
                return this.fasilitas.slice(start, start + this.perPage);
            }
        }" x-init="setInterval(() => nextPage(), 10000)" class="max-w-6xl mx-auto relative">
            <!-- Grid Fasilitas -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 transition-all duration-700 ease-in-out"
                x-bind:class="{ 'opacity-0 scale-95': animating, 'opacity-100 scale-100': !animating }" data-aos="fade-up"
                data-aos-delay="100">
                <template x-for="(item, index) in paginatedItems()" :key="index">
                    <div
                        class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-lg transition duration-300 transform hover:-translate-y-1">
                        <img :src="'/storage/' + item.image" :alt="item.title" class="w-full h-56 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-semibold text-gray-800 mb-2" x-text="item.title"></h3>
                            <p class="text-gray-600 text-sm text-justify" x-text="item.description"></p>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Indicator -->
            <div class="flex justify-center mt-8 space-x-2">
                <template x-for="(page, i) in totalPages" :key="i">
                    <button @click="currentPage = i" class="w-3 h-3 rounded-full transition-all duration-300"
                        :class="i === currentPage ? 'bg-blue-600 scale-110' : 'bg-gray-300 hover:bg-gray-400'"></button>
                </template>
            </div>
        </div>
    </section>

    {{-- Alpine.js --}}
    <script src="//unpkg.com/alpinejs" defer></script>
@endsection