@php
    /**
     * O PASSO DE PRODUTOS — catálogo à esquerda, carrinho à direita.
     *
     * Extraído para um parcial porque DOIS modais o usam: o de nova comanda
     * (onde ele é o passo 2, depois do cliente) e o de adicionar itens a uma
     * comanda já aberta (onde ele é a tela inteira, porque o dono já está
     * definido). Duplicar o catálogo em dois arquivos faria a próxima mudança de
     * card de produto precisar acontecer nos dois — e a segunda seria esquecida.
     *
     * O QUE VIAJA NO POST: apenas `product_id` e `quantity` por item. O PREÇO NÃO
     * É ENVIADO. Os `data-order-product-price` existem só para o JavaScript somar
     * na tela; quem decide quanto vale cada item é o OrderController, lendo
     * `products.price` do banco. Se algum dia alguém acrescentar um
     * `<input name="items[][unit_price]">` aqui, a arena passa a aceitar o preço
     * que o navegador mandar.
     *
     * @param \Illuminate\Support\Collection $categories  categorias, para as badges de filtro
     * @param \Illuminate\Support\Collection $products    produtos à venda
     * @param string $submitLabel                         rótulo do botão que envia
     */
@endphp

<div class="order-picker">
    {{-- Catálogo, à esquerda. --}}
    <div class="order-picker__catalog">
        {{-- Badges de categoria. `flex-nowrap` + `overflow-x` na classe: com
             muitas categorias a faixa rola na horizontal em vez de quebrar em
             três linhas e empurrar a grade para fora da tela. --}}
        <div class="order-categories" role="group" aria-label="Filtrar por categoria">
            <button type="button" class="btn btn-sm btn-primary order-categories__item"
                    data-order-category="">
                Todas
            </button>

            @foreach ($categories as $category)
                <button type="button" class="btn btn-sm btn-outline-secondary order-categories__item"
                        data-order-category="{{ $category->id }}">
                    {{ $category->name }}
                </button>
            @endforeach
        </div>

        <div class="order-products" data-order-products>
            @forelse ($products as $product)
                {{-- O card inteiro é o botão: a área de clique é a imagem toda,
                     que é o alvo grande de que o balcão precisa. Um botão
                     "adicionar" no rodapé exigiria mira. --}}
                <button type="button" class="card order-product"
                        data-order-product="{{ $product->id }}"
                        data-order-product-name="{{ $product->name }}"
                        data-order-product-price="{{ $product->price }}"
                        data-order-product-category="{{ $product->product_category_id }}">
                    @if ($product->imageUrl())
                        <img src="{{ $product->imageUrl() }}" alt=""
                             class="order-product__image" loading="lazy">
                    @else
                        {{-- `aria-hidden` no ícone: o nome do produto já está no
                             rodapé, e o leitor de tela anunciaria "imagem" sem
                             acrescentar nada. --}}
                        <span class="order-product__image order-product__image--empty">
                            <i class="bi bi-image" aria-hidden="true"></i>
                        </span>
                    @endif

                    <span class="card-footer order-product__footer">
                        <span class="order-product__name">{{ $product->name }}</span>
                        <span class="order-product__price">{{ $product->formattedPrice() }}</span>
                    </span>
                </button>
            @empty
                <p class="text-body-secondary text-center py-5 mb-0 order-products__empty">
                    Nenhum produto à venda.
                    <a href="{{ route('products.index') }}">Cadastre um produto</a> para lançar pedidos.
                </p>
            @endforelse
        </div>

        {{-- Aviso de "nenhum produto nesta categoria": o JS o mostra quando o
             filtro esconde tudo. Sem ele, a grade vazia pareceria travamento. --}}
        <p class="text-body-secondary text-center py-5 mb-0 d-none" data-order-no-results>
            Nenhum produto nesta categoria.
        </p>
    </div>

    {{-- Carrinho, à direita. --}}
    <aside class="order-cart" aria-label="Produtos escolhidos">
        <div class="order-cart__head">
            <span class="fw-semibold">Pedido</span>
            {{-- Quem é o dono do que está sendo montado: no modal de nova comanda
                 é o cliente escolhido no passo 1; no de adicionar itens é a
                 comanda que abriu o modal. Nos dois casos quem escreve é o JS. --}}
            <span class="text-body-secondary small" data-order-customer-name></span>
        </div>

        <ul class="order-cart__items list-unstyled mb-0" data-order-cart></ul>

        {{-- Estado vazio do carrinho. O JS o esconde no primeiro item e o traz de
             volta quando o último sai — um painel em branco não diria o que
             fazer. --}}
        <p class="order-cart__empty text-body-secondary text-center small" data-order-cart-empty>
            Toque num produto para adicioná-lo ao pedido.
        </p>

        <div class="order-cart__foot">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="text-body-secondary">Total</span>
                <span class="fs-5 fw-semibold" data-order-total>R$ 0,00</span>
            </div>

            {{-- Nasce desabilitado: pedido sem item seria recusado pelo servidor,
                 e é melhor o botão não convidar ao erro do que explicá-lo depois.
                 O JS o habilita no primeiro item. --}}
            <button type="submit" class="btn btn-primary w-100" data-order-finish disabled>
                {{ $submitLabel }}
            </button>
        </div>
    </aside>
</div>