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

new version

Browse Source
This commit is contained in:
JokoPrasetio 2025-10-16 10:01:59 +07:00
parent f0df828334
commit c7611df602
8 changed files with 1029 additions and 579 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/js/checkout/index.js
View File

@ -32,6 +32,7 @@ document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.next-step').forEach(btn => {
btn.addEventListener('click', async () => {
const btnLoad = btn;
const originalHTML = btnLoad.innerHTML;
btnLoad.disabled = true;
btnLoad.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Memproses...';
let cart = JSON.parse(sessionStorage.getItem('cart') || '[]');
@ -104,7 +105,7 @@ document.addEventListener('DOMContentLoaded', () => {
Swal.fire('Error', 'Terjadi kesalahan, silakan coba lagi.', 'error');
}finally{
btnLoad.disabled = false;
btnLoad.innerHTML = 'Selanjutnya';
btnLoad.innerHTML = originalHTML;
}
});
@ -218,7 +219,13 @@ function showStep(index) {
for(let i = 1; i <= total; i++){
const circle = document.getElementById(`step-circle-${i}`)
if(circle){
circle.classList.toggle('active', i === index + 1)
circle.classList.toggle('active', i === index + 1);
circle.classList.toggle('completed', i < index + 1);
}
const indicator = document.getElementById(`indicator-step-${i}`);
if (indicator) {
indicator.classList.toggle('active', i === index + 1);
indicator.classList.toggle('completed', i < index + 1);
}
}
}

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

@ -1,73 +1,67 @@
let filterState = {};
$(document).ready(function(){
const jenisMenuAwal = $("#tabJenisMenu .nav-link.active").data("filter")
filterState ={
$(document).ready(function () {
const jenisMenuAwal = $("#tabJenisMenu .btn.active").data("filter") || 'makanan';
filterState = {
jenis_menu: jenisMenuAwal,
search:'',
search: '',
per_page: 50,
}
};
fetchMenu(filterState)
fetchMenu(filterState);
$('#tabJenisMenu .btn').on('click', function(e) {
$('#tabJenisMenu .btn').on('click', function (e) {
e.preventDefault();
const jenis = $(this).data('filter');
// reset semua button jadi outline-success
$('#tabJenisMenu .btn')
.removeClass('btn-success active')
.addClass('btn-outline-success');
$('#tabJenisMenu .btn').removeClass('active');
$(this).addClass('active');
// set button yang dipilih jadi active
$(this)
.removeClass('btn-outline-success')
.addClass('btn-success active');
// reset datepicker & label
datePicker.clear();
$('#tanggalTerpilihLabel').addClass('d-none').text('');
if (typeof datePicker !== 'undefined') {
datePicker.clear();
}
$('#tanggalTerpilihLabel').addClass('d-none');
$('#labelTanggalText').text('Menampilkan menu...');
$('#resetTanggal').addClass('d-none');
// set filter state
filterState.jenis_menu = jenis;
fetchMenu(filterState);
});
$(".alert-link").on('click', function(e){
$(".alert-link").on('click', function (e) {
e.preventDefault();
$('#tabJenisMenu .btn').removeClass('btn-success active').addClass('btn-outline-success');
$('#tabJenisMenu .btn[data-filter="konsultasi" ]').removeClass('btn-outline-success').addClass('btn-success active');
const konsultasiBtn = $('#tabJenisMenu .btn[data-filter="konsultasi"]');
if (konsultasiBtn.length) {
$('#tabJenisMenu .btn').removeClass('active');
konsultasiBtn.addClass('active');
}
if (typeof datePicker !== 'undefined') {
datePicker.clear();
}
if (typeof datePicker !== 'undefined') {
datePicker.clear();
}
filterState.jenis_menu = 'konsultasi';
document.getElementById('tanggalTerpilihLabel').classList.add('d-none'); // Sembunyikan label
document.getElementById('tanggalTerpilihLabel').textContent = '';
document.getElementById('resetTanggal').classList.add('d-none');
$('#tanggalTerpilihLabel').addClass('d-none');
$('#labelTanggalText').text('Menampilkan menu...');
$('#resetTanggal').addClass('d-none');
fetchMenu(filterState);
})
});
let searchTimout;
$('#searchMenu').on('input', function(){
$('#searchMenu').on('input', function () {
clearTimeout(searchTimout);
const keyword = $(this).val();
searchTimout = setTimeout(() => {
filterState.search = keyword;
fetchMenu(filterState)
}, 300)
})
})
fetchMenu(filterState);
}, 300);
});
});
function changePerPage(select) {
const newPerPage = parseInt(select.value);
filterState.per_page = newPerPage
fetchMenu(filterState)
filterState.per_page = newPerPage;
fetchMenu(filterState);
}

227
resources/views/guest/checkout/checkout_payment.blade.php
View File

@ -2,56 +2,197 @@
@section('body_main_guests')
<section class="section py-5 bg-light">
<style>
.checkout-wrapper {
background: #ffffff;
border-radius: 28px;
}
.checkout-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
#stepIndicators {
gap: 0.75rem;
}
#stepIndicators .step-indicator {
position: relative;
}
#stepIndicators .step-circle {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
background: #e9f5ef;
color: #2c9e7b;
margin: 0 auto;
transition: all 0.2s ease;
}
#stepIndicators .step-indicator.active .step-circle,
#stepIndicators .step-indicator.completed .step-circle,
#stepIndicators .step-circle.completed {
background: linear-gradient(135deg, #2c9e7b, #22a3a3);
color: #fff;
box-shadow: 0 0.85rem 1.6rem rgba(34, 163, 163, 0.25);
}
#stepIndicators .step-indicator small {
font-weight: 600;
letter-spacing: 0.02em;
color: #6c7d7b;
}
#stepIndicators .step-indicator.active small,
#stepIndicators .step-indicator.completed small {
color: #2c7d66;
}
.progress {
height: 8px;
background-color: #eef2f1;
border-radius: 999px;
}
.progress-bar {
border-radius: 999px;
transition: width 0.25s ease;
}
.form-step {
border-radius: 18px;
border: 1px solid rgba(0, 0, 0, 0.04);
background: #ffffff;
}
.form-step .section-title {
font-size: 1.05rem;
font-weight: 700;
color: #2b6351;
}
.info-alert {
border-radius: 16px;
border-left: 4px solid #2c9e7b;
background: #f2fbf7;
}
.summary-card {
border-radius: 18px;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.drop-zone {
border: 2px dashed rgba(44, 158, 123, 0.35);
border-radius: 16px;
transition: all 0.3s ease;
background: rgba(44, 158, 123, 0.05);
}
.drop-zone:hover {
border-color: rgba(44, 158, 123, 0.6);
background: rgba(44, 158, 123, 0.08);
}
@media (max-width: 991.98px) {
.checkout-wrapper {
border-radius: 22px;
padding: 2rem;
}
}
@media (max-width: 767.98px) {
.checkout-wrapper {
padding: 1.75rem;
}
#stepIndicators {
flex-direction: column;
align-items: stretch;
text-align: left;
}
#stepIndicators .step-indicator {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.6rem 0.85rem;
border-radius: 999px;
background: #f8fbfa;
}
#stepIndicators .step-circle {
margin: 0;
}
#stepIndicators .step-indicator small {
margin-top: 0.25rem;
}
}
@media (max-width: 575.98px) {
.checkout-wrapper {
padding: 1.4rem;
}
}
</style>
<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 class="checkout-wrapper shadow-sm p-4 p-xl-5 mx-auto">
<div class="checkout-header mb-4 pb-3 d-flex flex-column flex-lg-row align-items-lg-center gap-3">
<div>
<h3 class="fw-bold mb-1">Checkout Pesanan</h3>
<p class="text-muted mb-0 small">Lengkapi data, konfirmasi pesanan, lalu selesaikan pembayaran.</p>
</div>
<div class="ms-lg-auto">
<a href="/" class="btn btn-outline-success rounded-pill px-3">
<i class="fa fa-arrow-left me-2"></i>Kembali ke Menu
</a>
</div>
</div>
{{-- Form Identitas --}}
<form id="checkoutFormFinal" method="POST" enctype="multipart/form-data">
@csrf
<!-- Step Indicators -->
<div class="d-flex justify-content-between align-items-center mb-3 px-2" id="stepIndicators">
<div class="step-indicator text-center flex-fill">
<div class="step-circle" id="step-circle-1">1</div>
<small class="d-block mt-1">Data</small>
</div>
<div class="step-indicator text-center flex-fill">
<div class="step-circle" id="step-circle-2">2</div>
<small class="d-block mt-1">Konfirmasi</small>
</div>
<div class="step-indicator text-center flex-fill">
<div class="step-circle" id="step-circle-3">3</div>
<small class="d-block mt-1">Pembayaran</small>
</div>
<form id="checkoutFormFinal" method="POST" enctype="multipart/form-data" class="mt-3">
@csrf
<div class="d-flex justify-content-between flex-column flex-lg-row align-items-stretch mb-4 px-lg-2" id="stepIndicators">
<div class="step-indicator text-center flex-fill active" id="indicator-step-1">
<div class="step-circle active" id="step-circle-1">1</div>
<small class="d-block mt-2 text-uppercase">Data Pemesan</small>
</div>
<div class="step-indicator text-center flex-fill" id="indicator-step-2">
<div class="step-circle" id="step-circle-2">2</div>
<small class="d-block mt-2 text-uppercase">Konfirmasi</small>
</div>
<div class="step-indicator text-center flex-fill" id="indicator-step-3">
<div class="step-circle" id="step-circle-3">3</div>
<small class="d-block mt-2 text-uppercase">Pembayaran</small>
</div>
</div>
<div class="progress mb-4">
<div class="progress-bar bg-success" role="progressbar" id="stepProgressBar" style="width: 33%;">
Langkah 1 dari 3
</div>
</div>
@include('guest.checkout.step.step1')
@include('guest.checkout.step.step2')
@include('guest.checkout.step.step3')
</form>
</div>
<div class="progress mb-4">
<div class="progress-bar bg-success" role="progressbar" id="stepProgressBar" style="width: 50%;">
Langkah 1 dari 2
</div>
</div>
{{-- STEP ONE --}}
@include('guest.checkout.step.step1')
{{-- STEP TWO --}}
@include('guest.checkout.step.step2')
{{-- STEP THREE --}}
@include('guest.checkout.step.step3')
</form>
</div>
</div>
</section>
@include('guest.checkout.modal.noteOrder')
@include('guest.checkout.modal.confirmPaymentBilling')
<script>
const karhohidrats = {!! json_encode($karbohidrat) !!}
</script>
<script src="{{ ver('/js/checkout/index.js') }}"></script>
<script src="{{ ver('/js/checkout/action.js') }}"></script>
<script>
const karhohidrats = {!! json_encode($karbohidrat) !!};
</script>
<script src="{{ ver('/js/checkout/index.js') }}"></script>
<script src="{{ ver('/js/checkout/action.js') }}"></script>
@endsection

