<?= $this->extend('layout/template'); ?>

<?= $this->section('content'); ?>

<section class="bg-[#BA290D] pt-28 pb-7 relative overflow-hidden">
    <div class="absolute inset-0 z-0">
        <img src="assets/img/gb_hero/menu.png" alt="About Background" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-black/40"></div>
    </div>
    <div class="container mx-auto px-4 md:px-12 relative z-10 pt-10 pb-4">
        <div class="w-full md:w-1/2 text-white">

            <h1 class="text-5xl md:text-7xl font-black uppercase leading-[0.9] tracking-tighter mb-6">
                OUR MENU<br>
            </h1>

        </div>
    </div>
</section>

<section class="py-12 min-h-screen relative">

    <div id="dropdown-overlay" onclick="toggleDropdown()" class="hidden fixed inset-0 z-[50] min-[570px]:hidden"></div>

    <div class="absolute inset-y-0 left-0 z-[60] min-[570px]:hidden pointer-events-none">

        <div class="sticky top-32 flex items-start pointer-events-auto">

            <button onclick="toggleDropdown()" id="floating-hamburger"
                class="bg-[#BA290D] text-white p-2.5 rounded-r-xl shadow-lg border border-[#BA290D] transition-transform mt-3">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
                    </path>
                </svg>
            </button>

            <aside id="mobile-dropdown"
                class="hidden ml-2 bg-white rounded-2xl shadow-2xl w-48 py-2 border border-gray-100 mt-2">
                <ul class="flex flex-col text-base font-medium tracking-wide">
                    <?php foreach ($menuData as $kdjenis => $kategori): ?>
                        <?php if (!empty($kategori['items'])): ?>
                            <li>
                                <button onclick="showCategory('<?= $kdjenis ?>')"
                                    class="category-btn mobile-btn btn-<?= $kdjenis ?> w-full text-left transition-colors px-6 py-3 <?= $kdjenis === 'J01' ? 'text-[#F35821]' : 'text-[#BA290D] hover:text-[#F35821]' ?>">
                                    <?= esc($kategori['keterangan']); ?>
                                </button>
                            </li>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </ul>
            </aside>

        </div>
    </div>

    <div class="container mx-auto px-4 md:px-12 flex flex-col min-[570px]:flex-row gap-6 md:gap-10">

        <aside class="hidden min-[570px]:block w-1/4 lg:w-1/5 sticky top-24 h-fit z-10">
            <h3 class="text-xs font-bold text-[#075939] uppercase mb-4 tracking-widest">────୨ৎ────</h3>

            <ul class="flex flex-col text-sm font-bold tracking-wide space-y-3">
                <?php foreach ($menuData as $kdjenis => $kategori): ?>
                    <?php if (!empty($kategori['items'])): ?>
                        <li>
                            <button onclick="showCategory('<?= $kdjenis ?>')"
                                class="category-btn desktop-btn btn-<?= $kdjenis ?> w-full text-left transition-colors <?= $kdjenis === 'J01' ? 'text-[#F35821]' : 'text-[#075939] hover:text-[#F35821]' ?>">
                                <?= esc($kategori['keterangan']); ?>
                            </button>
                        </li>
                    <?php endif; ?>
                <?php endforeach; ?>
            </ul>
        </aside>

        <div class="w-full min-[570px]:w-3/4 lg:w-4/5 pt-6 min-[570px]:pt-0">
            <?php foreach ($menuData as $kdjenis => $kategori): ?>
                <?php if (!empty($kategori['items'])): ?>

                    <div id="kategori-<?= $kdjenis ?>"
                        class="menu-section mb-12 min-[570px]:pt-4 <?= $kdjenis === 'J01' ? '' : 'hidden' ?>">
                        <h2
                            class="text-2xl font-extrabold text-[#BA290D] uppercase mb-6 border-b-2 border-[#BA290D]/20 pb-2 inline-block">
                            <?= esc($kategori['keterangan']); ?>
                        </h2>

                        <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4 lg:gap-5">
                            <?php foreach ($kategori['items'] as $item): ?>

                                <?php
                                // if (isset($hiddenMenus) && in_array($item['kdmenu'], $hiddenMenus)) {
                                //     continue;
                                // }
                                ?>
                                <div
                                    class="bg-[#FABB15] p-2 rounded-xl shadow-sm flex flex-col hover:-translate-y-1 transition-transform cursor-pointer">

                                    <?php
                                    $fotoUrl = !empty($item['foto']) ? base_url('uploads/menu/' . $item['foto']) : base_url('assets/img/gb_others/mee.png');
                                    ?>

                                    <img src="<?= $fotoUrl ?>" alt="<?= esc($item['nama_menu']); ?>"
                                        class="w-full aspect-square object-cover bg-white/40 rounded-lg mb-2"
                                        onerror="this.onerror=null; this.src='<?= base_url('images/default-menu.png') ?>';">

                                    <div class="flex flex-col mt-auto px-1 pb-1 gap-1">
                                        <h3 class="font-extrabold text-sm text-[#075939] uppercase tracking-wide leading-tight">
                                            <?= esc($item['nama_menu']); ?>
                                        </h3>
                                        <!-- <p class="font-bold text-xs text-[#BA290D] whitespace-nowrap">
                                            Rp<?= number_format($item['harga_jual'], 0, ',', '.'); ?>
                                        </p> -->
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>

                <?php endif; ?>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<?= $this->endSection(); ?>