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

{% block title %}Connexion - 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">Connexion</h1>
            <p class="auth-subtitle">Accédez à votre espace ECOLUX BTP</p>
            
            <form id="connexion-form" method="POST">
                {% csrf_token %}
                
                <div class="form-group">
                    <label class="form-label" for="email">Email ou identifiant</label>
                    <div class="input-group">
                        <input 
                            type="text" 
                            id="email" 
                            name="email"
                            class="form-input" 
                            placeholder="Entrez votre email ou identifiant"
                            required 
                            autocomplete="username"
                            readonly 
                            onfocus="this.removeAttribute('readonly');"
                        >
                        <i class="fas fa-envelope input-icon"></i>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="password">Mot de passe</label>
                    <div class="input-group">
                        <input 
                            type="password" 
                            id="password" 
                            name="password"
                            class="form-input" 
                            placeholder="Entrez votre mot de passe"
                            required 
                            autocomplete="current-password"
                            readonly 
                            onfocus="this.removeAttribute('readonly');"
                        >
                        <i class="fas fa-lock input-icon"></i>
                    </div>
                </div>
                
                <div class="form-group">
                    <a href="{% url 'userapp:to_forget_pass' %}" class="auth-link">Mot de passe oublié ?</a>
                </div>
                
                <button type="submit" id="btnC23" class="btn-primary">
                    Se connecter
                </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);">
                    ECOLUX BTP
                </h2>
                <p style="font-size: 1.25rem; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">
                    Votre partenaire de confiance pour tous vos projets de construction au Sénégal
                </p>
            </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:signin' %}",
                    data: { 
                        csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value, 
                        email: $("#email").val(),
                        password: $("#password").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: "Connexion réussie",
                                text: data.message,
                                icon: "success",
                                timer: 1500,
                                showConfirmButton: false
                            });
                            document.getElementById("connexion-form").reset();
                            setTimeout(() => {
                                window.location.href = data['url'];
                            }, 1500);
                        } else {
                            Swal.fire({
                                title: "Erreur de connexion",
                                text: data.message,
                                icon: "error",
                                confirmButtonText: "Réessayer"
                            });
                        }
                    },
                    error: function (data) {
                        Swal.fire({
                            title: "Erreur",
                            text: "Une erreur s'est produite lors de la connexion. Veuillez réessayer.",
                            icon: "error",
                            confirmButtonText: "Réessayer"
                        });
                    }
                });
            });
            return false;
        });

        // Amélioration UX : focus sur le premier champ
        $("#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 %}