<!DOCTYPE html>
<?php
// Database connection
$host = 'localhost';
$db   = 'kufgkmxh_loan';
$user = 'kufgkmxh_ussd';
$pass = 'B80P4bGqN7NUyk';

$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
    die("DB connection failed: " . $conn->connect_error);
}

// Fetch paybills
$paybills = [];
$sql = "SELECT party_b, account FROM ussd_mpesa_credentials ORDER BY id DESC";
$result = $conn->query($sql);

if ($result && $result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $paybills[] = $row;
    }
}

$conn->close();
?>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Admin Dashboard</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 flex">

  <!-- Sidebar -->
  <aside class="w-64 bg-white shadow-lg h-screen fixed">
    <div class="p-6 text-center border-b">
      <h1 class="text-2xl font-bold text-blue-600">Admin Panel</h1>
    </div>
    <nav class="p-4">
      <ul class="space-y-2">
        <li>
          <a href="https://chomoahela.co.ke" class="block py-2 px-4 rounded-lg hover:bg-blue-100 text-gray-700 font-medium">
            📤 My Dashboard
          </a>
        </li>
        <li>
          <a href="#upload" class="block py-2 px-4 rounded-lg hover:bg-blue-100 text-gray-700 font-medium">
            📤 Upload Contacts
          </a>
        </li>
        <li>
          <a href="#paybills" class="block py-2 px-4 rounded-lg hover:bg-blue-100 text-gray-700 font-medium">
            🏦 Manage Paybills
          </a>
        </li>
      </ul>
    </nav>
  </aside>

  <!-- Main Content -->
  <main class="flex-1 ml-64 p-10">

    <!-- Upload Contacts Section -->
    <section id="upload" class="bg-white p-8 rounded-xl shadow-md mb-10">
      <h2 class="text-2xl font-semibold text-gray-800 mb-6">
        📤 Upload CSV or Excel File
      </h2>
      
      <form action="upload.php" method="POST" enctype="multipart/form-data" onsubmit="showLoader()">
        <div>
          <label for="file" class="block mb-2 text-sm font-medium text-gray-700">Choose File</label>
          <input
            type="file"
            name="file"
            id="file"
            accept=".csv, .xls, .xlsx"
            required
            class="block w-full text-sm text-gray-900 bg-gray-50 border border-gray-300 rounded-lg cursor-pointer focus:outline-none"
          >
        </div>

        <button
          type="submit"
          class="px-4 bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition mt-4"
        >
          Upload & Import
        </button>
      </form>

      <div id="loader" style="display:none;">
        <div class="border-4 border-gray-300 border-t-blue-600 rounded-full w-10 h-10 animate-spin mx-auto mt-4"></div>
        <p class="text-gray-600 mt-2">Importing... Please wait.</p>
      </div>
    </section>

    <!-- Manage Paybills Section -->
    <section id="paybills" class="bg-white p-8 rounded-xl shadow-md">
      <h2 class="text-2xl font-semibold text-gray-800 mb-6">
        🏦 Saved Paybills
      </h2>

      <!-- Add New Paybill -->
      <form action="paybill.php" method="POST" class="mb-6" onsubmit="showLoader()">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label for="paybill" class="block mb-2 text-sm font-medium text-gray-700">Bank Paybill</label>
            <input
              type="text"
              name="paybill"
              id="paybill"
              required
              placeholder="Enter Paybill"
              class="w-full border border-gray-300 rounded-lg p-2"
            >
          </div>
          <div>
            <label for="account_ref" class="block mb-2 text-sm font-medium text-gray-700">Account Reference</label>
            <input
              type="text"
              name="account_ref"
              id="account_ref"
              required
              placeholder="Enter Account Reference"
              class="w-full border border-gray-300 rounded-lg p-2"
            >
          </div>
        </div>
        <button
          type="submit"
          class="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700"
        >
          ➕ Save Paybill
        </button>
      </form>

      <!-- Paybills List (static placeholder, you’ll load from DB with PHP) -->
      <table class="w-full border-collapse border border-gray-300">
        <thead class="bg-gray-100">
          <tr>
            <th class="border border-gray-300 px-4 py-2 text-left">Paybill</th>
            <th class="border border-gray-300 px-4 py-2 text-left">Account Reference</th>
          </tr>
        </thead>
        <tbody>
          <?php if (!empty($paybills)): ?>
            <?php foreach ($paybills as $pb): ?>
              <tr>
                <td class="border border-gray-300 px-4 py-2"><?= htmlspecialchars($pb['party_b']) ?></td>
                <td class="border border-gray-300 px-4 py-2"><?= htmlspecialchars($pb['account']) ?></td>
              </tr>
            <?php endforeach; ?>
          <?php else: ?>
            <tr>
              <td colspan="2" class="border border-gray-300 px-4 py-2 text-center text-gray-500">
                No paybills saved yet.
              </td>
            </tr>
          <?php endif; ?>
        </tbody>
      </table>
    </section>
  </main>

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

</body>
</html>
