{% extends "base.html" %}

{% block title %}{{ title }} - Gestion Scolaire{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="mb-6">
        <a href="{{ url_for('classes') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
            ← Retour aux classes
        </a>
    </div>
    
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h1 class="text-xl font-semibold text-gray-900">{{ title }}</h1>
            {% if is_edit %}
                <p class="text-sm text-gray-600 mt-1">Modifiez les informations de votre classe</p>
            {% else %}
                <p class="text-sm text-gray-600 mt-1">Créez une nouvelle classe pour vos élèves</p>
            {% endif %}
        </div>
        
        <form method="POST" 
              action="{% if is_edit %}{{ url_for('classes.update', id=class_group.id) }}{% else %}{{ url_for('classes.create') }}{% endif %}" 
              class="px-6 py-6 space-y-8" novalidate>
            {{ form.hidden_tag() }}
            
            <!-- Messages flash -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    <div class="space-y-3">
                        {% for category, message in messages %}
                            <div class="p-4 rounded-lg border-l-4 {% if category == 'error' %}bg-red-50 border-red-500 text-red-800{% else %}bg-green-50 border-green-500 text-green-800{% endif %}">
                                <div class="flex items-start">
                                    {% if category == 'error' %}
                                        <svg class="w-5 h-5 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                        </svg>
                                    {% else %}
                                        <svg class="w-5 h-5 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                        </svg>
                                    {% endif %}
                                    <p class="font-medium">{{ message }}</p>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endwith %}
            
            <!-- Section Informations de la classe -->
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
                <h2 class="text-lg font-medium text-blue-900 mb-4">🏫 Informations de la classe</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="{{ form.name.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                            {{ form.name.label.text }}
                        </label>
                        {{ form.name(class="block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500", placeholder="Ex: 6ème A, 5ème B, Terminale S1...") }}
                        {% if form.name.errors %}
                            <div class="mt-1 text-sm text-red-600">
                                {% for error in form.name.errors %}
                                    <p>{{ error }}</p>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <div>
                        <label for="{{ form.year.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                            {{ form.year.label.text }}
                        </label>
                        {{ form.year(class="block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500", placeholder="Ex: 2024-2025") }}
                        {% if form.year.errors %}
                            <div class="mt-1 text-sm text-red-600">
                                {% for error in form.year.errors %}
                                    <p>{{ error }}</p>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                <div class="mt-6">
                    <label for="{{ form.description.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ form.description.label.text }}
                        <span class="text-gray-500 font-normal">(optionnel)</span>
                    </label>
                    {{ form.description(class="block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500", rows="3", placeholder="Description de la classe, remarques particulières...") }}
                    {% if form.description.errors %}
                        <div class="mt-1 text-sm text-red-600">
                            {% for error in form.description.errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Actions du formulaire -->
            <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                <a href="{{ url_for('classes') }}" 
                   class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                    </svg>
                    Annuler
                </a>
                
                <button type="submit" 
                        class="inline-flex items-center px-8 py-3 bg-blue-600 hover:bg-blue-700 text-base font-medium rounded-lg text-white hover:shadow-lg transition-all duration-200">
                    {% if is_edit %}
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
                        </svg>
                        Modifier la classe
                    {% else %}
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
                        </svg>
                        Créer la classe
                    {% endif %}
                </button>
            </div>
        </form>
    </div>
</div>

<!-- JavaScript pour validation côté client -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const nameField = document.getElementById('{{ form.name.id }}');
    const yearField = document.getElementById('{{ form.year.id }}');
    
    // Validation en temps réel du nom de classe
    nameField.addEventListener('blur', function() {
        if (this.value.length < 2) {
            showFieldError(this, 'Le nom de la classe doit contenir au moins 2 caractères');
        } else {
            clearFieldError(this);
        }
    });
    
    // Validation du format de l'année scolaire
    yearField.addEventListener('blur', function() {
        const yearPattern = /^\d{4}-\d{4}$/;
        if (!yearPattern.test(this.value)) {
            showFieldError(this, 'Format attendu: YYYY-YYYY (ex: 2024-2025)');
        } else {
            clearFieldError(this);
        }
    });
    
    function showFieldError(field, message) {
        clearFieldError(field);
        field.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
        
        const errorDiv = document.createElement('div');
        errorDiv.className = 'text-sm text-red-600 flex items-center mt-1 field-error';
        errorDiv.innerHTML = `
            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
            </svg>
            ${message}
        `;
        field.parentNode.appendChild(errorDiv);
    }
    
    function clearFieldError(field) {
        field.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
        const existingError = field.parentNode.querySelector('.field-error');
        if (existingError) {
            existingError.remove();
        }
    }
    
    // Soumission du formulaire avec validation
    form.addEventListener('submit', function(e) {
        let hasErrors = false;
        
        // Validation du nom
        if (nameField.value.length < 2) {
            showFieldError(nameField, 'Le nom de la classe est obligatoire');
            hasErrors = true;
        }
        
        // Validation de l'année
        const yearPattern = /^\d{4}-\d{4}$/;
        if (!yearPattern.test(yearField.value)) {
            showFieldError(yearField, 'Format d\'année invalide (ex: 2024-2025)');
            hasErrors = true;
        }
        
        if (hasErrors) {
            e.preventDefault();
            // Scroll vers le premier champ en erreur
            const firstError = form.querySelector('.border-red-500');
            if (firstError) {
                firstError.focus();
                firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }
    });
});
</script>
{% endblock %}