<?php
require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/../includes/functions.php';
requireRole('super_admin');
$pageTitle = 'Dashboard';

$db = db();

try { $totalCustomers = $db->query("SELECT COUNT(*) FROM customers WHERE status='active'")->fetchColumn() ?: 0; } catch (Exception $e) { $totalCustomers = 0; }
try { $totalBranches = $db->query("SELECT COUNT(*) FROM branches WHERE status='active'")->fetchColumn() ?: 0; } catch (Exception $e) { $totalBranches = 0; }
try { $unpaidBills = $db->query("SELECT COUNT(*) FROM bills WHERE status='unpaid'")->fetchColumn() ?: 0; } catch (Exception $e) { $unpaidBills = 0; }
try { $pendingWithdrawals = $db->query("SELECT COUNT(*) FROM withdrawal_requests WHERE status='pending'")->fetchColumn() ?: 0; } catch (Exception $e) { $pendingWithdrawals = 0; }
try { $monthlyRevenue = $db->query("SELECT COALESCE(SUM(amount),0) FROM bills WHERE status='paid' AND MONTH(paid_at)=MONTH(NOW()) AND YEAR(paid_at)=YEAR(NOW())")->fetchColumn() ?: 0; } catch (Exception $e) { $monthlyRevenue = 0; }
try { $totalBalance = $db->query("SELECT COALESCE(SUM(available_balance),0) FROM branch_balances")->fetchColumn() ?: 0; } catch (Exception $e) { 
    try { $totalBalance = $db->query("SELECT COALESCE(SUM(balance),0) FROM branches")->fetchColumn() ?: 0; } catch (Exception $e2) { $totalBalance = 0; }
}

try {
    $recentActivities = $db->query("
        SELECT l.*, u.username 
        FROM activity_logs l 
        LEFT JOIN users u ON l.user_id = u.id 
        ORDER BY l.created_at DESC 
        LIMIT 8
    ")->fetchAll();
} catch (Exception $e) { $recentActivities = []; }

try {
    $topBranches = $db->query("
        SELECT b.name, b.code, bb.available_balance 
        FROM branch_balances bb
        LEFT JOIN branches b ON bb.branch_id = b.id
        ORDER BY bb.available_balance DESC
        LIMIT 5
    ")->fetchAll();
} catch (Exception $e) { $topBranches = []; }

function timeAgo($datetime) {
    $now = new DateTime();
    $past = new DateTime($datetime);
    $diff = $now->diff($past);
    if ($diff->y > 0) return $diff->y . ' thn';
    if ($diff->m > 0) return $diff->m . ' bln';
    if ($diff->d > 0) return $diff->d . ' hr';
    if ($diff->h > 0) return $diff->h . ' jm';
    if ($diff->i > 0) return $diff->i . ' mnt';
    return 'Baru';
}

require __DIR__ . '/../includes/header.php';
require __DIR__ . '/../includes/sidebar.php';
?>

<!-- CSS Spesifik Halaman Dashboard -->
<style>
/* Welcome Banner */
.welcome-banner {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    border-radius: 20px;
    padding: 30px;
    color: white;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 102, 204, 0.2);
}

.welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.welcome-banner::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.welcome-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.welcome-text h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 6px;
}

.welcome-text p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.welcome-date {
    text-align: right;
}

.welcome-date-day {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
}

.welcome-date-info {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 4px;
}

/* Summary Cards */
.summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 25px;
}

