<!DOCTYPE html>
<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="../assets/css/all.min.css">
  <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="../assets/css/fontawesome.min.css">
  <link rel="stylesheet" href="../assets/css/style.css">
</head>

<body>

  <div class="mainForm d-flex flex-wrap align-items-center">
    <div class="loginContent d-flex flex-column justify-content-center w-50">
      <h1>Welcome Back to Your POTZUS</h1>
      <p>Sign in to access your personalized dashboard, manage your activities, and stay in control of your tasks with
        ease and security.</p>
    </div>

    <div class="signinSec m-auto w-25">
      <h2>Sign In</h2>
      <p>Access your account securely to continue.</p>
      <form id="loginForm">
        <div class="signfield">
          <img src="../assets/images/envelope.png" alt="icon">
          <input type="text" id="username" placeholder="Username" required>
        </div>
        <div class="signfield" style="position: relative;">
  <img src="../assets/images/padlock.png" alt="icon">

  <input type="password" id="password" placeholder="Password" required>

  <!-- 👁 Toggle Icon -->
  <span id="togglePassword" 
        style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
               cursor: pointer; font-size: 14px; color: #666;">
    👁️
  </span>
</div>

<script>
  const passwordInput = document.getElementById("password");
  const togglePassword = document.getElementById("togglePassword");

  togglePassword.addEventListener("click", function () {
    const isPassword = passwordInput.getAttribute("type") === "password";
    passwordInput.setAttribute("type", isPassword ? "text" : "password");
    togglePassword.textContent = isPassword ? "🙈" : "👁️";
  });
</script>
        <button class="button w-100" type="submit">Login</button>
      </form>
    </div>
  </div>

  <script>
    document.getElementById("loginForm").addEventListener("submit", function (e) {
      e.preventDefault();
      let user = document.getElementById("username").value;
      let pass = document.getElementById("password").value;

      if (user === "admin" && pass === "admin@321#") {
        localStorage.setItem("loggedIn", "true");
        window.location.href = "../index.php";
      } else {
        alert("Invalid username or password!");
      }
    });
  </script>
</body>

</html>