208 lines
10 KiB
PHP
208 lines
10 KiB
PHP
@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>
|
|
|
|
{{-- <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> --}}
|
|
|
|
</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>
|
|
|
|
<!-- 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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
|
|
|
|
|
|
<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 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>
|
|
|
|
@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 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 .btn.btn-success.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
|