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

{% block title %}Vue Profil - {{ profileType|title }}{% endblock %}

{% block page_title %}Vue Détaillée - {{ profileType|title }}{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- En-tête du profil -->
    <div class="bg-gradient-to-r from-gray-600 to-gray-800 rounded-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold mb-2">
                    <i class="fas fa-user-circle mr-3"></i>
                    {{ profileType|title }}
                </h1>
                <p class="text-gray-100">Vue détaillée des activités et responsabilités</p>
            </div>
            <div class="text-right">
                <a href="{{ path('app_dashboard') }}" class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white px-4 py-2 rounded-lg transition duration-200">
                    <i class="fas fa-arrow-left mr-2"></i>Retour au dashboard
                </a>
            </div>
        </div>
    </div>

    <!-- Statistiques détaillées -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <div class="flex items-center">
                <div class="p-4 rounded-full bg-blue-100 text-blue-600">
                    <i class="fas fa-tasks text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Total tâches</p>
                    <p class="text-3xl font-bold text-gray-900">{{ profileTaskCount }}</p>
                    <p class="text-xs text-gray-500">Assignées au profil</p>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-lg">
            <div class="flex items-center">
                <div class="p-4 rounded-full bg-green-100 text-green-600">
                    <i class="fas fa-check-circle text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Tâches terminées</p>
                    <p class="text-3xl font-bold text-gray-900">{{ profileCompletedTasks }}</p>
                    <p class="text-xs text-gray-500">{{ profileTaskCount > 0 ? ((profileCompletedTasks / profileTaskCount) * 100)|round(1) : 0 }}% de réussite</p>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-lg">
            <div class="flex items-center">
                <div class="p-4 rounded-full bg-purple-100 text-purple-600">
                    <i class="fas fa-users text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Équipe</p>
                    <p class="text-3xl font-bold text-gray-900">{{ profile.users|length }}</p>
                    <p class="text-xs text-gray-500">Personnes assignées</p>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-lg">
            <div class="flex items-center">
                <div class="p-4 rounded-full bg-yellow-100 text-yellow-600">
                    <i class="fas fa-clock text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">En cours</p>
                    <p class="text-3xl font-bold text-gray-900">{{ profileTaskCount - profileCompletedTasks }}</p>
                    <p class="text-xs text-gray-500">Tâches actives</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Contenu principal -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Tâches du profil -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow-lg">
                <div class="p-6 border-b border-gray-200">
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-semibold text-gray-900 flex items-center">
                            <i class="fas fa-list text-blue-500 mr-3"></i>
                            Tâches assignées
                        </h2>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-full">Toutes</button>
                            <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-full">En cours</button>
                            <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-full">Terminées</button>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    {% if profileTasks is empty %}
                        <div class="text-center py-12 text-gray-500">
                            <i class="fas fa-clipboard text-6xl mb-4 opacity-50"></i>
                            <h3 class="text-lg font-medium mb-2">Aucune tâche assignée</h3>
                            <p>Les tâches assignées à ce profil apparaîtront ici</p>
                        </div>
                    {% else %}
                        <div class="space-y-4">
                            {% for task in profileTasks %}
                                <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-200">
                                    <div class="flex items-start justify-between">
                                        <div class="flex-1">
                                            <div class="flex items-center space-x-3 mb-2">
                                                <h3 class="font-semibold text-gray-900">{{ task.title }}</h3>
                                                <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>
                                            </div>
                                            
                                            {% if task.description %}
                                                <p class="text-gray-600 text-sm mb-3">{{ task.description|slice(0, 150) }}{% if task.description|length > 150 %}...{% endif %}</p>
                                            {% endif %}
                                            
                                            <div class="flex items-center space-x-4 text-xs text-gray-500">
                                                {% if task.assignedTo %}
                                                    <span><i class="fas fa-user mr-1"></i>{{ task.assignedTo.fullName }}</span>
                                                {% endif %}
                                                {% if task.dueDate %}
                                                    <span class="{{ task.isOverdue ? 'text-red-600 font-semibold' : '' }}">
                                                        <i class="fas fa-calendar mr-1"></i>{{ task.dueDate|date('d/m/Y H:i') }}
                                                    </span>
                                                {% endif %}
                                                {% if task.category %}
                                                    <span><i class="fas fa-tag mr-1"></i>{{ task.category.name }}</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center space-x-2 ml-4">
                                            <a href="{{ path('app_task_show', {id: task.id}) }}" 
                                               class="p-2 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition duration-200">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ path('app_task_edit', {id: task.id}) }}" 
                                               class="p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-lg transition duration-200">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        
                        <div class="mt-6 text-center">
                            <a href="{{ path('app_task_index') }}" class="text-blue-600 hover:text-blue-800 font-medium">
                                Voir toutes les tâches <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Informations du profil -->
            <div class="bg-white rounded-lg shadow-lg">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                        Informations du profil
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="text-sm font-medium text-gray-500">Type de profil</label>
                        <p class="text-gray-900">{{ profile.profileType }}</p>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-500">Utilisateurs assignés</label>
                        <div class="mt-2 space-y-2">
                            {% for user in profile.users %}
                                <div class="flex items-center space-x-2">
                                    <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                                        <span class="text-xs font-medium text-gray-600">
                                            {{ user.firstName|slice(0,1) }}{{ user.lastName|slice(0,1) }}
                                        </span>
                                    </div>
                                    <span class="text-sm text-gray-900">{{ user.fullName }}</span>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Actions rapides -->
            <div class="bg-white rounded-lg shadow-lg">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-bolt text-yellow-500 mr-2"></i>
                        Actions rapides
                    </h3>
                </div>
                <div class="p-6 space-y-3">
                    <a href="{{ path('app_task_new') }}" 
                       class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg text-center transition duration-200">
                        <i class="fas fa-plus mr-2"></i>Nouvelle tâche
                    </a>
                    <a href="{{ path('app_settings_index') }}" 
                       class="block w-full bg-gray-600 hover:bg-gray-700 text-white font-medium py-3 px-4 rounded-lg text-center transition duration-200">
                        <i class="fas fa-cog mr-2"></i>Gérer le profil
                    </a>
                </div>
            </div>

            <!-- Statistiques -->
            <div class="bg-white rounded-lg shadow-lg">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-chart-bar text-green-500 mr-2"></i>
                        Statistiques
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Taux de completion</span>
                        <span class="font-semibold text-green-600">{{ profileTaskCount > 0 ? ((profileCompletedTasks / profileTaskCount) * 100)|round(1) : 0 }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-green-600 h-2 rounded-full" style="width: {{ profileTaskCount > 0 ? ((profileCompletedTasks / profileTaskCount) * 100)|round(1) : 0 }}%"></div>
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Tâches actives</span>
                        <span class="font-semibold text-blue-600">{{ profileTaskCount - profileCompletedTasks }}</span>
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Équipe</span>
                        <span class="font-semibold text-purple-600">{{ profile.users|length }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}