{% extends 'base.html.twig' %}

{% block title %}Gestion des Tâches - Clinique Les Genêts{% endblock %}

{% block page_title %}Gestion des Tâches{% endblock %}

{% block stylesheets %}
    <style>
        .task-completed {
            text-decoration: line-through;
            opacity: 0.6;
            transition: all 0.3s ease;
        }
        
        .task-checkbox {
            transition: all 0.2s ease;
        }
        
        .task-checkbox:checked {
            transform: scale(1.1);
        }
        
        .task-row.completed {
            background-color: #f9fafb !important;
        }
    </style>
{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Header avec actions -->
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <h2 class="text-xl font-semibold text-gray-800">Liste des tâches</h2>
            <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                {{ tasks|length }} tâche{{ tasks|length > 1 ? 's' : '' }}
            </span>
        </div>
        <div class="flex items-center space-x-3">
            <button onclick="openTaskModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-plus mr-2"></i>
                Nouvelle tâche
            </button>
        </div>
    </div>

    <!-- Onglets -->
    <div class="bg-white rounded-lg border border-gray-200">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-8 px-6" aria-label="Tabs">
                <button onclick="showTab('active')" id="activeTab" class="tab-btn border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Tâches en cours
                    <span id="activeCount" class="ml-2 bg-blue-100 text-blue-600 py-1 px-2 rounded-full text-xs">0</span>
                </button>
                <button onclick="showTab('recurring')" id="recurringTab" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Tâches récurrentes
                    <span id="recurringCount" class="ml-2 bg-green-100 text-green-600 py-1 px-2 rounded-full text-xs">0</span>
                </button>
                <button onclick="showTab('completed')" id="completedTab" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Tâches terminées
                    <span id="completedCount" class="ml-2 bg-gray-100 text-gray-600 py-1 px-2 rounded-full text-xs">0</span>
                </button>
            </nav>
        </div>
        
        <!-- Filtres -->
        <div class="p-4 border-b border-gray-200">
            <div class="flex flex-wrap items-center gap-4">
                <div class="flex items-center space-x-2">
                    <label class="text-sm font-medium text-gray-700">Priorité :</label>
                    <select id="priorityFilter" class="border border-gray-300 rounded-md px-3 py-1 text-sm">
                        <option value="">Toutes</option>
                        <option value="urgent">Urgente</option>
                        <option value="high">Haute</option>
                        <option value="medium">Moyenne</option>
                        <option value="low">Faible</option>
                    </select>
                </div>
                <div class="flex items-center space-x-2">
                    <label class="text-sm font-medium text-gray-700">Assigné à :</label>
                    <select id="assigneeFilter" class="border border-gray-300 rounded-md px-3 py-1 text-sm">
                        <option value="">Tous</option>
                        {% set assignees = [] %}
                        {% for task in tasks %}
                            {% if task.assignedTo and task.assignedTo not in assignees %}
                                {% set assignees = assignees|merge([task.assignedTo]) %}
                                <option value="{{ task.assignedTo.id }}">{{ task.assignedTo.firstName }} {{ task.assignedTo.lastName }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
                <div id="completedFilters" class="hidden flex items-center space-x-2">
                    <label class="text-sm font-medium text-gray-700">Période :</label>
                    <select id="periodFilter" class="border border-gray-300 rounded-md px-3 py-1 text-sm">
                        <option value="">Toutes</option>
                        <option value="today">Aujourd'hui</option>
                        <option value="week">Cette semaine</option>
                        <option value="month">Ce mois</option>
                        <option value="quarter">Ce trimestre</option>
                    </select>
                </div>
                <div id="recurringFilters" class="hidden flex items-center space-x-2">
                    <label class="text-sm font-medium text-gray-700">Type :</label>
                    <select id="recurrenceTypeFilter" class="border border-gray-300 rounded-md px-3 py-1 text-sm">
                        <option value="">Tous types</option>
                        <option value="daily">Quotidiennes</option>
                        <option value="weekly">Hebdomadaires</option>
                        <option value="monthly">Mensuelles</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Contenu des onglets -->
    <div id="activeTasksContent" class="tab-content">
        {% set activeTasks = tasks|filter(task => not task.isCompleted) %}
        {% if activeTasks is empty %}
            <div class="bg-white rounded-lg border border-gray-200 p-12 text-center">
                <i class="fas fa-tasks text-gray-300 text-6xl mb-4"></i>
                <h3 class="text-xl font-medium text-gray-600 mb-2">Aucune tâche en cours</h3>
                <p class="text-gray-500 mb-6">Toutes vos tâches sont terminées ou créez-en une nouvelle</p>
                <button onclick="openTaskModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg inline-flex items-center">
                    <i class="fas fa-plus mr-2"></i>
                    Créer une tâche
                </button>
            </div>
        {% else %}
            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Tâche</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Assigné à</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Catégorie</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Priorité</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Statut</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Échéance</th>
                                <th class="text-right py-3 px-4 font-medium text-gray-600">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            {% for task in activeTasks %}
                                <tr class="task-row hover:bg-gray-50 {{ task.isOverdue ? 'bg-red-50' : '' }}" 
                                    data-priority="{{ task.priority }}" 
                                    data-assignee="{{ task.assignedTo.id }}"
                                    data-status="active">
                                    <td class="py-3 px-4">
                                        <div class="flex items-start space-x-3">
                                            <!-- Case à cocher pour validation -->
                                            <div class="flex items-center mt-1">
                                                <input type="checkbox" 
                                                       id="task-{{ task.id }}"
                                                       class="task-checkbox w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 focus:ring-2" 
                                                       {{ task.status == 'completed' ? 'checked' : '' }}
                                                       onchange="toggleTaskCompletion({{ task.id }}, this.checked)"
                                                       title="{{ task.status == 'completed' ? 'Tâche terminée - Cliquez pour remettre en cours' : 'Cliquer pour valider cette tâche' }}">
                                            </div>
                                            <div class="flex-1 {{ task.status == 'completed' ? 'task-completed' : '' }}">
                                                <h4 class="font-medium text-gray-800">
                                                    {{ task.title }}
                                                    {% if task.isRecurring %}
                                                        <i class="fas fa-redo text-blue-500 ml-2" title="Tâche récurrente"></i>
                                                    {% endif %}
                                                </h4>
                                            {% if task.description %}
                                                <p class="text-sm text-gray-500 mt-1">{{ task.description|length > 60 ? task.description|slice(0, 60) ~ '...' : task.description }}</p>
                                            {% endif %}
                                            {% if task.project %}
                                                <span class="inline-block mt-1 text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">
                                                    {{ task.project.name }}
                                                </span>
                                            {% endif %}
                                        </div>
                                    </td>
                                    <td class="py-3 px-4">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center mr-2">
                                                <span class="text-xs font-medium text-gray-600">
                                                    {{ task.assignedTo.firstName|slice(0,1) }}{{ task.assignedTo.lastName|slice(0,1) }}
                                                </span>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium text-gray-800">{{ task.assignedTo.firstName }} {{ task.assignedTo.lastName }}</p>
                                                <p class="text-xs text-gray-500">{{ task.assignedTo.specialty }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-3 px-4">
                                        {% if task.category %}
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium" 
                                                  style="background-color: {{ task.category.color }}20; color: {{ task.category.color }};">
                                                {{ task.category.name }}
                                            </span>
                                        {% else %}
                                            <span class="text-gray-400 text-sm">Non catégorisé</span>
                                        {% endif %}
                                    </td>
                                    <td class="py-3 px-4">
                                        <span class="priority-{{ task.priority }} px-2 py-1 rounded-full text-xs font-medium">
                                            {{ task.priorityLabel }}
                                        </span>
                                    </td>
                                    <td class="py-3 px-4">
                                        <span class="status-{{ task.status }} px-2 py-1 rounded-full text-xs font-medium">
                                            {{ task.statusLabel }}
                                        </span>
                                    </td>
                                    <td class="py-3 px-4">
                                        {% if task.dueDate %}
                                            <div class="text-sm {{ task.isOverdue ? 'text-red-600 font-medium' : 'text-gray-600' }}">
                                                {{ task.dueDate|date('d/m/Y') }}
                                                {% if task.isOverdue %}
                                                    <i class="fas fa-exclamation-triangle ml-1"></i>
                                                {% endif %}
                                            </div>
                                        {% else %}
                                            <span class="text-gray-400 text-sm">Aucune</span>
                                        {% endif %}
                                    </td>
                                    <td class="py-3 px-4 text-right">
                                        <div class="flex items-center justify-end space-x-2">
                                            <a href="{{ path('app_task_show', {id: task.id}) }}" 
                                               class="text-blue-600 hover:text-blue-800 p-1">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <button onclick="openEditModal({{ task.id }}, '{{ task.title|e('js') }}', '{{ task.description|e('js') }}', '{{ task.status }}', '{{ task.priority }}', '{{ task.assignedTo.id }}', '{{ task.category ? task.category.id : '' }}', '{{ task.project ? task.project.id : '' }}', '{{ task.dueDate ? task.dueDate|date('Y-m-d\\TH:i') : '' }}', {{ task.isRecurring ? 'true' : 'false' }}, '{{ task.recurrenceType }}', {{ task.recurrenceInterval|default(1) }}, '{{ task.recurrenceEndDate ? task.recurrenceEndDate|date('Y-m-d') : '' }}')" 
                                                    class="text-gray-600 hover:text-gray-800 p-1">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <form method="post" action="{{ path('app_task_delete', {id: task.id}) }}" style="display: inline;" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette tâche ?')">
                                                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ task.id) }}">
                                                <button type="submit" class="text-red-600 hover:text-red-800 p-1" title="Supprimer la tâche">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    </div>

    <div id="completedTasksContent" class="tab-content hidden">
        {% set completedTasks = tasks|filter(task => task.isCompleted) %}
        {% if completedTasks is empty %}
            <div class="bg-white rounded-lg border border-gray-200 p-12 text-center">
                <i class="fas fa-check-circle text-gray-300 text-6xl mb-4"></i>
                <h3 class="text-xl font-medium text-gray-600 mb-2">Aucune tâche terminée</h3>
                <p class="text-gray-500 mb-6">Les tâches terminées apparaîtront ici</p>
            </div>
        {% else %}
            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Tâche</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Assigné à</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Catégorie</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Priorité</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Terminée le</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Satisfaction</th>
                                <th class="text-right py-3 px-4 font-medium text-gray-600">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            {% for task in completedTasks %}
                                <tr class="task-row hover:bg-gray-50 bg-green-50" 
                                    data-priority="{{ task.priority }}" 
                                    data-assignee="{{ task.assignedTo.id }}"
                                    data-status="completed"
                                    data-completed="{{ task.completedAt ? task.completedAt|date('Y-m-d') : '' }}">
                                    <td class="py-3 px-4">
                                        <div>
                                            <h4 class="font-medium text-gray-800">
                                                {{ task.title }}
                                                {% if task.isRecurring %}
                                                    <i class="fas fa-redo text-blue-500 ml-2" title="Tâche récurrente"></i>
                                                {% endif %}
                                                {% if task.parentTask %}
                                                    <i class="fas fa-link text-gray-400 ml-2" title="Instance de tâche récurrente"></i>
                                                {% endif %}
                                            </h4>
                                            {% if task.description %}
                                                <p class="text-sm text-gray-500 mt-1">{{ task.description|length > 60 ? task.description|slice(0, 60) ~ '...' : task.description }}</p>
                                            {% endif %}
                                            {% if task.project %}
                                                <span class="inline-block mt-1 text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">
                                                    {{ task.project.name }}
                                                </span>
                                            {% endif %}
                                        </div>
                                    </td>
                                    <td class="py-3 px-4">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center mr-2">
                                                <span class="text-xs font-medium text-gray-600">
                                                    {{ task.assignedTo.firstName|slice(0,1) }}{{ task.assignedTo.lastName|slice(0,1) }}
                                                </span>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium text-gray-800">{{ task.assignedTo.firstName }} {{ task.assignedTo.lastName }}</p>
                                                <p class="text-xs text-gray-500">{{ task.assignedTo.specialty }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-3 px-4">
                                        {% if task.category %}
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium" 
                                                  style="background-color: {{ task.category.color }}20; color: {{ task.category.color }};">
                                                {{ task.category.name }}
                                            </span>
                                        {% else %}
                                            <span class="text-gray-400 text-sm">Non catégorisé</span>
                                        {% endif %}
                                    </td>
                                    <td class="py-3 px-4">
                                        <span class="priority-{{ task.priority }} px-2 py-1 rounded-full text-xs font-medium">
                                            {{ task.priorityLabel }}
                                        </span>
                                    </td>
                                    <td class="py-3 px-4">
                                        {% if task.completedAt %}
                                            <div class="text-sm text-gray-600">
                                                {{ task.completedAt|date('d/m/Y à H:i') }}
                                            </div>
                                        {% else %}
                                            <span class="text-gray-400 text-sm">-</span>
                                        {% endif %}
                                    </td>
                                    <td class="py-3 px-4">
                                        {% if task.executions|length > 0 %}
                                            {% set lastExecution = task.executions|last %}
                                            {% if lastExecution.clientSatisfactionRating %}
                                                <div class="flex items-center">
                                                    {% for i in 1..5 %}
                                                        <i class="fas fa-star text-xs {{ i <= lastExecution.clientSatisfactionRating ? 'text-yellow-400' : 'text-gray-300' }}"></i>
                                                    {% endfor %}
                                                    <span class="text-xs text-gray-600 ml-1">{{ lastExecution.clientSatisfactionRating }}/5</span>
                                                </div>
                                            {% else %}
                                                <span class="text-gray-400 text-sm">-</span>
                                            {% endif %}
                                        {% else %}
                                            <span class="text-gray-400 text-sm">-</span>
                                        {% endif %}
                                    </td>
                                    <td class="py-3 px-4 text-right">
                                        <div class="flex items-center justify-end space-x-2">
                                            <a href="{{ path('app_task_show', {id: task.id}) }}" 
                                               class="text-blue-600 hover:text-blue-800 p-1" title="Voir les détails">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            {% if task.executions|length > 0 %}
                                                <button onclick="showExecutionDetails({{ task.id }})" 
                                                        class="text-green-600 hover:text-green-800 p-1" title="Voir l'exécution">
                                                    <i class="fas fa-clipboard-check"></i>
                                                </button>
                                            {% endif %}
                                            <form method="post" action="{{ path('app_task_delete', {id: task.id}) }}" style="display: inline;" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette tâche terminée ?')">
                                                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ task.id) }}">
                                                <button type="submit" class="text-red-600 hover:text-red-800 p-1" title="Supprimer la tâche">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    </div>

    <div id="recurringTasksContent" class="tab-content hidden">
        {% set recurringTasks = tasks|filter(task => task.isRecurring and not task.isCompleted) %}
        {% if recurringTasks is empty %}
            <div class="bg-white rounded-lg border border-gray-200 p-12 text-center">
                <i class="fas fa-redo text-gray-300 text-6xl mb-4"></i>
                <h3 class="text-xl font-medium text-gray-600 mb-2">Aucune tâche récurrente</h3>
                <p class="text-gray-500 mb-6">Créez des tâches récurrentes pour automatiser vos processus répétitifs</p>
                <button onclick="openTaskModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg inline-flex items-center">
                    <i class="fas fa-plus mr-2"></i>
                    Créer une tâche récurrente
                </button>
            </div>
        {% else %}
            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Tâche</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Assigné à</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Récurrence</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Prochaine échéance</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Fin de récurrence</th>
                                <th class="text-left py-3 px-4 font-medium text-gray-600">Exécutions</th>
                                <th class="text-right py-3 px-4 font-medium text-gray-600">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            {% for task in recurringTasks %}
                                <tr class="task-row hover:bg-gray-50" 
                                    data-priority="{{ task.priority }}" 
                                    data-assignee="{{ task.assignedTo.id }}"
                                    data-recurrence-type="{{ task.recurrenceType }}"
                                    data-status="recurring">
                                    <td class="py-3 px-4">
                                        <div class="flex items-start space-x-3">
                                            <!-- Case à cocher pour validation -->
                                            <div class="flex items-center mt-1">
                                                <input type="checkbox" 
                                                       id="task-{{ task.id }}"
                                                       class="task-checkbox w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 focus:ring-2" 
                                                       {{ task.status == 'completed' ? 'checked' : '' }}
                                                       onchange="toggleTaskCompletion({{ task.id }}, this.checked)"
                                                       title="{{ task.status == 'completed' ? 'Tâche terminée - Cliquez pour remettre en cours' : 'Cliquer pour valider cette tâche' }}">
                                            </div>
                                            <div class="flex-1 {{ task.status == 'completed' ? 'task-completed' : '' }}">
                                                <h4 class="font-medium text-gray-800">
                                                    {{ task.title }}
                                                    <i class="fas fa-redo text-green-500 ml-2" title="Tâche récurrente"></i>
                                                </h4>
                                            {% if task.description %}
                                                <p class="text-sm text-gray-500 mt-1">{{ task.description|length > 60 ? task.description|slice(0, 60) ~ '...' : task.description }}</p>
                                            {% endif %}
                                                {% if task.category %}
                                                    <span class="inline-block mt-1 text-xs" 
                                                          style="background-color: {{ task.category.color }}20; color: {{ task.category.color }}; padding: 2px 8px; border-radius: 4px;">
                                                        {{ task.category.name }}
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-3 px-4">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center mr-2">
                                                <span class="text-xs font-medium text-gray-600">
                                                    {{ task.assignedTo.firstName|slice(0,1) }}{{ task.assignedTo.lastName|slice(0,1) }}
                                                </span>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium text-gray-800">{{ task.assignedTo.firstName }} {{ task.assignedTo.lastName }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-3 px-4">
                                        <div class="text-sm">
                                            <span class="font-medium text-gray-700">
                                                {% if task.recurrenceType == 'daily' %}
                                                    Quotidienne
                                                {% elseif task.recurrenceType == 'weekly' %}
                                                    Hebdomadaire
                                                {% elseif task.recurrenceType == 'monthly' %}
                                                    Mensuelle
                                                {% endif %}
                                            </span>
                                            <br>
                                            <span class="text-xs text-gray-500">
                                                Tous les {{ task.recurrenceInterval }} 
                                                {% if task.recurrenceType == 'daily' %}jour(s)
                                                {% elseif task.recurrenceType == 'weekly' %}semaine(s)
                                                {% elseif task.recurrenceType == 'monthly' %}mois
                                                {% endif %}
                                            </span>
                                        </div>
                                    </td>
                                    <td class="py-3 px-4">
                                        {% if task.dueDate %}
                                            <div class="text-sm text-gray-600">
                                                {{ task.dueDate|date('d/m/Y') }}
                                                <br>
                                                <span class="text-xs text-gray-500">{{ task.dueDate|date('H:i') }}</span>
                                            </div>
                                        {% else %}
                                            <span class="text-gray-400 text-sm">-</span>
                                        {% endif %}
                                    </td>
                                    <td class="py-3 px-4">
                                        {% if task.recurrenceEndDate %}
                                            <div class="text-sm text-gray-600">
                                                {{ task.recurrenceEndDate|date('d/m/Y') }}
                                            </div>
                                        {% else %}
                                            <span class="text-green-600 text-sm">Indéfinie</span>
                                        {% endif %}
                                    </td>
                                    <td class="py-3 px-4">
                                        <div class="text-sm">
                                            <span class="font-medium text-gray-700">{{ task.executions|length }}</span>
                                            <br>
                                            {% if task.executions|length > 0 %}
                                                {% set lastExecution = task.executions|last %}
                                                <span class="text-xs text-gray-500">
                                                    Dernière: {{ lastExecution.executedAt|date('d/m/Y') }}
                                                </span>
                                            {% else %}
                                                <span class="text-xs text-gray-500">Aucune</span>
                                            {% endif %}
                                        </div>
                                    </td>
                                    <td class="py-3 px-4 text-right">
                                        <div class="flex items-center justify-end space-x-2">
                                            <a href="{{ path('app_task_show', {id: task.id}) }}" 
                                               class="text-blue-600 hover:text-blue-800 p-1" title="Voir les détails">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <button onclick="openEditModal({{ task.id }}, '{{ task.title|e('js') }}', '{{ task.description|e('js') }}', '{{ task.status }}', '{{ task.priority }}', '{{ task.assignedTo.id }}', '{{ task.category ? task.category.id : '' }}', '{{ task.project ? task.project.id : '' }}', '{{ task.dueDate ? task.dueDate|date('Y-m-d\\TH:i') : '' }}', true, '{{ task.recurrenceType }}', {{ task.recurrenceInterval }}, '{{ task.recurrenceEndDate ? task.recurrenceEndDate|date('Y-m-d') : '' }}')" 
                                                    class="text-gray-600 hover:text-gray-800 p-1" title="Modifier">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <form method="post" action="{{ path('app_task_delete', {id: task.id}) }}" style="display: inline;" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette tâche ?')">
                                                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ task.id) }}">
                                                <button type="submit" class="text-red-600 hover:text-red-800 p-1" title="Supprimer la tâche">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    </div>
