<?= $this->include('layout/header') ?>
<style>
  .metric-card { color: #fff; }
  .gradient-blue { background: linear-gradient(135deg, #00a3ff 0%, #007bff 100%); }
  .gradient-teal { background: linear-gradient(135deg, #00c9a7 0%, #00b894 100%); }
  .metric-icon { opacity: 0.9; }
  .metric-card .card-body { min-height: 110px; }
</style>

<div class="row g-3">
  <div class="col-md-3">
    <div class="card metric-card gradient-blue">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="small"><?= lang('App.pending_applications') ?></div>
          <div class="fs-3 fw-bold"><?= esc($metrics['pendingApplications']) ?></div>
        </div>
        <i class="bi bi-ui-checks-grid fs-1 metric-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card metric-card gradient-blue">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="small"><?= lang('App.active_students') ?></div>
          <div class="fs-3 fw-bold"><?= esc($metrics['activeStudents']) ?></div>
        </div>
        <i class="bi bi-mortarboard fs-1 metric-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card metric-card gradient-blue">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="small"><?= lang('App.active_staffs') ?></div>
          <div class="fs-3 fw-bold"><?= esc($metrics['activeStaffs']) ?></div>
        </div>
        <i class="bi bi-people fs-1 metric-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card metric-card gradient-blue">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="small"><?= lang('App.total_books') ?></div>
          <div class="fs-3 fw-bold"><?= esc($metrics['totalBooks']) ?></div>
        </div>
        <i class="bi bi-journal-text fs-1 metric-icon"></i>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="card metric-card gradient-teal">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="small"><?= lang('App.daily_visitor_logs') ?></div>
          <div class="fs-3 fw-bold"><?= esc($metrics['dailyVisitorLogs']) ?></div>
        </div>
        <i class="bi bi-eye fs-1 metric-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card metric-card gradient-teal">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="small"><?= lang('App.daily_phone_logs') ?></div>
          <div class="fs-3 fw-bold"><?= esc($metrics['dailyPhoneLogs']) ?></div>
        </div>
        <i class="bi bi-telephone fs-1 metric-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card metric-card gradient-teal">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="small"><?= lang('App.daily_enquiries') ?></div>
          <div class="fs-3 fw-bold"><?= esc($metrics['dailyEnquiries']) ?></div>
        </div>
        <i class="bi bi-question-circle fs-1 metric-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card metric-card gradient-teal">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="small"><?= lang('App.daily_postal_exchanges') ?></div>
          <div class="fs-3 fw-bold"><?= esc($metrics['dailyPostalExchanges']) ?></div>
        </div>
        <i class="bi bi-arrow-left-right fs-1 metric-icon"></i>
      </div>
    </div>
  </div>
</div>

<!-- Chart placeholder removed per request -->
<?= $this->include('layout/footer') ?>