add pesan-buket views
This commit is contained in:
parent
f6884ecb32
commit
7e8203b787
|
|
@ -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>
|
||||
Loading…
Reference in New Issue