</div>

<!-- Modal de création de tâche -->
<div id="taskModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-2xl shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <!-- Header du modal -->
            <div class="flex items-center justify-between pb-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-plus text-blue-600 mr-2"></i>
                    Créer une nouvelle tâche
                </h3>
                <button onclick="closeTaskModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- Formulaire -->
            <div class="mt-4">
                <form id="taskForm" action="{{ path('app_task_new') }}" method="POST" class="space-y-4">
                    <!-- Titre -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Titre de la tâche <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="task[title]" required 
                               class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500" 
                               placeholder="Entrez le titre de la tâche...">
                    </div>

                    <!-- Description -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                        <textarea name="task[description]" rows="3" 
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500" 
                                  placeholder="Description détaillée de la tâche..."></textarea>
                    </div>

                    <!-- Assignation et Priorité -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Assigné à <span class="text-red-500">*</span>
                            </label>
                            <select name="assignedTo" required 
                                    class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                <option value="">Sélectionner un utilisateur</option>
                                {% for user in users|default([]) %}
                                    <option value="{{ user.id }}">{{ user.fullName }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Priorité <span class="text-red-500">*</span>
                            </label>
                            <select name="priority" required 
                                    class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                <option value="low">Faible</option>
                                <option value="medium" selected>Moyenne</option>
                                <option value="high">Haute</option>
                                <option value="urgent">Urgente</option>
                            </select>
                        </div>
                    </div>

                    <!-- Statut et Catégorie -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Statut</label>
                            <select name="status" 
                                    class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                <option value="todo" selected>À faire</option>
                                <option value="in_progress">En cours</option>
                                <option value="review">En révision</option>
                                <option value="completed">Terminé</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Catégorie</label>
                            <select name="category" id="categorySelect"
                                    class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                <option value="">Sélectionner une catégorie</option>
                                {% for category in categories|default([]) %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <!-- Projet et Date d'échéance -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Projet</label>
                            <select name="project" 
                                    class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                <option value="">Sélectionner un projet</option>
                                {% for project in projects|default([]) %}
                                    <option value="{{ project.id }}">{{ project.name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Date d'échéance</label>
                            <input type="datetime-local" name="dueDate" 
                                   class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>

                    <!-- Récurrence -->
                    <div class="border-t border-gray-200 pt-4">
                        <div class="flex items-center mb-4">
                            <input type="checkbox" id="isRecurring" name="isRecurring" value="1" 
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="isRecurring" class="ml-2 block text-sm font-medium text-gray-700">
                                Tâche récurrente
                            </label>
                        </div>
                        
                        <div id="recurrenceFields" class="hidden space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Type</label>
                                    <select name="recurrenceType" 
                                            class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                        <option value="daily">Quotidienne</option>
                                        <option value="weekly">Hebdomadaire</option>
                                        <option value="monthly">Mensuelle</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Intervalle</label>
                                    <input type="number" name="recurrenceInterval" value="1" min="1" max="365"
                                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Fin de récurrence</label>
                                    <input type="date" name="recurrenceEndDate" 
                                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Token CSRF -->
                    <input type="hidden" name="_token" value="{{ csrf_token('task_form') }}">

                    <!-- Actions -->
                    <div class="flex items-center justify-end space-x-3 pt-4 border-t border-gray-200">
                        <button type="button" onclick="closeTaskModal()" 
                                class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm">
                            <i class="fas fa-times mr-2"></i>
                            Annuler
                        </button>
                        <button type="submit" 
                                class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm">
                            <i class="fas fa-save mr-2"></i>
                            Créer la tâche
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de modification de tâche -->
<div id="editTaskModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-2xl shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <!-- Header du modal -->
            <div class="flex items-center justify-between pb-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-edit text-blue-600 mr-2"></i>
                    Modifier la tâche
                </h3>
                <button onclick="closeEditModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- Formulaire -->
            <div class="mt-4">
                <form id="editTaskForm" method="POST" class="space-y-4">
                    
                    <!-- Titre -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Titre de la tâche <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="editTitle" name="title" required 
                               class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500" 
                               placeholder="Entrez le titre de la tâche...">
                    </div>

                    <!-- Description -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                        <textarea id="editDescription" name="description" rows="3" 
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500" 
                                  placeholder="Description détaillée de la tâche..."></textarea>
                    </div>

                    <!-- Assignation et Priorité -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Assigné à <span class="text-red-500">*</span>
                            </label>
                            <select id="editAssignedTo" name="assignedTo" required 
                                    class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                <option value="">Sélectionner un utilisateur</option>
                                {% for user in users|default([]) %}
                                    <option value="{{ user.id }}">{{ user.fullName }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Priorité <span class="text-red-500">*</span>
                            </label>
                            <select id="editPriority" name="priority" required 
                                    class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                <option value="low">Faible</option>
                                <option value="medium">Moyenne</option>
                                <option value="high">Haute</option>
                                <option value="urgent">Urgente</option>
                            </select>
                        </div>
                    </div>

                    <!-- Statut et Catégorie -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Statut</label>
                            <select id="editStatus" name="status" 
                                    class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                <option value="todo">À faire</option>
                                <option value="in_progress">En cours</option>
                                <option value="review">En révision</option>
                                <option value="completed">Terminé</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Catégorie</label>
                            <select id="editCategory" name="category" 
                                    class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                <option value="">Sélectionner une catégorie</option>
                                {% for category in categories|default([]) %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <!-- Projet et Date d'échéance -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Projet</label>
                            <select id="editProject" name="project" 
                                    class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                <option value="">Sélectionner un projet</option>
                                {% for project in projects|default([]) %}
                                    <option value="{{ project.id }}">{{ project.name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Date d'échéance</label>
                            <input type="datetime-local" id="editDueDate" name="dueDate" 
                                   class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>

                    <!-- Récurrence -->
                    <div class="border-t border-gray-200 pt-4">
                        <div class="flex items-center mb-4">
                            <input type="checkbox" id="editIsRecurring" name="isRecurring" value="1" 
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="editIsRecurring" class="ml-2 block text-sm font-medium text-gray-700">
                                Tâche récurrente
                            </label>
                        </div>
                        
                        <div id="editRecurrenceFields" class="hidden space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Type</label>
                                    <select id="editRecurrenceType" name="recurrenceType" 
                                            class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                        <option value="daily">Quotidienne</option>
                                        <option value="weekly">Hebdomadaire</option>
                                        <option value="monthly">Mensuelle</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Intervalle</label>
                                    <input type="number" id="editRecurrenceInterval" name="recurrenceInterval" value="1" min="1" max="365"
                                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Fin de récurrence</label>
                                    <input type="date" id="editRecurrenceEndDate" name="recurrenceEndDate" 
                                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Token CSRF -->
                    <input type="hidden" name="_token" value="{{ csrf_token('edit_task') }}">

                    <!-- Actions -->
                    <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                        <button type="button" onclick="deleteTask()" 
                                class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm">
                            <i class="fas fa-trash mr-2"></i>
                            Supprimer
                        </button>
                        
                        <div class="flex items-center space-x-3">
                            <button type="button" onclick="closeEditModal()" 
                                    class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm">
                                <i class="fas fa-times mr-2"></i>
                                Annuler
                            </button>
                            <button type="submit" 
                                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm">
                                <i class="fas fa-save mr-2"></i>
                                Sauvegarder
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de validation d'exécution -->
<div id="validationModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-2xl shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <!-- Header du modal -->
            <div class="flex items-center justify-between pb-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-check-circle text-green-600 mr-2"></i>
                    Valider l'exécution de la tâche
                </h3>
                <button onclick="closeValidationModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- Informations de la tâche -->
            <div class="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
                <h4 id="validationTaskTitle" class="font-medium text-blue-800"></h4>
                <p class="text-blue-600 text-sm mt-1">Veuillez décrire les actions menées et évaluer la satisfaction client</p>
            </div>
            
            <!-- Formulaire -->
            <div class="mt-4">
                <form id="validationForm" method="POST" class="space-y-6">
                    <input type="hidden" id="validationTaskId" name="taskId">
                    
                    <!-- Actions menées (obligatoire) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Actions menées pour l'exécution <span class="text-red-500">*</span>
                        </label>
                        <textarea id="actionsPerformed" name="actionsPerformed" rows="4" required
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-green-500 focus:border-green-500" 
                                  placeholder="Décrivez en détail les actions que vous avez menées pour exécuter cette tâche..."></textarea>
                        <p class="text-xs text-gray-500 mt-1">Soyez précis dans vos descriptions pour faciliter le suivi et l'amélioration continue</p>
                    </div>

                    <!-- Auto-évaluation de la satisfaction client (obligatoire) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-3">
                            Auto-évaluation de la satisfaction client <span class="text-red-500">*</span>
                        </label>
                        <div class="space-y-3">
                            <!-- Étoiles de notation -->
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-gray-600 mr-2">Note :</span>
                                <div class="flex items-center space-x-1" id="starRating">
                                    <button type="button" class="star-btn text-2xl text-gray-300 hover:text-yellow-400" data-rating="1">★</button>
                                    <button type="button" class="star-btn text-2xl text-gray-300 hover:text-yellow-400" data-rating="2">★</button>
                                    <button type="button" class="star-btn text-2xl text-gray-300 hover:text-yellow-400" data-rating="3">★</button>
                                    <button type="button" class="star-btn text-2xl text-gray-300 hover:text-yellow-400" data-rating="4">★</button>
                                    <button type="button" class="star-btn text-2xl text-gray-300 hover:text-yellow-400" data-rating="5">★</button>
                                </div>
                                <span id="ratingText" class="text-sm text-gray-600 ml-2"></span>
                            </div>
                            <input type="hidden" id="clientSatisfactionRating" name="clientSatisfactionRating" required>
                            
                            <!-- Légende des notes -->
                            <div class="text-xs text-gray-500 space-y-1">
                                <div class="grid grid-cols-5 gap-2">
                                    <span>★ Très insatisfait</span>
                                    <span>★★ Insatisfait</span>
                                    <span>★★★ Neutre</span>
                                    <span>★★★★ Satisfait</span>
                                    <span>★★★★★ Très satisfait</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Notes complémentaires (optionnel) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Notes complémentaires <span class="text-gray-400">(optionnel)</span>
                        </label>
                        <textarea id="validationNotes" name="notes" rows="3"
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-green-500 focus:border-green-500" 
                                  placeholder="Commentaires additionnels, observations, points d'amélioration..."></textarea>
                    </div>

                    <!-- Token CSRF -->
                    <input type="hidden" name="_token" value="{{ csrf_token('task_validation') }}">

                    <!-- Actions -->
                    <div class="flex items-center justify-end space-x-3 pt-4 border-t border-gray-200">
                        <button type="button" onclick="closeValidationModal()" 
                                class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg text-sm">
                            <i class="fas fa-times mr-2"></i>
                            Annuler
                        </button>
                        <button type="submit" id="submitValidationBtn"
                                class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg text-sm">
                            <i class="fas fa-check-circle mr-2"></i>
                            <span id="submitText">Valider l'exécution</span>
                            <i id="submitLoader" class="fas fa-spinner fa-spin ml-2" style="opacity: 0;"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function openTaskModal() {
    document.getElementById('taskModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    // Focus sur le champ titre
    setTimeout(() => {
        document.querySelector('input[name="task[title]"]').focus();
    }, 100);
}

function closeTaskModal() {
    document.getElementById('taskModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
    // Reset du formulaire
    document.getElementById('taskForm').reset();
}

// Fermer le modal en cliquant à l'extérieur
document.getElementById('taskModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeTaskModal();
    }
});

// Fermer le modal avec la touche Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeTaskModal();
    }
});

// Gestion de la soumission du formulaire
document.getElementById('taskForm').addEventListener('submit', function(e) {
    // Validation côté client uniquement
    const title = document.querySelector('input[name="task[title]"]').value.trim();
    const assignedTo = document.querySelector('select[name="assignedTo"]').value;
    
    if (!title) {
        e.preventDefault();
        alert('Le titre est obligatoire');
        return;
    }
    
    if (!assignedTo) {
        e.preventDefault();
        alert('Veuillez sélectionner un utilisateur');
        return;
    }
    
    // Laisser le formulaire se soumettre normalement
});

// Fonctions pour le modal de modification
function openEditModal(id, title, description, status, priority, assignedTo, category, project, dueDate, isRecurring, recurrenceType, recurrenceInterval, recurrenceEndDate) {
    document.getElementById('editTaskModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    
    // Remplir les champs avec les données actuelles
    document.getElementById('editTitle').value = title;
    document.getElementById('editDescription').value = description || '';
    document.getElementById('editStatus').value = status;
    document.getElementById('editPriority').value = priority;
    document.getElementById('editAssignedTo').value = assignedTo;
    document.getElementById('editCategory').value = category || '';
    document.getElementById('editProject').value = project || '';
    document.getElementById('editDueDate').value = dueDate || '';
    
    // Gérer les champs de récurrence
    if (isRecurring) {
        document.getElementById('editIsRecurring').checked = true;
        document.getElementById('editRecurrenceFields').classList.remove('hidden');
        document.getElementById('editRecurrenceType').value = recurrenceType || 'daily';
        document.getElementById('editRecurrenceInterval').value = recurrenceInterval || 1;
        document.getElementById('editRecurrenceEndDate').value = recurrenceEndDate || '';
    } else {
        document.getElementById('editIsRecurring').checked = false;
        document.getElementById('editRecurrenceFields').classList.add('hidden');
    }
    
    // Mettre à jour l'action du formulaire
    document.getElementById('editTaskForm').action = '{{ path('app_task_edit', {id: '__ID__'}) }}'.replace('__ID__', id);
    
    // Focus sur le champ titre
    setTimeout(() => {
        document.getElementById('editTitle').focus();
    }, 100);
}

function closeEditModal() {
    document.getElementById('editTaskModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
    // Reset du formulaire
    document.getElementById('editTaskForm').reset();
}

function deleteTask() {
    // Récupérer l'ID depuis l'URL du formulaire
    const form = document.getElementById('editTaskForm');
    const actionUrl = form.action;
    const match = actionUrl.match(/\/tasks\/(\d+)\/edit/);
    
    if (match && match[1]) {
        const taskId = match[1];
        if (confirm('Êtes-vous sûr de vouloir supprimer cette tâche ?')) {
            // Créer un formulaire de suppression
            const deleteForm = document.createElement('form');
            deleteForm.method = 'POST';
            deleteForm.action = '{{ path('app_task_delete', {id: '__ID__'}) }}'.replace('__ID__', taskId);
            
            const tokenField = document.createElement('input');
            tokenField.type = 'hidden';
            tokenField.name = '_token';
            tokenField.value = '{{ csrf_token('delete') }}';
            
            deleteForm.appendChild(tokenField);
            document.body.appendChild(deleteForm);
            deleteForm.submit();
        }
    }
}

// Fermer le modal d'édition en cliquant à l'extérieur
document.getElementById('editTaskModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeEditModal();
    }
});

// Fermer le modal d'édition avec la touche Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && !document.getElementById('editTaskModal').classList.contains('hidden')) {
        closeEditModal();
    }
});

// Gestion de la soumission du formulaire de modification
document.getElementById('editTaskForm').addEventListener('submit', function(e) {
    // Validation côté client uniquement
    const title = document.getElementById('editTitle').value.trim();
    const assignedTo = document.getElementById('editAssignedTo').value;
    
    if (!title) {
        e.preventDefault();
        alert('Le titre est obligatoire');
        return;
    }
    
    if (!assignedTo) {
        e.preventDefault();
        alert('Veuillez sélectionner un utilisateur');
        return;
    }
    
    // Laisser le formulaire se soumettre normalement
});

// Gestion des champs de récurrence pour le modal de création
document.getElementById('isRecurring').addEventListener('change', function() {
    const recurrenceFields = document.getElementById('recurrenceFields');
    if (this.checked) {
        recurrenceFields.classList.remove('hidden');
    } else {
        recurrenceFields.classList.add('hidden');
    }
});

// Gestion des champs de récurrence pour le modal d'édition
document.getElementById('editIsRecurring').addEventListener('change', function() {
    const recurrenceFields = document.getElementById('editRecurrenceFields');
    if (this.checked) {
        recurrenceFields.classList.remove('hidden');
    } else {
        recurrenceFields.classList.add('hidden');
    }
});

// Fonctions pour le modal de validation
function openValidationModal(taskId, taskTitle) {
    document.getElementById('validationModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    
    // Remplir les informations de la tâche
    document.getElementById('validationTaskId').value = taskId;
    document.getElementById('validationTaskTitle').textContent = taskTitle;
    
    // Mettre à jour l'action du formulaire
    document.getElementById('validationForm').action = '{{ path('app_task_validate', {id: '__ID__'}) }}'.replace('__ID__', taskId);
    
    // Reset du formulaire
    document.getElementById('validationForm').reset();
    document.getElementById('validationTaskId').value = taskId; // Remettre l'ID après reset
    resetStarRating();
    
    // Réinitialiser le système d'étoiles
    setTimeout(() => {
        initStarRating();
        document.getElementById('actionsPerformed').focus();
    }, 100);
}

function closeValidationModal() {
    document.getElementById('validationModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
    // Reset du formulaire
    document.getElementById('validationForm').reset();
    resetStarRating();
}

function resetStarRating() {
    const stars = document.querySelectorAll('.star-btn');
    stars.forEach(star => {
        star.classList.remove('text-yellow-400');
        star.classList.add('text-gray-300');
    });
    document.getElementById('clientSatisfactionRating').value = '';
    document.getElementById('ratingText').textContent = '';
}

// Gestion du système d'étoiles
function initStarRating() {
    const stars = document.querySelectorAll('.star-btn');
    const ratingInput = document.getElementById('clientSatisfactionRating');
    const ratingText = document.getElementById('ratingText');
    
    if (!stars.length || !ratingInput || !ratingText) {
        return;
    }
    
    const ratingTexts = {
        1: 'Très insatisfait',
        2: 'Insatisfait', 
        3: 'Neutre',
        4: 'Satisfait',
        5: 'Très satisfait'
    };
    
    // Supprimer les anciens event listeners pour éviter les doublons
    stars.forEach(star => {
        star.replaceWith(star.cloneNode(true));
    });
    
    // Récupérer les nouvelles références après clonage
    const newStars = document.querySelectorAll('.star-btn');
    
    newStars.forEach(star => {
        star.addEventListener('click', function(e) {
            e.preventDefault();
            const rating = parseInt(this.dataset.rating);
            console.log('Étoile cliquée:', rating); // Debug
            
            // Mettre à jour les étoiles
            newStars.forEach((s, index) => {
                if (index < rating) {
                    s.classList.remove('text-gray-300');
                    s.classList.add('text-yellow-400');
                } else {
                    s.classList.remove('text-yellow-400');
                    s.classList.add('text-gray-300');
                }
            });
            
            // Mettre à jour la valeur et le texte
            ratingInput.value = rating;
            ratingText.textContent = ratingTexts[rating];
            console.log('Note sélectionnée:', rating, ratingTexts[rating]); // Debug
        });
        
        // Effet de survol
        star.addEventListener('mouseenter', function() {
            const rating = parseInt(this.dataset.rating);
            newStars.forEach((s, index) => {
                if (index < rating) {
                    s.classList.add('text-yellow-400');
                    s.style.transform = 'scale(1.1)';
                } else {
                    s.classList.remove('text-yellow-400');
                    s.style.transform = 'scale(1)';
                }
            });
        });
        
        star.addEventListener('mouseleave', function() {
            newStars.forEach(s => {
                s.style.transform = 'scale(1)';
            });
        });
    });
    
    // Restaurer l'état des étoiles quand la souris quitte la zone
    const starRating = document.getElementById('starRating');
    if (starRating) {
        starRating.addEventListener('mouseleave', function() {
            const currentRating = parseInt(ratingInput.value) || 0;
            newStars.forEach((s, index) => {
                if (index < currentRating) {
                    s.classList.add('text-yellow-400');
                    s.classList.remove('text-gray-300');
                } else {
                    s.classList.remove('text-yellow-400');
                    s.classList.add('text-gray-300');
                }
            });
        });
    }
}

document.addEventListener('DOMContentLoaded', function() {
    initStarRating();
});

// Fermer le modal de validation en cliquant à l'extérieur
document.getElementById('validationModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeValidationModal();
    }
});

// Fermer le modal de validation avec la touche Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && !document.getElementById('validationModal').classList.contains('hidden')) {
        closeValidationModal();
    }
});

