{% extends "base.html" %}
{% from 'components/permission_wrapper.html' import permission_button, permission_table, permission_data_section %}

{% block title %}Militantes{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>
                    <i class="fas fa-users me-2"></i>Militantes
                </h2>
                
                <!-- Botão de novo militante só aparece se tiver permissão -->
                {{ permission_button('create_cell_member', url_for('militante.novo'), 'Novo Militante', 'fas fa-plus', 'btn-success') }}
            </div>
        </div>
    </div>
    
    <!-- Filtros - só aparecem se tiver permissão para ver dados -->
    {% if user_can('view_cell_data') %}
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="input-group">
                <span class="input-group-text">
                    <i class="fas fa-search"></i>
                </span>
                <input type="text" class="form-control" id="filtroNome" placeholder="Filtrar por nome...">
            </div>
        </div>
        <div class="col-md-3">
            <select class="form-select" id="filtroCelula">
                <option value="">Todas as células</option>
                <!-- Opções serão carregadas via JS baseado nas permissões -->
            </select>
        </div>
        <div class="col-md-3">
            <select class="form-select" id="filtroEstado">
                <option value="">Todos os estados</option>
                <option value="ATIVO">Ativo</option>
                <option value="LICENCIADO">Licenciado</option>
                <option value="SUSPENSO">Suspenso</option>
                <option value="DESLIGADO">Desligado</option>
            </select>
        </div>
    </div>
    {% endif %}
    
    <!-- Seção de dados com verificação de permissão -->
    {% call permission_data_section('view_cell_data', militantes, '', 'Nenhum militante encontrado') %}
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="tabelaMilitantes">
                        <thead class="table-dark">
                            <tr>
                                <th>Nome</th>
                                <th>Email</th>
                                <th>Telefone</th>
                                <th>Célula</th>
                                <th>Estado</th>
                                <th>Responsabilidades</th>
                                <!-- Coluna de ações só aparece se tiver permissão -->
                                {% if user_can('manage_cell_members') %}
                                <th width="120">Ações</th>
                                {% endif %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for militante in militantes %}
                            <tr data-militante-id="{{ militante.id }}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-sm bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3">
                                            {{ militante.nome[0].upper() }}
                                        </div>
                                        <div>
                                            <div class="fw-bold">{{ militante.nome }}</div>
                                            {% if militante.cpf %}
                                                <small class="text-muted">CPF: {{ militante.cpf }}</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {% if militante.emails %}
                                        <a href="mailto:{{ militante.emails[0].endereco_email }}" class="text-decoration-none">
                                            {{ militante.emails[0].endereco_email }}
                                        </a>
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if militante.telefone1 %}
                                        <a href="tel:{{ militante.telefone1 }}" class="text-decoration-none">
                                            {{ militante.telefone1 }}
                                        </a>
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if militante.celula %}
                                        <span class="badge bg-info">{{ militante.celula.nome }}</span>
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if militante.estado %}
                                        {% set estado_classes = {
                                            'ATIVO': 'bg-success',
                                            'LICENCIADO': 'bg-warning',
                                            'SUSPENSO': 'bg-danger',
                                            'DESLIGADO': 'bg-secondary'
                                        } %}
                                        <span class="badge {{ estado_classes.get(militante.estado.value, 'bg-secondary') }}">
                                            {{ militante.estado.value.title() }}
                                        </span>
                                    {% else %}
                                        <span class="badge bg-success">Ativo</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="d-flex flex-wrap gap-1">
                                        {% for resp in militante.get_responsabilidades() %}
                                            <span class="badge bg-primary" style="font-size: 0.7em;">{{ resp }}</span>
                                        {% endfor %}
                                    </div>
                                </td>
                                
                                <!-- Ações só aparecem se tiver permissão -->
                                {% if user_can('manage_cell_members') %}
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" 
                                                class="btn btn-outline-primary btn-sm" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#modalEditarMilitante"
                                                data-militante-id="{{ militante.id }}"
                                                title="Editar">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        
                                        <!-- Botão de excluir só para níveis superiores -->
                                        {% if user_can('manage_sector_cells') %}
                                        <button type="button" 
                                                class="btn btn-outline-danger btn-sm" 
                                                onclick="confirmarExclusao({{ militante.id }}, '{{ militante.nome }}')"
                                                title="Excluir">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </td>
                                {% endif %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% endcall %}
    
    <!-- Estatísticas - só aparecem se tiver permissão -->
    {% if user_can('view_cell_reports') %}
    <div class="row mt-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <h5>Total</h5>
                    <h2>{{ militantes|length }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <h5>Ativos</h5>
                    <h2>{{ militantes|selectattr('estado.value', 'equalto', 'ATIVO')|list|length }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body text-center">
                    <h5>Licenciados</h5>
                    <h2>{{ militantes|selectattr('estado.value', 'equalto', 'LICENCIADO')|list|length }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <h5>Aspirantes</h5>
                    <h2>{{ militantes|selectattr('aspirante', 'equalto', true)|list|length }}</h2>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Modais só são incluídos se tiver permissão -->
{% if user_can('manage_cell_members') %}
    {% include 'modals/militante_editar.html' %}
    {% include 'modals/militante_excluir.html' %}
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Filtros de tabela
    const filtroNome = document.getElementById('filtroNome');
    const filtroCelula = document.getElementById('filtroCelula');
    const filtroEstado = document.getElementById('filtroEstado');
    const tabela = document.getElementById('tabelaMilitantes');
    
    if (filtroNome && tabela) {
        function filtrarTabela() {
            const nomeFilter = filtroNome.value.toLowerCase();
            const celulaFilter = filtroCelula ? filtroCelula.value : '';
            const estadoFilter = filtroEstado ? filtroEstado.value : '';
            
            const linhas = tabela.querySelectorAll('tbody tr');
            
            linhas.forEach(linha => {
                const nome = linha.cells[0].textContent.toLowerCase();
                const celula = linha.cells[3].textContent;
                const estado = linha.cells[4].textContent;
                
                const nomeMatch = nome.includes(nomeFilter);
                const celulaMatch = !celulaFilter || celula.includes(celulaFilter);
                const estadoMatch = !estadoFilter || estado.includes(estadoFilter);
                
                linha.style.display = (nomeMatch && celulaMatch && estadoMatch) ? '' : 'none';
            });
        }
        
        filtroNome.addEventListener('input', filtrarTabela);
        if (filtroCelula) filtroCelula.addEventListener('change', filtrarTabela);
        if (filtroEstado) filtroEstado.addEventListener('change', filtrarTabela);
    }
    
    // Função para confirmar exclusão
    window.confirmarExclusao = function(id, nome) {
        if (confirm(`Tem certeza que deseja excluir o militante ${nome}?`)) {
            fetch(`/militantes/excluir/${id}`, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    location.reload();
                } else {
                    alert(data.message || 'Erro ao excluir militante');
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao excluir militante');
            });
        }
    };
});
</script>
{% endblock %}