Joko/order_gizi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

progress checkout di

Browse Source
This commit is contained in:
JokoPrasetio 2025-07-21 15:43:03 +07:00
parent 652bd8cc45
commit 34fbfef511
17 changed files with 755 additions and 429 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
app/Http/Controllers/CustomerController.php
View File

@ -18,7 +18,7 @@ class CustomerController extends Controller
public function dataOrder(){
$search = request('search');
$jenis_menu = request('jenis_menu');
$perPage = request()->get('per_page', 6);
$perPage = request()->get('per_page', 12);
if($jenis_menu === "paket"){
return self::dataPaketMenuOrder($search, $perPage);
}
@ -102,65 +102,77 @@ class CustomerController extends Controller
private static function dataPaketMenuOrder($search = null, $perPage){
$query = DB::connection('dbOrderGizi')->table('public.master_paket_menu as mpn')->where('mpn.statusenabled', true);
if(!empty($search)){
$query->where('mpn.nama_paket', 'ILIKE', '%' . $search . '%');
}
private static function dataPaketMenuOrder($search = null, $perPage){
$query = DB::connection('dbOrderGizi')->table('public.master_paket_menu as mpn')->where('mpn.statusenabled', true);
$paginated = $query->select(
'mpn.master_paket_menu_id',
'mpn.nama_paket',
'mpn.foto',
'mpn.harga_public',
'mpn.harga_karyawan',
'mpn.harga_keluarga_pasien',
'mpn.deskripsi',
'mpn.status'
)->paginate($perPage);
$paketMenuIds = collect($paginated->items())->pluck('master_paket_menu_id')->toArray();
$klasifikasi = DB::connection('dbOrderGizi')
->table('public.klasifikasi_menu_diet as kmd')
->join('public.kategori_diet as kd', 'kd.kategori_diet_id', '=', 'kmd.kategori_diet_id')
->whereIn('kmd.master_paket_menu_id', $paketMenuIds)
->select('kmd.master_paket_menu_id', 'kd.kategori_diet_id', 'kd.nama_kategori_diet')
->get()
->groupBy('master_paket_menu_id');
if(!empty($search)){
$query->where('mpn.nama_paket', 'ILIKE', '%' . $search . '%');
}
$result = collect($paginated->items())->map(function ($paketMenu) use ($klasifikasi) {
return [
'master_paket_menu_id' => $paketMenu->master_paket_menu_id,
'nama' => $paketMenu->nama_paket,
'foto' => $paketMenu->foto,
'jenis_menu' => "paket",
'harga_public' => $paketMenu->harga_public,
'harga_karyawan' => $paketMenu->harga_karyawan,
'harga_keluarga_pasien' => $paketMenu->harga_keluarga_pasien,
'status' => $paketMenu->status,
'deskripsi' => $paketMenu->deskripsi,
'klasifikasiMenu' => isset($klasifikasi[$paketMenu->master_paket_menu_id]) ? $klasifikasi[$paketMenu->master_paket_menu_id]->map(function ($item) {
return [
'kategori_diet_id' => $item->kategori_diet_id,
'nama_kategori_diet' => $item->nama_kategori_diet,
];
})->values() : [],
];
});
$paginated = $query->select(
'mpn.master_paket_menu_id',
'mpn.nama_paket',
'mpn.foto',
'mpn.harga_public',
'mpn.harga_karyawan',
'mpn.harga_keluarga_pasien',
'mpn.deskripsi',
'mpn.status'
)->paginate($perPage);
return response()->json([
'status' => true,
'message' => 'Berhasil mendapatkan data',
'data' => [
'data' => $result,
'current_page' => $paginated->currentPage(),
'last_page' => $paginated->lastPage(),
'per_page' => $paginated->perPage(),
'total' => $paginated->total(),
]
]);
}
$paketMenuIds = collect($paginated->items())->pluck('master_paket_menu_id')->toArray();
$klasifikasi = DB::connection('dbOrderGizi')
->table('public.klasifikasi_menu_diet as kmd')
->join('public.kategori_diet as kd', 'kd.kategori_diet_id', '=', 'kmd.kategori_diet_id')
->whereIn('kmd.master_paket_menu_id', $paketMenuIds)
->select('kmd.master_paket_menu_id', 'kd.kategori_diet_id', 'kd.nama_kategori_diet')
->get()
->groupBy('master_paket_menu_id');
$result = collect($paginated->items())->map(function ($paketMenu) use ($klasifikasi) {
return [
'master_paket_menu_id' => $paketMenu->master_paket_menu_id,
'nama' => $paketMenu->nama_paket,
'foto' => $paketMenu->foto,
'jenis_menu' => "paket",
'harga_public' => $paketMenu->harga_public,
'harga_karyawan' => $paketMenu->harga_karyawan,
'harga_keluarga_pasien' => $paketMenu->harga_keluarga_pasien,
'status' => $paketMenu->status,
'deskripsi' => $paketMenu->deskripsi,
'klasifikasiMenu' => isset($klasifikasi[$paketMenu->master_paket_menu_id]) ? $klasifikasi[$paketMenu->master_paket_menu_id]->map(function ($item) {
return [
'kategori_diet_id' => $item->kategori_diet_id,
'nama_kategori_diet' => $item->nama_kategori_diet,
];
})->values() : [],
];
});
return response()->json([
'status' => true,
'message' => 'Berhasil mendapatkan data',
'data' => [
'data' => $result,
'current_page' => $paginated->currentPage(),
'last_page' => $paginated->lastPage(),
'per_page' => $paginated->perPage(),
'total' => $paginated->total(),
]
]);
}
public function checkout(){
$payload = [
'title' => 'Checkout '
];
return view('guest.checkout_payment', $payload);
}
public function submitCheckout(){
$dataCart = json_decode(request('cart_data'), true);
dd(request()->all());
}
}

