@extends('layouts.app')

@section('title', 'Dashboard Admin Kabupaten')

@section('content')
@php
    $fmt = fn ($n) => number_format((float) $n, 0, ',', '.');
    $rp = fn ($n) => 'Rp ' . number_format((float) $n, 0, ',', '.');
    $pendapatanPersen = $revenue['total_tagihan'] > 0
        ? (int) round($revenue['terbayar'] / $revenue['total_tagihan'] * 100)
        : 0;
    $chartData = [
        'gauges' => [
            ['key' => 'pkbm', 'label' => 'Lembaga PKBM', 'value' => (int) $stats['pkbm'], 'color' => '#2563eb'],
            ['key' => 'siswa', 'label' => 'Peserta Didik Aktif', 'value' => (int) $stats['siswa'], 'color' => '#10b981'],
            ['key' => 'guru', 'label' => 'Tenaga Pendidik', 'value' => (int) $stats['guru'], 'color' => '#f59e0b'],
            ['key' => 'pending', 'label' => 'Menunggu Verifikasi', 'value' => (int) $stats['pending'], 'color' => '#f43f5e'],
        ],
        'trend' => $registrationTrend,
        'distribution' => $studentsPerPkbm->take(10)->map(fn ($r): array => [
            'label' => $r->nama_pkbm,
            'siswa' => (int) $r->jumlah,
        ])->values(),
        'teachers' => $teachersPerPkbm->take(10)->map(fn ($r): array => [
            'label' => $r->nama_pkbm,
            'guru' => (int) $r->jumlah,
        ])->values(),
        'revenue' => [
            'terbayar' => (float) $revenue['terbayar'],
            'tunggakan' => (float) $revenue['tunggakan'],
        ],
    ];
    // Gabungkan label lembaga untuk diagram batang siswa vs guru.
    $distLabels = $chartData['distribution']->pluck('label')->values();
    $teacherMap = $chartData['teachers']->pluck('guru', 'label');
    $chartData['distributionLabels'] = $distLabels;
    $chartData['distributionSiswa'] = $chartData['distribution']->pluck('siswa')->values();
    $chartData['distributionGuru'] = $distLabels->map(fn ($l) => (int) ($teacherMap[$l] ?? 0))->values();
@endphp
<script id="fk-dashboard-data" type="application/json">@json($chartData)</script>

