{% extends 'base.html' %}
{% load static %}

{% block title %}Tarefas - {{ block.super }}{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb" class="bg-light">
    <div class="container-fluid">
        <ol class="breadcrumb mb-0 py-2">
            <li class="breadcrumb-item"><a href="{% url 'home' %}">Início</a></li>
            <li class="breadcrumb-item active" aria-current="page">Tarefas</li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<!-- Container para o modal -->
<div id="modalContainer"></div>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-list-task"></i> Tarefas</h1>
    <div class="btn-group">
        <button type="button" class="btn btn-primary" id="openTaskModal">
            <i class="bi bi-plus-circle"></i> Nova Tarefa
        </button>
        <a href="{% url 'task:my_tasks' %}" class="btn btn-outline-info">
            <i class="bi bi-person-check"></i> Minhas Tarefas
        </a>
    </div>
</div>

<!-- Estatísticas -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-list-task display-4 text-primary"></i>
                <h3 class="text-primary">{{ total_tasks|default:0 }}</h3>
                <p class="text-muted mb-0">Total</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-check-circle display-4 text-success"></i>
                <h3 class="text-success">{{ tasks_concluidas|default:0 }}</h3>
                <p class="text-muted mb-0">Concluídas</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-clock display-4 text-warning"></i>
                <h3 class="text-warning">{{ tasks_em_andamento|default:0 }}</h3>
                <p class="text-muted mb-0">Em Andamento</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-hourglass-split display-4 text-info"></i>
                <h3 class="text-info">{{ tasks_nao_iniciadas|default:0 }}</h3>
                <p class="text-muted mb-0">Pendentes</p>
            </div>
        </div>
    </div>
</div>

<style>
    .filter-header {
        transition: background-color 0.2s ease;
    }
    
    .filter-header:hover {
        background-color: rgba(0, 123, 255, 0.1) !important;
    }
    
    .filter-toggle-icon {
        transition: transform 0.2s ease;
    }
    
    #filterBody {
        transition: all 0.3s ease;
    }
    
    .filter-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
</style>

