@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="Pesquisar pratos e bebidas..." 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')">Todas</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 qr-menu2-list" id="products">
        @foreach ($items as $category)
            @foreach ($category->categoria_produto as $product)
                <article class="product-row qr-product-row qr-menu2-row" data-category="{{ $category->id }}" data-name="{{ mb_strtolower($product->nome) }}">
                    <img src="{{ $product->imagem_produto ? (str_starts_with($product->imagem_produto, 'menu/') ? asset($product->imagem_produto) : asset('storage/' . $product->imagem_produto)) : '' }}" alt="{{ $product->nome }}" loading="lazy" onerror="this.style.display='none'">
                    <div class="qr-product-content">
                        <small class="text-muted">{{ $category->categoria }}</small>
                        <h4>{{ $product->nome }}</h4>
                        <p>{{ $product->classificacao ?: 'Produto do menu' }}</p>
                        <strong>{{ number_format((float) $product->preco, 2, ',', '.') }} Kz</strong>
                    </div>
                    <div class="qr-product-actions">
                        <button type="button" class="btn btn-light btn-sm" data-nome="{{ $product->nome }}" data-descricao="{{ $product->classificacao }}" data-preco="{{ number_format((float) $product->preco, 2, ',', '.') }}" onclick="showProductDetails(this.dataset)">Detalhes</button>
                        <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>
                    </div>
                </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