<!-- 
  Archivo: password_confirm.html 
  Ruta: src\templates\password_confirm.html
-->

{% extends "layout.html" %}

{% block title %}
Confirmar Contraseña - Elephant System
{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/password_confirm.css') }}">


{% if exito %}
<main class="page">
  <section class="clean-block clean-form dark">
    <div class="container">
      <div class="block-heading text-center">
        <h2 class="text-info">¡Cuenta Activada Exitosamente!</h2>
        <i class="fas fa-check-circle success-icon"></i>
      </div>

      <div class="card shadow">
        <div class="card-body">
          <div class="text-center mb-4">
            <h3>¡Bienvenido, {{ name }}!</h3>
            <p>Tu cuenta ha sido activada correctamente.</p>
            <p>Ahora puedes iniciar sesión y comenzar a usar Elephant System.</p>
          </div>
          
          <div class="text-center mt-4">
            <a href="{{ url_for('login') }}" class="btn btn-primary">Iniciar Sesión</a>
            <a href="{{ url_for('welcome') }}" class="btn btn-secondary">Volver al Inicio</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

{% else %}
<main class="page">
  <section class="clean-block clean-form dark">
    <div class="container">
      <div class="block-heading text-center">
        <h2 class="text-info">Confirmar Contraseña</h2>
        <p>Por favor, establece tu contraseña para completar el registro.</p>
      </div>

      <div class="card shadow">
        <div class="card-body">
          <div id="error-container" class="alert alert-danger d-none" role="alert">
            <!-- Aquí se mostrarán mensajes de error -->
          </div>
          
          <div id="success-container" class="alert alert-success d-none" role="alert">
            <!-- Aquí se mostrarán mensajes de éxito -->
          </div>
          
          <form id="passwordConfirmForm">
            <input type="hidden" id="token" name="token" value="{{ token }}">
            <input type="hidden" id="userId" name="userId" value="{{ user_id }}">

            <div class="form-group mb-3">
              <label for="nombre" class="form-label">Nombre</label>
              <input type="text" class="form-control" id="nombre" name="nombre" value="{{ nombre }}" readonly>
            </div>
            
            <div class="form-group mb-3">
              <label for="email" class="form-label">Usuario (Email)</label>
              <input type="email" class="form-control" id="email" name="email" value="{{ email }}" readonly>
            </div>
            
            <div class="form-group mb-3">
              <label for="password" class="form-label">Contraseña</label>
              <div class="input-group">
                <input type="password" class="form-control" id="password" name="password" 
                       {% if not token_valid %}disabled{% endif %} required>
                <button class="btn btn-outline-secondary toggle-password" type="button">
                  <i class="fas fa-eye"></i>
                </button>
              </div>
              <div class="password-requirements mt-2">
                <div class="requirement" id="req-length">
                  <i class="fas fa-times-circle icon-invalid"></i>
                  <i class="fas fa-check-circle icon-valid"></i>
                  Mínimo 8 caracteres
                </div>
                <div class="requirement" id="req-uppercase">
                  <i class="fas fa-times-circle icon-invalid"></i>
                  <i class="fas fa-check-circle icon-valid"></i>
                  Al menos una mayúscula
                </div>
                <div class="requirement" id="req-lowercase">
                  <i class="fas fa-times-circle icon-invalid"></i>
                  <i class="fas fa-check-circle icon-valid"></i>
                  Al menos una minúscula
                </div>
                <div class="requirement" id="req-number">
                  <i class="fas fa-times-circle icon-invalid"></i>
                  <i class="fas fa-check-circle icon-valid"></i>
                  Al menos un número
                </div>
                <div class="requirement" id="req-special">
                  <i class="fas fa-times-circle icon-invalid"></i>
                  <i class="fas fa-check-circle icon-valid"></i>
                  Al menos un carácter especial
                </div>
              </div>
            </div>
            
            <div class="form-group mb-4">
              <label for="confirmPassword" class="form-label">Confirmar Contraseña</label>
              <div class="input-group">
                <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" 
                       {% if not token_valid %}disabled{% endif %} required>
                <button class="btn btn-outline-secondary toggle-password" type="button">
                  <i class="fas fa-eye"></i>
                </button>
              </div>
              <div class="invalid-feedback">
                Las contraseñas no coinciden
              </div>
            </div>
            
            <div class="text-center mt-4">
              {% if token_valid %}
                <button type="submit" class="btn btn-primary">Establecer Contraseña</button>
              {% else %}
               <script>
                    Swal.fire({
                      icon: 'error',
                      title: 'Error',
                      text: 'El enlace es inválido o ha expirado. Por favor, solicita un nuevo enlace de activación.',
                  });
               </script>
                <a href="{{ url_for('welcome') }}" class="btn btn-secondary">Volver al Inicio</a>
              {% endif %}
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
</main>

{% endif %}
{% if token_valid == 'False' %}
  
  {{error_message}}

{% endif %}

{% if message %}
<main class="page">
  <section class="clean-block clean-form dark">
    <div class="container">
      <div class="block-heading text-center">
        <h2 class="text-danger">Alerta!!!</h2>
        <i class="fas fa-exclamation-circle error-icon"></i>
      </div>

      <div class="card shadow">
        <div class="card-body">
          <div class="text-center mb-4">
            <h3>Nota:</h3>
            <p>{{ message }}</p>
          </div>
          
          <div class="text-center mt-4">
            <a href="{{ url_for('welcome') }}" class="btn btn-primary">Volver al Inicio</a>
            <a href="#" class="btn btn-secondary" onclick="window.location.href='/Tokensign'">Solicitar Nuevo Token</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
{% endif %}
<script src="{{ url_for('static', filename='js/Security/UserPassword.js') }}"></script>
{% endblock %}