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

{% block title %}Nouvelle Tâche - Clinique Les Genêts{% endblock %}

{% block page_title %}Nouvelle 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>
            <h2 class="text-xl font-semibold text-gray-800">Créer une nouvelle tâche</h2>
        </div>
    </div>

    <!-- Formulaire de création -->
    <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-plus text-blue-600 mr-2"></i>
                Informations de la tâche
            </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', 'placeholder': 'Entrez le titre de la tâche...'}}) }}
                        {{ 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', 'placeholder': 'Description détaillée de la tâche...'}}) }}
                    {{ 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', 'placeholder': 'Notes ou instructions spéciales...'}}) }}
                    {{ 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', 'placeholder': 'Note de 1 à 5'}}) }}
                    {{ 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_index') }}" 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">
                        <button type="submit" name="save_and_new" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg text-sm">
                            <i class="fas fa-plus mr-2"></i>
                            Sauvegarder et créer une autre
                        </button>
                        <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>
                            Créer la tâche
                        </button>
                    </div>
                </div>

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

    <!-- Aide contextuelle -->
    <div class="bg-blue-50 rounded-lg border border-blue-200 p-6">
        <h3 class="text-lg font-semibold text-blue-800 mb-4 flex items-center">
            <i class="fas fa-info-circle mr-2"></i>
            Conseils pour créer une tâche
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-700">
            <div>
                <h4 class="font-medium mb-2">Titre efficace</h4>
                <ul class="space-y-1">
                    <li>• Soyez précis et concis</li>
                    <li>• Utilisez un verbe d'action</li>
                    <li>• Exemple: "Réviser protocole hygiène"</li>
                </ul>
            </div>
            <div>
                <h4 class="font-medium mb-2">Priorité</h4>
                <ul class="space-y-1">
                    <li>• <span class="font-medium text-red-600">Urgente:</span> À faire immédiatement</li>
                    <li>• <span class="font-medium text-orange-600">Haute:</span> Important, dans les 24h</li>
                    <li>• <span class="font-medium text-yellow-600">Moyenne:</span> Cette semaine</li>
                    <li>• <span class="font-medium text-green-600">Faible:</span> Quand possible</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-focus sur le champ titre
document.addEventListener('DOMContentLoaded', function() {
    const titleField = document.querySelector('input[name*="[title]"]');
    if (titleField) {
        titleField.focus();
    }
});
</script>
{% endblock %}