{{--
    O FECHAMENTO DA COMANDA: conta, forma de pagamento e data.

    UM SÓ MODAL PARA A PÁGINA INTEIRA, como o de adicionar itens: a lista de
    contas é a mesma para todas as comandas, e replicá-la por card repetiria o
    mesmo HTML doze vezes. Qual comanda está sendo fechada chega no botão que
    abriu o modal (`data-order-pay-*`), e é o orders.js quem reescreve o `action`
    antes de o modal aparecer.

    ⚠️ SEM `action` NO HTML, de propósito. Um endereço fixo aqui seria o da
    primeira comanda renderizada, e um envio disparado fora do fluxo cobraria a
    comanda errada. O JS preenche ao abrir e LIMPA ao fechar; o `submit` trava
    enquanto estiver vazio.

    O VALOR NÃO É CAMPO. O total aparece só como texto: quem soma os itens é o
    servidor, e um input com o valor seria o navegador dizendo quanto a arena
    recebeu.
--}}
<div class="modal fade" id="order-pay" tabindex="-1" aria-hidden="true" data-order-pay>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="" data-order-pay-form>
                @csrf

                <div class="modal-header">
                    <div>
                        <h2 class="modal-title h5 mb-0">Pagamento</h2>
                        <p class="small text-body-secondary mb-0" data-order-pay-label></p>
                    </div>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>

                <div class="modal-body">
                    {{-- O TOTAL EM DESTAQUE, antes de qualquer campo: é o número
                         que o operador confere com o cliente antes de escolher
                         como receber. --}}
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-body-secondary">Total</span>
                        <span class="fs-4 fw-semibold" data-order-pay-total></span>
                    </div>

                    @error('bank_account_id')
                        <div class="alert alert-danger py-2">{{ $message }}</div>
                    @enderror
                    @error('payment_method')
                        <div class="alert alert-danger py-2">{{ $message }}</div>
                    @enderror
                    @error('paid_on')
                        <div class="alert alert-danger py-2">{{ $message }}</div>
                    @enderror

                    {{-- A CONTA VEM PRIMEIRO porque é a pergunta que o operador
                         responde uma vez e quase nunca muda (a arena costuma ter
                         uma conta só, ou uma padrão). A forma de pagamento é que
                         muda a cada cliente.

                         DINHEIRO NÃO É EXCEÇÃO: a arena cadastra uma conta
                         "Caixa" em Contas Bancárias e escolhe ela aqui. Um
                         caminho especial para espécie deixaria o dinheiro do
                         balcão fora de qualquer conta no financeiro. --}}
                    <div class="mb-3">
                        <label class="form-label" for="order-pay-account">Conta</label>

                        @if ($bankAccounts->isEmpty())
                            {{-- SEM CONTA CADASTRADA o fechamento não acontece, e
                                 a tela diz o que fazer em vez de mostrar um
                                 select vazio que devolveria erro de validação
                                 depois do clique. --}}
                            <div class="alert alert-warning mb-0">
                                Nenhuma conta bancária cadastrada. Cadastre uma em
                                <strong>Financeiro › Contas</strong> para poder registrar o pagamento.
                            </div>
                        @else
                            <select class="form-select" id="order-pay-account" name="bank_account_id" required>
                                {{-- A PADRÃO JÁ VEM SELECIONADA: o controller
                                     ordena com ela na frente, então a primeira
                                     opção é a escolha provável. --}}
                                @foreach ($bankAccounts as $index => $account)
                                    <option value="{{ $account->id }}" @selected($index === 0)>
                                        {{ $account->name }}{{ $account->is_default ? ' (padrão)' : '' }}
                                    </option>
                                @endforeach
                            </select>
                        @endif
                    </div>

                    {{-- FORMA DE PAGAMENTO EM BOTÕES, não em select: são quatro
                         opções fixas, e no balcão o toque num botão grande é mais
                         rápido (e erra menos) que abrir uma lista. São `radio`
                         de verdade por baixo — teclado, leitor de tela e o envio
                         sem JavaScript continuam funcionando.

                         ⚠️ SOME QUANDO A DATA É FUTURA (o orders.js esconde o
                         bloco): como o cliente vai acertar é decisão dele na
                         hora, e perguntar agora só produziria um palpite gravado
                         como fato. O PayOrderRequest não exige o campo nesse
                         caso — a tela e a validação concordam de propósito. --}}
                    <fieldset class="mb-3" data-order-pay-methods>
                        <legend class="form-label float-none">Forma de pagamento</legend>

                        <div class="row row-cols-2 row-cols-sm-4 g-2">
                            @foreach (App\Enums\PaymentMethod::cases() as $index => $method)
                                <div class="col">
                                    <input type="radio" class="btn-check" name="payment_method"
                                           id="order-pay-method-{{ $method->value }}"
                                           value="{{ $method->value }}" @checked($index === 0) required>
                                    <label class="btn btn-outline-primary w-100"
                                           for="order-pay-method-{{ $method->value }}">
                                        <i class="bi {{ $method->icon() }} d-block mb-1"></i>
                                        <span class="small">{{ $method->label() }}</span>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </fieldset>

                    {{-- A DATA JÁ VEM HOJE, que é o caso comum. Adiantá-la é o
                         combinado com o cliente que acumula consumo ("acerto na
                         sexta"): a comanda CONTINUA ABERTA no balcão — ainda é
                         conta a cobrar — e o financeiro ganha uma receita
                         prevista, vencendo naquele dia.

                         `min` de hoje repete no navegador o que o PayOrderRequest
                         exige no servidor — a tela evita o erro, a validação o
                         garante. --}}
                    <div>
                        <label class="form-label" for="order-pay-date">Data do recebimento</label>
                        <input type="date" class="form-control" id="order-pay-date" name="paid_on"
                               value="{{ now()->toDateString() }}" min="{{ now()->toDateString() }}" required
                               data-order-pay-date>
                        <div class="form-text" data-order-pay-hint></div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    {{-- O RÓTULO ACOMPANHA A DATA (trocado pelo orders.js):
                         "Pagar" registra dinheiro que entrou, "Combinar acerto"
                         marca um dia. Um botão só dizendo "Pagar" faria o
                         operador achar que recebeu. --}}
                    <button type="submit" class="btn btn-success" @disabled($bankAccounts->isEmpty())
                            data-order-pay-submit>
                        <i class="bi bi-cash-coin me-1"></i> <span data-order-pay-submit-label>Pagar</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>