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

<section class="section py-5 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-md-12 mb-2">
                <div id="welcomeMessage"></div>
            </div>
            <div class="col-md-6">
                <ul class="nav nav-tabs mb-4 " 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>
                </ul>
            </div>
            <div class="col-md-6">
                 <div class="mb-4">
                     <input type="text" class="form-control" id="searchMenu" placeholder="Pencarian...">
                </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="renderCartList()"
            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">
                    <strong class="me-3 text-white" id="floatingCartTotal">Rp 0</strong>
                    <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.register')
@include('guest.checkout_order')
@include('guest.keranjang')

<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