{{-- resources/views/livewire/kesiswaan/dashboard.blade.php --}}
{{-- Pastikan TailwindCSS & Bootstrap Icons sudah ada di layout --}}
<div class="space-y-6">

    {{-- Header + Filter --}}
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-xl font-semibold">Dashboard Kesiswaan</h1>
            <p class="text-xs text-slate-500">Pemantauan pelanggaran siswa secara ringkas</p>
        </div>

        <div class="flex flex-wrap items-center gap-2 text-sm">

            {{-- Rentang waktu --}}
            <div class="flex items-center gap-1">
                <span class="text-slate-500">Rentang:</span>
                @foreach (['7'=>'7H','30'=>'30H','90'=>'90H','365'=>'1T','all'=>'Semua'] as $k => $label)
                    <button wire:click="setRange('{{ $k }}')"
                            class="px-2.5 py-1 rounded-lg border
                            {{ $range === (string)$k ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-700 border-slate-200 hover:bg-slate-50' }}">
                        {{ $label }}
                    </button>
                @endforeach
            </div>

            {{-- Periode --}}
            <label class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                    <i class="bi bi-calendar3"></i>
                </span>
                <select wire:model.live="filterPeriode"
                        class="w-56 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">Semua Periode</option>
                    @foreach ($periodes as $p)
                        <option value="{{ $p->id }}">{{ $p->nama }}</option>
                    @endforeach
                </select>
            </label>

            {{-- Kelas --}}
            <label class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                    <i class="bi bi-building"></i>
                </span>
                <select wire:model.live="filterKelas"
                        class="w-56 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">Semua Kelas</option>
                    @foreach ($kelasList as $k)
                        <option value="{{ $k->id }}">{{ $k->nama }}</option>
                    @endforeach
                </select>
            </label>

            {{-- Jenis --}}
            <label class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                    <i class="bi bi-flag"></i>
                </span>
                <select wire:model.live="filterJenis"
                        class="w-40 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">Semua Jenis</option>
                    <option value="ringan">Ringan</option>
                    <option value="sedang">Sedang</option>
                    <option value="berat">Berat</option>
                </select>
            </label>

            {{-- Status --}}
            <label class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                    <i class="bi bi-check2-circle"></i>
                </span>
                <select wire:model.live="filterStatus"
                        class="w-40 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">Semua Status</option>
                    <option value="diproses">Diproses</option>
                    <option value="selesai">Selesai</option>
                </select>
            </label>
        </div>
    </div>

    {{-- Quick links --}}
    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <a href="{{ route('kesiswaan.pelanggaran-berat') }}"
           class="rounded-2xl bg-white ring-1 ring-slate-200 p-4 hover:shadow transition">
            <div class="flex items-center justify-between">
                <div class="text-sm font-medium text-slate-800">Kelola Pelanggaran</div>
                <i class="bi bi-clipboard-check text-indigo-600"></i>
            </div>
            <div class="text-xs text-slate-500 mt-1">Buka halaman pelanggaran (berat/sedang/ringan)</div>
        </a>
        <a href="{{ route('kesiswaan.siswa.index') }}"
           class="rounded-2xl bg-white ring-1 ring-slate-200 p-4 hover:shadow transition">
            <div class="flex items-center justify-between">
                <div class="text-sm font-medium text-slate-800">Data Siswa</div>
                <i class="bi bi-people text-indigo-600"></i>
            </div>
            <div class="text-xs text-slate-500 mt-1">Lihat daftar siswa & kelas</div>
        </a>
    </div>

    {{-- Stat Cards --}}
    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
            <div class="flex items-center justify-between">
                <div class="text-xs uppercase text-slate-500">Total Siswa</div>
                <i class="bi bi-people text-indigo-600"></i>
            </div>
            <div class="mt-2 text-2xl font-semibold text-slate-800">{{ number_format($totalSiswa) }}</div>
            <div class="text-xs text-slate-500 mt-1">Seluruh waktu</div>
        </div>

        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
            <div class="flex items-center justify-between">
                <div class="text-xs uppercase text-slate-500">Total Kelas</div>
                <i class="bi bi-building text-indigo-600"></i>
            </div>
            <div class="mt-2 text-2xl font-semibold text-slate-800">{{ number_format($totalKelas) }}</div>
            <div class="text-xs text-slate-500 mt-1">Seluruh waktu</div>
        </div>

        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
            <div class="flex items-center justify-between">
                <div class="text-xs uppercase text-slate-500">
                    Pelanggaran
                    @if($filterPeriode)
                        <span class="ml-1 text-[10px] text-slate-400">(Periode)</span>
                    @endif
                </div>
                <i class="bi bi-exclamation-triangle text-rose-600"></i>
            </div>
            <div class="mt-2 text-2xl font-semibold text-slate-800">{{ number_format($totalPelanggaran) }}</div>
            @php
                $jr = $byJenis['ringan'] ?? 0;
                $js = $byJenis['sedang'] ?? 0;
                $jb = $byJenis['berat']  ?? 0;
                $sumJenis = max(1, $jr + $js + $jb);
            @endphp
            <div class="mt-2 grid grid-cols-3 gap-2 text-xs">
                <div>
                    <div class="text-slate-500">Ringan</div>
                    <div class="flex items-center gap-2">
                        <div class="h-2 w-full rounded bg-slate-100 overflow-hidden">
                            <div class="h-2 bg-emerald-500" style="width: {{ ($jr/$sumJenis)*100 }}%"></div>
                        </div>
                        <span class="min-w-[2.5rem] text-right">{{ $jr }}</span>
                    </div>
                </div>
                <div>
                    <div class="text-slate-500">Sedang</div>
                    <div class="flex items-center gap-2">
                        <div class="h-2 w-full rounded bg-slate-100 overflow-hidden">
                            <div class="h-2 bg-amber-500" style="width: {{ ($js/$sumJenis)*100 }}%"></div>
                        </div>
                        <span class="min-w-[2.5rem] text-right">{{ $js }}</span>
                    </div>
                </div>
                <div>
                    <div class="text-slate-500">Berat</div>
                    <div class="flex items-center gap-2">
                        <div class="h-2 w-full rounded bg-slate-100 overflow-hidden">
                            <div class="h-2 bg-rose-500" style="width: {{ ($jb/$sumJenis)*100 }}%"></div>
                        </div>
                        <span class="min-w-[2.5rem] text-right">{{ $jb }}</span>
                    </div>
                </div>
            </div>
            <div class="text-xs text-slate-500 mt-1">
                {{ $range === 'all' ? 'Semua waktu' : $range.' hari terakhir' }}
            </div>
        </div>

        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
            <div class="flex items-center justify-between">
                <div class="text-xs uppercase text-slate-500">Status Tindak Lanjut</div>
                <i class="bi bi-clipboard2-check text-indigo-600"></i>
            </div>
            @php
                $sd = $byStatus['diproses'] ?? 0;
                $ss = $byStatus['selesai']  ?? 0;
                $sumSt = max(1, $sd + $ss);
            @endphp
            <div class="mt-2 grid grid-cols-2 gap-3 text-xs">
                <div>
                    <div class="text-slate-500 mb-1">Diproses</div>
                    <div class="h-2 w-full rounded bg-slate-100 overflow-hidden">
                        <div class="h-2 bg-amber-500" style="width: {{ ($sd/$sumSt)*100 }}%"></div>
                    </div>
                    <div class="mt-1 font-medium text-slate-700">{{ $sd }}</div>
                </div>
                <div>
                    <div class="text-slate-500 mb-1">Selesai</div>
                    <div class="h-2 w-full rounded bg-slate-100 overflow-hidden">
                        <div class="h-2 bg-emerald-500" style="width: {{ ($ss/$sumSt)*100 }}%"></div>
                    </div>
                    <div class="mt-1 font-medium text-slate-700">{{ $ss }}</div>
                </div>
            </div>
            <div class="text-xs text-slate-500 mt-1">
                Mengikuti semua filter di atas
            </div>
        </div>
    </div>

    {{-- Tren 6 Bulan 
    <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
        <div class="flex items-center justify-between mb-3">
            <div class="font-medium text-slate-800">
                Tren Pelanggaran — 6 Bulan Terakhir
                @if($filterPeriode) <span class="text-xs text-slate-400">(Periode)</span> @endif
            </div>
            <div class="text-xs text-slate-500">Puncak: {{ $trendMax }}</div>
        </div>
        <div class="h-40 flex items-end gap-3">
            @foreach ($trend as $t)
                @php $h = $trendMax ? max(4, round(($t['count'] / $trendMax) * 100)) : 4; @endphp
                <div class="flex flex-col items-center gap-1 w-10">
                    <div class="w-full bg-indigo-100 rounded-t-md" style="height: {{ $h }}%"></div>
                    <div class="text-[10px] text-slate-500">{{ $t['label'] }}</div>
                    <div class="text-[11px] font-medium text-slate-700">{{ $t['count'] }}</div>
                </div>
            @endforeach
        </div>
    </div>
    --}}

    {{-- Dua kolom: Terbaru & Top Siswa --}}
    <div class="grid gap-3 lg:grid-cols-2">
        {{-- Pelanggaran Terbaru --}}
        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="font-medium text-slate-800">Pelanggaran Terbaru</div>
                <a href="{{ route('kesiswaan.pelanggaran-berat') }}" class="text-xs text-indigo-600 hover:underline">
                    Lihat halaman pelanggaran
                </a>
            </div>
            <div class="divide-y divide-slate-100">
                @forelse($latest as $row)
                    <div class="py-2 flex items-start gap-3">
                        <span class="mt-1 inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold
                            @class([
                                'bg-emerald-100 text-emerald-700' => $row->jenis === 'ringan',
                                'bg-amber-100 text-amber-700'     => $row->jenis === 'sedang',
                                'bg-rose-100 text-rose-700'       => $row->jenis === 'berat',
                            ])">
                            {{ ucfirst($row->jenis) }}
                        </span>
                        <div class="flex-1">
                            <div class="text-sm font-medium text-slate-800">
                                {{ $row->siswa->nama ?? '—' }}
                                <span class="text-slate-400">•</span>
                                <span class="text-xs text-slate-500">{{ $row->siswa->kelas->nama ?? '—' }}</span>
                            </div>
                            <div class="text-xs text-slate-600 line-clamp-1">{{ $row->deskripsi }}</div>
                            <div class="text-[11px] text-slate-400 mt-0.5">{{ optional($row->created_at)->format('d M Y H:i') }}</div>
                        </div>
                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold
                            {{ $row->status === 'selesai' ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                            {{ ucfirst($row->status) }}
                        </span>
                    </div>
                @empty
                    <div class="py-6 text-center text-slate-500 text-sm">Belum ada data untuk filter aktif.</div>
                @endforelse
            </div>
        </div>

        {{-- Top Siswa --}}
        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="font-medium text-slate-800">Top Siswa (Jumlah Pelanggaran)</div>
                <div class="text-xs text-slate-500">Mengikuti filter</div>
            </div>
            <div class="divide-y divide-slate-100">
                @forelse($topSiswa as $i => $t)
                    <div class="py-2 flex items-center justify-between">
                        <div>
                            <div class="text-sm font-medium text-slate-800">{{ $t['nama'] }}</div>
                            <div class="text-xs text-slate-500">{{ $t['kelas'] }}</div>
                        </div>
                        <div class="inline-flex items-center gap-1 text-sm font-semibold text-slate-700">
                            <i class="bi bi-flag"></i> {{ $t['count'] }}
                        </div>
                    </div>
                @empty
                    <div class="py-6 text-center text-slate-500 text-sm">Tidak ada data untuk filter aktif.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>