368 lines
16 KiB
JavaScript
368 lines
16 KiB
JavaScript
$(document).ready(function () {
|
|
// Auto render setiap buka offcanvas
|
|
const cartSidebar = document.getElementById('cartSidebar');
|
|
cartSidebar.addEventListener('shown.bs.offcanvas', renderCartList);
|
|
cartSidebar.addEventListener('hidden.bs.offcanvas', function () {
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
if (cart.length > 0) {
|
|
$('#floatingCartButton').removeClass('d-none');
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
function fetchMenu(filter = {}) {
|
|
const containerGuest = $("#order_guest_id");
|
|
let params = new URLSearchParams({
|
|
page: filter.page || 1,
|
|
per_page: filter.per_page || 6,
|
|
search: filter.search || '',
|
|
jenis_menu: filter.jenis_menu || ''
|
|
}).toString();
|
|
|
|
containerGuest.html('<p class="text-muted">Memuat data....</p>');
|
|
|
|
fetch(`/datamenu?${params}`)
|
|
.then(res => res.json())
|
|
.then(res => {
|
|
if (!res.status){
|
|
return containerGuest.html('<p class="text-danger">Gagal Memuat Data...</p>');
|
|
}
|
|
const session = JSON.parse(sessionStorage.getItem('customerData') || '{}')
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
if(cart.length > 0){
|
|
updateCartCount(cart.length)
|
|
}
|
|
if(session.nama_customer){
|
|
$("#welcomeMessage").html(`Selamat Datang, <strong>${session.nama_customer}</strong> !`)
|
|
}
|
|
const menus = res.data.data || [];
|
|
|
|
if (menus.length === 0){
|
|
return containerGuest.html('<p class="text-muted">Pencarian tidak ditemukan.</p>');
|
|
}
|
|
let html = '<div class="container"><div class="row row-cols-1 row-cols-md-2 g-4">';
|
|
menus.forEach(menu => {
|
|
let hargaResult = 0;
|
|
if(session.jenis_customer === "Karyawan RSAB Harapan Kita"){
|
|
hargaResult = menu.harga_karyawan
|
|
}else if(session.jenis_customer === "Keluarga Pasien / Penunggu Pasien"){
|
|
hargaResult = menu.harga_keluarga_pasien
|
|
}else{
|
|
hargaResult = menu.harga_public
|
|
}
|
|
html += `
|
|
<div class="col-md-6">
|
|
<div class="card h-100 shadow-sm">
|
|
<div class="row g-0 h-100">
|
|
<!-- Bagian kiri (gambar) -->
|
|
<div class="col-md-5 d-flex align-items-center p-2">
|
|
<img src="gambar/${menu.foto || 'default.jpg'}" class="img-fluid rounded" alt="${menu.nama_menu}">
|
|
</div>
|
|
|
|
<!-- Bagian kanan (konten) -->
|
|
<div class="col-md-7 d-flex flex-column p-3">
|
|
<div class="flex-grow-1">
|
|
<h5 class="card-title mb-1">${menu.nama}</h5>
|
|
<p class="mb-1">Rp ${parseInt(hargaResult).toLocaleString('id-ID')}</p>
|
|
<p class="text-muted small">${menu.deskripsi || ''}</p>
|
|
<div class="mb-2">
|
|
${(menu.klasifikasiMenu || []).map(tag => `<span class="badge bg-secondary me-1 mb-1">${tag.nama_kategori_diet}</span>`).join('')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tombol selalu di bawah -->
|
|
<div class="col-md-12 mt-auto p-2">
|
|
<button class="btn btn-success w-100" onclick="orderMenu(this)"
|
|
data-id="${menu.master_menu_id ?? menu.master_paket_menu_id}"
|
|
data-nama_menu="${menu.nama}"
|
|
data-harga="${hargaResult}"
|
|
data-jenis_menu="${menu.jenis_menu}"
|
|
data-klasifikasi_menu="${(menu.klasifikasiMenu || []).map(tag => tag.nama_kategori_diet).join(', ')}"
|
|
data-foto="${menu.foto}">Order</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += '</div></div>';
|
|
html += `<div class="col-md-12 d-flex justify-content-between align-items-center mt-3">
|
|
<div>
|
|
<label for="perPageSelect" class="me-2">Tampilkan:</label>
|
|
<select id="perPageSelect" class="form-select form-select-sm d-inline-block w-auto" onchange="changePerPage(this)">
|
|
<option value="6" ${filter.per_page == 6 ? 'selected' : ''}>6</option>
|
|
<option value="10" ${filter.per_page == 10 ? 'selected' : ''}>10</option>
|
|
<option value="20" ${filter.per_page == 20 ? 'selected' : ''}>20</option>
|
|
</select>
|
|
</div>`
|
|
// Pagination buttons
|
|
if (res.data.last_page > 1) {
|
|
html += `
|
|
<div class="d-flex gap-2">`;
|
|
for (let i = 1; i <= res.data.last_page; i++) {
|
|
html += `
|
|
<button class="btn btn-outline-success btn-sm ${res.data.current_page === i ? 'active' : ''}"
|
|
onclick='fetchMenu(${JSON.stringify({...filter, page: i})})'>${i}</button>`;
|
|
}
|
|
html += `</div>`;
|
|
}
|
|
containerGuest.html(html);
|
|
})
|
|
.catch(err => {
|
|
containerGuest.html('<p class="text-danger">Terjadi kesalahan saat memuat data.</p>');
|
|
console.error(err);
|
|
});
|
|
}
|
|
|
|
|
|
const modalCheckout = $("#checkoutModal")
|
|
function orderMenu(e){
|
|
const klasifikasiStr = $(e).data('klasifikasi_menu') || '';
|
|
const tags = klasifikasiStr.split(',').map(tag => tag.trim()).filter(tag => tag !== '')
|
|
|
|
const klasifikasiMenu =tags.map(tag => `
|
|
<span class="badge bg-secondary me-1 mb-1">${tag}</span>
|
|
`).join('');
|
|
|
|
modalCheckout.modal("show")
|
|
$('#cathering_order_photo').attr('src', `/gambar/${$(e).data('foto')}`)
|
|
$('#cathering_order_name').text($(e).data('nama_menu'))
|
|
$('#cathering_order_price').text("Rp " + parseInt($(e).data('harga')).toLocaleString('id-ID'))
|
|
$("#tag_klasifikasi_menu").html(klasifikasiMenu)
|
|
$('#order_input_wrapper').empty();
|
|
addOrderRow();
|
|
}
|
|
|
|
|
|
let orderIndex = 0;
|
|
function addOrderRow(data = {}) {
|
|
orderIndex++;
|
|
|
|
const html = `
|
|
<div class="row g-2 align-items-center mb-2" data-row="${orderIndex}">
|
|
<div class="col-md-5 col-sm-12">
|
|
<input type="date" name="orders[${orderIndex}][tanggal]" value="${data.tanggal || ''}" class="form-control" required>
|
|
</div>
|
|
<div class="col-md-5 col-sm-10">
|
|
<input type="number" name="orders[${orderIndex}][jumlah]" value="${data.jumlah || ''}" class="form-control" placeholder="Masukkan Jumlah" required min="1">
|
|
</div>
|
|
<div class="col-md-2 col-sm-2 d-flex">
|
|
<button type="button" class="btn btn-danger btn-sm" onclick="removeOrderRow(${orderIndex})"><i class="fa-solid fa-trash"></i></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
$('#order_input_wrapper').append(html);
|
|
}
|
|
|
|
function removeOrderRow(index) {
|
|
$(`#order_input_wrapper [data-row="${index}"]`).remove();
|
|
}
|
|
|
|
|
|
function updateCartCount(count) {
|
|
const $cartCount = $('#cartCount');
|
|
if (count > 0) {
|
|
$cartCount.text(count).show();
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
let totalHarga = cart.reduce((total, item) => {
|
|
const harga = parseInt(item.harga.replace(/[^\d]/g, '')) || 0;
|
|
const subtotal = item.pesanan.reduce((sum, p) => sum + (p.jumlah * harga), 0);
|
|
return total + subtotal;
|
|
}, 0);
|
|
$('#floatingCartButton').removeClass('d-none');
|
|
$('#floatingCartCount').text(count);
|
|
$('#floatingCartTotal').text('Rp ' + totalHarga.toLocaleString('id-ID'));
|
|
$('#floatingCartDesc').text(cart[0].nama_menu);
|
|
|
|
} else {
|
|
$cartCount.hide();
|
|
$('#floatingCartButton').addClass('d-none');
|
|
}
|
|
}
|
|
|
|
$("#checkoutForm").on('submit', function(e){
|
|
e.preventDefault();
|
|
const orders = [];
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
$("#order_input_wrapper .row").each(function(){
|
|
const tgl = $(this).find('input[type="date"]').val();
|
|
const jumlah = $(this).find('input[type="number"]').val();
|
|
if(tgl && jumlah > 0){
|
|
orders.push({ tgl, jumlah})
|
|
}
|
|
})
|
|
let existingItem = cart.find(item => item.nama_menu === $("#cathering_order_name").text());
|
|
if(existingItem){
|
|
orders.forEach(newOrder => {
|
|
const existingOrder =existingItem.pesanan.find(p => p.tgl === newOrder.tgl)
|
|
if(existingOrder){
|
|
existingOrder.jumlah += newOrder.jumlah;
|
|
}else{
|
|
existingItem.pesanan.push(newOrder)
|
|
}
|
|
})
|
|
}else{
|
|
const orderItem ={
|
|
id:Date.now(),
|
|
nama_menu : $("#cathering_order_name").text(),
|
|
harga : $("#cathering_order_price").text(),
|
|
foto: $('#cathering_order_photo').attr('src'),
|
|
pesanan : orders
|
|
}
|
|
cart.push(orderItem)
|
|
}
|
|
|
|
sessionStorage.setItem('cart', JSON.stringify(cart))
|
|
updateCartCount(cart.length)
|
|
modalCheckout.modal('hide')
|
|
})
|
|
|
|
function renderCartList() {
|
|
$("#cartSidebar").offcanvas('show')
|
|
$('#floatingCartButton').addClass('d-none');
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
let total = 0;
|
|
|
|
const html = cart.map(item => {
|
|
const hargaNum = parseInt(item.harga.replace(/[^\d]/g, ''));
|
|
let pesananHTML = '';
|
|
|
|
item.pesanan.forEach((p, i) => {
|
|
pesananHTML += `
|
|
<div class="row align-items-center mb-2" data-item-id="${item.id}" data-index="${i}">
|
|
<div class="col-5">
|
|
<input type="date" class="form-control form-control-sm tanggal-input" value="${p.tgl}" oninput="onTanggalChange(${item.id}, ${i})">
|
|
</div>
|
|
<div class="col-4">
|
|
<input type="number" class="form-control form-control-sm jumlah-input" value="${p.jumlah}" min="1" oninput="onJumlahChange(${item.id}, ${i})">
|
|
</div>
|
|
<div class="col-3 text-end">
|
|
<button class="btn btn-sm btn-danger" onclick="removeOrderDate(${item.id}, ${i})"><i class="fa-solid fa-trash"></i></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
const itemTotal = item.pesanan.reduce((sum, p) => sum + (p.jumlah * hargaNum), 0);
|
|
total += itemTotal;
|
|
|
|
return `
|
|
<div class="card mb-2 p-2">
|
|
<div class="d-flex align-items-center">
|
|
<img src="${item.foto}" class="me-3 rounded" style="width: 60px; height: 60px; object-fit: cover;">
|
|
<div>
|
|
<div><strong>${item.nama_menu}</strong></div>
|
|
<div class="text-muted small">${item.harga}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
${pesananHTML}
|
|
<button class="btn btn-sm btn-outline-primary mt-2" onclick="addOrderDate(${item.id})">+ Tambah Tanggal</button>
|
|
</div>
|
|
|
|
<div class="mt-3 d-flex justify-content-between align-items-center">
|
|
<div><strong>Total:</strong> <span class="total-per-item" data-item-id="${item.id}">Rp ${itemTotal.toLocaleString('id-ID')}</span></div>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="removeCartItem(${item.id})">
|
|
<i class="fa-solid fa-trash"></i> Hapus Pesanan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
$('#cartListContainer').html(html);
|
|
$('#cartTotal').text('Rp ' + total.toLocaleString('id-ID'));
|
|
}
|
|
|
|
|
|
function addOrderDate(itemId) {
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
const item = cart.find(i => i.id === itemId);
|
|
if (item) {
|
|
item.pesanan.push({ tgl: '', jumlah: 1 });
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
renderCartList();
|
|
|
|
}
|
|
}
|
|
|
|
function removeOrderDate(itemId, index) {
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
const item = cart.find(i => i.id === itemId);
|
|
if (item && item.pesanan.length > index) {
|
|
item.pesanan.splice(index, 1);
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
renderCartList();
|
|
}
|
|
}
|
|
|
|
function removeCartItem(itemId){
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
cart = cart.filter(i => i.id !== itemId);
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
updateCartCount(cart.length);
|
|
renderCartList()
|
|
}
|
|
|
|
function onJumlahChange(itemId, index) {
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
const jumlahInput = document.querySelector(`div[data-item-id='${itemId}'][data-index='${index}'] .jumlah-input`).value;
|
|
if (!isNaN(jumlahInput)) {
|
|
cart.forEach(item => {
|
|
if (item.id === itemId) {
|
|
item.pesanan[index].jumlah = parseInt(jumlahInput);
|
|
}
|
|
});
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
renderCartList();
|
|
}
|
|
}
|
|
|
|
function onTanggalChange(itemId, index) {
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
const tanggalInput = document.querySelector(`div[data-item-id='${itemId}'][data-index='${index}'] .tanggal-input`).value;
|
|
cart.forEach(item => {
|
|
if (item.id === itemId) {
|
|
item.pesanan[index].tgl = tanggalInput;
|
|
}
|
|
});
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
validateCheckoutButton();
|
|
}
|
|
|
|
function renderCartTotalOnly() {
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
let total = 0;
|
|
cart.forEach(item => {
|
|
const hargaNum = parseInt(item.harga.replace(/[^\d]/g, ''));
|
|
const itemTotal = item.pesanan.reduce((sum, p) => sum + (p.jumlah * hargaNum), 0);
|
|
total += itemTotal;
|
|
});
|
|
$('#cartTotal').text('Rp ' + total.toLocaleString('id-ID'));
|
|
}
|
|
|
|
function updateFloatingCartButton() {
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
const totalItem = cart.reduce((sum, item) => {
|
|
return sum + item.pesanan.reduce((s, p) => s + p.jumlah, 0);
|
|
}, 0);
|
|
|
|
const totalHarga = cart.reduce((sum, item) => {
|
|
const harga = parseInt(item.harga.replace(/[^\d]/g, ''));
|
|
return sum + item.pesanan.reduce((s, p) => s + (p.jumlah * harga), 0);
|
|
}, 0);
|
|
|
|
if (cart.length > 0) {
|
|
$('#floatingCartButton').removeClass('d-none');
|
|
$('#floatingCartCount').text(totalItem);
|
|
$('#floatingCartTotal').text('Rp ' + totalHarga.toLocaleString('id-ID'));
|
|
$('#floatingCartDesc').text(`Total pesanan dari ${cart[0].nama_menu}`);
|
|
} else {
|
|
$('#floatingCartButton').addClass('d-none');
|
|
}
|
|
}
|