295 lines
14 KiB
JavaScript
295 lines
14 KiB
JavaScript
$(document).ready(function () {
|
|
// Auto render setiap buka offcanvas
|
|
|
|
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 || 12,
|
|
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 => {
|
|
html += `
|
|
<div class="col-md-3 mb-4">
|
|
<div class="card h-100 shadow-sm p-2 rounded-4">
|
|
<!-- Gambar Makanan -->
|
|
<img src="gambar/${menu.foto || '3.jpeg'}"
|
|
class="rounded shadow-sm object-fit-cover" height="150px"
|
|
alt="${menu.nama_menu}">
|
|
|
|
<!-- Nama & Harga -->
|
|
<h5 class="fw-bold mb-1 mt-2">${menu.nama}</h5>
|
|
<div class="row text-muted small">
|
|
<div class="col-12 fw-semibold">Harga</div>
|
|
<div class="col-6">Karyawan:</div>
|
|
<div class="col-6 text-end">Rp ${parseInt(menu.harga_karyawan).toLocaleString('id-ID')}</div>
|
|
<div class="col-6">Keluarga Pasien:</div>
|
|
<div class="col-6 text-end">Rp ${parseInt(menu.harga_keluarga_pasien).toLocaleString('id-ID')}</div>
|
|
</div>
|
|
|
|
|
|
<!-- Kategori Diet (Badge) -->
|
|
<div class="mb-3">
|
|
${(menu.klasifikasiMenu || [])
|
|
.slice(0, 2)
|
|
.map(tag => {
|
|
const name = tag.nama_kategori_diet || '';
|
|
const truncated = name.length > 12 ? name.substring(0, 12) + '...' : name;
|
|
return `<span class="badge bg-secondary me-1 mb-1" title="${name}">${truncated}</span>`;
|
|
}).join('')}
|
|
${(menu.klasifikasiMenu || []).length > 2
|
|
? `<span class="badge bg-secondary">+${(menu.klasifikasiMenu.length - 2)} lainnya</span>`
|
|
: ''}
|
|
</div>
|
|
|
|
<!-- Tombol Order -->
|
|
<div class="d-flex p-2 mt-auto">
|
|
<button class="btn btn-outline-success w-50 me-2"
|
|
onclick="orderMenu(this)"
|
|
data-id="${menu.master_menu_id || menu.master_paket_menu_id}"
|
|
data-nama_menu="${menu.nama}"
|
|
data-harga_karyawan="${menu.harga_karyawan}"
|
|
data-harga_keluarga_pasien="${menu.harga_keluarga_pasien}"
|
|
data-jenis_menu="${menu.jenis_menu}"
|
|
data-deskripsi="${menu.deskripsi}"
|
|
data-klasifikasi_menu="${(menu.klasifikasiMenu || []).map(tag => tag.nama_kategori_diet).join(', ')}"
|
|
data-foto="${menu.foto}">
|
|
<i class="fa-solid fa-circle-info"></i> Detail
|
|
</button>
|
|
<button class="btn btn-success w-50"
|
|
onclick="saveItem(this)"
|
|
data-id="${menu.master_menu_id ?? menu.master_paket_menu_id}"
|
|
data-nama_menu="${menu.nama}"
|
|
data-harga_karyawan="${menu.harga_karyawan}"
|
|
data-harga_keluarga_pasien="${menu.harga_keluarga_pasien}"
|
|
data-jenis_menu="${menu.jenis_menu}"
|
|
data-deskripsi="${menu.deskripsi}"
|
|
data-klasifikasi_menu="${(menu.klasifikasiMenu || []).map(tag => tag.nama_kategori_diet).join(', ')}"
|
|
data-foto="${menu.foto}">
|
|
<i class="fas fa-shopping-cart me-1"></i> Order
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
`;
|
|
});
|
|
|
|
html += '</div></div>';
|
|
|
|
html += `<div class="col-md-12 d-flex justify-content-between align-items-center mt-3">`;
|
|
|
|
if(res.data.total > 12){
|
|
html +=`<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="12" ${filter.per_page == 12 ? 'selected' : ''}>12</option>
|
|
<option value="24" ${filter.per_page == 24 ? 'selected' : ''}>24</option>
|
|
<option value="50" ${filter.per_page == 50 ? 'selected' : ''}>50</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_menu_id').text($(e).data('id'))
|
|
$('#cathering_order_jenis_menu').text($(e).data('jenis_menu'))
|
|
$('#cathering_order_deskripsi').text($(e).data('deskripsi'))
|
|
$('#cathering_order_price_keluarga_pasien').text("Rp " + parseInt($(e).data('harga_keluarga_pasien')).toLocaleString('id-ID'))
|
|
$('#cathering_order_price_karyawan').text("Rp " + parseInt($(e).data('harga_karyawan')).toLocaleString('id-ID'))
|
|
$("#tag_klasifikasi_menu").html(klasifikasiMenu)
|
|
}
|
|
|
|
function updateCartCount(count) {
|
|
const $cartCount = $('#cartCount');
|
|
if (count > 0) {
|
|
$cartCount.text(count).show();
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
console.log(cart);
|
|
|
|
let menuNames = cart.map(item => item.nama_menu).join(', ');
|
|
const maxLength = 50;
|
|
|
|
if (menuNames.length > maxLength) {
|
|
menuNames = menuNames.substring(0, maxLength).trim() + '...';
|
|
}
|
|
$('#floatingCartButton').removeClass('d-none');
|
|
$('#floatingCartCount').text(cart.length);
|
|
$('#floatingCartDesc').text(menuNames);
|
|
|
|
} else {
|
|
$cartCount.hide();
|
|
$('#floatingCartButton').addClass('d-none');
|
|
}
|
|
}
|
|
|
|
$("#checkoutForm").on('submit', function(e){
|
|
e.preventDefault();
|
|
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
const now = new Date();
|
|
const todayFormatted = now.getFullYear() + '-' + (now.getMonth() + 1).toString().padStart(2, '0') + '-' + now.getDate().toString().padStart(2, '0')
|
|
|
|
const orders = [{
|
|
tgl: todayFormatted,
|
|
jumlah: 1,
|
|
kategoriPemesanan: ''
|
|
}];
|
|
// Dikomen dulu
|
|
// $("#order_input_wrapper .row").each(function(){
|
|
// const tgl = $(this).find('input[type="date"]').val();
|
|
// const jumlah = $(this).find('input[type="number"]').val();
|
|
// const kategoriPemesanan = $(this).find('select').val();
|
|
// if(tgl && kategoriPemesanan && jumlah > 0){
|
|
// orders.push({ tgl, kategoriPemesanan, jumlah})
|
|
// }
|
|
// })
|
|
let idMenu = $("#cathering_order_menu_id").text().trim();
|
|
let namaMenu = $("#cathering_order_name").text().trim();
|
|
let existingItem = cart.find(item => item.id_menu === idMenu && item.nama_menu === namaMenu);
|
|
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(),
|
|
id_menu : $("#cathering_order_menu_id").text(),
|
|
nama_menu : $("#cathering_order_name").text(),
|
|
harga_karyawan : $("#cathering_order_price_karyawan").text(),
|
|
harga_kp : $("#cathering_order_price_keluarga_pasien").text(),
|
|
foto: $('#cathering_order_photo').attr('src'),
|
|
jenis_menu: $('#cathering_order_jenis_menu').text(),
|
|
pesanan : orders
|
|
}
|
|
cart.push(orderItem)
|
|
}
|
|
|
|
sessionStorage.setItem('cart', JSON.stringify(cart))
|
|
updateCartCount(cart.length)
|
|
modalCheckout.modal('hide')
|
|
})
|
|
|
|
function saveItem(e){
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
|
|
const now = new Date();
|
|
const todayFormatted = now.getFullYear() + '-' + (now.getMonth() + 1).toString().padStart(2, '0') + '-' + now.getDate().toString().padStart(2, '0')
|
|
|
|
const orders = [{
|
|
tgl: todayFormatted,
|
|
jumlah: 1,
|
|
kategoriPemesanan: ''
|
|
}];
|
|
|
|
let idMenu = $(e).data('id');
|
|
let namaMenu = $(e).data('nama_menu');
|
|
let existingItem = cart.find(item => item.id_menu === idMenu && item.nama_menu === namaMenu);
|
|
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(),
|
|
id_menu : idMenu,
|
|
nama_menu : namaMenu,
|
|
harga_karyawan : $(e).data('harga_karyawan'),
|
|
harga_kp : $(e).data('harga_keluarga_pasien'),
|
|
foto: $(e).data('foto'),
|
|
jenis_menu: $(e).data('jenis_menu'),
|
|
pesanan : orders
|
|
}
|
|
cart.push(orderItem)
|
|
}
|
|
sessionStorage.setItem('cart', JSON.stringify(cart))
|
|
updateCartCount(cart.length)
|
|
}
|
|
|
|
function checkout(){
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
if(cart.length > 0){
|
|
window.location.href = '/checkout'
|
|
}else{
|
|
alert("Pilih Menu terlebih dahulu yang ingin dipesan !");
|
|
return
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|