266
resources/views/guest/checkout/step/step1.blade.php
View File

@ -1,137 +1,133 @@
<div class="form-step active">
<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 ? <span class="text-danger">*</span></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 for="exampleInputEmail1" class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_kelamin" value="Laki-laki" required>
<label class="form-check-label">
Laki-laki
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_kelamin" id="radio_kp" value="Perempuan" required>
<label class="form-check-label">
Perempuan
</label>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Nama Pemesan <span class="text-danger">*</span></label>
<input type="text" class="form-control" name="nama_pemesan" id="nama_pemesan" required>
<input type="hidden" class="form-control" name="id_karyawan" id="id_karyawan">
<div id="help_nama_pemesan" class="form-text d-none">Silakan cari dan pilih nama karyawan.</div>
</div>
<div class="col-md-6">
<label class="form-label">No. Whatsapp <span class="text-danger">*</span></label>
<input type="number" class="form-control" name="no_whatsapp" id="no_whatsapp" required>
</div>
<div class="col-md-12">
<label class="form-label">Email <span class="text-danger">*</span></label>
<input type="email" class="form-control" name="email" id="email" required>
<div id="help_email_karyawan" class="form-text d-none">Notifikasi dari sistem belum dapat dikirim ke email dengan domain @rsabhk.co.id, oleh karena itu karyawan disarankan memakai alamat email lain</div>
</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="form-step card shadow-sm border-0 p-4 active">
<h5 class="section-title mb-4">Langkah 1: Informasi Pemesan</h5>
<input type="hidden" name="cart_data" id="cart_data">
{{-- Pasien --}}
<div class="col-md-6 pasien">
<label class="form-label">Nama Pasien <span class="text-danger">*</span></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 <span class="text-danger">*</span></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="Ruang Anggrek">Ruang Anggrek</option>
<option value="Ruang VK">Ruang VK</option>
<option value="Klinik Melati">Klinik Melati</option>
<option value="Ruang Tanjung">Ruang Tanjung</option>
<option value="Ruang Gambir">Ruang Gambir</option>
</select>
</div>
<div class="col-md-6 pasien">
<label class="form-label">Nomor Kamar Perawatan <span class="text-danger">*</span></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 <span class="text-danger">*</span></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="Klinik Melati">Klinik Melati</option>
</select>
</div>
{{-- End Pasien --}}
{{-- Karyawan --}}
<div class="col-md-6 karyawan">
<label class="form-label">Bagian /Instalasi <span class="text-danger">*</span></label>
<input type="text" class="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 --}}
{{-- Umum --}}
<div class="col-md-12 umum">
<label class="form-label">Alamat <span class="text-danger">*</span></label>
<textarea class="form-control umum-field" name="alamat" id="alamat"></textarea>
</div>
{{-- End Umum --}}
</div>
<button type="button" class="btn btn-success w-100 next-step">Lanjutkan</button>
<div class="row g-4 mb-4">
<div class="col-md-6">
<label class="form-label fw-semibold">Anda sebagai <span class="text-danger">*</span></label>
<div class="card border-0 shadow-sm p-3 h-100">
<div class="form-check mb-2">
<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 mb-2">
<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>
{{-- <script>
new TomSelect("#ruang_perawatan",{
sortField: {field: "text"}
})
</script> --}}
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">Jenis Kelamin <span class="text-danger">*</span></label>
<div class="card border-0 shadow-sm p-3 h-100">
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="jenis_kelamin" value="Laki-laki" required>
<label class="form-check-label">
Laki-laki
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_kelamin" value="Perempuan" required>
<label class="form-check-label">
Perempuan
</label>
</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">Nama Pemesan <span class="text-danger">*</span></label>
<input type="text" class="form-control" name="nama_pemesan" id="nama_pemesan" required>
<input type="hidden" class="form-control" name="id_karyawan" id="id_karyawan">
<div id="help_nama_pemesan" class="form-text d-none">Silakan cari dan pilih nama karyawan.</div>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">No. Whatsapp <span class="text-danger">*</span></label>
<input type="number" class="form-control" name="no_whatsapp" id="no_whatsapp" required>
</div>
<div class="col-md-12">
<label class="form-label fw-semibold">Email <span class="text-danger">*</span></label>
<input type="email" class="form-control" name="email" id="email" required>
<div id="help_email_karyawan" class="form-text d-none">Notifikasi dari sistem belum dapat dikirim ke email dengan domain @rsabhk.co.id, oleh karena itu karyawan disarankan memakai alamat email lain.</div>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">Tinggi Badan (cm)</label>
<input type="number" class="form-control" name="tinggi_badan" id="tinggi_badan">
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">Berat Badan (kg)</label>
<input type="number" class="form-control" name="berat_badan" id="berat_badan">
</div>
{{-- Pasien --}}
<div class="col-md-6 pasien">
<label class="form-label fw-semibold">Nama Pasien <span class="text-danger">*</span></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 fw-semibold">Ruang Perawatan <span class="text-danger">*</span></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="Ruang Anggrek">Ruang Anggrek</option>
<option value="Ruang VK">Ruang VK</option>
<option value="Klinik Melati">Klinik Melati</option>
<option value="Ruang Tanjung">Ruang Tanjung</option>
<option value="Ruang Gambir">Ruang Gambir</option>
</select>
</div>
<div class="col-md-6 pasien">
<label class="form-label fw-semibold">Nomor Kamar Perawatan <span class="text-danger">*</span></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 fw-semibold">Kelas Perawatan <span class="text-danger">*</span></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="Klinik Melati">Klinik Melati</option>
</select>
</div>
{{-- End Pasien --}}
{{-- Karyawan --}}
<div class="col-md-6 karyawan">
<label class="form-label fw-semibold">Bagian / Instalasi <span class="text-danger">*</span></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 fw-semibold">Ekstensi yang dapat dihubungi</label>
<input type="text" class="form-control karyawan-field" name="no_ekstensien" id="no_ekstensien">
</div>
{{-- End Karyawan --}}
{{-- Umum --}}
<div class="col-md-12 umum">
<label class="form-label fw-semibold">Alamat <span class="text-danger">*</span></label>
<textarea class="form-control umum-field" name="alamat" id="alamat" rows="3"></textarea>
</div>
{{-- End Umum --}}
</div>
<div class="d-grid d-md-flex justify-content-md-end">
<button type="button" class="btn btn-success btn-lg px-4 next-step">Selanjutnya</button>
</div>
</div>

