<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<h3>Laporan Bulanan</h3>

<div class="row">

<div class="col-md-4">
<div class="card bg-primary text-white p-3">
Omset Bulan Ini<br>
<h4>Rp <?= number_format($totalOmset,0,',','.') ?></h4>
</div>
</div>

<div class="col-md-4">
<div class="card bg-success text-white p-3">
Total Cash<br>
<h4>Rp <?= number_format($totalCash,0,',','.') ?></h4>
</div>
</div>

<div class="col-md-4">
<div class="card bg-danger text-white p-3">
Total Selisih<br>
<h4>Rp <?= number_format($totalSelisih,0,',','.') ?></h4>
</div>
</div>

</div>

<div class="card mt-4 p-3">
<h5>Grafik Omset Harian</h5>
<canvas id="chartBulanan"></canvas>
</div>

<script>
new Chart(document.getElementById('chartBulanan'), {
    type: 'bar',
    data: {
        labels: <?= json_encode($labels) ?>,
        datasets: [{
            label: 'Omset',
            data: <?= json_encode($data) ?>,
            backgroundColor: '#007bff'
        }]
    }
});
</script>
