@extends('frontend.layouts.app')

@push('style')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
    <style>
        .gallery-item {
            transition: transform 0.3s ease-in-out;
        }

        .gallery-item:hover {
            transform: scale(1.05);
        }

        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

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

        .gallery-overlay i {
            transition: transform 0.2s ease-in-out;
        }

        .gallery-item:hover .gallery-overlay i {
            transform: scale(1.3);
        }
    </style>
@endpush

@section('content')
    <!-- Breadcrumb -->
    <div class="container-fluid page-header-modern">
        <div class="container">
            <h1>Gallery</h1>
            <ol class="breadcrumb breadcrumb-modern">
                <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                <li class="breadcrumb-item">Pages</li>
                <li class="breadcrumb-item active">Gallery</li>
            </ol>
        </div>
    </div>

    <!-- Gallery Section -->
    <div class="container-fluid py-5">
        <div class="container">
            <div class="text-center mb-5 wow fadeInUp" data-wow-delay="0.2s">
                <h4 class="text-primary">Photo Showcase</h4>
                <h1 class="display-5 mb-3">Explore Our Captured Moments</h1>
                <p>Take a look at some of the beautiful moments we've captured through our work and events.</p>
            </div>

            <div class="row g-4 wow fadeInUp" data-wow-delay="0.4s">
                @foreach ($items as $item)
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <div class="gallery-item position-relative overflow-hidden rounded shadow-sm">
                            <a href="{{ getImage('gallary', $item->image) }}"
                               data-lightbox="gallery-group"
                               data-title="{{ $item->title ?? 'Gallery Image' }}">
                                <img src="{{ getImage('gallary', $item->image) }}"
                                     class="img-fluid w-100"
                                     alt="Gallery Image">
                                <div class="gallery-overlay d-flex align-items-center justify-content-center">
                                    <i class="fa fa-search-plus text-white fa-2x"></i>
                                </div>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
    <script>
        lightbox.option({
            'resizeDuration': 200,
            'wrapAround': true,
            'fadeDuration': 300,
            'imageFadeDuration': 300,
            'showImageNumberLabel': false
        })
    </script>
@endpush