415 lines
16 KiB
JavaScript
415 lines
16 KiB
JavaScript
// =======================
|
|
// DATA SETUP
|
|
// =======================
|
|
let checkout_biodata = JSON.parse(sessionStorage.getItem('checkout_biodata') || '{}');
|
|
let order_id = sessionStorage.getItem('order_id') || '[]';
|
|
|
|
// =======================
|
|
// EVENT ON LOAD
|
|
// =======================
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
$("#cartButton").addClass('d-none');
|
|
$("#no_order_result").val(order_id)
|
|
let currentStep = 0;
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
// Redirect jika cart kosong
|
|
if (cart.length === 0) {
|
|
window.location.href = "/";
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
// Setup button step
|
|
document.querySelectorAll('.next-step').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
if (currentStep === 0){
|
|
if(!validateStepOne()) return
|
|
isiKonfirmasi();
|
|
currentStep++; showStep(currentStep);
|
|
}else if(currentStep === 1){
|
|
const {isValid, errorMessage} =validateCartBeforeSubmit();
|
|
if (!isValid) {
|
|
alert(errorMessage);
|
|
return
|
|
}
|
|
if (!sessionStorage.getItem('order_id')) {
|
|
await submitOrderToServer(); // async function simpan ke server
|
|
}
|
|
currentStep++;
|
|
showStep(currentStep)
|
|
}else if(currentStep === 2){
|
|
renderCartSummary()
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.prev-step').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
if (currentStep > 0) {
|
|
currentStep--;
|
|
showStep(currentStep);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Inisialisasi tampilan dan data
|
|
renderCartSummary();
|
|
showStep(currentStep);
|
|
isiKonfirmasi();
|
|
document.getElementById('no_order_display').textContent = order_id
|
|
|
|
});
|
|
// =======================
|
|
// FUNGSI STEP
|
|
// =======================
|
|
const steps = document.querySelectorAll('.form-step');
|
|
const progressBar = document.getElementById('stepProgressBar');
|
|
|
|
function showStep(index) {
|
|
steps.forEach((step, i) => {
|
|
step.classList.toggle('active', i === index);
|
|
step.classList.toggle('d-none', i !== index);
|
|
});
|
|
const total = steps.length;
|
|
const progress = ((index + 1) / total) * 100;
|
|
progressBar.style.width = progress + '%';
|
|
progressBar.innerText = `Langkah ${index + 1} dari ${total}`;
|
|
for(let i = 1; i <= total; i++){
|
|
const circle = document.getElementById(`step-circle-${i}`)
|
|
if(circle){
|
|
circle.classList.toggle('active', i === index + 1)
|
|
}
|
|
}
|
|
}
|
|
|
|
// =======================
|
|
// FUNGSI BIODATA
|
|
// =======================
|
|
function toggleCustomerFields() {
|
|
const selected = $('input[name="jenis_customer"]:checked').val();
|
|
if (selected === 'Karyawan RSAB Harapan Kita') {
|
|
$('.karyawan').show();
|
|
$('.pasien').hide();
|
|
} else if (selected === 'Keluarga Pasien / Penunggu Pasien') {
|
|
$('.pasien').show();
|
|
$('.karyawan').hide();
|
|
} else {
|
|
$('.karyawan, .pasien').hide();
|
|
}
|
|
}
|
|
|
|
$('input[name="jenis_customer"]').on('change', toggleCustomerFields);
|
|
toggleCustomerFields();
|
|
|
|
if (typeof checkout_biodata === 'object') {
|
|
if (checkout_biodata.jenis_customer) {
|
|
$(`input[name="jenis_customer"][value="${checkout_biodata.jenis_customer}"]`).prop('checked', true);
|
|
}
|
|
if(checkout_biodata.jenis_kelamin){
|
|
$(`input[name="jenis_kelamin"][value="${checkout_biodata.jenis_kelamin}"]`).prop('checked', true);
|
|
}
|
|
$('#nama_pemesan').val(checkout_biodata.nama_pemesan);
|
|
// $('#tanggal_lahir').val(checkout_biodata.tanggal_lahir);
|
|
// $('#tinggi_badan').val(checkout_biodata.tinggi_badan);
|
|
// $('#berat_badan').val(checkout_biodata.berat_badan);
|
|
$('#no_whatsapp').val(checkout_biodata.no_whatsapp);
|
|
$('#nama_pasien').val(checkout_biodata.nama_pasien);
|
|
$('#ruang_perawatan').val(checkout_biodata.ruang_perawatan);
|
|
$('#no_kamar').val(checkout_biodata.no_kamar);
|
|
$('#kelas_perawatan').val(checkout_biodata.kelas_perawatan);
|
|
$('#bagian_instalasi').val(checkout_biodata.bagian_instalasi);
|
|
$('#no_ekstensien').val(checkout_biodata.no_ekstensien);
|
|
}
|
|
|
|
function isiKonfirmasi() {
|
|
const biodata = {
|
|
jenis_customer: $('input[name="jenis_customer"]:checked').val(),
|
|
nama_pemesan: $('#nama_pemesan').val(),
|
|
jenis_kelamin: $('input[name="jenis_kelamin"]:checked').val(),
|
|
// tanggal_lahir: $('#tanggal_lahir').val(),
|
|
// tinggi_badan: $('#tinggi_badan').val(),
|
|
// berat_badan: $('#berat_badan').val(),
|
|
no_whatsapp: $('#no_whatsapp').val(),
|
|
nama_pasien: $('#nama_pasien').val(),
|
|
ruang_perawatan: $('#ruang_perawatan').val(),
|
|
no_kamar: $('#no_kamar').val(),
|
|
kelas_perawatan: $('#kelas_perawatan').val(),
|
|
bagian_instalasi: $('#bagian_instalasi').val(),
|
|
no_ekstensien: $('#no_ekstensien').val(),
|
|
};
|
|
|
|
sessionStorage.setItem('checkout_biodata', JSON.stringify(biodata));
|
|
checkout_biodata = biodata;
|
|
renderCartSummary();
|
|
}
|
|
|
|
// =======================
|
|
// FUNGSI CART / PESANAN
|
|
// =======================
|
|
function renderCartSummary() {
|
|
const container = document.getElementById('checkout_cart_summary');
|
|
let now = new Date();
|
|
let today = now.toISOString().split('T')[0];
|
|
let isAfter12 = now.getHours() >= 12;
|
|
container.innerHTML = '';
|
|
let totalKeseluruhan = 0;
|
|
let carts = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
|
|
carts.forEach((item) => {
|
|
const pesananList = Array.isArray(item.pesanan) ? item.pesanan : [];
|
|
let pesananHTML = '';
|
|
let countDate = pesananList.length;
|
|
|
|
pesananList.forEach((p, i) => {
|
|
let isTodayAndLate = p.tgl === today && isAfter12
|
|
|
|
pesananHTML += `
|
|
<div class="row g-2 align-items-center mb-2" data-item-id="${item.id}" data-index="${i}">
|
|
<div class="col-12 col-md-5">
|
|
<input type="date" class="form-control form-control-sm tanggal-input" min="${today}" value="${p.tgl}"
|
|
onchange="onTanggalChange(${item.id}, ${i})">
|
|
</div>
|
|
<div class="col-12 col-md-3">
|
|
<select class="form-select form-select-sm kategori-pemesanan-input"
|
|
onchange="onKategoriChange(${item.id}, ${i})">
|
|
<option value="" ${!p.kategoriPemesanan ? 'selected' : ''}>Kategori Pemesanan</option>
|
|
<option value="Same Day" ${p.kategoriPemesanan === 'Same Day' ? 'selected' : ''} ${isTodayAndLate ? 'disabled' : ''}>Same Day</option>
|
|
<option value="Menu Normal" ${p.kategoriPemesanan === 'Menu Normal' ? 'selected' : ''} >Menu Normal
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-6 col-md-2">
|
|
<input type="number" class="form-control form-control-sm jumlah-input" value="${p.jumlah}"
|
|
onchange="onJumlahChange(${item.id}, ${i})">
|
|
</div>
|
|
<div class="col-6 col-md-2 text-end">
|
|
<button type="button" class="btn btn-sm btn-danger w-100 w-md-auto"
|
|
onclick="removeOrderDate(${item.id}, ${i}, ${countDate})">
|
|
<i class="fa-solid fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
|
|
const harga = checkout_biodata.jenis_customer === 'Karyawan RSAB Harapan Kita' ? item.harga_karyawan || 0 :
|
|
item.harga_kp || 0;
|
|
const itemTotal = pesananList.reduce((sum, p) => sum + (p.jumlah * harga), 0);
|
|
totalKeseluruhan += itemTotal
|
|
const itemHTML = `
|
|
<div class="card mb-3 shadow-sm position-relative">
|
|
<div class="row g-0">
|
|
<div class="col-md-4 d-flex align-items-center justify-content-center p-2">
|
|
<img src="gambar/${item.foto || 'default.jpg'}" alt="${item.nama_menu}" class="img-fluid rounded"
|
|
style="max-height: 180px; width:auto; object-fit: cover;">
|
|
</div>
|
|
<div class="col-md-8">
|
|
<button type="button" class="btn btn-sm btn-outline-danger position-absolute top-0 end-0 m-2"
|
|
onclick="removeCartItem(${item.id})">
|
|
Hapus
|
|
</button>
|
|
<div class="card-body">
|
|
<h5 class="card-title">${item.nama_menu}</h5>
|
|
<div class="text-muted small">Rp ${parseInt(harga).toLocaleString('id-ID')}</div>
|
|
<p class="card-text text-muted small mb-3">${item.deskripsi || ''}</p>
|
|
${pesananHTML}
|
|
<div class="mt-3 d-flex justify-content-between align-items-center">
|
|
<button type="button" class="btn btn-sm btn-outline-success"
|
|
onclick="addOrderDate(${item.id})">+ Tambah Tanggal</button>
|
|
<div><strong>Total:</strong> <span class="text-success">Rp
|
|
${itemTotal.toLocaleString('id-ID')}</span></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
container.insertAdjacentHTML('beforeend', itemHTML);
|
|
});
|
|
container.insertAdjacentHTML('beforeend', `
|
|
<div class="text-end mt-4">
|
|
<h5><strong>Total Keseluruhan:</strong> <span class="text-success">Rp ${totalKeseluruhan.toLocaleString('id-ID')}</span></h5>
|
|
</div>
|
|
`);
|
|
|
|
document.getElementById('no_order_price').textContent = 'Rp ' + totalKeseluruhan.toLocaleString('id-ID')
|
|
}
|
|
|
|
// =======================
|
|
// EVENT HANDLER FIELD
|
|
// =======================
|
|
function onJumlahChange(itemId, index) {
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
const input = document.querySelector(`div[data-item-id='${itemId}'][data-index='${index}'] .jumlah-input`);
|
|
if (!isNaN(input.value)) {
|
|
cart.find(item => item.id === itemId).pesanan[index].jumlah = parseInt(input.value);
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
isiKonfirmasi();
|
|
}
|
|
}
|
|
|
|
function onTanggalChange(itemId, index) {
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
const input = document.querySelector(`div[data-item-id='${itemId}'][data-index='${index}'] .tanggal-input`);
|
|
cart.find(item => item.id === itemId).pesanan[index].tgl = input.value;
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
renderCartSummary();
|
|
}
|
|
|
|
function onKategoriChange(itemId, index) {
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
const kategori = $(`[data-item-id='${itemId}'][data-index='${index}'] .kategori-pemesanan-input`).val();
|
|
cart.find(item => item.id === itemId).pesanan[index].kategoriPemesanan = kategori;
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
renderCartSummary();
|
|
}
|
|
|
|
// =======================
|
|
// TAMBAH / HAPUS PESANAN
|
|
// =======================
|
|
function addOrderDate(itemId) {
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
const item = cart.find(i => i.id === itemId);
|
|
if (item && Array.isArray(item.pesanan)) {
|
|
item.pesanan.push({ tgl: '', jumlah: 1, kategoriPemesanan: '' });
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
renderCartSummary();
|
|
}
|
|
}
|
|
|
|
function removeOrderDate(itemId, index, count) {
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
const item = cart.find(i => i.id === itemId);
|
|
|
|
if(count == 1){
|
|
cart = cart.filter(i => i.id !== itemId);
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
}else if(item && Array.isArray(item.pesanan) && item.pesanan.length > index) {
|
|
item.pesanan.splice(index, 1);
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
}
|
|
renderCartSummary();
|
|
}
|
|
|
|
|
|
function removeCartItem(itemId){
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
cart = cart.filter(i => i.id !== itemId);
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
renderCartSummary()
|
|
}
|
|
|
|
// validasi step one dan sebelum submit
|
|
function validateStepOne() {
|
|
const jenisCustomer = document.querySelector('input[name="jenis_customer"]:checked');
|
|
const jenisKelamin = document.querySelector('input[name="jenis_kelamin"]:checked');
|
|
const namaPemesan = document.getElementById('nama_pemesan').value.trim();
|
|
const noWA = document.getElementById('no_whatsapp').value.trim();
|
|
|
|
if (!jenisCustomer) {
|
|
alert('Silakan pilih jenis customer.');
|
|
return false;
|
|
}
|
|
|
|
if (!namaPemesan) {
|
|
alert('Silakan isi nama pemesan.');
|
|
return false;
|
|
}
|
|
|
|
if (!jenisKelamin) {
|
|
alert('Silakan pilih jenis kelamin.');
|
|
return false;
|
|
}
|
|
|
|
if (!noWA) {
|
|
alert('Silakan isi nomor WhatsApp.');
|
|
return false;
|
|
}
|
|
|
|
// Validasi tambahan sesuai jenis customer
|
|
const selected = jenisCustomer.value;
|
|
if (selected === 'Karyawan RSAB Harapan Kita') {
|
|
const bagian = document.getElementById('bagian_instalasi').value.trim();
|
|
const ekstension = document.getElementById('no_ekstensien').value.trim();
|
|
if (!bagian) {
|
|
alert('Silakan lengkapi data karyawan.');
|
|
return false;
|
|
}
|
|
} else if (selected === 'Keluarga Pasien / Penunggu Pasien') {
|
|
const namaPasien = document.getElementById('nama_pasien').value.trim();
|
|
const ruang = document.getElementById('ruang_perawatan').value;
|
|
const noKamar = document.getElementById('no_kamar').value.trim();
|
|
const kelas = document.getElementById('kelas_perawatan').value;
|
|
if (!namaPasien || !ruang || !noKamar || !kelas) {
|
|
alert('Silakan lengkapi data pasien.');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
|
|
function validateCartBeforeSubmit() {
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
let isValid = true;
|
|
let errorMessage = "";
|
|
|
|
cart.forEach((item, index) => {
|
|
const pesananList = item.pesanan || [];
|
|
pesananList.forEach((pesanan, i) => {
|
|
if (!pesanan.tgl) {
|
|
isValid = false;
|
|
errorMessage = `Tanggal belum diisi pada item "${item.nama_menu}" (baris ${i + 1})`;
|
|
} else if (!pesanan.kategoriPemesanan) {
|
|
isValid = false;
|
|
errorMessage = `Kategori pemesanan belum dipilih pada item "${item.nama_menu}" (baris ${i + 1})`;
|
|
} else if (!pesanan.jumlah || pesanan.jumlah <= 0) {
|
|
isValid = false;
|
|
errorMessage = `Jumlah harus lebih dari 0 pada item "${item.nama_menu}" (baris ${i + 1})`;
|
|
}
|
|
});
|
|
});
|
|
|
|
return { isValid, errorMessage };
|
|
}
|
|
|
|
|
|
function hitungTotalHarga(){
|
|
const biodata = JSON.parse(sessionStorage.getItem('checkout_biodata') || '{}');
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
let total =0;
|
|
|
|
cart.forEach(item => {
|
|
const harga = biodata.jenis_customer === "Karyawan RSAB Harapan Kita" ? item.harga_karyawan || 0 : item.harga_kp || 0
|
|
const itemTotal = item.pesanan?.reduce((sum, p) => sum + (p.jumlah * harga), 0);
|
|
total += itemTotal
|
|
|
|
})
|
|
|
|
return total;
|
|
}
|
|
|
|
|
|
function copyNoRek() {
|
|
const text = document.getElementById('noRekText').innerText;
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
alert("Nomor rekening berhasil disalin: " + text);
|
|
}).catch(err => {
|
|
console.error('Gagal menyalin: ', err);
|
|
alert("Gagal menyalin teks.");
|
|
});
|
|
}
|
|
|
|
function copyNoOrder() {
|
|
const text = document.getElementById('no_order_display').innerText;
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
alert("Nomor order berhasil disalin: " + text);
|
|
}).catch(err => {
|
|
console.error('Gagal menyalin: ', err);
|
|
alert("Gagal menyalin teks.");
|
|
});
|
|
}
|
|
|
|
|