115
resources/views/guest/checkout/step/step2.blade.php
View File

@ -1,62 +1,61 @@
<div class="form-step d-none">
<h5 class="mb-4">Langkah 2: Konfirmasi Pemesanan</h5>
<div class="form-step card shadow-sm border-0 p-4 d-none">
<h5 class="section-title mb-4">Langkah 2: Konfirmasi Pesanan</h5>
{{-- Ringkasan Pesanan --}}
<h6 class="fw-bold mb-3">Pesanan Gizi</h6>
<div class="summary-card bg-light p-3 rounded mb-3">
<h6 class="fw-semibold mb-3 text-success">Ringkasan Pesanan</h6>
<div id="checkout_cart_summary">
{{-- Render melalui JavaScript --}}
</div>
</div>
<div class="d-flex flex-column flex-md-row justify-content-between gap-2 mt-4">
<button type="button" class="btn btn-outline-secondary px-4 prev-step">
<i class="fa fa-arrow-left me-2"></i>Sebelumnya
</button>
<button type="button" class="btn btn-success px-4 next-step" id="btnSimpanPemesanan">
Lanjut Pembayaran
</button>
</div>
<div id="checkout_cart_summary">
{{-- Akan diisi oleh JavaScript --}}
</div>
<div class="info-alert alert alert-info py-3 px-4 small mt-4 d-none" id="karyawan" role="alert">
<div class="fw-bold mb-2 text-success">
<i class="fa fa-info-circle me-1"></i>Informasi Penting untuk Karyawan
</div>
<p class="mb-2">
Makanan yang dipesan <strong>harus diambil sendiri</strong> (tidak diantar).
Pengambilan dilakukan di <strong>Instalasi Gizi (Ruang Distribusi Makan)</strong> dengan jadwal berikut:
</p>
<ul class="mb-0 ps-3">
<li>Pemesanan tidak dapat dibatalkan dan tidak ada pengembalian uang.</li>
<li>
Waktu pengambilan makanan:
<ul class="ps-3 mt-1">
<li>Siang: <strong>12.00 - 13.00 WIB</strong></li>
<li>Sore: <strong>16.00 - 17.00 WIB</strong></li>
</ul>
</li>
<li>
Butuh bantuan? Hubungi WhatsApp <strong>Instalasi Gizi</strong>:
<a href="https://wa.me/08815611382" target="_blank">08815611382</a><br>
<small class="text-muted">Jam kerja: 08.00 - 15.00 WIB</small>
</li>
</ul>
</div>
{{-- Tombol Navigasi --}}
<div class="d-flex justify-content-between mt-4">
<button type="button" class="btn btn-secondary prev-step">Sebelumnya</button>
<button type="button" class="btn btn-success next-step" id="btnSimpanPemesanan">Lanjutkan</button>
</div>
<div class="alert alert-info py-3 px-4 small border-start border-4 border-primary mt-3 d-none" id="karyawan" role="alert">
<div class="fw-bold mb-2">
<i class="fa fa-info-circle me-1"></i>Informasi Penting
</div>
<p class="mb-2">
Bagi Karyawan, makanan yang dipesan <strong>harus diambil sendiri</strong> (tidak diantar).
Pengambilan dilakukan di <strong>Instalasi Gizi (Ruang Distribusi Makan)</strong> dengan jadwal berikut:
</p>
<ul class="mb-0 ps-3">
<li>Pemesanan tidak dapat dibatalkan dan tidak ada pengembalian uang.</li>
<li>
Waktu pengambilan makanan:
<ul class="ps-3 mt-1">
<li>Siang: <strong>12.00 - 13.00 WIB</strong></li>
<li>Sore: <strong>16.00 - 17.00 WIB</strong></li>
</ul>
</li>
<li>
Butuh bantuan? Hubungi WhatsApp <strong>Instalasi Gizi</strong>:
<a href="https://wa.me/08815611382" target="_blank">08815611382</a><br>
<small class="text-muted">Jam kerja: 08.00 - 15.00 WIB</small>
</li>
</ul>
</div>
<div class="alert alert-info py-3 px-4 small border-start border-4 border-primary mt-3 d-none" id="pasien" role="alert">
<div class="fw-bold mb-2">
<i class="fa fa-info-circle me-1"></i>Informasi Penting
</div>
<p class="mb-2">
Bagi Keluarga atau Penunggu Pasien, makanan yang dipesan <strong>akan diantarkan</strong> ke ruang perawatan.
</p>
<ul class="mb-0 ps-3">
<li>
Pemesanan tidak dapat dibatalkan dan tidak ada pengembalian uang.
</li>
<li>
Butuh bantuan? Hubungi WhatsApp <strong>Instalasi Gizi</strong>:
<a href="https://wa.me/08815611382 " target="_blank">08815611382 </a> <br>
<small class="text-muted">Jam kerja: 08.00 - 15.00 WIB</small>
</li>
</ul>
</div>
</div>
<div class="info-alert alert alert-info py-3 px-4 small mt-3 d-none" id="pasien" role="alert">
<div class="fw-bold mb-2 text-success">
<i class="fa fa-info-circle me-1"></i>Informasi Penting untuk Keluarga Pasien
</div>
<p class="mb-2">
Makanan yang dipesan <strong>akan diantarkan</strong> langsung ke ruang perawatan.
</p>
<ul class="mb-0 ps-3">
<li>Pemesanan tidak dapat dibatalkan dan tidak ada pengembalian uang.</li>
<li>
Butuh bantuan? Hubungi WhatsApp <strong>Instalasi Gizi</strong>:
<a href="https://wa.me/08815611382" target="_blank">08815611382</a><br>
<small class="text-muted">Jam kerja: 08.00 - 15.00 WIB</small>
</li>
</ul>
</div>
</div>

