{# templates/front/user/requestVerify.html.twig #}
{% extends 'front/base.html.twig' %}

{% block title %}{{ Globals.getCompany().name }} :: Vérification du compte{% endblock %}

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

{% block body %}
<main class="main auth-verify" id="app">

  <section class="auth-section pt-50 pb-50">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-md-10 col-lg-7">

          <div class="auth-card auth-card--verify">
            <div class="auth-card-inner">

              {# Header #}
              <div class="auth-head">
                <h3 class="auth-title">Vérification du compte</h3>
                <p class="auth-subtitle">
                  Renvoyez un e-mail de vérification pour activer votre compte.
                </p>
              </div>

              {# Tabs #}
              <div class="auth-tabs" role="tablist" aria-label="Mode de vérification">
                <button type="button"
                        class="auth-tab"
                        :class="{ 'is-active': mode === 'email' }"
                        @click="mode='email'"
                        role="tab"
                        :aria-selected="mode==='email' ? 'true' : 'false'">
                  <i class="fi-rs-envelope"></i>
                  <span>E-mail</span>
                </button>

                <button type="button"
                        class="auth-tab"
                        :class="{ 'is-active': mode === 'sms' }"
                        @click="mode='sms'"
                        role="tab"
                        :aria-selected="mode==='sms' ? 'true' : 'false'">
                  <i class="fi-rs-phone-call"></i>
                  <span>Téléphone</span>
                </button>
              </div>

              {# Alerts #}
              <div v-if="error" class="alert alert-danger py-2 small mb-3">${ error }</div>
              <div v-if="message" class="alert alert-success py-2 small mb-3">${ message }</div>

              {# EMAIL PANEL #}
              <div v-show="mode === 'email'" class="auth-panel" role="tabpanel">
                <div class="auth-field">
                  <label class="auth-label" for="verify_email">E-mail</label>
                  <div class="auth-input">
                    <span class="auth-input-icon"><i class="fi-rs-user"></i></span>
                    <input id="verify_email"
                           type="email"
                           class="form-control"
                           placeholder="email@domaine.com"
                           v-model.trim="user.email"
                           autocomplete="email">
                  </div>
                  <small class="auth-help">Nous vous enverrons un lien d’activation.</small>
                </div>

                <button type="button"
                        class="btn btn-dark w-100 auth-cta"
                        @click="sendVerifyEmail()"
                        :disabled="disabled">
                  <span v-if="!disabled">Envoyer l’e-mail de vérification</span>
                  <span v-else>Envoi...</span>
                </button>

                <div class="auth-links">
                  <a href="/client/login" class="small text-muted">Retour à la connexion</a>
                </div>
              </div>

              {# SMS PANEL (si non implémenté back, on garde en “bientôt dispo”) #}
              <div v-show="mode === 'sms'" class="auth-panel" role="tabpanel">
                <div class="auth-field">
                  <label class="auth-label" for="verify_phone">Téléphone</label>
                  <div class="auth-input">
                    <span class="auth-input-icon"><i class="fi-rs-phone-call"></i></span>
                    <input id="verify_phone"
                           type="text"
                           class="form-control"
                           placeholder="99 123 456"
                           v-model.trim="user.phone"
                           autocomplete="tel">
                  </div>
                </div>

                <button type="button"
                        class="btn btn-dark w-100 auth-cta"
                        @click="sendSmsOtp()"
                        :disabled="disabled">
                  Envoyer code SMS
                </button>

                <div class="auth-field mt-3">
                  <label class="auth-label" for="verify_otp">Code OTP</label>
                  <input id="verify_otp"
                         type="text"
                         class="form-control"
                         maxlength="6"
                         placeholder="123456"
                         v-model.trim="user.otp"
                         inputmode="numeric">
                </div>

                <button type="button"
                        class="btn btn-dark w-100 auth-cta mt-2"
                        @click="verifySmsOtp()"
                        :disabled="disabled">
                  Vérifier le code
                </button>

                <div class="auth-links">
                  <a href="/client/login" class="small text-muted">Retour à la connexion</a>
                </div>
              </div>

            </div>
          </div>

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

</main>
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script src="{{ asset('front/assets/scripts/user/verifyUser.js') }}"></script>
{% endblock %}