<?php
// Start the session and use the custom session name
require('security.php');
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Check if the user is logged in by verifying session variables
if (isset($_SESSION['user_id'])) {
    // If not logged in, redirect to the login page (index.php)
    header('Location: index.php');
    exit();
}

// Include your database connection
require('connection.inc.php');

$error = '';
$success = '';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    include_once 'csrf.php';
    if (!validate_csrf_token($_POST['csrf_token'])) {
        die('Invalid CSRF token!');
    }
    $input_otp = $_POST['otp'];

    // Verify the OTP
    if (isset($_SESSION['otp']) && $input_otp == $_SESSION['otp']) {
        // Allow the user to reset their password
        $success = "OTP verified successfully. You can now reset your password.";
    } else {
        $error = "Invalid OTP. Please try again.";
    }
}

?>
<!DOCTYPE html>
<html lang="zxx">

<!-- Mirrored from demo.dashboardpack.com/user-management-html/forgot_pass.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 02 Dec 2024 05:54:53 GMT -->
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Management Admin</title>

    <link rel="icon" href="img/mini_logo.png" type="image/png">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap1.min.css" />
    <!-- themefy CSS -->
    <link rel="stylesheet" href="vendors/themefy_icon/themify-icons.css" />
    <link rel="stylesheet" href="vendors/font_awesome/css/all.min.css" />
    <!-- datatable CSS -->
     <!-- scrollabe  -->
     <link rel="stylesheet" href="vendors/scroll/scrollable.css" />

    <!-- menu css  -->
    <link rel="stylesheet" href="css/metisMenu.css">
    <!-- style CSS -->
    <link rel="stylesheet" href="css/style1.css" />
    <link rel="stylesheet" href="css/colors/default.css" id="colorSkinCSS">
    <style>
        .main_content{
            padding-left: 0px !important;
        }
        .footer_part{
            padding-left: 0px !important;
        }
    </style>
</head>
<body class="crm_body_bg">

<section class="main_content dashboard_part large_header_bg">
    <div class="main_content_iner ">
        <div class="container-fluid p-0">
            <div class="row justify-content-center">
              <div class="col-12">
                <div class="dashboard_header mb_50">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="dashboard_header_title">
                                <h3>Dashboard</h3>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="dashboard_breadcam text-end">
                                <p><a href="index.php">Dashboard</a> <i class="fas fa-caret-right"></i> Forgot Password</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            
        <script>
            // Function to toggle form display based on OTP verification success
            function toggleForms() {
                document.getElementById('otp-form').style.display = 'none'; // Hide OTP form
                document.getElementById('reset-password-form').style.display = 'block'; // Show Reset Password form
            }
        </script>
                <div class="col-lg-12"  id="otp-form" style="<?php echo !empty($success) ? 'display:none;' : ''; ?>">
                    <div class="white_box mb_30">
                        <div class="row justify-content-center">
                            <div class="col-lg-6">
                                <!-- sign_in  -->
                                <div class="modal-content cs_modal">
                                    <div class="modal-header theme_bg_1">
                                        <h5 class="modal-title text_white">Verify OTP</h5>
                                    </div>
                                    <div class="modal-body">
                                        <form  action="verify_otp.php" method="post">
                                             <?php include_once 'csrf.php'; ?>
                                            <input type="hidden" name="csrf_token" value="<?php echo generate_csrf_token(); ?>">

                                            <div class="">
                                                <input type="number" name="otp" id="otp" class="form-control" placeholder="Enter the OTP sent to your email..." required>
                                            </div>
                                            <button type="submit" class="btn_1 full_width text-center">Verify OTP</button>
                                        </form>
                                        <p style="color: #a1a1a1;font-size:12px">If you did not receive the OTP email, please check your Spam or Junk folder as well.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <?php if (!empty($error)): ?>
                    <p style="color: red;"><?php echo $error; ?></p>
                <?php endif; ?>

                <?php if (!empty($success)): ?>
                    <script>toggleForms();</script> <!-- Automatically hide the OTP form and show Reset Password form -->
                    <p style="color: #884ffb;text-align:center"><?php echo $success; ?></p>
                <?php endif; ?>
                
                <div class="col-lg-12" id="reset-password-form" style="<?php echo empty($success) ? 'display:none;' : ''; ?>">
                    <div class="white_box mb_30">
                        <div class="row justify-content-center">
                            <div class="col-lg-6">
                                <!-- sign_in  -->
                                <div class="modal-content cs_modal">
                                    <div class="modal-header theme_bg_1">
                                        <h5 class="modal-title text_white">Reset Password</h5>
                                    </div>
                                    <div class="modal-body">
                                        <form action="reset_password.php" method="post">
                                             <?php include_once 'csrf.php'; ?>
                                            <input type="hidden" name="csrf_token" value="<?php echo generate_csrf_token(); ?>">
                                            <div class="">
                                                <input type="password"  id="new_password" class="form-control" name="new_password" placeholder="Enter your new password...">
                                            </div>
                                            <button type="submit" class="btn_1 full_width text-center">Reset Password</button>
                                        </form>
                                        <p style="color: #a1a1a1;font-size:12px">Please enter your new password.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>

<!-- footer part -->
<?php require('footer.inc.php'); ?>
</section>
<!-- main content part end -->

  <!-- footer  -->
  <!-- jquery slim -->
  <script src="js/jquery1-3.4.1.min.js"></script>
  <!-- popper js -->
  <script src="js/popper1.min.js"></script>
  <!-- bootstarp js -->
  <script src="js/bootstrap1.min.js"></script>
  <!-- sidebar menu  -->
  <script src="js/metisMenu.js"></script>
  
  <!-- scrollabe  -->
  <script src="vendors/scroll/perfect-scrollbar.min.js"></script>
  <script src="vendors/scroll/scrollable-custom.js"></script>
  
  <!-- custom js -->
  <script src="js/custom.js"></script>
  </body>
  
<!-- Mirrored from demo.dashboardpack.com/user-management-html/forgot_pass.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 02 Dec 2024 05:54:53 GMT -->
</html>