<?php
require 'db.php';
require 'functions.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forgot Password - Divar Ferry Pass App</title>
<link rel="icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="dfpToastWrap"><div class="dfp-toast" id="dfpToastBox"></div></div>

<div class="dfp-loginwrap">
  <img src="logo.png" class="logo" alt="logo">
  <h3>Panchayat - Forgot Password</h3>

  <div id="stepUsername">
    <div class="dfp-formgroup" style="text-align:left;">
      <label>Username</label>
      <input type="text" id="fpUsername">
    </div>
    <button type="button" class="btn" id="btnSendOtp" style="width:100%;">Send OTP</button>
  </div>

  <div id="stepOtp" style="display:none;">
    <div class="dfp-formgroup" style="text-align:left;">
      <label>Enter OTP</label>
      <input type="text" id="fpOtp" maxlength="6">
    </div>
    <div class="dfp-formgroup" style="text-align:left;">
      <label>New Password</label>
      <input type="password" id="fpNewPassword">
    </div>
    <button type="button" class="btn" id="btnResetPassword" style="width:100%;">Reset Password</button>
  </div>

  <p style="margin-top:10px;"><a href="panchayat_login.php">Back to Login</a></p>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function toast(msg, type) {
  var box = document.getElementById('dfpToastBox');
  var wrap = document.getElementById('dfpToastWrap');
  box.className = 'dfp-toast ' + type;
  box.innerText = msg;
  wrap.style.display = 'block';
  setTimeout(function () { wrap.style.display = 'none'; }, 2500);
}

$('#btnSendOtp').on('click', function () {
  var btn = $(this);
  if (btn.prop('disabled')) { return; }
  btn.prop('disabled', true);
  $.post('ajax_panchayat_forgotpassword.php', { action: 'sendotp', username: $('#fpUsername').val() }, function (resp) {
    btn.prop('disabled', false);
    toast(resp.message, resp.success ? 'success' : 'error');
    if (resp.success) {
      $('#stepUsername').hide();
      $('#stepOtp').show();
    }
  }, 'json');
});

$('#btnResetPassword').on('click', function () {
  var btn = $(this);
  if (btn.prop('disabled')) { return; }
  btn.prop('disabled', true);
  $.post('ajax_panchayat_forgotpassword.php', {
    action: 'reset',
    username: $('#fpUsername').val(),
    otp: $('#fpOtp').val(),
    newpassword: $('#fpNewPassword').val()
  }, function (resp) {
    btn.prop('disabled', false);
    toast(resp.message, resp.success ? 'success' : 'error');
    if (resp.success) {
      setTimeout(function () { window.location.href = 'panchayat_login.php'; }, 1200);
    }
  }, 'json');
});
</script>
</body>
</html>
