@extends('layouts.app')
@section('title', 'Prestasi - ' . ($setting->nama_sekolah ?? 'Nama Sekolah'))
@section('content')

    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        /* Style untuk modal (lightbox) */
        .modal {
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 9999; /* Pastikan modal berada di atas konten lain */
            transition: opacity 0.3s ease;
        }
        .modal-content {
            max-width: 90%;
            max-height: 90vh;
            width: auto;
            height: auto;
            object-fit: contain;
            transition: transform 0.3s ease;
            cursor: default;
        }
        .close-btn {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 40px;
            font-weight: bold;
            color: #fff;
            opacity: 0.8;
            transition: opacity 0.2s;
            cursor: pointer;
        }
        .close-btn:hover {
            opacity: 1;
        }
    </style>

    <!-- Prestasi Sekolah -->
    <section id="prestasi" 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">Prestasi Sekolah</h2>
            <p class="text-gray-600 mb-12 max-w-3xl mx-auto">
                Berbagai prestasi telah diraih oleh siswa dan sekolah kami dalam bidang akademik maupun non-akademik.
                Kami bangga atas kerja keras, semangat, dan dedikasi seluruh warga sekolah.
            </p>
        </div>

        <!-- Daftar Prestasi -->
        <div class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8" data-aos="fade-up"
            data-aos-delay="100">
            @forelse ($prestasi as $item)
                <div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
                    {{-- DIUBAH: Tambahkan onclick untuk membuka modal dan kelas cursor-pointer --}}
                    <img src="{{ asset('storage/' . $item->gambar) }}" alt="{{ $item->judul }}"
                        class="w-full h-56 object-cover cursor-pointer hover:opacity-90 transition duration-200"
                        onclick="openModal('{{ asset('storage/' . $item->gambar) }}')">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">{{ $item->judul }}</h3>
                        <p class="text-gray-600 text-sm">{{ $item->keterangan }}</p>
                    </div>
                </div>
            @empty
                <div class="col-span-3 text-center text-gray-500">
                    Belum ada data prestasi yang tersedia.
                </div>
            @endforelse
        </div>

        <!-- ✅ Custom Pagination -->
        @if ($prestasi->hasPages())
            <div class="mt-12 flex justify-center items-center flex-wrap gap-2" data-aos="fade-up">
                {{-- Tombol Previous --}}
                @if ($prestasi->onFirstPage())
                    <span class="px-4 py-2 text-sm font-semibold text-gray-400 bg-gray-200 rounded-lg cursor-not-allowed">
                        « Previous
                    </span>
                @else
                    <a href="{{ $prestasi->previousPageUrl() }}"
                        class="px-4 py-2 text-sm font-semibold text-white bg-blue-700 hover:bg-blue-800 rounded-lg transition">
                        « Previous
                    </a>
                @endif

                {{-- Nomor Halaman --}}
                @foreach ($prestasi->links()->elements[0] ?? [] as $page => $url)
                    @if ($page == $prestasi->currentPage())
                        <span
                            class="px-4 py-2 text-sm font-bold text-white bg-blue-600 rounded-lg shadow">{{ $page }}</span>
                    @else
                        <a href="{{ $url }}"
                            class="px-4 py-2 text-sm font-semibold text-blue-700 bg-blue-100 hover:bg-blue-200 rounded-lg transition">
                            {{ $page }}
                        </a>
                    @endif
                @endforeach

                {{-- Tombol Next --}}
                @if ($prestasi->hasMorePages())
                    <a href="{{ $prestasi->nextPageUrl() }}"
                        class="px-4 py-2 text-sm font-semibold text-white bg-blue-700 hover:bg-blue-800 rounded-lg transition">
                        Next »
                    </a>
                @else
                    <span class="px-4 py-2 text-sm font-semibold text-gray-400 bg-gray-200 rounded-lg cursor-not-allowed">
                        Next »
                    </span>
                @endif
            </div>
        @endif
    </section>

    <!-- Modal (Lightbox) untuk Gambar -->
    <div id="imageModal"
        class="modal fixed inset-0 flex items-center justify-center hidden opacity-0 transition-opacity"
        onclick="closeModal()">
        <!-- Tombol Tutup (Di luar gambar) -->
        <span class="close-btn absolute cursor-pointer">
            &times;
        </span>
        <!-- Konten Gambar Modal -->
        <img id="modalImage" class="modal-content transform scale-90" src="" alt="Gambar Prestasi"
            onclick="event.stopPropagation()">
    </div>

    <script>
        // Fungsi untuk membuka modal
        function openModal(imageSrc) {
            const modal = document.getElementById('imageModal');
            const modalImage = document.getElementById('modalImage');

            // Set sumber gambar
            modalImage.src = imageSrc;

            // Tampilkan modal dengan transisi
            modal.classList.remove('hidden');
            setTimeout(() => {
                modal.classList.remove('opacity-0');
                modalImage.classList.remove('scale-90');
                modalImage.classList.add('scale-100');
            }, 10); // Delay kecil untuk memicu transisi
        }

        // Fungsi untuk menutup modal
        function closeModal() {
            const modal = document.getElementById('imageModal');
            const modalImage = document.getElementById('modalImage');

            // Mulai transisi penutupan
            modal.classList.add('opacity-0');
            modalImage.classList.add('scale-90');
            modalImage.classList.remove('scale-100');

            // Sembunyikan setelah transisi selesai
            setTimeout(() => {
                modal.classList.add('hidden');
                modalImage.src = ""; // Kosongkan sumber gambar
            }, 300); // Sesuaikan dengan durasi CSS transition (0.3s)
        }
        
        // Menambahkan listener untuk menutup modal dengan tombol ESC
        document.addEventListener('keydown', function(e) {
            if (e.key === "Escape" && !document.getElementById('imageModal').classList.contains('hidden')) {
                closeModal();
            }
        });
    </script>
@endsection