@php use Illuminate\Support\Facades\Storage; @endphp

<div x-data="{ 
        openModal: @entangle('showModal'), 
        openDelete: @entangle('showDelete'),
        openTindak: @entangle('showTlModal'),
        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">Pelanggaran</h1>
            <p class="text-xs text-slate-500">Kelola data pelanggaran siswa</p>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            {{-- Search --}}
            <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>

            {{-- Dari Tanggal --}}
            <label class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                    <i class="bi bi-calendar2"></i>
                </span>
                <input type="date" wire:model.live="dateFrom"
                    class="w-44 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500">
            </label>

            {{-- Sampai Tanggal --}}
            <label class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                    <i class="bi bi-calendar2-event"></i>
                </span>
                <input type="date" wire:model.live="dateTo"
                    class="w-44 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500">
            </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>

            {{-- Reset Tanggal (opsional) --}}
            <button type="button"
                wire:click="$set('dateFrom',''); $set('dateTo','')"
                class="inline-flex items-center gap-2 rounded-lg bg-slate-100 px-3 py-2 hover:bg-slate-200">
                <i class="bi bi-x-circle"></i> Reset Tanggal
            </button>

            {{-- Tambah --}}
            <button type="button" @click="openModal = true; $wire.openCreate()"
                class="inline-flex items-center gap-2 rounded-lg bg-orange-600 text-white px-3 py-2 hover:bg-orange-700 transition">
                <i class="bi bi-plus-circle"></i> Tambah
            </button>
        </div>
    </div>

    {{-- Flash --}}
    @if (session('success'))
    <div class="rounded-lg bg-green-50 text-green-800 p-3 text-sm flex items-center gap-2">
        <i class="bi bi-check-circle-fill"></i>
        <span>{{ session('success') }}</span>
    </div>
    @endif

    {{-- Tabel (scroll horizontal) --}}
    <div class="bg-white rounded-2xl shadow ring-1 ring-slate-200 overflow-hidden">
        <div class="-mx-4 sm:mx-0">
            <div class="overflow-x-auto overscroll-x-contain">
                <table class="w-max whitespace-nowrap text-sm">
                    <thead class="bg-slate-50 text-left">
                        <tr>
                            <th class="px-4 py-3 font-medium text-slate-600">#</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">Berkas</th>
                            <th class="px-4 py-3 font-medium text-slate-600">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-600">
                                {{ $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 space-x-2">
                                @if ($row->surat_arahan)
                                <a class="inline-flex items-center gap-1 text-xs text-indigo-600 hover:underline"
                                    href="{{ Storage::url($row->surat_arahan) }}" target="_blank">
                                    <i class="bi bi-file-earmark-text"></i> Surat
                                </a>
                                @endif
                                @if ($row->dokumentasi_tindak_lanjut)
                                <a class="inline-flex items-center gap-1 text-xs text-orange-600 hover:underline"
                                    href="{{ Storage::url($row->dokumentasi_tindak_lanjut) }}" target="_blank">
                                    <i class="bi bi-image"></i> Dokumentasi
                                </a>
                                @endif
                            </td>

                            {{-- AKSI --}}
                            <td class="px-4 py-3">
                                <div class="flex flex-wrap items-center gap-2">
                                    @if($row->jenis === 'berat')
                                    {{-- Jenis BERAT: hanya DETAIL --}}
                                    <button type="button"
                                        @click="$wire.openDetail({{ $row->id }}); openDetail = true"
                                        class="inline-flex items-center justify-center gap-1 rounded-lg bg-slate-100 px-3 py-2 hover:bg-slate-200 whitespace-nowrap shrink-0">
                                        <i class="bi bi-eye"></i> Detail
                                    </button>
                                    <button type="button"
                                        wire:click="confirmDelete({{ $row->id }})"
                                        class="inline-flex items-center justify-center gap-1 rounded-lg bg-red-50 text-red-700 px-3 py-2 hover:bg-red-100 whitespace-nowrap shrink-0">
                                        <i class="bi bi-trash"></i> Hapus
                                    </button>

                                    @elseif($row->jenis === 'sedang')
                                    {{-- Jenis SEDANG: ada Tindak Lanjut + aksi lain --}}
                                    <button type="button"
                                        @click="$wire.openTl({{ $row->id }}); openTindak = true"
                                        class="inline-flex items-center justify-center gap-1 rounded-lg bg-amber-600 text-white px-3 py-2 hover:bg-amber-700 whitespace-nowrap shrink-0">
                                        <i class="bi bi-clipboard2-check"></i> Tindak Lanjut
                                    </button>

                                    @if($row->status !== 'selesai')
                                    <button type="button"
                                        wire:click="markSelesai({{ $row->id }})"
                                        class="inline-flex items-center justify-center gap-1 rounded-lg bg-emerald-600 text-white px-3 py-2 hover:bg-emerald-700 whitespace-nowrap shrink-0">
                                        <i class="bi bi-check2-circle"></i> Selesai
                                    </button>
                                    @endif

                                    <button type="button"
                                        @click="$wire.openEdit({{ $row->id }}); openModal = true"
                                        class="inline-flex items-center justify-center gap-1 rounded-lg bg-slate-100 px-3 py-2 hover:bg-slate-200 whitespace-nowrap shrink-0">
                                        <i class="bi bi-pencil"></i> Edit
                                    </button>

                                    <button type="button"
                                        wire:click="confirmDelete({{ $row->id }})"
                                        class="inline-flex items-center justify-center gap-1 rounded-lg bg-red-50 text-red-700 px-3 py-2 hover:bg-red-100 whitespace-nowrap shrink-0">
                                        <i class="bi bi-trash"></i> Hapus
                                    </button>

                                    @else
                                    {{-- Jenis RINGAN: TANPA Tindak Lanjut --}}
                                    @if($row->status !== 'selesai')
                                    <button type="button"
                                        wire:click="markSelesai({{ $row->id }})"
                                        class="inline-flex items-center justify-center gap-1 rounded-lg bg-emerald-600 text-white px-3 py-2 hover:bg-emerald-700 whitespace-nowrap shrink-0">
                                        <i class="bi bi-check2-circle"></i> Selesai
                                    </button>
                                    @endif

                                    <button type="button"
                                        @click="$wire.openEdit({{ $row->id }}); openModal = true"
                                        class="inline-flex items-center justify-center gap-1 rounded-lg bg-slate-100 px-3 py-2 hover:bg-slate-200 whitespace-nowrap shrink-0">
                                        <i class="bi bi-pencil"></i> Edit
                                    </button>

                                    <button type="button"
                                        wire:click="confirmDelete({{ $row->id }})"
                                        class="inline-flex items-center justify-center gap-1 rounded-lg bg-red-50 text-red-700 px-3 py-2 hover:bg-red-100 whitespace-nowrap shrink-0">
                                        <i class="bi bi-trash"></i> Hapus
                                    </button>
                                    @endif
                                </div>
                            </td>

                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="px-4 py-10 text-center text-slate-500">
                                Belum ada data pelanggaran.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

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

    {{-- Modal Create/Edit --}}
    <div x-cloak x-show="openModal" x-transition.opacity
        class="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
        <div @click.outside="$wire.closeModal()"
            class="w-full max-w-3xl 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" :class="$wire.modalMode === 'create' ? 'bi-plus-circle text-orange-600' : 'bi-pencil-square text-indigo-600'"></i>
                    <h3 class="font-medium" x-text="$wire.modalMode === 'create' ? 'Tambah Pelanggaran' : 'Ubah Pelanggaran'"></h3>
                </div>
                <button type="button" @click="$wire.closeModal()" class="text-slate-500 hover:text-slate-700">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <form wire:submit.prevent="{{ $modalMode === 'create' ? 'save' : 'update' }}" class="p-4 space-y-4">
                <div class="grid sm:grid-cols-2 gap-4">
                    {{-- Siswa --}}
                    <div x-data="{ open:false }" class="sm:col-span-2">
                        <label class="block text-sm mb-1">Siswa <span class="text-red-600">*</span></label>
                        <div class="relative">
                            <input type="text"
                                placeholder="Ketik nama atau NISN…"
                                x-on:focus="open = true"
                                x-on:click.outside="open = false"
                                wire:model.live="siswaKeyword"
                                class="w-full rounded-lg border {{ $errors->has('siswa_id') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-orange-500 focus:border-orange-500' }} px-3 py-2 text-sm"
                                autocomplete="off">
                            @if($siswaLabel)
                            <div class="absolute right-2 top-2 text-[11px] text-slate-500">
                                {{ $siswaLabel }}
                            </div>
                            @endif

                            {{-- Dropdown hasil --}}
                            <div x-show="open" x-transition
                                class="absolute z-50 mt-1 w-full rounded-lg border border-slate-200 bg-white shadow-lg max-h-56 overflow-auto">
                                @forelse($siswaOptions as $s)
                                <button type="button"
                                    class="w-full text-left px-3 py-2 hover:bg-slate-50 text-sm"
                                    wire:click="selectSiswa({{ $s->id }})"
                                    x-on:click="open = false">
                                    <div class="font-medium text-slate-800">{{ $s->nama }}</div>
                                    <div class="text-[11px] text-slate-500">NISN: {{ $s->nisn }}</div>
                                </button>
                                @empty
                                <div class="px-3 py-2 text-sm text-slate-500">Tidak ada hasil.</div>
                                @endforelse
                            </div>
                        </div>
                        @error('siswa_id') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror

                        {{-- Banner riwayat (3 kotak) --}}
                        <div class="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-2" x-show="$wire.siswa_id">
                            <div class="rounded-xl border px-3 py-2 text-sm border-emerald-200 bg-emerald-50 text-emerald-700">
                                <span class="font-semibold">Ringan:</span>
                                <span class="ml-1">{{ $ringanCount }} kali</span>
                            </div>
                            <div class="rounded-xl border px-3 py-2 text-sm border-amber-200 bg-amber-50 text-amber-700">
                                <span class="font-semibold">Sedang:</span>
                                <span class="ml-1">{{ $sedangCount }} kali</span>
                            </div>
                            <div class="rounded-xl border px-3 py-2 text-sm border-rose-200 bg-rose-50 text-rose-700">
                                <span class="font-semibold">Berat:</span>
                                <span class="ml-1">{{ $beratCount }} kali</span>
                            </div>
                        </div>
                    </div>

                    {{-- Periode --}}
                    <div>
                        <label class="block text-sm mb-1">Periode <span class="text-red-600">*</span></label>
                        <select wire:model.defer="periode_id"
                            class="w-full rounded-lg border {{ $errors->has('periode_id') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-orange-500 focus:border-orange-500' }} px-3 py-2 text-sm">
                            <option value="">— Pilih Periode —</option>
                            @foreach ($periodes as $p)
                            <option value="{{ $p->id }}">{{ $p->nama }}</option>
                            @endforeach
                        </select>
                        @error('periode_id') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
                    </div>

                    {{-- Jenis --}}
                    <div>
                        <label class="block text-sm mb-1">Jenis <span class="text-red-600">*</span></label>
                        <select wire:model.defer="jenis"
                            class="w-full rounded-lg border {{ $errors->has('jenis') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-orange-500 focus:border-orange-500' }} px-3 py-2 text-sm">
                            <option value="ringan">Ringan</option>
                            <option value="sedang">Sedang</option>
                            <option value="berat">Berat</option>
                        </select>
                        @error('jenis') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
                    </div>

                    {{-- Status --}}
                    <div>
                        <label class="block text-sm mb-1">Status <span class="text-red-600">*</span></label>
                        <select wire:model.defer="status"
                            class="w-full rounded-lg border {{ $errors->has('status') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-orange-500 focus:border-orange-500' }} px-3 py-2 text-sm">
                            <option value="diproses">Diproses</option>
                            <option value="selesai">Selesai</option>
                        </select>
                        @error('status') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
                    </div>

                    {{-- Surat Arahan (disembunyikan saat jenis = berat) --}}
                    <div x-show="$wire.jenis !== 'berat'" x-transition x-cloak>
                        <label class="block text-sm mb-1">Surat Arahan (pdf/jpg/png, maks 4MB)</label>
                        <input type="file" wire:model="surat_arahan" accept=".pdf,.jpg,.jpeg,.png"
                            :disabled="$wire.jenis === 'berat'"
                            class="w-full rounded-lg border-slate-300 focus:ring-orange-500 focus:border-orange-500">
                        @error('surat_arahan') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror

                        @if ($surat_arahan_old)
                        <div class="mt-1 text-xs">
                            <a href="{{ Storage::url($surat_arahan_old) }}" class="text-indigo-600 hover:underline" target="_blank">
                                <i class="bi bi-file-earmark-text"></i> Lihat file saat ini
                            </a>
                        </div>
                        @endif
                    </div>

                    {{-- Deskripsi --}}
                    <div class="sm:col-span-2">
                        <label class="block text-sm mb-1">Deskripsi <span class="text-red-600">*</span></label>
                        <textarea wire:model.defer="deskripsi" rows="4"
                            class="w-full rounded-lg border {{ $errors->has('deskripsi') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-orange-500 focus:border-orange-500' }} px-3 py-2 text-sm"
                            placeholder="Uraikan pelanggaran..."></textarea>
                        @error('deskripsi') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="flex items-center justify-end gap-2 pt-2">
                    <button type="button" @click="$wire.closeModal()"
                        class="rounded-lg bg-slate-100 px-3 py-2 text-sm hover:bg-slate-200">Batal</button>
                    <button type="submit"
                        class="inline-flex items-center gap-2 rounded-lg
                                   {{ $modalMode === 'create' ? 'bg-orange-600 hover:bg-orange-700' : 'bg-indigo-600 hover:bg-indigo-700' }}
                                   text-white px-4 py-2 transition"
                        wire:loading.attr="disabled">
                        <i class="bi" :class="$wire.modalMode === 'create' ? 'bi-save' : 'bi-check2-circle'"></i>
                        <span x-text="$wire.modalMode === 'create' ? 'Simpan' : 'Update'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Modal Tindak Lanjut --}}
    <div x-cloak x-show="openTindak" x-transition.opacity
        class="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
        <div @click.outside="$wire.closeModal()"
            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-clipboard2-check text-amber-600"></i>
                    <h3 class="font-medium">Tindak Lanjut Pelanggaran</h3>
                </div>
                <button type="button" @click="$wire.closeModal()" class="text-slate-500 hover:text-slate-700">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <form wire:submit.prevent="saveTl" class="p-4 space-y-4">
                <div class="grid gap-4">
                    <div>
                        <label class="block text-sm mb-1">Dokumentasi Tindak Lanjut (pdf/jpg/png, maks 4MB)</label>
                        <input type="file" wire:model="tl_file" accept=".pdf,.jpg,.jpeg,.png"
                            class="w-full rounded-lg border-slate-300 focus:ring-amber-500 focus:border-amber-500">
                        @error('tl_file') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror

                        @if ($tl_dokumentasi_old)
                        <div class="mt-1 text-xs">
                            <a href="{{ Storage::url($tl_dokumentasi_old) }}" class="text-orange-600 hover:underline" target="_blank">
                                <i class="bi bi-image"></i> Lihat dokumentasi saat ini
                            </a>
                        </div>
                        @endif
                    </div>

                    <div>
                        <label class="block text-sm mb-1">Catatan Hasil Tindak Lanjut (opsional)</label>
                        <textarea rows="3" wire:model.defer="tl_notes"
                            class="w-full rounded-lg border-slate-300 px-3 py-2 text-sm focus:ring-amber-500 focus:border-amber-500"
                            placeholder="Catatan ringkas hasil tindak lanjut..."></textarea>
                        @error('tl_notes') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
                    </div>

                    <label class="inline-flex items-center gap-2 text-sm">
                        <input type="checkbox" wire:model="tl_mark_done" class="rounded border-slate-300 text-amber-600 focus:ring-amber-500">
                        Tandai status sebagai <span class="font-medium text-emerald-700">Selesai</span>
                    </label>
                </div>

                <div class="flex items-center justify-end gap-2 pt-2">
                    <button type="button" @click="$wire.closeModal()"
                        class="rounded-lg bg-slate-100 px-3 py-2 text-sm hover:bg-slate-200">Batal</button>
                    <button type="submit"
                        class="inline-flex items-center gap-2 rounded-lg bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 transition"
                        wire:loading.attr="disabled">
                        <i class="bi bi-save2"></i> Simpan Tindak Lanjut
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Modal Detail --}}
    <div x-cloak x-show="openDetail" x-transition.opacity
        class="fixed inset-0 z-50 bg-black/40 flex items-end sm:items-center justify-center p-4">
        <div x-show="openDetail" x-transition
            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-eye text-slate-700"></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 sm:grid-cols-2 gap-4">
                    <div>
                        <div class="text-[11px] uppercase tracking-wide text-slate-500">Tanggal</div>
                        <div class="text-slate-700">{{ $detail['tanggal'] ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-[11px] uppercase tracking-wide text-slate-500">Periode</div>
                        <div class="text-slate-700">{{ $detail['periode'] ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-[11px] uppercase tracking-wide text-slate-500">Siswa</div>
                        <div class="font-medium">{{ $detail['siswa'] ?? '—' }}</div>
                        <div class="text-[12px] text-slate-500">NISN: {{ $detail['nisn'] ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-[11px] uppercase tracking-wide text-slate-500">Kelas</div>
                        <div class="text-slate-700">{{ $detail['kelas'] ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-[11px] uppercase tracking-wide text-slate-500">Jenis</div>
                        <div class="text-slate-700">{{ $detail['jenis'] ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-[11px] uppercase tracking-wide text-slate-500">Status</div>
                        <div class="text-slate-700">{{ $detail['status'] ?? '—' }}</div>
                    </div>
                </div>

                <div>
                    <div class="text-[11px] uppercase tracking-wide text-slate-500 mb-1">Deskripsi</div>
                    <div class="rounded-xl bg-slate-50 p-3 text-sm text-slate-700 whitespace-pre-line">
                        {{ $detail['deskripsi'] ?? '—' }}
                    </div>
                </div>

                <div class="grid sm:grid-cols-2 gap-3">
                    @if(!empty($detail['surat']))
                    <div class="rounded-xl border border-slate-200 p-3">
                        <div class="text-[11px] uppercase tracking-wide text-slate-500 mb-1">Surat Arahan</div>
                        <a href="{{ $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>
                    </div>
                    @endif

                    @if(!empty($detail['dokumentasi']))
                    <div class="rounded-xl border border-slate-200 p-3">
                        <div class="text-[11px] uppercase tracking-wide text-slate-500 mb-1">Dokumentasi TL</div>
                        <a href="{{ $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>
                    </div>
                    @endif
                </div>

                @if(!empty($detail['catatan_tl']))
                <div>
                    <div class="text-[11px] uppercase tracking-wide text-slate-500 mb-1">Catatan Tindak Lanjut</div>
                    <div class="rounded-xl bg-slate-50 p-3 text-sm text-slate-700 whitespace-pre-line">
                        {{ $detail['catatan_tl'] }}
                    </div>
                </div>
                @endif
            </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>

    {{-- Modal Delete --}}
    <div x-cloak x-show="openDelete" x-transition.opacity
        class="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
        <div @click.outside="$wire.closeDelete()"
            class="w-full max-w-sm rounded-2xl bg-white shadow-2xl ring-1 ring-slate-200 overflow-hidden">
            <div class="px-4 py-3 border-b border-slate-200">
                <h3 class="font-medium flex items-center gap-2">
                    <i class="bi bi-exclamation-triangle text-red-600"></i>
                    Konfirmasi Hapus
                </h3>
            </div>
            <div class="p-4 text-sm text-slate-700">
                Hapus data pelanggaran ini? Tindakan tidak dapat dibatalkan.
            </div>
            <div class="px-4 py-3 border-t border-slate-200 flex items-center justify-end gap-2">
                <button type="button" @click="$wire.closeDelete()"
                    class="rounded-lg bg-slate-100 px-3 py-2 text-sm hover:bg-slate-200">Batal</button>
                <button type="button" wire:click="delete"
                    class="inline-flex items-center gap-2 rounded-lg bg-red-600 text-white px-4 py-2 hover:bg-red-700 transition">
                    <i class="bi bi-trash"></i> Hapus
                </button>
            </div>
        </div>
    </div>
</div>