<div class="pkbm-dashboard mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Admin Kabupaten</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Dashboard</p>
            <h1 class="pkbm-dashboard__title">Dashboard Forum PKBM</h1>
            <p class="pkbm-dashboard__subtitle">Pusat kendali lembaga, peserta didik, pendidik, dan pendapatan satu wilayah.</p>
        </div>
        <div class="pkbm-period-chip">
            <span class="pkbm-period-chip__icon"><i class="bi bi-buildings" aria-hidden="true"></i></span>
            <span>
                <span class="pkbm-period-chip__label">Lembaga binaan</span>
                <span class="pkbm-period-chip__value">{{ $fmt($stats['pkbm']) }} PKBM aktif</span>
            </span>
        </div>
    </header>

    {{-- Statistik keseluruhan: ring gauge seperti dashboard profesional --}}
    <section class="sp-card pkbm-overview-card" aria-labelledby="fk-overall-title">
        <div class="pkbm-overview-card__header">
            <div>
                <h2 id="fk-overall-title" class="sp-section-title">Statistik Keseluruhan</h2>
                <p class="mt-1 text-xs text-slate-500">Ringkasan ekosistem SmartPenF di wilayah Anda</p>
            </div>
            <span class="pkbm-overview-card__period">
                <i class="bi bi-clock-history" aria-hidden="true"></i>
                {{ now()->locale('id')->translatedFormat('d M Y') }}
            </span>
        </div>
        <div class="grid gap-4 p-5 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($chartData['gauges'] as $gauge)
                <div class="flex flex-col items-center rounded-xl border border-slate-100 bg-slate-50/60 p-4">
                    <div class="relative size-32">
                        <canvas id="gauge-{{ $gauge['key'] }}" role="img" aria-label="{{ $gauge['label'] }}: {{ $fmt($gauge['value']) }}"></canvas>
                    </div>
                    <p class="mt-3 text-sm font-semibold text-slate-700">{{ $gauge['label'] }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Kartu statistik ringkas --}}
    <div class="pkbm-stat-grid" aria-label="Statistik utama">
        @foreach ([
            ['label' => 'Total Lembaga', 'value' => $stats['pkbm'], 'detail' => 'PKBM terverifikasi', 'icon' => 'bi-buildings', 'tone' => 'blue'],
            ['label' => 'Peserta Didik Aktif', 'value' => $stats['siswa'], 'detail' => 'Status aktif tahun berjalan', 'icon' => 'bi-people-fill', 'tone' => 'emerald'],
            ['label' => 'Tenaga Pendidik', 'value' => $stats['guru'], 'detail' => 'Guru di semua lembaga', 'icon' => 'bi-person-workspace', 'tone' => 'amber'],
            ['label' => 'Menunggu Verifikasi', 'value' => $stats['pending'], 'detail' => 'Pendaftaran baru', 'icon' => 'bi-hourglass-split', 'tone' => 'violet'],
        ] as $stat)
            <article @class([
                'pkbm-stat-card',
                'pkbm-stat-card--blue' => $stat['tone'] === 'blue',
                'pkbm-stat-card--emerald' => $stat['tone'] === 'emerald',
                'pkbm-stat-card--amber' => $stat['tone'] === 'amber',
                'pkbm-stat-card--violet' => $stat['tone'] === 'violet',
            ])>
                <span class="pkbm-stat-card__icon"><i class="bi {{ $stat['icon'] }}" aria-hidden="true"></i></span>
                <div class="pkbm-stat-card__content">
                    <p class="pkbm-stat-card__label">{{ $stat['label'] }}</p>
                    <p class="pkbm-stat-card__value">{{ $fmt($stat['value']) }}</p>
                    <p class="pkbm-stat-card__detail">{{ $stat['detail'] }}</p>
                </div>
            </article>
        @endforeach
    </div>

    {{-- Pendapatan & tagihan + kartu sorotan biru --}}
    <section class="grid items-stretch gap-5 xl:grid-cols-3">
        <article class="sp-card h-full overflow-hidden xl:col-span-2">
            <div class="sp-card-header flex items-center gap-3">
                <span class="settings-panel-heading__icon"><i class="bi bi-cash-stack" aria-hidden="true"></i></span>
                <div>
                    <h2 class="sp-section-title">Total Pendapatan &amp; Tagihan</h2>
                    <p class="mt-1 text-xs text-slate-500">Realisasi langganan &amp; maintenance lembaga</p>
                </div>
            </div>
            <div class="grid gap-5 p-5 sm:grid-cols-[minmax(0,15rem)_1fr] sm:items-center">
                <div class="space-y-4">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-emerald-600">Total Pendapatan</p>
                        <p class="mt-1 text-2xl font-extrabold text-slate-900">{{ $rp($revenue['terbayar']) }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-rose-600">Sisa Tagihan</p>
                        <p class="mt-1 text-2xl font-extrabold text-slate-900">{{ $rp($revenue['tunggakan']) }}</p>
                    </div>
                    <div class="rounded-lg bg-slate-50 p-3 text-xs text-slate-600">
                        <div class="flex justify-between"><span>Tagihan lunas</span><span class="font-bold text-slate-800">{{ $fmt($revenue['lunas']) }}</span></div>
                        <div class="mt-1 flex justify-between"><span>Tagihan aktif</span><span class="font-bold text-slate-800">{{ $fmt($revenue['aktif']) }}</span></div>
                        <div class="mt-1 flex justify-between"><span>Total tertagih</span><span class="font-bold text-slate-800">{{ $rp($revenue['total_tagihan']) }}</span></div>
                    </div>
                </div>
                <div class="relative h-56">
                    <canvas id="chartRevenue" role="img" aria-label="Diagram batang pendapatan versus sisa tagihan"></canvas>
                </div>
            </div>
        </article>

        {{-- Kartu sorotan biru (Daily Sales style) --}}
        <article class="pkbm-highlight-card">
            <p class="pkbm-highlight-card__label">Pendapatan Berlangganan</p>
            <p class="pkbm-highlight-card__period">{{ now()->locale('id')->translatedFormat('F Y') }}</p>
            <p class="pkbm-highlight-card__value">{{ $rp($revenue['terbayar']) }}</p>
            <div class="pkbm-highlight-card__meter" role="progressbar" aria-label="Tingkat pembayaran" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ $pendapatanPersen }}">
                <span class="pkbm-highlight-card__meter-fill" style="width: {{ $pendapatanPersen }}%"></span>
            </div>
            <p class="pkbm-highlight-card__note">{{ $pendapatanPersen }}% tagihan telah terlunasi</p>
        </article>
    </section>

    {{-- Tren pendaftaran peserta didik --}}
    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex items-center gap-3">
            <span class="settings-panel-heading__icon"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
            <div>
                <h2 class="sp-section-title">Tren Peserta Didik Aktif</h2>
                <p class="mt-1 text-xs text-slate-500">Peserta didik berstatus aktif yang terdaftar per bulan, 12 bulan terakhir</p>
            </div>
        </div>
        <div class="p-4">
            <div class="relative h-72"><canvas id="chartTrend" role="img" aria-label="Diagram area tren pendaftaran peserta didik per bulan"></canvas></div>
        </div>
    </section>

    {{-- Sebaran siswa vs guru per lembaga --}}
    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex items-center gap-3">
            <span class="settings-panel-heading__icon"><i class="bi bi-bar-chart-fill" aria-hidden="true"></i></span>
            <div>
                <h2 class="sp-section-title">Sebaran Lembaga Terbesar</h2>
                <p class="mt-1 text-xs text-slate-500">Perbandingan peserta didik dan pendidik pada 10 lembaga teratas</p>
            </div>
        </div>
        <div class="p-4">
            <div class="relative h-72"><canvas id="chartDistribution" role="img" aria-label="Diagram batang sebaran siswa dan guru per lembaga"></canvas></div>
        </div>
    </section>

    {{-- Tabel sorotan lembaga --}}
    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
            <div class="flex items-center gap-3">
                <span class="settings-panel-heading__icon"><i class="bi bi-buildings" aria-hidden="true"></i></span>
                <div>
                    <h2 class="sp-section-title">Lembaga dengan Peserta Didik Terbanyak</h2>
                    <p class="mt-1 text-xs text-slate-500">Sorotan 8 lembaga teratas</p>
                </div>
            </div>
            <a href="{{ route('fk.pkbm.index') }}" class="sp-btn-secondary">
                <i class="bi bi-list-ul" aria-hidden="true"></i>Semua Lembaga
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[32rem]">
                <thead>
                    <tr>
                        <th scope="col" class="w-14">Rank</th>
                        <th scope="col">Nama PKBM</th>
                        <th scope="col" class="text-right">Peserta Didik</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($institutionList as $pkbm)
                        <tr>
                            <td class="text-slate-500">{{ $loop->iteration }}</td>
                            <th scope="row" class="font-medium text-slate-800">{{ $pkbm->nama_pkbm }}</th>
                            <td class="text-right font-semibold text-blue-700">{{ $fmt($pkbm->jumlah) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="3" class="py-8 text-center text-sm text-slate-500">Belum ada data siswa.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script>
        (function () {
            if (!window.Chart) return;
            const src = document.getElementById('fk-dashboard-data');
            if (!src) return;
            const data = JSON.parse(src.textContent);

            const fmt = (v) => Number(v).toLocaleString('id-ID');
            Chart.defaults.font.family = "'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif";
            Chart.defaults.color = '#475569';
            Chart.defaults.maintainAspectRatio = false;

            // Plugin teks di tengah ring gauge.
            const centerText = {
                id: 'centerText',
                afterDraw(chart, _a, opts) {
                    if (!opts || !opts.value) return;
                    const { ctx, chartArea } = chart;
                    const x = (chartArea.left + chartArea.right) / 2;
                    const y = (chartArea.top + chartArea.bottom) / 2;
                    ctx.save();
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillStyle = '#0f172a';
                    ctx.font = '700 1.35rem "Plus Jakarta Sans", system-ui, sans-serif';
                    ctx.fillText(fmt(opts.value), x, y);
                    ctx.restore();
                },
            };

            data.gauges.forEach((g) => {
                const el = document.getElementById(`gauge-${g.key}`);
                if (!el) return;
                const max = Math.max(g.value, 1);
                new Chart(el, {
                    type: 'doughnut',
                    data: {
                        labels: [g.label, ''],
                        datasets: [{
                            data: [g.value, 0],
                            backgroundColor: [g.color, '#e2e8f0'],
                            borderWidth: 0,
                        }],
                    },
                    options: {
                        cutout: '74%',
                        plugins: {
                            legend: { display: false },
                            tooltip: { enabled: false },
                            centerText: { value: g.value },
                        },
                    },
                    plugins: [centerText],
                });
            });

            // Pendapatan vs sisa tagihan.
            const revEl = document.getElementById('chartRevenue');
            if (revEl) {
                new Chart(revEl, {
                    type: 'bar',
                    data: {
                        labels: ['Pendapatan', 'Sisa Tagihan'],
                        datasets: [{
                            label: 'Rupiah',
                            data: [data.revenue.terbayar, data.revenue.tunggakan],
                            backgroundColor: ['#10b981', '#f43f5e'],
                            borderRadius: 6,
                            maxBarThickness: 64,
                        }],
                    },
                    options: {
                        plugins: {
                            legend: { display: false },
                            tooltip: { callbacks: { label: (c) => ' Rp ' + fmt(c.raw) } },
                        },
                        scales: {
                            x: { grid: { display: false } },
                            y: { beginAtZero: true, grid: { color: 'rgba(148,163,184,.18)' }, ticks: { callback: (v) => fmt(v) } },
                        },
                    },
                });
            }

            // Tren pendaftaran (area).
            const trendEl = document.getElementById('chartTrend');
            if (trendEl) {
                new Chart(trendEl, {
                    type: 'line',
                    data: {
                        labels: data.trend.map((t) => t.label),
                        datasets: [{
                            label: 'Siswa baru',
                            data: data.trend.map((t) => t.value),
                            borderColor: '#2563eb',
                            backgroundColor: 'rgba(37,99,235,.14)',
                            fill: true,
                            tension: 0.35,
                            pointRadius: 4,
                            pointBackgroundColor: '#2563eb',
                        }],
                    },
                    options: {
                        plugins: { legend: { display: false } },
                        scales: {
                            x: { grid: { display: false } },
                            y: { beginAtZero: true, grid: { color: 'rgba(148,163,184,.18)' }, ticks: { precision: 0 } },
                        },
                    },
                });
            }

            // Sebaran siswa vs guru per lembaga (grouped bar).
            const distEl = document.getElementById('chartDistribution');
            if (distEl) {
                new Chart(distEl, {
                    type: 'bar',
                    data: {
                        labels: data.distributionLabels,
                        datasets: [
                            { label: 'Peserta Didik', data: data.distributionSiswa, backgroundColor: '#2563eb', borderRadius: 4, maxBarThickness: 26 },
                            { label: 'Pendidik', data: data.distributionGuru, backgroundColor: '#f59e0b', borderRadius: 4, maxBarThickness: 26 },
                        ],
                    },
                    options: {
                        plugins: { legend: { position: 'bottom' } },
                        scales: {
                            x: { grid: { display: false }, ticks: { maxRotation: 45, minRotation: 45 } },
                            y: { beginAtZero: true, grid: { color: 'rgba(148,163,184,.18)' }, ticks: { precision: 0 } },
                        },
                    },
                });
            }
        })();
    </script>
@endpush