197
resources/views/guest/checkout/step/step3.blade.php
View File

@ -1,117 +1,110 @@
<div class="form-step">
<h5 class="mb-4 text-center fw-bold">Langkah 3: Lakukan Pembayaran</h5>
<div class="form-step card shadow-sm border-0 p-4 d-none">
<h5 class="section-title mb-4 text-center">Langkah 3: Selesaikan Pembayaran</h5>
<div class="card shadow-sm p-4">
<div class="row justify-content-center text-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6 mb-3">
<img src="/logo/qris.jpg" alt="Pembayaran"
class="img-fluid rounded shadow w-100"
style="max-width: 500px; height: auto;">
</div>
</div>
<div class="row justify-content-center px-2">
<div class="col-12 col-md-8">
<div class="text-center mb-3">
<h6 class="fw-bold">Detail Pembayaran</h6>
</div>
<div class="card shadow-sm mb-3 rounded">
<div class="card-body">
<!-- No Order -->
<div class="row mb-3 align-items-center">
<div class="col-md-6 col-sm-12 fw-semibold">No Order</div>
<div class="col-md-6 col-sm-12 text-sm-end">
<div class="d-flex justify-content-between justify-content-sm-end align-items-center gap-2">
</div>
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyNoOrder()">
<i class="fa fa-copy me-1"></i> Salin
</button><strong id="no_order_display" class="d-block small text-break text-wrap text-sm-end"></strong>
</div>
</div>
<!-- Bank -->
<div class="row mb-3">
<div class="col-md-6 col-sm-12 fw-semibold">Bank</div>
<div class="col-md-6 col-sm-12 text-sm-end">Bank BRI</div>
</div>
<!-- Nama Rekening -->
<div class="row mb-3">
<div class="col-md-6 col-sm-12 fw-semibold">Nama Rek.</div>
<div class="col-md-6 col-sm-12 text-sm-end">RPL 182 RSAB HARKIT OPR BLU PENERIMAAN</div>
</div>
<!-- No Rek -->
<div class="row mb-3 align-items-center">
<div class="col-md-6 col-sm-12 fw-semibold">No.Rek</div>
<div class="col-md-6 col-sm-12 text-sm-end">
<div class="d-flex justify-content-between justify-content-sm-end align-items-center gap-2">
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyNoRek()">
<i class="fa fa-copy me-1"></i> Salin
</button>
</div>
<strong id="noRekText" class="d-block text-sm-end">096201000073308</strong>
</div>
</div>
<!-- Nominal -->
<div class="row mb-3">
<div class="col-md-6 col-sm-12 fw-semibold">Nominal</div>
<div class="col-md-6 col-sm-12 text-sm-end" id="no_order_price">Rp 0</div>
</div>
<!-- Waktu Pembayaran -->
<div class="row mb-2">
<div class="col-md-6 col-sm-12 fw-semibold">Waktu Pembayaran</div>
<div class="col-md-6 col-sm-12 text-sm-end" id="countdownPayment"></div>
</div>
<div class="card shadow-sm border-0 p-4 mb-4">
<div class="row justify-content-center text-center mb-3">
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
<img src="/logo/qris.jpg" alt="Pembayaran" class="img-fluid rounded shadow" style="max-width: 360px;">
</div>
</div>
<div class="row justify-content-center px-md-3">
<div class="col-12 col-lg-10">
<div class="summary-card card shadow-sm border-0 mb-4">
<div class="card-body">
<h6 class="fw-semibold text-success mb-3 text-center text-md-start">Detail Pembayaran</h6>
<div class="row g-3 align-items-center mb-3">
<div class="col-md-5 col-sm-12 text-muted fw-semibold">No. Order</div>
<div class="col-md-7 col-sm-12 text-md-end">
<div class="d-flex flex-wrap justify-content-between justify-content-md-end align-items-center gap-2">
<strong id="no_order_display" class="small text-break"></strong>
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyNoOrder()">
<i class="fa fa-copy me-1"></i> Salin
</button>
</div>
</div>
<p class="text-muted small text-center px-2">
Mohon untuk melakukan pembayaran sebelum batas waktu yang tertera, lalu unggah bukti pembayaran sebagai konfirmasi.
</p>
</div>
</div>
<div class="row justify-content-center mt-4">
<div class="mb-3">
<label for="cara_pembayaran" class="form-label fw-semibold">Metode Pembayaran</label>
<select class="form-select" id="cara_pembayaran" name="cara_pembayaran" onchange="toggleBuktiPembayaran()">
<option value="transfer">Transfer Bank</option>
<option value="billing">Billing RS</option>
</select>
<input type="hidden" id="no_order_result" name="no_order_result">
</div>
<div id="bukti_section">
<label for="bukti_pembayaran" class="form-label fw-semibold">Upload Bukti Pembayaran</label>
<div class="card p-3 border-dashed position-relative text-center shadow-sm">
<input type="file" class="form-control position-absolute top-0 start-0 opacity-0 w-100 h-100"
id="bukti_pembayaran" name="bukti_pembayaran" accept="image/*" onchange="previewBuktiPembayaran()">
<div id="preview_text" class="text-muted">
Klik atau drag file ke sini untuk upload<br>
<small>Format: JPG, PNG | Max: 2MB</small>
<div class="row g-3 mb-3">
<div class="col-md-5 col-sm-12 text-muted fw-semibold">Bank</div>
<div class="col-md-7 col-sm-12 text-md-end">Bank BRI</div>
</div>
<div class="row g-3 mb-3">
<div class="col-md-5 col-sm-12 text-muted fw-semibold">Nama Rekening</div>
<div class="col-md-7 col-sm-12 text-md-end">RPL 182 RSAB HARKIT OPR BLU PENERIMAAN</div>
</div>
<div class="row g-3 align-items-center mb-3">
<div class="col-md-5 col-sm-12 text-muted fw-semibold">No. Rekening</div>
<div class="col-md-7 col-sm-12 text-md-end">
<div class="d-flex flex-wrap justify-content-between justify-content-md-end align-items-center gap-2">
<strong id="noRekText" class="text-break">096201000073308</strong>
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyNoRek()">
<i class="fa fa-copy me-1"></i> Salin
</button>
</div>
<img id="bukti_preview" class="img-fluid rounded mt-3 d-none" style="max-height: 300px; object-fit: contain;" />
</div>
</div>
<div class="mb-3" id="billing_section" style="display:none;">
<label for="exampleInputEmail1" class="form-label">No. Medical Record</label>
<input type="text" class="form-control" name="medical_record" id="medical_record" placeholder="Masukkan No. Medical Record">
<div class="row g-3 mb-3">
<div class="col-md-5 col-sm-12 text-muted fw-semibold">Nominal</div>
<div class="col-md-7 col-sm-12 text-md-end fw-semibold text-success" id="no_order_price">Rp 0</div>
</div>
<div class="row g-3">
<div class="col-md-5 col-sm-12 text-muted fw-semibold">Batas Waktu Pembayaran</div>
<div class="col-md-7 col-sm-12 text-md-end text-danger fw-semibold" id="countdownPayment"></div>
</div>
<p class="text-muted small text-center px-2 py-2">
<strong>Makanan yg sudah dipesan tidak dapat dibatalkan, dan tidak ada pengembalian uang</strong>
</p>
</div>
</div>
<div class="d-flex justify-content-center mt-4">
<button type="submit" class="btn btn-success w-100">Selesaikan Pesanan</button>
<p class="text-muted small text-center px-2">
Lakukan pembayaran sebelum batas waktu berakhir, kemudian unggah bukti transfer untuk mempercepat verifikasi.
</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-10">
<div class="mb-3">
<label for="cara_pembayaran" class="form-label fw-semibold">Metode Pembayaran</label>
<select class="form-select" id="cara_pembayaran" name="cara_pembayaran" onchange="toggleBuktiPembayaran()">
<option value="transfer">Transfer Bank</option>
<option value="billing">Billing RS</option>
</select>
<input type="hidden" id="no_order_result" name="no_order_result">
</div>
<div id="bukti_section" class="mb-3">
<label for="bukti_pembayaran" class="form-label fw-semibold">Upload Bukti Pembayaran</label>
<div class="drop-zone position-relative text-center p-4">
<input type="file" class="form-control position-absolute top-0 start-0 opacity-0 w-100 h-100"
id="bukti_pembayaran" name="bukti_pembayaran" accept="image/*" onchange="previewBuktiPembayaran()">
<div id="preview_text" class="text-muted">
Klik atau tarik file ke area ini untuk mengunggah<br>
<small>Format: JPG, PNG | Maksimal: 2MB</small>
</div>
<img id="bukti_preview" class="img-fluid rounded mt-3 d-none" style="max-height: 280px; object-fit: contain;" />
</div>
</div>
<div class="mb-3" id="billing_section" style="display:none;">
<label class="form-label fw-semibold">No. Medical Record</label>
<input type="text" class="form-control" name="medical_record" id="medical_record" placeholder="Masukkan No. Medical Record">
</div>
<div class="alert alert-warning text-muted small text-center mt-3 mb-4" role="alert">
<strong>Perhatian:</strong> Makanan yang sudah dipesan tidak dapat dibatalkan dan tidak ada pengembalian dana.
</div>
</div>
</div>
<div class="d-flex flex-column flex-md-row justify-content-between gap-2 mt-2">
<button type="button" class="btn btn-outline-secondary px-4 prev-step">
<i class="fa fa-arrow-left me-2"></i>Kembali
</button>
<button type="submit" class="btn btn-success px-4">Selesaikan Pesanan</button>
</div>
</div>

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

