<?php $current_page = 'dashboard'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Admin App</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <?= view('admin/partials/admin_styles') ?>
    <style>
        .dashboard-header { margin-bottom: 1.5rem; }
        .dashboard-title { font-size: 1.75rem; color: #1e293b; font-weight: 700; }
        .dashboard-subtitle { color: #64748b; font-size: 0.95rem; margin-top: 0.25rem; }
        .key-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.25rem;
            margin-bottom: 2rem;
        }
        .metric-card {
            background: #fff;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            border: 1px solid #e2e8f0;
            transition: box-shadow 0.2s, transform 0.2s;
        }
        .metric-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }
        .metric-header { display: flex; align-items: center; gap: 1rem; }
        .metric-icon {
            width: 48px; height: 48px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.35rem; color: #fff; flex-shrink: 0;
        }
        .metric-icon.total { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
        .metric-icon.amount { background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%); }
        .metric-icon.rate { background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%); }
        .metric-icon.pending { background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%); }
        .metric-value { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
        .metric-label { color: #64748b; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0.25rem; }
        .section-title {
            font-size: 1.15rem; font-weight: 700; color: #1e293b;
            margin: 1.5rem 0 1rem; display: flex; align-items: center; gap: 0.5rem;
        }
        .section-title i { color: #6366f1; }
        .combined-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        .system-stats {
            background: #fff;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            border: 1px solid #e2e8f0;
        }
        .system-stats h4 {
            font-size: 1rem; font-weight: 700; color: #1e293b;
            margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
        }
        .system-stats.original h4 { color: #6366f1; }
        .system-stats.relworx h4 { color: #0ea5e9; }
        .stats-summary {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
        }
        .summary-item {
            text-align: center; padding: 0.75rem;
            background: #f8fafc; border-radius: 8px;
        }
        .summary-number { font-size: 1.15rem; font-weight: 700; color: #6366f1; }
        .summary-label { color: #64748b; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0.25rem; }
        .actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 1rem;
        }
        .action-card {
            background: #fff;
            padding: 1.25rem;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            text-decoration: none;
            color: #334155;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 1rem;
            border: 1px solid #e2e8f0;
        }
        .action-card:hover {
            border-color: #6366f1;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
            transform: translateY(-2px);
        }
        .action-icon {
            width: 48px; height: 48px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 1.25rem; flex-shrink: 0;
        }
        .action-content h3 { font-size: 1rem; color: #1e293b; margin-bottom: 0.25rem; }
        .action-content p { color: #64748b; font-size: 0.85rem; line-height: 1.3; }
        .balance-check-box { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #e2e8f0; }
        .balance-check-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
        .balance-check-header span { font-size: 0.9rem; font-weight: 600; color: #0ea5e9; display: flex; align-items: center; gap: 0.5rem; }
        .balance-check-btn {
            background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
            color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 8px;
            font-size: 0.85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .balance-check-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4); }
        .balance-check-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
        .balance-result { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
        .balance-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; }
        .balance-result-item { text-align: center; padding: 0.75rem; background: #f8fafc; border-radius: 8px; }
        .balance-result-item.primary { background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%); color: #fff; }
        .balance-result-item.primary .balance-result-label { color: rgba(255,255,255,0.9); }
        .balance-result-item.has-error { background: #fef2f2; border: 1px solid #fecaca; }
        .balance-result-item.has-error .balance-result-label { color: #991b1b; }
        .balance-result-item.has-error .balance-result-value { color: #b91c1c; font-size: 0.8rem; font-weight: 600; }
        .balance-result-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem; color: #64748b; }
        .balance-result-value { font-size: 1rem; font-weight: 700; }
        .balance-result-value.mono { font-family: ui-monospace, monospace; font-size: 0.9rem; }
        .balance-result-footer { margin-top: 0.75rem; text-align: center; }
        .text-muted { color: #64748b; font-size: 0.8rem; }
        .balance-loading { margin-top: 1rem; text-align: center; color: #0ea5e9; font-size: 0.9rem; }
        .balance-loading i { margin-right: 0.5rem; }
        .balance-error { margin-top: 1rem; padding: 0.75rem; background: #fef2f2; border-left: 4px solid #ef4444; border-radius: 4px; color: #dc2626; font-size: 0.9rem; }
        @media (max-width: 768px) {
            .key-metrics { grid-template-columns: 1fr; }
            .stats-summary { grid-template-columns: 1fr; }
            .combined-stats { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
<?= view('admin/partials/header_sidebar', ['current_page' => $current_page]) ?>

    <div class="dashboard-header">
        <h1 class="dashboard-title">Dashboard</h1>
        <p class="dashboard-subtitle">Overview of your payment systems</p>
    </div>

    <div class="key-metrics">
        <div class="metric-card">
            <div class="metric-header">
                <div class="metric-icon total"><i class="fas fa-exchange-alt"></i></div>
                <div>
                    <div class="metric-value"><?= number_format($total_count + $relworx_total_count) ?></div>
                    <div class="metric-label">Total Transactions</div>
                </div>
            </div>
        </div>
        <div class="metric-card">
            <div class="metric-header">
                <div class="metric-icon amount"><i class="fas fa-money-bill-wave"></i></div>
                <div>
                    <div class="metric-value"><?= number_format($total_amount + $relworx_total_amount, 0) ?> UGX</div>
                    <div class="metric-label">Total Amount</div>
                </div>
            </div>
        </div>
        <div class="metric-card">
            <div class="metric-header">
                <div class="metric-icon rate"><i class="fas fa-chart-line"></i></div>
                <div>
                    <div class="metric-value"><?= ($total_count + $relworx_total_count) > 0 ? round((($successful_count + $relworx_successful_count) / ($total_count + $relworx_total_count)) * 100, 1) : 0 ?>%</div>
                    <div class="metric-label">Success Rate</div>
                </div>
            </div>
        </div>
        <div class="metric-card">
            <div class="metric-header">
                <div class="metric-icon pending"><i class="fas fa-hourglass-half"></i></div>
                <div>
                    <div class="metric-value"><?= number_format($pending_count + $relworx_pending_count) ?></div>
                    <div class="metric-label">Pending</div>
                </div>
            </div>
        </div>
    </div>

    <div class="section-title"><i class="fas fa-chart-bar"></i> System Comparison</div>
    <div class="combined-stats">
        <div class="system-stats original">
            <h4><i class="fas fa-credit-card"></i> Original System</h4>
            <div class="stats-summary">
                <div class="summary-item">
                    <div class="summary-number"><?= number_format($total_count) ?></div>
                    <div class="summary-label">Transactions</div>
                </div>
                <div class="summary-item">
                    <div class="summary-number"><?= number_format($total_amount, 0) ?></div>
                    <div class="summary-label">UGX</div>
                </div>
                <div class="summary-item">
                    <div class="summary-number"><?= $total_count > 0 ? round(($successful_count / $total_count) * 100, 1) : 0 ?>%</div>
                    <div class="summary-label">Success</div>
                </div>
            </div>
            <a href="<?= site_url('admin/transactions') ?>" style="display: inline-block; margin-top: 1rem; font-size: 0.9rem; font-weight: 600; color: #6366f1;">View report →</a>
        </div>
        <div class="system-stats relworx">
            <h4><i class="fas fa-mobile-alt"></i> Relworx / Mobile Money</h4>
            <div class="stats-summary">
                <div class="summary-item">
                    <div class="summary-number"><?= number_format($relworx_total_count) ?></div>
                    <div class="summary-label">Transactions</div>
                </div>
                <div class="summary-item">
                    <div class="summary-number"><?= number_format($relworx_total_amount, 0) ?></div>
                    <div class="summary-label">UGX</div>
                </div>
                <div class="summary-item">
                    <div class="summary-number"><?= $relworx_total_count > 0 ? round(($relworx_successful_count / $relworx_total_count) * 100, 1) : 0 ?>%</div>
                    <div class="summary-label">Success</div>
                </div>
            </div>
            <a href="<?= site_url('admin/relworx-transactions') ?>" style="display: inline-block; margin-top: 1rem; font-size: 0.9rem; font-weight: 600; color: #0ea5e9;">View report →</a>
            <div class="balance-check-box">
                <div class="balance-check-header">
                    <span><i class="fas fa-wallet"></i> Wallet balances <small class="text-muted" style="font-weight:500;margin-left:0.25rem;">(UGX · TZS · KES)</small></span>
                    <button type="button" id="checkBalanceBtn" onclick="checkRelworxBalance()" class="balance-check-btn">
                        <i class="fas fa-sync-alt"></i> Check Balance
                    </button>
                </div>
                <div id="balanceResult" class="balance-result" style="display: none;">
                    <div id="balanceCards" class="balance-result-grid"></div>
                    <div class="balance-result-grid" style="margin-top: 0.75rem;">
                        <div class="balance-result-item">
                            <span class="balance-result-label">Account No</span>
                            <span id="balanceAccountNo" class="balance-result-value mono"></span>
                        </div>
                    </div>
                    <div class="balance-result-footer"><small id="balanceLastChecked" class="text-muted"></small></div>
                </div>
                <div id="balanceLoading" class="balance-loading" style="display: none;">
                    <i class="fas fa-spinner fa-spin"></i> Checking balance...
                </div>
                <div id="balanceError" class="balance-error" style="display: none;"></div>
            </div>
        </div>
    </div>

    <div class="section-title"><i class="fas fa-th-large"></i> Payment Methods &amp; Reports</div>
    <div class="actions-grid">
        <a href="<?= site_url('admin/transactions') ?>" class="action-card">
            <div class="action-icon"><i class="fas fa-credit-card"></i></div>
            <div class="action-content">
                <h3>Original Transactions</h3>
                <p>Legacy payments &amp; financial report</p>
            </div>
        </a>
        <a href="<?= site_url('admin/relworx-transactions') ?>" class="action-card">
            <div class="action-icon"><i class="fas fa-mobile-alt"></i></div>
            <div class="action-content">
                <h3>Relworx Transactions</h3>
                <p>Mobile money &amp; statistics</p>
            </div>
        </a>
        <a href="<?= site_url('admin/cardyfie-cards') ?>" class="action-card">
            <div class="action-icon"><i class="fas fa-credit-card"></i></div>
            <div class="action-content">
                <h3>Cardyfie Cards</h3>
                <p>Virtual cards &amp; reporting</p>
            </div>
        </a>
        <a href="<?= site_url('admin/cardyfie-transactions') ?>" class="action-card">
            <div class="action-icon"><i class="fas fa-exchange-alt"></i></div>
            <div class="action-content">
                <h3>Cardyfie Transactions</h3>
                <p>Card transaction history</p>
            </div>
        </a>
        <a href="<?= site_url('admin/cardyfie-customers') ?>" class="action-card">
            <div class="action-icon"><i class="fas fa-users"></i></div>
            <div class="action-content">
                <h3>Cardyfie Customers</h3>
                <p>Customer accounts</p>
            </div>
        </a>
        <a href="<?= site_url('admin/disbursements') ?>" class="action-card">
            <div class="action-icon"><i class="fas fa-paper-plane"></i></div>
            <div class="action-content">
                <h3>Disbursements</h3>
                <p>Send money &amp; reports</p>
            </div>
        </a>
    </div>

    <script>
        function checkRelworxBalance() {
            var balanceBtn = document.getElementById('checkBalanceBtn');
            var balanceResult = document.getElementById('balanceResult');
            var balanceLoading = document.getElementById('balanceLoading');
            var balanceError = document.getElementById('balanceError');
            balanceResult.style.display = 'none';
            balanceError.style.display = 'none';
            balanceLoading.style.display = 'block';
            balanceBtn.disabled = true;
            balanceBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Checking...';
            fetch('<?= site_url('api/mobile-money/balance?currency=all') ?>', {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' }
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                balanceLoading.style.display = 'none';
                balanceBtn.disabled = false;
                balanceBtn.innerHTML = '<i class="fas fa-sync-alt"></i> Check Balance';
                if (data.success) {
                    var cards = document.getElementById('balanceCards');
                    cards.innerHTML = '';
                    var rows = (data.balances && data.balances.length) ? data.balances : null;
                    if (!rows) {
                        var c = data.currency || 'UGX';
                        rows = [{ currency: c, success: true, balance: data.balance }];
                    }
                    rows.forEach(function(row, idx) {
                        var el = document.createElement('div');
                        el.className = 'balance-result-item' + (row.success ? (idx === 0 ? ' primary' : '') : ' has-error');
                        var label = document.createElement('span');
                        label.className = 'balance-result-label';
                        label.textContent = row.currency || '—';
                        var val = document.createElement('span');
                        val.className = 'balance-result-value';
                        if (row.success) {
                            val.textContent = new Intl.NumberFormat('en-US').format(row.balance);
                        } else {
                            val.textContent = row.message || 'Unavailable';
                        }
                        el.appendChild(label);
                        el.appendChild(val);
                        cards.appendChild(el);
                    });
                    document.getElementById('balanceAccountNo').textContent = data.account_no || 'N/A';
                    var now = new Date();
                    document.getElementById('balanceLastChecked').textContent = 'Last checked: ' + now.toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' });
                    balanceResult.style.display = 'block';
                } else {
                    balanceError.textContent = data.message || 'Failed to check balance';
                    balanceError.style.display = 'block';
                }
            })
            .catch(function(err) {
                balanceLoading.style.display = 'none';
                balanceBtn.disabled = false;
                balanceBtn.innerHTML = '<i class="fas fa-sync-alt"></i> Check Balance';
                balanceError.textContent = 'Error: ' + (err.message || 'Failed to check balance');
                balanceError.style.display = 'block';
            });
        }
    </script>
<?= view('admin/partials/footer') ?>
</body>
</html>
