<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRA - Clinical Research Analysis
    </title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/vendors/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/pages/auth.css">
</head>

<body>
    <div id="auth">

        <div class="row h-100">
            <div class="col-lg-5 col-12">
                <div id="auth-left">
                    <div class="auth-logo">
                       <a href="index.html"><img src="img/logo.png" alt="Logo" style="width:250px; height:84px; margin-bottom: -60px;
    margin-top: 50px;"></a>
                    </div>
                    <h1 class="auth-title">Forgot Password</h1>
                    <p class="auth-subtitle mb-5">Input your email and we will send you reset password link.</p>

                    <!-- Step 1: Email Form -->
                    <form action="send_otp.php" method="POST" id="emailForm">
                        <div class="form-group position-relative has-icon-left mb-4">
                            <input type="email" class="form-control form-control-xl" name="email" placeholder="Email" required>
                            <div class="form-control-icon">
                                <i class="bi bi-envelope"></i>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-block btn-lg shadow-lg mt-5">Send OTP</button>
                    </form>

                    <!-- Step 2: OTP Form (hidden by default) -->
                    <form id="otpForm" class="d-none mt-3">
                        <div class="form-group position-relative has-icon-left mb-4">
                            <input type="text" id="otp" class="form-control form-control-xl" placeholder="Enter OTP" required>
                            <div class="form-control-icon">
                                <i class="bi bi-key"></i>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success btn-block btn-lg shadow-lg">Verify OTP</button>
                    </form>

                    <!-- Step 3: Password Form (hidden by default) -->
                    <form id="newPasswordForm" action="reset_password.php" method="POST" class="d-none mt-3">
                        <input type="hidden" name="email" id="finalEmail">
                        <div class="form-group position-relative has-icon-left mb-4">
                            <input type="password" name="npassword" class="form-control form-control-xl" placeholder="New Password" required>
                            <div class="form-control-icon">
                                <i class="bi bi-lock"></i>
                            </div>
                        </div>
                        <div class="form-group position-relative has-icon-left mb-4">
                            <input type="password" name="cpassword" class="form-control form-control-xl" placeholder="Confirm Password" required>
                            <div class="form-control-icon">
                                <i class="bi bi-lock-fill"></i>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block btn-lg shadow-lg">Reset Password</button>
                    </form>

                    <div class="text-center mt-5 text-lg fs-4">
                        <p class='text-gray-600'>Remember your account? <a href="index.php" class="font-bold">Log
                                in</a>.
                        </p>
                    </div>
                </div>
            </div>
           <div class="col-lg-7 d-none d-lg-block">
                <div id="auth-right" style="background-image: url('img/bg.png'); background-size: cover; background-position: center; height: 100vh;">
                
                </div>
            </div>
        </div>

    </div>
   
<script>
document.addEventListener('DOMContentLoaded', function () {
  const passwordForm = document.getElementById('passwordForm'); // your email form
  const otpForm = document.getElementById('otpForm');
  const newPasswordForm = document.getElementById('newPasswordForm');

  const emailInput = passwordForm.querySelector('input[type="email"]');
  const otpInput = document.getElementById('otp');
  const finalEmail = document.getElementById('finalEmail');

  // Step 1: Send OTP
  passwordForm.addEventListener('submit', function (e) {
    e.preventDefault();
    fetch('send_otp.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: 'email=' + encodeURIComponent(emailInput.value)
    })
    .then(res => res.json())
    .then(data => {
      if (data.status === 'success') {
        alert("OTP sent to email.");
        passwordForm.classList.add('d-none');
        otpForm.classList.remove('d-none');
      } else {
        alert(data.message);
      }
    });
  });

  // Step 2: Verify OTP
  otpForm.addEventListener('submit', function (e) {
    e.preventDefault();
    fetch('verify_otp.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: 'otp=' + encodeURIComponent(otpInput.value)
    })
    .then(res => res.json())
    .then(data => {
      if (data.status === 'success') {
        alert("OTP verified.");
        otpForm.classList.add('d-none');
        newPasswordForm.classList.remove('d-none');
        finalEmail.value = emailInput.value;
      } else {
        alert("Invalid OTP");
      }
    });
  });

  // Step 3: Reset Password (handled by form action)
});
</script>
</body>

</html>