@extends('layouts.customer')

@section('title', $title)
@section('meta_description', $metaDescription)

@section('content')

{{-- ===== BANNER ATAS (Carousel + Navbar) ===== --}}
<div class="category-hero-wrapper position-relative">
    @if ($bannerAtas->isNotEmpty())
        <div id="bannerAtasCarousel" class="carousel slide category-hero-carousel" data-bs-ride="carousel">
            <div class="carousel-inner">
                @foreach ($bannerAtas as $i => $b)
                    <div class="carousel-item {{ $i === 0 ? 'active' : '' }}"
                        style="background-image: url('{{ $b->gambar ? img_src($b->gambar) : '' }}');">
                        <div class="category-hero-overlay"></div>
                        <div class="container-fluid container-wide category-hero-caption">
                            <h2 class="category-hero-title mb-2">{{ $b->judul }}</h2>
                            <div class="category-hero-desc col-12 col-lg-6">{!! $b->deskripsi !!}</div>
                        </div>
                    </div>
                @endforeach
            </div>
            @if ($bannerAtas->count() > 1)
                <div class="category-hero-indicators carousel-indicators">
                    @foreach ($bannerAtas as $i => $b)
                        <button type="button" data-bs-target="#bannerAtasCarousel" data-bs-slide-to="{{ $i }}"
                            class="{{ $i === 0 ? 'active' : '' }}" aria-current="{{ $i === 0 ? 'true' : 'false' }}"></button>
                    @endforeach
                </div>
            @endif
        </div>
    @else
        <div class="category-hero-carousel category-hero-empty"></div>
    @endif
</div>

{{-- ===== SIDEBAR FILTER + GRID PRODUK ===== --}}
<section class="py-5">
    <div class="container-fluid container-wide">
        <div class="row g-4">
            <div class="col-lg-3">
                <div class="kategori-filter-box sticky-top" style="top: 100px;">
                    <h6 class="fw-bold mb-3" style="color:#1e3a5f;">Kategori</h6>
                    <div class="d-flex flex-column gap-2" id="kategoriFilterList">
                        @foreach ($kategoriList as $kat)
                            <button type="button"
                                class="filter-kategori-btn {{ (string) $selectedKategoriId === (string) $kat->idkategori ? 'active-filter' : '' }}"
                                data-id="{{ $kat->idkategori }}">
                                {{ $kat->nama }}
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="col-lg-9">
                 {{-- Filter harga & urutkan disembunyikan dulu, belum berfungsi
                <div class="d-flex justify-content-end gap-2 mb-4">
                    <div class="dropdown">
                        <button class="btn btn-filter-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                            Filter <i class="fas fa-filter ms-1"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end p-3" style="min-width: 280px;">
                            <label class="small fw-bold mb-2 d-block">Range Harga</label>
                            <div class="d-flex gap-2 mb-3">
                                <input type="number" id="filterHargaMin" class="form-control form-control-sm" placeholder="Min">
                                <input type="number" id="filterHargaMax" class="form-control form-control-sm" placeholder="Max">
                            </div>
                            <label class="small fw-bold mb-2 d-block">Urutkan</label>
                            <select id="filterSort" class="form-control form-control-sm mb-3">
                                <option value="">Default</option>
                                <option value="harga_asc">Harga Termurah</option>
                                <option value="harga_desc">Harga Termahal</option>
                                <option value="nama_asc">Nama A-Z</option>
                                <option value="nama_desc">Nama Z-A</option>
                            </select>
                            <button type="button" id="btnApplyFilter" class="btn btn-primary btn-sm w-100 rounded-pill">Terapkan</button>
                        </div>
                    </div>
                </div>
                    {{-- (Short by popular disembunyikan) <button class="btn btn-filter-pill" type="button" disabled>
                        Short by Popular <i class="fas fa-star ms-1"></i>
                    </button> --}}
                
                <div id="produkGridArea">
                    @include('pages.customer.partials.produk-grid', ['produk' => $produk])
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ===== BANNER BAWAH (Statis) ===== --}}
@if ($bannerBawah && $bannerBawah->gambar)
<section class="banner-bawah-section">
    <a href="{{ $bannerBawah->cta_link ?: '#' }}"
       @if($bannerBawah->cta_link) target="_blank" rel="noopener noreferrer" @endif
       class="d-block">
        <img src="{{ img_src($bannerBawah->gambar) }}"
             alt="Banner"
             class="w-100 d-block">
    </a>
</section>
@endif

@endsection

@push('js')
<script>
    let currentKategoriId = '{{ $selectedKategoriId ?? '' }}';

    function loadProduk() {
        const params = new URLSearchParams();
        const hargaMin = document.getElementById('filterHargaMin').value;
        const hargaMax = document.getElementById('filterHargaMax').value;
        const sort = document.getElementById('filterSort').value;

        if (hargaMin) params.append('harga_min', hargaMin);
        if (hargaMax) params.append('harga_max', hargaMax);
        if (sort) params.append('sort', sort);

        const base = currentKategoriId ? `${window.APP_BASE_URL}/kategori/produk/${currentKategoriId}` : `${window.APP_BASE_URL}/kategori/produk`;
        const url = params.toString() ? `${base}?${params.toString()}` : base;

        const $area = document.getElementById('produkGridArea');
        $area.innerHTML = '<p class="text-center text-muted py-5"><i class="fa fa-spinner fa-spin me-2"></i>Memuat...</p>';

        fetch(url)
            .then(res => res.text())
            .then(html => { $area.innerHTML = html; });
    }

    document.querySelectorAll('.filter-kategori-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const isAlreadyActive = this.classList.contains('active-filter');
            document.querySelectorAll('.filter-kategori-btn').forEach(b => b.classList.remove('active-filter'));

            if (!isAlreadyActive) {
                this.classList.add('active-filter');
                currentKategoriId = this.dataset.id;
            } else {
                currentKategoriId = '';
            }

            loadProduk();
        });
    });

    document.getElementById('btnApplyFilter').addEventListener('click', function () {
        loadProduk();
    });
</script>
@endpush