<%- include("../header/index")%> <%- include("../menu/menuLogin")%>

<div class="container mt-5">
  <form
    action="/usuarios/usuarios/nuevousuario"
    method="post"
    enctype="multipart/form-data"
  >
    <div class="progress">
      <div
        class="progress-bar progress-bar-original"
        role="progressbar"
        style="width: 25%"
        aria-valuenow="25"
        aria-valuemin="0"
        aria-valuemax="100"
      ></div>
    </div>

    <!-- Fase 1: Nombre Completo, CURP, RFC -->
    <div class="phase" id="phase1">
      <div class="card">
        <div class="card-header">
          <h3>Fase 1</h3>
        </div>
        <div class="card-body">
          <div class="p-0 m-2">Nombre Completo</div>
          <input
            class="form-control mb-3"
            type="text"
            name="nombreCompleto"
            id="nombreCompleto"
            placeholder="Nombre Completo"
            required
          />

          <div class="p-0 m-2">CURP</div>
          <input
            class="form-control mb-3"
            type="text"
            name="curp"
            id="curp"
            placeholder="CURP"
            required
          />

          <div class="p-0 m-2">RFC</div>
          <input
            class="form-control mb-3"
            type="text"
            name="rfc"
            id="rfc"
            placeholder="RFC"
            required
          />
        </div>
      </div>
    </div>

    <!-- Fase 2: Correo, Teléfono, Nombre de la Empresa -->
    <div class="phase" id="phase2" style="display: none">
      <div class="card">
        <div class="card-header">
          <h3>Fase 2</h3>
        </div>
        <div class="card-body">
          <div class="p-0 m-2">Correo Electrónico</div>
          <input
            class="form-control mb-3"
            type="email"
            name="correo"
            id="correo"
            placeholder="Correo Electrónico"
            required
          />

          <div class="p-0 m-2">Teléfono</div>
          <input
            class="form-control mb-3"
            type="number"
            name="telefono"
            id="telefono"
            placeholder="Teléfono"
            required
          />

          <div class="p-0 m-2">Nombre de la Empresa</div>
          <input
            class="form-control mb-3"
            type="text"
            name="nombreEmpresa"
            id="nombreEmpresa"
            placeholder="Nombre de la Empresa"
          />
        </div>
      </div>
    </div>

    <!-- Fase 3: RFC de la Empresa (opcional), Usuario, Contraseña -->
    <div class="phase" id="phase3" style="display: none">
      <div class="card">
        <div class="card-header">
          <h3>Fase 3</h3>
        </div>
        <div class="card-body">
          <div class="p-0 m-2">RFC de la Empresa (opcional)</div>
          <input
            class="form-control mb-3"
            type="text"
            name="rfcEmpresa"
            id="rfcEmpresa"
            placeholder="RFC de la Empresa"
          />

          <div class="p-0 m-2">Usuario</div>
          <input
            class="form-control mb-3"
            type="text"
            name="usuario"
            id="usuario"
            placeholder="Usuario"
            required
          />

          <div class="p-0 m-2">Contraseña</div>
          <input
            class="form-control mb-3"
            type="password"
            name="password"
            id="password"
            placeholder="Contraseña"
            required
          />
          <div class="password-validation mt-2"></div>
          <div class="password-strength mt-2">
            <div id="password-strength-text">Necesita mejorar</div>
          </div>
          <div class="progress">
            <div
              class="progress-bar2"
              role="progressbar"
              style="width: 0%"
              aria-valuenow="0"
              aria-valuemin="0"
              aria-valuemax="100"
              data-strength="0"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Fase 4: Foto de Perfil, Foto de Documento -->
    <div class="phase" id="phase4" style="display: none">
      <div class="card">
        <div class="card-header">
          <h3>Fase 4</h3>
        </div>
        <div class="card-body">
          <div class="p-0 m-2">Foto de Perfil</div>
          <input
            class="form-control mb-3"
            type="file"
            name="fotoPerfil"
            id="fotoPerfil"
            required
          />

          <div class="p-0 m-2">Foto de Documento (INE o Pasaporte)</div>
          <input
            class="form-control mb-3"
            type="file"
            name="fotoDocumento"
            id="fotoDocumento"
            required
          />
        </div>
      </div>
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between">
        <button class="btn btn-primary" id="prevButton" style="display: none">
          Anterior
        </button>
        <button
          class="btn btn-primary"
          id="nextButton"
          style="margin-top: 20px"
        >
          Continuar
        </button>
        <button
          type="button"
          class="btn btn-primary"
          id="showModalButton"
          style="display: none"
          data-toggle="modal"
          data-target="#myModal"
        >
          Finalizar
        </button>
      </div>
      <div
        class="modal fade"
        id="myModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel" style="color: black !important; ">
                Mensaje de Finalización
              </h5>
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Cerrar"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body" style="color: black !important; ">
              <strong>Formulario Finalizado</strong> listo para ser enviado.
            </div>
            <div class="modal-footer" style="color: black;">
              <button
                type="button"
                class="btn btn-secondary"
                data-dismiss="modal"
                id="closeModalButton"
                onclick="redirectToHomepage()"
              >
                Continuar
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<!-- Estilos CSS -->
<style>
  .progress {
    margin-bottom: 20px;
  }

  .card {
    margin-top: 20px;
  }
