<%- include("../templates/index")%>
<%- include("../templates/menu")%>
<div class="container mt-5">
  <form action="/usuarios/usuarios/nuevousuario" method="post" enctype="multipart/form-data">
    <!-- enctype para enviar archivos binarios -->
    <div class="card">
      <div class="card-header">
        <h3>Nuevo Usuario</h3>
      </div>
      <div class="card-body">
        <input
          class="form-control mb-3"
          type="text"
          name="nombre"
          id="nombre"
          placeholder="Nombre"
          autofocus
          autocomplete="name"
        />
        <input class="form-control mb-3" type="file" name="foto" id="foto" />
        <input
          class="form-control mb-3"
          type="text"
          name="usuario"
          id="usuario"
          placeholder="Usuario"
        />
        <input
          class="form-control mb-3"
          type="password"
          name="password"
          id="password"
          placeholder="Password"
          autocomplete="current-password"
        />
        <div class="password-validation mt-2">
          <ul>
            <li id="length">Mínimo 8 caracteres</li>
            <li id="special">Al menos 1 carácter especial</li>
            <li id="number">Al menos 2 números</li>
            <li id="unique">Sin caracteres repetidos</li>
          </ul>
        </div>
        <input
          class="form-control mb-3"
          type="email"
          name="email"
          id="email"
          placeholder="Correo Electrónico"
        />
        <input
          class="form-control mb-3"
          type="tel"
          name="telefono"
          id="telefono"
          placeholder="Teléfono"
        />
        <input
          class="form-control mb-3"
          type="text"
          name="curp"
          id="curp"
          placeholder="CURP"
          minlength="18"
          maxlength="18"
        />
        <input
          class="form-control mb-3"
          type="text"
          name="direccionEmpresa"
          id="direccionEmpresa"
          placeholder="Dirección de la Empresa"
        />
        <input
          class="form-control mb-3"
          type="text"
          name="nombreEmpresa"
          id="nombreEmpresa"
          placeholder="Nombre de la Empresa"
        />
        <input
          class="form-control mb-3"
          type="text"
          name="rfc"
          id="rfc"
          placeholder="RFC"
          minlength="13"
          maxlength="13"
        />
      </div>
      <div class="card-footer">
        <button class="form control btn btn-success" type="submit">
          <i class="bi bi-check-circle"></i> Guardar
        </button>
        <a href="/" class="btn btn-secondary"
          ><i class="bi bi-arrow-bar-left"></i> Cancelar</a
        >
      </div>
    </div>
  </form>
</div>
<style>
  /* Estilos para los mensajes de validación */
  .password-validation {
    margin-top: 10px;
  }

  .password-validation ul {
    padding-left: 20px;
    list-style: none;
  }

  .password-validation li::before {
    content: "\2022"; /* Círculo de viñeta */
    color: #dc3545; /* Color rojo de Bootstrap */
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }

  /* Estilos para los mensajes de validación que cumplen los requisitos */
  .password-validation li.valid {
    color: #28a745; /* Color verde de Bootstrap */
  }

  /* Fuente de Google Fonts */
  body {
    font-family: 'Roboto', sans-serif;
  }
</style>
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
  rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function () {
    // Función para actualizar los mensajes de validación de contraseña
    function updatePasswordValidation() {
      const password = $("#password").val();

      const lengthMessage = $("#length");
      const specialMessage = $("#special");
      const numberMessage = $("#number");
      const uniqueMessage = $("#unique");

      // Validaciones
      const minLength = 8;
      const minSpecialChars = 1;
      const minNumbers = 2;
      const hasRepeatedChars = /(.)\1/.test(password);

      lengthMessage.toggleClass("valid", password.length >= minLength);
      specialMessage.toggleClass(
        "valid",
        (password.match(/[^A-Za-z0-9]/g) || []).length >= minSpecialChars
      );
      numberMessage.toggleClass(
        "valid",
        (password.match(/\d/g) || []).length >= minNumbers
      );
      uniqueMessage.toggleClass("valid", !hasRepeatedChars);
    }

    // Actualizar mensajes de validación en tiempo real
    $("#password").on("input", updatePasswordValidation);

    // Inicializar mensajes de validación
    updatePasswordValidation();
  });
</script>
<%- include("../templates/pie")%>
