@extends('layouts.frontend')

@section('title', 'Nos moments')

@section('content')
<!-- Header -->
<section class="hero-section">
    <div class="container text-center">
        <h1 class="display-4 fw-bold mb-4">Notre Galerie Photos</h1>
        <p class="lead mb-4">Découvrez notre galerie photo exclusive</p>
        <nav aria-label="fil d'ariane">
            <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none">Accueil</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Galerie</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Gallery Section -->
<section class="gallery-container">
    <div class="container">
        <h2 class="gallery-title">Immergez-vous dans notre univers en images</h2>

       <!-- Gallery Grid -->
        <div class="row g-4" id="gallery-items">
            @foreach($images as $image)
            <!-- Gallery Item 1 -->
            <div class="col-md-6 col-lg-4 gallery-item" data-category="indoor">
                <div class="position-relative">
                     <a href="{{ asset($image->path) }}" data-fancybox="demo-gallery" data-caption="{{ $image->title }}">
                        <img src="{{ asset($image->path) }}" alt="{{ $image->title }}">
                    </a>
                    {{-- <img src="{{ asset($image->path) }}" alt="Plante d'Intérieur" class="img-fluid">
                    <div class="overlay">
                        <div class="overlay-content">
                            <h5>Monstera Deliciosa</h5>
                            <p>Belle plante tropicale d'intérieur</p>
                            <a href="#" class="view-photo text-white"><i class="fas fa-search-plus"></i> Voir</a>
                        </div>
                    </div> --}}
                </div>
            </div>

            @endforeach


        </div>

        <!-- Load More Button -->
        <div class="view-more">
             {{ $images->links() }}
        </div>
    </div>
</section>

<!-- Lightbox -->
<div class="lightbox-overlay">
    <div class="lightbox-content">
        <span class="lightbox-close">&times;</span>
        <img src="" alt="Photo Agrandie" id="lightbox-image">
    </div>
</div>


@endsection

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
@endsection
@section('scripts')
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Fancybox JS -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

 <script>
        $(document).ready(function() {
            // Initialize Fancybox with custom options
            $('[data-fancybox]').fancybox({
                loop: true,
                keyboard: true,
                arrows: true,
                infobar: true,
                toolbar: true,
                protect: true,
                animationEffect: "zoom-in-out",
                animationDuration: 300,
                transitionEffect: "slide",
                transitionDuration: 300
            });
        });
    </script>

@endsection