199 lines
9.4 KiB
PHP
199 lines
9.4 KiB
PHP
@extends('guest.layout.main')
|
||
@section('body_main_guests')
|
||
|
||
<section class="section py-5 bg-light">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
|
||
<ul class="nav nav-tabs mb-3" 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>
|
||
</ul>
|
||
</div>
|
||
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
|
||
<div class="mb-3">
|
||
<input type="text" class="form-control" id="searchMenu" placeholder="Pencarian...">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row ms-1" id="tanggal-filter">
|
||
<div class="col-12 mb-2">
|
||
<h6 class="fw-bold text-muted mb-1">
|
||
Pilih Tanggal Makanan
|
||
<a tabindex="0" class="ms-1 text-decoration-none" role="button" data-bs-toggle="popover" data-bs-trigger="focus"
|
||
title="Panduan"
|
||
data-bs-content="Pilih rentang tanggal untuk melihat daftar menu yang tersedia pada tanggal tersebut.">
|
||
<i class="fa fa-info-circle text-secondary"></i>
|
||
</a>
|
||
</h6>
|
||
|
||
<div class="input-group input-group-sm mb-2" style="max-width: 350px;">
|
||
<span class="input-group-text bg-white px-2">
|
||
<i class="fa fa-calendar-alt text-primary"></i>
|
||
</span>
|
||
|
||
<input type="text"
|
||
id="tanggal"
|
||
class="form-control form-control-sm tanggal-input"
|
||
readonly
|
||
placeholder="Contoh: 7 - 10 Agustus 2025"
|
||
title="Klik untuk membuka kalender"
|
||
style="font-size: 0.85rem; padding: 0.3rem 0.5rem;">
|
||
|
||
<!-- Tombol X di sebelah input -->
|
||
<button type="button" id="resetTanggal"
|
||
class="btn btn-sm btn-light border d-none"
|
||
title="Reset Tanggal">
|
||
<i class="fa fa-times text-muted"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div id="tanggalTerpilihLabel"
|
||
class="bg-light border text-dark mt-1 d-none rounded px-2 py-1"
|
||
style="font-size: 0.75rem; word-wrap: break-word; overflow-wrap: break-word;">
|
||
<i class="fa fa-calendar-check text-success me-1"></i>
|
||
<span id="labelTanggalText">Menampilkan menu...</span>
|
||
</div>
|
||
</div>
|
||
<div class="alert alert-info mb-3 shadow-sm rounded-3" role="alert">
|
||
<div class="d-flex align-items-center overflow-hidden">
|
||
<div class="flex-grow-1">
|
||
<marquee
|
||
behavior="scroll"
|
||
direction="left"
|
||
scrollamount="4"
|
||
onmouseover="this.stop()"
|
||
onmouseout="this.start()"
|
||
>
|
||
<i class="fa fa-user-md fa-lg me-2 text-primary flex-shrink-0"></i>
|
||
<strong>Konsultasi Gizi!</strong>
|
||
Butuh rekomendasi menu sesuai kondisi Anda?
|
||
<a href="#" class="alert-link">Lihat jadwal konsultasi & daftar sekarang</a>.
|
||
Butuh bantuan? Hubungi WhatsApp <strong>Instalasi Gizi</strong>
|
||
<a href="https://wa.me/08815611382 " target="_blank">08815611382 </a>
|
||
<small class="text-muted">Jam kerja: 08.00 – 15.00 WIB</small>
|
||
</marquee>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</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>
|
||
<!-- Floating Cart -->
|
||
<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"
|
||
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>
|
||
<ul class="mb-0 ps-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>
|
||
|
||
@include('guest.checkout_order')
|
||
|
||
<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 datePicker = flatpickr("#tanggal", {
|
||
dateFormat: "Y-m-d",
|
||
mode: "range",
|
||
onChange: function (selectedDates, dateStr) {
|
||
const label = document.getElementById('tanggalTerpilihLabel');
|
||
const resetBtn = document.getElementById('resetTanggal');
|
||
|
||
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)}`;
|
||
} else {
|
||
label.textContent = `Menampilkan menu tersedia dari ${formatTanggal(start)} hingga ${formatTanggal(end)}`;
|
||
}
|
||
const activeFilter = document.querySelector('#tabJenisMenu .nav-link.active')?.dataset?.filter || null;
|
||
// Baru kirim ke fetchMenu jika dua tanggal sudah dipilih
|
||
fetchMenu({ jenis_menu: activeFilter, tanggal_awal: startDay, tanggal_akhir: endDay });
|
||
|
||
label.classList.remove('d-none');
|
||
resetBtn.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));
|
||
});
|
||
|
||
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
|