<?= $this->extend('layout/template') ?>
<?= $this->section('content') ?>

<div class="container-fluid">

<div class="card card-primary shadow-sm rounded">

    <div class="card-header bg-white border-bottom">
        <h3 class="card-title font-weight-bold">
            <i class="fas fa-calendar-alt mr-2 text-primary"></i>
            Rekap Bulanan
        </h3>
    </div>

    <div class="card-body">

        <form action="<?= base_url('laporan/rekap-bulanan') ?>" method="get">
            <div class="row align-items-end">

                <div class="col-md-4">
                    <label>Bulan</label>
                    <select name="bulan" class="form-control">
                        <?php for($i=1;$i<=12;$i++): ?>
                        <option value="<?= $i ?>" <?= ($bulan==$i)?'selected':''; ?>>
                            <?= date('F',mktime(0,0,0,$i,1)); ?>
                        </option>
                        <?php endfor; ?>
                    </select>
                </div>

                <div class="col-md-4">
                    <label>Tahun</label>
                    <input type="number" name="tahun" value="<?= $tahun ?>" class="form-control">
                </div>

                <div class="col-md-4">
                    <button class="btn btn-primary mr-2">
                        <i class="fas fa-search"></i> Tampilkan
                    </button>

                    <a href="<?= base_url('laporan/cetak?bulan='.$bulan.'&tahun='.$tahun) ?>"
                       target="_blank"
                       class="btn btn-success">
                        <i class="fas fa-print"></i> Cetak
                    </a>
                </div>

            </div>
        </form>

        <hr>

        <!-- GRAFIK -->
        <div class="card card-info shadow-sm rounded">
            <div class="card-header bg-white border-bottom">
                <h3 class="card-title font-weight-bold">
                    <i class="fas fa-chart-pie mr-2 text-info"></i>
                    Grafik Rekap Bulanan
                </h3>
            </div>

            <div class="card-body">
                <div class="row text-center">

                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted mb-2">Distribusi Data</h6>
                        <div style="height:300px;">
                            <canvas id="grafikBulananDoughnut"></canvas>
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted mb-2">Perbandingan</h6>
                        <div style="height:300px;">
                            <canvas id="grafikBulananBar"></canvas>
                        </div>
                    </div>

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

        <hr>

        <!-- STAT -->
        <div class="row">

            <div class="col-md-4">
                <div class="small-box bg-primary shadow-sm rounded">
                    <div class="inner">
                        <h3><?= $rekap['total_pengembalian']; ?></h3>
                        <p>Total Pengembalian</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-undo"></i>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="small-box bg-danger shadow-sm rounded">
                    <div class="inner">
                        <h3>Rp <?= number_format($rekap['total_denda'],0,',','.'); ?></h3>
                        <p>Total Denda</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-money-bill-wave"></i>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="small-box bg-success shadow-sm rounded">
                    <div class="inner">
                        <h3><?= $bulan ?> / <?= $tahun ?></h3>
                        <p>Periode Laporan</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                </div>
            </div>

        </div>

        <!-- TABLE -->
        <table class="table table-bordered mt-3 bg-white rounded shadow-sm">
            <tr>
                <th>Bulan</th>
                <td><?= date('F',mktime(0,0,0,$bulan,1)); ?></td>
            </tr>
            <tr>
                <th>Tahun</th>
                <td><?= $tahun ?></td>
            </tr>
            <tr>
                <th>Total Pengembalian</th>
                <td><?= $rekap['total_pengembalian']; ?> Buku</td>
            </tr>
            <tr>
                <th>Total Denda</th>
                <td>Rp <?= number_format($rekap['total_denda'],0,',','.'); ?></td>
            </tr>
        </table>

    </div>

</div>

</div>

<!-- WAJIB -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- PASTIKAN INI ADA -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
$(function(){

    const totalPengembalian = <?= (int)$rekap['total_pengembalian'] ?>;
    const totalDenda = <?= (int)$rekap['total_denda'] ?>;

    const formatRupiah = (val) => {
        return 'Rp ' + val.toLocaleString('id-ID');
    };

    // FIX: cek canvas dulu biar gak error putih
    const ctx1 = document.getElementById('grafikBulananDoughnut');
    const ctx2 = document.getElementById('grafikBulananBar');

    if(ctx1){
        new Chart(ctx1, {
            type: 'doughnut',
            data: {
                labels: ['Pengembalian', 'Denda'],
                datasets: [{
                    data: [totalPengembalian, totalDenda],
                    backgroundColor: ['#6366F1','#EF4444'],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '65%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            boxWidth: 12
                        }
                    }
                }
            }
        });
    }

    if(ctx2){
        new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: ['<?= date('F', mktime(0,0,0,$bulan,1)) ?> <?= $tahun ?>'],
                datasets: [
                    {
                        label: 'Pengembalian',
                        data: [totalPengembalian],
                        borderRadius: 8
                    },
                    {
                        label: 'Denda',
                        data: [totalDenda],
                        borderRadius: 8
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                layout: {
                    padding: 10
                },
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value){
                                return value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });
    }

});
</script>

<?= $this->endSection() ?>