528 lines
20 KiB
PHP
528 lines
20 KiB
PHP
@extends('guest.layout.main')
|
|
@section('body_main_guests')
|
|
|
|
<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;
|
|
}
|
|
|
|
.guest-hero::before,
|
|
.guest-hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
filter: blur(0);
|
|
}
|
|
|
|
.guest-hero::before {
|
|
width: 240px;
|
|
height: 240px;
|
|
top: -90px;
|
|
right: -70px;
|
|
}
|
|
|
|
.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>
|
|
<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 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>
|
|
|
|
<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>
|
|
|
|
<button type="button" id="menuBtn"
|
|
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;">
|
|
<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>
|
|
|
|
<div id="floatingCartButton"
|
|
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" 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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@include('guest.checkout_order')
|
|
@include('guest.cara_bayar')
|
|
|
|
<script src="{{ ver('/js/order_guest/register.js') }}"></script>
|
|
<script src="{{ ver('/js/order_guest/functions.js') }}"></script>
|
|
<script src="{{ ver('/js/order_guest/index.js') }}"></script>
|
|
<script>
|
|
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) {
|
|
if (selectedDates.length === 2) {
|
|
const [start, end] = selectedDates;
|
|
const startDay = start.getDate();
|
|
const endDay = end.getDate();
|
|
|
|
if (start.getTime() === end.getTime()) {
|
|
labelText.textContent = `Menampilkan menu tersedia untuk tanggal: ${formatTanggal(start)}`;
|
|
} else {
|
|
labelText.textContent = `Menampilkan menu tersedia dari ${formatTanggal(start)} hingga ${formatTanggal(end)}`;
|
|
}
|
|
|
|
const activeFilter = document.querySelector('#tabJenisMenu .btn.active')?.dataset?.filter || null;
|
|
fetchMenu({ jenis_menu: activeFilter, tanggal_awal: startDay, tanggal_akhir: endDay });
|
|
|
|
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' });
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|
|
|