@extends('adminlte::page')

@section('title', 'Laporan Pesan Buku KKM')

@section('content_header')
    <h1><i class="fas fa-mosque mr-2"></i>Laporan Pesanan Buku — Kelas Kafa Menengah</h1>
@stop

@section('content')
    <div class="mb-3 no-print">
        <a href="{{ route('supervisor.dashboard') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left mr-1"></i> Kembali ke Dashboard
        </a>
        <button onclick="window.open('{{ route('supervisor.laporan.kkm-buku-cetak', ['tahun' => $tahun]) }}', '_blank')"
            class="btn btn-primary btn-sm ml-2">
            <i class="fas fa-print mr-1"></i> Cetak Laporan
        </button>
        <a href="{{ route('supervisor.laporan.kkm-senarai-sekolah', ['tahun' => $tahun]) }}" class="btn btn-info btn-sm ml-2">
            <i class="fas fa-school mr-1"></i> Senarai Sekolah
        </a>
    </div>

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="text-muted mb-0">
            <i class="fas fa-chart-pie mr-1"></i> Total Pesanan Buku KKM Mengikut Tingkatan
            — Daerah: <span class="badge badge-primary">{{ $daerah }}</span>
            — Tahun: <span class="badge badge-info">{{ $tahun }}</span>
        </h5>
        <form method="GET" action="{{ route('supervisor.laporan.kkm-buku') }}" class="form-inline no-print">
            <label class="mr-2 text-muted"><i class="fas fa-calendar-alt mr-1"></i>Tahun:</label>
            <select name="tahun" class="form-control form-control-sm" onchange="this.form.submit()">
                @foreach ($senarai_tahun as $t)
                    <option value="{{ $t }}" {{ $t == $tahun ? 'selected' : '' }}>{{ $t }}</option>
                @endforeach
            </select>
        </form>
    </div>

    <div class="row">
        @foreach ($charts as $chart)
            <div class="col-md-6 mb-4">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h3 class="card-title">
                            <strong>{{ $chart['darjah'] }}</strong>
                            <small class="text-muted ml-2">(Jumlah Pesanan: {{ number_format($chart['total']) }})</small>
                        </h3>
                    </div>
                    <div class="card-body text-center">
                        @if ($chart['total'] > 0)
                            <canvas id="pieChart{{ $loop->index }}" style="max-height:280px"></canvas>
                        @else
                            <p class="text-muted py-4"><i class="fas fa-info-circle mr-1"></i>Tiada data pesanan.</p>
                        @endif
                    </div>
                    @if ($chart['total'] > 0)
                        <div class="card-footer p-0">
                            <table class="table table-sm table-striped mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Judul Buku</th>
                                        <th class="text-center">Pesanan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($chart['labels'] as $idx => $label)
                                        <tr>
                                            <td class="small">{{ $label }}</td>
                                            <td class="text-center font-weight-bold">
                                                {{ number_format($chart['values'][$idx]) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    @if ($charts->every(fn($c) => $c['total'] == 0))
        <div class="callout callout-warning">
            <h5><i class="fas fa-exclamation-triangle mr-1"></i> Tiada Data</h5>
            <p class="mb-0">Tiada data pesanan buku KKM untuk daerah {{ $daerah }} tahun {{ $tahun }}.</p>
        </div>
    @endif
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
    <script>
        Chart.defaults.animation = false;
        Chart.defaults.responsive = false;

        (function() {
            if (window._laporanKkmBukuRendered) return;
            window._laporanKkmBukuRendered = true;

            const pieColors = [
                '#007bff', '#28a745', '#dc3545', '#ffc107', '#17a2b8', '#6f42c1',
                '#e83e8c', '#fd7e14', '#20c997', '#6610f2', '#343a40', '#6c757d'
            ];

            @foreach ($charts as $chart)
                @if ($chart['total'] > 0)
                    (function() {
                        var canvas = document.getElementById('pieChart{{ $loop->index }}');
                        canvas.width = canvas.parentElement.offsetWidth;
                        canvas.height = 280;

                        new Chart(canvas, {
                            type: 'pie',
                            data: {
                                labels: {!! json_encode($chart['labels']) !!},
                                datasets: [{
                                    data: {!! json_encode($chart['values']) !!},
                                    backgroundColor: pieColors.slice(0,
                                        {{ count($chart['labels']) }}),
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                responsive: false,
                                animation: false,
                                plugins: {
                                    legend: {
                                        display: false
                                    },
                                    title: {
                                        display: true,
                                        text: '{{ $chart['darjah'] }} — Pesanan Buku KKM {{ $tahun + 1 }}',
                                        font: {
                                            size: 13
                                        }
                                    }
                                }
                            }
                        });
                    })();
                @endif
            @endforeach
        })();
    </script>
@stop
