@extends('layouts.app')

@section('content')
<style>
/* ── Filter Periode ── */
.period-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.period-btn {
    padding:6px 14px; border-radius:20px; border:1px solid #e2e8f0;
    background:#fff; cursor:pointer; font-size:0.85rem; transition:all .2s;
}
.period-btn:hover, .period-btn.active {
    background:var(--primary-color); color:#fff; border-color:var(--primary-color);
}
.custom-range { display:none; align-items:center; gap:8px; }
.custom-range.show { display:flex; }
.custom-range input[type=date] {
    padding:5px 10px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.85rem;
}

/* ── KPI Strip ── */
.kpi-strip {
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:12px;
    margin-bottom:18px;
}
.kpi-card {
    background:#fff; border-radius:10px; padding:14px 16px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    border-top:3px solid transparent;
}
.kpi-card.kpi-hadir  { border-color:#10B981; }
.kpi-card.kpi-alpa   { border-color:#EF4444; }
.kpi-card.kpi-avg    { border-color:#3B82F6; }
.kpi-card.kpi-warning{ border-color:#F59E0B; }
.kpi-card.kpi-info   { border-color:#6366F1; }
.kpi-label { font-size:0.78rem; color:#6B7280; margin-bottom:4px; }
.kpi-value { font-size:1.45rem; font-weight:700; color:var(--primary-dark); line-height:1.1; }
.kpi-context { font-size:0.75rem; color:#9CA3AF; margin-top:4px; }
.kpi-trend  { font-size:0.78rem; margin-top:5px; display:flex; align-items:center; gap:4px; }
.kpi-trend.up   { color:#10B981; }
.kpi-trend.down { color:#EF4444; }
.kpi-trend.neutral { color:#6B7280; }

/* ── Dua kolom ── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
@media(max-width:900px){
    .kpi-strip  { grid-template-columns:repeat(2,1fr); }
    .two-col    { grid-template-columns:1fr; }
    .three-col  { grid-template-columns:1fr; }
}

/* ── Cards ── */
.panel {
    background:#fff; border-radius:10px; padding:16px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.panel-title {
    font-size:.93rem; font-weight:600; margin:0 0 12px;
    display:flex; align-items:center; gap:8px;
}
.panel-title a { font-size:.78rem; margin-left:auto; color:var(--primary-color); font-weight:400; }

/* ── List item kegiatan ── */
.kg-item {
    display:flex; align-items:center; gap:10px;
    padding:8px 0; border-bottom:1px solid #f1f5f9; font-size:.84rem;
}
.kg-item:last-child { border-bottom:none; }
.kg-name { flex:1; font-weight:500; }
.kg-context { font-size:.76rem; color:#6B7280; }
.kg-persen {
    font-weight:700; font-size:.9rem; min-width:52px; text-align:right;
}

/* ── Anomali ── */
.alert-row {
    display:flex; align-items:flex-start; gap:10px;
    padding:10px 12px; border-radius:8px; margin-bottom:6px;
    font-size:.85rem; border-left:4px solid transparent;
}
.alert-row:last-child { margin-bottom:0; }
.alert-row.a-danger  { background:#FEF2F2; border-color:#EF4444; color:#991B1B; }
.alert-row.a-warning { background:#FFFBEB; border-color:#F59E0B; color:#92400E; }
.alert-row.a-info    { background:#EFF6FF; border-color:#3B82F6; color:#1E40AF; }
.alert-row.a-success { background:#ECFDF5; border-color:#10B981; color:#065F46; }
.alert-text { flex:1; }
.alert-title { font-weight:600; font-size:.86rem; }
.alert-desc  { font-size:.8rem; opacity:.85; margin-top:2px; }

/* ── Kelas chart legend ── */
.kelas-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:.78rem; }
.kelas-legend-item { display:flex; align-items:center; gap:5px; color:#6B7280; }
.kelas-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ── Santri perlu perhatian ── */
.spp-item {
    display:flex; align-items:center; gap:10px;
    padding:7px 0; border-bottom:1px solid #f1f5f9; font-size:.84rem;
}
.spp-item:last-child { border-bottom:none; }
.spp-rank { width:22px; text-align:center; color:#9CA3AF; font-size:.78rem; }
.spp-name { flex:1; font-weight:500; }
.spp-pct  { font-weight:700; color:#EF4444; }
.spp-ctx  { font-size:.75rem; color:#9CA3AF; }

/* ── Trend chart ── */
.chart-wrap { background:#fff; border-radius:10px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.06); margin-bottom:16px; }
.chart-wrap h4 { margin:0 0 10px; font-size:.93rem; color:var(--primary-dark); }
</style>

{{-- Header --}}
<div class="page-header">
    <h2><i class="fas fa-chart-line"></i> Laporan Kegiatan</h2>

</div>

{{-- Filter --}}
<div class="content-box" style="margin-bottom:16px;">
    <form method="GET" id="periodForm" action="{{ route('admin.laporan-kegiatan.index') }}">
        <div class="period-bar">
            <span style="font-size:.85rem;color:var(--text-light);">
                <i class="fas fa-calendar-alt"></i> Periode:
            </span>
            @foreach(['hari_ini'=>'Hari Ini','minggu_ini'=>'Minggu Ini','bulan_ini'=>'Bulan Ini','semester_ini'=>'Semester','custom'=>'Custom'] as $key=>$label)
                <button type="button"
                        class="period-btn {{ $periode===$key?'active':'' }}"
                        onclick="setPeriode('{{ $key }}')">{{ $label }}</button>
            @endforeach
            <div class="custom-range {{ $periode==='custom'?'show':'' }}" id="customRange">
                <input type="date" name="tanggal_dari"
                       value="{{ request('tanggal_dari', $startDate->format('Y-m-d')) }}">
                <span>–</span>
                <input type="date" name="tanggal_sampai"
                       value="{{ request('tanggal_sampai', $endDate->format('Y-m-d')) }}">
            </div>
            <input type="hidden" name="periode" id="periodeInput" value="{{ $periode }}">
            <button type="submit" class="btn btn-primary btn-sm">
                <i class="fas fa-sync-alt"></i> Terapkan
            </button>
        </div>
    </form>
    <p style="margin:8px 0 0;font-size:.82rem;color:var(--text-light);">
        <i class="fas fa-info-circle"></i> Data: <strong>{{ $periodeLabel }}</strong>
    </p>
</div>

{{-- ══════════════════════════════════════════════════
     KPI STRIP — semua angka pakai konteks X dari Y
═══════════════════════════════════════════════════ --}}
<div class="kpi-strip">

    {{-- 1. Rata-rata Kehadiran --}}
    <div class="kpi-card kpi-avg">
        <div class="kpi-label">Rata-rata Kehadiran</div>
        <div class="kpi-value">{{ $kpi['avg_kehadiran'] }}%</div>
        <div class="kpi-context">
            {{ number_format($kpi['total_hadir']) }} hadir dari
            {{ number_format($kpi['total_absensi']) }} tercatat
        </div>
        @php $diffAvg = $kpiComparison['avg_kehadiran']; @endphp
        <div class="kpi-trend {{ $diffAvg > 0 ? 'up' : ($diffAvg < 0 ? 'down' : 'neutral') }}">
            <i class="fas fa-arrow-{{ $diffAvg >= 0 ? 'up' : 'down' }}"></i>
            {{ abs($diffAvg) }}% vs periode sebelumnya
        </div>
    </div>

    {{-- 2. Hadir Efektif (incl. Terlambat) --}}
    <div class="kpi-card kpi-hadir">
        <div class="kpi-label">Hadir Efektif</div>
        <div class="kpi-value">{{ number_format($kpi['total_hadir']) }}</div>
        <div class="kpi-context">
            termasuk {{ $kpi['total_terlambat'] }} terlambat
            — dari {{ number_format($kpi['total_absensi']) }} sesi tercatat
        </div>
    </div>

    {{-- 3. Alpa --}}
    <div class="kpi-card kpi-alpa">
        <div class="kpi-label">Total Alpa</div>
        <div class="kpi-value">{{ number_format($kpi['total_alpa']) }}</div>
        <div class="kpi-context">
            @php $alpaRate = $kpi['total_absensi'] > 0 ? round($kpi['total_alpa']/$kpi['total_absensi']*100,1) : 0; @endphp
            {{ $alpaRate }}% dari {{ number_format($kpi['total_absensi']) }} tercatat
        </div>
    </div>

    {{-- 4. Santri Perlu Perhatian --}}
    <div class="kpi-card kpi-warning">
        <div class="kpi-label">Santri Perlu Perhatian</div>
        <div class="kpi-value">{{ $kpi['santri_perlu_perhatian'] }}</div>
        <div class="kpi-context">
            dari {{ $kpi['total_santri_aktif'] }} santri aktif
            (kehadiran &lt;70%)
        </div>
        @php $diffSpp = $kpiComparison['santri_perlu_perhatian']; @endphp
        <div class="kpi-trend {{ $diffSpp <= 0 ? 'up' : 'down' }}">
            <i class="fas fa-arrow-{{ $diffSpp <= 0 ? 'down' : 'up' }}"></i>
            {{ abs($diffSpp) }} vs periode sebelumnya
        </div>
    </div>

    {{-- 5. Kegiatan Terbaik --}}
    <div class="kpi-card kpi-info">
        <div class="kpi-label">Kehadiran Terbaik</div>
        <div class="kpi-value" style="font-size:1rem;">
            {{ $kpi['kegiatan_terbaik']['nama'] }}
        </div>
        <div class="kpi-context">
            {{ $kpi['kegiatan_terbaik']['persen'] }}%
            ({{ $kpi['kegiatan_terbaik']['hadir'] }} hadir dari {{ $kpi['kegiatan_terbaik']['total'] }} tercatat)
        </div>
    </div>
</div>

{{-- ══════════════════════════════════════════════════
     DISTRIBUSI SANTRI — Donut Chart kondisi pesantren
═══════════════════════════════════════════════════ --}}
@php
    $buckets     = $distribusiSantri['buckets'];
    $totalDengan = $distribusiSantri['total'];
@endphp

<div class="chart-wrap" style="margin-bottom:16px;">
    <div style="display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;">

        {{-- Donut --}}
        <div style="position:relative;width:200px;height:200px;flex-shrink:0;">
            <canvas id="distribusiChart"></canvas>
            {{-- Label tengah --}}
            <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;">
                <div style="font-size:1.6rem;font-weight:700;color:var(--primary-dark);line-height:1;">
                    {{ $totalDengan }}
                </div>
                <div style="font-size:.72rem;color:#6B7280;margin-top:2px;">santri<br>tercatat</div>
            </div>
        </div>

        {{-- Legenda kanan --}}
        <div style="flex:1;min-width:220px;">
            <h4 style="margin:0 0 6px;font-size:.93rem;color:var(--primary-dark);">
                <i class="fas fa-users"></i> Kondisi Kehadiran Santri
            </h4>


            @foreach($buckets as $b)
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
                    <div style="width:12px;height:12px;border-radius:50%;background:{{ $b['color'] }};flex-shrink:0;"></div>
                    <div style="flex:1;min-width:0;">
                        <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px;">
                            <span style="font-size:.83rem;font-weight:600;color:var(--primary-dark);">
                                {{ $b['label'] }}
                                @if($b['label']==='Sangat Baik')   <span style="font-weight:400;color:#9CA3AF;font-size:.75rem;">(≥95%)</span>
                                @elseif($b['label']==='Baik')      <span style="font-weight:400;color:#9CA3AF;font-size:.75rem;">(85–94%)</span>
                                @elseif($b['label']==='Cukup')     <span style="font-weight:400;color:#9CA3AF;font-size:.75rem;">(70–84%)</span>
                                @else                              <span style="font-weight:400;color:#9CA3AF;font-size:.75rem;">(&lt;70%)</span>
                                @endif
                            </span>
                            <span style="font-size:.83rem;font-weight:700;color:{{ $b['color'] }};">
                                {{ $b['count'] }} santri
                                <span style="font-weight:400;color:#9CA3AF;">({{ $b['persen'] }}%)</span>
                            </span>
                        </div>
                        <div style="background:#f1f5f9;border-radius:4px;height:6px;overflow:hidden;">
                            <div style="width:{{ $b['persen'] }}%;height:100%;background:{{ $b['color'] }};border-radius:4px;"></div>
                        </div>
                    </div>
                </div>
            @endforeach

            @php $tanpaData = $kpi['total_santri_aktif'] - $totalDengan; @endphp
            @if($tanpaData > 0)
                <p style="margin:6px 0 0;font-size:.76rem;color:#9CA3AF;">
                    <i class="fas fa-info-circle"></i>
                    {{ $tanpaData }} santri aktif belum punya data absensi di periode ini.
                </p>
            @endif
        </div>
    </div>
</div>

{{-- ══════════════════════════════════════════════════
     ANOMALI / ALERT
═══════════════════════════════════════════════════ --}}
<div class="panel" style="margin-bottom:16px;">
    <div class="panel-title" style="color:#EF4444;">
        <i class="fas fa-bell"></i> Anomali & Perlu Tindak Lanjut
    </div>
    @if(!empty($patterns) && count($patterns) > 0)
        @foreach($patterns as $p)
            <div class="alert-row a-{{ $p['type'] }}">
                @if($p['type']==='danger')
                    <i class="fas fa-exclamation-circle" style="margin-top:2px;"></i>
                @elseif($p['type']==='warning')
                    <i class="fas fa-exclamation-triangle" style="margin-top:2px;"></i>
                @else
                    <i class="fas fa-info-circle" style="margin-top:2px;"></i>
                @endif
                <div class="alert-text">
                    <div class="alert-title">{{ $p['title'] }}</div>
                    <div class="alert-desc">{{ $p['description'] }}</div>
                </div>
                @if(!empty($p['action_url']))
                    <a href="{{ $p['action_url'] }}"
                       class="btn btn-sm btn-{{ $p['type']==='danger'?'danger':($p['type']==='warning'?'warning':'info') }}"
                       style="white-space:nowrap;">
                        {{ $p['action_text'] ?? 'Lihat' }}
                    </a>
                @endif
            </div>
        @endforeach
    @else
        <div class="alert-row a-success">
            <i class="fas fa-check-circle"></i>
            <div class="alert-text">
                <div class="alert-title">Tidak ada anomali</div>
                <div class="alert-desc">Pola kehadiran dalam kondisi normal.</div>
            </div>
        </div>
    @endif
</div>

{{-- ══════════════════════════════════════════════════
     TREND CHART
═══════════════════════════════════════════════════ --}}
@php
    $trendLabels = $trendData['labels'] ?? [];
    $trendDs     = $trendData['datasets'] ?? [];
    $avgLine     = [];
    foreach ($trendLabels as $i => $_) {
        $sum=0; $cnt=0;
        foreach ($trendDs as $ds) {
            if (isset($ds['data'][$i]) && $ds['data'][$i] !== null) { $sum+=$ds['data'][$i]; $cnt++; }
        }
        $avgLine[] = $cnt > 0 ? round($sum/$cnt,1) : null;
    }
@endphp

<div class="chart-wrap">
    <h4><i class="fas fa-chart-line"></i> Trend Kehadiran Rata-rata</h4>
    <p style="margin:0 0 10px;font-size:.8rem;color:#6B7280;">
        Angka = % hadir efektif (Terlambat dihitung Hadir). Hover untuk detail.
    </p>
    <div style="position:relative;height:200px;">
        <canvas id="trendChart"></canvas>
    </div>
</div>

{{-- ══════════════════════════════════════════════════
     TOP & BOTTOM KEGIATAN  +  SANTRI PERLU PERHATIAN
═══════════════════════════════════════════════════ --}}
<div class="three-col">

    {{-- Top 5 --}}
    <div class="panel">
        <div class="panel-title" style="color:#10B981;">
            <i class="fas fa-trophy"></i> Kehadiran Terbaik
        </div>
        @forelse($topKegiatan as $i => $kg)
            <div class="kg-item">
                {{-- Nomor urut --}}
                <span style="color:#9CA3AF;font-size:.75rem;width:16px;flex-shrink:0;text-align:center;">
                    {{ $i + 1 }}
                </span>

                {{-- Nama + konteks + progress bar --}}
                <div style="flex:1;min-width:0;">
                    <div style="display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:2px;">
                        <div class="kg-name"
                             style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.84rem;font-weight:600;">
                            {{ $kg['nama_kegiatan'] }}
                        </div>
                        <span style="font-weight:700;color:#10B981;font-size:.88rem;flex-shrink:0;">
                            {{ $kg['persen'] }}%
                        </span>
                    </div>

                    {{-- Progress bar --}}
                    <div style="background:#f1f5f9;border-radius:4px;height:6px;overflow:hidden;margin-bottom:4px;">
                        <div style="width:{{ $kg['persen'] }}%;height:100%;background:#10B981;border-radius:4px;transition:width .5s;"></div>
                    </div>

                    {{-- Meta: kategori · hari · X dari Y --}}
                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span class="kg-context">
                            {{ $kg['nama_kategori'] ?? '-' }} · {{ $kg['hari'] ?? '-' }}
                        </span>
                        <span style="font-size:.74rem;color:#10B981;">
                            {{ $kg['hadir'] }}/{{ $kg['total'] }} sesi
                        </span>
                    </div>
                </div>
            </div>
        @empty
            <p style="color:var(--text-light);font-size:.85rem;text-align:center;padding:16px 0;">
                Belum ada data absensi di periode ini.
            </p>
        @endforelse
    </div>

    {{-- Bottom 5 --}}
    <div class="panel">
        <div class="panel-title" style="color:#EF4444;">
            <i class="fas fa-arrow-trend-down"></i> Kehadiran Terendah
        </div>
        @forelse($bottomKegiatan as $i => $kg)
            @php
                $warna = $kg['persen'] < 70 ? '#EF4444' : '#F59E0B';
                $bgBar = $kg['persen'] < 70 ? '#FEF2F2' : '#FFFBEB';
                $kgId  = $kg['id'];
            @endphp
            <div class="kg-item">
                <span style="color:#9CA3AF;font-size:.75rem;width:16px;flex-shrink:0;text-align:center;">
                    {{ $i + 1 }}
                </span>

                <div style="flex:1;min-width:0;">
                    <div style="display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:2px;">
                        <a href="{{ route('admin.riwayat-kegiatan.show', $kgId) }}"
                           style="text-decoration:none;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.84rem;font-weight:600;flex:1;min-width:0;">
                            {{ $kg['nama_kegiatan'] }}
                        </a>
                        <span style="font-weight:700;color:{{ $warna }};font-size:.88rem;flex-shrink:0;">
                            {{ $kg['persen'] }}%
                        </span>
                    </div>

                    {{-- Progress bar — background merah/kuning tipis untuk kontras visual --}}
                    <div style="background:{{ $bgBar }};border-radius:4px;height:6px;overflow:hidden;margin-bottom:4px;">
                        <div style="width:{{ $kg['persen'] }}%;height:100%;background:{{ $warna }};border-radius:4px;transition:width .5s;"></div>
                    </div>

                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span class="kg-context">
                            {{ $kg['nama_kategori'] ?? '-' }} · {{ $kg['hari'] ?? '-' }}
                        </span>
                        <span style="font-size:.74rem;color:{{ $warna }};">
                            {{ $kg['hadir'] }}/{{ $kg['total'] }} sesi
                            @if(($kg['alpa'] ?? 0) > 0)
                                · <strong>{{ $kg['alpa'] }}× alpa</strong>
                            @endif
                        </span>
                    </div>
                </div>
            </div>
        @empty
            <p style="color:var(--text-light);font-size:.85rem;text-align:center;padding:16px 0;">
                Belum ada data absensi di periode ini.
            </p>
        @endforelse
    </div>

    {{-- Santri Perlu Perhatian --}}
    <div class="panel">
        <div class="panel-title" style="color:#F59E0B;">
            <i class="fas fa-user-clock"></i> Santri Perlu Perhatian
            <a href="{{ route('admin.laporan-kegiatan.santri-perlu-perhatian', request()->query()) }}">
                Lihat Semua →
            </a>
        </div>
        <p style="font-size:.78rem;color:#6B7280;margin:0 0 10px;">
            {{ $kpi['santri_perlu_perhatian'] }} dari {{ $kpi['total_santri_aktif'] }} santri aktif
            dengan kehadiran &lt;70%
        </p>
        @forelse($santriPerluPerhatianList as $i => $s)
            <div class="spp-item">
                <span class="spp-rank">{{ $i + 1 }}</span>

                <div style="flex:1;min-width:0;">
                    <div style="display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:2px;">
                        <a href="{{ route('admin.riwayat-kegiatan.detail-santri', $s->id_santri) }}"
                           class="spp-name"
                           style="text-decoration:none;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;">
                            {{ $s->nama_lengkap }}
                        </a>
                        <span class="spp-pct" style="flex-shrink:0;">{{ $s->persen }}%</span>
                    </div>

                    {{-- Progress bar — merah, background merah pucat --}}
                    <div style="background:#FEF2F2;border-radius:4px;height:6px;overflow:hidden;margin-bottom:3px;">
                        <div style="width:{{ $s->persen }}%;height:100%;background:#EF4444;border-radius:4px;transition:width .5s;"></div>
                    </div>

                    <div class="spp-ctx">
                        {{ $s->hadir }}/{{ $s->total }} sesi · {{ $s->alpa }}× alpa
                    </div>
                </div>
            </div>
        @empty
            <div style="padding:12px;background:#ECFDF5;border-radius:8px;color:#065F46;
                        font-size:.85rem;display:flex;align-items:center;gap:8px;margin-top:4px;">
                <i class="fas fa-check-circle"></i> Semua santri kehadiran ≥70%. Alhamdulillah!
            </div>
        @endforelse
    </div>
</div>

{{-- ══════════════════════════════════════════════════
     KEHADIRAN PER KELAS — Horizontal Bar Chart
═══════════════════════════════════════════════════ --}}
@php
    /* Flatten semua kelas dari semua kelompok untuk chart */
    $chartKelasLabels  = [];
    $chartKelasData    = [];
    $chartKelasColors  = [];
    $chartKelasContext = []; // untuk tooltip: "hadir / total"
    $chartKelasGroups  = []; // label kelompok per kelas

    foreach ($kelasRingkasan as $kelompok) {
        foreach ($kelompok['kelas'] as $k) {
            $chartKelasLabels[]  = $k['nama_kelas'];
            $chartKelasData[]    = $k['persen'];
            $chartKelasColors[]  = $k['persen'] >= 85 ? '#10B981' : ($k['persen'] >= 70 ? '#F59E0B' : '#EF4444');
            $chartKelasContext[] = $k['hadir'] . ' hadir dari ' . $k['total'] . ' tercatat';
            $chartKelasGroups[]  = $kelompok['nama_kelompok'];
        }
    }
    $chartHeight = max(180, count($chartKelasLabels) * 34 + 40);
@endphp

<div class="chart-wrap" style="margin-bottom:16px;">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;flex-wrap:wrap;gap:8px;">
        <h4 style="margin:0;">
            <i class="fas fa-school"></i> Kehadiran Per Kelas
        </h4>
        <a href="{{ route('admin.riwayat-kegiatan.index') }}"
           style="font-size:.78rem;color:var(--primary-color);">
            Detail di Riwayat Kegiatan →
        </a>
    </div>
    <p style="margin:0 0 12px;font-size:.78rem;color:#6B7280;">
        % hadir efektif — Terlambat dihitung Hadir. Hover bar untuk melihat angka lengkap.
    </p>

    @if(count($chartKelasLabels) > 0)
        <div style="position:relative;height:{{ $chartHeight }}px;">
            <canvas id="kelasChart"></canvas>
        </div>
        <div class="kelas-legend">
            <div class="kelas-legend-item">
                <div class="kelas-legend-dot" style="background:#10B981;"></div> ≥85% Baik
            </div>
            <div class="kelas-legend-item">
                <div class="kelas-legend-dot" style="background:#F59E0B;"></div> 70–84% Cukup
            </div>
            <div class="kelas-legend-item">
                <div class="kelas-legend-dot" style="background:#EF4444;"></div> &lt;70% Perlu Perhatian
            </div>
        </div>
    @else
        <p style="color:var(--text-light);font-size:.85rem;text-align:center;padding:20px 0;">
            Belum ada data kelas untuk periode ini.
        </p>
    @endif
</div>

{{-- JS --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
function setPeriode(p) {
    document.getElementById('periodeInput').value = p;
    document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));
    event.target.classList.add('active');
    const cr = document.getElementById('customRange');
    if (p === 'custom') { cr.classList.add('show'); }
    else { cr.classList.remove('show'); document.getElementById('periodForm').submit(); }
}

// ── Distribusi Santri Donut Chart ──
const distribusiBuckets = @json($buckets);
new Chart(document.getElementById('distribusiChart'), {
    type: 'doughnut',
    data: {
        labels: distribusiBuckets.map(b => b.label),
        datasets: [{
            data: distribusiBuckets.map(b => b.count),
            backgroundColor: distribusiBuckets.map(b => b.color),
            borderWidth: 2,
            borderColor: '#fff',
            hoverOffset: 8,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '68%',
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: (ctx) => {
                        const b = distribusiBuckets[ctx.dataIndex];
                        return [
                            ` ${b.count} santri (${b.persen}%)`,
                            ` dari {{ $totalDengan }} santri tercatat`,
                        ];
                    }
                },
                backgroundColor: 'rgba(17,24,39,.9)',
                titleFont: { size: 13, weight: '600' },
                bodyFont: { size: 12 },
                padding: 10,
                cornerRadius: 8,
            }
        }
    }
});


const labels  = @json($trendLabels);
const avgLine = @json($avgLine);

new Chart(document.getElementById('trendChart'), {
    type: 'line',
    data: {
        labels,
        datasets: [{
            label: 'Rata-rata Kehadiran',
            data: avgLine,
            borderColor: '#10B981',
            backgroundColor: 'rgba(16,185,129,.1)',
            tension: 0.4, fill: true,
            pointRadius: 4, pointHoverRadius: 6,
            spanGaps: true,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: ctx => {
                        const v = ctx.parsed.y;
                        return v !== null ? `${v}% kehadiran rata-rata` : 'Tidak ada data';
                    }
                }
            }
        },
        scales: {
            y: {
                min: 0, max: 100,
                ticks: { callback: v => v + '%' },
                grid: { color: '#f1f5f9' }
            },
            x: { grid: { display: false } }
        }
    }
});

// ── Horizontal Bar Chart: Kehadiran Per Kelas ──
@if(count($chartKelasLabels) > 0)
const kelasLabels   = @json($chartKelasLabels);
const kelasData     = @json($chartKelasData);
const kelasColors   = @json($chartKelasColors);
const kelasContext  = @json($chartKelasContext);
const kelasGroups   = @json($chartKelasGroups);

new Chart(document.getElementById('kelasChart'), {
    type: 'bar',
    data: {
        labels: kelasLabels,
        datasets: [{
            label: '% Kehadiran',
            data: kelasData,
            backgroundColor: kelasColors,
            borderRadius: 5,
            borderSkipped: false,
            barThickness: 20,
        }]
    },
    options: {
        indexAxis: 'y',   // horizontal
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    title: (items) => {
                        const i = items[0].dataIndex;
                        return `${kelasLabels[i]} — ${kelasGroups[i]}`;
                    },
                    label: (ctx) => {
                        const i = ctx.dataIndex;
                        return [
                            `Kehadiran: ${ctx.parsed.x}%`,
                            kelasContext[i],
                        ];
                    },
                    labelColor: (ctx) => ({
                        borderColor: kelasColors[ctx.dataIndex],
                        backgroundColor: kelasColors[ctx.dataIndex],
                        borderRadius: 3,
                    }),
                },
                backgroundColor: 'rgba(17,24,39,.9)',
                titleFont: { size: 13, weight: '600' },
                bodyFont: { size: 12 },
                padding: 10,
                cornerRadius: 8,
            }
        },
        scales: {
            x: {
                min: 0, max: 100,
                ticks: { callback: v => v + '%', font: { size: 11 } },
                grid: { color: '#f1f5f9' },
                // Garis referensi 70% dan 85%
            },
            y: {
                ticks: { font: { size: 11 } },
                grid: { display: false },
            }
        },
        // Plugin untuk garis referensi 70% dan 85%
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    title: (items) => {
                        const i = items[0].dataIndex;
                        return `${kelasLabels[i]} — ${kelasGroups[i]}`;
                    },
                    label: (ctx) => {
                        const i = ctx.dataIndex;
                        return [
                            `Kehadiran: ${ctx.parsed.x}%`,
                            kelasContext[i],
                        ];
                    },
                },
                backgroundColor: 'rgba(17,24,39,.9)',
                titleFont: { size: 13, weight: '600' },
                bodyFont: { size: 12 },
                padding: 10,
                cornerRadius: 8,
            },
            annotation: undefined,
        },
    },
    plugins: [{
        // Plugin custom: garis vertikal referensi 70% dan 85%
        id: 'refLines',
        afterDraw(chart) {
            const { ctx, chartArea: { top, bottom }, scales: { x } } = chart;
            [{ v: 70, color: '#F59E0B', label: '70%' }, { v: 85, color: '#10B981', label: '85%' }].forEach(ref => {
                const xPx = x.getPixelForValue(ref.v);
                ctx.save();
                ctx.beginPath();
                ctx.setLineDash([4, 4]);
                ctx.moveTo(xPx, top);
                ctx.lineTo(xPx, bottom);
                ctx.strokeStyle = ref.color;
                ctx.lineWidth = 1.5;
                ctx.globalAlpha = 0.6;
                ctx.stroke();
                ctx.globalAlpha = 1;
                ctx.fillStyle = ref.color;
                ctx.font = '10px sans-serif';
                ctx.fillText(ref.label, xPx + 3, top + 10);
                ctx.restore();
            });
        }
    }]
});
@endif
</script>

<style>
@media print {
    .period-bar, .btn, button { display:none !important; }
    .panel, .chart-wrap { box-shadow:none !important; border:1px solid #e2e8f0; }
}
</style>
@endsection