@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 g-2 m-2">
            <!-- Filter Kategori Ketersediaan -->
            <div class="col-12 mb-2">
                <h6 class="fw-bold text-muted">Ketersediaan Menu</h6>
                <div class="d-flex flex-wrap gap-2">
                    <button type="button" class="btn btn-outline-success btn-sm" data-filter="someday">Tersedia Setiap Hari</button>
                    <button type="button" class="btn btn-outline-primary btn-sm" data-filter="normal">Tersedia di Tanggal Tertentu</button>
                </div>
            </div>

            <!-- Filter Kategori Menu -->
            <div class="col-12 mt-3">
                <h6 class="fw-bold text-muted">Kategori Menu</h6>
                <div class="d-flex flex-wrap gap-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-filter="menu1">Menu 1</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-filter="menu2">Menu 2</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-filter="menu3">Menu 3</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-filter="menu4">Menu 4</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-filter="menu5">Menu 5</button>
                    <!-- dan seterusnya -->
                </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>

@endsection