@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<div class="page-header" style="background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); padding: 60px 20px; border-bottom: 1px solid #e9ecef; text-align: center;">
    <h1 class="page-title" style="margin: 0; color: #222; font-weight: 700; font-size: 36px;">Photo Gallery</h1>
    <p style="margin: 10px 0 0 0; color: #666; font-size: 16px;">
        <a href="{{ url('/') }}" style="color: #0170B9; text-decoration: none;">Home</a> / <span style="color: #666;">Photo Gallery</span>
    </p>
</div>

<div style="max-width: 1200px; margin: 60px auto; padding: 0 20px;">
    <div class="photo-grid">
        @forelse($photos as $photo)
            <div style="border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); background: #fff;">
                <a href="{{ asset('storage/' . $photo->image) }}" class="glightbox" data-gallery="photo-gallery" data-title="{{ $photo->title }}" data-description="{{ $photo->title }}">
                    <div style="overflow: hidden;">
                        <img src="{{ asset('storage/' . $photo->image) }}" alt="{{ $photo->title }}" style="width: 100%; height: 250px; object-fit: cover; transition: transform 0.4s ease; cursor: zoom-in; display: block;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
                    </div>
                </a>
                @if($photo->title)
                    <div style="padding: 18px 20px; background: #ffffff; text-align: center; border-top: 3px solid #0170B9; position: relative; z-index: 2; box-shadow: 0 -4px 10px rgba(0,0,0,0.02);">
                        <h4 style="margin: 0; font-size: 17px; font-weight: 600; color: #222; letter-spacing: 0.5px; line-height: 1.4;">{{ $photo->title }}</h4>
                        <div style="width: 40px; height: 3px; background: #4dd0e1; margin: 10px auto 0; border-radius: 2px;"></div>
                    </div>
                @endif
            </div>
        @empty
            <div style="grid-column: 1 / -1; text-align: center; padding: 50px; color: #888; font-size: 18px;">
                No photos found in the gallery.
            </div>
        @endforelse
    </div>
</div>

<style>
    .photo-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    @media (max-width: 991px) {
        .photo-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 768px) {
        .photo-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 576px) {
        .photo-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
        .page-header {
            padding: 100px 20px 40px 20px !important;
        }
        .page-title {
            font-size: 28px !important;
        }
    }
</style>
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const lightbox = GLightbox({
            selector: '.glightbox',
            touchNavigation: true,
            loop: true,
            zoomable: true
        });
    });
</script>
<div class="elementor elementor-12">
    @include('layouts.footer')
</div>
@endsection