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

{% block title %}Mot de passe oublié - ECOLUX BTP{% 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">Mot de passe oublié</h1>
            <p class="auth-subtitle">Entrez votre email pour recevoir un lien de réinitialisation</p>
            
            <form id="connexion-form" method="POST">
                {% csrf_token %}
                
                <div class="form-group">
                    <label class="form-label" for="email">Adresse email</label>
                    <div class="input-group">
                        <input 
                            type="email" 
                            id="email" 
                            name="email"
                            class="form-input" 
                            placeholder="Entrez votre adresse email"
                            required 
                            autocomplete="email"
                            readonly 
                            onfocus="this.removeAttribute('readonly');"
                        >
                        <i class="fas fa-envelope input-icon"></i>
                    </div>
                </div>
                
                <button type="submit" id="btnC23" class="btn-primary">
                    Réinitialiser mon mot de passe
                </button>
                
                <a href="{% url 'userapp:signin' %}" class="auth-link">
                    <i class="fas fa-arrow-left" style="margin-right: 0.5rem;"></i>
                    Retour à la connexion
                </a>
            </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);">
                    Récupération
                </h2>
                <p style="font-size: 1.25rem; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
                    Nous vous aiderons à retrouver l'accès à votre compte ECOLUX BTP
                </p>
                <div style="margin-top: 2rem; padding: 1.5rem; background: rgba(255,255,255,0.1); border-radius: 1rem; backdrop-filter: blur(10px);">
                    <i class="fas fa-shield-alt" style="font-size: 2rem; margin-bottom: 1rem; color: #d4af37;"></i>
                    <p style="font-size: 0.95rem;">Sécurité garantie - Vos données sont protégées</p>
                </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 () {
        $("#connexion-form").submit(function (event) {
            event.preventDefault();
            
            grecaptcha.execute('{{RECAPTCHA_PUBLIC_KEY}}').then(function (token) {
                $.ajax({
                    type: "POST",
                    url: "{% url 'userapp:resetpass' %}",
                    data: { 
                        csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value, 
                        email: $("#email").val(),
                        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: "Email envoyé",
                                text: "Un lien de réinitialisation a été envoyé à votre adresse email.",
                                icon: "success",
                                confirmButtonText: "Compris",
                                timer: 5000
                            }).then(() => {
                                window.location.href = "{% url 'userapp:to_login' %}";
                            });
                            document.getElementById("connexion-form").reset();
                        } else {
                            Swal.fire({
                                title: "Erreur",
                                text: data.message || "Cette adresse email n'est pas reconnue.",
                                icon: "error",
                                confirmButtonText: "Réessayer"
                            });
                        }
                    },
                    error: function (data) {
                        Swal.fire({
                            title: "Erreur",
                            text: "Une erreur s'est produite. Veuillez réessayer plus tard.",
                            icon: "error",
                            confirmButtonText: "Réessayer"
                        });
                    }
                });
            });
            return false;
        });

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

<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);
    }
</style>
{% endblock %}