<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kings Of States Network | ISP Control Center</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
  --bg-main: #0f1218;
  --bg-card: #161b24;
  --bg-card-hover: #1c222e;
  --border-color: #262d3d;
  --silver-light: #e2e8f0;
  --silver-muted: #8e9bb0;
  --accent: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.18);
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
body { background: var(--bg-main); color: var(--silver-light); min-height: 100vh; display: flex; }

/* Sidebar */
.sidebar { width: 260px; background: var(--bg-card); border-right: 1px solid var(--border-color); padding: 24px; display: flex; flex-direction: column; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #475569, #1e293b); border: 1px solid #64748b; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.brand h2 { font-size: 16px; font-weight: 800; letter-spacing: 0.5px; color: #fff; line-height: 1.2; }
.brand span { color: #94a3b8; font-size: 11px; font-weight: 600; text-transform: uppercase; }

.nav-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.nav-item { padding: 12px 16px; border-radius: 10px; color: var(--silver-muted); text-decoration: none; font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: 0.2s; }
.nav-item:hover, .nav-item.active { background: var(--border-color); color: #fff; }
.nav-item.active { border-left: 3px solid var(--accent); background: linear-gradient(90deg, var(--accent-glow), transparent); }

/* Main Content */
.main { flex: 1; padding: 32px; overflow-y: auto; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.header h1 { font-size: 24px; font-weight: 800; color: #fff; }
.badge-live { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: var(--success); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.badge-live::before { content: ""; width: 7px; height: 7px; background: var(--success); border-radius: 50%; display: inline-block; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 32px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 22px; transition: 0.2s; }
.stat-card:hover { border-color: #3b475c; transform: translateY(-2px); }
.stat-label { font-size: 12.5px; color: var(--silver-muted); font-weight: 600; text-transform: uppercase; margin-bottom: 8px; }
.stat-value { font-size: 26px; font-weight: 800; color: #fff; }
.stat-sub { font-size: 11.5px; color: var(--silver-muted); margin-top: 4px; }

/* Panels */
.tab-content { display: none; }
.tab-content.active { display: block; }
.card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; margin-bottom: 24px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.card-header h3 { font-size: 17px; font-weight: 700; color: #fff; }

/* Form Controls */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
select, input, button { font-family: inherit; font-size: 13.5px; }
select, input { background: #0b0e14; border: 1px solid var(--border-color); color: #fff; padding: 10px 16px; border-radius: 10px; outline: none; }
select:focus, input:focus { border-color: var(--accent); }
.btn { background: var(--accent); color: #fff; border: 0; padding: 10px 20px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.btn:hover { opacity: 0.9; }

/* Tables */
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
th { background: #11151e; color: var(--silver-muted); padding: 14px 16px; font-weight: 700; text-transform: uppercase; font-size: 11px; border-bottom: 1px solid var(--border-color); }
td { padding: 14px 16px; border-bottom: 1px solid var(--border-color); color: var(--silver-light); }
tr:hover td { background: var(--bg-card-hover); }
.status-pill { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; display: inline-block; }
.status-ACTIVE { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.status-USED { background: rgba(142, 155, 176, 0.15); color: var(--silver-muted); }
.status-SUCCESS { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.status-PENDING { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.code-box { font-family: monospace; font-weight: 800; color: #60a5fa; background: #0b0e14; padding: 4px 8px; border-radius: 6px; }
.alert-success { background: rgba(16, 185, 129, 0.15); border: 1px solid var(--success); color: #fff; padding: 12px 18px; border-radius: 10px; margin-bottom: 20px; }
</style>
</head>
<body>

<aside class="sidebar">
  <div class="brand">
    <div class="brand-icon">♛</div>
    <div>
      <h2>KINGS OF STATES</h2>
      <span>ISP Core Engine</span>
    </div>
  </div>

  <ul class="nav-links">
    <li class="nav-item active" onclick="showTab('tab-overview', this)">📊 Dashboard</li>
    <li class="nav-item" onclick="showTab('tab-vouchers', this)">🎟 Vouchers</li>
    <li class="nav-item" onclick="showTab('tab-sessions', this)">⚡ Active Sessions</li>
    <li class="nav-item" onclick="showTab('tab-transactions', this)">💳 Palpluss / M-Pesa</li>
    <li class="nav-item" onclick="showTab('tab-packages', this)">📦 13 Packages</li>
  </ul>
</aside>

<main class="main">
  <div class="header">
    <div>
      <h1>Operations Dashboard</h1>
      <p style="color: var(--silver-muted); font-size: 13px; margin-top: 4px;">Connected to FreeRADIUS Database • states.kingshub.co.ke</p>
    </div>
    <div class="badge-live">RADIUS Cloud Live</div>
  </div>

  
  <!-- Stats Grid -->
  <div class="stats-grid">
    <div class="stat-card">
      <div class="stat-label">Total Revenue</div>
      <div class="stat-value">KES 0.00</div>
      <div class="stat-sub">Automated Collections</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Active Vouchers</div>
      <div class="stat-value">0</div>
      <div class="stat-sub">0 total in pool</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Online Clients</div>
      <div class="stat-value">0</div>
      <div class="stat-sub">Live NAS Connections</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Hotspot Packages</div>
      <div class="stat-value">13 Active</div>
      <div class="stat-sub">2hr to 30 Days</div>
    </div>
  </div>

  <!-- TAB 1: OVERVIEW -->
  <div id="tab-overview" class="tab-content active">
    <div class="card">
      <div class="card-header">
        <h3>⚡ Quick Batch Generator</h3>
      </div>
      <form method="POST" class="form-row">
        <input type="hidden" name="action" value="generate_vouchers">
        <select name="package_id" required>
                      <option value="1">2 Hours Pass - KES 10.00</option>
                      <option value="2">4 Hours Pass - KES 15.00</option>
                      <option value="3">6 Hours Pass - KES 20.00</option>
                      <option value="4">12 Hours Pass - KES 30.00</option>
                      <option value="5">24 Hours Pass - KES 40.00</option>
                      <option value="6">2 Days Pass - KES 60.00</option>
                      <option value="7">3 Days Pass - KES 80.00</option>
                      <option value="8">5 Days Pass - KES 120.00</option>
                      <option value="9">Weekly Pass - KES 150.00</option>
                      <option value="10">10 Days Pass - KES 200.00</option>
                      <option value="11">Fortnight Pass - KES 300.00</option>
                      <option value="12">3 Weeks Pass - KES 400.00</option>
                      <option value="13">Monthly Pass - KES 600.00</option>
                  </select>
        <input type="number" name="quantity" value="10" min="1" max="100" placeholder="Qty" required style="width: 90px;">
        <button type="submit" class="btn">⚡ Generate Vouchers</button>
      </form>
    </div>

    <div class="card">
      <div class="card-header">
        <h3>Recent Transactions (Palpluss / M-Pesa)</h3>
      </div>
      <div class="table-responsive">
        <table>
          <thead>
            <tr>
              <th>Receipt</th>
              <th>Phone</th>
              <th>Package</th>
              <th>Amount</th>
              <th>Voucher Code</th>
              <th>Status</th>
              <th>Date</th>
            </tr>
          </thead>
          <tbody>
                      </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- TAB 2: VOUCHERS -->
  <div id="tab-vouchers" class="tab-content">
    <div class="card">
      <div class="card-header">
        <h3>Generated Vouchers</h3>
      </div>
      <div class="table-responsive">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Voucher Code</th>
              <th>Package</th>
              <th>Rate Limit</th>
              <th>Status</th>
              <th>Created Date</th>
            </tr>
          </thead>
          <tbody>
                      </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- TAB 3: SESSIONS -->
  <div id="tab-sessions" class="tab-content">
    <div class="card">
      <div class="card-header">
        <h3>Live RADIUS Active Sessions</h3>
      </div>
      <div class="table-responsive">
        <table>
          <thead>
            <tr>
              <th>Session ID</th>
              <th>Username</th>
              <th>NAS IP (Router)</th>
              <th>Framed IP (Client)</th>
              <th>Uptime</th>
              <th>Data (DL/UL)</th>
            </tr>
          </thead>
          <tbody>
                          <tr><td colspan="6" style="text-align: center; color: var(--silver-muted);">No active clients connected right now.</td></tr>
                      </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- TAB 4: TRANSACTIONS -->
  <div id="tab-transactions" class="tab-content">
    <div class="card">
      <div class="card-header">
        <h3>Palpluss / M-Pesa Transaction Ledger</h3>
      </div>
      <div class="table-responsive">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Receipt</th>
              <th>Phone</th>
              <th>Package</th>
              <th>Amount</th>
              <th>Voucher</th>
              <th>Status</th>
              <th>Timestamp</th>
            </tr>
          </thead>
          <tbody>
                      </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- TAB 5: PACKAGES -->
  <div id="tab-packages" class="tab-content">
    <div class="card">
      <div class="card-header">
        <h3>13 Official Packages</h3>
      </div>
      <div class="table-responsive">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Package Name</th>
              <th>Price</th>
              <th>Validity (Minutes)</th>
              <th>Speed Limit</th>
              <th>Type</th>
            </tr>
          </thead>
          <tbody>
                        <tr>
              <td>#1</td>
              <td style="font-weight: 700; color: #fff;">2 Hours Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 10.00</td>
              <td>135 min (2.3 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#2</td>
              <td style="font-weight: 700; color: #fff;">4 Hours Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 15.00</td>
              <td>270 min (4.5 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#3</td>
              <td style="font-weight: 700; color: #fff;">6 Hours Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 20.00</td>
              <td>396 min (6.6 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#4</td>
              <td style="font-weight: 700; color: #fff;">12 Hours Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 30.00</td>
              <td>792 min (13.2 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#5</td>
              <td style="font-weight: 700; color: #fff;">24 Hours Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 40.00</td>
              <td>1584 min (26.4 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#6</td>
              <td style="font-weight: 700; color: #fff;">2 Days Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 60.00</td>
              <td>3180 min (53 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#7</td>
              <td style="font-weight: 700; color: #fff;">3 Days Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 80.00</td>
              <td>4740 min (79 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#8</td>
              <td style="font-weight: 700; color: #fff;">5 Days Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 120.00</td>
              <td>7920 min (132 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#9</td>
              <td style="font-weight: 700; color: #fff;">Weekly Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 150.00</td>
              <td>11100 min (185 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#10</td>
              <td style="font-weight: 700; color: #fff;">10 Days Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 200.00</td>
              <td>15840 min (264 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#11</td>
              <td style="font-weight: 700; color: #fff;">Fortnight Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 300.00</td>
              <td>22176 min (369.6 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#12</td>
              <td style="font-weight: 700; color: #fff;">3 Weeks Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 400.00</td>
              <td>33264 min (554.4 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                        <tr>
              <td>#13</td>
              <td style="font-weight: 700; color: #fff;">Monthly Pass</td>
              <td style="font-weight: 800; color: #60a5fa;">KES 600.00</td>
              <td>43200 min (720 hrs)</td>
              <td>5M/5M</td>
              <td><span class="status-pill status-ACTIVE">HOTSPOT</span></td>
            </tr>
                      </tbody>
        </table>
      </div>
    </div>
  </div>
</main>

<script>
function showTab(tabId, el) {
  document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
  document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
  document.getElementById(tabId).classList.add('active');
  el.classList.add('active');
}
</script>
</body>
</html>