{% extends 'base_login.html.twig' %}

{% block title %}Ouvrir un compte gratuit | LoyerExpress.com{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="https://fonts.googleapis.com/css?family=Manrope:200,300,400,500,600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <style>
        :root {
            --express-green: #72a333;
            --express-bg: #fdfdfd;
            --text-dark: #333;
            --border-light: #e6e6e6;
        }

        body.login-body {
            background-color: #f3f6f0;
            font-family: 'Manrope', sans-serif;
            color: var(--text-dark);
            font-size: 14px;
        }

        .login_head {
            text-align: center;
            margin: 15px auto;
            width: 360px; 
        }
        .login_head h1 {
            font-size: 17px;
            font-weight: 600;
            margin-top: 20px;
        }
        .login_head blockquote {
            margin-bottom: 0;
            font-weight: 300;
            line-height: 1.25;
        }
        .login_head blockquote p { font-size: 18px; margin-bottom: 10px; }

        #login-container {
            max-width: 360px; 
            margin: 0 auto 20px;
            background: #fff;
            padding: 35px;
            border: 1px solid var(--border-light);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            border-radius: 8px;
        }

        .account-type-selector {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 25px;
        }
        .select-type-compte {
            accent-color: var(--express-green);
            width: 16px;
            height: 16px;
            vertical-align: middle;
            cursor: pointer;
        }
        .cb-rb { cursor: pointer; font-weight: 500; margin-bottom: 0; }

        .form-group-express { margin-bottom: 15px; }
        .form-control-express {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
        .form-control-express:focus { border-color: var(--express-green); outline: none; }

        .input-with-icon { display: flex; position: relative; }
        .icon-addon {
            background: #eee;
            border: 1px solid #ccc;
            border-right: none;
            padding: 0 8px;
            border-radius: 4px 0 0 4px;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 50px;
        }
        
        /* Style pour le bouton Oeil */
        .password-toggle {
            background: #fff;
            border: 1px solid #ccc;
            border-left: none;
            padding: 0 12px;
            border-radius: 0 4px 4px 0;
            color: #999;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s;
        }
        .password-toggle:hover { color: var(--express-green); }

        /* Ajustement des arrondis quand il y a un icône ou un toggle */
        .input-with-icon .form-control-express { border-radius: 0 4px 4px 0; }
        .input-with-icon .has-toggle { border-radius: 0 !important; }
        .input-without-addon.has-toggle { border-radius: 4px 0 0 4px !important; }

        .section-separator {
            font-size: 11px;
            font-weight: 800;
            color: var(--express-green);
            text-transform: uppercase;
            margin: 20px 0 15px;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 5px;
            letter-spacing: 1px;
        }

        .btn-express {
            background-color: var(--express-green);
            color: white;
            border: none;
            padding: 14px;
            width: 100%;
            border-radius: 4px;
            font-weight: 600;
            font-size: 12px;
            cursor: pointer;
            transition: opacity 0.3s;
        }
        .btn-express:hover { opacity: 0.9; color: white; }

        .btn-google-standard {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            color: #3c4043;
            border: 1px solid #dadce0;
            padding: 10px 15px;
            border-radius: 4px;
            font-family: 'Roboto', arial, sans-serif;
            font-weight: 500;
            text-decoration: none;
            font-size: 14px;
            transition: background-color .3s, box-shadow .3s;
            margin-bottom: 15px;
        }
        .btn-google-standard:hover {
            background-color: #f8f9fa;
            box-shadow: 0 1px 2px 0 rgba(60,64,67,0.30), 0 1px 3px 1px rgba(60,64,67,0.15);
            color: #3c4043;
        }

        .page-header-sub {
            text-align: center;
            border-bottom: 1px solid #eee;
            line-height: 0.1em;
            margin: 30px 0 20px;
            font-size: 14px;
            color: #999;
        }
        .page-header-sub span { background:#fff; padding:0 10px; }

        .login_copy { 
            text-align: center; 
            font-size: 12px; 
            margin: 20px auto;
            width: 360px; 
        }
    </style>
{% endblock %}

{% block content %}
<div class="login-body">
    <div class="login_head">
        <a href="{{ path('app_visiteur') }}">
            <img src="{{ asset('images/logo1.png') }}" alt="logo LoyerExpress" width="170">
        </a>
        <h1>Ouvrir un compte gratuit</h1>
        <blockquote>
            <p>L'immobilier sans complexité<br> Pilotez vos locations avec précision</p>
            <small class="text-muted">LoyerExpress.com</small>
        </blockquote>
    </div>

    <div id="login-container">
        {% include 'flash_messages.html.twig' %}

        {{ form_start(registrationForm) }}
            {{ form_row(registrationForm.planId) }}

            <div class="account-type-selector">
                {% for child in registrationForm.typeCompte %}
                    <label class="radio cb-rb">
                        {{ form_widget(child, {'attr': {'class': 'select-type-compte'}}) }}
                        <span>{{ child.vars.label|raw }}</span>
                    </label>
                {% endfor %}
            </div>

            <div id="google-auth-block">
                <a href="{{ path('connect_google_start') }}" class="btn-google-standard">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg" alt="Google" width="18" style="margin-right: 10px;">
                    S'inscrire avec Google
                </a>
                <h5 class="page-header-sub"><span>Ou avec votre email</span></h5>
            </div>

            <div id="blocEntreprise" style="display:none;">
                <div class="section-separator">Votre Entreprise</div>
                <div class="form-group-express field-raison-sociale">
                    {{ form_widget(registrationForm.raisonSociale, {'attr': {'class': 'form-control-express', 'placeholder': 'Nom de l\'entreprise / Agence'}}) }}
                </div>
                <div class="section-separator">Accès Administrateur</div>
            </div>

            <div id="blocIdentifiants">
                <div class="row">
                    <div class="col-4 form-group-express">
                        {{ form_widget(registrationForm.civiliteRoot, {'attr': {'class': 'form-control-express'}}) }}
                    </div>
                    <div class="col-8 form-group-express">
                        {{ form_widget(registrationForm.nomRoot, {'attr': {'class': 'form-control-express', 'placeholder': 'Nom'}}) }}
                    </div>
                </div>

                <div class="form-group-express">
                    {{ form_widget(registrationForm.prenomRoot, {'attr': {'class': 'form-control-express', 'placeholder': 'Prénom'}}) }}
                </div>

                <div class="form-group-express">
                    <div class="input-with-icon">
                        <span class="icon-addon"><i class="fa fa-at"></i></span>
                        {{ form_widget(registrationForm.emailRoot, {'attr': {'class': 'form-control-express', 'placeholder': 'Email de connexion (Login)'}}) }}
                    </div>                
                </div>

                {# Champ Mot de Passe 1 #}
                <div class="form-group-express">
                    <div class="input-with-icon">
                        {{ form_widget(registrationForm.plainPassword.first, {'attr': {'class': 'form-control-express has-toggle input-without-addon', 'placeholder': 'Mot de passe'}}) }}
                        <div class="password-toggle toggle-pwd" data-target="registration_form_plainPassword_first">
                            <i class="fas fa-eye"></i>
                        </div>
                    </div>
                </div>

                {# Champ Mot de Passe 2 (Confirmation) #}
                <div class="form-group-express">
                    <div class="input-with-icon">
                        {{ form_widget(registrationForm.plainPassword.second, {'attr': {'class': 'form-control-express has-toggle input-without-addon', 'placeholder': 'Confirmer mot de passe'}}) }}
                        <div class="password-toggle toggle-pwd" data-target="registration_form_plainPassword_second">
                            <i class="fas fa-eye"></i>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn-express">CRÉER MON COMPTE</button>
            </div>
            
            <p class="text-center mt-3 mb-0">
                <small>Déjà client ? <a href="{{ path('app_entreprise_login') }}" style="color: var(--express-green); font-weight: bold;">Se connecter</a></small>
            </p>

        {{ form_end(registrationForm) }}
    </div>

    <p class="login_copy">
        En vous inscrivant, vous acceptez nos <a href="{{ path('app_visiteur_cgu') }}" style="color: var(--express-green);">Conditions générales d'utilisation</a> et notre 
        <a href="{{ path('app_visiteur_confidentialite') }}" style="color: var(--express-green);">Politique de confidentialité</a>.<br>
        {{ "now"|date("Y") }} &copy; <strong>LoyerExpress</strong>
    </p>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // --- LOGIQUE D'AFFICHAGE DES BLOCS ---
            const blocEntreprise = document.getElementById('blocEntreprise');
            const googleBlock = document.getElementById('google-auth-block');
            const raisonSocialeInput = document.querySelector('input[id$="_raisonSociale"]');
            const planIdInput = document.querySelector('input[id$="_planId"]');
            const typeCompteRadios = document.querySelectorAll('.select-type-compte');

            function updateDisplay() {
                const selected = document.querySelector('.select-type-compte:checked');
                const val = selected ? selected.value : '';

                if (val === 'ENTREPRISE') {
                    blocEntreprise.style.display = 'block';
                    if (googleBlock) googleBlock.style.display = 'none';
                    if (raisonSocialeInput) raisonSocialeInput.setAttribute('required', 'required');
                } else {
                    blocEntreprise.style.display = 'none';
                    if (googleBlock) googleBlock.style.display = 'block';
                    if (raisonSocialeInput) {
                        raisonSocialeInput.removeAttribute('required');
                        raisonSocialeInput.value = ''; 
                    }
                }
            }

            if (planIdInput && planIdInput.value === "3") {
                typeCompteRadios.forEach(radio => {
                    if (radio.value === 'ENTREPRISE') radio.checked = true;
                });
            } else {
                const isAnyChecked = document.querySelector('.select-type-compte:checked');
                if (!isAnyChecked) {
                    typeCompteRadios.forEach(radio => {
                        if (radio.value === 'PARTICULIER') radio.checked = true;
                    });
                }
            }

            updateDisplay();
            typeCompteRadios.forEach(radio => {
                radio.addEventListener('change', updateDisplay);
            });

            // --- LOGIQUE AFFICHER/MASQUER MOT DE PASSE ---
            const toggles = document.querySelectorAll('.toggle-pwd');
            toggles.forEach(btn => {
                btn.addEventListener('click', function() {
                    const inputId = this.getAttribute('data-target');
                    const input = document.getElementById(inputId);
                    
                    if (input) {
                        const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                        input.setAttribute('type', type);
                        
                        // Toggle l'icône
                        const icon = this.querySelector('i');
                        icon.classList.toggle('fa-eye');
                        icon.classList.toggle('fa-eye-slash');
                    }
                });
            });
        });
    </script>
{% endblock %}