{{-- Pastikan Bootstrap Icons & Alpine ada di layout --}}
{{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> --}}
{{-- <script src="https://unpkg.com/alpinejs" defer></script> --}}

@php use Illuminate\Support\Str; @endphp

<div x-data="{ openDetail: @entangle('showDetail') }" class="space-y-6">

    {{-- Header & Filters --}}
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-xl font-semibold">Konseling Siswa</h1>
            <p class="text-xs text-slate-500">Semua pengajuan konseling dari 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 judul / deskripsi / siswa…"
                    class="w-64 rounded-lg border border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500">
            </label>

            {{-- Filter Kategori --}}
            <label class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                    <i class="bi bi-filter"></i>
                </span>
                <select wire:model.live="filterKategori"
                    class="w-56 rounded-lg border border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500">
                    <option value="">Semua Kategori</option>
                    @foreach ($categories as $c)
                        <option value="{{ $c->id }}">{{ $c->nama }}</option>
                    @endforeach
                </select>
            </label>

            {{-- Filter 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-56 rounded-lg border 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>

            {{-- Tanggal Dari --}}
            <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>
                <input type="date" wire:model.live="dateFrom"
                    class="w-44 rounded-lg border border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500"
                    placeholder="Dari">
            </label>

            {{-- Tanggal Sampai --}}
            <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>
                <input type="date" wire:model.live="dateTo"
                    class="w-44 rounded-lg border border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500"
                    placeholder="Sampai">
            </label>

            {{-- Clear Filters --}}
            <button type="button"
                wire:click="$set('search','');$set('filterKategori',null);$set('filterKelas',null);$set('dateFrom',null);$set('dateTo',null)"
                class="inline-flex items-center gap-1 rounded-lg bg-slate-100 px-3 py-2 text-sm hover:bg-slate-200">
                <i class="bi bi-x-circle"></i> Reset
            </button>
        </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-16">#</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">Kategori</th>
                        <th class="px-4 py-3 font-medium text-slate-600">Judul</th>
                        <th class="px-4 py-3 font-medium text-slate-600 w-28">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="flex items-center gap-2">
                                    <img class="h-7 w-7 rounded-full ring-1 ring-slate-200"
                                        src="https://ui-avatars.com/api/?background=ea580c&color=fff&name={{ urlencode($row->siswa->pengguna->nama ?? $row->siswa->username) }}"
                                        alt="avatar">
                                    <div class="min-w-0">
                                        <div class="font-medium truncate">{{ $row->siswa->pengguna->nama ?? '—' }}</div>
                                        <div class="text-[11px] text-slate-500 truncate">{{ '@'.$row->siswa->username }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3">{{ $row->siswa->pengguna->kelas->nama ?? '—' }}</td>
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center rounded-full bg-orange-100 px-2 py-0.5 text-[11px] font-semibold text-orange-700">
                                    {{ $row->kategori->nama ?? '—' }}
                                </span>
                            </td>
                            <td class="px-4 py-3 font-medium">{{ $row->judul }}</td>
                            <td class="px-4 py-3">
                                <a href="{{ route('guru_bk.konseling.detail', $row->id) }}"
                                    class="inline-flex items-center gap-1 rounded-lg bg-slate-100 px-3 py-1.5 hover:bg-slate-200 transition">
                                    <i class="bi bi-eye"></i> Detail
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-10 text-center text-slate-500">
                                Belum ada data konseling.
                            </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-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-journal-text text-orange-600"></i>
                    <h3 class="font-medium">Detail Konseling</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">
                <div class="grid sm:grid-cols-2 gap-4">
                    <div>
                        <div class="text-[11px] uppercase tracking-wide text-slate-500">Siswa</div>
                        <div class="font-medium">{{ $detail['siswa']['nama'] ?? '—' }}</div>
                        <div class="text-[12px] text-slate-500">
                            {{ '@'.($detail['siswa']['username'] ?? '—') }} • {{ $detail['siswa']['kelas'] ?? '—' }}
                        </div>
                    </div>
                    <div>
                        <div class="text-[11px] uppercase tracking-wide text-slate-500">Kategori</div>
                        <div class="inline-flex items-center rounded-full bg-orange-100 px-2 py-0.5 text-[11px] font-semibold text-orange-700">
                            {{ $detail['kategori'] ?? '—' }}
                        </div>
                    </div>
                    <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">Judul</div>
                        <div class="font-medium text-slate-800">{{ $detail['judul'] ?? '—' }}</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>

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