@ -1,71 +1,71 @@
<div class="modal fade" id="checkoutModal" tabindex="-1" aria-labelledby="checkoutModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fw-bold" id="checkoutModalLabel">Pesanan Catering RSAB Harapan Kita</h5>
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content border-0 shadow-lg">
<div class="modal-header bg-success text-white border-0">
<h5 class="modal-title fw-semibold" id="checkoutModalLabel">
<i class="fa fa-utensils me-2"></i>Detail Menu Pilihan
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="checkoutForm">
<div class="modal-body">
<div class="row g-3">
<div class="col-md-4 text-center">
<div class="modal-body bg-light">
<div class="row g-3 align-items-start">
<div class="col-md-5 text-center">
<input type="hidden" id="apakah_someday">
<input type="hidden" id="apakah_menu_siang">
<input type="hidden" id="apakah_menu_sore">
<input type="hidden" id="tgl_tersedia">
<img id="cathering_order_photo" class="img-fluid rounded shadow" style="max-height: 370px; width:270px;" alt="Foto Menu">
<div class="bg-white rounded-4 shadow-sm p-2 h-100 d-flex align-items-center justify-content-center">
<img id="cathering_order_photo" class="img-fluid rounded-4" style="max-height: 320px; object-fit: cover;" alt="Foto Menu">
</div>
</div>
<div class="col-md-8">
<h5 id="cathering_order_name" class="mb-2 fw-bold"></h5>
<div id="kalori_detail" class="mb-2"></div>
<div id="tgl_menu_tersedia" class="mb-2"></div>
<div class="card shadow-sm border-0 rounded-3 p-3 bg-light">
<div class="d-flex justify-content-between align-items-center small mb-2 d-none">
<span class="text-muted">
<i class="bi bi-person-badge"></i> Harga Karyawan:
</span>
<span class="fw-bold text-success" id="cathering_order_price_karyawan"></span>
<div class="col-md-7">
<div class="bg-white rounded-4 shadow-sm p-4 h-100">
<h4 id="cathering_order_name" class="fw-bold text-success mb-2"></h4>
<div class="d-flex flex-wrap gap-2 align-items-center text-muted small mb-3">
<span id="kalori_detail"></span>
<span id="tgl_menu_tersedia" class="badge bg-light text-success border border-success-subtle"></span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span class="">
<i class="bi bi-cash-coin"></i> Harga:
</span>
<span class="fw-bold fs-5 text-primary" id="cathering_order_price_public"></span>
<div class="card border-0 bg-light rounded-4 mb-3">
<div class="card-body py-3 px-4">
<div class="d-flex justify-content-between align-items-center small mb-2 d-none">
<span class="text-muted">
<i class="bi bi-person-badge me-1"></i>Harga Karyawan
</span>
<span class="fw-bold text-success" id="cathering_order_price_karyawan"></span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span class="fw-semibold text-secondary">
<i class="bi bi-cash-coin me-1"></i>Harga
</span>
<span class="fw-bold fs-5 text-primary" id="cathering_order_price_public"></span>
</div>
</div>
</div>
</div>
<p id="cathering_order_deskripsi" class="text-muted small mb-3"></p>
<div id="tag_klasifikasi_menu" class="mb-2"></div>
<div id="kalori_menu" class="mb-2"></div>
<p id="cathering_order_deskripsi"
class="text-muted small mb-2 mt-2"
style="
max-width: 100%;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
">
</p>
<div id="tag_klasifikasi_menu" class="mb-2"></div>
<div id="kalori_menu" class="mb-2"></div>
<input type="hidden" id="cathering_order_menu_id">
<input type="hidden" id="cathering_order_jenis_menu">
<input type="hidden" id="cathering_order_menu_id">
<input type="hidden" id="cathering_order_jenis_menu">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-success">
<i class="fas fa-shopping-cart me-1"></i> Pesan Sekarang
</button>
<div class="modal-footer bg-white border-0 justify-content-between">
<div class="text-muted small">
Pastikan detail menu sudah sesuai sebelum melanjutkan pemesanan.
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-success">
<i class="fas fa-cart-plus me-2"></i>Tambah ke Keranjang
</button>
</div>
</div>
</form>
</div>

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

