@extends('layout.master')

@section('title', 'Galeri')

@push('css')
    <style>
        /* Minimal page-specific tweaks if any, rest in style.css */
        .img-responsive {
            width: auto;
            height: 10em;
        }

        img {
            display: revert !important;
        }
    </style>   
@endpush

@section('content')
<div class="page-header">
    <h5 class="page-title">Galeri {{ request()->year ? request()->year : '' }}</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('laman_utama') }}">Laman Utama</a></li>
            <li class="breadcrumb-item {{ request()->year ? '' : 'active' }}">Galeri</li>
            @if(request()->year)
                <li class="breadcrumb-item active">{{ request()->year }}</li>
            @endif
        </ol>
    </nav>
</div>

<section class="section gallery-section">
    <div class="gallery-filter">
        <label for="tahunSelect">Tahun:</label>
        <select class="gallery-select" id="tahunSelect">
            <option value="" {{ !request()->year ? 'selected' : '' }}>Semua</option>
            @foreach ($years as $year)
                <option value="{{ $year }}" {{ (request()->year == $year) ? 'selected' : '' }}>{{ $year }}</option>
            @endforeach
        </select>
    </div>

    <div class="gallery-grid">
        @foreach ($galeris as $galeri)
            <div class="gallery-item modal-btn" data-galeri-id="{{ $galeri->id }}" data-tilt>
                <img src="{{ asset('storage/' . $galeri->thumbnail) }}" alt="{{ $galeri->name }}" loading="lazy" />
                
                <div class="gallery-overlay">
                    <h6 class="gallery-item-name">{{ $galeri->name }}</h6>
                    <div class="gallery-hint">
                        <i class="bi bi-zoom-in me-1"></i> Lihat Album
                    </div>
                </div>
            </div>
        @endforeach
    </div>
        
</section>
@endsection

@section('js')

<script type="text/javascript">
    $('.modal-btn').click(function () {
        var galeriId = $(this).data('galeri-id');
        var galeriName = $(this).find('.gallery-item-name').text();
        
        $.ajax({
            url: "{{ route('get_galeri') }}",
            type: 'POST',
            dataType: 'json',
            data: {
                _token: '{{ csrf_token() }}',
                id : galeriId
            },
            success: function (data) {
                if (data.images && data.images.length > 0) {
                    // Call Global Lightbox API
                    Lightbox.open(0, data.images, galeriName, "{{ asset('storage') }}/");
                }
            },
            error: function (xhr, status, error) {
                console.error("Gagal memuatkan imej:", xhr.responseText);
            }
        });
    });

    $('#tahunSelect').on('change', function() {
        var year = $(this).val();
        var url = "{{ route('galeri') }}";
        if (year) {
            url += "?year=" + year;
        }
        window.location.href = url;
    });
</script>

@endsection