// Gestion de la soumission du formulaire de validation
document.getElementById('validationForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Validation côté client
    const actions = document.getElementById('actionsPerformed').value.trim();
    const rating = document.getElementById('clientSatisfactionRating').value;
    
    if (!actions) {
        // Animation d'erreur pour le champ actions
        const actionsField = document.getElementById('actionsPerformed');
        actionsField.style.border = '2px solid #ef4444';
        actionsField.style.transform = 'translateX(5px)';
        setTimeout(() => {
            actionsField.style.transform = 'translateX(-5px)';
        }, 100);
        setTimeout(() => {
            actionsField.style.transform = 'translateX(0)';
            actionsField.style.border = '';
        }, 200);
        
        alert('Veuillez décrire les actions menées pour l\'exécution de la tâche');
        actionsField.focus();
        return;
    }
    
    if (!rating) {
        // Animation d'erreur pour les étoiles
        const starRating = document.getElementById('starRating');
        starRating.style.transform = 'scale(1.1)';
        starRating.style.filter = 'hue-rotate(320deg)'; // Effet rouge
        setTimeout(() => {
            starRating.style.transform = 'scale(1)';
            starRating.style.filter = '';
        }, 300);
        
        alert('Veuillez donner une note de satisfaction client');
        return;
    }
    
    // Animation de soumission
    const submitBtn = document.getElementById('submitValidationBtn');
    const submitText = document.getElementById('submitText');
    const submitLoader = document.getElementById('submitLoader');
    
    if (submitBtn && submitText && submitLoader) {
        // Désactiver le bouton et afficher le loader
        submitBtn.disabled = true;
        submitText.style.opacity = '0';
        submitLoader.style.opacity = '1';
    }
    
    // Soumettre via AJAX pour gérer la réponse
    const formData = new FormData(this);
    
    fetch(this.action, {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (response.ok) {
            // Succès de la validation
            const taskId = document.getElementById('validationTaskId').value;
            
            // Cocher la case correspondante
            const checkbox = document.getElementById(`task-${taskId}`);
            if (checkbox) {
                checkbox.checked = true;
                
                // Appliquer l'effet visuel
                const taskRow = checkbox.closest('tr');
                const taskContent = taskRow.querySelector('.flex-1');
                
                taskContent.classList.add('task-completed');
                taskRow.classList.add('completed');
            }
            
            // Fermer le modal
            closeValidationModal();
            
            // Notification de succès
            showNotification('Tâche validée avec succès !', 'success');
            
            // Recharger la page après un délai pour voir les changements
            setTimeout(() => {
                window.location.reload();
            }, 1500);
        } else {
            throw new Error('Erreur lors de la validation');
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        showNotification('Erreur lors de la validation', 'error');
    });
});

