@extends('guest.layout.main')
@section('body_main_guests')

<section class="section pb-0 bg-light">
    <style>
        .guest-hero {
            background: linear-gradient(140deg, #3fb072 0%, #268a76 60%, #166d62 100%);
            border-radius: 26px;
            color: #fff;
            overflow: hidden;
            position: relative;
        }

        .guest-hero::before,
        .guest-hero::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            filter: blur(0);
        }

        .guest-hero::before {
            width: 240px;
            height: 240px;
            top: -90px;
            right: -70px;
        }

        .guest-hero::after {
            width: 160px;
            height: 160px;
            bottom: -70px;
            left: -60px;
        }

        .guest-hero__badge {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 999px;
            font-size: 0.78rem;
            letter-spacing: 0.08em;
            padding: 0.45rem 1.1rem;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .guest-hero__title {
            font-size: 2.5rem;
        }

        .guest-hero__lead {
            color: rgba(255, 255, 255, 0.82);
            max-width: 520px;
        }

        .guest-hero__card {
            background: rgba(255, 255, 255, 0.96);
            border-radius: 20px;
        }

        .filter-toolbar {
            margin-top: -2.75rem;
            position: relative;
            z-index: 2;
        }

        .filter-toolbar .card {
            border-radius: 22px;
        }

        .btn-filter {
            background: #ffffff;
            border: 1px solid rgba(40, 123, 98, 0.18);
            border-radius: 999px;
            color: #1f6f56;
            font-weight: 600;
            padding: 0.55rem 1.15rem;
            transition: all 0.2s ease;
        }

        .btn-filter i {
            color: #2c9e7b;
            font-size: 1rem;
        }

        .btn-filter:hover {
            box-shadow: 0 0.75rem 1.65rem rgba(32, 122, 96, 0.14);
            transform: translateY(-2px);
        }

        .btn-filter.active {
            background: linear-gradient(135deg, #2c9e7b, #22a3a3);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 0.9rem 1.8rem rgba(34, 163, 163, 0.2);
        }

        .btn-filter.active i {
            color: #fff;
        }

        .input-icon {
            position: relative;
        }

        .input-icon .icon {
            position: absolute;
            top: 50%;
            left: 1.15rem;
            transform: translateY(-50%);
            color: #7a8a8d;
        }

        .input-icon .form-control {
            background: #f5f9f6;
            border-radius: 16px;
            border: 1px solid transparent;
            padding-left: 3rem;
            transition: all 0.25s ease;
        }

        .input-icon .form-control:focus {
            background: #fff;
            border-color: rgba(40, 123, 98, 0.35);
            box-shadow: 0 1rem 2rem rgba(32, 122, 96, 0.18);
        }

        .selected-range {
            background: #eef9f2;
            border: 1px solid rgba(40, 123, 98, 0.15);
            border-radius: 12px;
            color: #1a5a46;
            padding: 0.5rem 0.85rem;
        }

        .info-banner {
            border-radius: 18px;
        }

        .info-banner .soft-badge {
            background: rgba(44, 158, 123, 0.14);
            border-radius: 999px;
            color: #1e6d52;
            font-weight: 600;
            padding: 0.45rem 1.1rem;
        }

        .info-callout {
            border-radius: 20px;
        }

        .info-callout .icon-wrapper {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            background: rgba(44, 158, 123, 0.14);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2c9e7b;
            font-size: 1.1rem;
        }

        #menuBtn {
            background: linear-gradient(135deg, #ff8662, #ff5d56);
            border: none;
        }

        #floatingCartButton {
            background: linear-gradient(135deg, #248c73, #1c6a5c);
            border: none;
        }

        #floatingCartButton .btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
        }

        @media (max-width: 1199.98px) {
            .guest-hero__title {
                font-size: 2.2rem;
            }

            .guest-hero__lead {
                font-size: 1.05rem;
            }
        }

        @media (max-width: 991.98px) {
            .guest-hero {
                border-radius: 22px;
                text-align: center;
            }

            .guest-hero__title {
                font-size: 2rem;
            }

            .guest-hero__lead {
                margin-inline: auto;
            }

            .guest-hero__card {
                margin-top: 2rem;
                text-align: left;
            }

            .filter-toolbar {
                margin-top: -2.25rem;
            }
        }

        @media (max-width: 767.98px) {
            .guest-hero {
                padding: 2.4rem 1.6rem;
            }

            .guest-hero__title {
                font-size: 1.75rem;
            }

            .guest-hero__lead {
                font-size: 0.95rem;
            }

            .guest-hero__badge {
                font-size: 0.68rem;
            }

            .btn-filter {
                width: 100%;
                justify-content: center;
                font-size: 0.85rem;
                padding: 0.5rem 0.9rem;
            }

            .filter-toolbar .card-body {
                padding: 1.25rem;
            }

            #tanggal-filter .form-control {
                font-size: 0.9rem;
                padding-right: 1rem;
            }

            #menuBtn,
            #floatingCartButton,
            #cartList {
                width: 90%;
            }

            .info-banner .card-body,
            .info-callout .card-body {
                text-align: center;
                gap: 1rem;
            }
        }

        @media (max-width: 575.98px) {
            .guest-hero {
                padding: 2.2rem 1.35rem;
            }

            .guest-hero__title {
                font-size: 1.65rem;
            }

            .btn-filter {
                font-size: 0.8rem;
            }

            .input-icon .icon {
                left: 1rem;
            }
        }
    </style>

    <div class="container position-relative">
        <div class="guest-hero px-4 px-lg-5 py-5 mb-5 shadow-sm" data-aos="fade-up">
            <div class="row align-items-center g-4">
                <div class="col-lg-7">
                    <span class="guest-hero__badge mb-3">
                        <i class="fa fa-seedling"></i>
                        Instalasi Gizi RSAB Harapan Kita
                    </span>
                    <h1 class="guest-hero__title fw-bold mb-3 text-white">Menu Sehat Siap Antar ke Ruang Perawatan</h1>
                    <p class="guest-hero__lead mb-4">
                        Pilih hidangan bernutrisi tinggi untuk karyawan, keluarga pasien, ataupun masyarakat umum.
                        Pesanan dimonitor ahli gizi dan dapat dilacak secara daring.
                    </p>
                    <div class="d-flex flex-wrap gap-2 justify-content-lg-start justify-content-center">
                        <a href="#order_guest_id" class="btn btn-light text-success fw-semibold shadow-sm px-4">
                            <i class="fa fa-utensils me-2"></i>Lihat Menu
                        </a>
                        <a href="#" class="btn btn-outline-light text-white fw-semibold px-4 js-open-guide">
                            <i class="fa fa-book-open me-2"></i>Panduan Pemesanan
                        </a>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="guest-hero__card card border-0 shadow-lg h-100">
                        <div class="card-body p-4">
                            <h5 class="fw-semibold text-primary mb-3">Kenapa Order Gizi?</h5>
                            <ul class="list-unstyled small text-muted mb-0">
                                <li class="d-flex gap-2 mb-2">
                                    <i class="fa fa-check-circle text-success mt-1"></i>
                                    <span>Resep dibuat dan diawasi ahli gizi sesuai kebutuhan nutrisi pasien dan keluarga.</span>
                                </li>
                                <li class="d-flex gap-2 mb-2">
                                    <i class="fa fa-check-circle text-success mt-1"></i>
                                    <span>Pilihan lengkap mulai dari makanan utama, snack, paket hemat, hingga jadwal konsultasi.</span>
                                </li>
                                <li class="d-flex gap-2">
                                    <i class="fa fa-check-circle text-success mt-1"></i>
                                    <span>Pemesanan daring cepat, pembayaran fleksibel, dan status pesanan bisa dipantau.</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="filter-toolbar" data-aos="fade-up" data-aos-delay="100">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 p-lg-4">
                    <div class="d-flex flex-wrap gap-2 justify-content-center" id="tabJenisMenu">
                        <button type="button" class="btn btn-filter active" data-filter="makanan">
                            <i class="bi bi-egg-fried me-2"></i>Makanan
                        </button>
                        <button type="button" class="btn btn-filter" data-filter="minuman">
                            <i class="bi bi-cup-straw me-2"></i>Minuman
                        </button>
                        <button type="button" class="btn btn-filter" data-filter="snack">
                            <i class="bi bi-cookie me-2"></i>Snack
                        </button>
                        <button type="button" class="btn btn-filter" data-filter="paket">
                            <i class="bi bi-gift me-2"></i>Paket
                        </button>
                        <button type="button" class="btn btn-filter" data-filter="konsultasi">
                            <i class="bi bi-person-heart me-2"></i>Konsultasi Gizi
                        </button>
                        <button type="button" class="btn btn-filter" data-filter="cara_pesan">
                            <i class="bi bi-journal-text me-2"></i>Cara Pesan
                        </button>
                    </div>

                    <div class="row g-3 align-items-end mt-2" id="tanggal-filter">
                        <div class="col-lg-6">
                            <label class="form-label text-muted fw-semibold small text-uppercase mb-2">Cari Menu</label>
                            <div class="input-icon">
                                <i class="fa fa-search icon"></i>
                                <input type="text" class="form-control form-control-lg" id="searchMenu" placeholder="Cari menu favorit..." />
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label text-muted fw-semibold small text-uppercase mb-0">
                                    Rentang Tanggal
                                    <a tabindex="0" role="button" class="text-muted ms-1" 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"></i>
                                    </a>
                                </label>
                                <button type="button" id="resetTanggal" class="btn btn-link btn-sm text-decoration-none text-muted d-none">Reset</button>
                            </div>
                            <div class="input-icon">
                                <i class="fa fa-calendar-alt icon"></i>
                                <input type="text" id="tanggal" class="form-control form-control-lg tanggal-input" readonly placeholder="Pilih rentang tanggal" />
                            </div>
                            <div id="tanggalTerpilihLabel" class="selected-range small mt-2 d-none">
                                <i class="fa fa-calendar-check text-success me-2"></i>
                                <span id="labelTanggalText">Menampilkan menu...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="info-banner card border-0 shadow-sm mt-4" data-aos="fade-up" data-aos-delay="150">
            <div class="card-body d-flex flex-column flex-lg-row align-items-lg-center gap-3">
                <div class="soft-badge d-inline-flex align-items-center gap-2">
                    <i class="fa fa-user-md"></i>
                    Konsultasi Gizi
                </div>
                <div class="flex-grow-1 text-muted">
                    Butuh rekomendasi menu? <a href="#" class="alert-link fw-semibold">Daftar konsultasi</a> atau hubungi
                    <a href="https://wa.me/08815611382" target="_blank" class="fw-semibold text-decoration-none text-success">08815611382</a>
                    <span class="d-block small mt-1 text-secondary">Jam layanan: 08.00 - 15.00 WIB</span>
                </div>
                <div class="d-flex flex-wrap gap-2 justify-content-lg-end">
                    <a href="https://wa.me/08815611382" target="_blank" class="btn btn-success btn-sm px-3">
                        <i class="fa-brands fa-whatsapp me-2"></i>Hubungi Kami
                    </a>
                    <button type="button" class="btn btn-outline-success btn-sm px-3 js-open-guide d-none d-lg-inline-flex">
                        <i class="fa fa-journal-text me-2"></i>Cara Pesan
                    </button>
                </div>
            </div>
        </div>

        <div class="mt-4" id="order_guest_id"></div>

        <button type="button" id="menuBtn"
            class="btn position-fixed start-50 translate-middle-x rounded-pill shadow-lg d-flex align-items-center gap-2 px-3 py-2 d-none text-white"
            style="bottom: 75px; z-index: 1051; font-size: .85rem;" 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>

        <div id="floatingCartButton"
            class="position-fixed start-50 translate-middle-x 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" class="text-white-50">Lihat keranjang</small>
            </div>
            <div class="btn btn-sm rounded-circle">
                <i class="fa-solid fa-cart-shopping text-white"></i>
            </div>
        </div>

        <div class="info-callout card border-0 shadow-sm mt-5" data-aos="fade-up" data-aos-delay="200">
            <div class="card-body d-flex flex-column flex-md-row align-items-start gap-3">
                <div class="icon-wrapper">
                    <i class="fa fa-info-circle"></i>
                </div>
                <div>
                    <h6 class="fw-semibold text-primary mb-2">Butuh Bantuan?</h6>
                    <p class="mb-2 text-muted small">
                        Hubungi WhatsApp <strong>Instalasi Gizi</strong> di
                        <a href="https://wa.me/08815611382" target="_blank" class="fw-semibold text-decoration-none text-success">08815611382</a>
                        untuk pertanyaan seputar pemesanan.
                    </p>
                    <span class="badge bg-light text-muted fw-normal">Jam kerja: 08.00 - 15.00 WIB</span>
                </div>
            </div>
        </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 labelElement = document.getElementById('tanggalTerpilihLabel');
    const labelText = document.getElementById('labelTanggalText');
    const resetTanggalButton = document.getElementById('resetTanggal');

    const datePicker = flatpickr("#tanggal", {
        dateFormat: "Y-m-d",
        mode: "range",
        onChange: function (selectedDates) {
            if (selectedDates.length === 2) {
                const [start, end] = selectedDates;
                const startDay = start.getDate();
                const endDay = end.getDate();

                if (start.getTime() === end.getTime()) {
                    labelText.textContent = `Menampilkan menu tersedia untuk tanggal: ${formatTanggal(start)}`;
                } else {
                    labelText.textContent = `Menampilkan menu tersedia dari ${formatTanggal(start)} hingga ${formatTanggal(end)}`;
                }

                const activeFilter = document.querySelector('#tabJenisMenu .btn.active')?.dataset?.filter || null;
                fetchMenu({ jenis_menu: activeFilter, tanggal_awal: startDay, tanggal_akhir: endDay });

                labelElement.classList.remove('d-none');
                resetTanggalButton.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));
    });

    resetTanggalButton.addEventListener('click', function () {
        const activeFilter = document.querySelector('#tabJenisMenu .btn.active')?.dataset?.filter || null;
        datePicker.clear();
        labelElement.classList.add('d-none');
        labelText.textContent = 'Menampilkan menu...';
        resetTanggalButton.classList.add('d-none');
        fetchMenu({ jenis_menu: activeFilter, tanggal_awal: null, tanggal_akhir: null });
    });

    document.querySelectorAll('.js-open-guide').forEach(btn => {
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            const guideBtn = document.querySelector('#tabJenisMenu .btn[data-filter="cara_pesan"]');
            if (guideBtn) {
                guideBtn.click();
                guideBtn.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        });
    });
</script>
@endsection