@forelse ($menus as $menu)
<div class="col-lg-2 col-md-3 col-6 mb-3">
    <div class="card shadow-sm rounded border-0 position-relative overflow-hidden d-flex flex-column" style="height: 265px;">
        @php
        $imageUrl = $menu->image ? asset('storage/image/menu/' . $menu->image) : asset('storage/image/menu/coffeee.jpg');
        @endphp
        <div class="rounded-top" style="background-image: url('{{ $imageUrl }}'); height: 140px; background-size: cover; background-position: center; 
            {{ $menu->status === 'unavailable' ? 'filter: grayscale(100%); opacity: 0.5;' : '' }}">
        </div>
        <div class="card-body d-flex flex-column justify-content-start text-center p-2 flex-grow-1">
            <div>
                <h6 class="fw-bold" style="font-size: 1rem;">{{ $menu->name }}</h6>
            </div>
            <div class="mt-auto" id="menu-btn-{{ $menu->id }}">
                @if ($menu->status === 'unavailable')
                    <button class="btn btn-outline-secondary btn-sm w-100 rounded mb-2" disabled style="cursor: not-allowed;">
                        <i class="bi bi-x-circle me-1"></i> Habis
                    </button>
                @else
                    <div class="text-muted" style="font-size: 0.9rem;">
                        {{ formatRupiah($menu->price) }}
                    </div>
                    <div class="d-flex align-items-center justify-content-center my-2" style="gap: 5px;">
                        <button id="btn-minus" class="btn btn-sm btn-danger" onclick="kurangQty({{ $menu->id }})">-</button>
                        <input type="text" id="menu-qty" class="form-control text-center" value="0" readonly>
                        <button id="btn-plus" class="btn btn-sm btn-success" onclick="tambahQty({{ $menu->id }})">+</button>
                    </div>
                    <button id="btn-add" class="btn btn-success btn-sm w-100 rounded my-2" onclick="getCart({{ $menu->id }}, 'pelanggan')">
                        <i class="bi bi-plus-circle me-1"></i> Tambah
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>
@empty
<div class="col-12">
    <div class="text-center my-5 py-5">
        <div class="mb-3">
            <i class="bi bi-x-octagon-fill fa-2x text-secondary"></i>
        </div>
        <div class="font-weight-bold">Menu Tidak Ditemukan</div>
    </div>
</div>
@endforelse

<div class="col-12">
    <div class="d-flex justify-content-center">
        {!! $menus->links() !!}
    </div>
</div>