{{-- resources/views/livewire/guru-piket/dashboard.blade.php --}}
<div>
<div class="space-y-6">
    {{-- Header + Range --}}
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-xl font-semibold">Dashboard Guru Piket</h1>
            <p class="text-xs text-slate-500">Pantau pelanggaran harian & tren</p>
        </div>

        <div class="flex items-center gap-1 text-sm">
            <span class="text-slate-500 mr-1">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>
    </div>

    {{-- 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 Pelanggaran</div>
                <i class="bi bi-exclamation-octagon text-rose-600"></i>
            </div>
            <div class="mt-2 text-2xl font-semibold text-slate-800">{{ number_format($totalPelanggaran) }}</div>
            <div class="text-xs text-slate-500 mt-1">{{ $range === 'all' ? 'Semua waktu' : $range.' hari terakhir' }}</div>
        </div>

        <a href="{{ route('guru_piket.pelanggaran.index') }}"
           class="rounded-2xl bg-white ring-1 ring-slate-200 p-4 hover:shadow transition">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-xs uppercase text-slate-500">Hari Ini</div>
                    <div class="mt-1 text-2xl font-semibold text-slate-800">{{ number_format($todayCount) }}</div>
                </div>
                <i class="bi bi-clipboard-data text-indigo-600"></i>
            </div>
            <div class="text-xs text-slate-500 mt-1">Klik untuk input cepat</div>
        </a>

    </div>

    {{-- Komposisi Pelanggaran 
    <div class="grid gap-3 lg:grid-cols-3">
        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4 lg:col-span-2">
            <div class="font-medium text-slate-800 mb-3">Tren Pelanggaran — 6 Bulan</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>
    --}}
    
        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
            <div class="font-medium text-slate-800 mb-2">Ringkasan</div>
            @php
                $r = $byJenis['ringan'] ?? 0; $s = $byJenis['sedang'] ?? 0; $b = $byJenis['berat'] ?? 0;
                $sum = max(1, $r+$s+$b);
                $dp = $byStatus['diproses'] ?? 0; $sl = $byStatus['selesai'] ?? 0; $sumS = max(1,$dp+$sl);
            @endphp
            <div class="text-xs text-slate-600 space-y-2">
                <div>
                    <div class="mb-1">Jenis</div>
                    <div class="flex items-center gap-2">
                        <span class="w-16">Ringan</span>
                        <div class="flex-1 h-2 bg-slate-100 rounded overflow-hidden">
                            <div class="h-2 bg-emerald-500" style="width: {{ ($r/$sum)*100 }}%"></div>
                        </div>
                        <span class="min-w-[2.5rem] text-right">{{ $r }}</span>
                    </div>
                    <div class="flex items-center gap-2 mt-1">
                        <span class="w-16">Sedang</span>
                        <div class="flex-1 h-2 bg-slate-100 rounded overflow-hidden">
                            <div class="h-2 bg-amber-500" style="width: {{ ($s/$sum)*100 }}%"></div>
                        </div>
                        <span class="min-w-[2.5rem] text-right">{{ $s }}</span>
                    </div>
                    <div class="flex items-center gap-2 mt-1">
                        <span class="w-16">Berat</span>
                        <div class="flex-1 h-2 bg-slate-100 rounded overflow-hidden">
                            <div class="h-2 bg-rose-500" style="width: {{ ($b/$sum)*100 }}%"></div>
                        </div>
                        <span class="min-w-[2.5rem] text-right">{{ $b }}</span>
                    </div>
                </div>
                <div class="pt-2 border-t">
                    <div class="mb-1">Status</div>
                    <div class="flex items-center gap-2">
                        <span class="w-16">Diproses</span>
                        <div class="flex-1 h-2 bg-slate-100 rounded overflow-hidden">
                            <div class="h-2 bg-amber-500" style="width: {{ ($dp/$sumS)*100 }}%"></div>
                        </div>
                        <span class="min-w-[2.5rem] text-right">{{ $dp }}</span>
                    </div>
                    <div class="flex items-center gap-2 mt-1">
                        <span class="w-16">Selesai</span>
                        <div class="flex-1 h-2 bg-slate-100 rounded overflow-hidden">
                            <div class="h-2 bg-emerald-500" style="width: {{ ($sl/$sumS)*100 }}%"></div>
                        </div>
                        <span class="min-w-[2.5rem] text-right">{{ $sl }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 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('guru_piket.pelanggaran.index') }}" class="text-xs text-indigo-600 hover:underline">Input / Lihat semua</a>
        </div>

        <div class="divide-y divide-slate-100">
            @forelse ($latestPelanggaran 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.</div>
            @endforelse
        </div>
    </div>
</div>
</div>