{{-- resources/views/livewire/kepala-sekolah/pelanggaran.blade.php --}}
@php use Illuminate\Support\Facades\Storage; @endphp

<div x-data="{ openDetail: @entangle('showDetail') }" 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">Laporan Pelanggaran</h1>
            <p class="text-xs text-slate-500">Rekap pelanggaran siswa (sesuai filter)</p>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            {{-- Pencarian --}}
            <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 siswa / NISN / deskripsi…"
                       class="w-64 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500">
            </label>

            {{-- 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-48 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500">
                    <option value="">Semua Periode</option>
                    @foreach ($periodes as $p)
                        <option value="{{ $p->id }}">{{ $p->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-orange-500 focus:border-orange-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-orange-500 focus:border-orange-500">
                    <option value="">Semua Status</option>
                    <option value="diproses">Diproses</option>
                    <option value="selesai">Selesai</option>
                </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-48 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500">
                    <option value="">Semua Kelas</option>
                    @foreach ($kelasList as $k)
                        <option value="{{ $k->id }}">{{ $k->nama }}</option>
                    @endforeach
                </select>
            </label>

            {{-- Print PDF: kirim semua filter aktif sebagai query string --}}
            <a
                href="{{ route('kepsek.pelanggaran.print', [
                    'search'       => $search,
                    'filterPeriode'=> $filterPeriode,
                    'filterJenis'  => $filterJenis,
                    'filterStatus' => $filterStatus,
                    'filterKelas'  => $filterKelas,
                ]) }}"
                target="_blank"
                class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 text-white px-3 py-2 hover:bg-emerald-700 transition"
                title="Cetak PDF sesuai filter"
            >
                <i class="bi bi-printer"></i> Print PDF
            </a>
        </div>
    </div>

    {{-- Tabel --}}
    <div class="bg-white rounded-2xl shadow ring-1 ring-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 text-left">
                    <tr>
                        <th class="px-4 py-3 font-medium text-slate-600 w-14">#</th>
                        <th class="px-4 py-3 font-medium text-slate-600">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">Kelas</th>
                        <th class="px-4 py-3 font-medium text-slate-600">Jenis</th>
                        <th class="px-4 py-3 font-medium text-slate-600">Status</th>
                        <th class="px-4 py-3 font-medium text-slate-600 w-36">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($items as $i => $row)
                        <tr class="hover:bg-slate-50">
                            <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">
                                {{ $row->created_at?->format('d M Y H:i') }}
                            </td>
                            <td class="px-4 py-3">
                                <div class="font-medium text-slate-900">{{ $row->siswa->nama ?? '—' }}</div>
                                <div class="text-xs text-slate-500">{{ $row->siswa->nisn ?? '—' }}</div>
                            </td>
                            <td class="px-4 py-3">{{ $row->siswa->kelas->nama ?? '—' }}</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
                                    @class([
                                        'bg-amber-100 text-amber-700' => $row->status === 'diproses',
                                        'bg-emerald-100 text-emerald-700' => $row->status === 'selesai',
                                    ])">
                                    {{ ucfirst($row->status) }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <button
                                    type="button"
                                    @click="$wire.openDetail({{ $row->id }}); openDetail = true"
                                    class="inline-flex items-center gap-1 rounded-lg bg-slate-100 px-2.5 py-1.5 hover:bg-slate-200"
                                >
                                    <i class="bi bi-eye"></i> Lihat Detail
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-10 text-center text-slate-500">
                                Tidak ada data.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="px-4 py-3 border-t border-slate-200">
            {{ $items->links() }}
        </div>
    </div>

    {{-- Modal Detail --}}
    <div x-cloak x-show="openDetail" x-transition.opacity
         class="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
        <div @click.outside="openDetail = false; $wire.closeDetail()"
             class="w-full max-w-2xl rounded-2xl bg-white shadow-2xl ring-1 ring-slate-200 overflow-hidden">
            <div class="flex items-center justify-between px-4 py-3 border-b border-slate-200">
                <div class="flex items-center gap-2">
                    <i class="bi bi-file-text text-indigo-600"></i>
                    <h3 class="font-medium">Detail Pelanggaran</h3>
                </div>
                <button type="button" @click="openDetail = false; $wire.closeDetail()" class="text-slate-500 hover:text-slate-700">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <div class="p-4 space-y-3 text-sm">
                <div class="grid grid-cols-2 gap-3">
                    <div><span class="text-slate-500">Tanggal:</span> <span class="font-medium">{{ $detail['tanggal'] ?? '—' }}</span></div>
                    <div><span class="text-slate-500">Periode:</span> <span class="font-medium">{{ $detail['periode'] ?? '—' }}</span></div>
                    <div><span class="text-slate-500">Siswa:</span> <span class="font-medium">{{ $detail['siswa'] ?? '—' }}</span></div>
                    <div><span class="text-slate-500">NISN:</span> <span class="font-medium">{{ $detail['nisn'] ?? '—' }}</span></div>
                    <div><span class="text-slate-500">Kelas:</span> <span class="font-medium">{{ $detail['kelas'] ?? '—' }}</span></div>
                    <div><span class="text-slate-500">Jenis:</span> <span class="font-medium">{{ $detail['jenis'] ?? '—' }}</span></div>
                    <div><span class="text-slate-500">Status:</span> <span class="font-medium">{{ $detail['status'] ?? '—' }}</span></div>
                </div>

                <div>
                    <div class="text-slate-500 mb-1">Deskripsi:</div>
                    <div class="rounded-lg border border-slate-200 p-2">{{ $detail['deskripsi'] ?? '—' }}</div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <div class="text-slate-500 mb-1">Surat Arahan</div>
                        @if (!empty($detail['surat']))
                            <a href="{{ Storage::url($detail['surat']) }}" target="_blank" class="inline-flex items-center gap-1 text-indigo-600 hover:underline">
                                <i class="bi bi-file-earmark-text"></i> Lihat Surat
                            </a>
                        @else
                            <div>—</div>
                        @endif
                    </div>
                    <div>
                        <div class="text-slate-500 mb-1">Dokumentasi Tindak Lanjut</div>
                        @if (!empty($detail['dokumentasi']))
                            <a href="{{ Storage::url($detail['dokumentasi']) }}" target="_blank" class="inline-flex items-center gap-1 text-orange-600 hover:underline">
                                <i class="bi bi-image"></i> Lihat Dokumentasi
                            </a>
                        @else
                            <div>—</div>
                        @endif
                    </div>
                </div>

                <div>
                    <div class="text-slate-500 mb-1">Catatan TL:</div>
                    <div class="rounded-lg border border-slate-200 p-2">{{ $detail['catatan_tl'] ?? '—' }}</div>
                </div>
            </div>

            <div class="px-4 py-3 border-t border-slate-200 flex items-center justify-end">
                <button type="button" @click="openDetail = false; $wire.closeDetail()" class="rounded-lg bg-slate-100 px-3 py-2 text-sm hover:bg-slate-200">Tutup</button>
            </div>
        </div>
    </div>
</div>