@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>&nbsp;
                        Butuh rekomendasi menu sesuai kondisi Anda?
                        &nbsp;<a href="#" class="alert-link">Lihat jadwal konsultasi & daftar sekarang</a>.
                    </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-3 py-2 d-none"
                style="bottom: 75px; z-index: 1051; font-size: .8rem;" onclick="toggleCartList()">
        <i class="fa-solid fa-bell-concierge"></i>
        <span>Menu</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 Penting
            </div>
            <ul class="mb-0 ps-3">
                <li>
                    <strong>Menu Normal:</strong> Dipesan maksimal H-1 sebelum pukul <strong>13.00 WIB</strong>.
                </li>
                <li>
                    <strong>Menu Same Day:</strong> Dipesan pada hari yang sama setelah pukul <strong>13.00 WIB</strong>.
                    <ul class="ps-3 mt-1">
                            <li><strong>Makan Siang:</strong> maksimal pukul <strong>10.00 WIB</strong></li>
                            <li><strong>Makan Sore:</strong> maksimal pukul <strong>13.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>
</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