{% extends 'base.html' %}

{% block title %}Novo Militante{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <h1 class="mb-4">Novo Militante</h1>
            
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }}">{{ message }}</div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <form method="post" class="mb-4">
                <div class="mb-3">
                    <label for="nome" class="form-label">Nome:</label>
                    <input type="text" class="form-control" id="nome" name="nome" required>
                </div>
                
                <div class="mb-3">
                    <label for="email" class="form-label">Email:</label>
                    <input type="email" class="form-control" id="email" name="email" required>
                    <small class="form-text text-muted">Este email será usado para login e comunicação do sistema</small>
                </div>
                
                <div class="mb-3">
                    <label for="cpf" class="form-label">CPF:</label>
                    <input type="text" class="form-control" id="cpf" name="cpf" required>
                </div>
                
                <div class="mb-3">
                    <label for="titulo_eleitoral" class="form-label">Título Eleitoral:</label>
                    <input type="text" class="form-control" id="titulo_eleitoral" name="titulo_eleitoral" required>
                </div>
                
                <div class="mb-3">
                    <label for="data_nascimento" class="form-label">Data de Nascimento:</label>
                    <input type="date" class="form-control" id="data_nascimento" name="data_nascimento" required>
                </div>
                
                <div class="mb-3">
                    <label for="data_entrada_oci" class="form-label">Data de Entrada na OCI:</label>
                    <input type="date" class="form-control" id="data_entrada_oci" name="data_entrada_oci" required>
                </div>
                
                <div class="mb-3">
                    <label for="data_efetivacao_oci" class="form-label">Data de Efetivação na OCI:</label>
                    <input type="date" class="form-control" id="data_efetivacao_oci" name="data_efetivacao_oci" required>
                </div>
                
                <div class="mb-3">
                    <label for="telefone1" class="form-label">Telefone 1:</label>
                    <input type="text" class="form-control" id="telefone1" name="telefone1" required>
                </div>
                
                <div class="mb-3">
                    <label for="telefone2" class="form-label">Telefone 2:</label>
                    <input type="text" class="form-control" id="telefone2" name="telefone2">
                </div>
                
                <div class="mb-3">
                    <label for="profissao" class="form-label">Profissão:</label>
                    <input type="text" class="form-control" id="profissao" name="profissao" required>
                </div>
                
                <div class="mb-3">
                    <label for="regime_trabalho" class="form-label">Regime de Trabalho:</label>
                    <input type="text" class="form-control" id="regime_trabalho" name="regime_trabalho" required>
                </div>
                
                <div class="mb-3">
                    <label for="empresa" class="form-label">Empresa:</label>
                    <input type="text" class="form-control" id="empresa" name="empresa" required>
                </div>
                
                <div class="mb-3">
                    <label for="contratante" class="form-label">Contratante:</label>
                    <input type="text" class="form-control" id="contratante" name="contratante" required>
                </div>
                
                <div class="mb-3">
                    <label for="instituicao_ensino" class="form-label">Instituição de Ensino:</label>
                    <input type="text" class="form-control" id="instituicao_ensino" name="instituicao_ensino">
                </div>
                
                <div class="mb-3">
                    <label for="tipo_instituicao" class="form-label">Tipo de Instituição:</label>
                    <select class="form-select" id="tipo_instituicao" name="tipo_instituicao">
                        <option value="">Selecione o tipo</option>
                        <option value="publica">Pública</option>
                        <option value="privada">Privada</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="sindicato" class="form-label">Sindicato:</label>
                    <input type="text" class="form-control" id="sindicato" name="sindicato">
                </div>
                
                <div class="mb-3">
                    <label for="cargo_sindical" class="form-label">Cargo Sindical:</label>
                    <input type="text" class="form-control" id="cargo_sindical" name="cargo_sindical">
                </div>
                
                <div class="mb-3">
                    <label for="dirigente_sindical" class="form-label">Dirigente Sindical:</label>
                    <select class="form-select" id="dirigente_sindical" name="dirigente_sindical">
                        <option value="false">Não</option>
                        <option value="true">Sim</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="central_sindical" class="form-label">Central Sindical:</label>
                    <input type="text" class="form-control" id="central_sindical" name="central_sindical">
                </div>
                
                <div class="mb-3">
                    <label for="cr_id" class="form-label">Comitê Regional:</label>
                    <select class="form-select" id="cr_id" name="cr_id" required>
                        <option value="">Selecione o CR</option>
                        {% for cr in crs %}
                            <option value="{{ cr.id }}">{{ cr.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="setor_id" class="form-label">Setor:</label>
                    <select class="form-select" id="setor_id" name="setor_id" required>
                        <option value="">Selecione o setor</option>
                        {% for setor in setores %}
                            <option value="{{ setor.id }}" data-cr="{{ setor.cr_id }}">{{ setor.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Célula:</label>
                    {% if pode_criar_celula %}
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="celula_opcao" id="celula_existente" value="existente" checked>
                            <label class="form-check-label" for="celula_existente">
                                Usar célula existente
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="celula_opcao" id="celula_nova" value="nova">
                            <label class="form-check-label" for="celula_nova">
                                Criar nova célula
                            </label>
                        </div>
                    </div>
                    {% endif %}

                    <div id="celula_existente_container">
                        <select class="form-select" id="celula_id" name="celula_id" required>
                            <option value="">Selecione a célula</option>
                            {% for celula in celulas %}
                                <option value="{{ celula.id }}" data-setor="{{ celula.setor_id }}">{{ celula.nome }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    {% if pode_criar_celula %}
                    <div id="celula_nova_container" style="display: none;">
                        <div class="mb-3">
                            <label for="nova_celula_nome" class="form-label">Nome da Nova Célula:</label>
                            <input type="text" class="form-control" id="nova_celula_nome" name="nova_celula_nome">
                        </div>
                        <div class="mb-3">
                            <label for="nova_celula_quadro_orientador" class="form-label">Quadro Orientador:</label>
                            <input type="text" class="form-control" id="nova_celula_quadro_orientador" name="nova_celula_quadro_orientador">
                        </div>
                    </div>
                    {% endif %}
                </div>
                
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">Registrar</button>
                    <a href="{{ url_for('listar_militantes') }}" class="btn btn-secondary">Voltar</a>
                    <a href="{{ url_for('home') }}" class="btn btn-outline-primary">Início</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Função para atualizar as células baseado no setor selecionado
    function atualizarCelulas() {
        const setorId = document.getElementById('setor_id').value;
        const celulaSelect = document.getElementById('celula_id');
        
        // Limpar opções existentes
        celulaSelect.innerHTML = '<option value="">Selecione a célula</option>';
        
        // Adicionar apenas células do setor selecionado
        document.querySelectorAll('#celula_id option').forEach(option => {
            if (option.dataset.setor === setorId) {
                celulaSelect.appendChild(option.cloneNode(true));
            }
        });
    }

    // Função para atualizar os setores baseado no CR selecionado
    function atualizarSetores() {
        const crId = document.getElementById('cr_id').value;
        const setorSelect = document.getElementById('setor_id');
        
        // Limpar opções existentes
        setorSelect.innerHTML = '<option value="">Selecione o setor</option>';
        
        // Adicionar apenas setores do CR selecionado
        document.querySelectorAll('#setor_id option').forEach(option => {
            if (option.dataset.cr === crId) {
                setorSelect.appendChild(option.cloneNode(true));
            }
        });
        
        // Atualizar células após mudar o setor
        atualizarCelulas();
    }

    // Event listeners
    document.getElementById('cr_id').addEventListener('change', atualizarSetores);
    document.getElementById('setor_id').addEventListener('change', atualizarCelulas);

    // Toggle entre célula existente e nova
    const celulaExistente = document.getElementById('celula_existente');
    const celulaNova = document.getElementById('celula_nova');
    const celulaExistenteContainer = document.getElementById('celula_existente_container');
    const celulaNovaContainer = document.getElementById('celula_nova_container');

    if (celulaExistente && celulaNova) {
        celulaExistente.addEventListener('change', function() {
            celulaExistenteContainer.style.display = 'block';
            celulaNovaContainer.style.display = 'none';
        });

        celulaNova.addEventListener('change', function() {
            celulaExistenteContainer.style.display = 'none';
            celulaNovaContainer.style.display = 'block';
        });
    }
});
</script>
{% endblock %}