{% extends "base.html" %}

{% block title %}Configuração EFi{% endblock %}

{% block content %}
{% set webhook_url_default = webhook_defaults['url'] if webhook_defaults is defined and webhook_defaults and 'url' in webhook_defaults else '' %}
{% set capepay_master = capepay_master_resumo if capepay_master_resumo is defined else None %}
<div class="cape-form-shell">
    <div class="cape-form-header">
        <div class="cape-form-header-main">
            <h1 class="h4 mb-1"><i class="bi bi-credit-card-2-front"></i> Gateway EFi por empresa</h1>
            <p class="text-muted mb-0">Prepare PIX, cartão e a base da operação online com configuração isolada por empresa.</p>
        </div>
        <div class="cape-form-header-actions d-flex gap-2">
            <a href="{{ url_for('formas_pagamento_view') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Voltar
            </a>
            <a href="{{ url_for('efi_configuracao', empresa_id=empresa_atual.id) }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-clockwise"></i> Atualizar
            </a>
        </div>
    </div>

    <form method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
        <input type="hidden" name="empresa_id" value="{{ empresa_atual.id }}">

        <div class="row g-3">
            <div class="col-lg-8">
                <div class="card shadow-sm mb-3">
                    <div class="card-body">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-7">
                                <label class="form-label">Empresa</label>
                                <select class="form-select" id="empresa_id_seletor">
                                    {% for empresa in empresas %}
                                    <option value="{{ empresa.id }}" {% if empresa.id == empresa_atual.id %}selected{% endif %}>
                                        {{ empresa.nome_fantasia or empresa.razao_social or empresa.nome or ('Empresa #' ~ empresa.id) }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Descrição interna</label>
                                <input type="text" class="form-control" name="descricao" maxlength="255"
                                       value="{{ config.descricao or '' }}"
                                       placeholder="Ex: EFi operação online matriz">
                            </div>
                            <div class="col-12">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="ativo" name="ativo" {% if config.ativo %}checked{% endif %}>
                                            <label class="form-check-label fw-semibold" for="ativo">Integração ativa</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="pix_ativo" name="pix_ativo" {% if config.pix_ativo %}checked{% endif %}>
                                            <label class="form-check-label fw-semibold" for="pix_ativo">PIX habilitado</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="skip_mtls_checking" name="skip_mtls_checking" {% if config.skip_mtls_checking %}checked{% endif %}>
                                            <label class="form-check-label fw-semibold" for="skip_mtls_checking">Ignorar verificação mTLS</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="bi bi-key"></i> Credenciais base</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Ambiente *</label>
                                <select class="form-select" name="ambiente" required>
                                    <option value="homologacao" {% if (config.ambiente or 'homologacao') == 'homologacao' %}selected{% endif %}>Homologação</option>
                                    <option value="producao" {% if config.ambiente == 'producao' %}selected{% endif %}>Produção</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Client ID</label>
                                <input type="text" class="form-control" name="client_id" value="{{ config.client_id or '' }}" placeholder="Client ID da EFi">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Client Secret</label>
                                <input type="password" class="form-control" name="client_secret" placeholder="{% if config.credenciais_basicas_configuradas %}Preencha só para alterar{% else %}Client Secret da EFi{% endif %}">
                                <div class="form-text">{% if config.credenciais_basicas_configuradas %}Já existe um secret salvo no banco.{% else %}Será armazenado de forma criptografada.{% endif %}</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Webhook URL</label>
                                <input type="url" class="form-control" name="webhook_url" value="{{ config.webhook_url or webhook_url_default or '' }}" placeholder="https://suaempresa.com.br/api/webhooks/efi?empresa_id=1&amp;hmac=...">
                                <div class="form-text">
                                    Se você deixar em branco, o CapeServer usa a rota padrão do tenant para webhook Efí. Revise apenas se precisar apontar para outro domínio público.
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Webhook HMAC</label>
                                <input type="password" class="form-control" name="webhook_hmac" placeholder="{% if config.webhook_hmac %}Preencha só para alterar{% else %}Gerado automaticamente ao salvar{% endif %}">
                                <div class="form-text">
                                    Se ficar em branco, o CapeServer gera e salva um HMAC automático no primeiro salvar dessa empresa.
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Timeout (segundos)</label>
                                <input type="number" class="form-control" name="timeout_seconds" min="5" max="120" value="{{ config.timeout_seconds or 30 }}">
                            </div>
                            <div class="col-12">
                                <div class="alert alert-light border mb-0 small">
                                    <strong>Webhook padrão do tenant:</strong>
                                    <code>{{ webhook_url_default or 'A URL será montada automaticamente ao salvar.' }}</code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="bi bi-qr-code"></i> PIX</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Chave PIX</label>
                                <input type="text" class="form-control" name="chave_pix" value="{{ config.chave_pix or '' }}" placeholder="telefone, e-mail, EVP ou chave aleatória">
                            </div>
                            <div class="col-md-6">
                                <div class="alert alert-light border mb-0 small">
                                    Use esta seção para preparar QR Code, cobrança imediata e futuras confirmações por webhook. O OAuth PIX da EFi usa certificado mTLS.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="bi bi-shield-lock"></i> Certificado / mTLS</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-8">
                                <label class="form-label">Caminho do certificado</label>
                                <input type="text" class="form-control" name="certificado_path" value="{{ config.certificado_path or '' }}" placeholder="C:\\CapeServer\\certificados\\efi-certificado.p12">
                                <div class="form-text">Necessário para autenticação PIX da EFi. Informe um caminho acessível pelo servidor/serviço.</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Senha atual do certificado</label>
                                <input type="password" class="form-control" name="certificado_senha" placeholder="{% if config.pix_pronto %}Digite a senha atual do arquivo para alterar{% else %}Digite a senha já existente do .p12/.pfx{% endif %}">
                                <div class="form-text">
                                    Digite aqui a senha que o arquivo do certificado já possui. O CapeServer não cria essa senha; ela vem da exportação do `.p12`/`.pfx`. Se a Efí gerou/exportou o arquivo sem senha, este campo pode ficar em branco.
                                </div>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Selecionar arquivo do certificado</label>
                                <input type="file" class="form-control" name="certificado_upload" id="certificado_upload" accept=".p12,.pfx,.pem">
                                <div class="form-text">
                                    Use o botão de navegação para localizar o arquivo no computador. Ao salvar, o sistema guarda uma cópia local e atualiza o caminho automaticamente.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="bi bi-credit-card"></i> Cartão / Cobranças</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="cartao_credito_ativo" name="cartao_credito_ativo" {% if config.cartao_credito_ativo %}checked{% endif %}>
                                    <label class="form-check-label fw-semibold" for="cartao_credito_ativo">Cartão de crédito habilitado</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="cartao_debito_ativo" name="cartao_debito_ativo" {% if config.cartao_debito_ativo %}checked{% endif %}>
                                    <label class="form-check-label fw-semibold" for="cartao_debito_ativo">Cartão de débito habilitado</label>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-light border mb-0 small">
                            Nesta fase, o teste real de cartão/cobranças valida o OAuth do endpoint de cobranças da EFi. O certificado fica concentrado no canal PIX/mTLS.
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="bi bi-diagram-3"></i> Split integrado / repasse CapeSystem</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Payee code da CapeSystem</label>
                                <input type="text" class="form-control" name="split_payee_code" value="{{ config.split_payee_code or '' }}" placeholder="Conta favorecida da Efí para repasse">
                                <div class="form-text">
                                    Usado quando a regra comercial do Master vier com <code>split_integrado</code>. Se ficar em branco, o checkout ainda pode cair no fallback por variável de ambiente do tenant.
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">CPF/CNPJ favorecido</label>
                                <input type="text" class="form-control" name="split_document" value="{{ config.split_document or '' }}" placeholder="Documento da conta favorecida do split">
                                <div class="form-text">
                                    Informe o documento do favorecido exatamente como cadastrado na conta Efí que vai receber o repasse.
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="alert alert-light border mb-0 small">
                                    Estes campos não forçam split por si só. Eles apenas abastecem o checkout quando o <strong>Master</strong> mandar usar <strong>split integrado</strong> para a empresa atual.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="bi bi-journal-text"></i> Observações operacionais</h5>
                    </div>
                    <div class="card-body">
                        <textarea class="form-control" name="observacoes" rows="4" placeholder="Observações, conta favorecida, regras internas, próximos passos...">{{ config.observacoes or '' }}</textarea>
                    </div>
                    <div class="card-footer cape-form-actions cape-form-actions-inside-card">
                        <div class="cape-form-actions-left small text-muted">
                            {% if config.ultimo_teste_em %}
                                Último teste registrado em {{ config.ultimo_teste_em.strftime('%d-%m-%Y %H:%M') }}.
                            {% else %}
                                Nenhum teste de prontidão foi registrado ainda.
                            {% endif %}
                        </div>
                        <div class="cape-form-actions-right d-flex gap-2">
                            <button type="submit" name="acao" value="salvar" class="btn btn-primary">
                                <i class="bi bi-save"></i> Salvar
                            </button>
                            <button type="submit" name="acao" value="testar" class="btn btn-outline-success">
                                <i class="bi bi-wifi"></i> Salvar + testar autenticação real
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card shadow-sm mb-3 border-{{ diagnostico.status_badge_class }}-subtle">
                    <div class="card-header d-flex justify-content-between align-items-center bg-{{ diagnostico.status_badge_class }}-subtle text-{{ diagnostico.status_badge_class }}-emphasis">
                        <h5 class="mb-0"><i class="bi bi-activity"></i> Diagnóstico de prontidão</h5>
                        <span class="badge text-bg-{{ diagnostico.status_badge_class }}">{{ diagnostico.status_label }}</span>
                    </div>
                    <div class="card-body">
                        <div class="small text-muted mb-3">
                            Empresa atual: <strong>{{ empresa_atual.nome_fantasia or empresa_atual.razao_social or empresa_atual.nome or ('Empresa #' ~ empresa_atual.id) }}</strong>
                        </div>

                        {% if config.ultimo_erro %}
                        <div class="alert alert-secondary small py-2">
                            <strong>Último retorno registrado:</strong><br>
                            {{ config.ultimo_erro }}
                        </div>
                        {% endif %}

                        <div class="d-flex flex-column gap-2 mb-3 small">
                            <div class="d-flex justify-content-between">
                                <span>PIX</span>
                                <span class="badge text-bg-{{ 'success' if diagnostico.sections.pix.ready else ('secondary' if not diagnostico.sections.pix.enabled else 'warning') }}">
                                    {% if diagnostico.sections.pix.ready %}Pronto{% elif diagnostico.sections.pix.enabled %}Pendente{% else %}Desligado{% endif %}
                                </span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Cartão</span>
                                <span class="badge text-bg-{{ 'success' if diagnostico.sections.card.ready else ('secondary' if not diagnostico.sections.card.enabled else 'warning') }}">
                                    {% if diagnostico.sections.card.ready %}Pronto{% elif diagnostico.sections.card.enabled %}Pendente{% else %}Desligado{% endif %}
                                </span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Webhook</span>
                                <span class="badge text-bg-{{ 'success' if diagnostico.sections.webhook.configured else 'secondary' }}">
                                    {{ 'Configurado' if diagnostico.sections.webhook.configured else 'Pendente' }}
                                </span>
                            </div>
                        </div>

                        {% if diagnostico.errors %}
                        <div class="alert alert-danger small py-2">
                            <strong>Pendências:</strong>
                            <ul class="mb-0 mt-1 ps-3">
                                {% for item in diagnostico.errors %}
                                <li>{{ item }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}

                        {% if diagnostico.warnings %}
                        <div class="alert alert-warning small py-2">
                            <strong>Avisos:</strong>
                            <ul class="mb-0 mt-1 ps-3">
                                {% for item in diagnostico.warnings %}
                                <li>{{ item }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}

                        <ul class="list-group list-group-flush small">
                            {% for check in diagnostico.checks %}
                            <li class="list-group-item px-0 d-flex justify-content-between align-items-start gap-2">
                                <div>
                                    <div class="fw-semibold">{{ check.label }}</div>
                                    {% if check.detail and not check.ok %}
                                    <div class="text-muted">{{ check.detail }}</div>
                                    {% endif %}
                                </div>
                                <span class="badge text-bg-{{ 'success' if check.ok else ('warning' if check.severity == 'warning' else 'danger') }} mt-1">
                                    {{ 'OK' if check.ok else 'Pendente' }}
                                </span>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>

                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="bi bi-diagram-3"></i> Condição vigente de recebimento</h5>
                    </div>
                    <div class="card-body small text-muted">
                        <p class="mb-2">Prévia da condição comercial vigente por cenário, usando referência base de <strong>{{ governanca_master.simulacao_base_label }}</strong>.</p>

                        <div class="alert alert-light border py-2 mb-3">
                            No <strong>Master vNext</strong>, essa condição é cadastrada em <strong>Portal &gt; Configurações &gt; Gateway comercial</strong>. Nesta tela do cliente exibimos apenas o repasse <strong>CapePay</strong> e eventuais encargos do cliente; custos internos do gateway ficam restritos ao Master.
                        </div>

                        {% if governanca_master.mensagem %}
                        <div class="alert alert-warning py-2 mb-3">{{ governanca_master.mensagem }}</div>
                        {% endif %}

                        {% if governanca_master['items'] %}
                        <div class="d-flex flex-column gap-2">
                            {% for item in governanca_master['items'] %}
                            <div class="border rounded p-2">
                                <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
                                    <div>
                                        <div class="fw-semibold text-dark">{{ item.cenario_label }}</div>
                                        <div class="text-muted">{{ item.faixa_label }} · {{ item.escopo_label }}</div>
                                    </div>
                                    <span class="badge text-bg-{{ item.badge_class }}">{{ item.badge_label }}</span>
                                </div>

                                {% if item.ok %}
                                <div class="small">
                                    <div><strong>{{ item.codigo }}</strong>{% if item.nome %} — {{ item.nome }}{% endif %}</div>
                                    <div>Taxa CapePay: {{ item.taxa_capesystem_percentual_label }} + {{ item.taxa_capesystem_valor_fixo_label }}</div>
                                    <div>Encargo do cliente: {{ item.juros_cliente_percentual_label }}</div>
                                    <div>Recebimento CapePay: {{ item.capesystem_recebimento_label }}</div>
                                </div>
                                {% elif item.mensagem %}
                                <div>{{ item.mensagem }}</div>
                                {% else %}
                                <div>Sem retorno detalhado do Master para este cenário.</div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="alert alert-secondary py-2 mb-0">Nenhum cenário habilitado para consulta automática neste momento.</div>
                        {% endif %}
                    </div>
                </div>

                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="bi bi-cash-stack"></i> Operação CapePay no Master</h5>
                        {% if capepay_master %}
                        <span class="badge text-bg-{{ capepay_master.status_badge_class }}">{{ capepay_master.status_label }}</span>
                        {% endif %}
                    </div>
                    <div class="card-body small text-muted">
                        {% if capepay_master %}
                            <div class="mb-2">
                                <div><strong>Merchant code:</strong> <code>{{ capepay_master.merchant_code or '-' }}</code></div>
                                {% if capepay_master.merchant_nome %}
                                <div><strong>Cadastro Master:</strong> {{ capepay_master.merchant_nome }}</div>
                                {% endif %}
                            </div>

                            {% if capepay_master.message %}
                            <div class="alert alert-{{ 'warning' if capepay_master.status_badge_class == 'warning' else 'secondary' if capepay_master.status_badge_class == 'secondary' else 'danger' }} py-2 mb-3">
                                {{ capepay_master.message }}
                            </div>
                            {% endif %}

                            {% if capepay_master.disponivel %}
                            <div class="row g-2 mb-3 text-dark">
                                <div class="col-6">
                                    <div class="border rounded p-2 h-100">
                                        <div class="text-muted">Saldo disponível</div>
                                        <div class="fw-semibold">{{ capepay_master['balances']['saldo_disponivel_label'] }}</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="border rounded p-2 h-100">
                                        <div class="text-muted">Saldo total</div>
                                        <div class="fw-semibold">{{ capepay_master['balances']['saldo_total_label'] }}</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="border rounded p-2 h-100">
                                        <div class="text-muted">Saldo futuro</div>
                                        <div class="fw-semibold">{{ capepay_master['balances']['saldo_futuro_label'] }}</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="border rounded p-2 h-100">
                                        <div class="text-muted">Bloqueado / disputa</div>
                                        <div class="fw-semibold">{{ capepay_master['balances']['saldo_bloqueado_label'] }} / {{ capepay_master['balances']['saldo_em_disputa_label'] }}</div>
                                    </div>
                                </div>
                            </div>

                            {% if capepay_master.snapshot %}
                            <div class="alert alert-light border py-2 mb-3">
                                Último snapshot conhecido no Master em <strong>{{ capepay_master.snapshot.capturado_em_label }}</strong>.
                            </div>
                            {% endif %}

                            <div class="border rounded p-2 mb-3 text-dark">
                                <div class="fw-semibold mb-2">Fila de payouts</div>
                                <div class="d-flex flex-wrap gap-2 mb-2">
                                    <span class="badge text-bg-light border">Solicitados: {{ capepay_master['payouts']['summary']['solicitado'] }}</span>
                                    <span class="badge text-bg-light border">Em processamento: {{ capepay_master['payouts']['summary']['em_processamento'] }}</span>
                                    <span class="badge text-bg-light border">Pagos: {{ capepay_master['payouts']['summary']['pago'] }}</span>
                                    <span class="badge text-bg-light border">Falhas: {{ capepay_master['payouts']['summary']['falha'] }}</span>
                                </div>
                                <div>Total solicitado: <strong>{{ capepay_master['payouts']['summary']['valor_solicitado_total_label'] }}</strong></div>
                                <div>Total processado: <strong>{{ capepay_master['payouts']['summary']['valor_processado_total_label'] }}</strong></div>
                            </div>

                            {% if capepay_master['payouts']['items'] %}
                            <div class="d-flex flex-column gap-2">
                                {% for item in capepay_master['payouts']['items'] %}
                                <div class="border rounded p-2">
                                    <div class="d-flex justify-content-between align-items-start gap-2 mb-1">
                                        <div>
                                            <div class="fw-semibold text-dark">Payout #{{ item.id }}</div>
                                            <div class="text-muted">Solicitado em {{ item.data_solicitacao_label }}</div>
                                        </div>
                                        <span class="badge text-bg-{{ item.badge_class }}">{{ item.status_label }}</span>
                                    </div>
                                    <div class="text-dark">
                                        <div>Valor solicitado: {{ item.valor_solicitado_label }}</div>
                                        <div>Valor processado: {{ item.valor_processado_label }}</div>
                                        {% if item.identificador_externo %}
                                        <div>Identificador externo: <code>{{ item.identificador_externo }}</code></div>
                                        {% endif %}
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            {% else %}
                            <div class="alert alert-secondary py-2 mb-0">Nenhum payout CapePay retornado pelo Master para este merchant.</div>
                            {% endif %}
                            {% endif %}
                        {% else %}
                        <div class="alert alert-secondary py-2 mb-0">Resumo operacional do CapePay indisponível neste contexto.</div>
                        {% endif %}
                    </div>
                </div>

                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="bi bi-lightbulb"></i> Estratégia desta fase</h5>
                    </div>
                    <div class="card-body small text-muted">
                        <p class="mb-2">Esta tela cobre a <strong>Fase 1</strong> da integração EFi:</p>
                        <ul class="mb-0 ps-3">
                            <li>configuração isolada por empresa;</li>
                            <li>preparo de PIX e cartão;</li>
                            <li>diagnóstico local de prontidão;</li>
                            <li>base para as próximas fases de token, cobrança e webhook.</li>
                        </ul>
                    </div>
                </div>

                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="bi bi-info-circle"></i> De onde obter os dados que costumam gerar pendência</h5>
                    </div>
                    <div class="card-body small text-muted">
                        <ul class="mb-0 ps-3 d-flex flex-column gap-2">
                            <li><strong>Client ID / Client Secret:</strong> no painel da <strong>Efí</strong>, dentro do aplicativo/API criado para esta empresa e para o ambiente correto (homologação ou produção).</li>
                            <li><strong>Chave PIX:</strong> no painel da <strong>Efí</strong>, na área de <strong>PIX</strong>, usando a chave vinculada à conta que vai receber.</li>
                            <li><strong>Certificado mTLS (.p12/.pfx):</strong> exportado no app PIX da <strong>Efí</strong>; depois envie o arquivo por esta tela.</li>
                            <li><strong>Senha do certificado:</strong> é a senha definida quando o certificado foi exportado. O CapeServer não cria essa senha.</li>
                            <li><strong>Webhook URL:</strong> pode ficar em branco se quiser usar a rota padrão do tenant mostrada acima.</li>
                            <li><strong>Webhook HMAC:</strong> pode ficar em branco; o sistema gera automaticamente no primeiro salvar.</li>
                        </ul>
                    </div>
                </div>

                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="bi bi-signpost-2"></i> Próximo passo técnico</h5>
                    </div>
                    <div class="card-body small text-muted">
                        Depois desta configuração, a próxima evolução recomendada é ligar a <strong>regra vigente do Master</strong> ao fluxo real de geração de cobrança e persistir o snapshot da taxa aplicada em cada venda/link.
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script>
(() => {
    const forms = document.querySelectorAll('.needs-validation');
    forms.forEach(form => {
        form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });

    const seletorEmpresa = document.getElementById('empresa_id_seletor');
    if (seletorEmpresa) {
        seletorEmpresa.addEventListener('change', function () {
            const empresaId = this.value;
            const url = new URL(window.location.href);
            url.searchParams.set('empresa_id', empresaId);
            window.location.href = url.toString();
        });
    }
})();
</script>
{% endblock %}