<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>KiliPay Payin Test</title>
<style>
  body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
  }
  label {
    display: block;
    margin: 10px 0 5px;
  }
  input, select {
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    box-sizing: border-box;
  }
  button {
    margin-top: 15px;
    padding: 10px 15px;
    font-size: 1rem;
    cursor: pointer;
  }
  button:disabled {
    background: #ccc;
    cursor: not-allowed;
  }
  #response {
    margin-top: 20px;
    padding: 15px;
    background: #f0f0f0;
    border-radius: 5px;
    white-space: pre-wrap;
    font-family: monospace;
  }
</style>
</head>
<body>

<h2>KiliPay Payin Test Form</h2>

<form id="payinForm">
  <label for="merchant_key">Merchant Key</label>
  <input type="text" id="merchant_key" name="merchant_key" required placeholder="Enter your merchant key" />

  <label for="amount">Amount</label>
  <input type="number" id="amount" name="amount" min="0.01" step="0.01" required placeholder="Enter amount e.g. 100.00" />

  <label for="currency">Currency</label>
  <select id="currency" name="currency" required>
    <option value="pkr" selected>PKR</option>
    <option value="usd">USD</option>
    <option value="eur">EUR</option>
    <!-- Add more currencies here if needed -->
  </select>

  <label for="txn_id">Transaction ID (unique)</label>
  <input type="text" id="txn_id" name="txn_id" required placeholder="Enter unique txn ID e.g. TXN123456" />

  <button type="submit">Initiate Payment</button>
</form>

<div id="response"></div>

<script>
const form = document.getElementById('payinForm');
const responseDiv = document.getElementById('response');

form.addEventListener('submit', function(e) {
  e.preventDefault();

  // Show loading message and disable button
  responseDiv.textContent = 'Processing payment...';
  const submitBtn = form.querySelector('button[type="submit"]');
  submitBtn.disabled = true;

  const formData = new FormData(this);

  fetch('https://fastpay.rdnslvhost.in.net/api/payink.php', { // <-- Your PHP endpoint here
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
  // Display response in the debug box
  responseDiv.textContent = JSON.stringify(data, null, 2);

  // ✅ Redirect user to KiliPay payment page if available
  if (data.status === 'success' && data.gateway_status === '0015' && data.payment_url) {
    responseDiv.textContent += "\n\nRedirecting to payment page...";
    setTimeout(() => {
      window.location.href = data.payment_url;
    }, 2000); // 2-second delay
  }
})

  .catch(err => {
    responseDiv.textContent = 'Error: ' + err.message;
  })
  .finally(() => {
    // Re-enable button after request finishes
    submitBtn.disabled = false;
  });
});
</script>

</body>
</html>