// Variables globales pour le système d'onglets
let currentTab = 'active';

// Fonction pour changer d'onglet
function showTab(tabName) {
    currentTab = tabName;
    
    // Cacher tous les contenus
    document.getElementById('activeTasksContent').classList.add('hidden');
    document.getElementById('completedTasksContent').classList.add('hidden');
    document.getElementById('recurringTasksContent').classList.add('hidden');
    
    // Afficher le contenu de l'onglet sélectionné
    document.getElementById(tabName + 'TasksContent').classList.remove('hidden');
    
    // Mettre à jour les styles des onglets
    const activeTab = document.getElementById('activeTab');
    const recurringTab = document.getElementById('recurringTab');
    const completedTab = document.getElementById('completedTab');
    
    // Reset des styles
    activeTab.classList.remove('border-blue-500', 'text-blue-600');
    activeTab.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
    
    recurringTab.classList.remove('border-blue-500', 'text-blue-600');
    recurringTab.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
    
    completedTab.classList.remove('border-blue-500', 'text-blue-600');
    completedTab.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
    
    // Masquer tous les filtres spécifiques
    document.getElementById('completedFilters').classList.add('hidden');
    document.getElementById('recurringFilters').classList.add('hidden');
    
    // Appliquer le style actif à l'onglet sélectionné
    if (tabName === 'active') {
        activeTab.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
        activeTab.classList.add('border-blue-500', 'text-blue-600');
    } else if (tabName === 'recurring') {
        recurringTab.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
        recurringTab.classList.add('border-blue-500', 'text-blue-600');
        // Afficher les filtres spécifiques aux tâches récurrentes
        document.getElementById('recurringFilters').classList.remove('hidden');
    } else {
        completedTab.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
        completedTab.classList.add('border-blue-500', 'text-blue-600');
        // Afficher les filtres spécifiques aux tâches terminées
        document.getElementById('completedFilters').classList.remove('hidden');
    }
    
    // Mettre à jour les compteurs
    updateTaskCounts();
    
    // Appliquer les filtres au nouvel onglet
    applyFilters();
}

