<!-- Modal de Novo Militante -->
<div class="modal fade" id="modalNovoMilitante" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-user-plus me-2"></i>Novo Militante
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formNovoMilitante" method="post" action="{{ url_for('criar_militante') }}">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs nav-fill mb-3" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-dados-basicos" type="button">
                                <i class="fas fa-user me-2"></i>Dados Básicos
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-contato" type="button">
                                <i class="fas fa-address-book me-2"></i>Contato
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-profissional" type="button">
                                <i class="fas fa-briefcase me-2"></i>Profissional
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-organizacao" type="button">
                                <i class="fas fa-users me-2"></i>Organização
                            </button>
                        </li>
                    </ul>

                    <!-- Tab content -->
                    <div class="tab-content">
                        <!-- Dados Básicos -->
                        <div class="tab-pane fade show active" id="tab-dados-basicos">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="nome" class="form-label">Nome</label>
                                    <input type="text" class="form-control" id="nome" name="nome" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="cpf" class="form-label">CPF</label>
                                    <input type="text" class="form-control" id="cpf" name="cpf" required
                                           pattern="\d{3}\.?\d{3}\.?\d{3}-?\d{2}" 
                                           title="Digite um CPF no formato: xxx.xxx.xxx-xx">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 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">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="data_nascimento" class="form-label">Data de Nascimento</label>
                                    <input type="text" class="form-control date-mask" id="data_nascimento" name="data_nascimento" 
                                           placeholder="DD/MM/AAAA" maxlength="10">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="data_entrada" class="form-label">Data de Entrada OCI</label>
                                    <input type="text" class="form-control date-mask" id="data_entrada" name="data_entrada_oci" 
                                           placeholder="DD/MM/AAAA" maxlength="10">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="data_efetivacao" class="form-label">Data de Efetivação</label>
                                    <input type="text" class="form-control date-mask" id="data_efetivacao" name="data_efetivacao_oci" 
                                           placeholder="DD/MM/AAAA" maxlength="10">
                                </div>
                            </div>
                        </div>

                        <!-- Contato -->
                        <div class="tab-pane fade" id="tab-contato">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="telefone1" class="form-label">Telefone Principal</label>
                                    <input type="text" class="form-control" id="telefone1" name="telefone1">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="telefone2" class="form-label">Telefone Alternativo</label>
                                    <input type="text" class="form-control" id="telefone2" name="telefone2">
                                </div>
                            </div>
                            
                            <!-- Email Principal -->
                            <div class="mb-3">
                                <label for="email" class="form-label">Email Principal</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>

                            <!-- Endereço -->
                            <div class="endereco-container">
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="cep" class="form-label">CEP</label>
                                        <input type="text" class="form-control" id="cep" name="cep">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="estado" class="form-label">Estado</label>
                                        <select class="form-select" id="estado" name="estado">
                                            <option value="">Selecione...</option>
                                            <!-- Estados serão carregados via JavaScript -->
                                        </select>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="cidade" class="form-label">Cidade</label>
                                        <input type="text" class="form-control" id="cidade" name="cidade">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="bairro" class="form-label">Bairro</label>
                                        <input type="text" class="form-control" id="bairro" name="bairro">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="logradouro" class="form-label">Logradouro</label>
                                        <input type="text" class="form-control" id="logradouro" name="logradouro">
                                    </div>
                                    <div class="col-md-2 mb-3">
                                        <label for="numero" class="form-label">Número</label>
                                        <input type="text" class="form-control" id="numero" name="numero">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="complemento" class="form-label">Complemento</label>
                                    <input type="text" class="form-control" id="complemento" name="complemento">
                                </div>
                            </div>
                        </div>

                        <!-- Profissional -->
                        <div class="tab-pane fade" id="tab-profissional">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="profissao" class="form-label">Profissão</label>
                                    <input type="text" class="form-control" id="profissao" name="profissao">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="regime_trabalho" class="form-label">Regime de Trabalho</label>
                                    <select class="form-select" id="regime_trabalho" name="regime_trabalho">
                                        <option value="">Selecione...</option>
                                        <option value="CLT">CLT</option>
                                        <option value="Estatutário">Estatutário</option>
                                        <option value="Terceirizado">Terceirizado</option>
                                        <option value="Autônomo">Autônomo</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="empresa" class="form-label">Empresa</label>
                                    <input type="text" class="form-control" id="empresa" name="empresa">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="contratante" class="form-label">Contratante</label>
                                    <input type="text" class="form-control" id="contratante" name="contratante">
                                    <small class="text-muted">Para terceirizados</small>
                                </div>
                            </div>
                            <hr>
                            <!-- Dados Acadêmicos -->
                            <div class="row">
                                <div class="col-md-8 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="col-md-4 mb-3">
                                    <label for="tipo_instituicao" class="form-label">Tipo</label>
                                    <select class="form-select" id="tipo_instituicao" name="tipo_instituicao">
                                        <option value="">Selecione...</option>
                                        <option value="Federal">Federal</option>
                                        <option value="Estadual">Estadual</option>
                                        <option value="Municipal">Municipal</option>
                                        <option value="Privada">Privada</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Organização -->
                        <div class="tab-pane fade" id="tab-organizacao">
                            <!-- Dados Sindicais -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="sindicato" class="form-label">Sindicato</label>
                                    <input type="text" class="form-control" id="sindicato" name="sindicato">
                                </div>
                                <div class="col-md-6 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>
                            <div class="row">
                                <div class="col-md-6 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="col-md-6 mb-3 d-flex align-items-center">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="dirigente_sindical" name="dirigente_sindical">
                                        <label class="form-check-label" for="dirigente_sindical">Dirigente Sindical</label>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <!-- Estado na Organização -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="estado_militante" class="form-label">Estado</label>
                                    <select class="form-select" id="estado_militante" name="estado">
                                        <option value="ATIVO">Ativo</option>
                                        <option value="DESLIGADO">Desligado</option>
                                        <option value="SUSPENSO">Suspenso</option>
                                        <option value="AFASTADO">Afastado</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="celula" class="form-label">Célula</label>
                                    <select class="form-select" id="celula" name="celula_id" required>
                                        <option value="">Selecione...</option>
                                        {% for celula in celulas %}
                                        <option value="{{ celula.id }}">{{ celula.nome }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <label class="form-label">Responsabilidades</label>
                                    <div class="responsabilidades-container">
                                        <input type="hidden" name="responsabilidades" id="novo_responsabilidades_values" value="0">
                                        
                                        <span class="badge badge-clickable bg-secondary" data-value="{{ Militante.SECRETARIO }}" data-bs-toggle="tooltip" title="Clique para alternar">Secretário</span>
                                        
                                        <span class="badge badge-clickable bg-info" data-value="{{ Militante.RESPONSAVEL_IMPRENSA }}" data-bs-toggle="tooltip" title="Clique para alternar">Responsável de Imprensa</span>
                                        
                                        <span class="badge badge-clickable bg-warning text-dark" data-value="{{ Militante.IMPRENSA }}" data-bs-toggle="tooltip" title="Clique para alternar">Imprensa</span>
                                        
                                        <span class="badge badge-clickable bg-warning text-dark" data-value="{{ Militante.MPS }}" data-bs-toggle="tooltip" title="Clique para alternar">MPS</span>
                                        
                                        <span class="badge badge-clickable bg-success" data-value="{{ Militante.QUADRO_ORIENTADOR }}" data-bs-toggle="tooltip" title="Clique para alternar">Quadro-Orientador</span>
                                        
                                        <span class="badge badge-clickable bg-primary" data-value="{{ Militante.RESPONSAVEL_FINANCAS }}" data-bs-toggle="tooltip" title="Clique para alternar">Responsável de Finanças</span>
                                        
                                        <span class="badge badge-clickable bg-dark" data-value="{{ Militante.TESOUREIRO }}" data-bs-toggle="tooltip" title="Clique para alternar">Tesoureiro</span>
                                        
                                        <span class="badge badge-clickable bg-info" data-value="{{ Militante.MNS }}" data-bs-toggle="tooltip" title="Clique para alternar">MNS</span>
                                        
                                        <span class="badge badge-clickable bg-danger" data-value="{{ Militante.JUVENTUDE }}" data-bs-toggle="tooltip" title="Clique para alternar">Juventude</span>
                                        
                                        <span class="badge badge-clickable bg-light text-dark border" data-value="{{ Militante.ASPIRANTE }}" data-bs-toggle="tooltip" title="Clique para alternar">Aspirante</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" form="formNovoMilitante" class="btn btn-primary">
                    <i class="fas fa-save me-2"></i>Salvar
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.badge-clickable {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    margin: 0.3rem;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.5;
    user-select: none;
}

.badge-clickable:hover {
    opacity: 0.8;
}

.badge-clickable.active {
    opacity: 1;
}

.responsabilidades-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
}
</style> 