.summary-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    color: inherit;
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.summary-card.primary::before { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.summary-card.success::before { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.summary-card.warning::before { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
.summary-card.danger::before { background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%); }
.summary-card.info::before { background: linear-gradient(135deg, #00B8D4 0%, #26C6DA 100%); }
.summary-card.purple::before { background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%); }

.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.summary-card-title {
    color: #666;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
}

.summary-card.primary .summary-card-icon { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.summary-card.success .summary-card-icon { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.summary-card.warning .summary-card-icon { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
.summary-card.danger .summary-card-icon { background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%); }
.summary-card.info .summary-card-icon { background: linear-gradient(135deg, #00B8D4 0%, #26C6DA 100%); }
.summary-card.purple .summary-card-icon { background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%); }

.summary-card-value {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
    color: #003D7A;
    line-height: 1.1;
}

.summary-card-footer {
    font-size: 0.82rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 6px;
}

.summary-card-footer .trend-up { color: #00C853; font-weight: 700; }
.summary-card-footer .trend-down { color: #DC3545; font-weight: 700; }

/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    margin-top: 10px;
}

.section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #003D7A;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title i { color: #0066CC; font-size: 1.3rem; }

/* Card Modern */
.card-modern {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 20px;
    border: none;
}

.card-header-modern {
    color: white;
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card-header-modern.primary { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.card-header-modern.success { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.card-header-modern.warning { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }

.card-header-modern .title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-body-modern { padding: 20px; }

/* Quick Actions */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.quick-action-card {
    background: white;
    border: 2px solid #f0f0f0;
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    color: inherit;
    display: block;
}

.quick-action-card:hover {
    border-color: #0066CC;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.15);
    color: inherit;
}

.quick-action-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto 10px;
}

.quick-action-icon.blue { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.quick-action-icon.green { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.quick-action-icon.orange { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
.quick-action-icon.red { background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%); }
.quick-action-icon.purple { background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%); }
.quick-action-icon.cyan { background: linear-gradient(135deg, #00B8D4 0%, #26C6DA 100%); }

.quick-action-title {
    font-weight: 700;
    color: #003D7A;
    font-size: 0.88rem;
    margin-bottom: 2px;
}

.quick-action-desc {
    font-size: 0.75rem;
    color: #999;
}

/* Activity List */
.activity-list { display: grid; gap: 10px; }

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.activity-item:hover {
    background: #eef5fc;
    transform: translateX(2px);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.activity-icon.success { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.activity-icon.danger { background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%); }
.activity-icon.warning { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
.activity-icon.primary { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.activity-icon.info { background: linear-gradient(135deg, #00B8D4 0%, #26C6DA 100%); }
.activity-icon.secondary { background: linear-gradient(135deg, #607D8B 0%, #90A4AE 100%); }

.activity-content { flex: 1; min-width: 0; }

.activity-title {
    font-weight: 600;
    color: #003D7A;
    font-size: 0.88rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-meta {
    font-size: 0.78rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-time {
    color: #0066CC;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Branch List */
.branch-list { display: grid; gap: 10px; }

.branch-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.branch-item:hover { background: #eef5fc; }

.branch-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.branch-rank.gold { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); }
.branch-rank.silver { background: linear-gradient(135deg, #C0C0C0 0%, #90A4AE 100%); }
.branch-rank.bronze { background: linear-gradient(135deg, #CD7F32 0%, #A0522D 100%); }

.branch-info { flex: 1; min-width: 0; }

.branch-name {
    font-weight: 700;
    color: #003D7A;
    font-size: 0.9rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.branch-code {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.branch-balance {
    font-weight: 800;
    color: #00C853;
    font-size: 0.9rem;
    text-align: right;
    white-space: nowrap;
}

/* Empty State */
.empty-state { text-align: center; padding: 40px 20px; }

.empty-state-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ccc;
}

.empty-state-title {
    color: #666;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 1rem;
}

/* Alert Modern */
.alert-modern {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.92rem;
    border: 2px solid;
}

.alert-modern.success { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.alert-modern.danger { background: #ffebee; border-color: #ef9a9a; color: #c62828; }

.alert-modern i {
    font-size: 1.2rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .welcome-banner { padding: 22px; }
    .welcome-text h2 { font-size: 1.3rem; }
    .welcome-text p { font-size: 0.85rem; }
    .welcome-date-day { font-size: 1.6rem; }
    .welcome-date-info { font-size: 0.78rem; }
    
    .summary-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .summary-card { padding: 14px; }
    .summary-card-value { font-size: 1.3rem; }
    .summary-card-title { font-size: 0.7rem; }
    .summary-card-icon { width: 36px; height: 36px; font-size: 1.05rem; }
    
    .section-title { font-size: 1rem; }
    
    .quick-actions-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .quick-action-card { padding: 14px 8px; }
    .quick-action-icon { width: 46px; height: 46px; font-size: 1.2rem; margin-bottom: 6px; }
    .quick-action-title { font-size: 0.78rem; }
    .quick-action-desc { display: none; }
    
    .card-header-modern { padding: 14px 16px; font-size: 0.95rem; }
    .card-body-modern { padding: 16px; }
}

@media (max-width: 480px) {
    .welcome-banner { padding: 18px; }
    .welcome-text h2 { font-size: 1.15rem; }
    .welcome-date-day { font-size: 1.3rem; }
    
    .summary-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .summary-card { padding: 12px; }
    .summary-card-value { font-size: 1.1rem; }
    .summary-card-footer { font-size: 0.7rem; }
    
    .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
    
    .activity-item { padding: 10px; }
    .activity-icon { width: 36px; height: 36px; font-size: 0.9rem; }
    .activity-title { font-size: 0.82rem; }
    
    .branch-rank { width: 28px; height: 28px; font-size: 0.78rem; }
}
</style>

<div class="main-content">
    <!-- Navbar Modern -->
    <div class="navbar-modern">
        <div class="navbar-left">
            <button class="burger-btn" onclick="toggleSidebar()">
                <i class="bi bi-list"></i>
            </button>
            <div>
                <p class="navbar-greeting">Selamat datang kembali 👋</p>
                <h1 class="navbar-title">Dashboard Super Admin</h1>
            </div>
        </div>
        <div class="navbar-right">
            <span class="navbar-badge">
                <i class="bi bi-shield-check"></i> Super Admin
            </span>
            <a href="/logout.php" class="navbar-user" onclick="return confirm('Yakin ingin logout?')">
                <div class="navbar-user-avatar">
                    <?= strtoupper(substr($_SESSION['username'] ?? 'U', 0, 1)) ?>
                </div>
                <span class="navbar-user-name"><?= htmlspecialchars($_SESSION['username'] ?? 'User') ?></span>
                <i class="bi bi-box-arrow-right"></i>
            </a>
        </div>
    </div>

    <!-- Content Wrapper -->
    <div class="content-wrapper">
        <!-- Welcome Banner -->
        <div class="welcome-banner">
            <div class="welcome-content">
                <div class="welcome-text">
                    <h2>Halo, <?= htmlspecialchars($_SESSION['name'] ?? $_SESSION['username'] ?? 'Admin') ?>! 👋</h2>
                    <p>Berikut ringkasan sistem hari ini. Semoga bisnis Anda semakin sukses!</p>
                </div>
                <div class="welcome-date">
                    <div class="welcome-date-day"><?= date('d') ?></div>
                    <div class="welcome-date-info">
                        <?= strftime('%B %Y', strtotime('now')) ?><br>
                        <i class="bi bi-clock"></i> <span id="liveTime"><?= date('H:i') ?> WIB</span>
                    </div>
                </div>
            </div>
        </div>

        <?= flashMessage() ?>

        <!-- Summary Cards -->
        <div class="summary-row">
            <a href="/admin/customers.php" class="summary-card primary">
                <div class="summary-card-header">
                    <h6 class="summary-card-title">Total Pelanggan</h6>
                    <div class="summary-card-icon">
                        <i class="bi bi-people-fill"></i>
                    </div>
                </div>
                <div class="summary-card-value"><?= number_format($totalCustomers) ?></div>
                <div class="summary-card-footer">
                    <i class="bi bi-circle-fill" style="font-size: 0.5rem; color: #00C853;"></i>
                    Pelanggan aktif
                </div>
            </a>
            
            <a href="/admin/bills.php?status=paid" class="summary-card success">
                <div class="summary-card-header">
                    <h6 class="summary-card-title">Pendapatan Bulan Ini</h6>
                    <div class="summary-card-icon">
                        <i class="bi bi-cash-stack"></i>
                    </div>
                </div>
                <div class="summary-card-value">Rp <?= number_format($monthlyRevenue, 0, ',', '.') ?></div>
                <div class="summary-card-footer">
                    <i class="bi bi-arrow-up-short"></i>
                    <span class="trend-up">Tagihan lunas</span>
                </div>
            </a>

            <a href="/admin/bills.php?status=unpaid" class="summary-card warning">
                <div class="summary-card-header">
                    <h6 class="summary-card-title">Tagihan Belum Bayar</h6>
                    <div class="summary-card-icon">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                    </div>
                </div>
                <div class="summary-card-value"><?= number_format($unpaidBills) ?></div>
                <div class="summary-card-footer">
                    <i class="bi bi-clock"></i>
                    Menunggu pembayaran
                </div>
            </a>

            <a href="/admin/withdrawals.php?status=pending" class="summary-card danger">
                <div class="summary-card-header">
                    <h6 class="summary-card-title">Request Penarikan</h6>
                    <div class="summary-card-icon">
                        <i class="bi bi-hourglass-split"></i>
                    </div>
                </div>
                <div class="summary-card-value"><?= number_format($pendingWithdrawals) ?></div>
                <div class="summary-card-footer">
                    <?php if ($pendingWithdrawals > 0): ?>
                        <i class="bi bi-bell-fill" style="color: #DC3545;"></i>
                        <span class="trend-down">Perlu approval</span>
                    <?php else: ?>
                        <i class="bi bi-check-circle"></i>
                        Semua terproses
                    <?php endif; ?>
                </div>
            </a>

            <a href="/admin/branches.php" class="summary-card info">
                <div class="summary-card-header">
                    <h6 class="summary-card-title">Total Cabang</h6>
                    <div class="summary-card-icon">
                        <i class="bi bi-building"></i>
                    </div>
                </div>
                <div class="summary-card-value"><?= number_format($totalBranches) ?></div>
                <div class="summary-card-footer">
                    <i class="bi bi-check-circle"></i>
                    Cabang aktif
                </div>
            </a>

            <a href="/admin/branch_finance.php" class="summary-card purple">
                <div class="summary-card-header">
                    <h6 class="summary-card-title">Total Saldo Cabang</h6>
                    <div class="summary-card-icon">
                        <i class="bi bi-wallet2"></i>
                    </div>
                </div>
                <div class="summary-card-value">Rp <?= number_format($totalBalance, 0, ',', '.') ?></div>
                <div class="summary-card-footer">
                    <i class="bi bi-cash-coin"></i>
                    Seluruh cabang
                </div>
            </a>
        </div>

        <!-- Quick Actions -->
        <div class="section-header">
            <h3 class="section-title">
                <i class="bi bi-lightning-charge-fill"></i>
                <span>Aksi Cepat</span>
            </h3>
        </div>
        
        <div class="quick-actions-grid">
            <a href="/admin/customers.php?action=add" class="quick-action-card">
                <div class="quick-action-icon blue">
                    <i class="bi bi-person-plus-fill"></i>
                </div>
                <div class="quick-action-title">Tambah Pelanggan</div>
                <div class="quick-action-desc">Pelanggan baru</div>
            </a>
            
            <a href="/admin/bills.php" class="quick-action-card">
                <div class="quick-action-icon green">
                    <i class="bi bi-receipt"></i>
                </div>
                <div class="quick-action-title">Kelola Tagihan</div>
                <div class="quick-action-desc">Invoice & billing</div>
            </a>
            
            <a href="/admin/packages.php" class="quick-action-card">
                <div class="quick-action-icon orange">
                    <i class="bi bi-box-fill"></i>
                </div>
                <div class="quick-action-title">Paket Internet</div>
                <div class="quick-action-desc">Produk & harga</div>
            </a>
            
            <a href="/admin/withdrawals.php" class="quick-action-card">
                <div class="quick-action-icon red">
                    <i class="bi bi-cash-coin"></i>
                </div>
                <div class="quick-action-title">Approval Dana</div>
                <div class="quick-action-desc">Penarikan cabang</div>
            </a>
            
            <a href="/admin/broadcast.php" class="quick-action-card">
                <div class="quick-action-icon purple">
                    <i class="bi bi-megaphone-fill"></i>
                </div>
                <div class="quick-action-title">Broadcast WA</div>
                <div class="quick-action-desc">Pesan massal</div>
            </a>
            
            <a href="/admin/mikrotik_status.php" class="quick-action-card">
                <div class="quick-action-icon cyan">
                    <i class="bi bi-router"></i>
                </div>
                <div class="quick-action-title">MikroTik</div>
                <div class="quick-action-desc">Status router</div>
            </a>
        </div>

        <!-- Info Grid -->
        <div class="row g-3 mt-3">
            <!-- Recent Activities -->
            <div class="col-lg-7">
                <div class="card-modern">
                    <div class="card-header-modern primary">
                        <div class="title-left">
                            <i class="bi bi-activity"></i>
                            <span>Aktivitas Terbaru</span>
                        </div>
                        <a href="/admin/logs.php" class="navbar-badge" style="background: rgba(255,255,255,0.25); color: white; text-decoration: none; padding: 5px 10px; font-size: 0.75rem;">
                            Lihat Semua <i class="bi bi-arrow-right"></i>
                        </a>
                    </div>
                    <div class="card-body-modern">
                        <?php if (empty($recentActivities)): ?>
                            <div class="empty-state">
                                <div class="empty-state-icon">
                                    <i class="bi bi-clock-history"></i>
                                </div>
                                <h5 class="empty-state-title">Belum ada aktivitas</h5>
                            </div>
                        <?php else: ?>
                            <div class="activity-list">
                                <?php foreach ($recentActivities as $act): 
                                    $action = strtolower($act['action'] ?? '');
                                    $icon = 'bi-circle';
                                    $color = 'secondary';
                                    if (strpos($action, 'login') !== false) { $icon = 'bi-box-arrow-in-right'; $color = 'success'; }
                                    elseif (strpos($action, 'logout') !== false) { $icon = 'bi-box-arrow-right'; $color = 'secondary'; }
                                    elseif (strpos($action, 'create') !== false || strpos($action, 'add') !== false) { $icon = 'bi-plus-circle'; $color = 'primary'; }
                                    elseif (strpos($action, 'update') !== false || strpos($action, 'edit') !== false) { $icon = 'bi-pencil'; $color = 'warning'; }
                                    elseif (strpos($action, 'delete') !== false) { $icon = 'bi-trash'; $color = 'danger'; }
                                    elseif (strpos($action, 'approve') !== false) { $icon = 'bi-check-circle'; $color = 'success'; }
                                    elseif (strpos($action, 'reject') !== false) { $icon = 'bi-x-circle'; $color = 'danger'; }
                                    elseif (strpos($action, 'payment') !== false) { $icon = 'bi-cash-stack'; $color = 'success'; }
                                    elseif (strpos($action, 'broadcast') !== false) { $icon = 'bi-megaphone'; $color = 'info'; }
                                ?>
                                    <div class="activity-item">
                                        <div class="activity-icon <?= $color ?>">
                                            <i class="bi <?= $icon ?>"></i>
                                        </div>
                                        <div class="activity-content">
                                            <div class="activity-title">
                                                <?= htmlspecialchars($act['description'] ?? $act['action']) ?>
                                            </div>
                                            <div class="activity-meta">
                                                <i class="bi bi-person-circle"></i>
                                                <span><?= htmlspecialchars($act['username'] ?? 'System') ?></span>
                                                <span>•</span>
                                                <span><?= htmlspecialchars($act['action']) ?></span>
                                            </div>
                                        </div>
                                        <div class="activity-time">
                                            <?= timeAgo($act['created_at']) ?>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <!-- Top Branches -->
            <div class="col-lg-5">
                <div class="card-modern">
                    <div class="card-header-modern success">
                        <div class="title-left">
                            <i class="bi bi-trophy-fill"></i>
                            <span>Top Cabang</span>
                        </div>
                        <span class="navbar-badge" style="background: rgba(255,255,255,0.25);">
                            Berdasarkan Saldo
                        </span>
                    </div>
                    <div class="card-body-modern">
                        <?php if (empty($topBranches)): ?>
                            <div class="empty-state">
                                <div class="empty-state-icon">
                                    <i class="bi bi-building"></i>
                                </div>
                                <h5 class="empty-state-title">Belum ada data cabang</h5>
                            </div>
                        <?php else: ?>
                            <div class="branch-list">
                                <?php foreach ($topBranches as $idx => $br): 
                                    $rankClass = '';
                                    if ($idx === 0) $rankClass = 'gold';
                                    elseif ($idx === 1) $rankClass = 'silver';
                                    elseif ($idx === 2) $rankClass = 'bronze';
                                ?>
                                    <div class="branch-item">
                                        <div class="branch-rank <?= $rankClass ?>">
                                            <?= $idx + 1 ?>
                                        </div>
                                        <div class="branch-info">
                                            <div class="branch-name">
                                                <?= htmlspecialchars($br['name'] ?? 'Unknown') ?>
                                            </div>
                                            <div class="branch-code">
                                                <?= htmlspecialchars($br['code'] ?? '-') ?>
                                            </div>
                                        </div>
                                        <div class="branch-balance">
                                            Rp <?= number_format($br['available_balance'] ?? 0, 0, ',', '.') ?>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Live clock
function updateClock() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    const el = document.getElementById('liveTime');
    if (el) el.textContent = `${hours}:${minutes}:${seconds} WIB`;
}
setInterval(updateClock, 1000);
updateClock();
</script>

<?php require __DIR__ . '/../includes/footer.php'; ?>