266 lines
12 KiB
PHP
266 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>
|
|
</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') }}") {
|
|
let urlObj = new URL(url, window.location.origin);
|
|
let path = urlObj.pathname;
|
|
|
|
let params = {
|
|
keyword: $('#input-search').val(),
|
|
kategori: selectedCat,
|
|
ukuran: selectedSize,
|
|
min_price: $('#input-min').val(),
|
|
max_price: $('#input-max').val()
|
|
};
|
|
|
|
Object.keys(params).forEach(key => {
|
|
if (!params[key]) delete params[key];
|
|
});
|
|
|
|
let searchParams = new URLSearchParams(urlObj.search);
|
|
let pageParam = searchParams.get('page');
|
|
if (pageParam) {
|
|
params.page = pageParam;
|
|
}
|
|
|
|
let newUrl = path + '?' + new URLSearchParams(params).toString();
|
|
|
|
if (window.location.protocol === 'https:') {
|
|
newUrl = 'https://' + window.location.host + newUrl;
|
|
}
|
|
|
|
console.log('Fetching URL:', newUrl);
|
|
|
|
$.ajax({
|
|
url: newUrl,
|
|
type: "GET",
|
|
beforeSend: function() {
|
|
$('#product-container').css('opacity', '0.5');
|
|
},
|
|
success: function(data) {
|
|
$('#product-container').html(data);
|
|
$('#product-container').css('opacity', '1');
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('AJAX Error:', status, error);
|
|
$('#product-container').css('opacity', '1');
|
|
|
|
if (xhr.status === 0 || error === 'error') {
|
|
window.location.reload();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).on('input', '#input-search', function() {
|
|
clearTimeout(timeout);
|
|
let keyword = $(this).val(); // Ambil value saat ini
|
|
|
|
timeout = setTimeout(function() {
|
|
// Opsional: Cek jika keyword kosong atau berubah
|
|
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);
|
|
// });
|
|
$(document).on('click', '#custom-pagination a', function(e) {
|
|
e.preventDefault(); // Mencegah reload halaman
|
|
|
|
// Ambil URL dari tombol yang diklik
|
|
let url = $(this).attr('href');
|
|
|
|
// Pastikan URL valid sebelum dipanggil
|
|
if (url && url !== '#') {
|
|
fetchBuket(url);
|
|
window.scrollTo(0, 400); // Scroll ke atas sedikit biar enak dilihat
|
|
}
|
|
});
|
|
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
|