<?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>Delete My Account - 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" style="max-width:400px;">
  <img src="logo.png" class="logo" alt="logo">
  <h3>Delete My Account</h3>
  <p style="font-size:var(--fontsize-sm);color:var(--clr-gray-mid);">
    Enter the mobile number or email used to register for the Divar Ferry Pass. Our team will process your
    account deletion request.
  </p>
  <form id="frmDelete" autocomplete="off">
    <div class="dfp-formgroup" style="text-align:left;">
      <label>Registered Mobile Number or Email</label>
      <input type="text" name="mobileoremail" id="mobileoremail" required>
    </div>
    <button type="submit" class="btn" style="width:100%;">Submit Request</button>
  </form>
</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'; }, 3000);
}

$('#frmDelete').on('submit', function (e) {
  e.preventDefault();
  var btn = $(this).find('button[type=submit]');
  if (btn.prop('disabled')) { return; }
  btn.prop('disabled', true);

  $.post('ajax_deleteaccount.php', $(this).serialize(), function (resp) {
    btn.prop('disabled', false);
    toast(resp.message, resp.success ? 'success' : 'error');
    if (resp.success) { $('#frmDelete')[0].reset(); }
  }, 'json').fail(function () {
    btn.prop('disabled', false);
    toast('Something went wrong. Please try again.', 'error');
  });
});
</script>
</body>
</html>
