<?php
require_once '../includes/config.php';
requireLogin();

$page_title = "Dashboard";
$active_nav = "dashboard.php";
$current_user = getUser($_SESSION['user_id']);
$uid = (int)$_SESSION['user_id'];

$balance       = isset($current_user['balance'])  ? floatval($current_user['balance'])  : 0.0;
$bonus         = isset($current_user['bonus'])     ? floatval($current_user['bonus'])    : 0.0;
$username      = htmlspecialchars($current_user['username'] ?? 'User');
$avatar_letter = strtoupper(substr($username, 0, 1));

// Total orders
$r = $conn->query("SELECT COUNT(*) c FROM orders WHERE user_id=$uid");
$smm_total = ($r && $row = $r->fetch_assoc()) ? intval($row['c']) : 0;
if ($r) $r->free();

$r = $conn->query("SELECT COUNT(*) c FROM vtu_orders WHERE user_id=$uid");
$vtu_total = ($r && $row = $r->fetch_assoc()) ? intval($row['c']) : 0;
if ($r) $r->free();

$total_orders = $smm_total + $vtu_total;

// Pending orders
$r = $conn->query("SELECT COUNT(*) c FROM vtu_orders WHERE user_id=$uid AND status='pending'");
$vtu_pending = ($r && $row = $r->fetch_assoc()) ? intval($row['c']) : 0;
if ($r) $r->free();

$r = $conn->query("SELECT COUNT(*) c FROM orders WHERE user_id=$uid AND status IN('Pending','Processing','Inprogress')");
$smm_pending = ($r && $row = $r->fetch_assoc()) ? intval($row['c']) : 0;
if ($r) $r->free();

$pending = $vtu_pending + $smm_pending;

// Total spent — avoid number_format entirely, use plain floatval
$total_spent = 0.0;
$r = $conn->query("SELECT COALESCE(SUM(amount),0) t FROM vtu_orders WHERE user_id=$uid AND status='completed'");
if ($r && $row = $r->fetch_assoc()) { $total_spent += floatval($row['t']); $r->free(); }

$r = $conn->query("SELECT COALESCE(SUM(charge),0) t FROM orders WHERE user_id=$uid AND status='Completed'");
if ($r && $row = $r->fetch_assoc()) { $total_spent += floatval($row['t']); $r->free(); }

// Format all money values once here as strings — never pass raw DB values to number_format again
$fmt_balance     = number_format($balance,     2);
$fmt_bonus       = number_format($bonus,       2);
$fmt_total_spent = number_format($total_spent, 2);

// Referrals
$r = $conn->query("SELECT COUNT(*) c FROM users WHERE referred_by=$uid");
$referrals = ($r && $row = $r->fetch_assoc()) ? intval($row['c']) : 0;
if ($r) $r->free();

// Recent transactions — merge VTU + fund transactions ─────────────────────
$recent_txns = [];

