@extends('layouts.app')

@section('title', 'Galeri Foto - IAINU SUMSEL')

@section('content')
<div x-data="{ open: false, imageUrl: '' }" class="bg-white py-16 lg:py-20">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h1 class="text-3xl lg:text-4xl font-bold text-green-800">Galeri Kegiatan Kampus</h1>
            <p class="mt-2 text-lg text-gray-600">Momen dan kegiatan di IAINU Sumatera Selatan.</p>
        </div>

        <div class="space-y-12">
            @forelse ($albums as $album)
                <div class="p-4 md:p-6 border rounded-lg shadow-sm">
                    <h2 class="text-2xl font-bold text-gray-800 mb-4">{{ $album->judul }}</h2>
                    <p class="text-gray-600 mb-6">{{ $album->keterangan }}</p>
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                        @foreach ($album->gambar as $foto)
                            <div class="overflow-hidden rounded-lg cursor-pointer" @click="open = true; imageUrl = '{{ asset('storage/' . $foto) }}'">
                                <img src="{{ asset('storage/' . $foto) }}" alt="{{ $album->judul }}" class="w-full h-48 object-cover rounded-lg shadow-md hover:scale-105 transition-transform duration-300">
                            </div>
                        @endforeach
                    </div>
                </div>
            @empty
                <div class="text-center py-10">
                    <p class="text-gray-500 text-xl">Belum ada foto di galeri.</p>
                </div>
            @endforelse
        </div>
    </div>

    {{-- Kode untuk Modal Popup Gambar --}}
    <div x-show="open" @click.away="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 p-4" style="display: none;">
        <div class="relative max-w-4xl max-h-full">
            <img :src="imageUrl" alt="Zoomed Image" class="w-auto h-auto max-w-full max-h-[90vh] rounded-lg">
            <button @click="open = false" class="absolute -top-4 -right-4 bg-white rounded-full p-1 text-gray-800 hover:bg-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
    </div>

</div>
@endsection