19
app/Models/Order.php
View File

@ -6,5 +6,22 @@ use Illuminate\Database\Eloquent\Model;
class Order extends Model
{
//
protected $connection = 'dbOrderGizi';
protected $table = 'public.order';
public $timestamps = false;
protected $primaryKey = "order_id";
protected $fillable =[
'entry_at',
'modified_at',
'no_order',
'statusenabled',
'kode_order',
'nama_menu',
'foto',
'jenis_menu',
'harga_public',
'harga_karyawan',
'deskripsi',
'status'
];
}

BIN
public/gambar/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
public/gambar/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/gambar/3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

42
public/js/checkout/index.js Normal file
View File

@ -0,0 +1,42 @@
document.addEventListener('DOMContentLoaded', () => {
$("#cartButton").addClass('d-none');
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
if (cart.length === 0) {
window.location.href="/"
return
}
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();
}
}
// Jalankan saat load awal (jika radio sudah terpilih)
toggleCustomerFields();
// Jalankan saat user memilih salah satu radio
$('input[name="jenis_customer"]').on('change', function() {
toggleCustomerFields();
});
$("#checkoutFormFinal").on('submit', function(e){
if(cart.length === 0){
e.preventDefault();
alert("Keranjang kosong. Silakan pilih menu terlebih dahulu!");
return;
}
document.getElementById('cart_data').value = JSON.stringify(cart)
});
});

193
public/js/order_guest/checkout.js Normal file
View File

@ -0,0 +1,193 @@
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');
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 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 onKategoriChange(itemId, index) {
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
const item = cart.find(i => i.id === itemId);
if (!item) return;
const kategori = $(`[data-item-id='${itemId}'][data-index='${index}'] .kategori-pemesanan-input`).val();
item.pesanan[index].kategoriPemesanan = kategori;
sessionStorage.setItem('cart', JSON.stringify(cart));
}
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');
}
}

2
public/js/order_guest/functions.js
View File

@ -4,7 +4,7 @@ $(document).ready(function(){
filterState ={
jenis_menu: jenisMenuAwal,
search:'',
per_page: 6,
per_page: 12,
}
fetchMenu(filterState)

561
public/js/order_guest/index.js
View File

@ -1,200 +1,215 @@
$(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');
}
});
});
$(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 || 6,
search: filter.search || '',
jenis_menu: filter.jenis_menu || ''
}).toString();
containerGuest.html('<p class="text-muted">Memuat data....</p>');
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();
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}">
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>
<!-- 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>
<!-- 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>
<!-- 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>
`;
});
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>`;
// 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() + '...';
}
containerGuest.html(html);
})
.catch(err => {
containerGuest.html('<p class="text-danger">Terjadi kesalahan saat memuat data.</p>');
console.error(err);
});
}
$('#floatingCartButton').removeClass('d-none');
$('#floatingCartCount').text(cart.length);
$('#floatingCartDesc').text(menuNames);
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');
}
}
} else {
$cartCount.hide();
$('#floatingCartButton').addClass('d-none');
}
}
$("#checkoutForm").on('submit', function(e){
e.preventDefault();
const orders = [];
e.preventDefault();
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());
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)
@ -207,161 +222,73 @@ function updateCartCount(count) {
}else{
const orderItem ={
id:Date.now(),
id_menu : $("#cathering_order_menu_id").text(),
nama_menu : $("#cathering_order_name").text(),
harga : $("#cathering_order_price").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 renderCartList() {
$("#cartSidebar").offcanvas('show')
$('#floatingCartButton').addClass('d-none');
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
let total = 0;
function saveItem(e){
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
const html = cart.map(item => {
const hargaNum = parseInt(item.harga.replace(/[^\d]/g, ''));
let pesananHTML = '';
const now = new Date();
const todayFormatted = now.getFullYear() + '-' + (now.getMonth() + 1).toString().padStart(2, '0') + '-' + now.getDate().toString().padStart(2, '0')
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 orders = [{
tgl: todayFormatted,
jumlah: 1,
kategoriPemesanan: ''
}];
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);
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
}
});
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;
cart.push(orderItem)
}
});
sessionStorage.setItem('cart', JSON.stringify(cart));
validateCheckoutButton();
sessionStorage.setItem('cart', JSON.stringify(cart))
updateCartCount(cart.length)
}
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 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 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');
}
}

