261 lines
12 KiB
PHP
261 lines
12 KiB
PHP
@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.components._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
|