// Captura los elementos del DOM una sola vez para reutilizarlos
const $submit = document.getElementById("submit"),       // Botón de inicio de sesión
  $password = document.getElementById("password"),       // Campo de contraseña
  $username = document.getElementById("username"),       // Campo de nombre de usuario
  $visible = document.getElementById("visible"),         // Checkbox para mostrar u ocultar la contraseña
  $error = document.getElementById("error-msg");         // Elemento que muestra mensajes de error

// Evento que se activa cuando se cambia cualquier input del documento
document.addEventListener("change", (e) => {
  if (e.target === $visible) {                           // Si el cambio fue en el checkbox de visibilidad
    $password.type = $visible.checked ? "text" : "password"; // Alterna entre mostrar y ocultar la contraseña
  }
});

// Evento que escucha todos los clics en el documento
document.addEventListener("click", (e) => {
  if (e.target === $submit) {                            // Si se hace clic sobre el botón de envío
    e.preventDefault();                                  // Evita que el formulario se recargue o envíe por defecto

    const username = $username.value.trim();             // Captura el valor del usuario sin espacios
    const password = $password.value.trim();             // Captura la contraseña sin espacios

    // Simulación de autenticación: si el usuario es "admin" y la contraseña es "Admin123!"
    if (username === "admin" && password === "Admin123!") {
      window.location.href = "log/admin.php";            // Redirige al panel del administrador
    } else {
      $error.textContent = "Usuario o contraseña incorrectos"; // Muestra mensaje si los datos no coinciden
      $error.style.display = "block";                    // Hace visible el mensaje de error
    }
  }
});