// Fonction pour mettre à jour les compteurs d'onglets
function updateTaskCounts() {
    const activeRows = document.querySelectorAll('#activeTasksContent .task-row:not(.hidden)');
    const recurringRows = document.querySelectorAll('#recurringTasksContent .task-row:not(.hidden)');
    const completedRows = document.querySelectorAll('#completedTasksContent .task-row:not(.hidden)');
    
    document.getElementById('activeCount').textContent = activeRows.length;
    document.getElementById('recurringCount').textContent = recurringRows.length;
    document.getElementById('completedCount').textContent = completedRows.length;
}

// Fonction pour afficher les détails d'exécution d'une tâche
function showExecutionDetails(taskId) {
    // Cette fonction pourrait ouvrir un modal avec les détails de l'exécution
    // Pour l'instant, on redirige vers la page de détail de la tâche
    window.location.href = '{{ path('app_task_show', {id: '__ID__'}) }}'.replace('__ID__', taskId);
}

// Fonction pour appliquer les filtres
function applyFilters() {
    const priorityFilter = document.getElementById('priorityFilter').value;
    const assigneeFilter = document.getElementById('assigneeFilter').value;
    const periodFilter = document.getElementById('periodFilter') ? document.getElementById('periodFilter').value : '';
    const recurrenceTypeFilter = document.getElementById('recurrenceTypeFilter') ? document.getElementById('recurrenceTypeFilter').value : '';
    
    // Déterminer quel contenu filtrer
    let contentId;
    if (currentTab === 'active') {
        contentId = 'activeTasksContent';
    } else if (currentTab === 'recurring') {
        contentId = 'recurringTasksContent';
    } else {
        contentId = 'completedTasksContent';
    }
    
    const rows = document.querySelectorAll(`#${contentId} .task-row`);
    
    rows.forEach(row => {
        let showRow = true;
        
        // Filtre par priorité
        if (priorityFilter && row.dataset.priority !== priorityFilter) {
            showRow = false;
        }
        
        // Filtre par assigné
        if (assigneeFilter && row.dataset.assignee !== assigneeFilter) {
            showRow = false;
        }
        
        // Filtre par type de récurrence (uniquement pour les tâches récurrentes)
        if (currentTab === 'recurring' && recurrenceTypeFilter && row.dataset.recurrenceType !== recurrenceTypeFilter) {
            showRow = false;
        }
        
        // Filtre par période (uniquement pour les tâches terminées)
        if (currentTab === 'completed' && periodFilter && row.dataset.completed) {
            const completedDate = new Date(row.dataset.completed);
            const now = new Date();
            let showByPeriod = false;
            
            switch (periodFilter) {
                case 'today':
                    showByPeriod = completedDate.toDateString() === now.toDateString();
                    break;
                case 'week':
                    const weekStart = new Date(now);
                    weekStart.setDate(now.getDate() - now.getDay());
                    showByPeriod = completedDate >= weekStart;
                    break;
                case 'month':
                    showByPeriod = completedDate.getMonth() === now.getMonth() && 
                                   completedDate.getFullYear() === now.getFullYear();
                    break;
                case 'quarter':
                    const currentQuarter = Math.floor(now.getMonth() / 3);
                    const completedQuarter = Math.floor(completedDate.getMonth() / 3);
                    showByPeriod = completedQuarter === currentQuarter && 
                                   completedDate.getFullYear() === now.getFullYear();
                    break;
                default:
                    showByPeriod = true;
            }
            
            if (!showByPeriod) {
                showRow = false;
            }
        }
        
        // Afficher ou masquer la ligne
        if (showRow) {
            row.classList.remove('hidden');
        } else {
            row.classList.add('hidden');
        }
    });
    
    // Mettre à jour les compteurs après filtrage
    updateTaskCounts();
}

