@extends('layouts.user')

@section('title', 'Katalog Buket - Florist dan Self Photo Studio Nganjuk')

@section('content')
    <section class="section-katalogbuket">
        <div class="container">

            <div class="row justify-content-center mb-2">
                <div class="col-lg-8 text-center">
                    <h2 class="katalogbuket-title mb-2">Koleksi Bunga Flo.do</h2>
                    <p class="text-muted mb-4">Jelajahi berbagai pilihan buket dan rangkaian bunga dari Flodo</p>
                    <form action="{{ route('pesan.buket') }}" method="GET" class="w-100 d-flex justify-content-center">
                        <div class="katalogbuket-search-wrapper w-100">
                            <i class="bi bi-search search-icon"></i>

                            <input type="text" name="keyword" class="form-control katalogbuket-search-input"
                                placeholder="Cari bungamu di sini..." value="{{ request('keyword') }}">
                        </div>
                    </form>
                </div>
            </div>

            <div class="row">

                <div class="col-lg-3 mb-5 mb-lg-0">
                    <div class="katalogbuket-filter-box">

                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h5 class="fw-bold mb-0">Filter</h5>
                            <i class="bi bi-sliders"></i>
                        </div>

                        <div class="accordion accordion-flush" id="filterAccordion">

                            <div class="mb-4">
                                <ul class="list-unstyled katalogbuket-category-list">
                                    <li><a href="#">Single Flowers <i class="bi bi-chevron-right"></i></a></li>
                                    <li><a href="#">Fresh Flowers <i class="bi bi-chevron-right"></i></a></li>
                                    <li><a href="#">Premium Fresh Flowers <i class="bi bi-chevron-right"></i></a></li>
                                    <li><a href="#">Artificial Flowers <i class="bi bi-chevron-right"></i></a></li>
                                </ul>
                            </div>

                            <hr class="my-2">

                            <div class="accordion-item bg-transparent border-0">
                                <h2 class="accordion-header" id="headingPrice">
                                    <button class="accordion-button shadow-none bg-transparent px-0 text-dark"
                                        type="button" data-bs-toggle="collapse" data-bs-target="#collapsePrice"
                                        aria-expanded="true" style="font-weight: 600; font-size: var(--nav-font);">
                                        Rentang Harga
                                    </button>
                                </h2>
                                <div id="collapsePrice" class="accordion-collapse collapse show"
                                    aria-labelledby="headingPrice">
                                    <div class="accordion-body px-0 pt-3 pb-4">
                                        <div id="price-slider" class="mb-3"></div>

                                        <div class="d-flex justify-content-between text-muted small">
                                            <span id="price-min">Rp 50.000</span>
                                            <span id="price-max">Rp 500.000</span>
                                        </div>

                                        <input type="hidden" name="min_price" id="input-min">
                                        <input type="hidden" name="max_price" id="input-max">
                                    </div>
                                </div>
                            </div>

                            <hr class="my-2">

                            <div class="accordion-item bg-transparent border-0">
                                <h2 class="accordion-header" id="headingSize">
                                    <button class="accordion-button collapsed shadow-none bg-transparent px-0 text-dark"
                                        type="button" data-bs-toggle="collapse" data-bs-target="#collapseSize"
                                        aria-expanded="false" style="font-weight: 600; font-size: var(--nav-font);">
                                        Ukuran
                                    </button>
                                </h2>
                                <div id="collapseSize" class="accordion-collapse collapse show"
                                    aria-labelledby="headingSize">
                                    <div class="accordion-body px-0 pt-2">
                                        <div class="d-flex gap-2">
                                            <button class="btn btn-size">S</button>
                                            <button class="btn btn-size">M</button>
                                            <button class="btn btn-size active">L</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div> <button class="btn btn-katalogbuket-dark w-100 mt-4">Terapkan Filter</button>
                    </div>
                </div>

                <div class="col-lg-9">
                    <div class="row g-3">

                        @for ($i = 1; $i <= 8; $i++)
                            <div class="col-6 col-md-4 col-lg-3">

                                <div class="katalogbuket-card position-relative">

                                    <div class="img-wrapper mb-3">
                                        <img src="{{ asset('img/hero-buket.jpg') }}" class="img-fluid rounded-4"
                                            alt="Buket Bunga">
                                    </div>

                                    <h6 class="katalogbuket-product-title">Buket Lily Premium</h6>
                                    <p class="katalogbuket-product-price">Rp 150.000</p>

                                    <a href="{{ route('detail.buket') }}" class="stretched-link"></a>
                                </div>
                            </div>
                        @endfor
                    </div>

                    <div class="row mt-5">
                        <div class="col-12 d-flex justify-content-between align-items-center">

                            <a href="#" class="btn btn-pagination btn-sm rounded-pill px-3">
                                <i class="bi bi-chevron-left me-1"></i> Sebelumnya
                            </a>

                            <div class="pagination-numbers text-muted">
                                <span class="page-number active">1</span>
                                <span class="page-number">2</span>
                                <span class="page-number">3</span>
                                <span class="page-number">...</span>
                                <span class="page-number">10</span>
                            </div>

                            <a href="#" class="btn btn-pagination btn-sm rounded-pill px-3">
                                Selanjutnya <i class="bi bi-chevron-right ms-1"></i>
                            </a>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var slider = document.getElementById('price-slider');

        // Inisialisasi Slider
        noUiSlider.create(slider, {
            start: [50000, 200000], // Posisi awal handle
            connect: true, // Ada warna di tengah handle
            range: {
                'min': 0,
                'max': 500000
            },
            step: 10000, // Kelipatan geser (10rb)
            format: {
                to: function(value) {
                    return Math.round(value);
                },
                from: function(value) {
                    return Number(value);
                }
            }
        });

        // Update Teks Saat Digeser
        var minPriceText = document.getElementById('price-min');
        var maxPriceText = document.getElementById('price-max');
        var inputMin = document.getElementById('input-min');
        var inputMax = document.getElementById('input-max');

        slider.noUiSlider.on('update', function(values, handle) {
            // Format Rupiah
            var formatter = new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 0
            });

            if (handle === 0) {
                minPriceText.innerHTML = formatter.format(values[0]);
                inputMin.value = values[0];
            } else {
                maxPriceText.innerHTML = formatter.format(values[1]);
                inputMax.value = values[1];
            }
        });
    });
</script>