<?php // claims overview tab — included by claims.php ?>
<?php if ($tab === 'overview'): ?>
<!-- ── OVERVIEW TAB ── -->

<!-- KPI Row 1 -->
<div class="kpi-grid">
  <div class="kpi">
    <div class="kpi-top">
      <div class="kpi-icon" style="background:rgba(75,158,255,.12)"><i class="bi bi-hand-index-thumb-fill" style="color:#4b9eff"></i></div>
      <?php $ytClaims = qval($conn,"SELECT COUNT(*) c FROM voucher_claims WHERE DATE(claimed_at)=DATE(NOW()-INTERVAL 1 DAY)");
        $clTrend = $sTodayClaims > $ytClaims ? 'up' : ($sTodayClaims < $ytClaims ? 'dn' : 'nt'); ?>
      <span class="trend trend-<?= $clTrend ?>">
        <i class="bi bi-arrow-<?= $clTrend==='up'?'up':'down' ?>-short"></i><?= $sTodayClaims ?>
      </span>
    </div>
    <div class="kpi-val"><?= number_format($sTotalClaims) ?></div>
    <div class="kpi-lbl">Total Claims</div>
    <div class="kpi-sub"><?= $sTodayClaims ?> today</div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div class="kpi-icon" style="background:rgba(45,189,135,.12)"><i class="bi bi-check-circle-fill" style="color:#2dbd87"></i></div>
      <span class="trend trend-<?= $sTodayRedeem>0?'up':'nt' ?>"><i class="bi bi-arrow-<?= $sTodayRedeem>0?'up':'right' ?>-short"></i><?= $sTodayRedeem ?></span>
    </div>
    <div class="kpi-val"><?= number_format($sRedeemed) ?></div>
    <div class="kpi-lbl">Redeemed</div>
    <div class="kpi-sub"><?= $sTodayRedeem ?> today</div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div class="kpi-icon" style="background:rgba(245,197,24,.12)"><i class="bi bi-hourglass-split" style="color:#f5c518"></i></div>
    </div>
    <div class="kpi-val"><?= number_format($sPending) ?></div>
    <div class="kpi-lbl">Pending</div>
    <div class="kpi-sub">Claimed, not yet used</div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div class="kpi-icon" style="background:rgba(232,160,32,.12)"><i class="bi bi-percent" style="color:var(--accent)"></i></div>
    </div>
    <div class="kpi-val"><?= $sRate ?>%</div>
    <div class="kpi-lbl">Redemption Rate</div>
    <div class="kpi-sub"><?= $sRedeemed ?> of <?= $sTotalClaims ?> claims used</div>
  </div>
</div>

<!-- KPI Row 2 -->
<div class="kpi-grid" style="margin-bottom:28px">
  <div class="kpi">
    <div class="kpi-top"><div class="kpi-icon" style="background:rgba(75,158,255,.12)"><i class="bi bi-people-fill" style="color:#4b9eff"></i></div></div>
    <div class="kpi-val"><?= number_format($sCustomers) ?></div>
    <div class="kpi-lbl">Customers</div>
    <div class="kpi-sub">Registered users</div>
  </div>
  <div class="kpi">
    <div class="kpi-top"><div class="kpi-icon" style="background:rgba(232,160,32,.12)"><i class="bi bi-ticket-perforated-fill" style="color:var(--accent)"></i></div></div>
    <div class="kpi-val"><?= number_format($sVouchers) ?></div>
    <div class="kpi-lbl">Vouchers</div>
    <div class="kpi-sub"><?= $sActiveVouchers ?> active now</div>
  </div>
  <div class="kpi">
    <div class="kpi-top"><div class="kpi-icon" style="background:rgba(45,189,135,.12)"><i class="bi bi-person-check-fill" style="color:#2dbd87"></i></div></div>
    <div class="kpi-val"><?= $sCustomers > 0 ? round($sTotalClaims / $sCustomers, 1) : 0 ?></div>
    <div class="kpi-lbl">Avg Claims/User</div>
    <div class="kpi-sub">Per registered customer</div>
  </div>
  <div class="kpi">
    <div class="kpi-top"><div class="kpi-icon" style="background:rgba(224,82,82,.12)"><i class="bi bi-clock-history" style="color:#e05252"></i></div></div>
    <?php $expiredV = qval($conn,"SELECT COUNT(*) c FROM vouchers WHERE parent_voucher_id IS NULL AND end_date < '$today'"); ?>
    <div class="kpi-val"><?= $expiredV ?></div>
    <div class="kpi-lbl">Expired Vouchers</div>
    <div class="kpi-sub"><?= $sVouchers - $expiredV ?> still valid</div>
  </div>
</div>

<!-- 30-day Chart -->
<div class="adm-card mb-4">
  <div class="sec-hd">
    <div class="sec-hd-title"><i class="bi bi-bar-chart-line-fill"></i>30-Day Activity Trend</div>
    <span style="font-size:12px;color:var(--muted)">Claims &amp; Redemptions</span>
  </div>
  <canvas id="chartMain" style="max-height:220px"></canvas>
  <div class="chart-summary">
    <div class="chart-summary-item"><span class="dot" style="background:#4b9eff"></span><span style="color:var(--muted)">Claims: <strong style="color:var(--text)"><?= array_sum(array_column($daily,'claims')) ?></strong></span></div>
    <div class="chart-summary-item"><span class="dot" style="background:#2dbd87"></span><span style="color:var(--muted)">Redeemed: <strong style="color:var(--text)"><?= array_sum(array_column($daily,'redeemed')) ?></strong></span></div>
    <div class="chart-summary-item" style="margin-left:auto"><span style="color:var(--muted);font-size:12px">Last 30 days</span></div>
  </div>
