@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