<?php
require('connection.inc.php');
require('security.php');
error_reporting(E_ALL);
ini_set('display_errors', 1);

if (isset($_SESSION['user_id']) && !isset($_POST['csrf_token']) && !isset($_SESSION['otp_email'])) {
    header('Location: index.php');
    exit();
}

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.";
        unset($_SESSION['csrf_token']);
        unset($_SESSION['otp']);
    } else {
        $error = "Invalid OTP. Please try again.";
    }
}
?>
<!doctype html>
<html class="no-js" lang="zxx">
   

<head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title>Love berri</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- Place favicon.ico in the root directory -->
      <link rel="shortcut icon" type="image/x-icon" href="assets/img/logo/favicon.png">

      <!-- CSS here -->
      <link rel="stylesheet" href="assets/css/bootstrap.min.css">
      <link rel="stylesheet" href="assets/css/animate.css">
      <link rel="stylesheet" href="assets/css/swiper-bundle.css">
      <link rel="stylesheet" href="assets/css/slick.css">
      <link rel="stylesheet" href="assets/css/magnific-popup.css">
      <link rel="stylesheet" href="assets/css/spacing.css">
      <link rel="stylesheet" href="assets/css/meanmenu.css">
      <link rel="stylesheet" href="assets/css/nice-select.css">
      <link rel="stylesheet" href="assets/css/fontawesome.min.css">
      <link rel="stylesheet" href="assets/css/icon-dukamarket.css">
      <link rel="stylesheet" href="assets/css/jquery-ui.css">
      <link rel="stylesheet" href="assets/css/main.css">
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   </head>
   <body>


      <!-- Scroll-top -->
      <button class="scroll-top scroll-to-target" data-target="html">
         <i class="icon-chevrons-up"></i>
      </button>
      <!-- Scroll-top-end-->


      <!-- header-area-start -->
      <?php 
      include 'header.php'
      ?>
      <!-- header-area-end -->

      <main>

         <!-- breadcrumb-area-start -->
         <div class="breadcrumb__area pt-5 pb-5">
            <div class="container">
               <div class="row">
                  <div class="col-lg-12">
                     <div class="tp-breadcrumb__content">
                        <div class="tp-breadcrumb__list">
                           <span class="tp-breadcrumb__active"><a href="index.html">Home</a></span>
                           <span class="dvdr">/</span>
                           <span>Forgot Password</span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- breadcrumb-area-end -->
<style>
    .tptrack__input-wrapper {
   position: relative;
   width: 100%;
}