// Initialisation au chargement de la page
document.addEventListener('DOMContentLoaded', function() {
    // Afficher l'onglet actif par défaut
    showTab('active');
    
    // Ajouter les événements pour les filtres
    document.getElementById('priorityFilter').addEventListener('change', applyFilters);
    document.getElementById('assigneeFilter').addEventListener('change', applyFilters);
    
    if (document.getElementById('periodFilter')) {
        document.getElementById('periodFilter').addEventListener('change', applyFilters);
    }
    
    if (document.getElementById('recurrenceTypeFilter')) {
        document.getElementById('recurrenceTypeFilter').addEventListener('change', applyFilters);
    }
    
    // Appliquer les styles aux tâches déjà terminées
    initializeCompletedTasks();
    
    // Calculer les compteurs initiaux
    updateTaskCounts();
});

// Fonction pour initialiser l'affichage des tâches terminées
function initializeCompletedTasks() {
    const checkboxes = document.querySelectorAll('.task-checkbox:checked');
    checkboxes.forEach(checkbox => {
        const taskRow = checkbox.closest('tr');
        const taskContent = taskRow.querySelector('.flex-1');
        
        if (taskContent) {
            taskContent.classList.add('task-completed');
            taskRow.classList.add('completed');
        }
    });
}

// Fonction pour gérer la validation des tâches via checkbox
function toggleTaskCompletion(taskId, isCompleted) {
    if (isCompleted) {
        // Si l'utilisateur coche la case, ouvrir le modal de validation
        // D'abord, décocher temporairement la case
        document.getElementById(`task-${taskId}`).checked = false;
        
        // Récupérer le titre de la tâche
        const taskRow = document.querySelector(`#task-${taskId}`).closest('tr');
        const taskTitle = taskRow.querySelector('h4').textContent.trim();
        
        // Ouvrir le modal de validation
        openValidationModal(taskId, taskTitle);
    } else {
        // Si l'utilisateur décoche la case, remettre en cours (validation simple)
        const formData = new FormData();
        formData.append('completed', 'false');
        formData.append('_token', '{{ csrf_token('toggle') }}');
        
        fetch(`/tasks/${taskId}/quick-complete`, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const taskRow = document.querySelector(`#task-${taskId}`).closest('tr');
                const taskContent = taskRow.querySelector('.flex-1');
                
                taskContent.classList.remove('task-completed');
                taskRow.classList.remove('completed');
                showNotification('Tâche remise en cours', 'info');
            } else {
                // Annuler le changement de checkbox en cas d'erreur
                document.getElementById(`task-${taskId}`).checked = true;
                showNotification('Erreur lors de la mise à jour', 'error');
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
            // Annuler le changement de checkbox en cas d'erreur
            document.getElementById(`task-${taskId}`).checked = true;
            showNotification('Erreur de connexion', 'error');
        });
    }
}

// Fonction pour afficher les notifications
function showNotification(message, type = 'info') {
    // Créer la notification
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-lg text-white shadow-lg transition-all duration-300 transform translate-x-full ${
        type === 'success' ? 'bg-green-500' : 
        type === 'error' ? 'bg-red-500' : 
        'bg-blue-500'
    }`;
    notification.innerHTML = `
        <div class="flex items-center">
            <i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'times' : 'info'} mr-2"></i>
            ${message}
        </div>
    `;
    
    document.body.appendChild(notification);
    
    // Animation d'entrée
    setTimeout(() => {
        notification.classList.remove('translate-x-full');
    }, 100);
    
    // Suppression automatique après 3 secondes
    setTimeout(() => {
        notification.classList.add('translate-x-full');
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 300);
    }, 3000);
}
</script>
{% endblock %}