{% extends "shared/base_dashboard.html" %}
{% load static %}

{% block title %}Tarefas - Chaplin{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
            <div>
                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">Tarefas</h1>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Gerencie todas as suas tarefas</p>
            </div>
            <div class="flex items-center gap-3 flex-wrap">
                
                <div class="flex items-center bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-1">
                    <a href="{% url 'tasks:list' %}" class="flex items-center gap-2 px-3 py-2 rounded-md bg-orange-500 text-white transition text-sm font-medium">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
                        Lista
                    </a>
                    <a href="{% url 'tasks:kanban' %}" class="flex items-center gap-2 px-3 py-2 rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700 transition text-sm font-medium">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"></path></svg>
                        Kanban
                    </a>

                </div>
                {% if user.is_superuser or user.profile.role == 'gestor' %}
                <a href="{% url 'tasks:create' %}" class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-5 rounded-lg transition">
                    + Nova Tarefa
                </a>
                {% endif %}
            </div>
        </div>

        
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8 border border-gray-200 dark:border-gray-700">
            <form method="GET" action="{% url 'tasks:list' %}" class="grid grid-cols-1 md:grid-cols-5 gap-4 items-end">
                
                <div class="md:col-span-2">
                    <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Buscar</label>
                    <input
                        type="text"
                        name="search"
                        id="search"
                        value="{{ current_search }}"
                        placeholder="Buscar por título, descrição ou local..."
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 dark:bg-gray-700 dark:text-white"
                    >
                </div>

                
                <div>
                    <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status</label>
                    <select name="status" id="status" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 dark:bg-gray-700 dark:text-white">
                        <option value="">Todos</option>
                        {% if user.profile.role != 'colaborador' %}
                        <option value="aberta" {% if current_status == 'aberta' %}selected{% endif %}>Aberta</option>
                        {% endif %}
                        <option value="alocada" {% if current_status == 'alocada' %}selected{% endif %}>Alocada</option>
                        <option value="concluida" {% if current_status == 'concluida' %}selected{% endif %}>Concluída</option>
                        <option value="finalizada" {% if current_status == 'finalizada' %}selected{% endif %}>Finalizada</option>
                    </select>
                </div>

                
                <div>
                    <label for="priority" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Prioridade</label>
                    <select name="priority" id="priority" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 dark:bg-gray-700 dark:text-white">
                        <option value="">Todas</option>
                        <option value="baixa" {% if current_priority == 'baixa' %}selected{% endif %}>Baixa</option>
                        <option value="normal" {% if current_priority == 'normal' %}selected{% endif %}>Normal</option>
                        <option value="alta" {% if current_priority == 'alta' %}selected{% endif %}>Alta</option>
                        <option value="urgente" {% if current_priority == 'urgente' %}selected{% endif %}>Urgente</option>
                    </select>
                </div>

                
                <div>
                    <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-4 rounded-lg transition h-[42px]">
                        Filtrar
                    </button>
                </div>
            </form>
        </div>

        <div id="list-table-container">
            {% include "tasks/_list_table.html" %}
        </div>

    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const tableContainer = document.getElementById('list-table-container');
        if (tableContainer) {
            setInterval(() => {
                // Manter os filtros aplicados no momento da busca AJAX
                const form = document.querySelector('form');
                const params = new URLSearchParams(new FormData(form)).toString();
                
                fetch(`{% url "tasks:list" %}?ajax=1&${params}`, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(res => res.text())
                .then(html => {
                    tableContainer.innerHTML = html;
                })
                .catch(err => console.error('Erro ao atualizar lista:', err));
            }, 5000); // 5 segundos
        }
    });
</script>
{% endblock %}