{% extends "base.html" %}

{% block title %}Nous Contacter{% endblock %}

{% block extra_css %}
<style>
    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        --accent-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        --success-color: #10b981;
        --warning-color: #f59e0b;
        --error-color: #ef4444;
        --text-primary: #1f2937;
        --text-secondary: #6b7280;
        --surface-glass: rgba(255, 255, 255, 0.95);
        --surface-elevated: rgba(255, 255, 255, 0.98);
        --shadow-elegant: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        --shadow-floating: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        --border-radius: 16px;
        --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-spring: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Animation d'entrée de la page */
    @keyframes pageEnter {
        from {
            opacity: 0;
            transform: translateY(40px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-10px);
        }
    }

    @keyframes shimmer {
        0% {
            background-position: -200% 0;
        }
        100% {
            background-position: 200% 0;
        }
    }

    /* Container principal avec animation */
    .contact-container {
        animation: pageEnter 0.8s ease-out;
        position: relative;
        min-height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 0;
    }

    .contact-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1.5" fill="white" opacity="0.08"/><circle cx="50" cy="10" r="0.8" fill="white" opacity="0.12"/><circle cx="20" cy="80" r="1.2" fill="white" opacity="0.06"/><circle cx="80" cy="30" r="0.6" fill="white" opacity="0.15"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        pointer-events: none;
        animation: float 6s ease-in-out infinite;
    }

    /* Conteneur central avec effet de verre */
    .glass-container {
        position: relative;
        z-index: 2;
        padding: 5rem 0;
    }

    /* Card principale avec effet glassmorphism */
    .contact-card {
        background: var(--surface-glass);
        backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-elegant);
        overflow: hidden;
        position: relative;
        transform-origin: center;
        transition: var(--transition-smooth);
    }

    .contact-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 2px;
        background: var(--primary-gradient);
        animation: shimmer 3s infinite;
    }

    .contact-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: var(--shadow-floating);
    }

    /* Header avec gradient et icône animée */
    .card-header-elegant {
        background: var(--primary-gradient);
        padding: 2rem 2.5rem;
        position: relative;
        overflow: hidden;
    }

    .card-header-elegant::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
        animation: shimmer 4s infinite;
    }

    .header-content {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .header-icon {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        padding: 1rem;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        transition: var(--transition-spring);
    }

    .header-icon:hover {
        transform: rotate(15deg) scale(1.1);
        background: rgba(255, 255, 255, 0.3);
    }

    .header-icon i {
        font-size: 1.5rem;
        color: white;
        display: block;
    }

    .header-title {
        color: white;
        font-size: 1.75rem;
        font-weight: 700;
        margin: 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        letter-spacing: -0.025em;
    }

    /* Corps de la carte */
    .card-body-elegant {
        padding: 3rem 2.5rem;
        background: var(--surface-elevated);
        position: relative;
    }

    .recipient-info {
        background: var(--accent-gradient);
        padding: 1.5rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;
    }

    .recipient-info::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: var(--secondary-gradient);
        border-radius: 14px;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .recipient-info:hover::before {
        opacity: 1;
    }

    .recipient-text {
        color: var(--text-primary);
        font-size: 1.1rem;
        margin: 0;
        font-weight: 500;
        text-align: center;
    }

    .recipient-name {
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
    }

    /* Styles des champs de formulaire */
    .form-group-elegant {
        margin-bottom: 2rem;
        position: relative;
    }

    .form-label-elegant {
        display: block;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.75rem;
        font-size: 1rem;
        letter-spacing: -0.01em;
        transition: var(--transition-smooth);
    }

    .form-control-elegant {
        width: 100%;
        padding: 1rem 1.25rem;
        border: 2px solid rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        color: var(--text-primary);
        transition: var(--transition-smooth);
        position: relative;
    }

    .form-control-elegant:focus {
        outline: none;
        border-color: transparent;
        background: white;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3), var(--shadow-floating);
        transform: translateY(-2px);
    }

    .form-control-elegant::placeholder {
        color: var(--text-secondary);
        transition: var(--transition-smooth);
    }

    .form-control-elegant:focus::placeholder {
        opacity: 0.7;
        transform: translateX(5px);
    }

    /* Textarea spécial */
    .form-control-elegant.textarea {
        min-height: 150px;
        resize: vertical;
        font-family: inherit;
        line-height: 1.6;
    }

    /* Validation visuelle */
    .form-control-elegant.is-valid {
        border-color: var(--success-color);
        background: rgba(16, 185, 129, 0.05);
    }

    .form-control-elegant.is-invalid {
        border-color: var(--error-color);
        background: rgba(239, 68, 68, 0.05);
        animation: shake 0.5s ease-in-out;
    }

    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }

    /* Boutons élégants */
    .btn-actions {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        padding-top: 2rem;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        margin-top: 2rem;
    }

    .btn-elegant {
        padding: 0.875rem 2rem;
        border: none;
        border-radius: 10px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: var(--transition-spring);
        position: relative;
        overflow: hidden;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        letter-spacing: -0.01em;
    }

    .btn-elegant::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        transition: all 0.6s ease;
        transform: translate(-50%, -50%);
    }

    .btn-elegant:hover::before {
        width: 300px;
        height: 300px;
    }

    .btn-secondary-elegant {
        background: rgba(107, 114, 128, 0.1);
        color: var(--text-secondary);
        border: 2px solid rgba(107, 114, 128, 0.3);
        backdrop-filter: blur(10px);
    }

    .btn-secondary-elegant:hover {
        background: rgba(107, 114, 128, 0.2);
        color: var(--text-primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-floating);
    }

    .btn-primary-elegant {
        background: var(--primary-gradient);
        color: white;
        box-shadow: var(--shadow-floating);
    }

    .btn-primary-elegant:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: var(--shadow-elegant);
    }

    .btn-primary-elegant:active {
        transform: translateY(-1px) scale(1.02);
    }

    /* Loading state */
    .btn-elegant.loading {
        pointer-events: none;
        opacity: 0.8;
    }

    .btn-elegant .spinner {
        display: none;
        width: 20px;
        height: 20px;
        border: 2px solid transparent;
        border-top: 2px solid currentColor;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .btn-elegant.loading .spinner {
        display: inline-block;
    }

    .btn-elegant.loading .btn-text {
        opacity: 0.7;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .glass-container {
            padding: 2rem 1rem;
        }
        
        .card-header-elegant,
        .card-body-elegant {
            padding: 2rem 1.5rem;
        }
        
        .btn-actions {
            flex-direction: column;
        }
        
        .btn-elegant {
            width: 100%;
            justify-content: center;
        }
        
        .header-title {
            font-size: 1.5rem;
        }
    }

    /* Effet de particules flottantes */
    .floating-particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
    }

    .particle {
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        animation: floatParticle 8s infinite linear;
    }

    .particle:nth-child(1) {
        left: 10%;
        width: 4px;
        height: 4px;
        animation-delay: 0s;
    }

    .particle:nth-child(2) {
        left: 20%;
        width: 6px;
        height: 6px;
        animation-delay: 2s;
    }

    .particle:nth-child(3) {
        left: 30%;
        width: 3px;
        height: 3px;
        animation-delay: 4s;
    }

    .particle:nth-child(4) {
        left: 70%;
        width: 5px;
        height: 5px;
        animation-delay: 1s;
    }

    .particle:nth-child(5) {
        left: 80%;
        width: 4px;
        height: 4px;
        animation-delay: 3s;
    }

    @keyframes floatParticle {
        0% {
            transform: translateY(100vh) rotate(0deg);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(-10vh) rotate(360deg);
            opacity: 0;
        }
    }

    /* Animation de caractères pour le titre */
    .typing-text {
        overflow: hidden;
        white-space: nowrap;
        animation: typing 2s steps(20, end) forwards;
    }

    @keyframes typing {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="contact-container">
    <!-- Particules flottantes -->
    <div class="floating-particles">
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
    </div>

    <div class="glass-container">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 col-xl-7">
                    <div class="contact-card">
                        <!-- Header élégant -->
                        <div class="card-header-elegant">
                            <div class="header-content">
                                <div class="header-icon">
                                    <i class="fas fa-paper-plane"></i>
                                </div>
                                <h2 class="header-title typing-text">Contacter le Support</h2>
                            </div>
                        </div>

                        <!-- Corps de la carte -->
                        <div class="card-body-elegant">
                            <!-- Information sur le destinataire -->
                            <div class="recipient-info">
                                <p class="recipient-text">
                                    Votre message sera envoyé à 
                                    <span class="recipient-name">{{ recipient_name }}</span>
                                </p>
                            </div>

                            <!-- Formulaire -->
                            <form method="post" id="contactForm" novalidate>
                                {% csrf_token %}
                                
                                <!-- Champ Sujet -->
                                <div class="form-group-elegant">
                                    <label for="{{ form.subject.id_for_label }}" class="form-label-elegant">
                                        <i class="fas fa-tag me-2"></i>{{ form.subject.label }}
                                    </label>
                                    <input type="text" 
                                           name="{{ form.subject.name }}" 
                                           id="{{ form.subject.id_for_label }}"
                                           class="form-control-elegant"
                                           placeholder="Décrivez brièvement l'objet de votre message..."
                                           value="{{ form.subject.value|default:'' }}"
                                           required>
                                    <div class="form-feedback"></div>
                                </div>

                                <!-- Champ Message -->
                                <div class="form-group-elegant">
                                    <label for="{{ form.body.id_for_label }}" class="form-label-elegant">
                                        <i class="fas fa-edit me-2"></i>{{ form.body.label }}
                                    </label>
                                    <textarea name="{{ form.body.name }}" 
                                              id="{{ form.body.id_for_label }}"
                                              class="form-control-elegant textarea"
                                              placeholder="Rédigez votre message de manière claire et détaillée..."
                                              rows="8"
                                              required>{{ form.body.value|default:'' }}</textarea>
                                    <div class="form-feedback"></div>
                                </div>

                                <!-- Actions -->
                                <div class="btn-actions">
                                    <a href="javascript:history.back()" class="btn-elegant btn-secondary-elegant">
                                        <i class="fas fa-times"></i>
                                        <span>Annuler</span>
                                    </a>
                                    <button type="submit" class="btn-elegant btn-primary-elegant" id="submitBtn">
                                        <div class="spinner"></div>
                                        <span class="btn-text">
                                            <i class="fas fa-envelope"></i>
                                            Envoyer le Message
                                        </span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Variables globales
        const form = document.getElementById('contactForm');
        const submitBtn = document.getElementById('submitBtn');
        const formControls = document.querySelectorAll('.form-control-elegant');
        let isSubmitting = false;

        // ========================================================================
        // VALIDATION EN TEMPS RÉEL
        // ========================================================================
        
        formControls.forEach(control => {
            // Validation au focus out
            control.addEventListener('blur', function() {
                validateField(this);
            });
            
            // Réinitialisation des erreurs à la saisie
            control.addEventListener('input', function() {
                if (this.classList.contains('is-invalid')) {
                    this.classList.remove('is-invalid');
                    this.classList.add('is-valid');
                    updateFeedback(this, 'Parfait !', 'success');
                }
                
                // Auto-resize pour textarea
                if (this.tagName.toLowerCase() === 'textarea') {
                    this.style.height = 'auto';
                    this.style.height = Math.min(this.scrollHeight, 300) + 'px';
                }
            });

            // Effets visuels au focus
            control.addEventListener('focus', function() {
                this.parentElement.querySelector('.form-label-elegant').style.color = '#667eea';
                this.parentElement.querySelector('.form-label-elegant').style.transform = 'translateY(-2px)';
            });

            control.addEventListener('blur', function() {
                this.parentElement.querySelector('.form-label-elegant').style.color = 'var(--text-primary)';
                this.parentElement.querySelector('.form-label-elegant').style.transform = 'translateY(0)';
            });
        });

        // ========================================================================
        // FONCTION DE VALIDATION DES CHAMPS
        // ========================================================================
        
        function validateField(field) {
            const value = field.value.trim();
            const fieldType = field.getAttribute('name');
            let isValid = true;
            let message = '';

            // Validation générale (champs requis)
            if (field.hasAttribute('required') && !value) {
                isValid = false;
                message = 'Ce champ est obligatoire';
            }
            
            // Validations spécifiques
            if (value && fieldType === 'subject') {
                if (value.length < 5) {
                    isValid = false;
                    message = 'Le sujet doit contenir au moins 5 caractères';
                } else if (value.length > 100) {
                    isValid = false;
                    message = 'Le sujet ne peut pas dépasser 100 caractères';
                }
            }
            
            if (value && fieldType === 'body') {
                if (value.length < 20) {
                    isValid = false;
                    message = 'Le message doit contenir au moins 20 caractères';
                } else if (value.length > 1000) {
                    isValid = false;
                    message = 'Le message ne peut pas dépasser 1000 caractères';
                }
            }

            // Appliquer le style de validation
            if (isValid && value) {
                field.classList.remove('is-invalid');
                field.classList.add('is-valid');
                updateFeedback(field, 'Parfait !', 'success');
            } else if (!isValid) {
                field.classList.remove('is-valid');
                field.classList.add('is-invalid');
                updateFeedback(field, message, 'error');
            } else {
                field.classList.remove('is-valid', 'is-invalid');
                updateFeedback(field, '', '');
            }

            return isValid;
        }

        // ========================================================================
        // GESTION DES MESSAGES DE FEEDBACK
        // ========================================================================
        
        function updateFeedback(field, message, type) {
            let feedback = field.parentElement.querySelector('.form-feedback');
            if (!feedback) {
                feedback = document.createElement('div');
                feedback.className = 'form-feedback';
                field.parentElement.appendChild(feedback);
            }

            feedback.textContent = message;
            feedback.className = 'form-feedback';
            
            if (type === 'success') {
                feedback.style.color = 'var(--success-color)';
                feedback.style.opacity = '1';
            } else if (type === 'error') {
                feedback.style.color = 'var(--error-color)';
                feedback.style.opacity = '1';
            } else {
                feedback.style.opacity = '0';
            }
        }

        // ========================================================================
        // GESTION DE LA SOUMISSION DU FORMULAIRE
        // ========================================================================
        
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            
            if (isSubmitting) return;
            
            // Validation de tous les champs
            let isFormValid = true;
            formControls.forEach(control => {
                if (!validateField(control)) {
                    isFormValid = false;
                }
            });

            if (!isFormValid) {
                // Scroll vers le premier champ invalide
                const firstInvalidField = form.querySelector('.is-invalid');
                if (firstInvalidField) {
                    firstInvalidField.scrollIntoView({ 
                        behavior: 'smooth', 
                        block: 'center' 
                    });
                    firstInvalidField.focus();
                }
                
                // Animation de shake pour attirer l'attention
                form.style.animation = 'shake 0.5s ease-in-out';
                setTimeout(() => {
                    form.style.animation = '';
                }, 500);
                
                return;
            }

            // Démarrer l'état de chargement
            startLoading();
            
            // Simuler une soumission (remplace par la vraie soumission)
            setTimeout(() => {
                // Ici, vous soumettriez normalement le formulaire
                form.submit();
            }, 1000);
        });

        // ========================================================================
        // GESTION DE L'ÉTAT DE CHARGEMENT
        // ========================================================================
        
        function startLoading() {
            isSubmitting = true;
            submitBtn.classList.add('loading');
            submitBtn.disabled = true;
            
            // Désactiver tous les champs
            formControls.forEach(control => {
                control.disabled = true;
                control.style.opacity = '0.7';
            });
        }

        function stopLoading() {
            isSubmitting = false;
            submitBtn.classList.remove('loading');
            submitBtn.disabled = false;
            
            // Réactiver tous les champs
            formControls.forEach(control => {
                control.disabled = false;
                control.style.opacity = '1';
            });
        }

        // ========================================================================
        // PROTECTION CONTRE LA FERMETURE ACCIDENTELLE
        // ========================================================================
        
        let hasUnsavedChanges = false;
        
        formControls.forEach(control => {
            control.addEventListener('input', function() {
                hasUnsavedChanges = true;
            });
        });

        window.addEventListener('beforeunload', function(e) {
            if (hasUnsavedChanges && !isSubmitting) {
                e.preventDefault();
                e.returnValue = 'Vous avez des modifications non sauvegardées. Êtes-vous sûr de vouloir quitter ?';
                return e.returnValue;
            }
        });

        // Réinitialiser le flag lors de la soumission réussie
        form.addEventListener('submit', function() {
            hasUnsavedChanges = false;
        });

        // ========================================================================
        // ANIMATIONS ET EFFETS VISUELS SUPPLÉMENTAIRES
        // ========================================================================
        
        // Animation d'apparition progressive des éléments
        const animatedElements = document.querySelectorAll('.form-group-elegant');
        animatedElements.forEach((element, index) => {
            element.style.opacity = '0';
            element.style.transform = 'translateY(30px)';
            
            setTimeout(() => {
                element.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
            }, index * 200 + 600);
        });

        // Effet de parallaxe subtil pour les particules
        let ticking = false;
        
        function updateParticles() {
            const scrolled = window.pageYOffset;
            const particles = document.querySelectorAll('.particle');
            
            particles.forEach((particle, index) => {
                const speed = (index + 1) * 0.1;
                particle.style.transform = `translateY(${scrolled * speed}px)`;
            });
            
            ticking = false;
        }

        function requestTick() {
            if (!ticking) {
                requestAnimationFrame(updateParticles);
                ticking = true;
            }
        }

        window.addEventListener('scroll', requestTick);

        // ========================================================================
        // COMPTEUR DE CARACTÈRES POUR LES CHAMPS
        // ========================================================================
        
        function addCharacterCounter(field, maxLength) {
            const counter = document.createElement('div');
            counter.className = 'character-counter';
            counter.style.cssText = `
                font-size: 0.875rem;
                color: var(--text-secondary);
                text-align: right;
                margin-top: 0.5rem;
                transition: color 0.3s ease;
            `;
            
            function updateCounter() {
                const current = field.value.length;
                counter.textContent = `${current}/${maxLength}`;
                
                if (current > maxLength * 0.9) {
                    counter.style.color = 'var(--error-color)';
                } else if (current > maxLength * 0.7) {
                    counter.style.color = 'var(--warning-color)';
                } else {
                    counter.style.color = 'var(--text-secondary)';
                }
            }
            
            field.addEventListener('input', updateCounter);
            field.parentElement.appendChild(counter);
            updateCounter();
        }

        // Ajouter les compteurs
        const subjectField = form.querySelector('input[name="subject"]');
        const bodyField = form.querySelector('textarea[name="body"]');
        
        if (subjectField) addCharacterCounter(subjectField, 100);