<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Reset Password | VSearch BGV</title>

    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

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

    <style>

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            font-family: Arial, sans-serif;
        }

        .reset-container {
            width: 100%;
            max-width: 460px;
            padding: 20px;
        }

        .reset-card {
            background: #ffffff;
            padding: 35px;
            border-radius: 12px;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
        }

        .logo {
            text-align: center;
            margin-bottom: 25px;
        }

        .logo-icon {
            width: 55px;
            height: 55px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #2563eb;
            color: #fff;
            border-radius: 10px;
            font-size: 24px;
        }

        .logo h2 {
            margin: 12px 0 5px;
            color: #111827;
        }

        .logo p {
            margin: 0;
            color: #64748b;
            font-size: 14px;
        }

        .form-title {
            color: #111827;
            margin-bottom: 8px;
        }

        .form-subtitle {
            color: #64748b;
            font-size: 14px;
            margin-bottom: 25px;
        }

        .input-group {
            margin-bottom: 18px;
        }

        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: #334155;
            font-size: 14px;
            font-weight: 600;
        }

        .input-wrapper {
            position: relative;
        }

        .input-wrapper input {
            width: 100%;
            height: 50px;
            padding: 0 45px 0 15px;
            border: 1px solid #cbd5e1;
            border-radius: 7px;
            outline: none;
            font-size: 15px;
        }

        .input-wrapper input:focus {
            border-color: #2563eb;
        }

        .input-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
        }

        .toggle-pwd {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            border: 0;
            background: transparent;
            cursor: pointer;
            color: #64748b;
        }

        .btn-submit {
            width: 100%;
            height: 50px;
            border: 0;
            border-radius: 7px;
            background: #2563eb;
            color: white;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }

        .btn-submit:hover {
            background: #f97316;
        }

        .back-login {
            text-align: center;
            margin-top: 20px;
        }

        .back-login a {
            color: #2563eb;
            text-decoration: none;
            font-size: 14px;
        }

    </style>

</head>


<body>

<div class="reset-container">

    <div class="reset-card">

        <div class="logo">

            <div class="logo-icon">
                <i class="fas fa-shield-halved"></i>
            </div>

            <h2>VSearch BGV</h2>

            <p>
                Background Verification Portal
            </p>

        </div>


        <h2 class="form-title">
            Create New Password
        </h2>

        <p class="form-subtitle">
            Enter a new password for your account.
        </p>


        <form id="resetPasswordForm"
              onsubmit="handleResetPassword(event)">

            <!-- Token -->
            <input type="hidden"
                   id="resetToken"
                   value="<%= token %>">


            <!-- New Password -->
            <div class="input-group">

                <label for="newPassword">
                    <i class="fas fa-lock"></i>
                    New Password
                </label>

                <div class="input-wrapper">

                    <input type="password"
                           id="newPassword"
                           name="password"
                           placeholder="••••••••"
                           minlength="8"
                           required>

                    <button type="button"
                            class="toggle-pwd"
                            onclick="togglePassword('newPassword', this)">

                        <i class="far fa-eye"></i>

                    </button>

                </div>

            </div>


            <!-- Confirm Password -->
            <div class="input-group">

                <label for="confirmPassword">
                    <i class="fas fa-lock"></i>
                    Confirm Password
                </label>

                <div class="input-wrapper">

                    <input type="password"
                           id="confirmPassword"
                           name="confirmPassword"
                           placeholder="••••••••"
                           minlength="8"
                           required>

                    <button type="button"
                            class="toggle-pwd"
                            onclick="togglePassword('confirmPassword', this)">

                        <i class="far fa-eye"></i>

                    </button>

                </div>

            </div>


            <button type="submit"
                    class="btn-submit">

                Reset Password
                <i class="fas fa-arrow-right"></i>

            </button>

        </form>


        <div class="back-login">

            <a href="/login">
                <i class="fas fa-arrow-left"></i>
                Back to Login
            </a>

        </div>

    </div>

</div>


<script>

    // ==============================
    // PASSWORD SHOW / HIDE
    // ==============================

    function togglePassword(inputId, button) {

        const input = document.getElementById(inputId);
        const icon = button.querySelector("i");

        if (input.type === "password") {

            input.type = "text";

            icon.className = "far fa-eye-slash";

        } else {

            input.type = "password";

            icon.className = "far fa-eye";

        }

    }


    // ==============================
    // RESET PASSWORD
    // ==============================

    async function handleResetPassword(event) {

        event.preventDefault();

        const token =
            document.getElementById("resetToken").value;

        const password =
            document.getElementById("newPassword").value;

        const confirmPassword =
            document.getElementById("confirmPassword").value;


        // Password match

        if (password !== confirmPassword) {

            Swal.fire({

                icon: "warning",

                title: "Password Mismatch",

                text: "New password and confirm password do not match.",

                confirmButtonColor: "#2563eb"

            });

            return;

        }


        try {

            const response = await fetch(
                "/reset-password/" + token,
                {
                    method: "POST",

                    headers: {
                        "Content-Type":
                            "application/x-www-form-urlencoded"
                    },

                    body: new URLSearchParams({

                        password: password,

                        confirmPassword: confirmPassword

                    })

                }
            );


            const result =
                await response.json();


            if (result.status) {

                Swal.fire({

                    icon: "success",

                    title: "Password Reset Successfully! 🎉",

                    text: result.message,

                    confirmButtonText: "Go to Login",

                    confirmButtonColor: "#2563eb"

                }).then(() => {

                    window.location.href = "/login";

                });

            } else {

                Swal.fire({

                    icon: "error",

                    title: "Unable to Reset Password",

                    text: result.message,

                    confirmButtonColor: "#dc2626"

                });

            }


        } catch (error) {

            console.error(
                "Reset Password Error:",
                error
            );

            Swal.fire({

                icon: "error",

                title: "Something Went Wrong",

                text: "Please try again later.",

                confirmButtonColor: "#dc2626"

            });

        }

    }

</script>

</body>

</html>