@php
    /**
     * Modal de conta bancária — o mesmo arquivo para cadastrar e editar.
     *
     * Recebe:
     *   $modalId  id do modal (alvo do data-bs-target)
     *   $account  null para cadastro; a conta para edição
     *
     * DUAS TELAS DENTRO DO MESMO MODAL: o formulário e o seletor de ícones,
     * alternados por resources/js/bank-icons.js. Um segundo modal por cima seria
     * um problema conhecido do Bootstrap (backdrop empilhado, foco perdido) sem
     * ganho nenhum — são dois passos do mesmo cadastro.
     *
     * `form_id` viaja escondido para a tela saber qual modal reabrir quando a
     * validação recusar, mesmo mecanismo das outras telas do financeiro.
     */
    $isEdit = $account !== null;
    $wasSubmitted = $errors->any() && old('form_id') === $modalId;
    $icon = $wasSubmitted ? old('icon') : ($account->icon ?? '');
@endphp

<div class="modal fade" id="{{ $modalId }}" tabindex="-1"
     aria-labelledby="{{ $modalId }}-title" aria-hidden="true"
     data-bank-account-form
     @if ($wasSubmitted) data-financial-autoopen @endif>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST"
                  action="{{ $isEdit
                      ? route('financial.bank-accounts.update', $account)
                      : route('financial.bank-accounts.store') }}">
                @csrf
                @if ($isEdit)
                    @method('PUT')
                @endif

                <input type="hidden" name="form_id" value="{{ $modalId }}">

                {{-- O slug escolhido. É ele que vai para o banco; o SVG nunca. --}}
                <input type="hidden" name="icon" value="{{ $icon }}" data-bank-icon-input>

                {{-- ====================== TELA 1: o formulário ====================== --}}
                <div data-bank-view="form">
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="{{ $modalId }}-title">
                            {{ $isEdit ? 'Editar conta' : 'Nova conta manual' }}
                        </h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                    </div>

                    <div class="modal-body">
                        <div class="text-center mb-4">
                            <button type="button" class="btn btn-link p-0 border-0" data-bank-open-picker
                                    aria-label="Escolher um ícone para a conta">
                                <span data-bank-icon="{{ $icon }}" data-bank-size="72" data-bank-icon-preview></span>
                                <span class="d-block small text-body-secondary mt-1">escolha um ícone</span>
                            </button>
                        </div>

                        <div class="mb-3">
                            <label for="{{ $modalId }}-name" class="form-label">Nome da conta</label>
                            <input type="text" id="{{ $modalId }}-name" name="name"
                                   class="form-control @if ($wasSubmitted && $errors->has('name')) is-invalid @endif"
                                   value="{{ $wasSubmitted ? old('name') : ($account->name ?? '') }}"
                                   maxlength="255" required>
                            @if ($wasSubmitted && $errors->has('name'))
                                <div class="invalid-feedback">{{ $errors->first('name') }}</div>
                            @else
                                <div class="form-text">Dê um nome para identificar esta conta.</div>
                            @endif
                        </div>

                        {{-- AGÊNCIA E NÚMERO SÃO OPCIONAIS. O cadastro continua
                             informativo: a arena que só quer dizer "entrou pelo
                             Itaú" não precisa saber o número da própria conta.
                             Existem para a transferência entre contas, onde o
                             usuário pode digitar uma conta e pedir para salvá-la
                             — sem estes campos, o que ele digitou se perderia na
                             primeira edição do cadastro.

                             Texto, não `number`: "0001" perderia o zero à
                             esquerda e "12345-6" não caberia. --}}
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <label for="{{ $modalId }}-branch" class="form-label">
                                    Agência <span class="text-body-secondary fw-normal">(opcional)</span>
                                </label>
                                <input type="text" id="{{ $modalId }}-branch" name="branch"
                                       class="form-control @if ($wasSubmitted && $errors->has('branch')) is-invalid @endif"
                                       value="{{ $wasSubmitted ? old('branch') : ($account->branch ?? '') }}"
                                       maxlength="20" placeholder="0001">
                                @if ($wasSubmitted && $errors->has('branch'))
                                    <div class="invalid-feedback">{{ $errors->first('branch') }}</div>
                                @endif
                            </div>

                            <div class="col-6">
                                <label for="{{ $modalId }}-number" class="form-label">
                                    Conta <span class="text-body-secondary fw-normal">(opcional)</span>
                                </label>
                                <input type="text" id="{{ $modalId }}-number" name="number"
                                       class="form-control @if ($wasSubmitted && $errors->has('number')) is-invalid @endif"
                                       value="{{ $wasSubmitted ? old('number') : ($account->number ?? '') }}"
                                       maxlength="30" placeholder="12345-6">
                                @if ($wasSubmitted && $errors->has('number'))
                                    <div class="invalid-feedback">{{ $errors->first('number') }}</div>
                                @endif
                            </div>
                        </div>

                        {{-- A conta padrão da arena. Uma só: marcar esta tira a
                             marca da anterior, sem perguntar — é o
                             comportamento esperado de um "padrão", e avisar a
                             cada troca viraria ruído. Desmarcar deixa a arena
                             sem padrão, que é um estado válido. --}}
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_default" value="1"
                                   id="{{ $modalId }}-is-default"
                                   @checked($wasSubmitted ? old('is_default') : ($account->is_default ?? false))>
                            <label class="form-check-label" for="{{ $modalId }}-is-default">
                                Usar como conta padrão
                                <span class="d-block form-text mt-0">
                                    Virá pré-selecionada nos lançamentos. Só uma conta pode ser a padrão.
                                </span>
                            </label>
                        </div>

                        @if ($wasSubmitted && $errors->has('icon'))
                            <p class="text-danger small mt-3 mb-0">{{ $errors->first('icon') }}</p>
                        @endif
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">
                            {{ $isEdit ? 'Salvar' : 'Adicionar conta' }}
                        </button>
                    </div>
                </div>

                {{-- ====================== TELA 2: o seletor ======================
                     A grade é montada em JS a partir da biblioteca — não há lista
                     de bancos no Blade. Atualizar o pacote atualiza o seletor,
                     sem tocar em nada aqui. --}}
                <div data-bank-view="picker" class="d-none">
                    <div class="modal-header">
                        <button type="button" class="btn btn-link p-0 me-2 text-body" data-bank-close-picker
                                aria-label="Voltar ao formulário">
                            <i class="bi bi-arrow-left fs-5"></i>
                        </button>
                        <h2 class="modal-title fs-5">Selecione um ícone</h2>
                    </div>

                    <div class="modal-body">
                        <div class="d-flex gap-2 mb-3">
                            <button type="button" class="btn btn-sm btn-primary flex-grow-1" data-bank-tab="banks">
                                Instituições financeiras
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-primary flex-grow-1" data-bank-tab="generic">
                                Ícones genéricos
                            </button>
                        </div>

                        <div class="input-group input-group-sm mb-3">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="search" class="form-control" placeholder="Buscar ícone"
                                   aria-label="Buscar ícone" data-bank-search>
                        </div>

                        {{-- Altura limitada com rolagem: são dezenas de ícones, e
                             um modal que cresce sem fim empurra os botões para
                             fora da tela. --}}
                        <div class="d-grid gap-2" data-bank-grid
                             style="grid-template-columns: repeat(4, 1fr); max-height: 15rem; overflow-y: auto;"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>