@extends('layouts.app')
@section('title', 'Galeri - ' . ($setting->nama_sekolah ?? 'Nama Sekolah'))
@section('content')
    <!-- Galeri -->
    <section id="galeri" class="bg-gray-50 py-20 px-6" data-aos="fade-up">
        <div class="max-w-6xl mx-auto text-center">
            <h2 class="text-3xl font-bold text-blue-700 mb-10">Galeri Sekolah</h2>

            @if ($galeri->count() > 0)
                <!-- Grid Galeri -->
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                    @foreach ($galeri as $item)
                        <div class="group relative cursor-pointer"
                            onclick="openModal('{{ asset('storage/' . $item->image) }}', '{{ $item->title }}')">
                            <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->title }}"
                                class="rounded-2xl shadow-lg w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105">
                            <p class="mt-3 font-semibold text-gray-700">{{ $item->title }}</p>
                        </div>
                    @endforeach
                </div>

                <!-- ✅ Custom Pagination -->
                @if ($galeri->hasPages())
                    <div class="mt-12 flex justify-center items-center flex-wrap gap-2" data-aos="fade-up">
                        {{-- Tombol Previous --}}
                        @if ($galeri->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="{{ $galeri->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 ($galeri->links()->elements[0] ?? [] as $page => $url)
                            @if ($page == $galeri->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 ($galeri->hasMorePages())
                            <a href="{{ $galeri->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
            @else
                <p class="text-gray-500">Belum ada data galeri.</p>
            @endif
        </div>
    </section>

    <!-- Modal Fullscreen -->
    <div id="modal" class="fixed inset-0 bg-black bg-opacity-90 hidden items-center justify-center z-[9999]"
        onclick="closeModal(event)">
        <div class="max-w-5xl w-full flex flex-col items-center px-4" data-aos="zoom-in">
            <img id="modalImage" src="" alt="Zoomed Image" class="rounded-2xl max-h-[85vh] object-contain">
            <p id="modalTitle" class="text-white text-center mt-4 text-lg font-semibold"></p>
        </div>
    </div>

    <script>
        function openModal(src, title) {
            const modal = document.getElementById('modal');
            document.getElementById('modalImage').src = src;
            document.getElementById('modalTitle').textContent = title;
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            document.body.style.overflow = 'hidden';
        }

        function closeModal(event) {
            if (event.target.id === 'modal') {
                const modal = document.getElementById('modal');
                modal.classList.remove('flex');
                modal.classList.add('hidden');
                document.body.style.overflow = '';
            }
        }
    </script>
@endsection