// public/js/dashboard-charts.js
document.addEventListener('DOMContentLoaded', function () {
    // Ambil elemen canvas Bar Chart
    const barChartEl = document.getElementById('barChart');
    if (barChartEl) {
        const statistikData = JSON.parse(barChartEl.dataset.stats);

        new Chart(barChartEl.getContext('2d'), {
            type: 'bar',
            data: {
                labels: statistikData.labels,
                datasets: [{
                    label: 'Buku Dibaca',
                    backgroundColor: '#435ebe',
                    data: statistikData.data,
                    borderRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0,0,0,0.05)',
                        },
                        ticks: {
                            color: '#6c757d',
                            font: {
                                size: 12
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false,
                        },
                        ticks: {
                            color: '#6c757d',
                            font: {
                                size: 12
                            }
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    }

    const donutChartEl = document.getElementById('donutChart');
    if (donutChartEl) {
        const progressData = JSON.parse(donutChartEl.dataset.progress);

        new Chart(donutChartEl.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Telah Dibaca', 'Belum Dibaca'],
                datasets: [{
                    data: [progressData.selesai, progressData.sisa],
                    backgroundColor: ['#435ebe', '#e9ecef'],
                    borderColor: ['#ffffff'], 
                    borderWidth: 3,
                }]
            },
            options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    cutout: '75%'
                }
        });
    }
});