<div class="glass-card p-6 rounded-2xl border border-slate-800 bg-slate-950/50 mb-8">
    <h3 class="text-xs font-bold uppercase text-slate-500 mb-6 tracking-widest">// Financial Flow Comparison</h3>
    <canvas id="financeChart" height="80"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const cur = "<?php echo addslashes(currency_symbol()); ?>";
    new Chart(document.getElementById('financeChart'), {
        type: 'bar',
        data: {
            labels: ['Received', 'Withdrawals', 'Net Profit'],
            datasets: [{
                label: 'Amount (' + cur + ')',
                data: [<?= (float)$stats['received'] ?>, <?= (float)$withdraw['total'] ?>, <?= (float)$stats['profit'] ?>],
                backgroundColor: ['#10b981', '#f43f5e', '#a855f7']
            }]
        },
        options: {
            plugins: {
                tooltip: { callbacks: { label: (ctx) => cur + ctx.raw.toLocaleString() } }
            },
            scales: {
                y: { ticks: { callback: (val) => cur + val.toLocaleString() } }
            }
        }
    });
</script>
