@extends('layouts.main')

@section('title', 'Galeri | PPNI DPK BaliMéd')
@section('meta_description', 'Galeri dokumentasi kegiatan PPNI DPK Rumah Sakit BaliMéd Denpasar.')
@section('og_title', 'Galeri | PPNI DPK BaliMéd')
@section('og_description', 'Galeri dokumentasi kegiatan PPNI DPK Rumah Sakit BaliMéd Denpasar.')
@section('og_image', asset('assets/images/logo-ppni.png'))

@section('content')
<section class="bg-gradient-to-r from-blue-950 via-blue-900 to-blue-700 text-white">
    <div class="max-w-7xl mx-auto px-4 py-20">
        <p class="text-blue-200 font-semibold mb-3">Dokumentasi Organisasi</p>
        <h1 class="text-4xl md:text-5xl font-extrabold mb-4">Galeri</h1>
        <p class="text-lg text-blue-100 max-w-3xl leading-8">
            Dokumentasi kegiatan, rapat, pelatihan, dan aktivitas organisasi PPNI DPK Rumah Sakit BaliMéd Denpasar.
        </p>
    </div>
</section>

<section class="max-w-7xl mx-auto px-4 py-14 sm:py-16">
    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
        @forelse($galleries as $gallery)
            <button
                type="button"
                class="group bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-100 text-left"
                onclick="openLightbox('{{ asset($gallery->image) }}', @js($gallery->title), @js($gallery->description))"
            >
                <div class="relative overflow-hidden">
                    <img src="{{ asset($gallery->image) }}"
                         alt="{{ $gallery->title }}"
                         class="w-full h-44 sm:h-52 object-cover transition duration-300 group-hover:scale-105">
                    <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition"></div>
                </div>

                <div class="p-4">
                    <h3 class="font-bold text-slate-800 line-clamp-2 mb-1">{{ $gallery->title }}</h3>
                    @if($gallery->description)
                        <p class="text-sm text-slate-500 line-clamp-2">
                            {{ \Illuminate\Support\Str::limit(strip_tags($gallery->description), 70) }}
                        </p>
                    @endif
                </div>
            </button>
        @empty
            <div class="col-span-2 md:col-span-3 xl:col-span-4 text-center text-slate-500">
                Belum ada dokumentasi galeri.
            </div>
        @endforelse
    </div>

    <div class="mt-8">
        {{ $galleries->links() }}
    </div>
</section>

<!-- Lightbox -->
<div id="lightbox"
     class="fixed inset-0 z-[100] hidden bg-black/80 backdrop-blur-sm p-4 sm:p-6">
    <div class="absolute inset-0" onclick="closeLightbox()"></div>

    <div class="relative max-w-5xl mx-auto h-full flex items-center justify-center">
        <div class="relative bg-white rounded-3xl overflow-hidden shadow-2xl max-h-full w-full">
            <button
                type="button"
                onclick="closeLightbox()"
                class="absolute top-3 right-3 z-10 bg-white/90 hover:bg-white text-slate-800 w-10 h-10 rounded-full shadow flex items-center justify-center text-xl"
            >
                ✕
            </button>

            <div class="grid lg:grid-cols-3">
                <div class="lg:col-span-2 bg-slate-100">
                    <img id="lightboxImage"
                         src=""
                         alt=""
                         class="w-full h-[320px] sm:h-[420px] lg:h-[620px] object-contain bg-slate-100">
                </div>

                <div class="p-6 lg:p-8 overflow-y-auto">
                    <h2 id="lightboxTitle" class="text-2xl font-extrabold text-blue-900 mb-4"></h2>
                    <div id="lightboxDesc" class="text-slate-600 leading-8 whitespace-pre-line"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .line-clamp-2{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
</style>

<script>
    function openLightbox(image, title, desc) {
        document.getElementById('lightboxImage').src = image;
        document.getElementById('lightboxTitle').textContent = title || 'Galeri';
        document.getElementById('lightboxDesc').textContent = desc || 'Dokumentasi kegiatan.';
        document.getElementById('lightbox').classList.remove('hidden');
        document.body.classList.add('overflow-hidden');
    }

    function closeLightbox() {
        document.getElementById('lightbox').classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
    }

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeLightbox();
    });
</script>
@endsection