</div>

<!-- Voucher Performance -->
<div class="adm-card">
  <div class="sec-hd">
    <div class="sec-hd-title"><i class="bi bi-trophy-fill"></i>Voucher Performance</div>
    <a href="?tab=vouchers" class="btn-export"><i class="bi bi-arrow-right"></i>Full Log</a>
  </div>
  <div class="perf-bar-wrap">
  <?php
  $cols = array_column($vPerfRows, 'total_claims');
  $maxClaims = $cols ? max(1, max($cols)) : 1;
  foreach ($vPerfRows as $vr):
    $pct    = $vr['total_claims'] > 0 ? round($vr['redeemed'] / $vr['total_claims'] * 100) : 0;
    $barW   = round($vr['total_claims'] / $maxClaims * 100);
    $isExp  = $vr['end_date'] < $today;
    $isUp   = $vr['start_date'] > $today;
    $status = $isExp ? 'expired' : ($isUp ? 'upcoming' : 'active');
    $statusLabel = ['active'=>'Active','expired'=>'Expired','upcoming'=>'Upcoming'][$status];
    $barColor = $pct > 60 ? '#2dbd87' : ($pct > 30 ? '#f5c518' : '#4b9eff');
  ?>
  <div class="perf-item">
    <div class="perf-meta">
      <div>
        <div class="perf-name"><?= htmlspecialchars($vr['event_name']) ?>
          <span class="vs-pill vs-<?= $status ?>" style="margin-left:6px;vertical-align:middle"><?= $statusLabel ?></span>
        </div>
        <?php if($vr['type']): ?><div class="perf-type"><?= htmlspecialchars($vr['type']) ?></div><?php endif; ?>
        <div style="font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px"><?= htmlspecialchars($vr['code']) ?></div>
      </div>
      <div class="perf-nums">
        <div>
          <div class="perf-num" style="color:var(--accent)"><?= $vr['total_claims'] ?></div>
          <div class="perf-num-lbl">claims</div>
        </div>
        <div>
          <div class="perf-num" style="color:#2dbd87"><?= $vr['redeemed'] ?></div>
          <div class="perf-num-lbl">redeemed</div>
        </div>
        <div>
          <div class="perf-num" style="color:#4b9eff"><?= $vr['unique_users'] ?></div>
          <div class="perf-num-lbl">users</div>
        </div>
      </div>
    </div>
    <div class="perf-track">
      <div class="perf-fill" style="width:<?= $barW ?>%;background:<?= $barColor ?>"></div>
    </div>
    <div class="perf-chips">
      <span class="chip chip-<?= $pct>60?'green':($pct>30?'yellow':'blue') ?>"><i class="bi bi-percent"></i> <?= $pct ?>% redemption rate</span>
      <span class="chip chip-muted"><i class="bi bi-arrow-repeat"></i> Max <?= $vr['max_per_user'] ?>/user</span>
      <span class="chip chip-<?= $vr['is_public']?'green':'muted' ?>"><i class="bi bi-<?= $vr['is_public']?'globe2':'lock' ?>"></i> <?= $vr['is_public']?'Public':'Private' ?></span>
      <?php if($vr['pending']>0): ?><span class="chip chip-yellow"><i class="bi bi-hourglass"></i> <?= $vr['pending'] ?> pending</span><?php endif; ?>
    </div>
  </div>
  <?php endforeach; ?>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const labels30   = <?= json_encode(array_column($daily,'label')) ?>;
const claims30   = <?= json_encode(array_column($daily,'claims')) ?>;
const redeemed30 = <?= json_encode(array_column($daily,'redeemed')) ?>;
new Chart(document.getElementById('chartMain'),{
  type:'line',
  data:{labels:labels30,datasets:[
    {label:'Claims',data:claims30,borderColor:'#4b9eff',backgroundColor:'rgba(75,158,255,.08)',fill:true,tension:.35,pointRadius:2,pointHoverRadius:5,borderWidth:2},
    {label:'Redeemed',data:redeemed30,borderColor:'#2dbd87',backgroundColor:'rgba(45,189,135,.08)',fill:true,tension:.35,pointRadius:2,pointHoverRadius:5,borderWidth:2},
  ]},
  options:{
    responsive:true,maintainAspectRatio:true,interaction:{mode:'index',intersect:false},
    plugins:{legend:{display:false},tooltip:{backgroundColor:'#1a1e28',borderColor:'#232839',borderWidth:1,titleColor:'#dde1ee',bodyColor:'#6b7394',padding:10}},
    scales:{
      x:{grid:{color:'rgba(255,255,255,.03)'},ticks:{color:'#6b7394',font:{size:10},maxTicksLimit:10}},
      y:{grid:{color:'rgba(255,255,255,.04)'},ticks:{color:'#6b7394',font:{size:11},beginAtZero:true,stepSize:1}}
    }
  }
});
</script>

<!-- ══════════════════════════════════════════════════════════════════════ -->

<?php endif; // tab === overview ?>
