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

{% block title %}Modifier {{ task.title }} - Clinique Les Genêts{% endblock %}

{% block page_title %}Modifier la tâche{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Header avec navigation -->
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <a href="{{ path('app_task_show', {id: task.id}) }}" class="text-gray-600 hover:text-gray-800">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour aux détails
            </a>
            <h2 class="text-xl font-semibold text-gray-800">Modifier la tâche</h2>
        </div>
        <div class="flex items-center space-x-3">
            <form method="post" action="{{ path('app_task_delete', {id: task.id}) }}" style="display: inline">
                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ task.id) }}">
                <button type="submit" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette tâche ?')" 
                        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>
            </form>
        </div>
    </div>

    <!-- Informations actuelles -->
    <div class="bg-blue-50 rounded-lg border border-blue-200 p-4">
        <div class="flex items-center">
            <i class="fas fa-info-circle text-blue-600 mr-2"></i>
            <div class="flex-1">
                <h4 class="font-medium text-blue-800">{{ task.title }}</h4>
                <div class="flex items-center space-x-4 mt-1">
                    <span class="priority-{{ task.priority }} px-2 py-1 rounded-full text-xs font-medium">
                        {{ task.priorityLabel }}
                    </span>
                    <span class="status-{{ task.status }} px-2 py-1 rounded-full text-xs font-medium">
                        {{ task.statusLabel }}
                    </span>
                    <span class="text-blue-600 text-sm">Créée le {{ task.createdAt|date('d/m/Y') }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Formulaire de modification -->
    <div class="bg-white rounded-lg border border-gray-200">
        <div class="p-6 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 les informations
            </h3>
        </div>
        <div class="p-6">
            {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}
                
                <!-- Titre et description -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="lg:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form_label(form.title) }}
                            <span class="text-red-500">*</span>
                        </label>
                        {{ form_widget(form.title, {'attr': {'class': 'w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500'}}) }}
                        {{ form_errors(form.title) }}
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        {{ form_label(form.description) }}
                    </label>
                    {{ form_widget(form.description, {'attr': {'class': 'w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500', 'rows': '4'}}) }}
                    {{ form_errors(form.description) }}
                </div>

                <!-- Assignation et projet -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form_label(form.assignedTo) }}
                            <span class="text-red-500">*</span>
                        </label>
                        {{ form_widget(form.assignedTo, {'attr': {'class': 'w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500'}}) }}
                        {{ form_errors(form.assignedTo) }}
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form_label(form.project) }}
                        </label>
                        {{ form_widget(form.project, {'attr': {'class': 'w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500'}}) }}
                        {{ form_errors(form.project) }}
                    </div>
                </div>

                <!-- Priorité et statut -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form_label(form.priority) }}
                            <span class="text-red-500">*</span>
                        </label>
                        {{ form_widget(form.priority, {'attr': {'class': 'w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500'}}) }}
                        {{ form_errors(form.priority) }}
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form_label(form.status) }}
                        </label>
                        {{ form_widget(form.status, {'attr': {'class': 'w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500'}}) }}
                        {{ form_errors(form.status) }}
                    </div>
                </div>

                <!-- Catégorie et échéance -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form_label(form.category) }}
                        </label>
                        {{ form_widget(form.category, {'attr': {'class': 'w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500'}}) }}
                        {{ form_errors(form.category) }}
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{ form_label(form.dueDate) }}
                        </label>
                        {{ form_widget(form.dueDate, {'attr': {'class': 'w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500'}}) }}
                        {{ form_errors(form.dueDate) }}
                    </div>
                </div>

                <!-- Notes de completion -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        {{ form_label(form.completionNotes) }}
                    </label>
                    {{ form_widget(form.completionNotes, {'attr': {'class': 'w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500'}}) }}
                    {{ form_errors(form.completionNotes) }}
                </div>

                <!-- Note de satisfaction -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        {{ form_label(form.satisfactionRating) }}
                    </label>
                    {{ form_widget(form.satisfactionRating, {'attr': {'class': 'w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500'}}) }}
                    {{ form_errors(form.satisfactionRating) }}
                </div>

                <!-- Actions -->
                <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                    <a href="{{ path('app_task_show', {id: task.id}) }}" 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
                    </a>
                    
                    <div class="flex items-center space-x-3">
                        {% if not task.isCompleted %}
                            <button type="submit" name="mark_completed" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg text-sm">
                                <i class="fas fa-check mr-2"></i>
                                Marquer terminée
                            </button>
                        {% endif %}
                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg text-sm">
                            <i class="fas fa-save mr-2"></i>
                            Sauvegarder
                        </button>
                    </div>
                </div>

            {{ form_end(form) }}
        </div>
    </div>

    <!-- Historique des modifications -->
    <div class="bg-white rounded-lg border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                <i class="fas fa-history text-gray-600 mr-2"></i>
                Historique des modifications
            </h3>
        </div>
        <div class="p-6">
            <div class="space-y-4">
                <div class="flex items-center space-x-3 text-sm">
                    <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                    <span class="text-gray-500">Créée le {{ task.createdAt|date('d/m/Y à H:i') }}</span>
                </div>
                {% if task.updatedAt != task.createdAt %}
                    <div class="flex items-center space-x-3 text-sm">
                        <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
                        <span class="text-gray-500">Dernière modification le {{ task.updatedAt|date('d/m/Y à H:i') }}</span>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% endblock %}