@extends('layouts.app')

@section('content')
    <div class="container py-5">
        <h2 class="mb-4 text-center fw-bold">Photo Gallery</h2>

        <div class="row g-4">
            @forelse ($photos as $item)
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="card h-100 shadow-sm border-0 gallery-card">
                        <div class="gallery-img-wrap" data-bs-toggle="modal" data-bs-target="#lightbox{{ $item->id }}">
                            <img src="{{ $item->image_url }}" class="card-img-top gallery-img"
                                alt="{{ $item->title ?? 'Gallery Photo' }}" loading="lazy">
                            <div class="gallery-overlay">
                                <i class="fa-solid fa-magnifying-glass"></i>
                            </div>
                        </div>

                        @if($item->title)
                            <div class="card-body text-center" style="background-color: #1c1d46;">
                                <p class="fw-semibold mb-0 text-white">{{ $item->title }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Lightbox Modal --}}
                <div class="modal fade" id="lightbox{{ $item->id }}" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content bg-transparent border-0">
                            <button type="button" class="btn-close btn-close-white ms-auto me-2 mt-2" data-bs-dismiss="modal"></button>
                            <img src="{{ $item->image_url }}" class="img-fluid rounded" alt="{{ $item->title }}">
                            @if($item->title)
                                <p class="text-white text-center mt-2 fs-5">{{ $item->title }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-5">
                    <p class="text-muted fs-5">No photos available yet.</p>
                </div>
            @endforelse
        </div>

        <div class="mt-4 d-flex justify-content-center">
            {{ $photos->links() }}
        </div>
    </div>

    <style>
        .gallery-img-wrap {
            overflow: hidden;
            height: 220px;
            position: relative;
            cursor: pointer;
        }

        .gallery-img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: transform 0.4s ease, filter 0.4s ease;
        }

        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(28, 29, 70, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .gallery-overlay i {
            color: #fff;
            font-size: 2rem;
            transform: scale(0.7);
            transition: transform 0.4s ease;
        }

        .gallery-card {
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }

        .gallery-card:hover {
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
            transform: translateY(-5px);
        }

        .gallery-card:hover .gallery-img {
            transform: scale(1.1);
            filter: brightness(0.9);
        }

        .gallery-card:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-card:hover .gallery-overlay i {
            transform: scale(1);
        }

        #lightbox-modals .modal-content {
            background: transparent;
        }
    </style>
@endsection