<div class="card h-100">
    <div class="card-header"><h6 class="mb-0"><i class="fas fa-chart-line me-2"></i><?= lang('reports.revenue_trend') ?></h6></div>
    <div class="card-body">
        <canvas id="widget-revenue-chart" height="200"></canvas>
    </div>
</div>
<script>
(function() {
    function loadWidget() {
        $.get('/api/reports/revenue-chart?days=14', function(res) {
            if (!res.success) return;
            var ctx = document.getElementById('widget-revenue-chart');
            if (!ctx) return;
            new Chart(ctx, {
                type: 'line',
                data: { labels: res.labels, datasets: [{label: 'Revenue', data: res.values, borderColor: '#2c5282', backgroundColor: 'rgba(44,82,130,0.08)', fill: true, tension: 0.4, pointRadius: 2}] },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, ticks: { callback: function(v) { return v.toLocaleString(); } } } }, plugins: { legend: { display: false } } }
            });
        });
    }
    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', loadWidget); } else { loadWidget(); }
})();
</script>