// VTU orders
$r = $conn->query("SELECT 'vtu' src, type, amount, status, created_at,
                    CONCAT(UPPER(network), ' ', JSON_UNQUOTE(JSON_EXTRACT(details,'$.plan'))) desc_
                   FROM vtu_orders WHERE user_id=$uid
                   ORDER BY created_at DESC LIMIT 8");
if ($r) {
    while ($row = $r->fetch_assoc()) $recent_txns[] = $row;
    $r->free();
}

// Fund transactions
$r = $conn->query("SELECT 'fund' src, type, amount, status, created_at, description desc_
                   FROM transactions WHERE user_id=$uid AND type IN('deposit','refund','bonus')
                   ORDER BY created_at DESC LIMIT 4");
if ($r) {
    while ($row = $r->fetch_assoc()) $recent_txns[] = $row;
    $r->free();
}

// Sort merged by date
usort($recent_txns, fn($a,$b) => strtotime($b['created_at']) - strtotime($a['created_at']));
$recent_txns = array_slice($recent_txns, 0, 8);

// Transaction type map
$txn_styles = [
    'data'        => ['bg'=>'rgba(79,142,247,.12)',  'color'=>'#4f8ef7',  'label'=>'Data',       'credit'=>false],
    'airtime'     => ['bg'=>'rgba(249,115,22,.12)',  'color'=>'#f97316',  'label'=>'Airtime',    'credit'=>false],
    'cable'       => ['bg'=>'rgba(167,139,250,.12)', 'color'=>'#a78bfa',  'label'=>'Cable TV',   'credit'=>false],
    'electricity' => ['bg'=>'rgba(234,179,8,.12)',   'color'=>'#eab308',  'label'=>'Electricity','credit'=>false],
    'education'   => ['bg'=>'rgba(34,197,94,.12)',   'color'=>'#22c55e',  'label'=>'Education',  'credit'=>false],
    'deposit'     => ['bg'=>'rgba(34,197,94,.12)',   'color'=>'#22c55e',  'label'=>'Funded',     'credit'=>true],
    'refund'      => ['bg'=>'rgba(34,197,94,.12)',   'color'=>'#22c55e',  'label'=>'Refund',     'credit'=>true],
    'bonus'       => ['bg'=>'rgba(234,179,8,.12)',   'color'=>'#eab308',  'label'=>'Bonus',      'credit'=>true],
    'order'       => ['bg'=>'rgba(99,102,241,.12)',  'color'=>'#6366f1',  'label'=>'Order',      'credit'=>false],
];
$txn_icons = [
    'data'        => '<path d="M1.05 12a11 11 0 0121.9 0"/><path d="M5 12a7 7 0 0114 0"/><path d="M8.91 12a3.09 3.09 0 016.18 0"/>',
    'airtime'     => '<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 011 1.18h3a2 2 0 011.72 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L4.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/>',
    'cable'       => '<rect x="2" y="7" width="20" height="15" rx="2"/><polyline points="17 2 12 7 7 2"/>',
    'electricity' => '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
    'deposit'     => '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>',
    'refund'      => '<polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/>',
    'bonus'       => '<polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><path d="M12 22V7"/>',
    'order'       => '<path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>',
];

function fmt_date(string $dt): string {
    $ts = strtotime($dt);
    $diff = time() - $ts;
    if ($diff < 3600)  return round($diff/60) . 'm ago';
    if ($diff < 86400) return round($diff/3600) . 'h ago';
    if ($diff < 172800) return 'Yesterday';
    return date('M d', $ts);
}

include '../includes/header.php';
?>

<!-- ══ MOBILE HERO ═════════════════════════════════════════════════════ -->
<div class="sp-hero">
  <div class="sp-hero-top">
    <div class="sp-hero-user">
      <div class="sp-avatar-sm"><?php echo $avatar_letter; ?></div>
      <div>
        <div class="sp-hero-name">Hello <?php echo $username; ?> 👋</div>
        <div class="sp-hero-tier">Smart Earner</div>
      </div>
    </div>
    <button class="sp-notif-btn" onclick="spToggleNotif()" aria-label="Notifications">
      <div class="sp-notif-dot" id="heroNotifDot" style="display:none"></div>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
    </button>
  </div>

  <div class="sp-balance-block">
    <div class="sp-balance-label">
      Wallet Balance
      <button class="sp-eye-btn" id="heroEyeBtn" aria-label="Toggle balance">
        <svg id="heroEyeIcon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
      </button>
    </div>
    <div class="sp-balance-amount" id="heroBalance">₦<?php echo $fmt_balance; ?></div>
    <div class="sp-bonus-pill">
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><path d="M12 22V7"/></svg>
      Bonus: ₦<?php echo $fmt_bonus; ?>
    </div>
  </div>

  <div class="sp-hero-actions">
    <a href="add-funds.php" class="sp-action-btn">
      <div class="sp-action-circle">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </div>
      <span class="sp-action-label">Add Money</span>
    </a>
    <a href="transactions.php" class="sp-action-btn">
      <div class="sp-action-circle">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
      </div>
      <span class="sp-action-label">Transfer</span>
    </a>
    <a href="orders.php" class="sp-action-btn">
      <div class="sp-action-circle">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
      </div>
      <span class="sp-action-label">History</span>
    </a>
  </div>
</div>

<!-- ══ PAGE CONTENT ════════════════════════════════════════════════════ -->
<div class="sp-content">

  <!-- ── Desktop balance (hidden on mobile) ──────────────────────────── -->
  <div class="sp-desktop-balance" style="display:flex;align-items:center;gap:16px;margin-bottom:24px">
    <div class="sp-card sp-fade-1" style="flex:1;border-radius:var(--r-lg);background:linear-gradient(135deg,#1430e8,#3468f8)">
      <div style="padding:22px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px">
        <div>
          <div style="font-size:12px;color:rgba(255,255,255,.65);font-family:var(--font-head);margin-bottom:4px">Wallet Balance</div>
          <div style="font-family:var(--font-head);font-size:30px;font-weight:800;color:#fff;letter-spacing:-1px" id="deskBalance">₦<?php echo $fmt_balance; ?></div>
          <div style="font-size:12px;color:rgba(255,255,255,.5);margin-top:4px">Bonus: ₦<?php echo $fmt_bonus; ?></div>
        </div>
        <div style="display:flex;gap:10px">
          <a href="add-funds.php" class="sp-btn sp-btn-primary sp-btn-sm" style="background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.3);box-shadow:none">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Add Money
          </a>
          <a href="transactions.php" class="sp-btn sp-btn-sm" style="background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.2)">
            History
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- ── Stats grid ──────────────────────────────────────────────────── -->
  <div class="sp-stats-grid sp-fade-2">
    <div class="sp-stat">
      <div class="sp-stat-icon" style="background:rgba(79,142,247,.12)">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4f8ef7" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
      </div>
      <div>
        <div class="sp-stat-val"><?php echo number_format($total_orders); ?></div>
        <div class="sp-stat-lbl">Total Orders</div>
      </div>
    </div>
    <div class="sp-stat">
      <div class="sp-stat-icon" style="background:rgba(234,179,8,.12)">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      </div>
      <div>
        <div class="sp-stat-val"><?php echo number_format($pending); ?></div>
        <div class="sp-stat-lbl">Pending</div>
      </div>
    </div>
    <div class="sp-stat">
      <div class="sp-stat-icon" style="background:rgba(239,68,68,.12)">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
      </div>
      <div>
        <div class="sp-stat-val" style="font-size:15px">₦<?php echo $fmt_total_spent; ?></div>
        <div class="sp-stat-lbl">Total Spent</div>
      </div>
    </div>
    <div class="sp-stat">
      <div class="sp-stat-icon" style="background:rgba(34,197,94,.12)">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
      </div>
      <div>
        <div class="sp-stat-val"><?php echo number_format($referrals); ?></div>
        <div class="sp-stat-lbl">Referrals</div>
      </div>
    </div>
  </div>

  <!-- ── Dashboard two-column grid (desktop) ─────────────────────────── -->
  <div class="sp-dash-grid">

    <!-- LEFT column -->
    <div>

      <!-- Quick Actions -->
      <div class="sp-section-title sp-fade-3">
        Quick Actions
      </div>
      <div class="sp-card sp-fade-3 sp-gap-20">
        <div class="sp-card-body">
          <div class="sp-qa-grid">
            <a href="buy-airtime.php" class="sp-qa-item">
              <div class="sp-qa-icon qa-airtime">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 011 1.18h3a2 2 0 011.72 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L4.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
              </div>
              <span class="sp-qa-label">Airtime</span>
            </a>
            <a href="buy-data.php" class="sp-qa-item">
              <div class="sp-qa-icon qa-data">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1.05 12a11 11 0 0121.9 0"/><path d="M5 12a7 7 0 0114 0"/><path d="M8.91 12a3.09 3.09 0 016.18 0"/><line x1="12" y1="12" x2="12.01" y2="12"/></svg>
              </div>
              <span class="sp-qa-label">Data</span>
            </a>
            <a href="cable-tv.php" class="sp-qa-item">
              <div class="sp-qa-icon qa-cable">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="15" rx="2"/><polyline points="17 2 12 7 7 2"/></svg>
              </div>
              <span class="sp-qa-label">Cable TV</span>
            </a>
            <a href="electricity.php" class="sp-qa-item">
              <div class="sp-qa-icon qa-elec">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
              </div>
              <span class="sp-qa-label">Electricity</span>
            </a>
            <a href="education.php" class="sp-qa-item">
              <div class="sp-qa-icon qa-edu">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
              </div>
              <span class="sp-qa-label">Education</span>
            </a>
            <a href="recharge-card.php" class="sp-qa-item">
              <div class="sp-qa-icon qa-recharge">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
              </div>
              <span class="sp-qa-label">Recharge</span>
            </a>
            <a href="bulk-sms.php" class="sp-qa-item">
              <div class="sp-qa-icon qa-sms">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
              </div>
              <span class="sp-qa-label">Bulk SMS</span>
            </a>
            <a href="new-order.php" class="sp-qa-item">
              <div class="sp-qa-icon qa-more">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
              </div>
              <span class="sp-qa-label">Boost</span>
            </a>
          </div>
        </div>
      </div>

      <!-- Recent Transactions -->
      <div class="sp-section-title sp-fade-4" style="margin-top:20px">
        Recent Transactions
        <a href="transactions.php" class="sp-link-sm">View all</a>
      </div>
      <div class="sp-card sp-fade-4">
        <div class="sp-card-body">
          <?php if (empty($recent_txns)): ?>
          <div style="text-align:center;padding:32px 0;color:var(--text-3)">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin-bottom:8px"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
            <p style="font-size:13px;font-weight:500">No transactions yet</p>
          </div>
          <?php else: foreach ($recent_txns as $tx):
            $type   = $tx['type'] ?? 'order';
            $s      = $txn_styles[$type] ?? $txn_styles['order'];
            $ipath  = $txn_icons[$type]  ?? $txn_icons['order'];
            $credit = $s['credit'];
            $amt    = (float)$tx['amount'];
            $desc   = $tx['desc_'] ?? $s['label'];
            // Clean up null JSON values
            $desc   = str_replace(['null null ', 'null '], '', $desc);
            $desc   = trim($desc) ?: $s['label'];
            $stat   = strtolower($tx['status'] ?? 'completed');
            $stat_cls = $stat === 'completed' ? 'sp-badge-success' : ($stat === 'failed' ? 'sp-badge-failed' : 'sp-badge-pending');
          ?>
          <div class="sp-txn-item">
            <div class="sp-txn-icon" style="background:<?php echo $s['bg']; ?>">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="<?php echo $s['color']; ?>" stroke-width="2"><?php echo $ipath; ?></svg>
            </div>
            <div class="sp-txn-desc">
              <div class="sp-txn-name"><?php echo htmlspecialchars($desc); ?></div>
              <div class="sp-txn-date"><?php echo fmt_date($tx['created_at']); ?></div>
            </div>
            <div class="sp-txn-right">
              <div class="sp-txn-amount <?php echo $credit ? 'credit' : 'debit'; ?>">
                <?php echo $credit ? '+' : '-'; ?>₦<?php echo number_format($amt, 2); ?>
              </div>
              <span class="sp-badge <?php echo $stat_cls; ?>"><?php echo ucfirst($stat); ?></span>
            </div>
          </div>
          <?php endforeach; endif; ?>
        </div>
      </div>

    </div><!-- /left -->

    <!-- RIGHT column (desktop sidebar) -->
    <div>

      <!-- Promo -->
      <div class="sp-promo sp-fade-3 sp-gap-20">
        <div class="sp-promo-tag">✨ New</div>
        <h3>Own a Retailer Website</h3>
        <p>Retail all our services: DATA, Recharge cards, AIRTIME and BILLS Payment.</p>
        <a href="reseller" class="sp-promo-btn">Get Started →</a>
      </div>

      <!-- VTU shortcuts -->
      <div class="sp-section-title sp-fade-4" style="margin-top:20px">VTU Services</div>
      <div class="sp-card sp-fade-4 sp-gap-20">
        <div class="sp-card-body" style="padding:10px">
          <?php
          $vtu_links = [
            ['buy-data.php',     'Data Bundle',  '#4f8ef7', 'rgba(79,142,247,.1)', '<path d="M1.05 12a11 11 0 0121.9 0"/><path d="M5 12a7 7 0 0114 0"/><path d="M8.91 12a3.09 3.09 0 016.18 0"/>'],
            ['buy-airtime.php',  'Airtime',      '#f97316', 'rgba(249,115,22,.1)', '<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 011 1.18h3a2 2 0 011.72 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L4.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/>'],
            ['electricity.php',  'Electricity',  '#eab308', 'rgba(234,179,8,.1)',  '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>'],
            ['cable-tv.php',     'Cable TV',     '#a78bfa', 'rgba(167,139,250,.1)','<rect x="2" y="7" width="20" height="15" rx="2"/><polyline points="17 2 12 7 7 2"/>'],
          ];
          foreach ($vtu_links as [$href, $lbl, $color, $bg, $path]):
          ?>
          <a href="<?php echo $href; ?>" style="display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:12px;color:var(--text);text-decoration:none;transition:background .15s" onmouseover="this.style.background='<?php echo $bg; ?>'" onmouseout="this.style.background=''">
            <div style="width:36px;height:36px;border-radius:10px;background:<?php echo $bg; ?>;display:flex;align-items:center;justify-content:center;flex-shrink:0">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="<?php echo $color; ?>" stroke-width="2"><?php echo $path; ?></svg>
            </div>
            <span style="font-size:13px;font-weight:600"><?php echo $lbl; ?></span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-4)" stroke-width="2" style="margin-left:auto"><polyline points="9 18 15 12 9 6"/></svg>
          </a>
          <?php endforeach; ?>
        </div>
      </div>

      <!-- Quick actions (add funds) -->
      <div class="sp-card sp-fade-5" style="margin-top:16px">
        <div class="sp-card-body" style="display:flex;flex-direction:column;gap:10px">
          <a href="add-funds.php" class="sp-btn sp-btn-primary sp-btn-full">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Add Money
          </a>
          <a href="referral.php" class="sp-btn sp-btn-secondary sp-btn-full">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
            Refer & Earn
          </a>
        </div>
      </div>

    </div><!-- /right -->

  </div><!-- /.sp-dash-grid -->

</div><!-- /.sp-content -->

<script>
/* ── Balance toggle ────────────────────────────────────────────────── */
(function() {
  var realBal  = '₦<?php echo $fmt_balance; ?>';
  var masked   = '₦ ••••••';
  var hidden   = false;
  var heroEl   = document.getElementById('heroBalance');
  var deskEl   = document.getElementById('deskBalance');
  var eyeIcon  = document.getElementById('heroEyeIcon');

  var eyeOpen  = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
  var eyeClose = '<path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>';

  document.getElementById('heroEyeBtn').addEventListener('click', function() {
    hidden = !hidden;
    var val = hidden ? masked : realBal;
    if (heroEl) heroEl.textContent = val;
    if (deskEl) deskEl.textContent = val;
    eyeIcon.innerHTML = hidden ? eyeClose : eyeOpen;
  });
})();

/* ── Show hero notif dot when badge has count ──────────────────────── */
var obs = new MutationObserver(function() {
  var badge = document.getElementById('spNotifBadge');
  var dot   = document.getElementById('heroNotifDot');
  if (dot && badge) dot.style.display = badge.classList.contains('hidden') ? 'none' : 'block';
});
var badge = document.getElementById('spNotifBadge');
if (badge) obs.observe(badge, { attributes: true, attributeFilter: ['class'] });
</script>

<?php include '../includes/footer.php'; ?>