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

<h3>Margin Bulanan</h3>

<div class="row">

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

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

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

<div class="col-md-3">
<div class="card bg-dark text-white p-3">
Margin<br>
<h4><?= $marginPercent ?> %</h4>
</div>
</div>

</div>
<div class="card mt-4 p-3">
<h5>Grafik Margin Harian (%)</h5>
<canvas id="chartMargin"></canvas>
</div>

<script>
new Chart(document.getElementById('chartMargin'), {
    type: 'line',
    data: {
        labels: <?= json_encode($labels) ?>,
        datasets: [{
            label: 'Margin %',
            data: <?= json_encode($dataMargin) ?>,
            borderColor: '#28a745',
            backgroundColor: 'rgba(40,167,69,0.2)',
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                max: 100
            }
        }
    }
});
</script>