<!-- Filtros -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center filter-header" 
         style="cursor: pointer;" 
         onclick="toggleFilters();">
        <h5 class="mb-0">
            <i class="bi bi-funnel"></i> Filtros
            <span class="badge bg-primary ms-2 filter-badge" id="activeFiltersCount" style="display: none;">0</span>
        </h5>
        <i class="bi bi-chevron-down filter-toggle-icon" id="filterToggleIcon"></i>
    </div>
    <div class="card-body" id="filterBody">
        <form method="get">
            <!-- Primeira linha de filtros -->
            <div class="row g-3">
                <div class="col-md-3">
                    <label for="search" class="form-label">Buscar</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ search }}" placeholder="Nome da tarefa...">
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">Todos</option>
                        <option value="aguardando" {% if status == 'aguardando' %}selected{% endif %}>Aguardando</option>
                        <option value="em_andamento" {% if status == 'em_andamento' %}selected{% endif %}>Em Andamento</option>
                        <option value="atrasado" {% if status == 'atrasado' %}selected{% endif %}>Atrasado</option>
                        <option value="liberado" {% if status == 'liberado' %}selected{% endif %}>Liberado</option>
                        <option value="em_aprovacao_cliente" {% if status == 'em_aprovacao_cliente' %}selected{% endif %}>Em Aprovação Cliente</option>
                        <option value="feito" {% if status == 'feito' %}selected{% endif %}>Feito</option>
                        <option value="validacao_interna" {% if status == 'validacao_interna' %}selected{% endif %}>Validação Interna</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="cliente" class="form-label">Cliente</label>
                    <select class="form-select" id="cliente" name="cliente">
                        <option value="">Todos</option>
                        {% for cliente in clientes %}
                            <option value="{{ cliente.id }}" {% if cliente_id == cliente.id|stringformat:"s" %}selected{% endif %}>
                                {{ cliente.nome }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="responsavel" class="form-label">Responsável</label>
                    <select class="form-select" id="responsavel" name="responsavel">
                        <option value="">Todos</option>
                        {% for responsavel in colaboradores %}
                            <option value="{{ responsavel.id }}" {% if responsavel_id == responsavel.id|stringformat:"s" %}selected{% endif %}>
                                {{ responsavel.nome }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>
            
            <!-- Segunda linha para filtros de data -->
            <div class="row g-3 mt-3">
                <div class="col-md-2">
                    <label for="date_from" class="form-label">Data Inicial</label>
                    <input type="date" class="form-control" id="date_from" name="date_from" value="{{ date_from }}">
                </div>
                <div class="col-md-2">
                    <label for="date_to" class="form-label">Data Final</label>
                    <input type="date" class="form-control" id="date_to" name="date_to" value="{{ date_to }}">
                </div>
                <div class="col-md-2">
                    <label for="date_filter" class="form-label">Tipo de Data</label>
                    <select class="form-select" id="date_filter" name="date_filter">
                        <option value="cronograma_inicio" {% if date_filter == 'cronograma_inicio' %}selected{% endif %}>Data de Início</option>
                        <option value="cronograma_fim" {% if date_filter == 'cronograma_fim' %}selected{% endif %}>Data de Fim</option>
                        <option value="created_at" {% if date_filter == 'created_at' %}selected{% endif %}>Data de Criação</option>
                        <option value="updated_at" {% if date_filter == 'updated_at' %}selected{% endif %}>Data de Atualização</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="prioridade" class="form-label">Prioridade</label>
                    <select class="form-select" id="prioridade" name="prioridade">
                        <option value="">Todas</option>
                        <option value="baixa" {% if prioridade == 'baixa' %}selected{% endif %}>Baixa</option>
                        <option value="media" {% if prioridade == 'media' %}selected{% endif %}>Média</option>
                        <option value="alta" {% if prioridade == 'alta' %}selected{% endif %}>Alta</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="esforco_min" class="form-label">Esforço Mínimo (h)</label>
                    <input type="number" class="form-control" id="esforco_min" name="esforco_min" 
                           value="{{ esforco_min }}" min="0" step="0.5" placeholder="0">
                </div>
                <div class="col-md-2">
                    <label for="esforco_max" class="form-label">Esforço Máximo (h)</label>
                    <input type="number" class="form-control" id="esforco_max" name="esforco_max" 
                           value="{{ esforco_max }}" min="0" step="0.5" placeholder="100">
                </div>
            </div>
            
            <!-- Terceira linha para botões -->
            <div class="row g-3 mt-3">
                <div class="col-md-12 d-flex justify-content-between align-items-end">
                    <div>
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="bi bi-search"></i> Buscar
                        </button>
                        <a href="{% url 'task:list' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-circle"></i> Limpar Filtros
                        </a>
                    </div>
                    <div class="text-muted small">
                        <i class="bi bi-info-circle"></i> Use os filtros para encontrar tarefas específicas
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Lista de Tarefas -->
{% if tasks %}
<div class="table-responsive">
    <table class="table table-hover">
        <thead class="table-dark">
            <tr>
                <th>Nome</th>
                <th>Grupo</th>
                <th>Responsável</th>
                <th>Status</th>
                <th>Prioridade</th>
                <th>Prazo</th>
                <th>Tempo Total</th>
                <th>Ações</th>
            </tr>
        </thead>
        <tbody>
            {% for task in tasks %}
            <tr>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="me-2">
                            <span class="badge bg-{{ task.prioridade }}">{{ task.get_prioridade_display }}</span>
                        </div>
                        <div>
                            <strong>{{ task.nome }}</strong>
                            {% if task.descricao %}
                                <br><small class="text-muted">{{ task.descricao|truncatewords:10 }}</small>
                            {% endif %}
                        </div>
                    </div>
                </td>
                <td>
                    {% if task.group %}
                        <span class="badge bg-info">{{ task.group.nome }}</span>
                        <br><small class="text-muted">{{ task.group.board.nome }}</small>
                    {% else %}
                        <span class="text-muted">Sem grupo</span>
                    {% endif %}
                </td>
                <td>
                    {% if task.responsavel %}
                        <div class="d-flex align-items-center">
                            <i class="bi bi-person-circle me-1"></i>
                            {{ task.responsavel.nome }}
                        </div>
                    {% else %}
                        <span class="text-muted">Sem responsável</span>
                    {% endif %}
                </td>
                <td>
                    <span class="badge bg-{{ task.status|yesno:'success,warning,danger,info,secondary' }}">
                        {{ task.get_status_display }}
                    </span>
                    {% if task.is_atrasada %}
                        <br><small class="text-danger">Atrasada</small>
                    {% endif %}
                </td>
                <td>
                    <span class="badge bg-{{ task.prioridade }}">
                        {{ task.get_prioridade_display }}
                    </span>
                </td>
                <td>
                    {% if task.cronograma_fim %}
                        <div class="text-{{ task.is_atrasada|yesno:'danger,success' }}">
                            {{ task.cronograma_fim|date:"d/m/Y" }}
                        </div>
                        {% if task.is_atrasada %}
                            <small class="text-danger">
                                {{ task.dias_atraso }} dias atrasada
                            </small>
                        {% endif %}
                    {% else %}
                        <span class="text-muted">Sem prazo</span>
                    {% endif %}
                </td>
                <td>
                    <div class="text-center">
                        <small class="text-muted">Total:</small>
                        <div class="fw-bold">{{ task.tempo_total_formatado }}</div>
                    </div>
                </td>
                <td>
                    <div class="btn-group btn-group-sm" role="group">
                        <a href="{% url 'task:detail' task.pk %}" 
                           class="btn btn-outline-primary" title="Ver detalhes">
                            <i class="bi bi-eye"></i>
                        </a>
                        <button type="button" 
                                class="btn btn-outline-secondary edit-task-btn"
                                data-task-id="{{ task.pk }}"
                                data-task-name="{{ task.nome }}"
                                title="Editar">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <a href="{% url 'task:delete' task.pk %}" 
                           class="btn btn-outline-danger delete-btn" title="Excluir"
                           data-item-name="{{ task.nome }}">
                            <i class="bi bi-trash"></i>
                        </a>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Paginação -->
{% if is_paginated %}
<nav aria-label="Paginação" class="mt-4">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if project_id %}&project={{ project_id }}{% endif %}{% if board_id %}&board={{ board_id }}{% endif %}{% if responsavel_id %}&responsavel={{ responsavel_id }}{% endif %}">
                    <i class="bi bi-chevron-double-left"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if project_id %}&project={{ project_id }}{% endif %}{% if board_id %}&board={{ board_id }}{% endif %}{% if responsavel_id %}&responsavel={{ responsavel_id }}{% endif %}">
                    <i class="bi bi-chevron-left"></i>
                </a>
            </li>
        {% endif %}
        
        <li class="page-item active">
            <span class="page-link">
                {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}
            </span>
        </li>
        
        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if project_id %}&project={{ project_id }}{% endif %}{% if board_id %}&board={{ board_id }}{% endif %}{% if responsavel_id %}&responsavel={{ responsavel_id }}{% endif %}">
                    <i class="bi bi-chevron-right"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if project_id %}&project={{ project_id }}{% endif %}{% if board_id %}&board={{ board_id }}{% endif %}{% if responsavel_id %}&responsavel={{ responsavel_id }}{% endif %}">
                    <i class="bi bi-chevron-double-right"></i>
                </a>
            </li>
        {% endif %}
    </ul>
