@extends('layouts.home_menu')
@section('menu', 'active')
@section('page_titulo', 'Adicionar Categoria')
@section('titulo', 'Categorias')
@section('conteudo')
    @if(($empresa->layout_menu ?? 'cartoes') === 'lista')
        <div class="qr-products-list">
            @foreach ($items as $cat)
                <h3 class="mt-4 mb-3">{{ $cat->categoria }}</h3>
                @foreach ($cat->categoria_produto as $p)
                    <article class="qr-product-row">
                        <img src="{{ str_starts_with($p->imagem_produto ?? '', 'menu/') ? asset($p->imagem_produto) : asset('storage/' . $p->imagem_produto) }}" alt="{{ $p->nome }}">
                        <div class="qr-product-content"><h4>{{ $p->nome }}</h4><p>{{ $p->classificacao ?: 'Produto do menu' }}</p><strong>{{ number_format($p->preco, 2, ',', '.') }} Kz</strong></div>
                        <div class="qr-product-actions"><button class="btn btn-light btn-sm" data-nome="{{ $p->nome }}" data-descricao="{{ $p->classificacao }}" data-preco="{{ number_format($p->preco, 2, ',', '.') }}" onclick="showProductDetails(this.dataset)">Detalhes</button><button class="btn-add" aria-label="Adicionar {{ $p->nome }}" data-nome="{{ $p->nome }}" onclick="addToCart({{ $p->id }}, this.dataset.nome, {{ $p->preco }})">+</button></div>
                    </article>
                @endforeach
            @endforeach
        </div>
    @else
    <div class="row">
        @foreach ($items as $cat)
                <div class="col-6">
                    <a href="{{ route('menu.produto', [$cat->id, $table->qr_token]) }}">
                        <div class="categoria">
                            <img src="{{ str_starts_with($cat->imagem_categoria ?? '', 'menu/') ? asset($cat->imagem_categoria) : asset('storage/' . $cat->imagem_categoria) }}" alt="{{ $cat->categoria }}" />

                            <div class="overlay">
                                <h4>{{ $cat->categoria }}</h4>

                                <span>Ver Produtos ></span>
                            </div>
                        </div>
                    </a>
                </div>
        @endforeach
    </div>
    @endif
@endsection