@extends('layouts.home_menu')
@section('menu', 'active')
@section('page_titulo', 'Menu')
@section('titulo', 'Menu')
@section('conteudo')
    <div class="mb-3">
        <label class="form-label fw-semibold" for="search">Pesquisar no menu</label>
        <input id="search" class="form-control" type="search" placeholder="Nome do produto..." autocomplete="off">
    </div>
    <div class="d-flex gap-2 overflow-auto pb-3" aria-label="Filtrar por categoria">
        <button type="button" class="btn btn-dark btn-sm text-nowrap" onclick="filterProducts('all')">Todos</button>
        @foreach ($items as $category)
            <button type="button" class="btn btn-outline-secondary btn-sm text-nowrap" onclick="filterProducts('{{ $category->id }}')">{{ $category->categoria }}</button>
        @endforeach
    </div>
    <div class="qr-products-list" id="products">
        @foreach ($items as $category)
            @foreach ($category->categoria_produto as $product)
                <article class="product-row qr-compact-row" data-category="{{ $category->id }}" data-name="{{ mb_strtolower($product->nome) }}">
                    <div class="flex-grow-1 min-w-0">
                        <small class="text-muted">{{ $category->categoria }}</small>
                        <h5 class="mb-1 text-truncate">{{ $product->nome }}</h5>
                        <strong>{{ number_format((float) $product->preco, 2, ',', '.') }} Kz</strong>
                    </div>
                    <button type="button" class="btn-add" aria-label="Adicionar {{ $product->nome }}" data-nome="{{ $product->nome }}" onclick="addToCart({{ $product->id }}, this.dataset.nome, {{ (float) $product->preco }})">+</button>
                </article>
            @endforeach
        @endforeach
    </div>
    @if ($items->isEmpty() || $items->every(fn ($category) => $category->categoria_produto->isEmpty()))
        <p class="text-center text-muted py-5">Ainda não há produtos disponíveis no menu.</p>
    @endif
@endsection