</nav>
{% endif %}

{% else %}
<!-- Estado vazio -->
<div class="text-center py-5">
    <i class="bi bi-list-task display-1 text-muted"></i>
    <h4 class="text-muted mt-3">
        {% if search or status or project_id or board_id or responsavel_id %}
            Nenhuma tarefa encontrada
        {% else %}
            Nenhuma tarefa criada ainda
        {% endif %}
    </h4>
    <p class="text-muted">
        {% if search or status or project_id or board_id or responsavel_id %}
            Tente ajustar os filtros de busca.
        {% else %}
            Comece criando sua primeira tarefa.
        {% endif %}
    </p>
    {% if not search and not status and not project_id and not board_id and not responsavel_id %}
    <button type="button" class="btn btn-primary" id="openTaskModalEmpty">
        <i class="bi bi-plus-circle"></i> Criar Primeira Tarefa
    </button>
    {% endif %}
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM carregado - Tasks');
    console.log('Bootstrap disponível:', typeof bootstrap !== 'undefined');
    
    // Confirmação para exclusão
    const deleteButtons = document.querySelectorAll('.delete-btn');
    deleteButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            const itemName = this.getAttribute('data-item-name');
            if (!confirm(`Tem certeza que deseja excluir a tarefa "${itemName}"?`)) {
                e.preventDefault();
            }
        });
    });
    
    // Abrir modal de task via AJAX
    const openTaskModalBtns = document.querySelectorAll('#openTaskModal, #openTaskModalEmpty');
    openTaskModalBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            console.log('Abrindo modal de task...');
            
            // Carregar o modal via AJAX
            fetch('{% url "task:create_modal" %}')
                .then(response => response.text())
                .then(html => {
                    // Criar um elemento temporário para extrair o modal
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = html;
                    
                    // Encontrar o modal no HTML retornado
                    const modalHtml = tempDiv.querySelector('.modal');
                    if (modalHtml) {
                        // Remover modal existente se houver
                        const existingModal = document.getElementById('createTaskModal');
                        if (existingModal) {
                            existingModal.remove();
                        }
                        
                        // Adicionar o novo modal ao body
                        document.body.appendChild(modalHtml);
                        
                        // Mostrar o modal
                        const modal = new bootstrap.Modal(modalHtml);
                        modal.show();
                        
                        // Adicionar event listener para o formulário
                        setupTaskForm();
                    } else {
                        console.error('Modal não encontrado no HTML retornado');
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar modal:', error);
                });
        });
    });
    
    // Setup task form function
    function setupTaskForm() {
        const taskForm = document.getElementById('taskForm');
        if (taskForm) {
            console.log('Formulário de task encontrado');
            taskForm.addEventListener('submit', function(e) {
                e.preventDefault();
                console.log('Formulário submetido');
                
                const formData = new FormData(this);
                
                fetch('{% url "task:create_modal" %}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Resposta:', data);
                    if (data.success) {
                        // Show success message
                        showAlert('success', data.message);
                        
                        // Close modal
                        const modalElement = document.getElementById('createTaskModal');
                        if (modalElement) {
                            const modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            } else {
                                // Fallback: remove classes manually
                                modalElement.classList.remove('show');
                                modalElement.style.display = 'none';
                                document.body.classList.remove('modal-open');
                                const backdrop = document.querySelector('.modal-backdrop');
                                if (backdrop) backdrop.remove();
                            }
                        }
                        
                        // Reset form
                        taskForm.reset();
                        
                        // Reload page to show new task
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        // Show errors
                        showFormErrors(data.errors);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Erro ao criar task. Tente novamente.');
                });
            });
        }
    }
    
    // Abrir modal de edição de task via AJAX
    const editTaskBtns = document.querySelectorAll('.edit-task-btn');
    editTaskBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const taskId = this.getAttribute('data-task-id');
            const taskName = this.getAttribute('data-task-name');
            console.log(`Abrindo modal de edição para task: ${taskName} (ID: ${taskId})`);
            
            // Carregar o modal via AJAX
            fetch(`/tasks/${taskId}/edit-modal/`)
                .then(response => response.text())
                .then(html => {
                    // Criar um elemento temporário para extrair o modal
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = html;
                    
                    // Encontrar o modal no HTML retornado
                    const modalHtml = tempDiv.querySelector('.modal');
                    if (modalHtml) {
                        // Remover modal existente se houver
                        const existingModal = document.getElementById('editTaskModal');
                        if (existingModal) {
                            existingModal.remove();
                        }
                        
                        // Adicionar o novo modal ao body
                        document.body.appendChild(modalHtml);
                        
                        // Mostrar o modal
                        const modal = new bootstrap.Modal(modalHtml);
                        modal.show();
                        
                        // Adicionar event listener para o formulário
                        setupTaskEditForm();
                    } else {
                        console.error('Modal de edição não encontrado no HTML retornado');
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar modal de edição:', error);
                });
        });
    });
    
    // Setup task edit form function
    function setupTaskEditForm() {
        const taskEditForm = document.getElementById('taskEditForm');
        if (taskEditForm) {
            console.log('Formulário de edição de task encontrado');
            taskEditForm.addEventListener('submit', function(e) {
                e.preventDefault();
                console.log('Formulário de edição submetido');
                
                const formData = new FormData(this);
                
                fetch(this.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Resposta de edição:', data);
                    if (data.success) {
                        // Show success message
                        showAlert('success', data.message);
                        
                        // Close modal
                        const modalElement = document.getElementById('editTaskModal');
                        if (modalElement) {
                            const modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            } else {
                                // Fallback: remove classes manually
                                modalElement.classList.remove('show');
                                modalElement.style.display = 'none';
                                document.body.classList.remove('modal-open');
                                const backdrop = document.querySelector('.modal-backdrop');
                                if (backdrop) backdrop.remove();
                            }
                        }
                        
                        // Reload page to show updated task
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        // Show errors
                        showFormErrors(data.errors);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Erro ao atualizar task. Tente novamente.');
                });
            });
        }
    }
    
    // Show alert function
    function showAlert(type, message) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        const container = document.querySelector('.container-fluid');
        container.insertBefore(alertDiv, container.firstChild);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            alertDiv.remove();
        }, 5000);
    }
    
    // Show form errors function
    function showFormErrors(errors) {
        // Clear previous errors
        document.querySelectorAll('.is-invalid').forEach(el => {
            el.classList.remove('is-invalid');
        });
        document.querySelectorAll('.invalid-feedback').forEach(el => {
            el.remove();
        });
        
        // Show new errors
        Object.keys(errors).forEach(field => {
            const input = document.querySelector(`[name="${field}"]`);
            if (input) {
                input.classList.add('is-invalid');
                
                const errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback';
                errorDiv.textContent = errors[field][0];
                input.parentNode.appendChild(errorDiv);
            }
        });
    }
    

    

    
    // Função para obter cookie CSRF
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    // Toggle filters function - Global scope
    window.toggleFilters = function() {
        console.log('toggleFilters called'); // Debug
        const filterBody = document.getElementById('filterBody');
        const toggleIcon = document.getElementById('filterToggleIcon');
        
        console.log('filterBody:', filterBody); // Debug
        console.log('toggleIcon:', toggleIcon); // Debug
        
        if (!filterBody || !toggleIcon) {
            console.error('Elements not found');
            return;
        }
        
        const isHidden = filterBody.style.display === 'none';
        console.log('isHidden:', isHidden); // Debug
        
        if (isHidden) {
            filterBody.style.display = 'block';
            toggleIcon.className = 'bi bi-chevron-down filter-toggle-icon';
            console.log('Filters expanded'); // Debug
        } else {
            filterBody.style.display = 'none';
            toggleIcon.className = 'bi bi-chevron-right filter-toggle-icon';
            console.log('Filters collapsed'); // Debug
        }
    };
    
    // Count active filters function
    function countActiveFilters() {
        let count = 0;
        
        // Check search
        const searchInput = document.getElementById('search');
        if (searchInput && searchInput.value.trim()) count++;
        
        // Check status
        const statusSelect = document.getElementById('status');
        if (statusSelect && statusSelect.value) count++;
        
        // Check cliente
        const clienteSelect = document.getElementById('cliente');
        if (clienteSelect && clienteSelect.value) count++;
        
        // Check responsavel
        const responsavelSelect = document.getElementById('responsavel');
        if (responsavelSelect && responsavelSelect.value) count++;
        
        // Check date filters
        const dateFromInput = document.getElementById('date_from');
        if (dateFromInput && dateFromInput.value) count++;
        
        const dateToInput = document.getElementById('date_to');
        if (dateToInput && dateToInput.value) count++;
        
        // Check prioridade
        const prioridadeSelect = document.getElementById('prioridade');
        if (prioridadeSelect && prioridadeSelect.value) count++;
        
        // Check esforco filters
        const esforcoMinInput = document.getElementById('esforco_min');
        if (esforcoMinInput && esforcoMinInput.value) count++;
        
        const esforcoMaxInput = document.getElementById('esforco_max');
        if (esforcoMaxInput && esforcoMaxInput.value) count++;
        
        // Update badge
        const badge = document.getElementById('activeFiltersCount');
        if (badge) {
            badge.textContent = count;
            
            // Show/hide badge
            if (count > 0) {
                badge.style.display = 'inline';
            } else {
                badge.style.display = 'none';
            }
        }
    }
    
    // Test function
    window.testToggle = function() {
        console.log('Test toggle function called');
        toggleFilters();
    };
    
    // Initialize filters when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM loaded, initializing filters...'); // Debug
        countActiveFilters();
        
        // Add event listeners to all filter inputs
        const filterInputs = document.querySelectorAll('#filterBody input, #filterBody select');
        filterInputs.forEach(input => {
            input.addEventListener('change', countActiveFilters);
            input.addEventListener('input', countActiveFilters);
        });
        
        console.log('Filters initialized'); // Debug
    });
});
</script>
{% endblock %}