{# ============================================
   LOGIN / REGISTER — front/user/login.html.twig
   Objectif:
   - Desktop: 2 colonnes (Connexion à gauche, Inscription à droite) + séparateur
   - Mobile: switch Connexion/Inscription (un seul bloc visible)
   - Inscription: teaser visible par défaut, formulaire seulement au click
   ============================================ #}

{% extends 'front/base.html.twig' %}

{% block title %}{{ Globals.getCompany().name }} :: Connexion{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  <link rel="stylesheet" href="{{ asset('front/assets/css/login.css') }}">
{% endblock %}

{% block body %}
 {% set defaultCountryId = 0 %}
{% for c in countries %}
    {% if c.code is defined and c.code == 'TN' %}
        {% set defaultCountryId = c.id %}
    {% endif %}
{% endfor %}

<script>
    window.DEFAULT_COUNTRY_ID = {{ defaultCountryId }};
</script>

<main class="main auth-page" id="app">

  {# ===== Message global (ex: compte vérifié, etc.) ===== #}
  {% if message|default(false) %}
    <section class="auth-message mt-50">
      <div class="container">
        <div class="auth-message-inner col-lg-10 m-auto">
          <div class="mb-25">
            <h4>{{ message }}</h4>
          </div>
        </div>
      </div>
    </section>
  {% endif %}

  {# ===== Section Auth ===== #}
  <section class="auth-section pt-50 pb-50">
    <div class="container">

      {# ===== Switch Mobile: Connexion / Inscription (un seul bloc visible) ===== #}
      {# NOTE: visible seulement en mobile (d-lg-none) #}
      <div class="auth-mobile-switch d-lg-none mb-3">
        <button type="button"
                class="auth-tab"
                :class="{ active: !ui.showRegister }"
                @click="ui.showRegister = false">
          Connexion
        </button>

        <button type="button"
                class="auth-tab"
                :class="{ active: ui.showRegister }"
                @click="ui.showRegister = true">
          Inscription
        </button>
      </div>

      {# ===== Layout Desktop: 2 colonnes ===== #}
      <div class="row">
        <div class="col-lg-12 m-auto">
          <div class="row auth-layout">

            {# ===========================================================
               COLONNE GAUCHE — CONNEXION
               - Desktop: toujours visible
               - Mobile: visible seulement si ui.showRegister = false
               =========================================================== #}
            <div class="col-lg-5 auth-col auth-col--login"
                 :class="{ 'd-none d-lg-block': ui.showRegister }">

              <div class="login_wrap widget-taber-content p-30 background-white border-radius-10 mb-md-5 mb-lg-0 mb-sm-5 auth-card auth-card--login">
                <div class="padding_eight_all bg-white">

                  <div class="heading_s1">
                    <h3 class="mb-30">Connexion</h3>
                  </div>

                  <p class="mb-50 font-sm">
                    Si vous avez un compte, connectez-vous avec votre adresse e-mail ou votre numéro de téléphone.
                  </p>

                  <div class="auth-form auth-form--login">

                    {# Identifiant: email OU téléphone #}
                    <div class="mb-3 auth-field">
                      <span class="auth-field-icon"><i class="fi-rs-user"></i></span>
                      <input type="text"
                             required
                             name="identifier"
                             placeholder="E-mail ou téléphone"
                             v-model="user.identifier"
                             autocomplete="username"
                             v-on:keyup.enter="connexion()">
                      <small class="auth-help">Ex: email@domaine.com ou 99 123 456</small>
                    </div>

                    {# Mot de passe + toggle #}
                    <div class="mb-3 auth-field auth-field--password">
                      <span class="auth-field-icon"><i class="fi-rs-lock"></i></span>
                      <input required
                             :type="ui.showPassword ? 'text' : 'password'"
                             name="password"
                             placeholder="Mot de passe"
                             v-model="user.password"
                             autocomplete="current-password"
                             v-on:keyup.enter="connexion()">
                      <button type="button"
                              class="auth-pass-toggle"
                              @click="ui.showPassword = !ui.showPassword"
                              :aria-label="ui.showPassword ? 'Masquer le mot de passe' : 'Afficher le mot de passe'">
                        <i class="fi-rs-eye"></i>
                      </button>
                    </div>

                    {# Liens utiles #}
                    <div class="login_footer mb-3 auth-links">
                      <a class="text-muted" href="{{ path('user_request_password') }}">Mot de passe oublié ?</a>
                      <a class="text-muted" href="{{ path('user_request_verify') }}">Vérifier votre compte ?</a>
                      {# ===== Vérification OTP téléphone ===== #}


                    </div>

                    {# CTA Connexion #}
                    <div class="mb-3">
                      <button class="btn btn-block hover-up w-100"
                              type="button"
                              @click="connexion()"
                              :disabled="disabled">
                        Se connecter
                      </button>
                    </div>

                    <div class="mb-3 text-center text-muted">ou</div>

                    <div class="mb-0 d-none">
                        <a class="btn btn-dark w-100 d-flex align-items-center justify-content-center gap-2"
                          href="{{ path('connect_google_start') }}">
                          <span class="fw-semibold">G</span>
                          <span>Continuer avec Google</span>
                        </a>
                    </div>


                  </div>
                </div>
              </div>
            </div>

            {# ===== Séparateur Desktop uniquement ===== #}
            <div class="col-lg-1 d-none d-lg-flex align-items-stretch auth-col auth-col--divider">
              <div class="auth-divider" aria-hidden="true"></div>
            </div>

            {# ===========================================================
               COLONNE DROITE — INSCRIPTION
               - Desktop: toujours visible
               - Mobile: visible seulement si ui.showRegister = true
               - Par défaut: teaser (CTA), formulaire au click
               =========================================================== #}
            <div class="col-lg-6 auth-col auth-col--register"
                 :class="{ 'd-none d-lg-block': !ui.showRegister }">

              {# ===== Teaser / CTA (visible par défaut) ===== #}
              <div class="login_wrap widget-taber-content p-30 background-white border-radius-5 auth-card auth-card--register"
                   v-show="!ui.showRegisterForm">
                <div class="padding_eight_all bg-white">

                  <div class="heading_s1">
                    <h3 class="mb-30">Créer un compte</h3>
                  </div>

                  <p class="mb-50 font-sm">
                    Inscrivez-vous pour accéder aux soldes en avant-première et recevoir des nouveautés,
                    tendances et promotions sur mesure.
                  </p>

                  <div class="mb-3">
                    <button type="button"
                            class="btn btn-block hover-up w-100"
                            @click="openRegisterForm()">
                      Créer un compte
                    </button>
                  </div>

                </div>
              </div>

              {# ===== Formulaire inscription (au click) ===== #}
                <div class="login_wrap widget-taber-content p-30 background-white border-radius-5 auth-card auth-card--register"
                    v-show="ui.showRegisterForm">
                <div class="padding_eight_all bg-white">

                    <div class="heading_s1 auth-card-head">
                    <h3 class="mb-10">Créer un compte</h3>
                    <p class="auth-subtitle">
                        Créez votre compte pour suivre vos commandes, enregistrer vos favoris et passer commande plus rapidement.
                    </p>
                    </div>

                    <div class="auth-form auth-form--register">
                    <input type="hidden" id="csrf_signup" value="{{ csrf_token('signup') }}">
                    <input type="text" name="website" v-model="newUser.website" class="d-none" tabindex="-1" autocomplete="off">

                    <div class="row">

                        {# Civilité (chips) #}
                        <div class="col-12 mb-3">
                        <label class="form-label auth-label">Civilité</label>

                        <div class="auth-civility">
                            <label class="auth-civility-item" :class="{ active: newUser.civilite === 'Mr' }">
                            <input type="radio" name="civilite" value="Mr" v-model="newUser.civilite" required>
                            <span>Mr</span>
                            </label>

                            <label class="auth-civility-item" :class="{ active: newUser.civilite === 'Mme' }">
                            <input type="radio" name="civilite" value="Mme" v-model="newUser.civilite" required>
                            <span>Mme</span>
                            </label>

                            <label class="auth-civility-item" :class="{ active: newUser.civilite === 'Mlle' }">
                            <input type="radio" name="civilite" value="Mlle" v-model="newUser.civilite" required>
                            <span>Mlle</span>
                            </label>
                        </div>
                        </div>

                        {# Nom & Prénom #}
                        <div class="col-12 mb-3">
                        <label class="form-label auth-label">Nom & prénom</label>
                        <input type="text"
                                required
                                name="firstName"
                                class="form-control auth-input"
                                v-model="newUser.firstName"
                                autocomplete="name">
                        </div>

                        {# Téléphone / Email #}
                        <div class="col-12 col-md-6 mb-3">
                        <label class="form-label auth-label">Téléphone</label>
                        <input type="text"
                                required
                                name="telephone"
                                class="form-control auth-input"
                                placeholder="Ex : 99 123 456"
                                v-model="newUser.telephone"
                                v-mask="'## ### ###'">
                        </div>

                        <div class="col-12 col-md-6 mb-3">
                        <label class="form-label auth-label">E-mail</label>
                        <input type="text"
                                required
                                name="email"
                                class="form-control auth-input"
                                placeholder="Ex : email@domaine.com"
                                v-model="newUser.email"
                                autocomplete="email">
                        </div>

                        {# ===== Adresse principale (accordéon, optionnelle) ===== #}
                        <div class="col-12 mt-2">
                        <button type="button"
                                class="auth-accordion"
                                @click="ui.showAddress = !ui.showAddress"
                                :aria-expanded="ui.showAddress ? 'true' : 'false'">
                            <span class="auth-accordion-title">
                            Adresse principale <span class="auth-accordion-optional">(optionnelle)</span>
                            </span>
                            <span class="auth-accordion-meta">
                            Utilisée par défaut pour la livraison
                            </span>
                            <i class="fi-rs-angle-small-down auth-accordion-icon" :class="{ open: ui.showAddress }"></i>
                        </button>

                        <div class="auth-accordion-panel" v-show="ui.showAddress">
                            <div class="row g-3 auth-address">

                            <div class="col-12">
                                <label class="form-label" for="reg_address">Adresse</label>
                                <input id="reg_address"
                                    type="text"
                                    class="form-control"
                                    v-model="newUser.primaryAddress.address"
                                    autocomplete="street-address">
                            </div>

                            <div class="row g-3 auth-address" data-country-region-scope>

                                <div class="col-12 col-md-6">


                                    <label class="form-label" for="reg_country">Pays</label>
                                    <select id="reg_country"
                                            class="form-select"
                                            data-country-select="1"
                                            data-default-country-code="TN"
                                            data-region-template="{{ path('ajax_regions_by_country', { id: '__COUNTRY_ID__' }) }}"
                                            v-model="newUser.primaryAddress.country"
                                            autocomplete="country">
                                    <option value="">-- Sélectionner --</option>
                                    {% for country in countries %}
                                        <option value="{{ country.id }}">{{ country.name }}</option>
                                    {% endfor %}
                                    </select>
                                </div>

                                <div class="col-12 col-md-6">
                                    <label class="form-label" for="reg_region">Région</label>
                                    <select id="reg_region"
                                            class="form-select"
                                            data-region-select="1"
                                            :data-saved-region="newUser.primaryAddress.region"
                                            v-model="newUser.primaryAddress.region"
                                            autocomplete="address-level1">
                                    <option value="">-- Région --</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <label class="form-label" for="reg_city">Ville</label>
                                <input id="reg_city"
                                    type="text"
                                    class="form-control"
                                    v-model="newUser.primaryAddress.city"
                                    autocomplete="address-level2">
                            </div>

                            </div>
                        </div>
                        </div>

                        {# Mot de passe / Confirmation #}
                        <div class="col-12 col-md-6 mb-3">
                        <label class="form-label auth-label">Mot de passe</label>
                        <input required
                                type="password"
                                name="password"
                                class="form-control auth-input"
                                placeholder="Minimum 6 caractères"
                                v-model="newUser.password"
                                autocomplete="new-password">
                        </div>

                        <div class="col-12 col-md-6 mb-3">
                        <label class="form-label auth-label">Confirmation</label>
                        <input required
                                type="password"
                                name="password_confirm"
                                class="form-control auth-input"
                                placeholder="Répéter le mot de passe"
                                v-model="newUser.confirmPassword"
                                autocomplete="new-password">
                        </div>

                        {# Conditions #}
                        <div class="col-12 mb-3">
                        <div class="custome-checkbox auth-terms">
                            <input class="form-check-input" type="checkbox" id="exampleCheckbox12" v-model="newUser.accept">
                            <label class="form-check-label" for="exampleCheckbox12">
                            <span>
                                J’accepte les <a href="{{ path('terms_of_sales') }}">conditions de vente</a> et la politique de confidentialité.
                            </span>
                            </label>
                        </div>
                        </div>

                        {# CTA Inscription #}
                        <div class="col-12">
                        <button class="btn btn-fill-out btn-block hover-up w-100"
                                type="button"
                                @click="inscription()"
                                :disabled="disabled">
                            Créer mon compte
                        </button>

                        <p class="auth-note">
                            En créant un compte, vous pourrez enregistrer vos favoris et suivre vos commandes.
                        </p>
                        </div>

                    </div>
                    </div>

                </div>
                </div>


            </div>

          </div>{# /.row.auth-layout #}
        </div>
      </div>{# /.row #}

    </div>
  </section>

</main>
{% endblock %}

{% block footer %}
  {{ parent() }}
{% endblock %}

{% block javascripts %}
  {{ parent() }}
    <script src="{{ asset('js/admin/country-region-loader.js') }}"></script>
    <script src="{{ asset('front/assets/scripts/user/auth.js') }}"></script>

{% endblock %}