@extends('layouts.landing-page.index', ['title' => 'Galeri'])

@section('main')
    <!-- Contact Section -->
    <section id="contact" class="contact section">

        <!-- Section Title -->
        {{-- <div class="container section-title mt-5" data-aos="fade-up">
    <h2>Kontak</h2>
    <p>Galeri</p>
  </div> --}}
        <!-- End Section Title -->

        <div class="container mt-5" data-aos="fade-up" data-aos-delay="100">

            <!-- Toolbar -->
            <form method="GET" action="{{ route('gallery.search') }}" class="row g-2 align-items-center mb-4">
                <input type="hidden" name="category"  value="{{ request('category', '') }}">
                <div class="col-12 col-md-7">
                    <div class="search-wrapper shadow-sm">
                        <i class="bi bi-search"></i>
                        <!-- Added 'name' attribute for query parameter -->
                        <input type="text" name="search" class="search-input" placeholder="Cari..."
                            value="{{ request('search') }}">
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="sort-wrapper shadow-sm">
                        <i class="bi bi-filter"></i>
                        <!-- Added 'name' attribute for query parameter -->
                        <select class="sort-select" name="sort">
                            <option value="terbaru" {{ request('sort') == 'terbaru' ? 'selected' : '' }}>Terbaru</option>
                            <option value="terlama" {{ request('sort') == 'terlama' ? 'selected' : '' }}>Terlama</option>
                            <option value="az" {{ request('sort') == 'az' ? 'selected' : '' }}>Judul A - Z</option>
                            <option value="za" {{ request('sort') == 'za' ? 'selected' : '' }}>Judul Z - A</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2 col-12">
                    <button type="submit" class="btn btn-outline-primary w-100">
                        <i class="bi bi-search"></i> Cari
                    </button>
                </div>
            </form>

            <!-- Or simpler version -->
            <form method="GET" action="{{ route('gallery.search') }}" id="categoryFilterForm" class="d-none">
                <input type="hidden" name="search" id="searchInput" value="{{ request('search', '') }}">
                <input type="hidden" name="sort" id="sortInput" value="{{ request('sort', '') }}">
                <input type="hidden" name="category" id="categoryInput" value="{{ request('category', '') }}">
            </form>

            <!-- Filter Category Buttons -->
            <div class="mb-4 d-flex gap-2 flex-wrap">
                <button class="filter-btn {{ !request('category') ? 'active' : '' }}" onclick="filterByCategory('')">
                    Semua
                </button>
                @foreach ($categories as $category)
                    <button class="filter-btn {{ request('category') == $category->name ? 'active' : '' }}"
                        onclick="filterByCategory('{{ $category->name }}')">
                        {{ $category->name }}
                    </button>
                @endforeach
            </div>

            <!-- Gallery Grid -->
            <div class="row g-3">

                @foreach ($galleries as $gallery)
                    <div class="col-6 col-md-4 col-xl-3 gallery-item" data-category="event">
                        <div class="gallery-card" data-bs-toggle="modal" data-bs-target="#galleryModal"
                            onclick="openGallery(this)" data-title="{{ $gallery->title }}"
                            data-category="{{ $gallery->category_name }}" data-images='@json(collect([asset("storage/{$gallery->thumbnail_image_path}")])->merge($gallery->list_photos->map(fn($p) => asset("storage/{$p->photo}")))->values())'>
                            <img src="{{ asset('storage') }}/{{ $gallery->thumbnail_image_path }}" class="gallery-img">
                            <div class="gallery-body">
                                <div class="gallery-title">{{ $gallery->title }}</div>
                                <div class="gallery-category">{{ $gallery->category_name }}</div>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>

        <div class="modal fade" id="galleryModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content bg-transparent border-0">

                    <div class="modal-body">
                        <h5 id="galleryTitle" class="text-white mb-1"></h5>
                        <p id="galleryCategory" class="text-white-50 mb-3"></p>

                        <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-inner" id="carouselInner"></div>

                            <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel"
                                data-bs-slide="prev">
                                <span class="carousel-control-prev-icon"></span>
                            </button>

                            <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel"
                                data-bs-slide="next">
                                <span class="carousel-control-next-icon"></span>
                            </button>
                        </div>

                        <div class="row">
                            <div class="col-md-12 text-end">
                                <button type="button" class="btn close-modal-btn mt-5" data-bs-dismiss="modal">X Tutup
                                    Galeri</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>


    </section><!-- /Contact Section -->
