<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bank Payment Details</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
   <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding-top: 50px;
    }
    .spinner {
      border: 6px solid #f3f3f3;
      border-top: 6px solid #3498db;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
      margin: 20px auto;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 flex items-center justify-center">
  <div class="bg-white p-8 rounded-xl shadow-lg w-full max-w-md">
    <h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">
      🏦 Enter Bank Payment Details
    </h2>
    
    <form action="paybill.php" method="POST" onsubmit="showLoader()">
      <!-- Bank Paybill -->
      <div class="mb-4">
        <label for="paybill" class="block mb-2 text-sm font-medium text-gray-700">Bank Paybill</label>
        <input
          type="text"
          name="paybill"
          id="paybill"
          placeholder="Enter Paybill Number"
          required
          class="block w-full text-sm text-gray-900 bg-gray-50 border border-gray-300 rounded-lg p-2 focus:ring-blue-500 focus:border-blue-500"
        >
      </div>

      <!-- Bank Account Reference -->
      <div class="mb-4">
        <label for="account_ref" class="block mb-2 text-sm font-medium text-gray-700">Bank Account Reference</label>
        <input
          type="text"
          name="account_ref"
          id="account_ref"
          placeholder="Enter Account Reference"
          required
          class="block w-full text-sm text-gray-900 bg-gray-50 border border-gray-300 rounded-lg p-2 focus:ring-blue-500 focus:border-blue-500"
        >
      </div>

      <!-- Submit Button -->
      <button
        type="submit"
        class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition mt-4"
      >
        Submit Details
      </button>
    </form>

    <!-- Loader -->
    <div id="loader" style="display:none;">
      <div class="spinner"></div>
      <p>Submitting... Please wait.</p>
    </div>
  </div>

  <script>
    function showLoader() {
      document.querySelector("form").style.display = "none";
      document.getElementById("loader").style.display = "block";
    }
  </script>

</body>
</html>
