<?php

include('php/database.php');
include('php/security.php');
session_start();
if(logged_in())
{
	header('location:../login.php');
}
$id= $_SESSION['id'];
$results= mysqli_query($connection, "SELECT * FROM users WHERE id ='$id'");
$retrive= mysqli_fetch_array($results);
$date = $retrive['date'];
$id = $retrive['id'];
$name = $retrive['name'];
$email = $retrive['email'];
$number = $retrive['number'];
$password = $retrive['password'];
$phone = $retrive['phone'];
$address = $retrive['address'];
$country = $retrive['country'];
$gender = $retrive['gender'];
$image = $retrive['image'];
$vcode = $retrive['vcode'];
$verified = $retrive['verified'];
$verify = $retrive['verify'];
$balance = $retrive['balance'];
$totalbalance = $retrive['totalbalance'];
$investbalance = $retrive['investbalance'];
$profit = $retrive['profit'];
$totaldeposit = $retrive['totaldeposit'];
$totalwithdrawal = $retrive['totalwithdrawal'];
$loanlimit = $retrive['loanlimit'];
$availableloan = $retrive['availableloan'];
$ongoingloan = $retrive['ongoingloan'];
$savings = $retrive['savings'];
$idcard = $retrive['idcard'];
$idcardback = $retrive['idcardback'];
$accountstatus = $retrive['accountstatus'];
$pina = $retrive['pina'];
$pinb = $retrive['pinb'];
$pinc = $retrive['pinc'];
$pind = $retrive['pind'];
$dob = $retrive['dob'];
$imt = $retrive['imt'];

$usernumber = mysqli_real_escape_string($connection, $_GET['number']);
$amount = mysqli_real_escape_string($connection, $_GET['amount']);
$message = mysqli_real_escape_string($connection, $_GET['message']);
  $bank = mysqli_real_escape_string($connection, $_GET['bank']);
$actname = mysqli_real_escape_string($connection, $_GET['actname']);
$routing = mysqli_real_escape_string($connection, $_GET['routing']);
$swift = mysqli_real_escape_string($connection, $_GET['swift']);
?>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Enter IMT Code</title>
  <style>
    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #f4f7fb;
      font-family: 'Segoe UI', sans-serif;
    }

    /* Preloader (Throbber) Before Page Load */
    .preloader, .submit-loader {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background-color: #f4f7fb;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      z-index: 9999;
    }

    .preloader.active {
      display: flex;
    }

    .throbber {
      display: flex;
      gap: 8px;
    }

    .throbber div {
      width: 12px;
      height: 12px;
      background-color: #007bff;
      border-radius: 50%;
      animation: throb 1.2s infinite ease-in-out both;
    }

    .throbber div:nth-child(1) { animation-delay: -0.24s; }
    .throbber div:nth-child(2) { animation-delay: -0.12s; }
    .throbber div:nth-child(3) { animation-delay: 0; }

    @keyframes throb {
      0%, 80%, 100% { transform: scale(0); }
      40% { transform: scale(1); }
    }

    /* Submit Loader After Form Submit */
    .submit-loader.active {
      display: flex;
    }

    .spinner {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #007bff;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
      margin-bottom: 15px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .loading-text {
      font-size: 16px;
      color: #333;
    }

    /* Main IMT Card UI */
    .container {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .imt-card {
      background: #fff;
      padding: 40px 30px;
      border-radius: 14px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
      width: 100%;
      max-width: 420px;
      text-align: center;
    }

    .imt-card h2 {
      font-size: 22px;
      margin-bottom: 10px;
      color: #2c3e50;
    }

    .imt-card p {
      font-size: 14px;
      color: #555;
      margin-bottom: 25px;
    }

    .imt-input {
      width: 100%;
      padding: 16px;
      font-size: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      text-align: center;
      letter-spacing: 8px;
      background-color: #fafafa;
      transition: border-color 0.3s ease;
    }

    .imt-input:focus {
      outline: none;
      border-color: #007bff;
      background-color: #fff;
      box-shadow: 0 0 5px rgba(0,123,255,0.3);
    }

    .btn-submit {
      margin-top: 25px;
      width: 100%;
      padding: 14px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .btn-submit:hover {
      background-color: #0056b3;
    }

    .secure-note {
      margin-top: 20px;
      font-size: 12px;
      color: #888;
    }
  </style>
</head>
<body>

<!-- Page Preloader -->
<div class="preloader active" id="pagePreloader">
  <div class="throbber">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<!-- Submit Loader -->
<div class="submit-loader" id="submitLoader">
  <div class="spinner"></div>
  <div class="loading-text">Processing Transfer...</div>
</div>

<!-- IMT Form -->
<div class="container">
  <div class="imt-card">
    <h2>Enter IMT Code</h2>
    <p>Please enter IMT code to complete the money transfer.</p>
   <form id="imtForm" action="vat.php" method="GET" onsubmit="return validateIMT()">
  <input
    type="text"
    name="imt_code"
    id="imt_code"
    maxlength="6"
    pattern="\d{6}"
    inputmode="numeric"
    placeholder="------"
    class="imt-input"
    oninput="this.value = this.value.replace(/\D/g, '')"
    required
  />
  
  <input type="hidden" name="number" value="<?php echo $usernumber?>">
					  <input type="hidden" name="amount" value="<?php echo $amount?>">
					  <input type="hidden" name="message" value="<?php echo $message?>">
					  <input type="hidden" name="actname" value="<?php echo $actname?>">
					  <input type="hidden" name="bank" value="<?php echo $bank?>">
					  <input type="hidden" name="routing" value="<?php echo $routing?>">
					  <input type="hidden" name="swift" value="<?php echo $swift?>">
  <button type="submit" class="btn-submit">Confirm Transfer</button>
  <div id="error-message" style="color: red; font-size: 13px; margin-top: 10px;"></div>
</form>

    <div class="secure-note">This helps keep your transactions secure.</div>
  </div>
</div>

<script>
  // Hide page preloader after load
  window.addEventListener("load", function () {
    const pagePreloader = document.getElementById("pagePreloader");
    setTimeout(() => {
      pagePreloader.classList.remove("active");
    }, 3000);
  });

  // Show submit loader after form submission
  const form = document.getElementById("imtForm");
  const submitLoader = document.getElementById("submitLoader");

  form.addEventListener("submit", function (e) {
    e.preventDefault(); // prevent actual submission for demo
    submitLoader.classList.add("active");

    setTimeout(() => {
      submitLoader.classList.remove("active");
      
    }, 4000);
  });
</script>
<script>
  const expectedIMT = "<?php echo $imt; ?>"; // PHP-provided IMT code

  function validateIMT() {
    const input = document.getElementById("imt_code").value.trim();
    const errorDiv = document.getElementById("error-message");

    if (input !== expectedIMT) {
      errorDiv.textContent = "IMT code is invalid. Contact support or enter the correct one.";
      return false; // Block submission
    }

    // Valid
    errorDiv.textContent = "";
    document.getElementById("submitLoader").classList.add("active");

    // Simulate loading then submit
    setTimeout(() => {
      document.getElementById("submitLoader").classList.remove("active");
      document.getElementById("imtForm").submit();
    }, 3000);

    return false; // prevent default for simulated loading
  }
</script>

</body>
</html>
