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

{% block title %}Créer un Compte - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    :root {
        --primary-color: #2563eb;
        --primary-rgb: 37, 99, 235;
        --dark-color: #111827;
        --light-gray: #f9fafb;
        --border-color: #e5e7eb;
    }

    /* Le base.html peut ajouter un padding, on le retire pour cette page */
    .container, .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100%;
    }

    .register-container {
        display: flex;
        min-height: 100vh;
        width: 100%;
        background-color: var(--light-gray);
    }

    /* --- Colonne de Gauche (Branding) --- */
    .info-panel {
        background: linear-gradient(160deg, var(--primary-color) 0%, #1e3a8a 100%);
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 4rem;
    }

    .info-panel .logo {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 2rem;
    }
    .info-panel .logo i {
        margin-right: 0.75rem;
    }

    .info-panel h1 {
        font-size: 2.5rem;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }

    .info-panel .benefits-list {
        list-style: none;
        padding: 0;
    }
    .info-panel .benefits-list li {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        font-size: 1.1rem;
        opacity: 0.9;
    }
    .info-panel .benefits-list i {
        font-size: 1.25rem;
        margin-right: 1rem;
        width: 24px;
        text-align: center;
    }

    /* --- Colonne de Droite (Formulaire) --- */
    .form-panel {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem;
        overflow-y: auto;
    }

    .form-wrapper {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    .form-header .badge {
        font-size: 1rem;
        padding: 0.5em 1em;
    }

    /* --- Champs de formulaire personnalisés --- */
    .form-group-custom {
        position: relative;
        margin-bottom: 1.5rem;
    }
    
    .form-group-custom .form-control {
        height: 50px;
        border-radius: 8px;
        border: 2px solid var(--border-color);
        background-color: white;
        padding-left: 2.75rem;
        transition: border-color 0.2s ease;
    }
    
    .form-group-custom .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }
    
    .form-group-custom .input-icon {
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        color: #9ca3af;
        transition: color 0.2s ease;
    }
    
    .form-group-custom .form-control:focus + .input-icon {
        color: var(--primary-color);
    }
    
    .form-label-custom {
        font-weight: 500;
        margin-bottom: 0.5rem;
    }

    .btn-primary {
        background: linear-gradient(90deg, var(--primary-color) 0%, #3b82f6 100%);
        border: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.2);
    }
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 20px rgba(var(--primary-rgb), 0.3);
    }

    .invalid-feedback {
        font-weight: 500;
    }

    @media (max-width: 767px) {
        .info-panel {
            display: none; /* Cache le panneau de gauche sur mobile */
        }
        .form-panel {
            padding: 1.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="register-container">
    <!-- Colonne de gauche (Branding) - cachée sur mobile -->
    <div class="col-lg-6 info-panel d-none d-lg-flex">
        <div>
            <div class="logo">
                <i class="fas fa-lightbulb"></i>iMagin.K
            </div>
            <h1 class="mb-4">Donnez vie à vos projets les plus ambitieux.</h1>
            <p class="lead mb-5" style="opacity: 0.9;">En créant un compte, vous accédez à une plateforme conçue pour la clarté, l'efficacité et l'excellence.</p>
            <ul class="benefits-list">
                <li><i class="fas fa-rocket"></i>Lancez vos projets en quelques clics.</li>
                <li><i class="fas fa-chart-line"></i>Suivez leur avancement en temps réel.</li>
                <li><i class="fas fa-comments"></i>Communiquez directement avec notre équipe.</li>
            </ul>
        </div>
    </div>

    <!-- Colonne de droite (Formulaire) -->
    <div class="col-12 col-lg-6 form-panel">
        <div class="form-wrapper">
            <!-- En-tête du formulaire -->
            <div class="text-center mb-5 form-header">
                <h2 class="h1 fw-bold text-dark mb-3">Créez votre compte</h2>
                <p class="text-muted fs-5">
                    Inscription en tant que 
                    {% if user_type == 'Client' %}
                        <span class="badge bg-primary">Client</span>
                    {% else %}
                        <span class="badge bg-success">Affilié</span>
                    {% endif %}
                </p>
            </div>
            
            <!-- Formulaire d'inscription -->
            <form method="post" novalidate>
                {% csrf_token %}
                
                {% if form.non_field_errors %}
                    <div class="alert alert-danger mb-4"><i class="fas fa-exclamation-circle me-2"></i>{{ form.non_field_errors }}</div>
                {% endif %}
                
                <!-- Rendu manuel et stylisé des champs -->
                <div class="form-group-custom">
                    <label for="{{ form.username.id_for_label }}" class="form-label-custom">{{ form.username.label }}</label>
                    {{ form.username }}
                    <i class="fas fa-user input-icon"></i>
                    {% for error in form.username.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                         <div class="form-group-custom">
                            <label for="{{ form.first_name.id_for_label }}" class="form-label-custom">{{ form.first_name.label }}</label>
                            {{ form.first_name }}
                            {% for error in form.first_name.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label for="{{ form.last_name.id_for_label }}" class="form-label-custom">{{ form.last_name.label }}</label>
                            {{ form.last_name }}
                            {% for error in form.last_name.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                        </div>
                    </div>
                </div>

                <div class="form-group-custom">
                    <label for="{{ form.email.id_for_label }}" class="form-label-custom">{{ form.email.label }}</label>
                    {{ form.email }}
                    <i class="fas fa-envelope input-icon"></i>
                    {% for error in form.email.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                </div>

                <div class="form-group-custom">
                    <label for="{{ form.phone.id_for_label }}" class="form-label-custom">{{ form.phone.label }}</label>
                    {{ form.phone }}
                    <i class="fas fa-phone input-icon"></i>
                    {% for error in form.phone.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                </div>
                
                <div class="form-group-custom">
                    <label for="{{ form.password.id_for_label }}" class="form-label-custom">{{ form.password.label }}</label>
                    {{ form.password }}
                    <i class="fas fa-lock input-icon"></i>
                    {% for error in form.password.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                </div>
                
                <!-- ########## DÉBUT DE LA SECTION CORRIGÉE ########## -->
                <!-- Consentement avec des liens dynamiques -->
                <div class="form-check mt-4 mb-4">
                    <input type="checkbox" name="{{ form.terms_agreement.name }}" id="{{ form.terms_agreement.id_for_label }}" class="form-check-input" required>
                    <label class="form-check-label" for="{{ form.terms_agreement.id_for_label }}">
                        {% if user_type == 'Client' %}
                            J'ai lu et j'accepte les 
                            <!-- CORRECTION : Lien dynamique vers les conditions client -->
                            <a href="{% url 'legal:document_detail' 'TERMS_CLIENT' %}" target="_blank" class="text-decoration-none fw-semibold">
                                Conditions Générales
                            </a> 
                            et la 
                            <!-- CORRECTION : Lien dynamique vers la politique de confidentialité -->
                            <a href="{% url 'legal:document_detail' 'PRIVACY_CLIENT' %}" target="_blank" class="text-decoration-none fw-semibold">
                                Politique de Confidentialité
                            </a>.
                        {% else %}
                            J'ai lu et j'accepte le 
                            <!-- CORRECTION : Lien dynamique vers le contrat affilié -->
                            <a href="{% url 'legal:document_detail' 'TERMS_AFFILIATE' %}" target="_blank" class="text-decoration-none fw-semibold">
                                Contrat de Partenariat d'Affiliation
                            </a>.
                        {% endif %}
                    </label>
                    {% for error in form.terms_agreement.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                </div>
                <!-- ########## FIN DE LA SECTION CORRIGÉE ########## -->
                
                <!-- Bouton de soumission -->
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary btn-lg py-3" id="submit-btn">
                        <i class="fas fa-user-check me-2"></i>Créer mon compte
                    </button>
                </div>
            </form>
            
            <!-- Liens de navigation -->
            <div class="text-center mt-4">
                <p class="text-muted">
                    Déjà un compte ? 
                    <a href="{% url 'accounts:login' %}" class="fw-semibold text-decoration-none">Connectez-vous</a>
                </p>
                <p class="text-muted">
                    S'inscrire en tant que 
                    {% if user_type == 'Client' %}
                        <a href="{% url 'accounts:affiliate_register' %}" class="text-decoration-none">Affilié</a> ?
                    {% else %}
                        <a href="{% url 'accounts:client_register' %}" class="text-decoration-none">Client</a> ?
                    {% endif %}
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Le script existant reste parfaitement valide
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form[method="post"]');
    const submitBtn = document.getElementById('submit-btn');
    
    form.addEventListener('submit', function() {
        if (form.checkValidity()) {
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Création en cours...';
            submitBtn.disabled = true;
        }
    });

    const firstError = document.querySelector('.invalid-feedback.d-block');
    if (firstError) {
        const errorInput = firstError.previousElementSibling;
        if (errorInput) {
            errorInput.focus();
        }
    }
});
</script>
{% endblock %}