<?php 
$pageTitle = 'Dashboard';
include __DIR__ . '/../layouts/header.php'; 
?>

<!-- Quick Stats Cards – now using custom .stat-card with themed gradients -->
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card stat-card" style="background: linear-gradient(135deg, #0f172a, #1e3a5f);">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-uppercase small opacity-75">Total Clients</h6>
                        <h2 class="mb-0"><?= count($totalClients) ?></h2>
                    </div>
                    <i class="bi bi-people icon-bg"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card" style="background: linear-gradient(135deg, #059669, #10b981);">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-uppercase small opacity-75">Client Balances</h6>
                        <h2 class="mb-0"><?= number_format($totalClientBalance, 0) ?></h2>
                        <small>KES</small>
                    </div>
                    <i class="bi bi-wallet2 icon-bg"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card" style="background: linear-gradient(135deg, #d97706, #f59e0b);">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-uppercase small opacity-75">Today's Forex</h6>
                        <h2 class="mb-0"><?= number_format($todayForexVolume, 0) ?></h2>
                        <small>KES</small>
                    </div>
                    <i class="bi bi-currency-exchange icon-bg"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card" style="background: linear-gradient(135deg, #b45309, #d97706);">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-uppercase small opacity-75">Rent This Month</h6>
                        <h2 class="mb-0"><?= number_format($monthlyRentCollected, 0) ?></h2>
                        <small>KES</small>
                    </div>
                    <i class="bi bi-house icon-bg"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row 1 -->
<div class="row g-3 mb-4">
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-graph-up me-2"></i>Client Balance Trend (Last 7 Days)
            </div>
            <div class="card-body">
                <canvas id="balanceChart" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-pie-chart me-2"></i>Forex Positions (KES Equivalent)
            </div>
            <div class="card-body">
                <canvas id="forexChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row 2 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <i class="bi bi-bar-chart me-2"></i>Rent Collection (Last 6 Months)
            </div>
            <div class="card-body">
                <canvas id="rentChart" height="250"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js (unchanged) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Balance Trend Line Chart
    const balanceCtx = document.getElementById('balanceChart').getContext('2d');
    new Chart(balanceCtx, {
        type: 'line',
        data: {
            labels: <?= json_encode($balanceDates) ?>,
            datasets: [{
                label: 'Total Balance (KES)',
                data: <?= json_encode($balanceValues) ?>,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.1)',
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { callback: v => v.toLocaleString() }
                }
            }
        }
    });

    // Forex Doughnut Chart
    const forexCtx = document.getElementById('forexChart').getContext('2d');
    new Chart(forexCtx, {
        type: 'doughnut',
        data: {
            labels: <?= json_encode($forexLabels) ?>,
            datasets: [{
                data: <?= json_encode($forexValues) ?>,
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    'rgb(75, 192, 192)',
                    'rgb(153, 102, 255)',
                    'rgb(255, 159, 64)'
                ],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let value = context.raw;
                            let total = context.dataset.data.reduce((a, b) => a + b, 0);
                            let pct = ((value / total) * 100).toFixed(1);
                            return context.label + ': ' + value.toLocaleString() + ' KES (' + pct + '%)';
                        }
                    }
                }
            }
        }
    });

    // Rent Bar Chart
    const rentCtx = document.getElementById('rentChart').getContext('2d');
    new Chart(rentCtx, {
        type: 'bar',
        data: {
            labels: <?= json_encode($rentLabels) ?>,
            datasets: [{
                label: 'Rent Collected (KES)',
                data: <?= json_encode($rentValues) ?>,
                backgroundColor: 'rgba(153, 102, 255, 0.7)',
                borderColor: 'rgb(153, 102, 255)',
                borderWidth: 1,
                borderRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { callback: v => v.toLocaleString() }
                }
            }
        }
    });
});
</script>

<?php include __DIR__ . '/../layouts/footer.php'; ?>