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

<?= $this->section('content') ?>

<div class="container-fluid">

    <div class="row mb-3">
        <div class="col-12">
            <h4 class="mb-0">
                <i class="fas fa-chart-line text-primary"></i>
                Grafik Dashboard
            </h4>
            <small class="text-muted">
                Ringkasan peminjaman dan denda 7 hari terakhir
            </small>
        </div>
    </div>

    <!-- Grafik Peminjaman -->
    <div class="card card-primary">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-book mr-1"></i>
                Grafik Peminjaman
            </h3>
        </div>
        <div class="card-body">
            <div style="height: 320px;">
                <canvas id="chartPinjam"></canvas>
            </div>
        </div>
    </div>

    <!-- Grafik Denda -->
    <div class="card card-danger">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-money-bill-wave mr-1"></i>
                Grafik Denda
            </h3>
        </div>
        <div class="card-body">
            <div style="height: 320px;">
                <canvas id="chartDenda"></canvas>
            </div>
        </div>
    </div>

</div>

<script src="<?= base_url('plugins/chart.js/Chart.min.js') ?>"></script>

<script>
const tanggal = <?= $tanggal ?? '[]' ?>;
const total   = <?= $total ?? '[]' ?>;
const denda   = <?= $denda ?? '[]' ?>;

// 📊 Grafik Peminjaman
new Chart(document.getElementById('chartPinjam'), {
    type: 'line',
    data: {
        labels: tanggal,
        datasets: [{
            label: 'Jumlah Peminjaman',
            data: total,
            borderColor: '#007bff',
            backgroundColor: 'rgba(0,123,255,0.1)',
            borderWidth: 2,
            fill: true,
            tension: 0.4,
            pointRadius: 4,
            pointHoverRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: true }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { precision: 0 }
            }
        }
    }
});

// 💰 Grafik Denda
new Chart(document.getElementById('chartDenda'), {
    type: 'bar',
    data: {
        labels: tanggal,
        datasets: [{
            label: 'Total Denda (Rp)',
            data: denda,
            backgroundColor: 'rgba(220,53,69,0.7)',
            borderColor: '#dc3545',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: true }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { precision: 0 }
            }
        }
    }
});
</script>

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