20
public/js/order_guest/register.js
View File

@ -1,19 +1,19 @@
$(document).ready(function(){
const modal = new bootstrap.Modal(document.getElementById('registerModal'), {
backdrop: 'static', // Tidak bisa klik luar
keyboard: false // Tidak bisa ESC
});
if(!sessionStorage.getItem('customerData')){
modal.show();
}
// const modal = new bootstrap.Modal(document.getElementById('registerModal'), {
// backdrop: 'static', // Tidak bisa klik luar
// keyboard: false // Tidak bisa ESC
// });
// if(!sessionStorage.getItem('customerData')){
// modal.show();
// }
$("#formRegister").on('submit', function(e){
e.preventDefault()
if(this.checkValidity()){
const formData =Object.fromEntries(new FormData(this).entries())
sessionStorage.setItem('customerData', JSON.stringify(formData))
modal.hide()
modal.hide()
if(formData.nama_customer){
$("#welcomeMessage").html(`Selamat Datang, <strong>${formData.nama_customer}</strong> !`)
}
@ -21,4 +21,4 @@ $(document).ready(function(){
this.reportValidity()
}
})
})
})

31
resources/views/guest/checkout_order.blade.php
View File

@ -1,7 +1,7 @@
<div class="modal fade"
id="checkoutModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
<div class="modal fade"
id="checkoutModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg modal-dialog-centered">
@ -19,25 +19,26 @@ aria-hidden="true"
</div>
<div class="col-md-8">
<h5 id="cathering_order_name" class="mb-2"></h5>
<p class="mb-0">
<strong>Harga:</strong> <span id="cathering_order_price"></span>
</p>
<div class="row text-muted small mb-2">
<div class="col-6 fw-semibold">Harga Karyawan:</div>
<div class="col-6 text-end fw-semibold"><span id="cathering_order_price_karyawan"></span> </div>
<div class="col-6 fw-semibold">Harga Keluarga Pasien:</div>
<div class="col-6 text-end fw-semibold"><span id="cathering_order_price_keluarga_pasien"></span> </div>
</div>
<span id="cathering_order_deskripsi" class="text-muted mb-2"></span>
<h5 class="d-none" id="cathering_order_menu_id"></h5>
<h5 class="d-none" id="cathering_order_jenis_menu"></h5>
<div id="tag_klasifikasi_menu" class="mt-2"></div>
</div>
<div class="col-md-12">
<label class="form-label mt-3">Tanggal & Jumlah Pengambilan</label>
<div id="order_input_wrapper">
</div>
<button type="button" class="btn btn-sm btn-primary mt-2" onclick="addOrderRow()">+ Tambah Tanggal</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Lanjutkan</button>
<button type="submit" class="btn btn-success"><i class="fas fa-shopping-cart me-1"></i> Order</button>
</div>
</form>
</div>
</div>
</div>
</div>

131
resources/views/guest/checkout_payment.blade.php Normal file
View File

