<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<h3>Perbandingan Bulan Lalu vs Bulan Ini</h3>

<div class="row mt-4">

    <!-- ================= LEFT SIDE (DATA GRID) ================= -->
    <div class="col-md-6">

        <div class="card shadow-sm mb-3">
            <div class="card-header bg-primary text-white">
                Bulan Ini (<?= date('F Y') ?>)
            </div>
            <div class="card-body">

                <table class="table table-sm">
                    <tr>
                        <th>Omset</th>
                        <td class="text-end">
                            Rp <?= number_format($dataBulanIni['omset'],0,',','.') ?>
                        </td>
                    </tr>
                    <tr>
                        <th>HPP</th>
                        <td class="text-end">
                            Rp <?= number_format($dataBulanIni['hpp'],0,',','.') ?>
                        </td>
                    </tr>
                    <tr>
                        <th>Profit</th>
                        <td class="text-end text-success fw-bold">
                            Rp <?= number_format($dataBulanIni['profit'],0,',','.') ?>
                        </td>
                    </tr>
                    <tr>
                        <th>Margin</th>
                        <td class="text-end">
                            <?= $dataBulanIni['margin'] ?> %
                        </td>
                    </tr>
                </table>

            </div>
        </div>


        


        <!-- Growth -->
        <div class="card shadow-sm">
            <div class="card-body text-center">
                <h5>Growth Omset</h5>

                <h3 class="<?= $growthOmset >= 0 ? 'text-success' : 'text-danger' ?>">
                    <?= $growthOmset ?> %
                </h3>

                <?php if($growthOmset >= 0): ?>
                    <span class="badge bg-success">Naik</span>
                <?php else: ?>
                    <span class="badge bg-danger">Turun</span>
                <?php endif; ?>

            </div>
        </div>

    </div>

    <div class="col-md-6">
        <div class="card shadow-sm mb-3">
            <div class="card-header bg-secondary text-white">
                Bulan Lalu
            </div>
            <div class="card-body">

                <table class="table table-sm">
                    <tr>
                        <th>Omset</th>
                        <td class="text-end">
                            Rp <?= number_format($dataBulanLalu['omset'],0,',','.') ?>
                        </td>
                    </tr>
                    <tr>
                        <th>HPP</th>
                        <td class="text-end">
                            Rp <?= number_format($dataBulanLalu['hpp'],0,',','.') ?>
                        </td>
                    </tr>
                    <tr>
                        <th>Profit</th>
                        <td class="text-end text-success fw-bold">
                            Rp <?= number_format($dataBulanLalu['profit'],0,',','.') ?>
                        </td>
                    </tr>
                    <tr>
                        <th>Margin</th>
                        <td class="text-end">
                            <?= $dataBulanLalu['margin'] ?> %
                        </td>
                    </tr>
                </table>

            </div>
        </div>
    </div>

    

</div>



<!-- ================= RIGHT SIDE (CHART) ================= -->
    <!-- <div class="col-md-7">

        <div class="card shadow-sm p-3">
            <h5>Grafik Perbandingan Omset</h5>
            <canvas id="chartCompare"></canvas>
        </div>

        <div class="card shadow-sm p-3 mt-4">
            <h5>Grafik Profit</h5>
            <canvas id="chartProfit"></canvas>
        </div>

    </div> -->
<script>
new Chart(document.getElementById('chartCompare'), {
    type: 'bar',
    data: {
        labels: ['Bulan Lalu','Bulan Ini'],
        datasets: [{
            label: 'Omset',
            data: [
                <?= $dataBulanLalu['omset'] ?>,
                <?= $dataBulanIni['omset'] ?>
            ],
            backgroundColor: ['#6c757d','#007bff']
        }]
    },
    options: {
        responsive: true
    }
});


new Chart(document.getElementById('chartProfit'), {
    type: 'bar',
    data: {
        labels: ['Bulan Lalu','Bulan Ini'],
        datasets: [{
            label: 'Profit',
            data: [
                <?= $dataBulanLalu['profit'] ?>,
                <?= $dataBulanIni['profit'] ?>
            ],
            backgroundColor: ['#dc3545','#28a745']
        }]
    },
    options: {
        responsive: true
    }
});
</script>
