<?php
include("header.php");
if (!isset($_SESSION['user_type']) ) {   
    // If the user is not admin, redirect or show an error
        header("Location: index.php");
		exit();	
}

if ($_SESSION['user_id']==14 ) {   
    // If the user is not admin, redirect or show an error
        header("Location: login.php");
		exit();	
}

?>



    <div class="container">
    <div class="row justify-content-center" >
        <div class="col-md-4">
            <div class="card">
                <div class="card-header text-center">
                    <h3 class="card-title">Reset Password</h3>
                </div>
                <div class="card-body">
                    
                     <div id="responseMessage"></div>

                    <form id="passwordResetForm">
    <div class="form-group">
        <label for="old_password">Old Password<span class="text-danger">*</span>:</label>
        <div class="input-group">
            <input type="password" id="old_password" name="old_password" class="form-control" required />
            <div class="input-group-append">
                <span class="input-group-text" onclick="togglePassword('old_password', 'toggleIcon_old')">
                    <i id="toggleIcon_old" class="fa fa-eye"></i>
                </span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="new_password">New Password<span class="text-danger">*</span>:</label>
        <div class="input-group">
            <input type="password" id="new_password" name="new_password" class="form-control" required />
            <div class="input-group-append">
                <span class="input-group-text" onclick="togglePassword('new_password', 'toggleIcon_new')">
                    <i id="toggleIcon_new" class="fa fa-eye"></i>
                </span>
            </div>
        </div>
        <p id="error-message" class="text-sm mt-2"></p>
    </div>

    <div class="form-group">
        <label for="confirm_new_password">Confirm New Password<span class="text-danger">*</span>:</label>
        <div class="input-group">
            <input type="password" id="confirm_new_password" name="confirm_new_password" class="form-control" required />
            <div class="input-group-append">
                <span class="input-group-text" onclick="togglePassword('confirm_new_password', 'toggleIcon_confirm')">
                    <i id="toggleIcon_confirm" class="fa fa-eye"></i>
                </span>
            </div>
        </div>
        <p id="confirm-error-message" class="text-sm mt-2"></p>
    </div>

    <button type="submit" disabled id="submit-btn" class="btn btn-secondary btn-block">Submit</button>

   
</form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-3.6.0.min.js"></script>
	<script>
    $(document).ready(function () {
        function validatePassword() {
            let password = $("#new_password").val();
            let confirmPassword = $("#confirm_new_password").val();
            let minLength = password.length >= 10;
            let specialChar = /[@#$%&]/.test(password);
            let upperCase = /[A-Z]/.test(password);
            let lowerCase = /[a-z]/.test(password);
            let isValid = minLength && specialChar && upperCase && lowerCase;
            let errorMessage = $("#error-message");
            let confirmErrorMessage = $("#confirm-error-message");

            if (!minLength) {
                errorMessage.text("Password must be at least 10 characters long.").removeClass("text-success").addClass("text-danger");
            } else if (!specialChar) {
                errorMessage.text("Password must include at least one of @, #, $, %, &.").removeClass("text-success").addClass("text-danger");
            } else if (!upperCase) {
                errorMessage.text("Password must include at least one uppercase letter.").removeClass("text-success").addClass("text-danger");
            } else if (!lowerCase) {
                errorMessage.text("Password must include at least one lowercase letter.").removeClass("text-success").addClass("text-danger");
            } else {
                errorMessage.text("Password is strong!").removeClass("text-danger").addClass("text-success");
            }

            if (confirmPassword.length > 0) {
                if (password !== confirmPassword) {
                    confirmErrorMessage.text("Passwords do not match.").removeClass("text-success").addClass("text-danger");
                    isValid = false;
                } else {
                    confirmErrorMessage.text("Passwords match!").removeClass("text-danger").addClass("text-success");
                }
            } else {
                confirmErrorMessage.text("");
            }

            if (isValid) {
                $("#submit-btn").removeAttr("disabled").removeClass("btn-secondary").addClass("btn-primary");
            } else {
                $("#submit-btn").attr("disabled", "disabled").removeClass("btn-primary").addClass("btn-secondary");
            }
        }

        $("#new_password, #confirm_new_password").on("input", validatePassword);

        // AJAX Form Submission
        $("#passwordResetForm").submit(function (event) {
            event.preventDefault(); // Prevent normal form submission

            $.ajax({
                type: "POST",
                url: "ajax_reset_password.php", 
                data: $(this).serialize(),
                dataType: "json",
                success: function (response) {
                    $("#responseMessage").html('<div class="alert alert-' + response.msgtype + '">' + response.msg + '</div>');
                    if (response.msgtype === "success") {
					   $("#error-message").text('');
					   $("#confirm-error-message").text('');
                       $("#passwordResetForm")[0].reset();
					   $("#submit-btn").attr("disabled", "disabled").removeClass("btn-primary").addClass("btn-secondary");
                    }
                }
            });
        });
    });

    function togglePassword(inputId, iconId) {
        var input = document.getElementById(inputId);
        var icon = document.getElementById(iconId);

        if (input.type === "password") {
            input.type = "text";
            icon.classList.remove("fa-eye");
            icon.classList.add("fa-eye-slash");
        } else {
            input.type = "password";
            icon.classList.remove("fa-eye-slash");
            icon.classList.add("fa-eye");
        }
    }
</script>

	
	 
 </body>
 </html>