<x-app-layout>
    @section('page-title', $pageTitle)

    <div class="container-fluid px-1 px-md-3">
        <div class="row g-3 g-md-4 flex-wrap">
            {{-- ========================= --}}
            {{-- KOLOM KIRI (KONTEN UTAMA) --}}
            {{-- ========================= --}}
            <div class="col-12 col-lg-8 d-flex flex-column gap-3 gap-md-4">
                {{-- Grafik Aktivitas Membaca --}}
                <div class="card shadow-sm border-0 rounded-4 p-3">
                    <div class="card-header bg-white border-0 pb-0">
                        <p class="fw-semibold mb-2 text-primary">
                            <i class="bi bi-graph-up me-2"></i>Grafik Aktivitas Membaca (7 Hari Terakhir)
                        </p>
                    </div>
                    <div class="card-body pt-3 pb-2">
                        <div class="chart-container chart-responsive">
                            <canvas id="lineChart" data-stats='@json($aktivitasMingguan)'></canvas>
                        </div>

                    </div>
                </div>

                <div class="row g-3 g-md-4">

                    {{-- BUKU TERPOPULER --}}
                    <div class="col-12 col-md-6">
                        <div class="card shadow-sm border-0 rounded-4 p-3 h-100">
                            <div class="card-header bg-white border-0 pb-0">
                                <p class="fw-semibold mb-2 text-warning">
                                    <i class="bi bi-trophy-fill me-2"></i>Buku Terpopuler
                                </p>
                            </div>
                            <div class="card-body pt-2">
                                <div class="list-group list-group-flush">
                                    @foreach ($laporan['buku_terpopuler'] as $buku)
                                        <div
                                            class="list-group-item d-flex align-items-center gap-3 px-0 border-0 py-2 hover-bg-light my-1">
                                            <img src="{{ asset($buku['cover']) }}" class="rounded shadow-sm"
                                                width="48" alt="Cover">
                                            <div class="flex-grow-1">
                                                <div class="fw-semibold small text-truncate">{{ $buku['judul'] }}</div>
                                            </div>
                                            <span class="badge bg-primary-subtle text-primary rounded-pill px-3">
                                                {{ $buku['total_pembaca'] }}
                                            </span>
                                        </div>
                                        @if (!$loop->last)
                                            <hr class="my-0">
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- KATEGORI PALING DIMINATI --}}
                    <div class="col-12 col-md-6">
                        <div class="card shadow-sm border-0 rounded-4 p-3 h-100">
                            <div class="card-header bg-white border-0 pb-0">
                                <p class="fw-semibold mb-2 text-info">
                                    <i class="bi bi-tags-fill me-2"></i>Kategori Paling Diminati
                                </p>
                            </div>
                            <div class="card-body pt-2">
                                <div class="list-group list-group-flush">
                                    @foreach ($laporan['kategori_populer'] as $kategori)
                                        <div
                                            class="list-group-item d-flex justify-content-between align-items-center px-0 border-0 py-2 hover-bg-light my-1">
                                            <span class="small d-flex align-items-center">
                                                <i
                                                    class="bi {{ $kategori['icon'] }} me-2 
                                                    @if ($kategori['trend'] == 'naik') text-success 
                                                    @elseif($kategori['trend'] == 'turun') text-danger @endif"></i>
                                                {{ $kategori['nama'] }}
                                            </span>
                                            <span class="badge bg-info-subtle text-info rounded-pill px-3">
                                                {{ $kategori['total_pembaca'] }}
                                            </span>
                                        </div>
                                        @if (!$loop->last)
                                            <hr class="my-0">
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ========================= --}}
            {{-- KOLOM KANAN {SISWA AKTIF} --}}
            {{-- ========================= --}}
            <div class="col-12 col-lg-4">
                <div class="card shadow-sm border-0 rounded-4 p-3 h-100">
                    <div class="card-header bg-white border-0 pb-0">
                        <p class="fw-semibold mb-2 text-success">
                            <i class="bi bi-person-check-fill me-2"></i>Siswa Paling Aktif
                        </p>
                    </div>
                    <div class="card-body pt-2">
                        @foreach ($siswaTeraktif as $siswa)
                            <div
                                class="list-group-item d-flex align-items-center gap-3 px-0 border-0 py-2 my-1 hover-bg-light">
                                <img src="https://ui-avatars.com/api/?name={{ urlencode($siswa['nama']) }}&background=random"
                                    class="rounded-circle shadow-sm" width="42" height="42" alt="Avatar">
                                <div class="flex-grow-1">
                                    <div class="fw-semibold">{{ $siswa['nama'] }}</div>
                                    <small class="text-muted">{{ $siswa['kelas'] }}</small>
                                </div>
                                <span class="badge bg-success-subtle text-success rounded-pill px-3">
                                    {{ $siswa['total_buku'] }}
                                </span>
                            </div>
                            @if (!$loop->last)
                                <hr class="my-0">
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ========================= --}}
    {{-- SCRIPT CHART.JS --}}
    {{-- ========================= --}}
    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                if (window.myLineChart) window.myLineChart.destroy();

                const lineCanvas = document.getElementById('lineChart');
                if (lineCanvas) {
                    const lineData = JSON.parse(lineCanvas.dataset.stats);
                    window.myLineChart = new Chart(lineCanvas, {
                        type: 'line',
                        data: {
                            labels: lineData.labels,
                            datasets: [{
                                label: 'Aktivitas Baca',
                                data: lineData.data,
                                fill: true,
                                backgroundColor: 'rgba(67, 94, 190, 0.1)',
                                borderColor: '#435ebe',
                                borderWidth: 2,
                                tension: 0.35,
                                pointRadius: 4,
                                pointBackgroundColor: '#435ebe'
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    grid: {
                                        color: '#f0f0f0'
                                    },
                                    ticks: {
                                        stepSize: 5
                                    }
                                },
                                x: {
                                    grid: {
                                        display: false
                                    }
                                }
                            },
                            plugins: {
                                legend: {
                                    display: false
                                }
                            }
                        }
                    });
                }
            });
        </script>
    @endpush
</x-app-layout>
