<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="/assets/img/logo.jpg" type="image/x-icon" />
    <title>University of Innovation, Science and Technology - Login</title>

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const params = new URLSearchParams(window.location.search);

        if (params.get("redirected")) {
          showAlert("Please log in to continue", "info");
        }

        if (params.get("expired")) {
          showAlert("Session expired. Please log in again.", "danger");
        }
      });
    </script>

    <!-- Bootstrap CSS & Icons -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="terence-styles/css.css" />
  </head>

  <body>
    <div class="container-fluid">
      <div class="row min-vh-100">
        <!-- Mobile Title and Caption -->
        <div class="d-md-none text-center px-4 pt-3 mt-5">
          <h1 class="h4 fw-bold" style="color: #0d1b4c">
            University of Innovation, Science and Technology, Omuma
          </h1>
          <p class="text-secondary small">Knowledge and Skill for Service.</p>
        </div>

        <!-- Left Branding Panel -->
        <div
          class="col-md-6 d-none d-md-flex flex-column justify-content-center align-items-center text-white text-center"
          style="background-color: #022348"
        >
          <div class="px-4">
            <h1>UNIVERSITY OF INNOVATION, SCIENCE AND TECHNOLOGY</h1>
            <p>Empowering Innovation, Excellence, and Progress</p>
            <img
              src="terence-styles/auth.png"
              alt="Illustration"
              class="img-fluid mt-3 rounded-2"
            />
          </div>
        </div>

        <!-- Right Login Form Panel -->
        <div
          class="col-md-6 d-flex align-items-center justify-content-center py-4"
        >
          <div
            class="login-box p-4 shadow rounded bg-white w-100"
            style="max-width: 420px"
          >
            <div class="text-center mb-4">
              <img src="/assets/img/logo.jpg" alt="Logo" style="width: 120px" />
            </div>
            <form id="loginForm">
              <div class="mb-3">
                <label for="email" class="form-label">Email address</label>
                <div class="input-group">
                  <span class="input-group-text"
                    ><i class="bi bi-envelope"></i
                  ></span>
                  <input
                    type="email"
                    class="form-control"
                    id="email"
                    placeholder="Enter your email"
                    required
                  />
                </div>
              </div>
              <div class="mb-3">
                <label for="password" class="form-label">New Password</label>
                <div class="input-group">
                  <span class="input-group-text"
                    ><i class="bi bi-lock"></i
                  ></span>
                  <input
                    type="password"
                    class="form-control"
                    id="password"
                    placeholder="Enter new password"
                    required
                  />
                  <span
                    class="input-group-text"
                    onclick="togglePassword('newPassword', this)"
                    style="cursor: pointer"
                  >
                    <i class="bi bi-eye"></i>
                  </span>
                </div>
              </div>

              <div
                class="d-flex justify-content-between align-items-center mb-3"
              >
                <div>
                  <input
                    class="form-check-input me-1"
                    type="checkbox"
                    id="rememberMe"
                  />
                  <label class="form-check-label" for="rememberMe"
                    >Remember me</label
                  >
                </div>
                <a href="/verify-email" class="text-decoration-none"
                  >Forgot password?</a
                >
              </div>
              <div class="d-grid">
                <button type="submit" class="btn btn-primary">Sign In</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- Toast Notification -->
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 1055">
      <div
        id="toastBox"
        class="toast align-items-center text-white bg-primary border-0"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="d-flex">
          <div class="toast-body" id="toastMessage">
            Notification message here
          </div>
          <button
            type="button"
            class="btn-close btn-close-white me-2 m-auto"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
      </div>
    </div>

    <!-- Bootstrap Bundle with Popper (for Toast to work) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- JavaScript for password toggle -->
    <script>
      function togglePassword() {
        const passwordField = document.getElementById("password");
        const icon = document.getElementById("togglePasswordIcon");
        if (passwordField.type === "password") {
          passwordField.type = "text";
          icon.classList.remove("bi-eye");
          icon.classList.add("bi-eye-slash");
        } else {
          passwordField.type = "password";
          icon.classList.remove("bi-eye-slash");
          icon.classList.add("bi-eye");
        }
      }
    </script>

    <script>
      function showAlert(message, type = "success") {
        const toastBox = document.getElementById("toastBox");
        const toastMessage = document.getElementById("toastMessage");
        toastMessage.textContent = message;
        toastBox.className = `toast align-items-center text-white bg-${type} border-0`;
        const toast = new bootstrap.Toast(toastBox);
        toast.show();
      }
    </script>

    <script>
      document
        .getElementById("loginForm")
        .addEventListener("submit", async function (e) {
          e.preventDefault();

          const email = document.getElementById("email").value.trim();
          const password = document.getElementById("password").value.trim();

          try {
            const response = await fetch("/api/auth/login", {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({ email, password }),
            });

            const data = await response.json();

            if (response.ok) {
              showAlert("Login successful");
              localStorage.setItem("token", data.token); // Save JWT
              localStorage.setItem("user", JSON.stringify(data.user));

              showAlert(data.message || "Login failed");
              // Redirect or open dashboard
              window.location.href = "/dashboard";
            } else {
              showAlert(data.message || "Login failed", "danger");
            }
          } catch (error) {
            console.error("Error:", error);
            showAlert("An error occurred. Please try again.", "danger");
          }
        });
    </script>
  </body>
</html>
