{{-- resources/views/livewire/walikelas/dahboard.blade.php --}}
@php
    use Illuminate\Support\Str;
    $byJenis   = collect($stats['byJenis'] ?? []);
    $byStatus  = collect($stats['byStatus'] ?? []);
    $totalJenis  = max(1, $byJenis->sum());   // hindari bagi 0
    $totalStatus = max(1, $byStatus->sum());  // hindari bagi 0
@endphp

<div class="space-y-6">
    {{-- Header --}}
    <div class="rounded-2xl bg-gradient-to-r from-indigo-50 to-sky-50 border border-indigo-100 p-5">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <div class="flex items-center gap-2 text-indigo-700">
                    <i class="bi bi-speedometer2"></i>
                    <h1 class="text-lg sm:text-xl font-semibold">Dashboard Wali Kelas</h1>
                </div>
                <p class="mt-1 text-xs sm:text-sm text-slate-600">
                    @if ($kelasNama)
                        Kelas: <span class="inline-flex items-center gap-2 rounded-full bg-white/70 border border-indigo-200 px-2 py-0.5 text-indigo-700 font-medium">
                            <i class="bi bi-building"></i> {{ $kelasNama }}
                        </span>
                    @else
                        Akun Anda belum terhubung sebagai wali dari kelas mana pun.
                    @endif
                </p>
            </div>
        </div>
    </div>

    {{-- Info jika belum punya kelas --}}
    @if (!$kelasNama)
        <div class="rounded-xl border border-amber-200 bg-amber-50 text-amber-800 p-3 text-sm">
            <div class="flex items-start gap-2">
                <i class="bi bi-exclamation-triangle-fill mt-0.5"></i>
                <div>
                    Anda belum ditetapkan sebagai wali kelas. Minta admin mengaitkan akun Anda dengan sebuah kelas.
                </div>
            </div>
        </div>
    @endif

    {{-- Stat Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <div class="text-slate-500 text-xs">Total Siswa</div>
            <div class="mt-1 flex items-center gap-2">
                <i class="bi bi-people text-indigo-500"></i>
                <div class="text-2xl font-semibold text-slate-800">{{ number_format($stats['totalSiswa']) }}</div>
            </div>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <div class="text-slate-500 text-xs">Total Pelanggaran</div>
            <div class="mt-1 flex items-center gap-2">
                <i class="bi bi-shield-exclamation text-rose-500"></i>
                <div class="text-2xl font-semibold text-slate-800">{{ number_format($stats['totalPelanggaran']) }}</div>
            </div>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <div class="text-slate-500 text-xs">Status — Diproses</div>
            <div class="mt-1 flex items-center gap-2">
                <i class="bi bi-hourglass-split text-amber-500"></i>
                <div class="text-2xl font-semibold text-slate-800">{{ number_format($byStatus->get('diproses',0)) }}</div>
            </div>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <div class="text-slate-500 text-xs">Status — Selesai</div>
            <div class="mt-1 flex items-center gap-2">
                <i class="bi bi-check2-circle text-emerald-600"></i>
                <div class="text-2xl font-semibold text-slate-800">{{ number_format($byStatus->get('selesai',0)) }}</div>
            </div>
        </div>
    </div>

    {{-- Distribusi Jenis & Status --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="rounded-2xl border border-slate-200 bg-white p-4">
            <div class="flex items-center justify-between">
                <h3 class="font-medium text-slate-800">Distribusi Jenis Pelanggaran</h3>
                <span class="text-xs text-slate-500">Total: {{ $byJenis->sum() }}</span>
            </div>
            <div class="mt-4 space-y-3">
                @php
                    $rows = [
                        ['label'=>'Ringan','key'=>'ringan','bar'=>'bg-emerald-500/80','chip'=>'bg-emerald-100 text-emerald-700'],
                        ['label'=>'Sedang','key'=>'sedang','bar'=>'bg-amber-500/80','chip'=>'bg-amber-100 text-amber-700'],
                        ['label'=>'Berat','key'=>'berat','bar'=>'bg-rose-500/80','chip'=>'bg-rose-100 text-rose-700'],
                    ];
                @endphp
                @foreach ($rows as $r)
                    @php
                        $val = (int) $byJenis->get($r['key'], 0);
                        $pct = round(($val / $totalJenis) * 100);
                    @endphp
                    <div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 font-medium {{ $r['chip'] }}">
                                {{ $r['label'] }}
                            </span>
                            <span class="text-slate-600">{{ $val }} ({{ $pct }}%)</span>
                        </div>
                        <div class="mt-1 h-2 w-full rounded-full bg-slate-100 overflow-hidden">
                            <div class="h-2 {{ $r['bar'] }}" style="width: {{ $pct }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white p-4">
            <div class="flex items-center justify-between">
                <h3 class="font-medium text-slate-800">Distribusi Status</h3>
                <span class="text-xs text-slate-500">Total: {{ $byStatus->sum() }}</span>
            </div>
            <div class="mt-4 space-y-3">
                @php
                    $rows = [
                        ['label'=>'Diproses','key'=>'diproses','bar'=>'bg-amber-500/80','chip'=>'bg-amber-100 text-amber-700'],
                        ['label'=>'Selesai','key'=>'selesai','bar'=>'bg-emerald-500/80','chip'=>'bg-emerald-100 text-emerald-700'],
                    ];
                @endphp
                @foreach ($rows as $r)
                    @php
                        $val = (int) $byStatus->get($r['key'], 0);
                        $pct = round(($val / $totalStatus) * 100);
                    @endphp
                    <div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 font-medium {{ $r['chip'] }}">
                                {{ $r['label'] }}
                            </span>
                            <span class="text-slate-600">{{ $val }} ({{ $pct }}%)</span>
                        </div>
                        <div class="mt-1 h-2 w-full rounded-full bg-slate-100 overflow-hidden">
                            <div class="h-2 {{ $r['bar'] }}" style="width: {{ $pct }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Terbaru & Jadwal --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="rounded-2xl border border-slate-200 bg-white p-4">
            <div class="flex items-center justify-between">
                <h3 class="font-medium text-slate-800">Pelanggaran Terbaru</h3>
                <span class="text-xs text-slate-500">5 terakhir</span>
            </div>

            <div class="mt-3 divide-y divide-slate-100">
                @forelse ($stats['recentPelanggaran'] as $item)
                    @php
                        $badge = match($item->jenis) {
                            'ringan' => 'bg-emerald-100 text-emerald-700',
                            'sedang' => 'bg-amber-100 text-amber-700',
                            'berat'  => 'bg-rose-100 text-rose-700',
                            default  => 'bg-slate-100 text-slate-700',
                        };
                        $status = $item->status === 'selesai'
                                  ? 'bg-emerald-100 text-emerald-700'
                                  : 'bg-amber-100 text-amber-700';
                    @endphp
                    <div class="py-3 flex items-start gap-3">
                        <div class="mt-0.5 text-slate-400"><i class="bi bi-clock"></i></div>
                        <div class="flex-1">
                            <div class="text-xs text-slate-500">
                                {{ \Illuminate\Support\Carbon::parse($item->created_at)->format('d M Y H:i') }}
                                • Periode: <span class="font-medium text-slate-700">{{ $item->periode->nama ?? '—' }}</span>
                            </div>
                            <div class="text-sm font-medium text-slate-800">
                                {{ $item->siswa->nama ?? '—' }} — {{ $item->siswa->kelas->nama ?? '—' }}
                            </div>
                            <div class="mt-1 text-sm text-slate-700 line-clamp-2">{{ $item->deskripsi }}</div>
                            <div class="mt-2 flex items-center gap-2 text-[11px]">
                                <span class="inline-flex items-center rounded-full px-2 py-0.5 font-semibold {{ $badge }}">{{ ucfirst($item->jenis) }}</span>
                                <span class="inline-flex items-center rounded-full px-2 py-0.5 font-semibold {{ $status }}">{{ ucfirst($item->status) }}</span>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="py-10 text-center text-slate-500 text-sm">
                        Belum ada pelanggaran.
                    </div>
                @endforelse
            </div>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white p-4">
            <div class="flex items-center justify-between">
                <h3 class="font-medium text-slate-800">Jadwal Bimbingan Offline</h3>
                <span class="text-xs text-slate-500">5 terdekat</span>
            </div>

            <div class="mt-3 divide-y divide-slate-100">
                @forelse ($stats['upcomingBimbingan'] as $b)
                    @php
                        $status = $b->status === 'selesai'
                                  ? 'bg-emerald-100 text-emerald-700'
                                  : 'bg-amber-100 text-amber-700';
                    @endphp
                    <div class="py-3 flex items-start gap-3">
                        <div class="mt-0.5 text-indigo-500"><i class="bi bi-calendar-event"></i></div>
                        <div class="flex-1">
                            <div class="text-xs text-slate-500">
                                {{ \Illuminate\Support\Carbon::parse($b->tanggal)->format('d M Y H:i') }}
                            </div>
                            <div class="text-sm font-medium text-slate-800">
                                {{ $b->siswa->nama ?? '—' }} — {{ $b->siswa->kelas->nama ?? '—' }}
                            </div>
                            <div class="mt-1 text-sm text-slate-700">{{ $b->topik ?? '—' }}</div>
                            <div class="mt-2 flex items-center gap-2 text-[11px]">
                                <span class="inline-flex items-center rounded-full px-2 py-0.5 font-semibold {{ $status }}">
                                    {{ ucfirst($b->status) }}
                                </span>
                                @if(!empty($b->pembimbing?->pengguna?->nama))
                                    <span class="text-slate-500">Pembimbing: <span class="text-slate-700 font-medium">{{ $b->pembimbing->pengguna->nama }}</span></span>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="py-10 text-center text-slate-500 text-sm">
                        Belum ada jadwal bimbingan.
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>