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

{% block body %}
<div class="flex flex-row items-center w-full p-3 border-b text-white bg-bungalow-yellow">
        <div class="flex flex-row w-full">
            <p class="text-white text-lg">
                <i class="{{ icon.get('chart') }}" style="color: #FFFF;"></i>
                Gantt Timeline
            </p>
        </div>
    </div>
<div class="max-h-[90vh] max-w-screen overflow-y-auto">
    <div class="container h-full mx-auto px-4 py-6">
        <!-- En-tête avec statistiques -->
        <div>
            <div class="grid grid-cols-5 gap-4">
                {# <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <div class="flex items-center">
                        <div class="p-2 bg-blue-100 rounded-lg">
                            <i class="fas fa-tasks text-blue-600"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-600">Total tâches</p>
                            <p class="text-lg font-semibold text-gray-900" id="total-tasks">0</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <div class="flex items-center">
                        <div class="p-2 bg-green-100 rounded-lg">
                            <i class="fas fa-check text-green-600"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-600">Terminées</p>
                            <p class="text-lg font-semibold text-gray-900" id="completed-tasks">0</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <div class="flex items-center">
                        <div class="p-2 bg-yellow-100 rounded-lg">
                            <i class="fas fa-clock text-yellow-600"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-600">En cours</p>
                            <p class="text-lg font-semibold text-gray-900" id="in-progress-tasks">0</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <div class="flex items-center">
                        <div class="p-2 bg-red-100 rounded-lg">
                            <i class="fas fa-exclamation-triangle text-red-600"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-600">En retard</p>
                            <p class="text-lg font-semibold text-gray-900" id="delayed-tasks">0</p>
                        </div>
                    </div>
                </div> #}

                {# <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <div class="flex items-center">
                        <div class="p-2 bg-purple-100 rounded-lg">
                            <i class="fas fa-percentage text-purple-600"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-600">Progression</p>
                            <p class="text-lg font-semibold text-gray-900" id="completion-rate">0%</p>
                        </div>
                    </div>
                </div> #}
            </div>
        </div>

    <!-- Filtres et recherche -->
    {# <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex gap-4">
            <div class="flex-1">
                <label for="search-tasks" class="block text-sm font-medium text-gray-700 mb-1">Rechercher</label>
                <input type="text" id="search-tasks" placeholder="Rechercher une tâche..." 
                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div class="w-48">
                <label for="status-filter" class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                <select id="status-filter" 
                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Tous les statuts</option>
                    <option value="pending">En attente</option>
                    <option value="in_progress">En cours</option>
                    <option value="completed">Terminé</option>
                    <option value="delayed">En retard</option>
                </select>
            </div>

            <div class="w-48">
                <label for="date-filter" class="block text-sm font-medium text-gray-700 mb-1">Période</label>
                <select id="date-filter" 
                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Toutes les périodes</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>
    </div> #}

    <!-- Container principal du Gantt -->
    <div class="bg-white h-full rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div id="gantt-container" class="max-h-[75vh] min-h-[0px]"></div>
    </div>
</div>

<!-- Modal pour ajouter/modifier une tâche -->
{# <div id="task-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
            <div class="flex items-center justify-between p-6 border-b">
                <h3 class="text-lg font-semibold text-gray-900" id="modal-title">Ajouter une tâche</h3>
                <button id="close-task-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="task-form" class="p-6">
                <div class="space-y-4">
                    <div>
                        <label for="task-name" class="block text-sm font-medium text-gray-700 mb-1">Nom de la tâche</label>
                        <input type="text" id="task-name" name="label" required 
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    
                    <div>
                        <label for="task-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea id="task-description" name="description" rows="2" 
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="task-start-date" class="block text-sm font-medium text-gray-700 mb-1">Date de début</label>
                            <input type="date" id="task-start-date" name="start" required 
                                   class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        
                        <div>
                            <label for="task-end-date" class="block text-sm font-medium text-gray-700 mb-1">Date de fin</label>
                            <input type="date" id="task-end-date" name="end" required 
                                   class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                    
                    <div>
                        <label for="task-progress" class="block text-sm font-medium text-gray-700 mb-1">Progression (%)</label>
                        <input type="range" id="task-progress" name="progress" min="0" max="100" value="0" 
                               class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                        <span id="progress-value" class="text-sm text-gray-600">0%</span>
                    </div>
                    
                    <div>
                        <label for="task-type" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
                        <select id="task-type" name="type" 
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="task">Tâche</option>
                            <option value="group">Groupe</option>
                            <option value="subgroup">Sous-groupe</option>
                        </select>
                    </div>

                    <div id="group-parent-container" class="hidden">
                        <label for="task-group" class="block text-sm font-medium text-gray-700 mb-1">Groupe parent</label>
                        <select id="task-group" name="group" 
                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Aucun groupe parent</option>
                        </select>
                    </div>

                    <div>
                        <label for="task-color" class="block text-sm font-medium text-gray-700 mb-1">Couleur</label>
                        <input type="color" id="task-color" name="color" value="#4caf50"
                               class="w-full h-10 border border-gray-300 rounded-md cursor-pointer">
                    </div>
                </div>
                
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" id="cancel-task" 
                            class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors">
                        Annuler
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                        Sauvegarder
                    </button>
                </div>
            </form>
        </div>
    </div>
</div> #}

<!-- Modal de confirmation de suppression -->
{# <div id="delete-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
            <div class="p-6">
                <div class="flex items-center mb-4">
                    <div class="p-2 bg-red-100 rounded-lg mr-3">
                        <i class="fas fa-exclamation-triangle text-red-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900">Confirmer la suppression</h3>
                </div>
                <p class="text-base text-gray-600 mb-6">Êtes-vous sûr de vouloir supprimer cette tâche ? Cette action est irréversible.</p>
                
                <div class="flex justify-end gap-3">
                    <button id="cancel-delete" 
                            class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors">
                        Annuler
                    </button>
                    <button id="confirm-delete" 
                            class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors">
                        Supprimer
                    </button>
                </div>
            </div>
        </div>
    </div>
</div> #}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('gantt_main') }}
{% endblock %}