<!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>University of Innovation, Science and Technology, Omuma - Reset Password</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">STUDENT PERFORMANCE MONITORING SYSTEM</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>Content Management System/p>
                    <img src="terence-styles/auth.png" alt="Illustration" class="img-fluid mt-3 rounded-2" />
                </div>
            </div>

            <!-- Right Reset 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="terence-styles/dark-logo.png" alt="Logo" style="width: 120px;" />
                        <h5 class="mt-3">Reset Password</h5>
                        <p class="text-muted small">Enter your new password below.</p>
                    </div>
                    <!-- Include in your existing HTML structure -->
                    <form id="resetForm">
                        <div class="mb-3">
                            <label for="newPassword" 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="newPassword"
                                    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="mb-4">
                            <label for="confirmPassword" class="form-label">Confirm Password</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                                <input type="password" class="form-control" id="confirmPassword"
                                    placeholder="Confirm new password" required />
                                <span class="input-group-text" onclick="togglePassword('confirmPassword', this)"
                                    style="cursor: pointer;">
                                    <i class="bi bi-eye"></i>
                                </span>
                            </div>
                        </div>

                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-primary">Reset Password</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>

        <!-- JS to check password match -->
        <script>
            function togglePassword(fieldId, toggleBtn) {
                const passwordField = document.getElementById(fieldId);
                const icon = toggleBtn.querySelector('i');

                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');
                }
            }

            // Password match check (unchanged)
            document.querySelector('form').addEventListener('submit', function (e) {
                const newPassword = document.getElementById('newPassword').value;
                const confirmPassword = document.getElementById('confirmPassword').value;

                if (newPassword !== confirmPassword) {
                    e.preventDefault();
                    alert('Passwords do not match.');
                }
            });
        </script>



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

        <script>
            function togglePassword(fieldId, toggleBtn) {
                const field = document.getElementById(fieldId);
                const icon = toggleBtn.querySelector("i");
                field.type = field.type === "password" ? "text" : "password";
                icon.classList.toggle("bi-eye");
                icon.classList.toggle("bi-eye-slash");
            }

            document.addEventListener("DOMContentLoaded", function () {
                const form = document.getElementById("resetForm");

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

                    const email = localStorage.getItem("resetEmail");
                    const otp = localStorage.getItem("resetOtp");
                    const password = document.getElementById("newPassword").value.trim();
                    const confirmPassword = document.getElementById("confirmPassword").value.trim();

                    if (!email || !otp) {
                        return Swal.fire({
                            icon: "error",
                            title: "Session Expired",
                            text: "Email or OTP not found. Please restart the password reset process.",
                        }).then(() => window.location.href = "/verify-email");
                    }

                    if (password !== confirmPassword) {
                        return Swal.fire({
                            icon: "warning",
                            title: "Password Mismatch",
                            text: "Passwords do not match. Please retype them.",
                        });
                    }

                    if (password.length < 6 || !/[A-Za-z]/.test(password) || !/[0-9]/.test(password)) {
                        return Swal.fire({
                            icon: "warning",
                            title: "Weak Password",
                            text: "Password must be at least 6 characters long and contain both letters and numbers.",
                        });
                    }

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

                        const result = await res.json();

                        if (res.ok && result.success) {
                            Swal.fire({
                                icon: "success",
                                title: "Password Reset",
                                text: "Your password has been reset successfully.",
                            }).then(() => {
                                localStorage.removeItem("resetEmail");
                                localStorage.removeItem("resetOtp");
                                window.location.href = "/adminlogin";
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: "Reset Failed",
                                text: result.message || "Could not reset password.",
                            });
                        }
                    } catch (err) {
                        console.error("Reset error:", err);
                        Swal.fire({
                            icon: "error",
                            title: "Server Error",
                            text: "Something went wrong. Please try again.",
                        });
                    }
                });
            });
        </script>







</body>

</html>