@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 Buket 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" id="input-search"
                                class="form-control katalogbuket-search-input" placeholder="Cari bungamu di sini..."
                                value="{{ request('keyword') }}" autocomplete="off">
                        </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="#" class="filter-cat" data-cat="single">Single Flowers <i
                                                class="bi bi-chevron-right"></i></a></li>
                                    <li><a href="#" class="filter-cat" data-cat="fresh">Fresh Flowers <i
                                                class="bi bi-chevron-right"></i></a></li>
                                    <li><a href="#" class="filter-cat" data-cat="premium_fresh">Premium Fresh Flowers
                                            <i class="bi bi-chevron-right"></i></a></li>
                                    <li><a href="#" class="filter-cat" data-cat="artificial">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 filter-size" data-size="S">S</button>
                                            <button class="btn btn-size filter-size" data-size="M">M</button>
                                            <button class="btn btn-size filter-size" data-size="L">L</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                <div class="col-lg-9">
                    @include('user._list')
                    <div class="row mt-5">
                        <div class="col-12 d-flex justify-content-between align-items-center">

                            @if ($buket->onFirstPage())
                                <span class="btn btn-pagination btn-sm rounded-pill px-3 disabled">
                                    <i class="bi bi-chevron-left me-1"></i> Sebelumnya
                                </span>
                            @else
                                <a href="{{ $buket->previousPageUrl() }}"
                                    class="btn btn-pagination btn-sm rounded-pill px-3">
                                    <i class="bi bi-chevron-left me-1"></i> Sebelumnya
                                </a>
                            @endif

                            {{-- Nomor Halaman --}}
                            <div class="pagination-numbers text-muted">
                                @foreach ($buket->getUrlRange(1, $buket->lastPage()) as $page => $url)
                                    @if ($page == $buket->currentPage())
                                        <span class="page-number active">{{ $page }}</span>
                                    @else
                                        <a href="{{ $url }}"
                                            class="page-number text-decoration-none">{{ $page }}</a>
                                    @endif
                                @endforeach
                            </div>

                            @if ($buket->hasMorePages())
                                <a href="{{ $buket->nextPageUrl() }}" class="btn btn-pagination btn-sm rounded-pill px-3">
                                    Selanjutnya <i class="bi bi-chevron-right ms-1"></i>
                                </a>
                            @else
                                <span class="btn btn-pagination btn-sm rounded-pill px-3 disabled">
                                    Selanjutnya <i class="bi bi-chevron-right ms-1"></i>
                                </span>
                            @endif

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let timeout = null;
            let selectedCat = '';
            let selectedSize = '';

            // Fungsi Ambil Data (AJAX)
            function fetchBuket(url = "{{ route('pesan.buket') }}") {
                $.ajax({
                    url: url,
                    type: "GET",
                    data: {
                        keyword: $('#input-search').val(),
                        kategori: selectedCat,
                        ukuran: selectedSize,
                        min_price: $('#input-min').val(),
                        max_price: $('#input-max').val()
                    },
                    beforeSend: function() {
                        $('#product-container').css('opacity', '0.5');
                    },
                    success: function(data) {
                        $('#product-container').html(data);
                        $('#product-container').css('opacity', '1');
                    }
                });
            }

            // Event live Search
            $('#input-search').on('keyup', function() {
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    fetchBuket();
                }, 500);
            });

            // Event Pilih Kategori
            $('.filter-cat').on('click', function(e) {
                e.preventDefault();
                $('.filter-cat').removeClass('active');
                $(this).addClass('active');
                selectedCat = $(this).data('cat');
            });

            // Event Pilih Ukuran
            $('.filter-size').on('click', function() {
                $('.filter-size').removeClass('active');
                $(this).addClass('active');

                selectedSize = $(this).data('size');
            });

            $('#btn-apply-filter').on('click', function() {
                fetchBuket();

                $(this).blur();
                $(this).removeClass('active');
            });
            // Pagination AJAX
            $(document).on('click', '.pagination a', function(e) {
                e.preventDefault();
                let url = $(this).attr('href');
                fetchBuket(url);
                window.scrollTo(0, 400);
            });

            var slider = document.getElementById('price-slider');
            noUiSlider.create(slider, {
                start: [0, 500000],
                connect: true,
                range: {
                    'min': 0,
                    'max': 1000000
                },
                step: 10000
            });

            // Update label dan input hidden saat slider digeser
            slider.noUiSlider.on('update', function(values, handle) {
                var min = Math.round(values[0]);
                var max = Math.round(values[1]);

                $('#price-min').text('Rp ' + min.toLocaleString('id-ID'));
                $('#price-max').text('Rp ' + max.toLocaleString('id-ID'));
                $('#input-min').val(min);
                $('#input-max').val(max);
            });
        });
    </script>

    @if (session('waUrl'))
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            // Tampilkan popup sukses
            Swal.fire({
                title: 'Pesanan Berhasil!',
                text: "{{ session('success') }}",
                icon: 'success',
                confirmButtonText: 'Konfirmasi WhatsApp',
                confirmButtonColor: '#3B8181',
                allowOutsideClick: false
            }).then((result) => {
                if (result.isConfirmed) {
                    // Buka WhatsApp di tab baru setelah klik tombol
                    window.open("{{ session('waUrl') }}", '_blank');
                }
            });
        </script>
    @endif
@endsection