<%-include('navbar.ejs')%>

  <div class="container-fluid px-3 px-lg-4 py-4">

    <!-- Page Heading -->
    <div class="page-heading">

        <div class="page-heading-copy">

            <span class="page-icon">
                <i class="bi bi-key" aria-hidden="true"></i>
            </span>

            <div>
                <p class="eyebrow mb-1">Security</p>

                <h1 class="h3 mb-1">
                    Change Password
                </h1>

                <p class="text-muted mb-0">
                    Update your password to keep your account secure.
                </p>
            </div>

        </div>

        <div class="heading-actions">

            <a href="/candidate_admin/profile"
               class="btn btn-outline-secondary btn-sm">

                <i class="bi bi-arrow-left me-1"></i>
                Back to Profile

            </a>

        </div>

    </div>


    <!-- Change Password -->
    <div class="row justify-content-center mt-2">

        <div class="col-12 col-md-8 col-lg-6">

            <div class="panel">

                <div class="panel-header">

                    <div>

                        <h2 class="h5 mb-1 section-title">

                            <i class="bi bi-shield-lock"></i>

                            <span>
                                Update Password
                            </span>

                        </h2>

                        <p class="text-muted mb-0">
                            Enter your current password and create a new one.
                        </p>

                    </div>

                </div>


                <div class="p-3">

                    <form id="changePasswordForm"
                          onsubmit="changePassword(event)">


                        <!-- Current Password -->
                        <div class="mb-3">

                            <label class="form-label">
                                Current Password
                            </label>

                            <div class="input-group">

                                <input
                                    type="password"
                                    class="form-control"
                                    id="currentPassword"
                                    name="currentPassword"
                                    placeholder="Enter current password"
                                    required>

                                <button
                                    class="btn btn-outline-secondary"
                                    type="button"
                                    onclick="togglePassword('currentPassword', this)">

                                    <i class="bi bi-eye"></i>

                                </button>

                            </div>

                        </div>


                        <!-- New Password -->
                        <div class="mb-3">

                            <label class="form-label">
                                New Password
                            </label>

                            <div class="input-group">

                                <input
                                    type="password"
                                    class="form-control"
                                    id="newPassword"
                                    name="newPassword"
                                    placeholder="Enter new password"
                                    minlength="8"
                                    required>

                                <button
                                    class="btn btn-outline-secondary"
                                    type="button"
                                    onclick="togglePassword('newPassword', this)">

                                    <i class="bi bi-eye"></i>

                                </button>

                            </div>

                            <div class="form-text">
                                Password must be at least 8 characters.
                            </div>

                        </div>


                        <!-- Confirm Password -->
                        <div class="mb-4">

                            <label class="form-label">
                                Confirm New Password
                            </label>

                            <div class="input-group">

                                <input
                                    type="password"
                                    class="form-control"
                                    id="confirmPassword"
                                    name="confirmPassword"
                                    placeholder="Confirm new password"
                                    minlength="8"
                                    required>

                                <button
                                    class="btn btn-outline-secondary"
                                    type="button"
                                    onclick="togglePassword('confirmPassword', this)">

                                    <i class="bi bi-eye"></i>

                                </button>

                            </div>

                        </div>


                        <!-- Submit -->
                        <button
                            type="submit"
                            class="btn btn-primary w-100">

                            <i class="bi bi-check-circle me-1"></i>
                            Update Password

                        </button>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>


<script>

function togglePassword(inputId, button) {

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

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

        input.type = "text";

        icon.classList.remove("bi-eye");
        icon.classList.add("bi-eye-slash");

    } else {

        input.type = "password";

        icon.classList.remove("bi-eye-slash");
        icon.classList.add("bi-eye");

    }

}


async function changePassword(event) {

    event.preventDefault();

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

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

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


    // Check password match
    if (newPassword !== confirmPassword) {

        Swal.fire({
            icon: "warning",
            title: "Password Mismatch",
            text: "New password and confirm password do not match.",
            confirmButtonColor: "#f97316"
        });

        return;

    }


    try {

        const response = await fetch(
            "/candidate_admin/change-password",
            {
                method: "POST",

                headers: {
                    "Content-Type": "application/json"
                },

                body: JSON.stringify({

                    currentPassword,
                    newPassword,
                    confirmPassword

                })
            }
        );


        const result = await response.json();


        if (result.status) {

            Swal.fire({

                icon: "success",
                title: "Password Updated!",
                text: result.message,
                confirmButtonColor: "#f97316"

            }).then(() => {

                window.location.href =
                    "/candidate_admin/profile";

            });

        } else {

            Swal.fire({

                icon: "error",
                title: "Unable to Update",
                text: result.message,
                confirmButtonColor: "#f97316"

            });

        }


    } catch (error) {

        console.log("Change Password Error:", error);

        Swal.fire({

            icon: "error",
            title: "Something went wrong",
            text: "Please try again later.",
            confirmButtonColor: "#f97316"

        });

    }

}

</script>

<%-include('footer.ejs')%>