{% extends "account/base.html" %}
{% load static %}

{% block title %}Mise à jour du mot de passe - ECOLUX BTP{% endblock %}

{% block extra_css %}
<style>
    .input-group.focused .input-icon {
        color: var(--secondary-dark);
        transform: translateY(-50%) scale(1.1);
    }
    
    .input-group.focused .form-input {
        border-color: var(--secondary);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }
    
    .form-hint {
        padding: 0.75rem;
        background: rgba(212, 175, 55, 0.05);
        border-radius: 0.5rem;
        border-left: 3px solid var(--secondary);
    }
    
    #password-match-hint {
        background: rgba(239, 68, 68, 0.05);
        border-left-color: var(--error);
    }
</style>
{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-left">
        <div class="auth-card animate-fade-in">
            <img src="{% static 'assets/img/logo-ecolux.png' %}" alt="ECOLUX BTP" class="auth-logo">
            
            <h1 class="auth-title">Nouveau mot de passe</h1>
            <p class="auth-subtitle">Définissez un mot de passe sécurisé pour votre compte</p>
            
            <form id="connexion-form" method="POST">
                {% csrf_token %}
                
                <div class="form-group">
                    <label class="form-label" for="password">Nouveau mot de passe</label>
                    <div class="input-group">
                        <input 
                            type="password" 
                            id="password" 
                            name="password"
                            class="form-input" 
                            placeholder="Entrez votre nouveau mot de passe"
                            required 
                            autocomplete="new-password"
                            readonly 
                            onfocus="this.removeAttribute('readonly');"
                            minlength="8"
                            maxlength="30"
                        >
                        <i class="fas fa-lock input-icon"></i>
                    </div>
                    <div class="form-hint">
                        <i class="fas fa-info-circle" style="margin-right: 0.5rem; color: var(--secondary);"></i>
                        Le mot de passe doit comporter entre 8 et 30 caractères et comprendre au moins une lettre majuscule, une lettre minuscule et un chiffre.
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="password_confirm">Confirmer le mot de passe</label>
                    <div class="input-group">
                        <input 
                            type="password" 
                            id="password_confirm" 
                            name="password_confirm"
                            class="form-input" 
                            placeholder="Confirmez votre nouveau mot de passe"
                            required 
                            autocomplete="new-password"
                            readonly 
                            onfocus="this.removeAttribute('readonly');"
                        >
                        <i class="fas fa-check-circle input-icon"></i>
                    </div>
                    <div id="password-match-hint" class="form-hint" style="display: none;">
                        <i class="fas fa-times-circle" style="margin-right: 0.5rem; color: var(--error);"></i>
                        Les mots de passe ne correspondent pas.
                    </div>
                </div>
                
                <button type="submit" id="btnC23" class="btn-primary">
                    Mettre à jour le mot de passe
                </button>
            </form>
        </div>
    </div>
    
    <div class="auth-right">
        <div style="position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; height: 100%; color: white; text-align: center; padding: 2rem;">
            <div>
                <h2 style="font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
                    Sécurité
                </h2>
                <p style="font-size: 1.25rem; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
                    Protégez votre compte avec un mot de passe fort et sécurisé
                </p>
                <div style="margin-top: 2rem; padding: 1.5rem; background: rgba(255,255,255,0.1); border-radius: 1rem; backdrop-filter: blur(10px);">
                    <div style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem;">
                        <i class="fas fa-shield-alt" style="font-size: 1.5rem; color: #d4af37;"></i>
                        <span style="font-weight: 600;">Conseils de sécurité</span>
                    </div>
                    <ul style="text-align: left; font-size: 0.9rem; line-height: 1.6;">
                        <li>• Utilisez des lettres majuscules et minuscules</li>
                        <li>• Incluez des chiffres et caractères spéciaux</li>
                        <li>• Évitez les informations personnelles</li>
                        <li>• Ne réutilisez pas d'anciens mots de passe</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" name="g-recaptcha-response" id='recaptcha'>
<script src="https://www.google.com/recaptcha/api.js?render={{RECAPTCHA_PUBLIC_KEY}}"></script>

<script>
    $(document).ready(function () {
        // Validation du mot de passe en temps réel
        function validatePassword(password) {
            const minLength = password.length >= 8;
            const maxLength = password.length <= 30;
            const hasUpper = /[A-Z]/.test(password);
            const hasLower = /[a-z]/.test(password);
            const hasNumber = /\d/.test(password);
            
            return minLength && maxLength && hasUpper && hasLower && hasNumber;
        }
        
        function updatePasswordStrength(password) {
            const isValid = validatePassword(password);
            const input = $("#password");
            
            if (password.length > 0) {
                if (isValid) {
                    input.css("border-color", "var(--success)");
                    input.next().find(".input-icon").css("color", "var(--success)");
                } else {
                    input.css("border-color", "var(--error)");
                    input.next().find(".input-icon").css("color", "var(--error)");
                }
            } else {
                input.css("border-color", "var(--border)");
                input.next().find(".input-icon").css("color", "var(--secondary)");
            }
        }
        
        function checkPasswordMatch() {
            const password = $("#password").val();
            const confirm = $("#password_confirm").val();
            const hint = $("#password-match-hint");
            
            if (confirm.length > 0) {
                if (password === confirm) {
                    $("#password_confirm").css("border-color", "var(--success)");
                    $("#password_confirm").next().find(".input-icon").css("color", "var(--success)");
                    hint.hide();
                } else {
                    $("#password_confirm").css("border-color", "var(--error)");
                    $("#password_confirm").next().find(".input-icon").css("color", "var(--error)");
                    hint.show();
                }
            } else {
                $("#password_confirm").css("border-color", "var(--border)");
                $("#password_confirm").next().find(".input-icon").css("color", "var(--secondary)");
                hint.hide();
            }
        }
        
        $("#password").on("input", function() {
            updatePasswordStrength($(this).val());
            checkPasswordMatch();
        });
        
        $("#password_confirm").on("input", function() {
            checkPasswordMatch();
        });
        
        $("#connexion-form").submit(function (event) {
            event.preventDefault();
            
            const password = $("#password").val();
            const confirm = $("#password_confirm").val();
            
            // Validation côté client
            if (!validatePassword(password)) {
                Swal.fire({
                    title: "Mot de passe invalide",
                    text: "Le mot de passe ne respecte pas les critères de sécurité requis.",
                    icon: "error",
                    confirmButtonText: "Corriger"
                });
                return false;
            }
            
            if (password !== confirm) {
                Swal.fire({
                    title: "Mots de passe différents",
                    text: "Les mots de passe saisis ne correspondent pas.",
                    icon: "error",
                    confirmButtonText: "Corriger"
                });
                return false;
            }
            
            grecaptcha.execute('{{RECAPTCHA_PUBLIC_KEY}}').then(function (token) {
                $.ajax({
                    type: "POST",
                    url: "{% url 'userapp:updatepass' %}",
                    data: { 
                        csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
                        password: password,
                        username: "{{ username }}",
                        recap: token
                    },
                    beforeSend: function () {
                        $("#btnC23").addClass("is-loading");
                        $("#btnC23").attr("disabled", true);
                    },
                    complete: function () {
                        $("#btnC23").removeClass("is-loading");
                        $("#btnC23").attr("disabled", false);
                    },
                    success: function (data) {
                        if (data['type'] == "success") {
                            Swal.fire({
                                title: "Mot de passe mis à jour",
                                text: "Votre mot de passe a été modifié avec succès.",
                                icon: "success",
                                confirmButtonText: "Se connecter",
                                timer: 3000
                            }).then(() => {
                                window.location.href = "{% url 'userapp:to_login' %}";
                            });
                        } else {
                            Swal.fire({
                                title: "Erreur",
                                text: data.message || "Impossible de mettre à jour le mot de passe.",
                                icon: "error",
                                confirmButtonText: "Réessayer"
                            });
                        }
                    },
                    error: function (data) {
                        Swal.fire({
                            title: "Erreur",
                            text: "Une erreur s'est produite. Veuillez réessayer.",
                            icon: "error",
                            confirmButtonText: "Réessayer"
                        });
                    }
                });
            });
            return false;
        });

        // Focus automatique sur le premier champ
        $("#password").focus();
        
        // Animation des champs au focus
        $(".form-input").on("focus", function() {
            $(this).parent().addClass("focused");
        }).on("blur", function() {
            $(this).parent().removeClass("focused");
        });
    });
</script>


{% endblock %}