{{-- resources/views/livewire/walikelas/pelanggaran.blade.php --}}
@php
    use Illuminate\Support\Facades\Auth;
    use Illuminate\Support\Str;

    $kelasNama = optional(optional(Auth::user())->pengguna)->kelas->nama ?? null;
@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-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <div class="flex items-center gap-2 text-indigo-700">
                    <i class="bi bi-shield-check"></i>
                    <h1 class="text-lg sm:text-xl font-semibold">Pelanggaran Siswa Kelas Saya</h1>
                </div>
                <p class="mt-1 text-xs sm:text-sm text-slate-600">
                    @if ($kelasNama)
                        Menampilkan pelanggaran untuk 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>

            {{-- Search --}}
            <div class="flex items-center gap-2">
                <label class="relative">
                    <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                        <i class="bi bi-search"></i>
                    </span>
                    <input
                        type="text"
                        wire:model.live="search"
                        placeholder="Cari nama/NISN"
                        class="w-[18rem] sm:w-[22rem] rounded-xl border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white"
                    />
                </label>
                @if(trim($search) !== '')
                    <button type="button" wire:click="$set('search','')"
                            class="text-xs px-2 py-1 rounded-lg border border-slate-200 hover:bg-slate-50">
                        Bersihkan
                    </button>
                @endif
            </div>
        </div>

        {{-- Filter bar --}}
        <div class="mt-4 flex flex-wrap items-center gap-2">
            <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-44 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white">
                    <option value="">Semua Jenis</option>
                    <option value="ringan">Ringan</option>
                    <option value="sedang">Sedang</option>
                    <option value="berat">Berat</option>
                </select>
            </label>

            <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-48 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white">
                    <option value="">Semua Status</option>
                    <option value="diproses">Diproses</option>
                    <option value="selesai">Selesai</option>
                </select>
            </label>

            <input type="date" wire:model.live="dateFrom"
                   class="rounded-lg border-slate-300 px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white">
            <span class="text-slate-500 text-sm">s/d</span>
            <input type="date" wire:model.live="dateTo"
                   class="rounded-lg border-slate-300 px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white">

            {{-- Per page --}}
            <div class="ml-auto flex items-center gap-2">
                <span class="text-xs text-slate-500">Baris:</span>
                <select wire:model.live="perPage"
                        class="rounded-lg border-slate-300 px-2 py-1 text-xs focus:ring-indigo-500 focus:border-indigo-500 bg-white">
                    <option>10</option>
                    <option>15</option>
                    <option>25</option>
                    <option>50</option>
                </select>
            </div>
        </div>
    </div>

    {{-- Alert 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 untuk mengaitkan akun Anda ke sebuah kelas agar
                    data pelanggaran siswa dapat ditampilkan.
                </div>
            </div>
        </div>
    @endif

    {{-- Tabel --}}
    <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50/80 backdrop-blur supports-[backdrop-filter]:sticky supports-[backdrop-filter]:top-0">
                    <tr class="text-left">
                        <th class="px-4 py-3 font-medium text-slate-600 w-16">#</th>
                        <th class="px-4 py-3 font-medium text-slate-600 w-48">Tanggal</th>
                        <th class="px-4 py-3 font-medium text-slate-600">Siswa</th>
                        <th class="px-4 py-3 font-medium text-slate-600 w-40">Jenis</th>
                        <th class="px-4 py-3 font-medium text-slate-600 w-40">Status</th>
                        <th class="px-4 py-3 font-medium text-slate-600">Deskripsi</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-100">
                    @forelse ($items as $i => $row)
                        <tr class="hover:bg-slate-50/60">
                            <td class="px-4 py-3 text-slate-500">
                                {{ ($items->currentPage() - 1) * $items->perPage() + $i + 1 }}
                            </td>

                            <td class="px-4 py-3 text-slate-700">
                                {{ \Illuminate\Support\Carbon::parse($row->created_at)->format('d M Y H:i') }}
                            </td>

                            <td class="px-4 py-3">
                                <div class="flex items-center gap-3">
                                    @php
                                        $inisial = strtoupper(Str::substr($row->siswa->nama ?? 'S', 0, 1));
                                    @endphp
                                    <div class="h-8 w-8 rounded-full grid place-items-center text-[11px] font-bold text-white
                                        @class([
                                            'bg-indigo-500' => $row->jenis === 'ringan',
                                            'bg-amber-600'  => $row->jenis === 'sedang',
                                            'bg-rose-600'   => $row->jenis === 'berat',
                                        ])">
                                        {{ $inisial }}
                                    </div>
                                    <div>
                                        <div class="font-medium text-slate-900">
                                            {{ $row->siswa->nama ?? '—' }}
                                        </div>
                                        <div class="text-xs text-slate-500">
                                            NISN: {{ $row->siswa->nisn ?? '—' }}
                                            • Kelas: {{ $row->siswa->kelas->nama ?? '—' }}
                                            • Periode: {{ $row->periode->nama ?? '—' }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td class="px-4 py-3">
                                <span class="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>
                            </td>

                            <td class="px-4 py-3">
                                <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>
                            </td>

                            <td class="px-4 py-3">
                                <div class="text-slate-700 line-clamp-2 max-w-3xl">
                                    {{ $row->deskripsi }}
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-14">
                                <div class="flex flex-col items-center justify-center text-center">
                                    <div class="rounded-2xl border-2 border-dashed border-slate-200 p-6 w-full sm:w-[32rem]">
                                        <div class="text-3xl">😌</div>
                                        <h3 class="mt-2 text-sm font-semibold text-slate-700">Belum ada data</h3>
                                        <p class="mt-1 text-sm text-slate-500">
                                            Tidak ada catatan pelanggaran yang cocok dengan pencarian/filters Anda.
                                        </p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Footer: pagination + info --}}
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 py-3 border-t border-slate-200">
            <div class="text-xs text-slate-500">
                Menampilkan
                <span class="font-medium text-slate-700">{{ $items->firstItem() ?? 0 }}</span>
                –
                <span class="font-medium text-slate-700">{{ $items->lastItem() ?? 0 }}</span>
                dari
                <span class="font-medium text-slate-700">{{ $items->total() }}</span>
                data
            </div>
            <div>
                {{ $items->links() }}
            </div>
        </div>
    </div>
</div>