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

<div x-data="{
        openModal: @entangle('showModal'),
        openDelete: @entangle('showDelete'),
        openTindak: @entangle('showTlModal'),
        openDetail: @entangle('showDetail'),
        siswaOpen: false,
    }" 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 Berat</h1>
            <p class="text-xs text-slate-500">Kelola data pelanggaran berat siswa (hanya Surat & Tindak Lanjut)</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>

            {{-- (Disembunyikan) Jenis --}}

            {{-- 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>

            {{-- Filter Tanggal Dari–Sampai --}}
            <div class="flex items-center gap-2">
                <label class="text-xs text-slate-600">Dari</label>
                <input type="date" wire:model.live="dateFrom"
                       class="rounded-lg border-slate-300 px-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500">
                <label class="text-xs text-slate-600">Sampai</label>
                <input type="date" wire:model.live="dateTo"
                       class="rounded-lg border-slate-300 px-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500">
            </div>

            {{-- Toggle tambahan --}}
            <label class="inline-flex items-center gap-2 text-xs px-2 py-1 rounded-lg bg-slate-50 border border-slate-200">
                <input type="checkbox" wire:model.live="onlyWithSurat" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                Punya Surat
            </label>
            <label class="inline-flex items-center gap-2 text-xs px-2 py-1 rounded-lg bg-slate-50 border border-slate-200">
                <input type="checkbox" wire:model.live="onlyWithTl" class="rounded border-slate-300 text-amber-600 focus:ring-amber-500">
                Punya Tindak Lanjut
            </label>
        </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 --}}
    <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)
                            @php
                                $hasSurat = !empty($row->surat_arahan);
                                $hasTl    = !empty($row->dokumentasi_tindak_lanjut) || !empty($row->catatan_hasil_tindak_lanjut);
                                $isDone   = $row->status === 'selesai';
                            @endphp
                            <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">
                                        {{-- Berikan/Ganti Surat (jika belum selesai) --}}
                                        @if(!$isDone)
                                          <button type="button"
                                                  @click="$wire.openSurat({{ $row->id }}); openModal = true; openTindak=false; openDelete=false; openDetail=false;"
                                                  class="inline-flex items-center justify-center gap-1 rounded-lg bg-orange-600 hover:bg-orange-700 text-white px-3 py-2 whitespace-nowrap shrink-0">
                                              <i class="bi bi-send-check"></i> {{ $hasSurat ? 'Ganti Surat' : 'Berikan Surat' }}
                                          </button>
                                        @endif

                                        {{-- Tindak Lanjut (jika belum selesai) --}}
                                        @if(!$isDone)
                                          <button type="button"
                                                  @click="$wire.openTl({{ $row->id }}); openTindak = true; openModal=false; openDelete=false; openDetail=false;"
                                                  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>
                                        @endif

                                        {{-- Detail (selalu) --}}
                                        <button type="button"
                                                @click="$wire.openDetail({{ $row->id }}); openDetail = true; openModal=false; openTindak=false; openDelete=false;"
                                                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>
                                    </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 Surat Arahan --}}
    <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="openModal = false"
             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 bi-send-check text-orange-600"></i>
                    <h3 class="font-medium">Berikan / Ganti Surat Arahan</h3>
                </div>
                <button type="button" @click="openModal = false" class="text-slate-500 hover:text-slate-700">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <form wire:submit.prevent="updateSurat" class="p-4 space-y-4">
                <div class="grid sm:grid-cols-2 gap-4">
                    {{-- Siswa: readonly --}}
                    <div class="sm:col-span-2">
                        <label class="block text-sm mb-1">Siswa</label>
                        <input type="text"
                               :value="$wire.siswaLabel"
                               class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm"
                               disabled>
                    </div>

                    {{-- Tanggal (readonly) --}}
                    <div>
                        <label class="block text-sm mb-1">Tanggal</label>
                        <input type="text" value="{{ $recordTime }}"
                               class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm" disabled>
                    </div>

                    {{-- Periode (readonly) --}}
                    <div>
                        <label class="block text-sm mb-1">Periode</label>
                        <input type="text" value="{{ $periodeLabel }}"
                               class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm" disabled>
                    </div>

                    {{-- Status (readonly) --}}
                    <div>
                        <label class="block text-sm mb-1">Status</label>
                        <input type="text" value="{{ $statusLabel }}"
                               class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm" disabled>
                    </div>

                    {{-- Deskripsi (readonly) --}}
                    <div class="sm:col-span-2">
                        <label class="block text-sm mb-1">Deskripsi</label>
                        <textarea rows="4" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm"
                                  disabled>{{ $deskripsiPreview }}</textarea>
                    </div>

                    {{-- Surat Arahan --}}
                    <div class="sm:col-span-2">
                        <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"
                               required
                               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 surat sekarang
                                </a>
                            </div>
                        @endif

                        <p class="text-[11px] text-slate-500 mt-1">
                            Mode ini hanya untuk unggah/ganti Surat Arahan. Field lain dikunci.
                        </p>
                    </div>
                </div>

                <div class="flex items-center justify-end gap-2 pt-2">
                    <button type="button" @click="openModal = false"
                            class="rounded-lg bg-slate-100 px-3 py-2 text-sm hover:bg-slate-200">Tutup</button>

                    <button type="submit"
                            class="inline-flex items-center gap-2 rounded-lg text-white px-4 py-2 transition bg-orange-600 hover:bg-orange-700">
                        <i class="bi bi-check2-circle"></i>
                        Update Surat
                    </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="openTindak = false"
             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="openTindak = false" 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="openTindak = false"
                            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-4 text-sm">
                @if ($detail)
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <div class="text-slate-500">Tanggal</div>
                            <div class="font-medium text-slate-800">{{ $detail['tanggal'] ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-slate-500">Periode</div>
                            <div class="font-medium text-slate-800">{{ $detail['periode'] ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-slate-500">Siswa</div>
                            <div class="font-medium text-slate-800">{{ $detail['siswa'] ?? '—' }}</div>
                            <div class="text-xs text-slate-500">{{ $detail['nisn'] ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-slate-500">Kelas</div>
                            <div class="font-medium text-slate-800">{{ $detail['kelas'] ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-slate-500">Jenis</div>
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold"
                                  @class([
                                      'bg-emerald-100 text-emerald-700' => ($detail['jenis'] ?? '') === 'Ringan',
                                      'bg-amber-100 text-amber-700'     => ($detail['jenis'] ?? '') === 'Sedang',
                                      'bg-rose-100 text-rose-700'       => ($detail['jenis'] ?? '') === 'Berat',
                                  ])>
                                {{ $detail['jenis'] ?? '—' }}
                            </span>
                        </div>
                        <div>
                            <div class="text-slate-500">Status</div>
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold"
                                  @class([
                                      'bg-amber-100 text-amber-700'    => ($detail['status'] ?? '') === 'Diproses',
                                      'bg-emerald-100 text-emerald-700'=> ($detail['status'] ?? '') === 'Selesai',
                                  ])>
                                {{ $detail['status'] ?? '—' }}
                            </span>
                        </div>
                    </div>

                    <div>
                        <div class="text-slate-500">Deskripsi</div>
                        <div class="mt-1 whitespace-pre-line text-slate-800">{{ $detail['deskripsi'] ?? '—' }}</div>
                    </div>

                    <div class="flex flex-wrap items-center gap-6">
                        <div>
                            <div class="text-slate-500">Surat Arahan</div>
                            @if (!empty($detail['surat']))
                                <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>
                            @else
                                <div class="text-slate-400">—</div>
                            @endif
                        </div>
                        <div>
                            <div class="text-slate-500">Dokumentasi Tindak Lanjut</div>
                            @if (!empty($detail['dokumentasi']))
                                <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>
                            @else
                                <div class="text-slate-400">—</div>
                            @endif
                        </div>
                    </div>

                    @if (!empty($detail['catatan_tl']))
                        <div>
                            <div class="text-slate-500">Catatan Tindak Lanjut</div>
                            <div class="mt-1 whitespace-pre-line text-slate-800">{{ $detail['catatan_tl'] }}</div>
                        </div>
                    @endif
                @else
                    <div class="text-slate-500">Tidak ada data untuk ditampilkan.</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 (dinonaktifkan dari UI, disisakan agar aman jika terpanggil) --}}
    <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="openDelete = false"
             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 (Dinonaktifkan)
                </h3>
            </div>
            <div class="p-4 text-sm text-slate-700">
                Hapus data tidak diizinkan pada menu ini.
            </div>
            <div class="px-4 py-3 border-t border-slate-200 flex items-center justify-end gap-2">
                <button type="button" @click="openDelete = false"
                        class="rounded-lg bg-slate-100 px-3 py-2 text-sm hover:bg-slate-200">Tutup</button>
            </div>
        </div>
    </div>
</div>