@ -0,0 +1,131 @@
@extends('guest.layout.main')
@section('body_main_guests')
<section class="section py-5 bg-light">
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h4 class="mb-0">Checkout Order</h4>
<a href="/" class="btn btn-outline-success">
<i class="fa fa-arrow-left me-1"></i> Kembali ke Menu
</a>
</div>
<div class="alert alert-info d-flex align-items-center" role="alert">
<i class="fa fa-info-circle me-2"></i>
<div>
Sebelum melakukan checkout, silakan isi biodata Anda dengan lengkap terlebih dahulu.
</div>
</div>
{{-- Form Identitas --}}
<form id="checkoutFormFinal" method="POST" action="/submit-checkout">
@csrf
<div class="row g-3 mb-4">
<input type="hidden" name="cart_data" id="cart_data">
<div class="col-md-6">
<label for="exampleInputEmail1" class="form-label">Apakah Anda Seorang ?</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_customer" id="radio_karyawan" value="Karyawan RSAB Harapan Kita" required>
<label class="form-check-label" for="radio_karyawan" >
Karyawan RSAB Harapan Kita
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_customer" id="radio_kp" value="Keluarga Pasien / Penunggu Pasien" required>
<label class="form-check-label" for="radio_kp">
Keluarga Pasien / Penunggu Pasien
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_customer" id="radio_public" value="Masyarakat Umum" required>
<label class="form-check-label" for="radio_public">
Masyarakat Umum
</label>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Nama Pemesan</label>
<input type="text" class="form-control" name="nama_pemesan" id="nama_pemesan" required>
</div>
<div class="col-md-6">
<label class="form-label">Jenis Kelamin</label>
<select class="form-select" name="jenis_kelamin" id="jenis_kelamin" required>
<option value="">Pilih...</option>
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Tanggal Lahir</label>
<input type="date" class="form-control" name="tanggal_lahir" id="tanggal_lahir">
</div>
<div class="col-md-6">
<label class="form-label">Tinggi Badan</label>
<input type="number" class="form-control" name="tinggi_badan" id="tinggi_badan">
</div>
<div class="col-md-6">
<label class="form-label">Berat Badan</label>
<input type="number" class="form-control" name="berat_badan" id="berat_badan">
</div>
<div class="col-md-12">
<label class="form-label">No. Whatsapp</label>
<input type="number" class="form-control" name="no_whatsapp" id="no_whatsapp" required>
</div>
{{-- Pasien --}}
<div class="col-md-6 pasien">
<label class="form-label">Nama Pasien</label>
<input type="text" class="form-control pasien-field" name="nama_pasien" id="nama_pasien">
</div>
<div class="col-md-6 pasien">
<label class="form-label">Ruang Perawatan</label>
<select class="form-select pasien-field" name="ruang_perawatan" id="ruang_perawatan">
<option value="">Pilih...</option>
<option value="Ruang Kenanga">Ruang Kenanga</option>
<option value="Ruang Menur">Ruang Menur</option>
<option value="Ruang Melati">Ruang Melati</option>
<option value="Ruang Mawar">Ruang Mawar</option>
<option value="Ruang Cempaka">Ruang Cempaka</option>
<option value="Ruang Widuri">Ruang Widuri</option>
<option value="Ruang Teratai">Ruang Teratai</option>
<option value="Klinik Anggrek">Klinik Melati</option>
<option value="Ruang VK">Ruang VK</option>
</select>
</div>
<div class="col-md-6 pasien">
<label class="form-label">Nomor Kamar Perawatan</label>
<input type="text" class="form-control pasien-field" name="no_kamar" id="no_kamar">
</div>
<div class="col-md-6 pasien">
<label class="form-label">Kelas Perawatan ? </label>
<select class="form-select pasien-field" name="kelas_perawatan" id="kelas_perawatan">
<option value="">Pilih...</option>
<option value="VIP A">VIP A</option>
<option value="VIP B">VIP B</option>
<option value="Kelas I">Kelas I</option>
<option value="Mesa Tesa">Mesa Tesa</option>
</select>
</div>
{{-- End Pasien --}}
{{-- Karyawan --}}
<div class="col-md-6 karyawan">
<label class="form-label">Bagian /Instalasi?</label>
<input type="text" class="form-control karyawan-field" name="bagian_instalasi" id="bagian_instalasi">
</div>
<div class="col-md-6 karyawan">
<label class="form-label">Ekstensien yang bisa di Hubungi?</label>
<input type="text" class="form-control karyawan-field" name="no_ekstensien" id="no_ekstensien">
</div>
{{-- End Karyawan --}}
</div>
<button type="submit" class="btn btn-success w-100">Simpan Order</button>
</form>
</div>
</section>
<script src="{{ ver('/js/checkout/index.js') }}"></script>
@endsection

31
resources/views/guest/index.blade.php
View File

