@php
    /**
     * Modal de ADICIONAR ITENS a uma comanda já aberta.
     *
     * Recebe:
     *   $categories  categorias, para as badges de filtro
     *   $products    produtos à venda
     *
     * UM SÓ MODAL PARA TODAS AS COMANDAS DA PÁGINA, e é a decisão central deste
     * arquivo. O catálogo é a parte pesada da tela (um card com imagem por
     * produto); um modal por comanda multiplicaria esse HTML pelas 12 comandas
     * da página, para mostrar sempre a mesma grade. Aqui o modal é único e o
     * `action` do formulário é reescrito pelo orders.js a partir do
     * `data-order-append-url` do botão que o abriu.
     *
     * NÃO HÁ PASSO DE CLIENTE: a comanda já tem dono. O passo de produtos é a
     * tela inteira, e por isso o parcial é incluído sem o `d-none` que o modal
     * de nova comanda usa para escondê-lo até o cliente ser escolhido.
     *
     * ⚠️ O CARRINHO ABRE PREENCHIDO com o que a comanda já tem, e o envio é a
     * LISTA FINAL — o que o operador tirar daqui sai da comanda. Por isso o
     * método é PUT, e por isso o `action` NASCE VAZIO: sem JavaScript não há
     * como saber de qual comanda o carrinho foi carregado, e um endereço padrão
     * faria um formulário vazio APAGAR os itens de uma comanda qualquer. Mesmo
     * princípio do modal de nova comanda: sem o bundle, ele não funciona pela
     * metade — ele não funciona.
     */
@endphp

<div class="modal fade" id="order-add-items" tabindex="-1"
     aria-labelledby="order-add-items-title" aria-hidden="true"
     data-order-form data-order-sync>
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="" data-order-submit>
                @csrf
                @method('PUT')

                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="order-add-items-title">Itens da comanda</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>

                <div class="alert alert-danger m-3 mb-0 d-none" role="alert" data-order-errors></div>

                <div class="modal-body p-0" data-order-step="produtos">
                    @include('orders._picker', [
                        'categories' => $categories,
                        'products' => $products,
                        'submitLabel' => 'Salvar itens',
                    ])
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                </div>
            </form>
        </div>
    </div>
</div>