836 lines
42 KiB
JavaScript
836 lines
42 KiB
JavaScript
$(document).ready(function () {
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
if (cart.length > 0) {
|
|
$('#floatingCartButton').removeClass('d-none');
|
|
$('#menuBtn').removeClass('d-none');
|
|
}
|
|
|
|
|
|
});
|
|
|
|
function openImageModal(imageSrc, title) {
|
|
document.getElementById('modalImage').src = imageSrc;
|
|
document.getElementById('imageModalLabel').textContent = title;
|
|
$('#imageModal').modal('show');
|
|
}
|
|
|
|
function fetchMenu(filter = {}) {
|
|
const containerGuest = $("#order_guest_id");
|
|
$("#tanggal-filter").removeClass('d-none');
|
|
if (filter.jenis_menu === "cara_pesan") {
|
|
$("#tanggal-filter").addClass('d-none');
|
|
const cara_pesan = [
|
|
{
|
|
type: "Karyawan RSAB Harapan Kita",
|
|
gambar: "/cara_pesan/order_karyawan.png",
|
|
color: "success"
|
|
},
|
|
{
|
|
type: "Keluarga Pasien / Penunggu Pasien",
|
|
gambar: "/cara_pesan/order_keluarga_pasien.png",
|
|
color: "success"
|
|
},
|
|
{
|
|
type: "Masyarakat Umum",
|
|
gambar: "/cara_pesan/order_masyarakat_umum.png",
|
|
color: "success"
|
|
}
|
|
];
|
|
|
|
let html = `
|
|
<div class="container py-2">
|
|
<div class="text-center mb-3">
|
|
<h2 class="fw-bold text-gradient bg-gradient-primary">Cara Pemesanan</h2>
|
|
</div>
|
|
|
|
<div class="row g-4 justify-content-center">
|
|
`;
|
|
|
|
cara_pesan.forEach((cara, index) => {
|
|
html += `
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="card border-0 shadow-lg hover-lift transition-all-3">
|
|
<div class="card-body text-center">
|
|
<div class="mb-2">
|
|
<div class="avatar avatar-xxl mx-auto">
|
|
<a href="${cara.gambar}"
|
|
class="glightbox"
|
|
data-gallery="cara-pesan"
|
|
data-title="${cara.type}"
|
|
data-description="Panduan pemesanan ${cara.type}">
|
|
<img src="${cara.gambar}"
|
|
alt="${cara.type}"
|
|
class="img-fluid border rounded-3 border-3 border-${cara.color} shadow-sm image-zoom"
|
|
style="width: 120px; height: 120px; object-fit: cover; cursor: pointer;">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<h5 class="fw-bold text-${cara.color}">${cara.type}</h5>
|
|
<small class="text-muted d-block">Panduan pemesanan</small>
|
|
</div>
|
|
<div class="card-footer bg-white border-0 text-center mb-1">
|
|
<a href="${cara.gambar}"
|
|
class="btn btn-${cara.color} btn-rounded fw-semibold glightbox"
|
|
data-gallery="cara-pesan"
|
|
data-title="${cara.type}"
|
|
data-description="Panduan pemesanan ${cara.type}">
|
|
<i class="fas fa-eye me-2"></i>Lihat Panduan
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
|
|
html += `
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Image Viewer -->
|
|
|
|
<style>
|
|
.text-gradient {
|
|
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.hover-lift {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important;
|
|
}
|
|
|
|
.transition-all-3 {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-rounded {
|
|
border-radius: 50px;
|
|
}
|
|
|
|
/* Image hover effect */
|
|
.image-zoom {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.image-zoom:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Modal backdrop styling */
|
|
.modal-backdrop {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.modal.fade .modal-dialog {
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
.modal.show .modal-dialog {
|
|
transform: none;
|
|
}
|
|
</style>
|
|
|
|
`;
|
|
containerGuest.html(html);
|
|
|
|
GLightbox({
|
|
selector: '.glightbox',
|
|
touchNavigation: true,
|
|
loop: true,
|
|
zoomable: true,
|
|
autoplayVideos: true
|
|
});
|
|
return
|
|
}
|
|
|
|
|
|
let params = new URLSearchParams({
|
|
page: filter.page || 1,
|
|
per_page: filter.per_page || 50,
|
|
search: filter.search || '',
|
|
jenis_menu: filter.jenis_menu || '',
|
|
tanggal_awal: filter.tanggal_awal || '',
|
|
tanggal_akhir: filter.tanggal_akhir || '',
|
|
}).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(filter.jenis_menu === "konsultasi"){
|
|
|
|
const jk = res.data|| [];
|
|
|
|
$("#tanggal-filter").addClass('d-none');
|
|
let html = `
|
|
<div class="container">
|
|
<h4 class="mb-4 fw-bold text-gradient">
|
|
<i class="fas fa-calendar-alt me-2"></i>
|
|
Jadwal Konsultasi
|
|
</h4>
|
|
|
|
<div class="row g-4">
|
|
`;
|
|
|
|
jk.forEach(jadwal => {
|
|
html += `
|
|
<div class="col-lg-6 col-xl-4">
|
|
<div class="card border-0 shadow-lg h-100 hover-card">
|
|
<div class="card-header bg-gradient-primary text-white">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img src="https://ui-avatars.com/api/?name=${encodeURIComponent(jadwal.nama_dokter)}&background=random&size=50"
|
|
class="rounded-circle border border-2 border-white" alt="${jadwal.nama_dokter}">
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="mb-0 fw-bold text-white">${jadwal.nama_dokter}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<h6 class="text-muted mb-3">
|
|
<i class="fas fa-calendar-check me-2"></i>
|
|
Jadwal Tersedia
|
|
</h6>
|
|
|
|
${jadwal.tgl_available?.length
|
|
? `<div class="d-flex flex-wrap gap-2">
|
|
${jadwal.tgl_available
|
|
.map(item => {
|
|
const hari = Number(item?.tgl_harian);
|
|
if (!hari) return null;
|
|
|
|
const now = new Date();
|
|
const tahun = now.getFullYear();
|
|
const bulanIni = now.getMonth();
|
|
const hariIni = now.getDate();
|
|
|
|
const bulan = hari < hariIni ? bulanIni + 1 : bulanIni;
|
|
const date = new Date(tahun, bulan, hari);
|
|
|
|
const isToday = date.toDateString() === now.toDateString();
|
|
const isTomorrow = new Date(date.getTime() - 86400000).toDateString() === now.toDateString();
|
|
|
|
return {
|
|
date,
|
|
display: date.toLocaleDateString('id-ID', {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
year: '2-digit'
|
|
}),
|
|
isToday,
|
|
isTomorrow
|
|
};
|
|
})
|
|
.filter(Boolean)
|
|
.sort((a, b) => a.date - b.date)
|
|
.map(o => `
|
|
<span class="badge ${o.isToday ? 'bg-danger' : o.isTomorrow ? 'bg-warning' : 'bg-light-primary'}
|
|
${o.isToday || o.isTomorrow ? '' : 'text-dark'} fs-6 px-3 py-2">
|
|
${o.display}
|
|
${o.isToday ? ' <small class="badge bg-white text-danger ms-1">Hari ini</small>' : ''}
|
|
${o.isTomorrow ? ' <small class="badge bg-white text-warning ms-1">Besok</small>' : ''}
|
|
</span>
|
|
`)
|
|
.join('')
|
|
}
|
|
</div>`
|
|
: `<div class="text-center py-4">
|
|
<i class="fas fa-calendar-times text-muted mb-2" style="font-size: 3rem;"></i>
|
|
<p class="text-muted mb-0">Belum ada jadwal tersedia</p>
|
|
</div>`
|
|
}
|
|
</div>
|
|
|
|
<div class="card-footer bg-light">
|
|
<a class="btn btn-primary btn-sm w-100" href="https://daftar.rsabhk.co.id/">
|
|
<i class="fas fa-plus me-1"></i>
|
|
Buat Janji
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += `
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
:root {
|
|
--mint: #408661ff; /* hijau muda sehat */
|
|
--mint-dark: #288355;
|
|
--teal: #00b4c2; /* aksen cerah */
|
|
--soft-gray: #f8f9fa;
|
|
--charcoal: #2d3436;
|
|
}
|
|
.text-gradient {
|
|
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.bg-gradient-primary {
|
|
background: linear-gradient(135deg, var(--mint-dark) 0%, var(--mint) 100%);
|
|
}
|
|
.badge.bg-light-primary {
|
|
background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%) !important;
|
|
color: var(--charcoal);
|
|
border: 1px solid #80deea;
|
|
}
|
|
.badge.bg-danger {
|
|
background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%) !important;
|
|
}
|
|
.badge.bg-warning {
|
|
background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%) !important;
|
|
}
|
|
.badge:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 0 15px rgba(40, 131, 85, 0.5);
|
|
}
|
|
.hover-card {
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255,255,255,.18);
|
|
background: rgba(255,255,255,.85);
|
|
}
|
|
.hover-card .rounded-circle {
|
|
transition: transform 0.4s ease, box-shadow 0.4s ease;
|
|
}
|
|
|
|
.hover-card:hover .rounded-circle {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
</style>
|
|
`;
|
|
|
|
return containerGuest.html(html);
|
|
}else{
|
|
const menus = res.data.data || [];
|
|
|
|
const groups = {};
|
|
menus.forEach(menu => {
|
|
const key = menu.group_label || 'Tanpa Tanggal'
|
|
if (!groups[key]) groups[key] = [];
|
|
groups[key].push(menu);
|
|
});
|
|
|
|
if (menus.length === 0){
|
|
return containerGuest.html(`
|
|
<div class="d-flex flex-column align-items-center justify-content-center text-center py-4">
|
|
<img src="/assets/img/404.png" alt="Tidak ada menu" style="max-width: 180px;" class="mb-3 mt-3">
|
|
<h6 class="text-muted mb-1">Belum ada menu yang tersedia untuk saat ini.</h6>
|
|
</div>
|
|
`);
|
|
}
|
|
|
|
|
|
let html = '<div class="container"><div class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3">';
|
|
for (const [label, list] of Object.entries(groups)) {
|
|
let scheduleInfo = '';
|
|
|
|
if (label === "Menu Sameday") {
|
|
scheduleInfo = `
|
|
<ul class="mb-0" style="font-size:.80rem; list-style: none; padding-left: 0;">
|
|
<li><strong>Makan Siang:</strong> Pesan Maks <strong>10.00 WIB</strong></li>
|
|
<li><strong>Makan Sore:</strong> Pesan Maks <strong>13.00 WIB</strong></li>
|
|
</ul>
|
|
`;
|
|
} else {
|
|
scheduleInfo = `<div style="font-size:.80rem">Dipesan maksimal <strong>H-1</strong> sebelum pukul <strong>13.00 WIB</strong></div>`;
|
|
}
|
|
html += `
|
|
<div class="col-12 mb-2 col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
|
<div class="text-white text-center rounded-5 py-1 px-2" style="font-size:.95rem; background-color: #2d996cff;">
|
|
<strong>${label}</strong>
|
|
<div class="mt-1 text-center" style="font-size:.80rem;">
|
|
${scheduleInfo}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
list?.forEach(menu => {
|
|
|
|
html += `
|
|
<style>
|
|
.menu-card {
|
|
background: #fff;
|
|
border-radius: 1rem;
|
|
box-shadow: var(--shadow);
|
|
transition: .35s;
|
|
overflow: hidden;
|
|
}
|
|
.menu-card:hover {
|
|
transform: translateY(-6px) scale(1.02);
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
</style>
|
|
<div class="col-6 col-xs-12 col-sm-6 col-md-4 col-lg-3 mb-2">
|
|
<div class="card h-80 shadow-sm p-2 rounded-4 mb-2 menu-card">
|
|
|
|
<!-- GAMBAR + NAMA DI DALAM GAMBAR -->
|
|
<div class="position-relative">
|
|
|
|
<img src="${menu.exist_foto ? `/gambar/${menu?.foto}` : '/gambar/default.png'}"
|
|
class="rounded shadow-sm object-fit-cover w-100" height="150"
|
|
alt="${menu.nama_menu}">
|
|
|
|
<!-- Overlay gelap bawah -->
|
|
<div class="position-absolute bottom-0 start-0 w-100"
|
|
style="height:100%; background:linear-gradient(transparent, rgba(0,0,0,.6)); border-radius:0 0 .5rem .5rem;"></div>
|
|
|
|
<!-- di dalam .position-relative (gambar) -->
|
|
<!-- Nama + kalori di dalam gambar (bawah) -->
|
|
<div class="position-absolute bottom-0 start-0 p-2 w-100">
|
|
<h5 class="fw-bold text-white mb-0" style="font-size:.80rem; max-width: 100%;">${menu.nama.length > 25 ? menu.nama.substring(0, 30) + '...' : menu.nama}</h5>
|
|
${menu?.kalori.length > 0 ? `
|
|
<small class="text-white badge bg-success">${(menu.kalori || []).slice(0,1).map(k=>k.nilai_kalori||0).join('')} kkal</small>`: ''}
|
|
${(menu.klasifikasiMenu || [])
|
|
.slice(0, 1)
|
|
.map(tag => {
|
|
const name = tag.nama_kategori_diet || '';
|
|
const truncated = name.length > 12 ? name.substring(0, 12) + '...' : name;
|
|
return `<span class="badge bg-info me-1 mb-1" title="${name}">${truncated}</span>`;
|
|
}).join('')}
|
|
${(menu.klasifikasiMenu || []).length > 2
|
|
? `<span class="badge bg-secondary text-truncate">+${menu.klasifikasiMenu.length - 2} lainnya</span>`
|
|
: ''}
|
|
</div>
|
|
|
|
<!-- badge someday/normal (kiri-atas) -->
|
|
<div class="position-absolute top-0 start-0 m-2">
|
|
${menu.apakah_someday
|
|
? '<span class="badge bg-success" >Menu Sameday</span>'
|
|
: '<span class="badge text-dark" style="background-color:#FFD166;">Menu Normal</span>'}
|
|
</div>
|
|
|
|
<!-- Label siang / sore (kanan-bawah gambar) -->
|
|
<div class="position-absolute top-0 end-0 m-1 d-flex gap-1">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="d-flex justify-content-between align-items-center text-muted small mb-1">
|
|
<strong>Harga</strong>
|
|
<strong class="text-success">Rp ${parseInt(menu.harga_public).toLocaleString('id-ID')}</strong>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-1">
|
|
<small class="text-muted">Tersedia:</small>
|
|
|
|
${menu.apakah_menu_siang && menu.apakah_menu_sore
|
|
? '<span class="badge bg-success text-white px-1" style="font-size:.6rem;">Siang & Sore</span>'
|
|
: menu.apakah_menu_siang
|
|
? '<span class="badge bg-warning text-dark px-1" style="font-size:.6rem;">Siang</span>'
|
|
: menu.apakah_menu_sore
|
|
? '<span class="badge text-white px-1" style="font-size:.6rem; background:#3A86FF;">Sore</span>'
|
|
: '<span class="badge bg-danger text-white px-1" style="font-size:.6rem;">Tutup</span>'
|
|
}
|
|
</div>
|
|
|
|
|
|
<!-- Tombol -->
|
|
<div class="d-flex p-2 mt-auto ">
|
|
<button class="btn btn-outline-success w-50 me-1 d-flex justify-content-center align-items-center p-2"
|
|
onclick="orderMenu(this)"
|
|
data-id="${menu.master_menu_id || menu.paket_mcu_id}"
|
|
data-nama_menu="${menu.nama}"
|
|
data-harga_karyawan="${menu.harga_karyawan}"
|
|
data-harga_public="${menu.harga_public}"
|
|
data-jenis_menu="${menu.jenis_menu}"
|
|
data-deskripsi="${menu.deskripsi}"
|
|
data-klasifikasi_menu="${(menu.klasifikasiMenu || []).map(tag => tag.nama_kategori_diet).join(', ')}"
|
|
data-tgl_tersedia="${(menu.dmph || []).map(tgl => tgl.tgl_harian).join(', ')}"
|
|
data-kalori="${(menu.kalori || []).map(kkal => kkal.nilai_kalori).join(', ')}"
|
|
data-foto="${menu.foto}"
|
|
data-exist_foto="${menu.exist_foto}"
|
|
data-apakah_menu_sore="${menu.apakah_menu_sore}"
|
|
data-apakah_menu_siang="${menu.apakah_menu_siang}"
|
|
data-apakah_someday="${menu.apakah_someday}">
|
|
<i class="fa-solid fa-circle-info me-1"></i> Detail
|
|
</button>
|
|
<button class="btn btn-success w-50 d-flex justify-content-center align-items-center p-2 btn-clicked"
|
|
onclick="handleClick(this)"
|
|
data-id="${menu.master_menu_id ?? menu.paket_mcu_id}"
|
|
data-nama_menu="${menu.nama}"
|
|
data-harga_karyawan="${menu.harga_karyawan}"
|
|
data-harga_public="${menu.harga_public}"
|
|
data-jenis_menu="${menu.jenis_menu}"
|
|
data-deskripsi="${menu.deskripsi}"
|
|
data-klasifikasi_menu="${(menu.klasifikasiMenu || []).map(tag => tag.nama_kategori_diet).join(', ')}"
|
|
data-tgl_tersedia="${(menu.dmph || []).map(tgl => tgl.tgl_harian).join(', ')}"
|
|
data-kalori="${(menu.kalori || []).map(kkal => kkal.nilai_kalori).join(', ')}"
|
|
${menu.exist_foto ? `data-foto=${menu.foto}` : `data-foto="default.png"`}
|
|
|
|
data-apakah_menu_sore="${menu.apakah_menu_sore}"
|
|
data-apakah_menu_siang="${menu.apakah_menu_siang}"
|
|
data-apakah_someday="${menu.apakah_someday}">
|
|
<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 > 50){
|
|
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="50" ${filter.per_page == 50 ? 'selected' : ''}>50</option>
|
|
<option value="65" ${filter.per_page == 65 ? 'selected' : ''}>65</option>
|
|
<option value="70" ${filter.per_page == 70 ? 'selected' : ''}>70</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 el = $(e);
|
|
|
|
$("#scroll-top").addClass('d-none');
|
|
const tags = (el.data('klasifikasi_menu') || '').split(',').filter(Boolean).map(tag => tag.trim());
|
|
const kaloriRaw = el.data('kalori');
|
|
let kalori = String(kaloriRaw);
|
|
|
|
const someday = el.data('apakah_someday');
|
|
const siang = el.data('apakah_menu_siang');
|
|
const sore = el.data('apakah_menu_sore');
|
|
const exist_foto = el.data('exist_foto');
|
|
|
|
const klasifikasiMenu = tags.map(tag => `
|
|
<span class="badge bg-secondary me-1 mb-1">${tag}</span>
|
|
`).join('');
|
|
|
|
const resultKkal = kalori ? `<small class="badge bg-success me-1 mb-1 fs-6">${kalori + ' kal'}</small>` : '';
|
|
|
|
const tglMenuTersedia = `
|
|
<div class="mb-1 small text-muted">
|
|
<i class="fa fa-calendar-check me-1"></i>
|
|
${someday ? 'Tersedia setiap hari (Senin - Minggu)' :
|
|
el.data('tgl_tersedia') ? `Tersedia pada tanggal: ${el.data('tgl_tersedia')}` :
|
|
'Tidak ada info tanggal tersedia'}
|
|
</div>
|
|
<div class="mb-1 small text-muted">
|
|
<i class="fa fa-utensils me-1"></i> Menu: <strong>${someday ? 'Sameday' : 'Menu Normal'}</strong>
|
|
</div>
|
|
<div class="mb-1 small text-muted">
|
|
${
|
|
siang && sore
|
|
? '<i class="fa fa-clock me-1 text-success"></i> Tersedia untuk makan siang dan sore'
|
|
: siang
|
|
? '<i class="fa fa-sun me-1 text-warning"></i> Tersedia untuk makan siang'
|
|
: sore
|
|
? '<i class="fa fa-moon me-1 text-info"></i> Tersedia untuk makan sore'
|
|
: '<i class="fa fa-ban me-1 text-danger"></i> Tidak tersedia untuk waktu makan apapun'
|
|
}
|
|
</div>
|
|
`;
|
|
|
|
$('#checkoutModal').modal('show');
|
|
if(exist_foto){
|
|
$('#cathering_order_photo').attr('src', `/gambar/${el.data('foto') || 'default.png'}`);
|
|
}else{
|
|
$('#cathering_order_photo').attr('src', `/gambar/default.png`);
|
|
}
|
|
|
|
$('#cathering_order_name').html(`
|
|
<div>${el.data('nama_menu')}</div>`);
|
|
$("#kalori_detail").html(resultKkal)
|
|
$('#kalori_checkout').val(el.data('id'));
|
|
$('#cathering_order_menu_id').val(el.data('id'));
|
|
$('#cathering_order_jenis_menu').val(el.data('jenis_menu'));
|
|
let deskripsi = el.data('deskripsi');
|
|
if (deskripsi) {
|
|
$('#cathering_order_deskripsi').html(
|
|
`<span class="fw-semibold text-dark">Deskripsi:</span> ${deskripsi}`
|
|
);
|
|
} else {
|
|
$('#cathering_order_deskripsi').html('');
|
|
}
|
|
|
|
$('#cathering_order_price_karyawan').text("Rp " + parseInt(el.data('harga_karyawan') || 0).toLocaleString('id-ID'));
|
|
$('#cathering_order_price_public').text("Rp " + parseInt(el.data('harga_public') || 0).toLocaleString('id-ID'));
|
|
$('#tag_klasifikasi_menu').html(klasifikasiMenu);
|
|
$('#tgl_menu_tersedia').html(tglMenuTersedia);
|
|
$('#exist_foto').val(exist_foto ? 1 : 0);
|
|
$('#apakah_someday').val(someday ? 1 : 0);
|
|
$('#apakah_menu_siang').val(siang ? 1 : 0);
|
|
$('#apakah_menu_sore').val(sore ? 1 : 0);
|
|
$('#tgl_tersedia').val(el.data('tgl_tersedia'));
|
|
}
|
|
|
|
|
|
function updateCartCount(count) {
|
|
const $cartCount = $('#cartCount');
|
|
if (count > 0) {
|
|
$cartCount.text(count).show();
|
|
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
|
|
let menuNames = cart.map(item => item.nama_menu).join(', ');
|
|
const maxLength = 50;
|
|
|
|
if (menuNames.length > maxLength) {
|
|
menuNames = menuNames.substring(0, maxLength).trim() + '...';
|
|
}
|
|
$('#menuBtn').removeClass('d-none');
|
|
$('#floatingCartButton').removeClass('d-none');
|
|
$('#floatingCartCount').text(cart.length);
|
|
$('#floatingCartDesc').text(menuNames);
|
|
$("#scroll-top").addClass('d-none');
|
|
} else {
|
|
$cartCount.hide();
|
|
$('#floatingCartButton').addClass('d-none');
|
|
$('#menuBtn').addClass('d-none');
|
|
}
|
|
}
|
|
|
|
function parseRupiahToNumber(rpText) {
|
|
return parseInt(rpText.replace(/[^\d]/g, ''), 10) || 0;
|
|
}
|
|
|
|
|
|
$("#checkoutForm").on('submit', function(e){
|
|
e.preventDefault();
|
|
|
|
|
|
let order_id = sessionStorage.getItem('order_id') || null;
|
|
if(order_id){
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Pesanan Belum Selesai',
|
|
text: 'Silakan selesaikan pesanan Anda terlebih dahulu sebelum melanjutkan.',
|
|
timer: 2500,
|
|
}).then(() => {
|
|
window.location.href = '/checkout';
|
|
});
|
|
}
|
|
|
|
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: $('#apakah_menu_sore').val() === "1" ? 'Makan Sore' : 'Makan Siang'
|
|
}];
|
|
let idText = $("#cathering_order_menu_id").val();
|
|
let idMenu = parseInt(idText.replace(/[^\d]/g, ''), 10);
|
|
|
|
let foto = $('#cathering_order_photo').attr('src')
|
|
let resultFoto = foto.replace('/gambar', '');
|
|
|
|
let namaMenu = $("#cathering_order_name").text();
|
|
|
|
let existingItem = cart.find(item => item.id_menu === idMenu);
|
|
|
|
if(!existingItem){
|
|
let kaloriText = $('#kalori_detail').text().trim(); // misal "250 kal"
|
|
let kaloriOnly = kaloriText ? kaloriText.replace(' kal', '').trim() : '';
|
|
const orderItem ={
|
|
id:Date.now(),
|
|
id_menu :idMenu,
|
|
nama_menu : $("#cathering_order_name").text(),
|
|
harga_karyawan : parseRupiahToNumber($("#cathering_order_price_karyawan").text()),
|
|
harga_public : parseRupiahToNumber($("#cathering_order_price_public").text()),
|
|
foto: resultFoto,
|
|
jenis_menu: $('#cathering_order_jenis_menu').text(),
|
|
deskripsi:$("#cathering_order_deskripsi").text(),
|
|
apakah_menu_siang: $('#apakah_menu_siang').val() === "1" ? true: false,
|
|
apakah_menu_sore: $('#apakah_menu_sore').val() === "1" ? true: false,
|
|
apakah_someday: $('#apakah_someday').val() === "1" ? true: false,
|
|
tgl_tersedia: $('#tgl_tersedia').val(),
|
|
kalori: kaloriOnly,
|
|
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 orders = [{
|
|
tgl: '',
|
|
jumlah: 1,
|
|
kategoriPemesanan: $(e).data('apakah_menu_sore') ? 'Makan Sore' : 'Makan Siang'
|
|
}];
|
|
|
|
let idMenu = $(e).data('id');
|
|
let namaMenu = $(e).data('nama_menu');
|
|
let existingItem = cart.find(item => item.id_menu === idMenu);
|
|
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_public : $(e).data('harga_public'),
|
|
foto: $(e).data('foto'),
|
|
jenis_menu: $(e).data('jenis_menu'),
|
|
deskripsi: $(e).data('deskripsi'),
|
|
exist_foto: $(e).data('exist_foto'),
|
|
apakah_menu_siang: $(e).data('apakah_menu_siang'),
|
|
apakah_menu_sore: $(e).data('apakah_menu_sore'),
|
|
apakah_someday: $(e).data('apakah_someday'),
|
|
tgl_tersedia: $(e).data('tgl_tersedia'),
|
|
kalori: $(e).data('kalori'),
|
|
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
|
|
}
|
|
}
|
|
|
|
function handleClick(e){
|
|
const originalHTML = e.innerHTML;
|
|
// Efek klik
|
|
e.classList.add('btn-clicked');
|
|
setTimeout(() => e.classList.remove('btn-clicked'), 80);
|
|
// Ganti isi tombol jadi checklist
|
|
e.innerHTML = '<i class="fas fa-check"></i>';
|
|
// Simulasi proses
|
|
setTimeout(() => {
|
|
e.innerHTML = originalHTML;
|
|
}, 1000);
|
|
|
|
const order_id = sessionStorage.getItem('order_id') || null;
|
|
if(order_id){
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Pesanan Belum Selesai',
|
|
text: 'Silakan selesaikan pesanan Anda terlebih dahulu sebelum melanjutkan.',
|
|
timer: 2500,
|
|
}).then(() => {
|
|
window.location.href = '/checkout';
|
|
});
|
|
}else{
|
|
saveItem(e)
|
|
}
|
|
}
|
|
|
|
function toggleCartList() {
|
|
const list = document.getElementById('cartList');
|
|
list.classList.toggle('d-none');
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
renderCart(cart);
|
|
|
|
// jika baru dibuka, render & pasang listener
|
|
if (!list.classList.contains('d-none')) {
|
|
setTimeout(() => document.addEventListener('click', closeOnOutside, { once: true }), 0);
|
|
}
|
|
}
|
|
|
|
function renderCart(cart) {
|
|
const body = document.getElementById('cartListBody');
|
|
body.innerHTML = cart.length
|
|
? cart.map((it, i) => `
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<span class="small">${it.nama_menu}</span>
|
|
<button class="btn btn-danger btn-sm" onclick="removeItem(${i})">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
`).join('')
|
|
: '<p class="text-center text-muted m-0 py-2">Keranjang kosong</p>';
|
|
if (cart.length === 0) {
|
|
document.getElementById('cartList').classList.add('d-none');
|
|
}
|
|
}
|
|
|
|
function removeItem(index) {
|
|
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
|
|
cart.splice(index, 1);
|
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
|
renderCart(cart);
|
|
updateCartCount(cart.length);
|
|
}
|
|
|
|
function closeOnOutside(e) {
|
|
const list = document.getElementById('cartList');
|
|
const removeButton = e.target.closest('button[onclick^="removeItem"]')
|
|
if (!list.contains(e.target) && !document.getElementById('menuBtn').contains(e.target) && !removeButton) {
|
|
list.classList.add('d-none');
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|