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

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

{% block page_title %}Détails de 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_index') }}" class="text-gray-600 hover:text-gray-800">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour aux tâches
            </a>
        </div>
        <div class="flex items-center space-x-3">
            <a href="{{ path('app_task_index') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm">
                <i class="fas fa-edit mr-2"></i>
                Modifier
            </a>
            {% if not task.isCompleted %}
                <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm">
                    <i class="fas fa-check mr-2"></i>
                    Marquer terminée
                </button>
            {% endif %}
        </div>
    </div>

    <!-- Informations principales -->
    <div class="bg-white rounded-lg border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <h1 class="text-2xl font-bold text-gray-800 mb-2">{{ task.title }}</h1>
                    <div class="flex items-center space-x-4">
                        <span class="priority-{{ task.priority }} px-3 py-1 rounded-full text-sm font-medium">
                            {{ task.priorityLabel }}
                        </span>
                        <span class="status-{{ task.status }} px-3 py-1 rounded-full text-sm font-medium">
                            {{ task.statusLabel }}
                        </span>
                        {% if task.isOverdue %}
                            <span class="bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-medium">
                                <i class="fas fa-exclamation-triangle mr-1"></i>
                                En retard
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        
        {% if task.description %}
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800 mb-3">Description</h3>
                <p class="text-gray-600 leading-relaxed">{{ task.description|nl2br }}</p>
            </div>
        {% endif %}

        <!-- Détails de la tâche -->
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Assignation -->
                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-2">Assigné à</h4>
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
                            <span class="text-sm font-medium text-white">
                                {{ task.assignedTo.firstName|slice(0,1) }}{{ task.assignedTo.lastName|slice(0,1) }}
                            </span>
                        </div>
                        <div>
                            <p class="font-medium text-gray-800">{{ task.assignedTo.firstName }} {{ task.assignedTo.lastName }}</p>
                            <p class="text-sm text-gray-500">{{ task.assignedTo.specialty }}</p>
                        </div>
                    </div>
                </div>

                <!-- Échéance -->
                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-2">Échéance</h4>
                    {% if task.dueDate %}
                        <p class="text-gray-800 {{ task.isOverdue ? 'text-red-600 font-medium' : '' }}">
                            {{ task.dueDate|date('d/m/Y à H:i') }}
                            {% if task.isOverdue %}
                                <i class="fas fa-exclamation-triangle ml-1"></i>
                            {% endif %}
                        </p>
                    {% else %}
                        <p class="text-gray-500">Aucune échéance définie</p>
                    {% endif %}
                </div>

                <!-- Projet -->
                {% if task.project %}
                    <div>
                        <h4 class="text-sm font-medium text-gray-500 mb-2">Projet</h4>
                        <div class="flex items-center">
                            <i class="fas fa-project-diagram text-blue-600 mr-2"></i>
                            <span class="text-gray-800">{{ task.project.name }}</span>
                        </div>
                    </div>
                {% endif %}

                <!-- Catégorie -->
                {% if task.category %}
                    <div>
                        <h4 class="text-sm font-medium text-gray-500 mb-2">Catégorie</h4>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium" 
                              style="background-color: {{ task.category.color }}20; color: {{ task.category.color }};">
                            {{ task.category.name }}
                        </span>
                    </div>
                {% endif %}

                <!-- Note de satisfaction -->
                {% if task.satisfactionRating %}
                    <div>
                        <h4 class="text-sm font-medium text-gray-500 mb-2">Note de satisfaction</h4>
                        <div class="flex items-center">
                            {% for i in 1..5 %}
                                <i class="fas fa-star text-sm {{ i <= task.satisfactionRating ? 'text-yellow-400' : 'text-gray-300' }} mr-1"></i>
                            {% endfor %}
                            <span class="text-sm font-medium text-gray-800 ml-2">{{ task.satisfactionRating }}/5</span>
                        </div>
                    </div>
                {% endif %}

                <!-- Dates -->
                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-2">Créée le</h4>
                    <p class="text-gray-800">{{ task.createdAt|date('d/m/Y à H:i') }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Activité et commentaires (simulation) -->
    <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-comments text-blue-600 mr-2"></i>
                Activité et commentaires
            </h3>
        </div>
        <div class="p-6">
            <div class="space-y-6">
                <!-- Exemple d'activité -->
                <div class="flex space-x-3">
                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                        <i class="fas fa-plus text-white text-xs"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center space-x-2">
                            <span class="font-medium text-gray-800">{{ task.assignedTo.firstName }} {{ task.assignedTo.lastName }}</span>
                            <span class="text-gray-500 text-sm">a créé cette tâche</span>
                            <span class="text-gray-400 text-sm">{{ task.createdAt|date('d/m/Y à H:i') }}</span>
                        </div>
                    </div>
                </div>

                {% if task.updatedAt != task.createdAt %}
                    <div class="flex space-x-3">
                        <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                            <i class="fas fa-edit text-white text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center space-x-2">
                                <span class="font-medium text-gray-800">{{ task.assignedTo.firstName }} {{ task.assignedTo.lastName }}</span>
                                <span class="text-gray-500 text-sm">a modifié cette tâche</span>
                                <span class="text-gray-400 text-sm">{{ task.updatedAt|date('d/m/Y à H:i') }}</span>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>

            <!-- Formulaire de commentaire -->
            <div class="mt-6 pt-6 border-t border-gray-200">
                <div class="flex space-x-3">
                    <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-gray-600 text-xs"></i>
                    </div>
                    <div class="flex-1">
                        <textarea rows="3" placeholder="Ajouter un commentaire..." 
                                  class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500"></textarea>
                        <div class="mt-2 flex justify-end">
                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm">
                                <i class="fas fa-comment mr-2"></i>
                                Commenter
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}