@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>



        <div id="order_guest_id"></div>
        <div id="floatingCartButton"
                class="cart-floating bg-success text-white rounded d-none shadow-lg"
                onclick="checkout()"
                style="cursor: pointer; position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 1050; width: 90%; max-width: 500px;">
                <div class="d-flex justify-content-between align-items-center px-3 py-2">
                    <div>
                        <strong><span id="floatingCartCount">0</span> item</strong><br>
                        <small id="floatingCartDesc">Isi keranjang anda</small>
                    </div>
                    <div class="d-flex align-items-center">
                        <div class="btn btn-light btn-sm">
                            <i class="fa-solid fa-cart-shopping text-success"></i>
                        </div>
                    </div>
                </div>
            </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