{{-- Dashboard panitia: ringkasan angka, pendaftar per jurusan, dan 10 pendaftar terbaru (FR-11). --}}
@extends('layouts.panel')

@section('judul', 'Dashboard')
@section('subjudul', 'Ringkasan pendaftaran tahun ajaran ' . atur('tahun_ajaran', '2027/2028'))

@section('isi')
    @if ($peringatan)
        <div class="alert alert-warning">
            <h6 class="mb-1">
                <i class="fas fa-exclamation-triangle mr-1" aria-hidden="true"></i>
                Jumlah pendaftar sudah mencapai {{ number_format($total, 0, ',', '.') }}
            </h6>
            <p class="mb-0">
                Batas peringatan {{ number_format($peringatan, 0, ',', '.') }} terlampaui.
                Pendaftaran tetap terbuka; tutup secara manual dari halaman Pengaturan bila diperlukan.
            </p>
        </div>
    @endif

    <div class="row">
        @php($ikon = [
            'Total pendaftar' => ['fa-users', 'bg-info'],
            'Asal sekolah' => ['fa-school', 'bg-success'],
            'Perekomendasi' => ['fa-user-friends', 'bg-warning'],
            'Diterima' => ['fa-graduation-cap', 'bg-primary'],
        ])
        @foreach ($kartu as $label => $angka)
            @php($rupa = $ikon[$label] ?? ['fa-chart-bar', 'bg-info'])
            <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box">
                    <span class="info-box-icon {{ $rupa[1] }} elevation-1">
                        <i class="fas {{ $rupa[0] }}" aria-hidden="true"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">{{ $label }}</span>
                        <span class="info-box-number">{{ number_format($angka, 0, ',', '.') }}</span>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row">
        <div class="col-12 col-xl-6">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h2 class="card-title h5 mb-0">Pendaftar per jurusan</h2>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="Tutup atau buka">
                            <i class="fas fa-minus" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="barChart" height="250" class="w-100"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-6">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h2 class="card-title h5 mb-0">Donut Chart <small class="ml-1">persentase per jurusan</small></h2>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="Tutup atau buka">
                            <i class="fas fa-minus" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    {{-- Tiga kolom: legenda kiri – donut – legenda kanan.
                         Chart.js hanya menaruh legenda di satu sisi, jadi
                         daftarnya disusun sendiri (isi #legendaKiri dan
                         #legendaKanan diisi skrip). --}}
                    <div class="donut-baris">
                        <ul id="legendaKiri" class="legenda-donut"></ul>

                        {{-- Wadah bertinggi tetap: tanpa ini maintainAspectRatio:false
                             membuat Chart.js menyetel tinggi canvas = tinggi
                             container, lalu keduanya saling menumbuhkan. --}}
                        <div class="tinggi-donut">
                            <canvas id="donutChart"></canvas>
                        </div>

                        <ul id="legendaKanan" class="legenda-donut"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        @foreach ([
            ['id' => 'tabel-perekomendasi', 'judul' => 'Top Perekomendasi', 'sub' => 'nama pembawa', 'kolom' => 'Perekomendasi'],
            ['id' => 'tabel-sekolah', 'judul' => 'Top Sekolah Asal', 'sub' => 'SMP/MTs', 'kolom' => 'Sekolah'],
        ] as $daftar)
            <div class="col-12 col-xl-6">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h2 class="card-title h5 mb-0">{{ $daftar['judul'] }} <small class="ml-1">{{ $daftar['sub'] }}</small></h2>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse" aria-label="Tutup atau buka">
                                <i class="fas fa-minus" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover table-striped table-sm w-100 dataTable no-footer dtr-inline" id="{{ $daftar['id'] }}">
                                <caption class="sr-only">{{ $daftar['judul'] }}</caption>
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">{{ $daftar['kolom'] }}</th>
                                        <th scope="col" class="text-right">Pendaftar</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>@endsection

@push('gaya')
    <link rel="stylesheet" href="{{ asset('tema/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('tema/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <style>
        /*
         * Pengecualian terbatas: donut chart. Chart.js hanya menaruh legenda
         * di satu sisi, sedangkan enam jurusan perlu tiga di kiri dan tiga di
         * kanan, sejajar dengan donutnya. Sisanya tetap memakai komponen
         * Bootstrap 4 apa adanya.
         */

        /* Legenda kiri – donut – legenda kanan, ketiganya setinggi baris. */
        .donut-baris {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* min-width:0 wajib agar kolom tengah boleh menyusut; tanpa itu canvas
           mendorong legenda keluar kartu. */
        .tinggi-donut {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
            height: 250px;
        }

        .legenda-donut {
            flex: 0 0 auto;
            width: 150px;
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 13px;
        }

        .legenda-donut li {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 2px 0;
        }

        /* Petak warna diambil dari canvas: Chart.js menyimpan warna tiap
           potongan di sana, jadi tidak ada daftar warna yang ditulis dua kali. */
        .legenda-donut canvas {
            flex: 0 0 auto;
            width: 12px;
            height: 12px;
            margin-right: 8px;
            border-radius: 2px;
            vertical-align: -1px;
        }
    </style>
@endpush

@push('skrip')
    <script src="{{ asset('tema/plugins/chart.js/Chart.min.js') }}"></script>
    <script src="{{ asset('tema/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('tema/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('tema/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('tema/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script>
        $(function () {
            //-------------
            //- BAR CHART -
            //-------------
            // Label memuat jumlahnya, seperti donut yang memuat persentase.
            // Tanpa itu, tinggi batang saja sulit dibaca nilainya.
            var barKode = @json($jurusans->pluck('kode')->values());
            var barJumlah = @json($jurusans->pluck('jumlah')->values());
            var barDiterima = @json($jurusans->pluck('diterima')->values());
            var barChartCanvas = $('#barChart').get(0).getContext('2d')
            var barChartData = {
                labels: barKode.map(function (kode, i) { return kode + ' (' + barJumlah[i] + ')' }),
                datasets: [{
                    label: 'Pendaftar',
                    backgroundColor: 'rgba(60,141,188,0.9)',
                    borderColor: 'rgba(60,141,188,0.8)',
                    data: barJumlah
                }]
            }
            var barChartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                tooltips: {
                    // Judul disetel kosong supaya tooltip hanya satu baris:
                    // "TKR: 7 pendaftar (2 diterima)". Tanpa ini judul memuat
                    // label yang sudah membawa jumlah, jadi angkanya tampil
                    // dua kali.
                    callbacks: {
                        title: function () { return '' },
                        label: function (item, data) {
                            var i = item.index
                            var diterima = barDiterima[i] || 0

                            // "(0 diterima)" tidak perlu ditampilkan: belum ada
                            // yang diverifikasi bukan informasi yang berguna.
                            return barKode[i] + ': ' +
                                data.datasets[item.datasetIndex].data[i] + ' pendaftar' +
                                (diterima ? ' (' + diterima + ' diterima)' : '')
                        }
                    }
                },
                // beginAtZero wajib pada grafik batang: tanpa ini sumbu mulai
                // dari nilai terkecil data (mis. 5), sehingga batang bernilai
                // rendah nyaris tak terlihat dan tingginya tidak sebanding.
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            precision: 0,
                            stepSize: 1
                        }
                    }]
                }
            }

            new Chart(barChartCanvas, {
                type: 'bar',
                data: barChartData,
                options: barChartOptions
            })

            //-------------
            //- DONUT CHART -
            //-------------
            var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
            var donutKode = @json($jurusans->pluck('kode')->values());
            var donutJumlah = @json($jurusans->pluck('jumlah')->values());
            var donutTotal = donutJumlah.reduce(function (a, b) { return a + b }, 0)
            var persen = function (n) {
                return donutTotal ? (n / donutTotal * 100).toFixed(1).replace('.', ',') + '%' : '0%'
            }
            var donutData = {
                labels: donutKode.map(function (kode, i) { return kode + ' (' + persen(donutJumlah[i]) + ')' }),
                datasets: [{
                    data: donutJumlah,
                    backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
                }]
            }
            var donutOptions = {
                maintainAspectRatio: false,
                responsive: true,
                // Legenda bawaan dimatikan; diganti legenda kustom dua kolom.
                legend: {
                    display: false
                },
                tooltips: {
                    callbacks: {
                        label: function (item, data) {
                            var n = data.datasets[item.datasetIndex].data[item.index]
                            return donutKode[item.index] + ': ' + n + ' pendaftar (' + persen(n) + ')'
                        }
                    }
                }
            }
            new Chart(donutChartCanvas, {
                type: 'doughnut',
                data: donutData,
                options: donutOptions
            })

            /*
             * Legenda donut: tiga jurusan di kiri, tiga di kanan, sejajar
             * dengan donutnya. Chart.js hanya mendukung satu posisi legenda,
             * jadi daftarnya disusun sendiri ke dua <ul> yang sudah ada di
             * markup.
             */
            var donutWarna = donutData.datasets[0].backgroundColor
            var donutSisi = [$('#legendaKiri'), $('#legendaKanan')]
            donutKode.forEach(function (kode, i) {
                donutSisi[Math.floor(i / 3)].append(
                    '<li>' +
                        // Petak warna digambar dari warna potongan donut, supaya
                        // legenda tidak pernah beda dengan grafiknya.
                        '<canvas width="12" height="12" data-warna="' + i + '"></canvas>' +
                        '<span class="font-weight-bold">' + kode + '</span> ' +
                        '<span class="text-muted">' + donutJumlah[i] + ' (' + persen(donutJumlah[i]) + ')</span>' +
                    '</li>'
                )
            })
            $('.legenda-donut canvas').each(function () {
                var i = Number(this.dataset.warna)
                var ctx = this.getContext('2d')
                ctx.fillStyle = donutWarna[i]
                ctx.fillRect(0, 0, this.width, this.height)
            })

            //-------------------------------------------------
            //- PERINGKAT (DataTables serverside, 10 per halaman) -
            //-------------------------------------------------
            // Dua tabel peringkat hanya menampilkan 5 teratas: tanpa kotak cari, tanpa
            // paginasi, dan tanpa baris informasi. Data tetap diambil dari server.
            function peringkat(idTabel, url, kosong) {
                $(idTabel).DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    paging: false,
                    searching: false,
                    info: false,
                    lengthChange: false,
                    order: [[2, 'desc']],
                    ajax: { url: url, data: function(kirim) { kirim.length = 5 } },
                    columns: [
                        {
                            data: null,
                            orderable: false,
                            searchable: false,
                            render: function(data, jenis, baris, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1
                            }
                        },
                        { data: 'nama', name: 'nama', orderable: false },
                        {
                            data: 'jumlah',
                            name: 'jumlah',
                            className: 'text-right',
                            orderable: false,
                            render: function(jumlah) {
                                return '<strong>' + Number(jumlah).toLocaleString('id-ID') + '</strong>'
                            }
                        }
                    ],
                    language: {
                        processing: 'Memuat...',
                        zeroRecords: 'Tidak ada yang cocok.',
                        emptyTable: kosong
                    }
                })
            }
            peringkat('#tabel-perekomendasi', '{{ route('panel.dashboard.perekomendasi') }}', 'Belum ada pendaftar yang membawa rekomendasi.')
            peringkat('#tabel-sekolah', '{{ route('panel.dashboard.sekolah') }}', 'Belum ada pendaftar.')
        })
    </script>
@endpush