<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-tachometer-alt me-2"></i><?= lang('reports.kpi_dashboard') ?></h4>
    <button class="btn btn-sm btn-outline-primary" id="btn-refresh-kpis"><i class="fas fa-sync me-1"></i>Refresh</button>
</div>

<div class="row g-3 mb-4" id="kpi-cards">
    <div class="col-md-3"><div class="card border-primary h-100"><div class="card-body"><h6 class="text-muted">Active Members</h6><h2 class="mb-0" id="kpi-active-members"><span class="spinner-border spinner-border-sm"></span></h2></div></div></div>
    <div class="col-md-3"><div class="card border-success h-100"><div class="card-body"><h6 class="text-muted">Revenue This Month</h6><h2 class="mb-0" id="kpi-revenue"><span class="spinner-border spinner-border-sm"></span></h2></div></div></div>
    <div class="col-md-3"><div class="card border-warning h-100"><div class="card-body"><h6 class="text-muted">Outstanding</h6><h2 class="mb-0" id="kpi-outstanding"><span class="spinner-border spinner-border-sm"></span></h2></div></div></div>
    <div class="col-md-3"><div class="card border-danger h-100"><div class="card-body"><h6 class="text-muted">Overdue</h6><h2 class="mb-0" id="kpi-overdue"><span class="spinner-border spinner-border-sm"></span></h2></div></div></div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-2"><div class="card h-100"><div class="card-body text-center"><i class="fas fa-user-plus fa-2x text-info mb-2"></i><h5 id="kpi-new-members">-</h5><small class="text-muted">New This Month</small></div></div></div>
    <div class="col-md-2"><div class="card h-100"><div class="card-body text-center"><i class="fas fa-file-alt fa-2x text-warning mb-2"></i><h5 id="kpi-pending-apps">-</h5><small class="text-muted">Pending Apps</small></div></div></div>
    <div class="col-md-2"><div class="card h-100"><div class="card-body text-center"><i class="fas fa-snowflake fa-2x text-info mb-2"></i><h5 id="kpi-freezes">-</h5><small class="text-muted">Active Freezes</small></div></div></div>
    <div class="col-md-2"><div class="card h-100"><div class="card-body text-center"><i class="fas fa-exclamation-triangle fa-2x text-danger mb-2"></i><h5 id="kpi-violations">-</h5><small class="text-muted">Open Violations</small></div></div></div>
    <div class="col-md-2"><div class="card h-100"><div class="card-body text-center"><i class="fas fa-headset fa-2x text-primary mb-2"></i><h5 id="kpi-complaints">-</h5><small class="text-muted">Open Complaints</small></div></div></div>
    <div class="col-md-2"><div class="card h-100"><div class="card-body text-center"><i class="fas fa-id-card fa-2x text-secondary mb-2"></i><h5 id="kpi-cards-expiring">-</h5><small class="text-muted">Cards Expiring</small></div></div></div>
</div>

<div class="row g-3">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header"><h6 class="mb-0"><i class="fas fa-chart-line me-2"></i>Revenue Trend (30 Days)</h6></div>
            <div class="card-body"><canvas id="revenue-trend-chart" height="300"></canvas></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header"><h6 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Member Growth (12 Months)</h6></div>
            <div class="card-body"><canvas id="member-growth-chart" height="300"></canvas></div>
        </div>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
(function() {
    var revenueChart = null;
    var growthChart = null;

    function loadKpis() {
        $.get('/api/reports/kpi-data', function(res) {
            if (!res.success) return;
            var d = res.data;
            $('#kpi-active-members').text(parseInt(d.total_active_members || 0).toLocaleString());
            $('#kpi-revenue').text(parseFloat(d.revenue_this_month || 0).toLocaleString('en',{minimumFractionDigits:2}));
            $('#kpi-outstanding').text(parseFloat(d.total_outstanding || 0).toLocaleString('en',{minimumFractionDigits:2}));
            $('#kpi-overdue').text(parseFloat(d.total_overdue || 0).toLocaleString('en',{minimumFractionDigits:2}));
            $('#kpi-new-members').text(d.new_members_this_month || 0);
            $('#kpi-pending-apps').text(d.pending_applications || 0);
            $('#kpi-freezes').text(d.active_freezes || 0);
            $('#kpi-violations').text(d.open_violations || 0);
            $('#kpi-complaints').text(d.open_complaints || 0);
            $('#kpi-cards-expiring').text(d.cards_expiring_30_days || 0);
        });
    }

    function loadRevenueChart() {
        $.get('/api/reports/revenue-chart?days=30', function(res) {
            if (!res.success) return;
            var ctx = document.getElementById('revenue-trend-chart');
            if (revenueChart) revenueChart.destroy();
            revenueChart = new Chart(ctx, {
                type: 'line',
                data: { labels: res.labels, datasets: [{label: 'Revenue', data: res.values, borderColor: '#2c5282', backgroundColor: 'rgba(44,82,130,0.1)', fill: true, tension: 0.3}] },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } }, plugins: { legend: { display: false } } }
            });
        });
    }

    function loadGrowthChart() {
        $.get('/api/reports/member-growth', function(res) {
            if (!res.success) return;
            var ctx = document.getElementById('member-growth-chart');
            if (growthChart) growthChart.destroy();
            growthChart = new Chart(ctx, {
                type: 'bar',
                data: { labels: res.labels, datasets: [{label: 'New Members', data: res.values, backgroundColor: '#38a169'}] },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } }, plugins: { legend: { display: false } } }
            });
        });
    }

    loadKpis();
    loadRevenueChart();
    loadGrowthChart();

    $('#btn-refresh-kpis').on('click', function() {
        loadKpis();
        loadRevenueChart();
        loadGrowthChart();
    });
})();
</script>
<?php $__view->endPush() ?>