@ -13,6 +13,7 @@
<li class="nav-item "><a class="nav-link text-black" href="#" data-filter="minuman">Minuman</a></li>
<li class="nav-item"><a class="nav-link text-black" href="#" data-filter="snack">Snack</a></li>
<li class="nav-item"><a class="nav-link text-black" href="#" data-filter="paket">Paket</a></li>
<li class="nav-item"><a class="nav-link text-black" href="#" data-filter="">Jadwal Konsultasi Gizi</a></li>
</ul>
</div>
<div class="col-md-6">
@ -22,26 +23,22 @@
</div>
</div>
<div id="order_guest_id"></div>
<div id="floatingCartButton"
class="cart-floating bg-success text-white rounded d-none shadow-lg"
onclick="renderCartList()"
style="cursor: pointer; position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 1050; width: 90%; max-width: 500px;">
<div class="d-flex justify-content-between align-items-center px-3 py-2">
<div>
<strong><span id="floatingCartCount">0</span> item</strong><br>
<small id="floatingCartDesc">Isi keranjang anda</small>
</div>
<div class="d-flex align-items-center">
<strong class="me-3 text-white" id="floatingCartTotal">Rp 0</strong>
<div class="btn btn-light btn-sm">
<i class="fa-solid fa-cart-shopping text-success"></i>
<div id="floatingCartButton"
class="cart-floating bg-success text-white rounded d-none shadow-lg"
onclick="checkout()"
style="cursor: pointer; position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 1050; width: 90%; max-width: 500px;">
<div class="d-flex justify-content-between align-items-center px-3 py-2">
<div>
<strong><span id="floatingCartCount">0</span> item</strong><br>
<small id="floatingCartDesc">Isi keranjang anda</small>
</div>
<div class="d-flex align-items-center">
<div class="btn btn-light btn-sm">
<i class="fa-solid fa-cart-shopping text-success"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

2
resources/views/guest/keranjang.blade.php
View File

@ -17,6 +17,6 @@
<strong>Total Bayar:</strong>
<strong id="cartTotal">Rp 0</strong>
</div>
<button class="btn btn-success w-100" onclick="checkoutCart()">Checkout</button>
<a class="btn btn-success w-100" href="/checkout">Checkout</a>
</div>
</div>

2
resources/views/guest/layout/partials/header.blade.php
View File

@ -12,7 +12,7 @@
<nav id="navmenu" class="navmenu">
{{-- <i class="mobile-nav-toggle d-xl-none bi bi-list"></i> --}}
<button type="button" class="btn btn-sm btn-success position-relative" id="cartButton" data-bs-toggle="offcanvas" onclick="renderCartList()">
<button type="button" class="btn btn-sm btn-success position-relative" id="cartButton" onclick="checkout()">
<i class="fa-solid fa-cart-shopping"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="cartCount" style="display: none;">
0

18
resources/views/guest/register.blade.php
View File

@ -1,7 +1,7 @@
<div class="modal fade"
id="registerModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
<div class="modal fade"
id="registerModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg modal-dialog-centered">
@ -36,7 +36,7 @@ aria-hidden="true"
</label>
</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Nama Anda ?</label>
<input type="text" class="form-control" name="nama_customer" id="nama_customer" required>
@ -45,10 +45,14 @@ aria-hidden="true"
<label for="exampleInputPassword1" class="form-label">Jenis Kelamin ?</label>
<select class="form-select" aria-label="Default select example" name="jenis_kelamin_customer" id="jenis_kelamin_customer" required>
<option value="" selected disabled>Pilih Jenis Kelamin</option>
<option value="Laki Laki">Laki Laki</option>
<option value="Laki-laki">Laki Laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Tanggal Lahir</label>
<input type="date" class="form-control" name="tanggal_lahir" id="tanggal_lahir">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Tinggi Badan ?</label>
<input type="number" class="form-control" name="tinggi_badan_customer" id="tinggi_badan_customer">
@ -64,4 +68,4 @@ aria-hidden="true"
</form>
</div>
</div>
</div>
</div>

2
routes/web.php
View File

@ -19,4 +19,6 @@ Route::get('datatable/menu', [MenuController::class, 'datatable']);
Route::resource('/dashboard/klasifikasi-menu', KlasifikasiMenuController::class);
Route::get('/', [CustomerController::class, 'index']);
Route::get('/checkout', [CustomerController::class, 'checkout']);
Route::get('/datamenu', [CustomerController::class, 'dataOrder']);
Route::post('/submit-checkout', [CustomerController::class, 'submitCheckout']);