@extends('layouts.home_menu')
@section('menu', 'active')
@section('page_titulo', $items->categoria)
@section('titulo', $items->categoria)
@section('conteudo')
    <a href="{{ route('menu', $table->qr_token) }}" class="btn btn-light mb-3">← Voltar ao menu</a>
    <h3>{{ $items->categoria }}</h3>

    @if (in_array($empresa->layout_menu ?? 'menu', ['menu1', 'menu2', 'lista']))
        <label class="form-label fw-semibold mt-3" for="search">Pesquisar nesta categoria</label>
        <input id="search" class="form-control mb-3" type="search" placeholder="Nome do produto..." autocomplete="off">
        <div class="qr-products-list {{ in_array($empresa->layout_menu, ['menu2']) ? 'qr-menu2-list' : '' }}" id="products">
            @foreach ($items->categoria_produto as $product)
                @if (($empresa->layout_menu ?? '') === 'menu2')
                    <article class="product-row qr-product-row qr-menu2-row" data-category="{{ $items->id }}" data-name="{{ mb_strtolower($product->nome) }}">
                        @if ($product->imagem_produto)<img src="{{ str_starts_with($product->imagem_produto, 'menu/') ? asset($product->imagem_produto) : asset('storage/' . $product->imagem_produto) }}" alt="{{ $product->nome }}" loading="lazy">@endif
                        <div class="qr-product-content">
                            <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>
                @else
                    <article class="product-row qr-compact-row" data-category="{{ $items->id }}" data-name="{{ mb_strtolower($product->nome) }}">
                        <div class="flex-grow-1 min-w-0"><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>
                @endif
            @endforeach
        </div>
    @else
        <div class="row mt-4">
            @foreach ($items->categoria_produto as $product)
                <div class="col-12 mb-3">
                    <div class="card border-0 shadow-sm">
                        <div class="row g-0">
                            <div class="col-4">
                                @if ($product->imagem_produto)<img src="{{ str_starts_with($product->imagem_produto, 'menu/') ? asset($product->imagem_produto) : asset('storage/' . $product->imagem_produto) }}" class="img-fluid rounded-start" style="height:140px;width:100%;object-fit:cover" alt="{{ $product->nome }}">@endif
                            </div>
                            <div class="col-8">
                                <div class="card-body">
                                    <h5>{{ $product->nome }}</h5><p>{{ $product->classificacao }}</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <strong class="text-danger">{{ number_format((float) $product->preco, 2, ',', '.') }} Kz</strong>
                                        <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>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
@endsection