</style>

<script>
  function redirectToHomepage() {
  window.location.href = "/"; // Redirige a la página principal ("/")
}
</script>

<script>
  $(document).ready(function () {
    let currentPhase = 1;
    const phases = 4;

    function showPhase(phase) {
      for (let i = 1; i <= phases; i++) {
        if (i === phase) {
          $(`#phase${i}`).show();
        } else {
          $(`#phase${i}`).hide();
        }
      }
    }

    $("#nextButton").click(function () {
      if (currentPhase < phases) {
        if (validatePhase(currentPhase)) {
          currentPhase++;
          showPhase(currentPhase);
          if (currentPhase === phases) {
            $("#prevButton").show();
            $("#nextButton").hide();
            $("#showModalButton").show(); // Mostrar el botón y, por lo tanto, el modal en la última etapa
            $("#validationBanner").show();
          }
        }
        updateProgressBar();
      }
    });

    $("#prevButton").click(function () {
      if (currentPhase > 1) {
        currentPhase--;
        showPhase(currentPhase);
        updateProgressBar();
        if (currentPhase < phases) {
          $("#prevButton").show();
          $("#nextButton").show();
          $("button[type=submit]").hide();
          $("#validationBanner").hide();
        }
      }
    });
    $("#showModalButton").click(function () {
      // Abre el modal cuando se hace clic en el botón "Finalizar" en la etapa 4
      $("#myModal").modal("show");
    });

    // Función para validar si una fase está completa
    function validatePhase(phase) {
      let isValid = true;
      if (phase === 1) {
        if (
          $("#nombreCompleto").val() === "" ||
          $("#curp").val() === "" ||
          $("#rfc").val() === ""
        ) {
          isValid = false;
        }
      } else if (phase === 2) {
        if ($("#correo").val() === "" || $("#telefono").val() === "") {
          isValid = false;
        }
      } else if (phase === 3) {
        if ($("#usuario").val() === "" || $("#password").val() === "") {
          isValid = false;
        }
      }
      return isValid;
    }

    function updateProgressBar() {
      const progress = (currentPhase / phases) * 100;
      $(".progress-bar-original").css("width", `${progress}%`);
      $(".progress-bar-original").attr("aria-valuenow", progress);
    }

    showPhase(currentPhase);
    updateProgressBar();
  });
</script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const passwordStrengthBar = document.querySelector(".progress-bar2");
    const passwordStrengthText = document.getElementById(
      "password-strength-text"
    );
    const passwordInput = document.getElementById("password"); // Selecciona el campo de contraseña

    passwordInput.addEventListener("input", function () {
      // Get the password strength
      const passwordStrength = zxcvbn(passwordInput.value).score;

      // Update the progress bar
      passwordStrengthBar.style.width = `${passwordStrength * 15}%`;

      // Update the password strength text
      const strengthText = [
        "Muy Débil",
        "Débil",
        "Razonable",
        "Fuerte",
        "Muy Fuerte",
      ];
      passwordStrengthText.textContent = strengthText[passwordStrength];
      const colors = ["#ff3333", "#ff9900", "#ffcc00", "#99cc00", "#009900"];

      // Actualiza el color de la barra de progreso y el texto
      passwordStrengthBar.style.width = `${passwordStrength * 15}%`;
      passwordStrengthBar.style.backgroundColor = colors[passwordStrength];
      passwordStrengthText.textContent = strengthText[passwordStrength];
    });
  });
</script>

<%- include("../footer/footer")%>
