From 7e8203b7872cbb69e5c5e12cdd2926dc12a9016a Mon Sep 17 00:00:00 2001
From: LailaWulandarii <E41220418@student.polije.ac.id>
Date: Wed, 24 Dec 2025 07:13:41 +0700
Subject: [PATCH] add pesan-buket views

---
 resources/views/user/pesan-buket.blade.php | 194 +++++++++++++++++++++
 1 file changed, 194 insertions(+)
 create mode 100644 resources/views/user/pesan-buket.blade.php

diff --git a/resources/views/user/pesan-buket.blade.php b/resources/views/user/pesan-buket.blade.php
new file mode 100644
index 0000000..fafa22f
--- /dev/null
+++ b/resources/views/user/pesan-buket.blade.php
@@ -0,0 +1,194 @@
+@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>