@php
    /**
     * Modal de nova comanda — dois passos.
     *
     * Recebe:
     *   $modalId     id do modal (alvo do data-bs-target)
     *   $customers   clientes da arena (passo 1)
     *   $categories  categorias, para as badges de filtro (passo 2)
     *   $products    produtos à venda (passo 2)
     *
     * O passo 2 mora em `orders/_picker.blade.php`, compartilhado com o modal de
     * adicionar itens a uma comanda já aberta — lá está a nota sobre o preço
     * NUNCA viajar no POST.
     *
     * PROGRESSIVE ENHANCEMENT NÃO SE APLICA AQUI, e é bom saber por quê: a
     * escolha de produtos é uma lista dinâmica que não existe sem JavaScript.
     * Sem o bundle carregado, o modal abre no passo 1 e não avança — em vez de
     * um formulário meio funcional que grava comanda vazia.
     */
@endphp

<div class="modal fade" id="{{ $modalId }}" tabindex="-1"
     aria-labelledby="{{ $modalId }}-title" aria-hidden="true"
     data-order-form>
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('orders.store') }}" data-order-submit>
                @csrf

                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="{{ $modalId }}-title">Abrir comanda</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>

                {{-- Erros da validação do servidor. Fica FORA dos painéis: um
                     erro pode ser de um campo do outro passo, e escondê-lo junto
                     com o painel o tornaria invisível — mesmo cuidado do wizard
                     da reserva. --}}
                <div class="alert alert-danger m-3 mb-0 d-none" role="alert" data-order-errors></div>

                {{-- ===== Passo 1 — Cliente ===== --}}
                <div class="modal-body" data-order-step="cliente">
                    <label for="{{ $modalId }}-customer" class="form-label">
                        Cliente <span class="text-danger">*</span>
                    </label>

                    {{-- `<select>` e não `<input>` de busca: o Tom Select
                         (orders.js) transforma o select em campo com busca por
                         nome, exatamente como no passo "Cliente" da reserva. O
                         valor enviado continua sendo o do select, então a
                         validação do servidor não depende do componente. --}}
                    <select class="form-select" id="{{ $modalId }}-customer" name="customer_id"
                            data-order-customer required>
                        <option value="">Selecione…</option>
                        @foreach ($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                        @endforeach
                    </select>

                    @if ($customers->isEmpty())
                        <p class="form-text mb-0">
                            Nenhum cliente cadastrado ainda.
                            <a href="{{ route('customers.index') }}">Cadastre o primeiro</a> para abrir uma comanda.
                        </p>
                    @endif
                </div>

                {{-- ===== Passo 2 — Produtos ===== --}}
                <div class="modal-body p-0 d-none" data-order-step="produtos">
                    @include('orders._picker', [
                        'categories' => $categories,
                        'products' => $products,
                        'submitLabel' => 'Finalizar pedido',
                    ])
                </div>

                <div class="modal-footer">
                    {{-- "Voltar" só aparece no passo 2 — no passo 1 não há para
                         onde voltar, e um botão inerte confunde. --}}
                    <button type="button" class="btn btn-outline-secondary d-none" data-order-back>
                        <i class="bi bi-arrow-left me-1"></i> Trocar cliente
                    </button>

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