<?php
include_once "global.php";
?>
<!doctype html>
<html lang="en" data-bs-theme="dark">

<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description"
        content="Login to access your dashboard at <?php echo $functions->ibms_setting('Site Name'); ?>">
    <meta name="author" content="Interactive Media Pakistan">

    <!-- Page Title -->
    <title>Forgot Password - <?php echo $functions->ibms_setting('Site Name'); ?></title>

    <!-- Favicon -->
    <link rel="icon" href="webImages/favicon.ico" type="image/x-icon">

    <!-- Preconnect for Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">

    <!-- Loader -->
    <link href="css/pace.min.css" rel="stylesheet">
    <script src="js/pace.min.js" defer></script>

    <!-- Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-extended.css" rel="stylesheet">

    <!-- Plugins (if actually used on login page) -->
    <link href="plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="plugins/metismenu/metisMenu.min.css">
    <link rel="stylesheet" type="text/css" href="plugins/metismenu/mm-vertical.css">

    <!-- Custom Styles with Cache Busting -->
    <link href="sass/main.css?ver=<?php echo filemtime(__DIR__ . '/sass/main.css'); ?>" rel="stylesheet">
    <link href="sass/dark-theme.css?ver=<?php echo filemtime(__DIR__ . '/sass/dark-theme.css'); ?>" rel="stylesheet">
</head>

<body>
    <div id="spinner-overlay">
        <button class="btn btn-dark" type="button" disabled> <span class="spinner-border spinner-border-sm"
                role="status" aria-hidden="true"></span>
            Loading...</button>
    </div>
    <div id="alertMessage" class="alert alert-dark border-0 bg-dark alert-dismissible fade" role="alert">
        <div class="text-white" id="alertText"></div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <!--authentication-->
    <div class="auth-basic-wrapper d-flex align-items-center justify-content-center">
        <div class="container-fluid my-5 my-lg-0">
            <div class="row">
                <div class="col-12 col-md-8 col-lg-6 col-xl-5 col-xxl-4 mx-auto">
                    <div class="card mb-0 border-top border-4 border-primary border-gradient-1">
                        <div class="card-body p-5">
                            <img src="webImages/logo1.png" class="mb-4" width="200" alt="logo">
                            <h4 class="fw-bold">Forgot Password?</h4>
                            <p class="mb-0">Enter your registered email address to receive a reset code.</p>
                            <div class="form-body my-5">
                                <form class="row g-3" id="forgotPasswordForm" method="post">
                                    <div class="col-12">
                                        <label for="email" class="form-label">Email Address</label>
                                        <input type="email" class="form-control" id="email" name="email" autocomplete="email" required>
                                    </div>
                                    <div class="col-12">
                                        <div class="d-grid gap-2">
                                            <button type="submit" class="btn default-btn default-btn-green">Send
                                                <span></span></button>
                                            <a href="login" class="btn default-btn default-btn-green">Back to Login
                                                <span></span></a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--end row-->
        </div>
    </div>
    <!--authentication-->

    <script src="js/bootstrap.bundle.min.js"></script>
    <!--plugins-->
    <script src="js/jquery.min.js"></script>

    <script>
        function showAlert(message) {
            let alertBox = $("#alertMessage");
            $("#alertText").text(message);

            alertBox.addClass("show").css("display", "block");

            setTimeout(function() {
                alertBox.removeClass("show");
                setTimeout(() => alertBox.css("display", "none"), 500);
            }, 3000);
        }
        $(document).ready(function() {
            $("#spinner-overlay").hide();
            $("#forgotPasswordForm").submit(function(e) {
                e.preventDefault();
                let email = $("#email").val();

                $.ajax({
                    url: "ajax_call?page=forgotPassword",
                    type: "POST",
                    data: {
                        email: email
                    },
                    dataType: "json",
                    beforeSend: function() {
                        $("#spinner-overlay").fadeIn('slow');
                    },
                    success: function(response) {
                        showAlert(response.message);
                        if (response.status === "success") {
                            setTimeout(() => {
                                window.location.href = response.redirect;
                            }, 2000);
                        }
                    },
                    error: function(xhr, status, errorThrown) {
                        console.log(xhr.responseText);
                    },
                    complete: function() {
                        $("#spinner-overlay").fadeOut('slow');
                    }
                });
            });
        });
    </script>

</body>

</html>