@extends('frontend.v2.layout.app')
@section('title', $title)

@section('content')
<div class="container-fluid">
    
    <!-- Gallery List -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow border">
                <div class="card-header bg-white">
                    <h4 class="mb-0">Gallery List</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        @forelse($galleries as $gallery)
                            <div class="col-md-3">
                                <div class="card mb-3">

                                    <!-- Button to Open Modal -->
                                    <button type="button" class="btn p-0 border-0" data-bs-toggle="modal" data-bs-target="#galleryModal{{ $gallery->id }}">
                                        <img src="{{ asset($gallery->image_path) }}" class="card-img-top" alt="{{ $gallery->title }}" style="height:200px; object-fit:cover;">
                                    </button>

                                    <div class="card-body">
                                        <h5 class="card-title text-center">{{ $gallery->title }}</h5>
                                    </div>
                                </div>
                            </div>

                            <!-- Modal -->
                            <div class="modal fade" id="galleryModal{{ $gallery->id }}" tabindex="-1" aria-labelledby="galleryModalLabel{{ $gallery->id }}" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-body p-0">
                                            <img src="{{ asset($gallery->image_path) }}" alt="{{ $gallery->title }}" class="img-fluid w-100">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        @empty
                            <div class="col-12">
                                <p class="text-center text-muted">No gallery items found.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection