@extends('layouts.public')
@section('title', 'Galeria')

@section('content')
@include('partials.page-header', ['title' => $settings?->gallery_title ?: 'Galeria'])

<section class="section">
    <div class="container">
        @if($categories->isNotEmpty())
            <div class="d-flex flex-wrap justify-content-center gap-2 mb-5" id="galleryFilters">
                <button type="button" class="filter-btn active" data-filter="all">Todas</button>
                @foreach($categories as $category)
                    <button type="button" class="filter-btn" data-filter="{{ Str::slug($category->name) }}">{{ $category->name }}</button>
                @endforeach
            </div>
        @endif

        @if($images->isEmpty())
            <div class="text-center text-muted py-5">No hay imagenes en la galeria.</div>
        @else
            <div class="row g-3" id="galleryGrid">
                @foreach($images as $image)
                    <div class="col-md-3 col-6 gallery-item-wrap" data-category="{{ $image->category ? Str::slug($image->category) : 'all' }}">
                        <div class="gallery-item" data-src="{{ image_url($image->image) }}" data-title="{{ $image->title ?: $image->category }}">
                            <img src="{{ image_url($image->image) }}" alt="{{ $image->title }}">
                            <div class="caption">
                                <div>
                                    @if($image->title)<div class="fw-semibold small">{{ $image->title }}</div>@endif
                                    @if($image->category)<div class="small text-white-50">{{ $image->category }}</div>@endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>
@endsection

@push('scripts')
<script>
    document.querySelectorAll('#galleryFilters .filter-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.querySelectorAll('#galleryFilters .filter-btn').forEach(function (b) { b.classList.remove('active'); });
            btn.classList.add('active');
            var filter = btn.getAttribute('data-filter');
            document.querySelectorAll('#galleryGrid .gallery-item-wrap').forEach(function (wrap) {
                var cat = wrap.getAttribute('data-category') || 'all';
                wrap.style.display = (filter === 'all' || cat === filter) ? '' : 'none';
            });
        });
    });
</script>
@endpush