@ -1,144 +1,454 @@
@extends('guest.layout.main')
@section('body_main_guests')
<section class="section py-3 bg-light">
<div class="container">
<div class="row">
<div class="col-12 mb-2 text-center">
<div class="btn-group flex-wrap nav-tabs" role="group" id="tabJenisMenu">
<button type="button" class="btn btn-success active" data-filter="makanan">
<i class="bi bi-egg-fried me-1"></i> Makanan
</button>
<button type="button" class="btn btn-outline-success" data-filter="minuman">
<i class="bi bi-cup-straw me-1"></i> Minuman
</button>
<button type="button" class="btn btn-outline-success" data-filter="snack">
<i class="bi bi-cookie me-1"></i> Snack
</button>
<button type="button" class="btn btn-outline-success" data-filter="paket">
<i class="bi bi-gift me-1"></i> Paket
</button>
<button type="button" class="btn btn-outline-success" data-filter="konsultasi">
<i class="bi bi-person-heart me-1"></i> Konsultasi Gizi
</button>
<button type="button" class="btn btn-outline-success" data-filter="cara_pesan">
<i class="bi bi-journal-text me-1"></i> Cara Pesan
</button>
</div>
</div>
<section class="section pb-0 bg-light">
<style>
.guest-hero {
background: linear-gradient(140deg, #3fb072 0%, #268a76 60%, #166d62 100%);
border-radius: 26px;
color: #fff;
overflow: hidden;
position: relative;
}
{{-- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2 ">
<ul class="nav nav-tabs" id="tabJenisMenu">
<li class="nav-item"><a class="nav-link active text-success" href="#" data-filter="makanan">Makanan</a></li>
<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="konsultasi">Jadwal Konsultasi Gizi</a></li>
<li class="nav-item"><a class="nav-link text-black" href="#" data-filter="cara_pesan">Cara Pesan</a></li>
</ul>
</div> --}}
.guest-hero::before,
.guest-hero::after {
content: "";
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
filter: blur(0);
}
</div>
<!-- Filter Pencarian + Tanggal -->
<div class="row gx-2 gy-1 mb-2" id="tanggal-filter">
<!-- Kolom Cari -->
<div class="col-6">
<label class="fw-bold small text-muted mb-1">Cari Makanan</label>
<input type="text" class="form-control form-control-sm"
id="searchMenu" placeholder="Pencarian...">
</div>
.guest-hero::before {
width: 240px;
height: 240px;
top: -90px;
right: -70px;
}
<!-- Kolom Tanggal -->
<div class="col-6">
<label class="fw-bold small text-muted mb-1">
Tanggal
<a tabindex="0" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" title="Panduan"
data-bs-content="Pilih rentang tanggal untuk melihat menu tersedia.">
<i class="fa fa-info-circle text-secondary ms-1"></i>
</a>
</label>
<div class="input-group input-group-sm">
<span class="input-group-text bg-white px-2">
<i class="fa fa-calendar-alt text-primary"></i>
.guest-hero::after {
width: 160px;
height: 160px;
bottom: -70px;
left: -60px;
}
.guest-hero__badge {
background: rgba(255, 255, 255, 0.15);
border-radius: 999px;
font-size: 0.78rem;
letter-spacing: 0.08em;
padding: 0.45rem 1.1rem;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.guest-hero__title {
font-size: 2.5rem;
}
.guest-hero__lead {
color: rgba(255, 255, 255, 0.82);
max-width: 520px;
}
.guest-hero__card {
background: rgba(255, 255, 255, 0.96);
border-radius: 20px;
}
.filter-toolbar {
margin-top: -2.75rem;
position: relative;
z-index: 2;
}
.filter-toolbar .card {
border-radius: 22px;
}
.btn-filter {
background: #ffffff;
border: 1px solid rgba(40, 123, 98, 0.18);
border-radius: 999px;
color: #1f6f56;
font-weight: 600;
padding: 0.55rem 1.15rem;
transition: all 0.2s ease;
}
.btn-filter i {
color: #2c9e7b;
font-size: 1rem;
}
.btn-filter:hover {
box-shadow: 0 0.75rem 1.65rem rgba(32, 122, 96, 0.14);
transform: translateY(-2px);
}
.btn-filter.active {
background: linear-gradient(135deg, #2c9e7b, #22a3a3);
border-color: transparent;
color: #fff;
box-shadow: 0 0.9rem 1.8rem rgba(34, 163, 163, 0.2);
}
.btn-filter.active i {
color: #fff;
}
.input-icon {
position: relative;
}
.input-icon .icon {
position: absolute;
top: 50%;
left: 1.15rem;
transform: translateY(-50%);
color: #7a8a8d;
}
.input-icon .form-control {
background: #f5f9f6;
border-radius: 16px;
border: 1px solid transparent;
padding-left: 3rem;
transition: all 0.25s ease;
}
.input-icon .form-control:focus {
background: #fff;
border-color: rgba(40, 123, 98, 0.35);
box-shadow: 0 1rem 2rem rgba(32, 122, 96, 0.18);
}
.selected-range {
background: #eef9f2;
border: 1px solid rgba(40, 123, 98, 0.15);
border-radius: 12px;
color: #1a5a46;
padding: 0.5rem 0.85rem;
}
.info-banner {
border-radius: 18px;
}
.info-banner .soft-badge {
background: rgba(44, 158, 123, 0.14);
border-radius: 999px;
color: #1e6d52;
font-weight: 600;
padding: 0.45rem 1.1rem;
}
.info-callout {
border-radius: 20px;
}
.info-callout .icon-wrapper {
width: 48px;
height: 48px;
border-radius: 16px;
background: rgba(44, 158, 123, 0.14);
display: flex;
align-items: center;
justify-content: center;
color: #2c9e7b;
font-size: 1.1rem;
}
#menuBtn {
background: linear-gradient(135deg, #ff8662, #ff5d56);
border: none;
}
#floatingCartButton {
background: linear-gradient(135deg, #248c73, #1c6a5c);
border: none;
}
#floatingCartButton .btn {
background: rgba(255, 255, 255, 0.2);
border: none;
}
@media (max-width: 1199.98px) {
.guest-hero__title {
font-size: 2.2rem;
}
.guest-hero__lead {
font-size: 1.05rem;
}
}
@media (max-width: 991.98px) {
.guest-hero {
border-radius: 22px;
text-align: center;
}
.guest-hero__title {
font-size: 2rem;
}
.guest-hero__lead {
margin-inline: auto;
}
.guest-hero__card {
margin-top: 2rem;
text-align: left;
}
.filter-toolbar {
margin-top: -2.25rem;
}
}
@media (max-width: 767.98px) {
.guest-hero {
padding: 2.4rem 1.6rem;
}
.guest-hero__title {
font-size: 1.75rem;
}
.guest-hero__lead {
font-size: 0.95rem;
}
.guest-hero__badge {
font-size: 0.68rem;
}
.btn-filter {
width: 100%;
justify-content: center;
font-size: 0.85rem;
padding: 0.5rem 0.9rem;
}
.filter-toolbar .card-body {
padding: 1.25rem;
}
#tanggal-filter .form-control {
font-size: 0.9rem;
padding-right: 1rem;
}
#menuBtn,
#floatingCartButton,
#cartList {
width: 90%;
}
.info-banner .card-body,
.info-callout .card-body {
text-align: center;
gap: 1rem;
}
}
@media (max-width: 575.98px) {
.guest-hero {
padding: 2.2rem 1.35rem;
}
.guest-hero__title {
font-size: 1.65rem;
}
.btn-filter {
font-size: 0.8rem;
}
.input-icon .icon {
left: 1rem;
}
}
</style>
<div class="container position-relative">
<div class="guest-hero px-4 px-lg-5 py-5 mb-5 shadow-sm" data-aos="fade-up">
<div class="row align-items-center g-4">
<div class="col-lg-7">
<span class="guest-hero__badge mb-3">
<i class="fa fa-seedling"></i>
Instalasi Gizi RSAB Harapan Kita
</span>
<input type="text" id="tanggal" class="form-control form-control-sm tanggal-input"
readonly placeholder="Pilih rentang tanggal">
<button type="button" id="resetTanggal"
class="btn btn-sm btn-light border d-none" title="Reset">
<i class="fa fa-times text-muted"></i>
</button>
<h1 class="guest-hero__title fw-bold mb-3 text-white">Menu Sehat Siap Antar ke Ruang Perawatan</h1>
<p class="guest-hero__lead mb-4">
Pilih hidangan bernutrisi tinggi untuk karyawan, keluarga pasien, ataupun masyarakat umum.
Pesanan dimonitor ahli gizi dan dapat dilacak secara daring.
</p>
<div class="d-flex flex-wrap gap-2 justify-content-lg-start justify-content-center">
<a href="#order_guest_id" class="btn btn-light text-success fw-semibold shadow-sm px-4">
<i class="fa fa-utensils me-2"></i>Lihat Menu
</a>
<a href="#" class="btn btn-outline-light text-white fw-semibold px-4 js-open-guide">
<i class="fa fa-book-open me-2"></i>Panduan Pemesanan
</a>
</div>
</div>
<div id="tanggalTerpilihLabel"
class="bg-light border text-dark small mt-1 d-none rounded px-2 py-1">
<i class="fa fa-calendar-check text-success me-1"></i>
<span id="labelTanggalText">Menampilkan menu...</span>
<div class="col-lg-5">
<div class="guest-hero__card card border-0 shadow-lg h-100">
<div class="card-body p-4">
<h5 class="fw-semibold text-primary mb-3">Kenapa Order Gizi?</h5>
<ul class="list-unstyled small text-muted mb-0">
<li class="d-flex gap-2 mb-2">
<i class="fa fa-check-circle text-success mt-1"></i>
<span>Resep dibuat dan diawasi ahli gizi sesuai kebutuhan nutrisi pasien dan keluarga.</span>
</li>
<li class="d-flex gap-2 mb-2">
<i class="fa fa-check-circle text-success mt-1"></i>
<span>Pilihan lengkap mulai dari makanan utama, snack, paket hemat, hingga jadwal konsultasi.</span>
</li>
<li class="d-flex gap-2">
<i class="fa fa-check-circle text-success mt-1"></i>
<span>Pemesanan daring cepat, pembayaran fleksibel, dan status pesanan bisa dipantau.</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Marquee Info -->
<div class="alert alert-info mb-3 shadow-sm rounded-3 small p-2" role="alert">
<marquee behavior="scroll" direction="left" scrollamount="3"
onmouseover="this.stop()" onmouseout="this.start()">
<i class="fa fa-user-md text-primary me-1"></i>
<strong>Konsultasi Gizi!</strong>
Butuh rekomendasi menu? <a href="#" class="alert-link">Daftar sekarang</a>.
Hubungi <a href="https://wa.me/08815611382" target="_blank">08815611382</a>
<span class="text-muted">(08:00-15:00 WIB)</span>
</marquee>
<div class="filter-toolbar" data-aos="fade-up" data-aos-delay="100">
<div class="card border-0 shadow-sm">
<div class="card-body p-3 p-lg-4">
<div class="d-flex flex-wrap gap-2 justify-content-center" id="tabJenisMenu">
<button type="button" class="btn btn-filter active" data-filter="makanan">
<i class="bi bi-egg-fried me-2"></i>Makanan
</button>
<button type="button" class="btn btn-filter" data-filter="minuman">
<i class="bi bi-cup-straw me-2"></i>Minuman
</button>
<button type="button" class="btn btn-filter" data-filter="snack">
<i class="bi bi-cookie me-2"></i>Snack
</button>
<button type="button" class="btn btn-filter" data-filter="paket">
<i class="bi bi-gift me-2"></i>Paket
</button>
<button type="button" class="btn btn-filter" data-filter="konsultasi">
<i class="bi bi-person-heart me-2"></i>Konsultasi Gizi
</button>
<button type="button" class="btn btn-filter" data-filter="cara_pesan">
<i class="bi bi-journal-text me-2"></i>Cara Pesan
</button>
</div>
<div class="row g-3 align-items-end mt-2" id="tanggal-filter">
<div class="col-lg-6">
<label class="form-label text-muted fw-semibold small text-uppercase mb-2">Cari Menu</label>
<div class="input-icon">
<i class="fa fa-search icon"></i>
<input type="text" class="form-control form-control-lg" id="searchMenu" placeholder="Cari menu favorit..." />
</div>
</div>
<div class="col-lg-6">
<div class="d-flex justify-content-between align-items-center mb-2">
<label class="form-label text-muted fw-semibold small text-uppercase mb-0">
Rentang Tanggal
<a tabindex="0" role="button" class="text-muted ms-1" data-bs-toggle="popover" data-bs-trigger="focus" title="Panduan" data-bs-content="Pilih rentang tanggal untuk melihat menu tersedia.">
<i class="fa fa-info-circle"></i>
</a>
</label>
<button type="button" id="resetTanggal" class="btn btn-link btn-sm text-decoration-none text-muted d-none">Reset</button>
</div>
<div class="input-icon">
<i class="fa fa-calendar-alt icon"></i>
<input type="text" id="tanggal" class="form-control form-control-lg tanggal-input" readonly placeholder="Pilih rentang tanggal" />
</div>
<div id="tanggalTerpilihLabel" class="selected-range small mt-2 d-none">
<i class="fa fa-calendar-check text-success me-2"></i>
<span id="labelTanggalText">Menampilkan menu...</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="info-banner card border-0 shadow-sm mt-4" data-aos="fade-up" data-aos-delay="150">
<div class="card-body d-flex flex-column flex-lg-row align-items-lg-center gap-3">
<div class="soft-badge d-inline-flex align-items-center gap-2">
<i class="fa fa-user-md"></i>
Konsultasi Gizi
</div>
<div class="flex-grow-1 text-muted">
Butuh rekomendasi menu? <a href="#" class="alert-link fw-semibold">Daftar konsultasi</a> atau hubungi
<a href="https://wa.me/08815611382" target="_blank" class="fw-semibold text-decoration-none text-success">08815611382</a>
<span class="d-block small mt-1 text-secondary">Jam layanan: 08.00 - 15.00 WIB</span>
</div>
<div class="d-flex flex-wrap gap-2 justify-content-lg-end">
<a href="https://wa.me/08815611382" target="_blank" class="btn btn-success btn-sm px-3">
<i class="fa-brands fa-whatsapp me-2"></i>Hubungi Kami
</a>
<button type="button" class="btn btn-outline-success btn-sm px-3 js-open-guide d-none d-lg-inline-flex">
<i class="fa fa-journal-text me-2"></i>Cara Pesan
</button>
</div>
</div>
</div>
<div class="mt-4" id="order_guest_id"></div>
<div id="order_guest_id"></div>
<!-- Tombol Menu -->
<button type="button" id="menuBtn"
class="btn btn-danger position-fixed start-50 translate-middle-x
rounded-pill shadow-lg d-flex align-items-center gap-2
px-2 py-1 d-none"
style="bottom: 75px; z-index: 1051; font-size: .8rem;" onclick="toggleCartList()">
<i class="fa-solid fa-bell-concierge"></i>
<span>Menu Dipilih</span>
class="btn position-fixed start-50 translate-middle-x rounded-pill shadow-lg d-flex align-items-center gap-2 px-3 py-2 d-none text-white"
style="bottom: 75px; z-index: 1051; font-size: .85rem;" onclick="toggleCartList()">
<i class="fa-solid fa-bell-concierge"></i>
<span>Menu Dipilih</span>
</button>
<div id="cartList"
class="position-fixed start-50 translate-middle-x bg-white rounded shadow-lg d-none"
style="bottom: 125px; z-index: 1050; width: 90%; max-width: 420px; max-height: 45vh; overflow-y: auto;">
class="position-fixed start-50 translate-middle-x bg-white rounded shadow-lg d-none"
style="bottom: 125px; z-index: 1050; width: 90%; max-width: 420px; max-height: 45vh; overflow-y: auto;">
<div class="p-2" id="cartListBody">
<!-- diisi JS -->
</div>
<div class="d-flex gap-1 p-2 border-top">
<a class="btn btn-sm btn-success flex-fill" href="/checkout">Pesan Sekarang</a>
</div>
</div>
<!-- Floating Cart -->
</div>
<div id="floatingCartButton"
class="position-fixed start-50 translate-middle-x bg-success text-white
rounded-pill shadow-lg d-none d-flex align-items-center
justify-content-between px-3 py-2"
class="position-fixed start-50 translate-middle-x text-white rounded-pill shadow-lg d-none d-flex align-items-center justify-content-between px-3 py-2"
onclick="checkout()"
style="bottom: 15px; z-index: 1050; width: 90%; max-width: 420px; font-size: .8rem;">
<div>
<strong><span id="floatingCartCount">0</span> item</strong><br>
<small id="floatingCartDesc">Lihat keranjang</small>
</div>
<div class="btn btn-light btn-sm rounded-circle">
<i class="fa-solid fa-cart-shopping text-success"></i>
</div>
</div>
<div class="alert alert-info py-3 px-4 small border-start border-4 border-primary mt-3" role="alert">
<div class="fw-bold mb-2">
<i class="fa fa-info-circle me-1"></i>Informasi
<div>
<strong><span id="floatingCartCount">0</span> item</strong><br>
<small id="floatingCartDesc" class="text-white-50">Lihat keranjang</small>
</div>
<div class="btn btn-sm rounded-circle">
<i class="fa-solid fa-cart-shopping text-white"></i>
</div>
</div>
<div class="info-callout card border-0 shadow-sm mt-5" data-aos="fade-up" data-aos-delay="200">
<div class="card-body d-flex flex-column flex-md-row align-items-start gap-3">
<div class="icon-wrapper">
<i class="fa fa-info-circle"></i>
</div>
<div>
<h6 class="fw-semibold text-primary mb-2">Butuh Bantuan?</h6>
<p class="mb-2 text-muted small">
Hubungi WhatsApp <strong>Instalasi Gizi</strong> di
<a href="https://wa.me/08815611382" target="_blank" class="fw-semibold text-decoration-none text-success">08815611382</a>
untuk pertanyaan seputar pemesanan.
</p>
<span class="badge bg-light text-muted fw-normal">Jam kerja: 08.00 - 15.00 WIB</span>
</div>
</div>
<ul class="mb-0 ps-3 pe-3">
<li>
Butuh bantuan? Hubungi WhatsApp <strong>Instalasi Gizi</strong>:
<a href="https://wa.me/08815611382 " target="_blank">08815611382 </a> <br>
<span class="text-muted">Jam kerja: 08.00 - 15.00 WIB</small>
</li>
</ul>
</div>
</div>
</section>
@ -150,58 +460,68 @@
<script src="{{ ver('/js/order_guest/functions.js') }}"></script>
<script src="{{ ver('/js/order_guest/index.js') }}"></script>
<script>
const datePicker = flatpickr("#tanggal", {
const labelElement = document.getElementById('tanggalTerpilihLabel');
const labelText = document.getElementById('labelTanggalText');
const resetTanggalButton = document.getElementById('resetTanggal');
const datePicker = flatpickr("#tanggal", {
dateFormat: "Y-m-d",
mode: "range",
onChange: function (selectedDates, dateStr) {
const label = document.getElementById('tanggalTerpilihLabel');
const resetBtn = document.getElementById('resetTanggal');
onChange: function (selectedDates) {
if (selectedDates.length === 2) {
const [start, end] = selectedDates;
const startDay = start.getDate();
const endDay = end.getDate();
if (start.getTime() === end.getTime()) {
label.textContent = `Menampilkan menu tersedia untuk tanggal: ${formatTanggal(start)}`;
labelText.textContent = `Menampilkan menu tersedia untuk tanggal: ${formatTanggal(start)}`;
} else {
label.textContent = `Menampilkan menu tersedia dari ${formatTanggal(start)} hingga ${formatTanggal(end)}`;
labelText.textContent = `Menampilkan menu tersedia dari ${formatTanggal(start)} hingga ${formatTanggal(end)}`;
}
const activeFilter = document.querySelector('#tabJenisMenu .btn.btn-success.active')?.dataset?.filter || null;
// Baru kirim ke fetchMenu jika dua tanggal sudah dipilih
const activeFilter = document.querySelector('#tabJenisMenu .btn.active')?.dataset?.filter || null;
fetchMenu({ jenis_menu: activeFilter, tanggal_awal: startDay, tanggal_akhir: endDay });
label.classList.remove('d-none');
resetBtn.classList.remove('d-none');
labelElement.classList.remove('d-none');
resetTanggalButton.classList.remove('d-none');
}
}
});
function formatTanggal(dateObj) {
const bulan = [
"Januari", "Februari", "Maret", "April", "Mei", "Juni",
"Juli", "Agustus", "September", "Oktober", "November", "Desember"
];
const d = dateObj.getDate();
const m = bulan[dateObj.getMonth()];
const y = dateObj.getFullYear();
return `${d} ${m} ${y}`;
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el));
});
resetTanggalButton.addEventListener('click', function () {
const activeFilter = document.querySelector('#tabJenisMenu .btn.active')?.dataset?.filter || null;
datePicker.clear();
labelElement.classList.add('d-none');
labelText.textContent = 'Menampilkan menu...';
resetTanggalButton.classList.add('d-none');
fetchMenu({ jenis_menu: activeFilter, tanggal_awal: null, tanggal_akhir: null });
});
document.querySelectorAll('.js-open-guide').forEach(btn => {
btn.addEventListener('click', function (e) {
e.preventDefault();
const guideBtn = document.querySelector('#tabJenisMenu .btn[data-filter="cara_pesan"]');
if (guideBtn) {
guideBtn.click();
guideBtn.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
function formatTanggal(dateObj) {
const bulan = [
"Januari", "Februari", "Maret", "April", "Mei", "Juni",
"Juli", "Agustus", "September", "Oktober", "November", "Desember"
];
const d = dateObj.getDate();
const m = bulan[dateObj.getMonth()];
const y = dateObj.getFullYear();
return `${d} ${m} ${y}`;
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el));
});
document.getElementById('resetTanggal').addEventListener('click', function() {
const activeFilter = document.querySelector('#tabJenisMenu .nav-link.active')?.dataset?.filter || null;
datePicker.clear(); // Reset tanggal
document.getElementById('tanggalTerpilihLabel').classList.add('d-none'); // Sembunyikan label
document.getElementById('tanggalTerpilihLabel').textContent = '';
document.getElementById('resetTanggal').classList.add('d-none');
fetchMenu({ jenis_menu: activeFilter, tanggal_awal: null, tanggal_akhir: null, });
});
});
</script>
@endsection