@extends('public.layouts.guest')

@section('title', 'Gallery — ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO'))
@section('nav_gallery', 'text-teal-700 font-semibold')

@section('content')

<div class="bg-gradient-to-br from-teal-700 to-teal-900 py-16">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 text-center">
        <p class="text-teal-300 text-xs font-semibold tracking-[0.2em] uppercase mb-2">Our Property</p>
        <h1 class="text-4xl font-bold text-white">Photo Gallery</h1>
        <p class="text-teal-200 mt-3 text-sm">A glimpse of what awaits you at Parkview Hotel CDO.</p>
    </div>
</div>

<div class="py-16 bg-gray-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">

        @if($photos->count())
        <div x-data="{ lightbox: null, photos: {{ $photos->map(fn($p) => \Illuminate\Support\Facades\Storage::url($p->path))->toJson() }} }"
             class="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4">
            @foreach($photos as $i => $photo)
            <div class="break-inside-avoid cursor-pointer group rounded-2xl overflow-hidden"
                 @click="lightbox = {{ $i }}">
                <img src="{{ \Illuminate\Support\Facades\Storage::url($photo->path) }}"
                     alt="{{ $photo->caption ?? 'Gallery photo' }}"
                     class="w-full object-cover group-hover:scale-105 transition-transform duration-500">
                @if($photo->caption)
                <div class="p-3 bg-white text-xs text-gray-500">{{ $photo->caption }}</div>
                @endif
            </div>
            @endforeach

            {{-- Lightbox --}}
            <div x-show="lightbox !== null" x-cloak
                 class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
                 @click.self="lightbox = null" @keydown.escape.window="lightbox = null">
                <button @click="lightbox = null" class="absolute top-4 right-4 text-white/60 hover:text-white transition-colors">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
                <button @click="lightbox = (lightbox - 1 + photos.length) % photos.length"
                        class="absolute left-4 text-white/60 hover:text-white p-2">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                </button>
                <img :src="photos[lightbox]" class="max-h-[85vh] max-w-full rounded-xl object-contain">
                <button @click="lightbox = (lightbox + 1) % photos.length"
                        class="absolute right-4 text-white/60 hover:text-white p-2">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </button>
            </div>
        </div>
        @else
        <div class="text-center py-24">
            <div class="w-20 h-20 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg class="w-10 h-10 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-700 mb-2">Gallery Coming Soon</h3>
            <p class="text-gray-400 text-sm">Photos will be uploaded by our team shortly.</p>
        </div>
        @endif
    </div>
</div>

@endsection