{% extends "base.html" %}

{% block title %}Novo Cadastro — {{ app_name }}{% endblock %}

{% block content %}
<div style="max-width: 700px; margin: 0 auto;">
    <div class="content-card">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; border-bottom: 1px solid #E2E8F0; padding-bottom: 1rem;">
            <h2 style="color: #123B6D; font-weight: 800;">➕ Registro de Apoiador / Mobilizado</h2>
            <a href="{{ url_for('cadastros.meus') if current_user.perfil == 'cadastrador' else url_for('cadastros.index') }}" style="color: #1976D2; font-weight: 600; text-decoration: none;">← Voltar</a>
        </div>

        <form method="POST" action="{{ url_for('cadastros.novo') }}" id="formCadastro">
            <!-- 1. IDENTIFICAÇÃO -->
            <div style="background-color: #F8FAFC; border-left: 4px solid #F58220; padding: 1rem; border-radius: 4px; margin-bottom: 1.25rem;">
                <h3 style="font-size: 1rem; color: #123B6D; font-weight: 700; margin-bottom: 0.75rem;">1. IDENTIFICAÇÃO DO APOIADOR</h3>
                
                <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem;">
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Nome Completo *</label>
                        <input type="text" name="nome_completo" required placeholder="Digite o nome completo" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">CPF <span id="lblCpfReq" style="color: #64748B; font-weight: normal;">(Obr. para Multiplicadores)</span></label>
                        <input type="text" name="cpf" id="inputCpf" placeholder="000.000.000-00" maxlength="14" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem;">
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Telefone / WhatsApp</label>
                        <input type="text" name="telefone" placeholder="(92) 99999-9999" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Data de Nascimento</label>
                        <input type="date" name="data_nascimento" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Sexo</label>
                        <select name="sexo" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                            <option value="">Selecione...</option>
                            <option value="Feminino">Feminino</option>
                            <option value="Masculino">Masculino</option>
                            <option value="Outro">Outro</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 2. LOCALIZAÇÃO TERRITORIAL & CEP -->
            <div style="background-color: #F8FAFC; border-left: 4px solid #123B6D; padding: 1rem; border-radius: 4px; margin-bottom: 1.25rem;">
                <h3 style="font-size: 1rem; color: #123B6D; font-weight: 700; margin-bottom: 0.75rem;">2. LOCALIZAÇÃO TERRITORIAL (CEP E ENDEREÇO)</h3>
                
                <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 0.75rem; margin-bottom: 0.75rem;">
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">CEP (Busca Automática)</label>
                        <input type="text" name="cep" id="inputCep" placeholder="69000-000" maxlength="9" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px; font-weight: bold; color: #123B6D;">
                        <small id="cepStatus" style="font-size: 0.75rem; color: #1976D2; font-weight: 600;"></small>
                    </div>
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Logradouro / Rua</label>
                        <input type="text" name="rua" id="inputRua" placeholder="Rua, Avenida, Alameda..." style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 0.75rem; margin-bottom: 0.75rem;">
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Número</label>
                        <input type="text" name="numero" placeholder="123 ou S/N" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Complemento / Ponto de Referência</label>
                        <input type="text" name="complemento" placeholder="Apto, Bloco, Próximo ao mercadinho..." style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem;">
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Bairro *</label>
                        <select name="bairro" id="selectBairro" required style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                            {% for b in bairros %}
                                <option value="{{ b }}">{{ b }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Zona Urbana (Auto)</label>
                        <input type="text" name="zona" id="inputZona" value="Zona Norte" readonly style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px; background-color: #E2E8F0; font-weight: 700; color: #123B6D;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Município / UF</label>
                        <input type="text" name="municipio" value="Manaus / AM" readonly style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px; background-color: #E2E8F0; color: #64748B;">
                    </div>
                </div>
            </div>

            <!-- 3. DADOS DO TÍTULO DE ELEITOR -->
            <div style="background-color: #F8FAFC; border-left: 4px solid #0D9488; padding: 1rem; border-radius: 4px; margin-bottom: 1.25rem;">
                <h3 style="font-size: 1rem; color: #123B6D; font-weight: 700; margin-bottom: 0.75rem;">3. DADOS DO TÍTULO DE ELEITOR</h3>
                
                <div style="display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.75rem;">
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Número do Título de Eleitor</label>
                        <input type="text" name="titulo_eleitor" placeholder="0000 0000 0000" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Zona Eleitoral</label>
                        <input type="text" name="zona_eleitoral" placeholder="Ex: 032" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">Seção Eleitoral</label>
                        <input type="text" name="secao_eleitoral" placeholder="Ex: 0150" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                    </div>
                </div>
            </div>

            <!-- 4. PARTICIPAÇÃO NA REDE (CONVERSÃO ATÔMICA - RN-CAD-04) -->
            <div style="background-color: #FFF8E1; border-left: 4px solid #FFA000; padding: 1rem; border-radius: 4px; margin-bottom: 1.25rem;">
                <h3 style="font-size: 1rem; color: #B78103; font-weight: 700; margin-bottom: 0.5rem;">4. PARTICIPAÇÃO NA REDE DE MULTIPLICADORES</h3>
                
                <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 700; color: #123B6D; font-size: 0.95rem;">
                    <input type="checkbox" name="virar_cadastrador" id="checkVirarCadastrador" style="width: 18px; height: 18px; accent-color: #F58220;">
                    Sim, deseja se tornar Multiplicador(a) (Expansor de Rede)
                </label>

                <!-- Expander com dados de acesso -->
                <div id="containerAcessoCadastrador" style="display: none; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed #FFD54F;">
                    <div style="font-size: 0.85rem; color: #6D4C41; font-weight: 600; margin-bottom: 0.75rem; background: #FFF3C4; padding: 0.75rem; border-radius: 6px; border-left: 3px solid #F58220;">
                        💡 O novo multiplicador usará o seu <strong>CPF como Usuário e Senha Inicial</strong> no primeiro acesso.<br>
                        🔑 No primeiro login, o sistema solicitará automaticamente a <strong>criação de sua nova senha pessoal</strong>.
                    </div>

                    <div style="margin-bottom: 0.75rem;">
                        <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">E-mail / Gmail do Novo Multiplicador <span style="color: #64748B; font-weight: normal;">(Opcional)</span></label>
                        <input type="email" name="email_cadastrador" id="emailCadastrador" placeholder="exemplo@gmail.com (Opcional)" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                    </div>
                </div>
            </div>

            <!-- 5. OBSERVAÇÕES -->
            <div style="margin-bottom: 1.5rem;">
                <label style="display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.85rem;">5. OBSERVAÇÕES / NOTAS OPERACIONAIS</label>
                <textarea name="observacao" rows="2" placeholder="Informações relevantes sobre a liderança, demandas ou observações..." style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;"></textarea>
            </div>

            <button type="submit" class="btn-primary-orange" style="width: 100%; justify-content: center; padding: 0.85rem; font-size: 1.05rem;">
                FINALIZAR E SALVAR CADASTRO
            </button>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const inputCep = document.getElementById('inputCep');
    const inputRua = document.getElementById('inputRua');
    const selectBairro = document.getElementById('selectBairro');
    const inputZona = document.getElementById('inputZona');
    const cepStatus = document.getElementById('cepStatus');

    const checkVirar = document.getElementById('checkVirarCadastrador');
    const containerAcesso = document.getElementById('containerAcessoCadastrador');
    const inputCpf = document.getElementById('inputCpf');
    const lblCpfReq = document.getElementById('lblCpfReq');

    // Mapeamento local Bairro -> Zona
    const zonasDict = {{ zonas_dict|tojson }};

    function atualizarZonaLocal() {
        const b = selectBairro.value;
        for (const [z, list] of Object.entries(zonasDict)) {
            if (list.includes(b)) {
                inputZona.value = z;
                break;
            }
        }
    }
    selectBairro.addEventListener('change', atualizarZonaLocal);

    // Expander do Checkbox Virar Multiplicador
    checkVirar.addEventListener('change', () => {
        if (checkVirar.checked) {
            containerAcesso.style.display = 'block';
            inputCpf.required = true;
            if (lblCpfReq) {
                lblCpfReq.textContent = '* (Obrigatório para Multiplicadores)';
                lblCpfReq.style.color = '#C62828';
                lblCpfReq.style.fontWeight = 'bold';
            }
        } else {
            containerAcesso.style.display = 'none';
            inputCpf.required = false;
            if (lblCpfReq) {
                lblCpfReq.textContent = '(Obr. para Multiplicadores)';
                lblCpfReq.style.color = '#64748B';
                lblCpfReq.style.fontWeight = 'normal';
            }
        }
    });

    // Autopreenchimento Inteligente por CEP
    inputCep.addEventListener('input', async (e) => {
        const val = e.target.value.replace(/\D/g, '');
        if (val.length === 8) {
            cepStatus.textContent = 'Buscando CEP...';
            try {
                const res = await fetch(`/cadastros/api/cep/${val}`);
                const data = await res.json();
                if (data.sucesso) {
                    if (data.rua) inputRua.value = data.rua;
                    if (data.bairro) {
                        for (let opt of selectBairro.options) {
                            if (opt.value.toLowerCase() === data.bairro.toLowerCase()) {
                                opt.selected = true;
                                break;
                            }
                        }
                    }
                    if (data.zona) inputZona.value = data.zona;
                    cepStatus.textContent = '✓ CEP localizador encontrado';
                    cepStatus.style.color = '#2E7D32';
                } else {
                    cepStatus.textContent = 'CEP não encontrado (preencha manualmente)';
                    cepStatus.style.color = '#C62828';
                }
            } catch (err) {
                cepStatus.textContent = '';
            }
        } else {
            cepStatus.textContent = '';
        }
    });
});
</script>
{% endblock %}