.tptrack__input-group {
   display: flex;
   align-items: center;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 0.6rem 1rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tptrack__input-icon {
   color: #999;
   font-size: 16px;
   margin-right: 10px;
}

.tptrack__input {
   border: none;
   outline: none;
   width: 100%;
   font-size: 16px;
   background: transparent;
   padding: 0;
   color: #333;
}

.tptrack__input::placeholder {
   color: #aaa;
}

@media (max-width: 576px) {
   .tptrack__input-group {
      padding: 0.5rem 0.75rem;
   }

   .tptrack__input-icon {
      font-size: 14px;
   }

   .tptrack__input {
      font-size: 14px;
   }
}

</style>
        <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>
    <!-- track-area-start -->
    <section class="track-area pb-40" id="otp-form" style="<?php echo !empty($success) ? 'display:none;' : ''; ?>">
       <div class="container">
          <div class="row justify-content-center">
             <div class="col-lg-6 col-sm-12">
                <div class="tptrack__product mb-40">
                   <div class="tptrack__content grey-bg">
                      <div class="tptrack__item d-flex mb-20">
                         <div class="tptrack__item-icon">
                            <i class="fal fa-unlock-alt"></i>
                         </div>
                         <div class="tptrack__item-content">
                            <h4 class="tptrack__item-title">Verify OTP</h4>
                            <p>Enter OTP you received on your registered email address to receive a password reset link.</p>
                         </div>
                      </div>
                      <form method="POST" action="#">
                        <?php include_once 'csrf.php'; ?>
                        <input type="hidden" name="csrf_token" value="<?php echo generate_csrf_token(); ?>">
                        <div class="tptrack__input-wrapper mb-20">
                        <div class="tptrack__input-group">
                           <span class="tptrack__input-icon"><i class="fal fa-key"></i></span>
                           <input type="text" name="otp" class="tptrack__input" placeholder="Enter OTP" maxlength="6" required>
                        </div>
                        
                        </div>
                         <div class="tptrack__btn mb-20">
                            <button type="submit" name="submit" class="tptrack__submition active">
                              Verify OTP <i class="fal fa-paper-plane"></i>
                            </button>
                         </div>
                      </form>
                      
                      <div class="tpsign__account">
                         <a href="log-in.php"><i class="fal fa-long-arrow-left"></i> Back to Login</a>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </section>
         <!-- track-area-end -->

                <?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; ?>
                

      <section class="track-area pb-40"  id="reset-password-form" style="<?php echo empty($success) ? 'display:none;' : ''; ?>">
       <div class="container">
          <div class="row justify-content-center">
             <div class="col-lg-6 col-sm-12">
                <div class="tptrack__product mb-40">
                   <div class="tptrack__content grey-bg">
                      <div class="tptrack__item d-flex mb-20">
                         <div class="tptrack__item-icon">
                            <i class="fal fa-lock"></i>
                         </div>
                         <div class="tptrack__item-content">
                            <h4 class="tptrack__item-title">Reset Your Password</h4>
                            <p>Enter a new password below. Make sure it’s strong and something you’ll remember.</p>
                         </div>
                      </div>
    
                      <form method="POST" action="reset_password_submit.php">
                        <?php include_once 'csrf.php'; ?>
                        <input type="hidden" name="csrf_token" value="<?php echo generate_csrf_token(); ?>">
                         <div class="tptrack__input-wrapper mb-20">
                            <div class="tptrack__input-group position-relative">
                               <span class="tptrack__input-icon"><i class="fal fa-lock-alt"></i></span>
                               <input type="password" name="new_password" id="new_password" class="tptrack__input" placeholder="New Password" required style="padding-right: 40px;">
                                <span class="toggle-password" onclick="togglePassword()" style="position: absolute; left: 92%; top: 50%; transform: translateY(-50%); cursor: pointer;">
                                          <i class="fa-solid fa-eye-slash" id="toggleIcon"></i>
                                       </span>
                            </div>
                         </div>
    
                         <div class="tptrack__input-wrapper mb-20">
                            <div class="tptrack__input-group position-relative">
                               <span class="tptrack__input-icon"><i class="fal fa-lock-alt"></i></span>
                               <input type="password" name="confirm_password" id="confirm_password" class="tptrack__input" placeholder="Confirm Password" required style="padding-right: 40px;">
                                <span class="toggle-password" onclick="togglePasswords()" style="position: absolute; left: 92%; top: 50%; transform: translateY(-50%); cursor: pointer;">
                                          <i class="fa-solid fa-eye-slash" id="toggleIcon"></i>
                                       </span>
                            </div>
                         </div>
    
                         <div class="tptrack__btn mb-20">
                            <button type="submit" class="tptrack__submition active">
                               Update Password <i class="fal fa-check-circle"></i>
                            </button>
                         </div>
                      </form>
    
                      <div class="tpsign__account">
                         <a href="log-in.php"><i class="fal fa-long-arrow-left"></i> Back to Login</a>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </section>
         
         <!-- feature-area-start -->
     <?php 
     include 'footer.php'
     ?>
         <!-- feature-area-end -->

      </main>

      <!-- footer-area-start -->
  
      <!-- footer-area-end -->
            
    <script>
    function togglePassword() {
       const passwordInput = document.getElementById("new_password");
       const toggleIcon = document.getElementById("toggleIcon");
    
       if (passwordInput.type === "password") {
          passwordInput.type = "text";
          toggleIcon.classList.remove("fa-eye-slash");
          toggleIcon.classList.add("fa-eye");
       } else {
          passwordInput.type = "password";
          toggleIcon.classList.remove("fa-eye");
          toggleIcon.classList.add("fa-eye-slash");
       }
    }
    function togglePasswords() {
       const passwordInput = document.getElementById("confirm_password");
       const toggleIcon = document.getElementById("toggleIcon");
    
       if (passwordInput.type === "password") {
          passwordInput.type = "text";
          toggleIcon.classList.remove("fa-eye-slash");
          toggleIcon.classList.add("fa-eye");
       } else {
          passwordInput.type = "password";
          toggleIcon.classList.remove("fa-eye");
          toggleIcon.classList.add("fa-eye-slash");
       }
    }
    </script>


      <!-- JS here -->
      <script src="assets/js/jquery.js"></script>
      <script src="assets/js/waypoints.js"></script>
      <script src="assets/js/bootstrap.bundle.min.js"></script>
      <script src="assets/js/swiper-bundle.js"></script>
      <script src="assets/js/nice-select.js"></script>
      <script src="assets/js/slick.js"></script>
      <script src="assets/js/magnific-popup.js"></script>
      <script src="assets/js/counterup.js"></script>
      <script src="assets/js/wow.js"></script>
      <script src="assets/js/isotope-pkgd.js"></script>
      <script src="assets/js/imagesloaded-pkgd.js"></script>
      <script src="assets/js/countdown.js"></script>
      <script src="assets/js/ajax-form.js"></script>
      <script src="assets/js/jquery-ui.js"></script>
      <script src="assets/js/meanmenu.js"></script>
      <script src="assets/js/main.js"></script>
   </body>

</html>
