<div class="row g-3">
  <div class="col-md-3">
    <div class="card card-compact p-3">
      <div class="small-muted">Total Loans</div>
      <div class="kpi"><?= esc($totalLoans ?? 0) ?></div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card card-compact p-3">
      <div class="small-muted">Pending</div>
      <div class="kpi"><?= esc($pending ?? 0) ?></div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card card-compact p-3">
      <div class="small-muted">Disbursed</div>
      <div class="kpi"><?= esc($disbursed ?? 0) ?></div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card card-compact p-3">
      <div class="small-muted">Outstanding (Est.)</div>
      <div class="kpi"><?= esc(number_format($outstanding ?? 0,2)) ?></div>
    </div>
  </div>

  <div class="col-md-8">
    <div class="card p-3">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h6 class="mb-0">Applications (Last 7 days)</h6>
        <small class="small-muted">Realtime</small>
      </div>
      <canvas id="applicationsChart" height="120"></canvas>
    </div>

    <div class="card p-3 mt-3">
      <h6 class="mb-3">Recent Applications</h6>
      <div class="table-responsive">
        <table class="table table-hover align-middle">
          <thead>
            <tr><th>UID</th><th>User</th><th>Product</th><th>Amount</th><th>Status</th><th>Action</th></tr>
          </thead>
          <tbody>
            <?php foreach($recent as $r): ?>
              <tr>
                <td><?= esc($r['loan_uid']) ?></td>
                <td><?= esc($r['user_name'] ?? $r['user_id']) ?></td>
                <td><?= esc($r['product_name'] ?? $r['product_id']) ?></td>
                <td>₹ <?= esc(number_format($r['amount'],2)) ?></td>
                <td><span class="badge bg-<?= $r['status']=='pending' ? 'warning text-dark' : ($r['status']=='approved'?'info':'success') ?>"><?= esc($r['status']) ?></span></td>
                <td class="table-actions">
                  <a class="btn btn-sm btn-outline-primary" href="/admin/loans/view/<?= $r['id'] ?>">View</a>
                </td>
              </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card p-3">
      <h6>Products</h6>
      <ul class="list-unstyled">
        <?php foreach($products as $p): ?>
          <li class="mb-2">
            <div class="d-flex justify-content-between">
              <div>
                <strong><?= esc($p['name']) ?></strong><br>
                <small class="small-muted">Interest: <?= esc($p['base_interest']) ?>% • Fee: <?= esc($p['processing_fee_pct']) ?>%</small>
              </div>
              <div class="text-end">
                <a class="btn btn-sm btn-outline-secondary" href="/admin/products">Manage</a>
              </div>
            </div>
          </li>
        <?php endforeach; ?>
      </ul>
    </div>

    <div class="card p-3 mt-3">
      <h6>Quick Actions</h6>
      <a class="btn btn-primary w-100 mb-2" href="/admin/loans">View all loans</a>
      <a class="btn btn-outline-primary w-100" href="/admin/products">Add Product</a>
    </div>
  </div>
</div>

<script>
const ctx = document.getElementById('applicationsChart').getContext('2d');
const labels = <?= json_encode(array_column($chartData ?? [], 'label')) ?>;
const data = <?= json_encode(array_column($chartData ?? [], 'count')) ?>;
new Chart(ctx, {
  type:'line',
  data:{ labels, datasets:[{ label:'Applications', data, tension:0.3, fill:true, borderColor:'#2b8cff', backgroundColor:'rgba(43,140,255,0.12)', pointRadius:3 }]},
  options:{ responsive:true, plugins:{ legend:{ display:false } }, scales:{ y:{ beginAtZero:true }}}
});
</script>