@forelse ($menus as $menu)
<div class="col-lg-3 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: 300px;">
        @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">
                @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>
                    <button class="btn btn-success btn-sm w-100 rounded my-2" onclick="getCart({{ $menu->id }})">
                        <i class="bi bi-plus-circle me-1"></i> Tambah
                    </button>
                @endif

                <div class="d-flex justify-content-center align-items-center gap-2 small">
                    <button class="btn btn-light border p-0 shadow-sm btn-toggle-status" data-id="{{ $menu->id }}" style="width: 32px; height: 32px; border-radius: 50%;">
                        @if($menu->status === 'available')
                            <i class="bi bi-toggle-on text-success fs-5"></i>
                        @else
                            <i class="bi bi-toggle-off text-secondary fs-5"></i>
                        @endif
                    </button>
                    <span class="fw-semibold {{ $menu->status === 'available' ? 'text-success' : 'text-secondary' }}">
                        {{ $menu->status === 'available' ? 'Tersedia' : 'Habis' }}
                    </span>
                </div>
            </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>