@php
    $weekdays = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'];
    $weekdayShort = ['Senin' => 'Sen', 'Selasa' => 'Sel', 'Rabu' => 'Rab', 'Kamis' => 'Kam', 'Jumat' => 'Jum', 'Sabtu' => 'Sab', 'Minggu' => 'Min'];
    $activeDay = in_array($pkbmDashboard['today'], $weekdays, true) ? $pkbmDashboard['today'] : 'Senin';
    $demographics = $pkbmDashboard['demographics'];
    $maxClassCount = max(1, (int) $pkbmDashboard['classDistribution']->max('jumlah_siswa'));
    $schoolAgePercent = $demographics['total'] > 0
        ? (int) round($demographics['schoolAge'] / $demographics['total'] * 100)
        : 0;
    $malePercent = $demographics['total'] > 0
        ? $demographics['male'] / $demographics['total'] * 100
        : 0;
    $femalePercent = $demographics['total'] > 0
        ? $demographics['female'] / $demographics['total'] * 100
        : 0;
    $unknownGenderPercent = max(0, 100 - $malePercent - $femalePercent);
@endphp

<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>Beranda</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Dashboard {{ $role }}</p>
            <h1 class="pkbm-dashboard__title">Selamat datang, {{ $name }}.</h1>
            <p class="pkbm-dashboard__subtitle">Ringkasan aktivitas {{ $pkbmDashboard['organization']->nama_pkbm }}.</p>
        </div>
        <div class="pkbm-period-chip">
            <span class="pkbm-period-chip__icon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
            <span>
                <span class="pkbm-period-chip__label">Periode aktif</span>
                @if ($pkbmDashboard['period'])
                    <span class="pkbm-period-chip__value">{{ $pkbmDashboard['period']->tahun_pelajaran }} · {{ $pkbmDashboard['period']->semester }}</span>
                @else
                    <a href="{{ route('pkbm.settings.index') }}" class="pkbm-period-chip__value">Atur periode akademik</a>
                @endif
            </span>
        </div>
    </header>

    @if ($pkbmDashboard['pendingJobs']->isNotEmpty())
        <div class="flex justify-end">
            <button type="button" data-open-jobs-modal aria-haspopup="dialog" aria-controls="jobs-modal" class="sp-btn-secondary">
                <i class="bi bi-clipboard-check" aria-hidden="true"></i>
                Lihat pekerjaan
                <span class="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-bold text-blue-700">{{ $pkbmDashboard['pendingJobs']->count() }}</span>
            </button>
        </div>
    @endif

    <section class="sp-card pkbm-overview-card" aria-labelledby="dashboard-statistics-title">
        <div class="pkbm-overview-card__header">
            <div>
                <h2 id="dashboard-statistics-title" class="sp-section-title">Statistik lembaga</h2>
                <p class="mt-1 text-xs text-slate-500">Data ringkasan SmartPenF</p>
            </div>
            <span class="pkbm-overview-card__period">
                <i class="bi bi-clock-history" aria-hidden="true"></i>
                {{ $pkbmDashboard['period'] ? $pkbmDashboard['period']->tahun_pelajaran.' · '.$pkbmDashboard['period']->semester : 'Periode belum diatur' }}
            </span>
        </div>
        <div class="pkbm-stat-grid" aria-label="Statistik lembaga">
            @foreach ([
                ['label' => 'Total Siswa (Aktif)', 'value' => $pkbmDashboard['studentCount'], 'detail' => 'Terdaftar pada periode aktif', 'icon' => 'bi-people-fill', 'tone' => 'blue'],
                ['label' => 'Tenaga Pengajar', 'value' => $pkbmDashboard['teacherCount'], 'detail' => 'Pengajar di lembaga', 'icon' => 'bi-person-workspace', 'tone' => 'emerald'],
                ['label' => 'Rombongan Belajar', 'value' => $pkbmDashboard['classCount'], 'detail' => 'Kelas terdaftar', 'icon' => 'bi-building-fill', 'tone' => 'amber'],
                ['label' => 'Mata Pelajaran', 'value' => $pkbmDashboard['subjectCount'], 'detail' => 'Mapel terdaftar', 'icon' => 'bi-journal-bookmark-fill', '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">{{ number_format($stat['value'], 0, ',', '.') }}</p>
                        <p class="pkbm-stat-card__detail">{{ $stat['detail'] }}</p>
                    </div>
                </article>
            @endforeach
        </div>
    </section>

    @php
        $chartData = [
            'gender' => [
                'male' => (int) $demographics['male'],
                'female' => (int) $demographics['female'],
                'unknown' => max(0, (int) $demographics['total'] - (int) $demographics['male'] - (int) $demographics['female']),
            ],
            'classes' => $pkbmDashboard['classDistribution']
                ->map(fn ($class): array => [
                    'label' => $class->nama_kelas ?: 'Kelas tanpa nama',
                    'male' => (int) $class->jumlah_laki_laki,
                    'female' => (int) $class->jumlah_perempuan,
                    'unknown' => max(0, (int) $class->jumlah_siswa - (int) $class->jumlah_laki_laki - (int) $class->jumlah_perempuan),
                ])
                ->values()
                ->all(),
            'trend' => $pkbmDashboard['enrollmentTrend'] ?? [],
        ];
    @endphp
    <script id="dashboard-chart-data" type="application/json">@json($chartData)</script>

    <section class="grid items-stretch gap-5 xl:grid-cols-3">
        <article class="sp-card h-full overflow-hidden">
            <div class="sp-card-header flex items-center gap-3">
                <span class="settings-panel-heading__icon"><i class="bi bi-pie-chart-fill" aria-hidden="true"></i></span>
                <div>
                    <h2 class="sp-section-title">Komposisi gender</h2>
                    <p class="mt-1 text-xs text-slate-500">{{ number_format($demographics['total'], 0, ',', '.') }} peserta didik aktif</p>
                </div>
            </div>
            <div class="p-4">
                <div class="relative h-64"><canvas id="chartGender" role="img" aria-label="Diagram lingkaran komposisi gender siswa"></canvas></div>
            </div>
        </article>

        <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-bar-chart-fill" aria-hidden="true"></i></span>
                <div>
                    <h2 class="sp-section-title">Sebaran siswa per kelas</h2>
                    <p class="mt-1 text-xs text-slate-500">{{ $pkbmDashboard['classDistribution']->count() }} kelas pada periode aktif</p>
                </div>
            </div>
            <div class="p-4">
                <div class="relative h-64"><canvas id="chartClass" role="img" aria-label="Diagram batang sebaran siswa per kelas"></canvas></div>
            </div>
        </article>
    </section>

    <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" 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">Jumlah siswa terdaftar per periode akademik</p>
            </div>
        </div>
        <div class="p-4">
            <div class="relative h-72"><canvas id="chartTrend" role="img" aria-label="Diagram garis tren peserta didik aktif per periode"></canvas></div>
        </div>
    </section>

    <section class="grid items-stretch gap-5 xl:grid-cols-2">
        <article class="sp-card h-full overflow-hidden">
            <div class="settings-panel-heading">
                <span class="settings-panel-heading__icon"><i class="bi bi-info-circle-fill" aria-hidden="true"></i></span>
                <div>
                    <h2 class="sp-section-title">Identitas satuan pendidikan</h2>
                    <p class="mt-1 text-xs text-slate-500">Informasi lembaga PKBM</p>
                </div>
            </div>
            <dl class="grid grid-cols-2 gap-x-4 gap-y-4 p-5 sm:p-6">
                <div class="col-span-2 sm:col-span-1">
                    <dt class="text-xs font-medium text-slate-500">Nama PKBM</dt>
                    <dd class="mt-1 text-sm font-bold text-slate-900">{{ $pkbmDashboard['organization']->nama_pkbm ?: '-' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium text-slate-500">NPSN</dt>
                    <dd class="mt-1 text-sm font-semibold text-slate-800">{{ $pkbmDashboard['organization']->npsn ?: '-' }}</dd>
                </div>
                <div class="border-t border-slate-100 pt-4">
                    <dt class="text-xs font-medium text-slate-500">Kepala PKBM</dt>
                    <dd class="mt-1 text-sm font-semibold text-blue-800">{{ $pkbmDashboard['period']->kepala_sekolah ?? 'Belum diatur' }}</dd>
                </div>
                <div class="border-t border-slate-100 pt-4">
                    <dt class="text-xs font-medium text-slate-500">Akreditasi</dt>
                    <dd class="mt-1 text-sm font-semibold text-slate-800">{{ $pkbmDashboard['organization']->akreditasi ?: 'Belum ada' }}</dd>
                </div>
                <div class="col-span-2 border-t border-slate-100 pt-4">
                    <dt class="text-xs font-medium text-slate-500"><i class="bi bi-geo-alt mr-1" aria-hidden="true"></i>Alamat</dt>
                    <dd class="mt-1 text-sm leading-5 text-slate-800">{{ $pkbmDashboard['organization']->alamat ?: '-' }}</dd>
                    <dd class="mt-1 text-xs text-slate-500">Kec. {{ $pkbmDashboard['organization']->kecamatan ?: '-' }}, Kab. {{ $pkbmDashboard['organization']->kabupaten ?: '-' }}</dd>
                </div>
                <div class="border-t border-slate-100 pt-4">
                    <dt class="text-xs font-medium text-slate-500">Email</dt>
                    <dd class="mt-1 break-words text-sm text-slate-800">{{ $pkbmDashboard['organization']->email ?: '-' }}</dd>
                </div>
                <div class="border-t border-slate-100 pt-4">
                    <dt class="text-xs font-medium text-slate-500">No. Telepon</dt>
                    <dd class="mt-1 text-sm text-slate-800">{{ $pkbmDashboard['organization']->kontak ?: '-' }}</dd>
                </div>
                <div class="col-span-2 border-t border-slate-100 pt-4">
                    <dt class="text-xs font-medium text-slate-500"><i class="bi bi-globe mr-1" aria-hidden="true"></i>Website</dt>
                    @if ($pkbmDashboard['organization']->website)
                        @php
                            $website = $pkbmDashboard['organization']->website;
                            $websiteUrl = \Illuminate\Support\Str::startsWith($website, ['http://', 'https://']) ? $website : 'https://'.$website;
                        @endphp
                        <dd class="mt-1 break-all text-sm">
                            <a href="{{ $websiteUrl }}" target="_blank" rel="noopener noreferrer" class="font-medium text-blue-700 hover:text-blue-900">{{ $website }}</a>
                        </dd>
                    @else
                        <dd class="mt-1 text-sm text-slate-500">-</dd>
                    @endif
                </div>
            </dl>
        </article>

        <article class="sp-card h-full overflow-hidden">
            <div class="settings-panel-heading">
                <span class="settings-panel-heading__icon"><i class="bi bi-calendar-week-fill" aria-hidden="true"></i></span>
                <div class="min-w-0 flex-1">
                    <h2 class="sp-section-title">Jadwal pelajaran</h2>
                    <p class="mt-1 text-xs text-slate-500">
                        Hari ini: {{ $activeDay }} ·
                        {{ $pkbmDashboard['period'] ? $pkbmDashboard['period']->tahun_pelajaran.' · '.$pkbmDashboard['period']->semester : 'Periode belum diatur' }}
                    </p>
                </div>
            </div>
            <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-4 py-3">
                <form method="GET" action="{{ route('dashboard') }}" class="flex items-center gap-2">
                    @if (request()->filled('filter_rekap_kelas'))
                        <input type="hidden" name="filter_rekap_kelas" value="{{ request('filter_rekap_kelas') }}">
                    @endif
                    <label for="schedule-class-filter" class="text-xs font-medium text-slate-600">Kelas</label>
                    <select id="schedule-class-filter" name="filter_kelas_jadwal" onchange="this.form.submit()" class="sp-form-control max-w-48 px-3 py-2 text-xs">
                        <option value="">Semua kelas</option>
                        @foreach ($pkbmDashboard['classOptions'] as $classOption)
                            <option value="{{ $classOption->id }}" @selected($pkbmDashboard['scheduleClassId'] === (int) $classOption->id)>
                                {{ $classOption->nama_kelas ?: 'Kelas tanpa nama' }}
                            </option>
                        @endforeach
                    </select>
                    <noscript><button type="submit" class="sp-btn-secondary">Filter</button></noscript>
                </form>
                <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700">
                    <i class="bi bi-circle-fill mr-1 text-[7px]" aria-hidden="true"></i>Hari ini: {{ $activeDay }}
                </span>
            </div>
            <div class="p-4 sm:p-5">
                <div class="mb-3 flex gap-1 overflow-x-auto border-b border-slate-100" role="tablist" aria-label="Jadwal berdasarkan hari">
                    @foreach ($weekdays as $day)
                        @php
                            $dayItems = $pkbmDashboard['scheduleByDay']->get($day, []);
                            $isActiveDay = $day === $activeDay;
                        @endphp
                        <button
                            type="button"
                            id="schedule-tab-{{ $loop->index }}"
                            role="tab"
                            aria-controls="schedule-panel-{{ $loop->index }}"
                            aria-selected="{{ $isActiveDay ? 'true' : 'false' }}"
                            data-schedule-tab="{{ $loop->index }}"
                            @class([
                                'min-w-16 border-b-2 px-2 py-2 text-center text-xs font-semibold',
                                'border-blue-600 text-blue-700' => $isActiveDay,
                                'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700' => ! $isActiveDay,
                            ])>
                            {{ $weekdayShort[$day] }}
                            <span class="mt-0.5 block text-[10px] font-medium text-slate-400">{{ count($dayItems) }} jadwal</span>
                        </button>
                    @endforeach
                </div>

                @foreach ($weekdays as $day)
                    @php
                        $dayItems = $pkbmDashboard['scheduleByDay']->get($day, []);
                    @endphp
                    <div
                        id="schedule-panel-{{ $loop->index }}"
                        role="tabpanel"
                        aria-labelledby="schedule-tab-{{ $loop->index }}"
                        data-schedule-panel="{{ $loop->index }}"
                        @if ($day !== $activeDay) hidden @endif
                        class="max-h-80 overflow-y-auto">
                        @forelse ($dayItems as $lesson)
                            <div class="flex flex-wrap items-center justify-between gap-2 border-b border-dashed border-slate-100 px-2 py-3 last:border-0 even:bg-slate-50">
                                <div class="flex flex-wrap items-center gap-2 text-xs">
                                    <span class="rounded-full bg-slate-100 px-2.5 py-1 font-semibold text-slate-700">
                                        Jam {{ $lesson['jam_start'] }}@if ($lesson['jam_end'] !== $lesson['jam_start'])-{{ $lesson['jam_end'] }}@endif
                                    </span>
                                    <span class="font-semibold text-slate-800">{{ $lesson['nama_kelas'] ?: 'Kelas tanpa nama' }}</span>
                                    <span class="text-slate-400" aria-hidden="true">·</span>
                                    <span class="text-slate-600">{{ $lesson['nama_mapel'] ?: 'Belum diatur' }}</span>
                                </div>
                                <div class="flex flex-wrap items-center gap-2 text-xs">
                                    <span class="text-slate-500">
                                        <i class="bi bi-person-check mr-1 text-emerald-600" aria-hidden="true"></i>{{ $lesson['nama_guru'] ?: '-' }}
                                    </span>
                                    @if ($lesson['metode'])
                                        <span class="rounded-full bg-slate-100 px-2 py-1 text-slate-600">{{ $lesson['metode'] }}</span>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <p class="py-8 text-center text-xs italic text-slate-500">
                                @if ($pkbmDashboard['period'])
                                    Tidak ada jadwal pelajaran hari {{ $day }}.
                                @else
                                    Belum ada periode akademik aktif.
                                @endif
                            </p>
                        @endforelse
                    </div>
                @endforeach
            </div>
        </article>
    </section>

    <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-bar-chart-steps" aria-hidden="true"></i></span>
                <div>
                    <h2 class="sp-section-title">Data siswa per kelas</h2>
                    <p class="mt-1 text-xs text-slate-500">
                        {{ $pkbmDashboard['period'] ? 'Sebaran siswa pada '.$pkbmDashboard['period']->tahun_pelajaran.' · '.$pkbmDashboard['period']->semester : 'Periode akademik belum diatur' }}
                    </p>
                </div>
            </div>
            <div class="flex flex-wrap items-center justify-end gap-x-4 gap-y-2">
                <span class="pkbm-overview-card__period">
                    <i class="bi bi-people" aria-hidden="true"></i>{{ $pkbmDashboard['classDistribution']->count() }} kelas · {{ number_format($pkbmDashboard['classDistribution']->sum('jumlah_siswa'), 0, ',', '.') }} siswa
                </span>
                <span class="text-xs text-slate-500">100% = kelas dengan siswa terbanyak</span>
                <div class="flex items-center gap-3 text-xs text-slate-500" aria-label="Keterangan jenis kelamin">
                    <span><i class="bi bi-circle-fill mr-1 text-blue-600" aria-hidden="true"></i>Laki-laki</span>
                    <span><i class="bi bi-circle-fill mr-1 text-rose-500" aria-hidden="true"></i>Perempuan</span>
                    <span><i class="bi bi-circle-fill mr-1 text-slate-300" aria-hidden="true"></i>Belum diisi</span>
                </div>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[36rem]">
                <thead>
                    <tr>
                        <th scope="col">Kelas</th>
                        <th scope="col" class="w-2/5">Sebaran siswa</th>
                        <th scope="col" class="text-right">Laki-laki</th>
                        <th scope="col" class="text-right">Perempuan</th>
                        <th scope="col" class="text-right">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($pkbmDashboard['classDistribution'] as $class)
                        @php
                            $classTotal = (int) $class->jumlah_siswa;
                            $maleCount = (int) $class->jumlah_laki_laki;
                            $femaleCount = (int) $class->jumlah_perempuan;
                            $unknownGenderCount = max(0, $classTotal - $maleCount - $femaleCount);
                            $maleWidth = $maleCount / $maxClassCount * 100;
                            $femaleWidth = $femaleCount / $maxClassCount * 100;
                            $unknownGenderWidth = $unknownGenderCount / $maxClassCount * 100;
                        @endphp
                        <tr>
                            <th scope="row" class="font-semibold text-slate-800">{{ $class->nama_kelas ?: 'Kelas tanpa nama' }}</th>
                            <td>
                                <div class="flex items-center gap-3">
                                    <div class="progress h-2 flex-1" role="img" aria-label="{{ $class->nama_kelas }}: {{ $classTotal }} siswa, {{ $class->jumlah_laki_laki }} laki-laki, {{ $class->jumlah_perempuan }} perempuan">
                                        <div class="progress-bar bg-primary" style="width: {{ $maleWidth }}%"></div>
                                        <div class="progress-bar bg-danger" style="width: {{ $femaleWidth }}%"></div>
                                        <div class="progress-bar bg-secondary" style="width: {{ $unknownGenderWidth }}%"></div>
                                    </div>
                                    <span class="w-10 text-right text-xs text-slate-500">{{ $maxClassCount > 0 ? (int) round($classTotal / $maxClassCount * 100) : 0 }}%</span>
                                </div>
                            </td>
                            <td class="text-right text-blue-700">{{ number_format($class->jumlah_laki_laki, 0, ',', '.') }}</td>
                            <td class="text-right text-rose-600">{{ number_format($class->jumlah_perempuan, 0, ',', '.') }}</td>
                            <td class="text-right font-bold text-slate-900">{{ number_format($classTotal, 0, ',', '.') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-8 text-center text-sm text-slate-500">
                                @if ($pkbmDashboard['period'])
                                    Belum ada kelas terdaftar.
                                @else
                                    Atur periode akademik aktif untuk melihat data siswa per kelas.
                                @endif
                            </td>
                        </tr>
                    @endforelse
                </tbody>
                @if ($pkbmDashboard['classDistribution']->isNotEmpty())
                    <tfoot class="border-t border-slate-200 bg-slate-50 text-xs font-bold">
                        <tr>
                            <th scope="row">Total</th>
                            <td></td>
                            <td class="text-right text-blue-700">{{ number_format($pkbmDashboard['classDistribution']->sum('jumlah_laki_laki'), 0, ',', '.') }}</td>
                            <td class="text-right text-rose-600">{{ number_format($pkbmDashboard['classDistribution']->sum('jumlah_perempuan'), 0, ',', '.') }}</td>
                            <td class="text-right text-slate-900">{{ number_format($pkbmDashboard['classDistribution']->sum('jumlah_siswa'), 0, ',', '.') }}</td>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </div>
    </section>

    <section class="grid items-stretch gap-5 lg:grid-cols-[minmax(0,1.55fr)_minmax(18rem,0.85fr)]">
        <article class="sp-card h-full overflow-hidden">
            <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h2 class="sp-section-title">Rekapitulasi karakteristik peserta didik</h2>
                    <p id="demographics-class-name" class="mt-1 text-xs text-slate-500">
                        {{ $pkbmDashboard['filteredClass']->nama_kelas ?? 'Semua kelas' }} · periode aktif
                    </p>
                </div>
                <div class="flex items-center gap-2">
                    <label for="demographics-class-filter" class="text-xs font-medium text-slate-600">Kelas</label>
                    <select
                        id="demographics-class-filter"
                        data-dashboard-url="{{ route('dashboard') }}"
                        class="sp-form-control max-w-48 px-3 py-2 text-xs">
                        <option value="">Semua kelas</option>
                        @foreach ($pkbmDashboard['classOptions'] as $classOption)
                            <option value="{{ $classOption->id }}" @selected((int) $pkbmDashboard['filteredClass']?->id === (int) $classOption->id)>
                                {{ $classOption->nama_kelas ?: 'Kelas tanpa nama' }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div id="demographics-content" class="grid gap-3 p-4 sm:grid-cols-3">
                <div class="pkbm-demographics-card rounded-lg border border-slate-100 bg-slate-50 p-4">
                    <h3 class="pkbm-demographics__title">Berdasarkan gender</h3>
                    <dl class="mt-3 space-y-2 text-xs">
                        <div class="flex justify-between gap-2"><dt>Laki-laki</dt><dd id="demographics-male" class="font-bold text-blue-700">{{ number_format($demographics['male'], 0, ',', '.') }}</dd></div>
                        <div class="flex justify-between gap-2"><dt>Perempuan</dt><dd id="demographics-female" class="font-bold text-rose-600">{{ number_format($demographics['female'], 0, ',', '.') }}</dd></div>
                        <div class="flex justify-between gap-2 border-t border-slate-200 pt-2 font-bold"><dt>Total</dt><dd id="demographics-total">{{ number_format($demographics['total'], 0, ',', '.') }}</dd></div>
                    </dl>
                    <div id="demographics-gender-chart" class="pkbm-demographics__gender-chart" role="img" aria-label="Komposisi gender: {{ $demographics['male'] }} laki-laki, {{ $demographics['female'] }} perempuan">
                        <span id="demographics-male-bar" class="pkbm-demographics__gender-segment pkbm-demographics__gender-segment--male" style="width: {{ $malePercent }}%"></span>
                        <span id="demographics-female-bar" class="pkbm-demographics__gender-segment pkbm-demographics__gender-segment--female" style="width: {{ $femalePercent }}%"></span>
                        <span id="demographics-unknown-gender-bar" class="pkbm-demographics__gender-segment pkbm-demographics__gender-segment--unknown" style="width: {{ $unknownGenderPercent }}%"></span>
                    </div>
                </div>
                <div class="pkbm-demographics-card rounded-lg border border-slate-100 bg-slate-50 p-4">
                    <h3 class="pkbm-demographics__title">Usia sekolah (7–18 tahun)</h3>
                    <div class="mt-3 flex items-baseline justify-between gap-2">
                        <p id="demographics-school-age" class="text-2xl font-extrabold text-slate-900">{{ number_format($demographics['schoolAge'], 0, ',', '.') }}</p>
                        <span id="demographics-school-age-percent" class="pkbm-demographics__gold-label">{{ $schoolAgePercent }}%</span>
                    </div>
                    <p class="text-xs text-slate-500">Peserta didik</p>
                    <div class="pkbm-demographics__gold-track mt-3" role="progressbar" aria-label="Persentase usia sekolah" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ $schoolAgePercent }}">
                        <span id="demographics-school-age-bar" class="pkbm-demographics__gold-bar" style="width: {{ $schoolAgePercent }}%"></span>
                    </div>
                </div>
                <div class="pkbm-demographics-card rounded-lg border border-slate-100 bg-slate-50 p-4">
                    <h3 class="pkbm-demographics__title">Rentang usia lainnya</h3>
                    <dl class="mt-3 space-y-2 text-xs">
                        <div class="flex justify-between gap-2"><dt>Usia ≤ 23 tahun</dt><dd id="demographics-up-to-23" class="font-bold">{{ number_format($demographics['upTo23'], 0, ',', '.') }}</dd></div>
                        <div class="flex justify-between gap-2"><dt>Usia &gt; 23 tahun</dt><dd id="demographics-over-23" class="font-bold">{{ number_format($demographics['over23'], 0, ',', '.') }}</dd></div>
                    </dl>
                    <p class="mt-4 text-[10px] leading-4 text-slate-500">Data berdasarkan tanggal lahir peserta didik yang terdaftar.</p>
                </div>
            </div>
            <p id="demographics-error" class="hidden px-4 pb-4 text-xs text-rose-700" role="alert"></p>
        </article>

        <article class="sp-card h-full 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">Kunjungan website</h2>
                    <p class="mt-1 text-xs text-slate-500">Statistik situs lembaga</p>
                </div>
            </div>
            <div class="space-y-3 p-4 sm:p-5">
                <div class="flex items-center justify-between gap-3 rounded-lg border border-slate-100 bg-slate-50 p-4">
                    <div>
                    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Total kunjungan</p>
                    <p class="mt-1 text-2xl font-extrabold text-slate-900">{{ number_format($pkbmDashboard['organization']->total_pengunjung ?? 0, 0, ',', '.') }}</p>
                    <p class="mt-1 text-xs text-slate-500">Sejak website aktif</p>
                    </div>
                    <span class="settings-panel-heading__icon"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
                </div>
                <div class="flex items-center justify-between gap-3 rounded-lg border border-slate-100 bg-slate-50 p-4">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Pengunjung hari ini</p>
                        <p class="mt-1 text-2xl font-extrabold text-slate-900">{{ number_format($pkbmDashboard['organization']->kunjungan_hari_ini ?? 0, 0, ',', '.') }}</p>
                        <p class="mt-1 text-xs text-slate-500">{{ now()->locale('id')->translatedFormat('d M Y') }}</p>
                    </div>
                    <span class="settings-panel-heading__icon"><i class="bi bi-calendar-event" aria-hidden="true"></i></span>
                </div>
            </div>
        </article>
    </section>
</div>

@if ($pkbmDashboard['announcement'])
    <dialog id="announcement-modal" data-dashboard-modal aria-labelledby="announcement-modal-title" class="pkbm-students__dialog">
        <div class="pkbm-students__dialog-header flex items-start justify-between gap-3">
            <h2 id="announcement-modal-title" class="pkbm-students__dialog-title">
                <span class="pkbm-students__dialog-icon"><i class="bi bi-megaphone" aria-hidden="true"></i></span>{{ $pkbmDashboard['announcement']->judul }}
            </h2>
            <form method="dialog">
                <button class="pkbm-students__dialog-close" aria-label="Tutup pengumuman"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
            </form>
        </div>
        <div class="px-5 pb-5">
            <div class="whitespace-pre-line rounded-lg border border-slate-100 bg-slate-50 p-4 text-sm leading-6 text-slate-700">{{ $pkbmDashboard['announcement']->isi }}</div>
            @if ($pkbmDashboard['announcement']->lampiran)
                <a href="{{ route('pkbm.announcement.attachment', $pkbmDashboard['announcement']->lampiran) }}" class="sp-btn-secondary mt-4 w-full">
                    <i class="bi bi-paperclip" aria-hidden="true"></i>Lihat lampiran dokumen
                </a>
            @endif
            <div class="mt-4 flex items-center justify-between gap-3">
                <time class="text-xs text-slate-500" datetime="{{ $pkbmDashboard['announcement']->tanggal }}">
                    <i class="bi bi-calendar3 mr-1" aria-hidden="true"></i>{{ \Illuminate\Support\Carbon::parse($pkbmDashboard['announcement']->tanggal)->locale('id')->translatedFormat('d M Y') }}
                </time>
                <a href="{{ route('pkbm.pengumuman.index') }}" class="text-xs font-semibold text-blue-700 hover:text-blue-900">Lihat semua <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
            </div>
            <form method="dialog" class="mt-3"><button class="pkbm-dialog__dismiss w-full">Tutup</button></form>
        </div>
    </dialog>
@endif

@if ($pkbmDashboard['pendingJobs']->isNotEmpty())
    <dialog id="jobs-modal" data-dashboard-modal aria-labelledby="jobs-modal-title" class="pkbm-students__dialog">
        <div class="pkbm-students__dialog-header flex items-start justify-between gap-3">
            <div>
                <h2 id="jobs-modal-title" class="pkbm-students__dialog-title">
                    <span class="pkbm-students__dialog-icon"><i class="bi bi-clipboard-check" aria-hidden="true"></i></span>Daftar pekerjaan PKBM
                </h2>
                <p class="mt-1 text-xs text-slate-500">{{ $pkbmDashboard['pendingJobs']->count() }} pekerjaan yang masih memerlukan perhatian Anda.</p>
            </div>
            <form method="dialog">
                <button class="pkbm-students__dialog-close" aria-label="Tutup daftar pekerjaan"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
            </form>
        </div>
        <div class="space-y-3 px-5 pb-5">
            @foreach ($pkbmDashboard['pendingJobs'] as $job)
                @php
                    $deadline = $job->deadline && $job->deadline !== '0000-00-00'
                        ? \Illuminate\Support\Carbon::parse($job->deadline)->startOfDay()
                        : null;
                    $daysToDeadline = $deadline ? (int) \Illuminate\Support\Carbon::today()->diffInDays($deadline, false) : null;
                    $statusTone = match ($job->status) {
                        'Sedang Dikerjakan' => 'bg-blue-50 text-blue-700',
                        'Belum Dimulai' => 'bg-slate-100 text-slate-700',
                        default => 'bg-amber-50 text-amber-700',
                    };
                    $priorityTone = $job->prioritas === 'Tinggi'
                        ? 'bg-rose-50 text-rose-700'
                        : ($job->prioritas === 'Sedang' ? 'bg-amber-50 text-amber-700' : 'bg-slate-100 text-slate-600');
                @endphp
                <article class="rounded-lg border border-slate-100 bg-slate-50 p-4">
                    <div class="flex flex-wrap items-start justify-between gap-3">
                        <div class="min-w-0 flex-1">
                            <h3 class="pkbm-students__job-title">{{ $job->nama_pekerjaan }}</h3>
                            @if ($job->deskripsi)
                                <p class="mt-1 whitespace-pre-line text-xs leading-5 text-slate-600">{{ $job->deskripsi }}</p>
                            @endif
                        </div>
                        <span class="rounded-full px-2.5 py-1 text-xs font-semibold {{ $statusTone }}">{{ $job->status ?: 'Status belum ditentukan' }}</span>
                    </div>
                    <div class="mt-3 flex flex-wrap gap-x-4 gap-y-2 text-xs text-slate-500">
                        @if ($deadline)
                            <span><i class="bi bi-calendar3 mr-1" aria-hidden="true"></i>Batas: {{ $deadline->locale('id')->translatedFormat('d M Y') }}</span>
                            @if ($daysToDeadline < 0)
                                <span class="font-semibold text-rose-700">Terlewat {{ abs($daysToDeadline) }} hari</span>
                            @elseif ($daysToDeadline === 0)
                                <span class="font-semibold text-rose-700">Hari ini</span>
                            @elseif ($daysToDeadline === 1)
                                <span class="font-semibold text-amber-700">Besok</span>
                            @else
                                <span>{{ $daysToDeadline }} hari lagi</span>
                            @endif
                        @endif
                        @if ($job->penanggung_jawab)
                            <span><i class="bi bi-person mr-1" aria-hidden="true"></i>PJB: {{ $job->penanggung_jawab }}</span>
                        @endif
                        @if ($job->prioritas)
                            <span class="rounded-full px-2 py-0.5 font-semibold {{ $priorityTone }}">Prioritas {{ $job->prioritas }}</span>
                        @endif
                    </div>
                </article>
            @endforeach
            <div class="flex justify-end pt-1">
                <form method="dialog"><button class="pkbm-dialog__dismiss">Tutup</button></form>
            </div>
        </div>
    </dialog>
@endif

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script>
        document.querySelectorAll('[data-schedule-tab]').forEach((tab) => {
            tab.addEventListener('click', () => {
                document.querySelectorAll('[data-schedule-tab]').forEach((button) => {
                    const selected = button === tab;
                    button.setAttribute('aria-selected', String(selected));
                    button.classList.toggle('border-blue-600', selected);
                    button.classList.toggle('text-blue-700', selected);
                    button.classList.toggle('border-transparent', !selected);
                    button.classList.toggle('text-slate-500', !selected);
                });
                document.querySelectorAll('[data-schedule-panel]').forEach((panel) => {
                    panel.hidden = panel.dataset.schedulePanel !== tab.dataset.scheduleTab;
                });
            });
        });

        const classFilter = document.querySelector('#demographics-class-filter');
        if (classFilter) {
            classFilter.addEventListener('change', async () => {
                const content = document.querySelector('#demographics-content');
                const error = document.querySelector('#demographics-error');
                const url = new URL(classFilter.dataset.dashboardUrl, window.location.origin);
                const pageUrl = new URL(window.location.href);
                const selectedClass = classFilter.value;

                if (selectedClass) {
                    url.searchParams.set('filter_rekap_kelas', selectedClass);
                    pageUrl.searchParams.set('filter_rekap_kelas', selectedClass);
                } else {
                    pageUrl.searchParams.delete('filter_rekap_kelas');
                }

                if (pageUrl.searchParams.has('filter_kelas_jadwal')) {
                    url.searchParams.set('filter_kelas_jadwal', pageUrl.searchParams.get('filter_kelas_jadwal'));
                }

                content.classList.add('opacity-50');
                error.classList.add('hidden');

                try {
                    const response = await fetch(url, { headers: { Accept: 'application/json' } });
                    if (!response.ok) {
                        throw new Error(`Request gagal dengan status ${response.status}`);
                    }

                    const data = await response.json();
                    const formatNumber = new Intl.NumberFormat('id-ID');
                    document.querySelector('#demographics-male').textContent = formatNumber.format(data.male);
                    document.querySelector('#demographics-female').textContent = formatNumber.format(data.female);
                    document.querySelector('#demographics-total').textContent = formatNumber.format(data.total);
                    document.querySelector('#demographics-school-age').textContent = formatNumber.format(data.schoolAge);
                    document.querySelector('#demographics-up-to-23').textContent = formatNumber.format(data.upTo23);
                    document.querySelector('#demographics-over-23').textContent = formatNumber.format(data.over23);

                    const percent = data.total > 0 ? Math.round((data.schoolAge / data.total) * 100) : 0;
                    document.querySelector('#demographics-school-age-bar').style.width = `${percent}%`;
                    document.querySelector('#demographics-school-age-percent').textContent = `${percent}%`;
                    document.querySelector('[aria-label="Persentase usia sekolah"]').setAttribute('aria-valuenow', String(percent));
                    const malePercent = data.total > 0 ? (data.male / data.total) * 100 : 0;
                    const femalePercent = data.total > 0 ? (data.female / data.total) * 100 : 0;
                    document.querySelector('#demographics-male-bar').style.width = `${malePercent}%`;
                    document.querySelector('#demographics-female-bar').style.width = `${femalePercent}%`;
                    document.querySelector('#demographics-unknown-gender-bar').style.width = `${Math.max(0, 100 - malePercent - femalePercent)}%`;
                    document.querySelector('#demographics-gender-chart').setAttribute(
                        'aria-label',
                        `Komposisi gender: ${data.male} laki-laki, ${data.female} perempuan`,
                    );
                    document.querySelector('#demographics-class-name').textContent = `${classFilter.selectedOptions[0].textContent.trim()} · periode aktif`;
                    window.history.replaceState(null, '', pageUrl);
                } catch (requestError) {
                    error.textContent = 'Rekap tidak dapat dimuat. Silakan coba lagi.';
                    error.classList.remove('hidden');
                    console.error('Gagal memuat rekap karakteristik peserta didik:', requestError);
                } finally {
                    content.classList.remove('opacity-50');
                }
            });
        }

        const dashboardDialogs = [...document.querySelectorAll('[data-dashboard-modal]')].sort((first, second) => {
            if (first.id === 'jobs-modal') {
                return -1;
            }
            if (second.id === 'jobs-modal') {
                return 1;
            }
            return 0;
        });
        const jobsDialog = document.querySelector('#jobs-modal');
        const jobsDialogTrigger = document.querySelector('[data-open-jobs-modal]');
        if (jobsDialog && jobsDialogTrigger) {
            jobsDialogTrigger.addEventListener('click', () => {
                if (!jobsDialog.open) {
                    jobsDialog.showModal();
                }
            });
        }

        const showNextDashboardDialog = () => {
            const dialog = dashboardDialogs.shift();
            if (!dialog) {
                return;
            }

            dialog.addEventListener('close', showNextDashboardDialog, { once: true });
            dialog.showModal();
        };
        showNextDashboardDialog();
    </script>

    <script>
        (function () {
            if (!window.Chart) return;
            const source = document.getElementById('dashboard-chart-data');
            if (!source) return;
            const data = JSON.parse(source.textContent);

            const brand = '#2563eb';
            const rose = '#f43f5e';
            const slate = '#cbd5e1';
            const gridColor = 'rgba(148, 163, 184, .18)';
            const fmt = (value) => Number(value).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;

            const gender = data.gender || { male: 0, female: 0, unknown: 0 };
            new Chart(document.getElementById('chartGender'), {
                type: 'doughnut',
                data: {
                    labels: ['Laki-laki', 'Perempuan', 'Belum diisi'],
                    datasets: [{
                        data: [gender.male, gender.female, gender.unknown],
                        backgroundColor: [brand, rose, slate],
                        borderWidth: 0,
                        hoverOffset: 8,
                    }],
                },
                options: {
                    cutout: '65%',
                    plugins: {
                        legend: { position: 'bottom' },
                        tooltip: { callbacks: { label: (c) => ` ${c.label}: ${fmt(c.raw)} siswa` } },
                    },
                },
            });

            const classes = data.classes || [];
            new Chart(document.getElementById('chartClass'), {
                type: 'bar',
                data: {
                    labels: classes.map((c) => c.label),
                    datasets: [
                        { label: 'Laki-laki', data: classes.map((c) => c.male), backgroundColor: brand, stack: 'total', borderRadius: 4, maxBarThickness: 48 },
                        { label: 'Perempuan', data: classes.map((c) => c.female), backgroundColor: rose, stack: 'total', borderRadius: 4, maxBarThickness: 48 },
                        { label: 'Belum diisi', data: classes.map((c) => c.unknown), backgroundColor: slate, stack: 'total', borderRadius: 4, maxBarThickness: 48 },
                    ],
                },
                options: {
                    plugins: { legend: { position: 'bottom' } },
                    scales: {
                        x: { stacked: true, grid: { display: false } },
                        y: { stacked: true, beginAtZero: true, grid: { color: gridColor }, ticks: { precision: 0 } },
                    },
                },
            });

            const trend = data.trend || [];
            new Chart(document.getElementById('chartTrend'), {
                type: 'line',
                data: {
                    labels: trend.map((t) => t.label),
                    datasets: [{
                        label: 'Peserta didik aktif',
                        data: trend.map((t) => t.value),
                        borderColor: brand,
                        backgroundColor: 'rgba(37, 99, 235, .12)',
                        fill: true,
                        tension: 0.35,
                        pointRadius: 4,
                        pointBackgroundColor: brand,
                    }],
                },
                options: {
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { grid: { display: false } },
                        y: { beginAtZero: true, grid: { color: gridColor }, ticks: { precision: 0 } },
                    },
                },
            });
        })();
    </script>
@endpush