@endsection

@push('styles')
    <style>
        /* Toolbar */
        .search-wrapper,
        .sort-wrapper {
            position: relative;
            background: #fff;
            border-radius: 50px;
            padding: 10px 18px 10px 44px;
            border: 1px solid #eee;
            transition: 0.3s;
        }

        .search-wrapper:focus-within,
        .sort-wrapper:focus-within {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 4px rgba(201, 164, 76, .2);
        }

        .search-wrapper i,
        .sort-wrapper i {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent-color);
        }

        .search-input,
        .sort-select {
            border: none;
            outline: none;
            width: 100%;
            background: transparent;
            font-size: 14px;
        }

        .sort-select {
            appearance: none;
            cursor: pointer;
        }

        /* Filter Category */
        .filter-btn {
            border-radius: 30px;
            padding: 6px 16px;
            font-size: 13px;
            border: 1px solid #ddd;
            background: #fff;
            cursor: pointer;
            transition: .3s;
        }

        .filter-btn.active,
        .filter-btn:hover {
            background: var(--accent-color);
            color: #fff;
            border-color: var(--accent-color);
        }

        /* Gallery Card */
        .gallery-card {
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            cursor: pointer;
            transition: .3s;
            height: 100%;
        }

        .gallery-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
        }

        .gallery-img {
            height: 220px;
            width: 100%;
            object-fit: cover;
        }

        .gallery-body {
            padding: 12px;
        }

        .gallery-title {
            font-size: 14px;
            font-weight: 600;
            line-height: 1.4;
            color: var(--dark);
        }

        .gallery-category {
            font-size: 12px;
            color: #888;
        }

        /* Modal */
        .modal-img {
            width: 100%;
            border-radius: 12px;
        }

        @media (max-width: 768px) {
            .gallery-img {
                height: 160px;
            }
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            filter: invert(1)
        }

        .carousel-control-prev,
        .carousel-control-next {
            background-color: white;
            width: 50px;
        }

        .modal-content {
            backdrop-filter: blur(6px);
        }

        .close-modal-btn {
            color: white;
            background: var(--accent-color);
            border: 0;
            padding: 10px 30px;
            transition: 0.4s;
            border-radius: 4px;
        }

        .close-modal-btn:hover {
            background: color-mix(in srgb, var(--accent-color), transparent 20%);
        }
    </style>
@endpush

@push('scripts')
    <script>
        function filterByCategory(categoryValue) {
            // Update active button
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });

            // Set value to hidden input
            document.getElementById('categoryInput').value = categoryValue;

            // Submit form
            document.getElementById('categoryFilterForm').submit();
        }
    </script>
    <script>
        function openGallery(el) {
            const title = el.dataset.title;
            const category = el.dataset.category;
            const images = JSON.parse(el.dataset.images);

            document.getElementById('galleryTitle').innerText = title;
            document.getElementById('galleryCategory').innerText = category;

            const carouselInner = document.getElementById('carouselInner');
            carouselInner.innerHTML = '';

            images.forEach((img, index) => {
                carouselInner.insertAdjacentHTML('beforeend', `
            <div class="carousel-item ${index === 0 ? 'active' : ''}">
                <img src="${img}"
                     class="d-block w-100 rounded-3"
                     style="max-height:75vh;object-fit:contain;">
            </div>
        `);
            });
        }
    </script>
@endpush