<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="shortcut icon"
      href="terence-styles/favicon.png"
      type="image/x-icon"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
      Forgot Password - University of Innovation, Science and Technology, Omuma
    </title>

    <!-- 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: #0d1b4c"
        >
          <div class="px-4">
            <h1>University of Innovation, Science and Technology, Omuma</h1>
            <p>STUDENT PERFORMANCE MONITORING SYSTEM</p>
            <img
              src="terence-styles/auth.png"
              alt="Illustration"
              class="img-fluid mt-3 rounded-2"
            />
          </div>
        </div>

        <!-- Right Forgot Password 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="terence-styles/dark-logo.png"
                alt="Logo"
                style="width: 120px"
              />
            </div>
            <h5 class="text-center mb-3">Forgot Password</h5>
            <p class="text-center text-muted small mb-4">
              Enter your email address and we'll send you a link to reset your
              password.
            </p>

            <form>
              <div class="mb-3">
                <label for="resetEmail" 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="resetEmail"
                    placeholder="Enter your email"
                    required
                  />
                </div>
              </div>

              <div class="d-grid mb-3">
                <button type="submit" class="btn btn-primary">
                  Send Reset Link
                </button>
              </div>

              <div class="text-center">
                <a href="/adminlogin" class="text-decoration-none"
                  ><i class="bi bi-arrow-left"></i> Back to login</a
                >
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const form = document.querySelector("form");

        form.addEventListener("submit", async function (e) {
          e.preventDefault();

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

          if (!email) {
            return Swal.fire({
              icon: "warning",
              title: "Missing Email",
              text: "Please enter your email address.",
            });
          }

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

            const result = await res.json();

            if (res.ok && result.success) {
              // Save email to localStorage for use in OTP page
              localStorage.setItem("resetEmail", email);

              await Swal.fire({
                icon: "success",
                title: "OTP Sent",
                text:
                  result.message ||
                  "An OTP has been sent to your email address.",
              });

              // Redirect to OTP verification page
              window.location.href = "/verify-otp";
            } else {
              Swal.fire({
                icon: "error",
                title: "Failed",
                text: result.message || "Could not send OTP.",
              });
            }
          } catch (err) {
            console.error("Error:", err);
            Swal.fire({
              icon: "error",
              title: "Request Failed",
              text: "Something went wrong while sending the request.",
            });
          }
        });
      });
    </script>
  </body>
</html>
