129 lines
6.3 KiB
JavaScript
129 lines
6.3 KiB
JavaScript
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-3 col-sm-12">
|
|
<select class="form-select" aria-label="Default select example" name="orders[${orderIndex}][type]" required>
|
|
<option value="" selected disabled>Kategori Pemesanan</option>
|
|
<option value="Same Day">Same Day</option>
|
|
<option value="Menu Normal">Perempuan</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2 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 renderCartList() {
|
|
$("#cartSidebar").offcanvas('show')
|
|
$('#floatingCartButton').addClass('d-none');
|
|
$('#menuBtn').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-3">
|
|
<select class="form-select kategori-pemesanan-input" onchange="onKategoriChange(${item.id}, ${i})">
|
|
<option value="" disabled ${!p.kategoriPemesanan ? 'selected' : ''}>Kategori Pemesanan</option>
|
|
<option value="Same Day" ${p.kategoriPemesanan === 'Same Day' ? 'selected' : ''}>Same Day</option>
|
|
<option value="Menu Normal" ${p.kategoriPemesanan === 'Menu Normal' ? 'selected' : ''}>Menu Normal</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-2">
|
|
<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-2">
|
|
<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 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');
|
|
$('#menuBtn').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');
|
|
}
|
|
}
|