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

{% block title %}{{ task.id ? 'Modifier la tâche' : 'Nouvelle tâche' }}{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-tasks mr-2"></i>
                        {{ task.id ? 'Modifier la tâche' : 'Nouvelle tâche' }}
                    </h3>
                </div>
                <div class="card-body">
                    <form id="taskForm" method="post" action="{{ task.id ? path('app_task_edit', {id: task.id}) : path('app_task_new') }}">
                        <div class="row">
                            <!-- Informations générales -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="title" class="required">Titre</label>
                                    <input type="text" id="title" name="title" class="form-control" 
                                           value="{{ task.title }}" required>
                                </div>

                                <div class="form-group">
                                    <label for="description">Description</label>
                                    <textarea id="description" name="description" class="form-control" rows="3">{{ task.description }}</textarea>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="status" class="required">Statut</label>
                                            <select id="status" name="status" class="form-control" required>
                                                <option value="todo" {{ task.status == 'todo' ? 'selected' : '' }}>À faire</option>
                                                <option value="in_progress" {{ task.status == 'in_progress' ? 'selected' : '' }}>En cours</option>
                                                <option value="review" {{ task.status == 'review' ? 'selected' : '' }}>En révision</option>
                                                <option value="completed" {{ task.status == 'completed' ? 'selected' : '' }}>Terminé</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="priority" class="required">Priorité</label>
                                            <select id="priority" name="priority" class="form-control" required>
                                                <option value="low" {{ task.priority == 'low' ? 'selected' : '' }}>Faible</option>
                                                <option value="medium" {{ task.priority == 'medium' ? 'selected' : '' }}>Moyenne</option>
                                                <option value="high" {{ task.priority == 'high' ? 'selected' : '' }}>Haute</option>
                                                <option value="urgent" {{ task.priority == 'urgent' ? 'selected' : '' }}>Urgente</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="dueDate">Date d'échéance</label>
                                    <input type="datetime-local" id="dueDate" name="dueDate" class="form-control"
                                           value="{{ task.dueDate ? task.dueDate|date('Y-m-d\\TH:i') : '' }}">
                                </div>
                            </div>

                            <!-- Assignation et catégorisation -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="assignedTo">Assigné à</label>
                                    <select id="assignedTo" name="assignedTo" class="form-control">
                                        <option value="">Sélectionner un utilisateur</option>
                                        {% for user in users|default([]) %}
                                            <option value="{{ user.id }}" 
                                                    {{ task.assignedTo and task.assignedTo.id == user.id ? 'selected' : '' }}>
                                                {{ user.fullName }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="category">Catégorie</label>
                                    <select id="category" name="category" class="form-control">
                                        <option value="">Sélectionner une catégorie</option>
                                        {% for category in categories|default([]) %}
                                            <option value="{{ category.id }}" 
                                                    {{ task.category and task.category.id == category.id ? 'selected' : '' }}>
                                                {{ category.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="subCategory">Sous-catégorie</label>
                                    <select id="subCategory" name="subCategory" class="form-control">
                                        <option value="">Sélectionner une sous-catégorie</option>
                                        {% if task.subCategory %}
                                            <option value="{{ task.subCategory.id }}" selected>{{ task.subCategory.name }}</option>
                                        {% endif %}
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="project">Projet</label>
                                    <select id="project" name="project" class="form-control">
                                        <option value="">Sélectionner un projet</option>
                                        {% for project in projects|default([]) %}
                                            <option value="{{ project.id }}" 
                                                    {{ task.project and task.project.id == project.id ? 'selected' : '' }}>
                                                {{ project.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Profils et sous-profils -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="profile">Profil principal</label>
                                    <select id="profile" name="profile" class="form-control">
                                        <option value="">Sélectionner un profil</option>
                                        {% for profile in profiles|default([]) %}
                                            <option value="{{ profile.id }}" 
                                                    {{ task.profile and task.profile.id == profile.id ? 'selected' : '' }}>
                                                {{ profile.profileType }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="subProfiles">Sous-profils</label>
                                    <select id="subProfiles" name="subProfiles[]" class="form-control" multiple>
                                        <option value="">Sélectionner des sous-profils</option>
                                        {% for subProfile in task.subProfiles %}
                                            <option value="{{ subProfile.id }}" selected>{{ subProfile.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <small class="form-text text-muted">Maintenez Ctrl pour sélectionner plusieurs sous-profils</small>
                                </div>
                            </div>
                        </div>

                        <!-- Récurrence -->
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="isRecurring" name="isRecurring" 
                                               {{ task.isRecurring ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="isRecurring">Tâche récurrente</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="recurrenceOptions" class="row" style="{{ not task.isRecurring ? 'display: none;' : '' }}">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="recurrenceType">Type de récurrence</label>
                                    <select id="recurrenceType" name="recurrenceType" class="form-control">
                                        <option value="daily" {{ task.recurrenceType == 'daily' ? 'selected' : '' }}>Quotidienne</option>
                                        <option value="weekly" {{ task.recurrenceType == 'weekly' ? 'selected' : '' }}>Hebdomadaire</option>
                                        <option value="monthly" {{ task.recurrenceType == 'monthly' ? 'selected' : '' }}>Mensuelle</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="recurrenceInterval">Intervalle</label>
                                    <input type="number" id="recurrenceInterval" name="recurrenceInterval" 
                                           class="form-control" min="1" value="{{ task.recurrenceInterval|default(1) }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="recurrenceEndDate">Fin de récurrence</label>
                                    <input type="date" id="recurrenceEndDate" name="recurrenceEndDate" class="form-control"
                                           value="{{ task.recurrenceEndDate ? task.recurrenceEndDate|date('Y-m-d') : '' }}">
                                </div>
                            </div>
                        </div>

                        <!-- Informations supplémentaires -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="estimatedTime">Temps estimé (minutes)</label>
                                    <input type="number" id="estimatedTime" name="estimatedTime" 
                                           class="form-control" min="0" value="{{ task.estimatedTime }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="notes">Notes</label>
                            <textarea id="notes" name="notes" class="form-control" rows="3">{{ task.notes }}</textarea>
                        </div>

                        <!-- Boutons d'action -->
                        <div class="form-group text-right">
                            <a href="{{ path('app_task_index') }}" class="btn btn-secondary mr-2">
                                <i class="fas fa-arrow-left mr-1"></i>Retour
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save mr-1"></i>
                                {{ task.id ? 'Modifier' : 'Créer' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const categorySelect = document.getElementById('category');
    const subCategorySelect = document.getElementById('subCategory');
    const profileSelect = document.getElementById('profile');
    const subProfilesSelect = document.getElementById('subProfiles');
    const isRecurringCheckbox = document.getElementById('isRecurring');
    const recurrenceOptions = document.getElementById('recurrenceOptions');

    // Gestion de la récurrence
    isRecurringCheckbox.addEventListener('change', function() {
        recurrenceOptions.style.display = this.checked ? 'block' : 'none';
    });

    // Charger les sous-catégories quand une catégorie est sélectionnée
    categorySelect.addEventListener('change', function() {
        const categoryId = this.value;
        
        // Vider la liste des sous-catégories
        subCategorySelect.innerHTML = '<option value="">Sélectionner une sous-catégorie</option>';
        
        if (categoryId) {
            fetch(`/tasks/api/subcategories/${categoryId}`)
                .then(response => response.json())
                .then(data => {
                    data.subcategories.forEach(subcategory => {
                        const option = document.createElement('option');
                        option.value = subcategory.id;
                        option.textContent = subcategory.name;
                        subCategorySelect.appendChild(option);
                    });
                })
                .catch(error => {
                    console.error('Erreur lors du chargement des sous-catégories:', error);
                });
        }
    });

    // Charger les sous-profils quand un profil est sélectionné
    profileSelect.addEventListener('change', function() {
        const profileId = this.value;
        
        // Vider la liste des sous-profils
        subProfilesSelect.innerHTML = '<option value="">Sélectionner des sous-profils</option>';
        
        if (profileId) {
            fetch(`/tasks/api/subprofiles/${profileId}`)
                .then(response => response.json())
                .then(data => {
                    data.subprofiles.forEach(subprofile => {
                        const option = document.createElement('option');
                        option.value = subprofile.id;
                        option.textContent = subprofile.name;
                        subProfilesSelect.appendChild(option);
                    });
                })
                .catch(error => {
                    console.error('Erreur lors du chargement des sous-profils:', error);
                });
        }
    });

    // Charger les sous-catégories au chargement de la page si une catégorie est déjà sélectionnée
    if (categorySelect.value) {
        categorySelect.dispatchEvent(new Event('change'));
    }

    // Charger les sous-profils au chargement de la page si un profil est déjà sélectionné
    if (profileSelect.value) {
        profileSelect.dispatchEvent(new Event('change'));
    }
});
</script>
{% endblock %}