{{-- resources/views/livewire/siswa/dashboard.blade.php --}}
<div class="space-y-6">
    {{-- Header + Rentang + Periode --}}
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-xl font-semibold">Dashboard Siswa</h1>
            <p class="text-xs text-slate-500">Ringkasan pelanggaran pribadi</p>
        </div>

        <div class="flex items-center gap-2 text-sm">
            {{-- Rentang --}}
            <div class="flex items-center gap-1">
                <span class="text-slate-500 mr-1">Rentang:</span>
                @foreach (['7'=>'7H','30'=>'30H','90'=>'90H','365'=>'1T','all'=>'Semua'] as $k => $label)
                    <button
                        wire:click="setRange('{{ $k }}')"
                        class="px-2.5 py-1 rounded-lg border transition
                        {{ $range === (string)$k ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-700 border-slate-200 hover:bg-slate-50' }}">
                        {{ $label }}
                    </button>
                @endforeach
            </div>

            {{-- Periode --}}
            <label class="relative ml-2">
                <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-indigo-500 focus:border-indigo-500">
                    <option value="">Semua Periode</option>
                    @foreach ($periodes as $p)
                        <option value="{{ $p->id }}">{{ $p->nama }}</option>
                    @endforeach
                </select>
            </label>
        </div>
    </div>

    {{-- Kartu Ringkasan --}}
    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
            <div class="text-slate-500 text-xs">Total Pelanggaran</div>
            <div class="mt-1 flex items-center gap-2">
                <i class="bi bi-collection text-indigo-600"></i>
                <div class="text-2xl font-semibold text-slate-800">{{ $total ?? 0 }}</div>
            </div>
        </div>
        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
            <div class="text-slate-500 text-xs">Status: Diproses</div>
            <div class="mt-1 flex items-center gap-2">
                <i class="bi bi-hourglass-split text-amber-600"></i>
                <div class="text-2xl font-semibold text-slate-800">{{ $byStatus['diproses'] ?? 0 }}</div>
            </div>
        </div>
        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
            <div class="text-slate-500 text-xs">Status: Selesai</div>
            <div class="mt-1 flex items-center gap-2">
                <i class="bi bi-check2-circle text-emerald-600"></i>
                <div class="text-2xl font-semibold text-slate-800">{{ $byStatus['selesai'] ?? 0 }}</div>
            </div>
        </div>
        <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
            <div class="text-slate-500 text-xs">Jenis: Berat</div>
            <div class="mt-1 flex items-center gap-2">
                <i class="bi bi-exclamation-triangle-fill text-rose-600"></i>
                <div class="text-2xl font-semibold text-slate-800">{{ $byJenis['berat'] ?? 0 }}</div>
            </div>
        </div>
    </div>

    {{-- Biodata --}}
    <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
        <div class="flex items-center justify-between">
            <div class="font-medium text-slate-800">Biodata</div>
            @if(!$linked)
                <span class="inline-flex items-center gap-1 text-xs rounded-full px-2 py-0.5 bg-amber-100 text-amber-700">
                    <i class="bi bi-info-circle"></i> Belum Terhubung
                </span>
            @endif
        </div>
        <div class="mt-3 grid sm:grid-cols-3 text-sm gap-y-2">
            <div>
                <div class="text-slate-500">Nama</div>
                <div class="font-medium text-slate-800">{{ $biodata['nama'] ?? '—' }}</div>
            </div>
            <div>
                <div class="text-slate-500">NISN</div>
                <div class="font-medium text-slate-800">{{ $biodata['nisn'] ?? '—' }}</div>
            </div>
            <div>
                <div class="text-slate-500">Kelas</div>
                <div class="font-medium text-slate-800">{{ $biodata['kelas'] ?? '—' }}</div>
            </div>
        </div>

        @unless($linked)
            <div class="mt-4 rounded-lg bg-amber-50 text-amber-800 p-3 text-sm">
                Akun Anda belum terhubung ke data siswa (pemetaan <em>nomor_induk</em> ↔ <em>NISN</em> tidak ditemukan).
                Silakan hubungi admin.
            </div>
        @endunless
    </div>

    {{-- Jadwal Konseling --}}
    <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
        <div class="flex items-center justify-between mb-3">
            <div class="font-medium text-slate-800">Jadwal Konseling Saya</div>
            <a href="{{ route('siswa.konseling') }}" class="text-xs text-indigo-600 hover:underline">Lihat semua</a>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 text-left sticky top-0">
                    <tr>
                        <th class="px-3 py-2 font-medium text-slate-600 w-48">Tanggal</th>
                        <th class="px-3 py-2 font-medium text-slate-600">Judul</th>
                        <th class="px-3 py-2 font-medium text-slate-600 w-40">Kategori</th>
                        <th class="px-3 py-2 font-medium text-slate-600 w-28">Status</th>
                        <th class="px-3 py-2 font-medium text-slate-600">Catatan</th>
                        <th class="px-3 py-2 font-medium text-slate-600 w-24">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($jadwal as $j)
                        <tr class="hover:bg-slate-50">
                            <td class="px-3 py-2 text-slate-700">
                                {{ \Illuminate\Support\Carbon::parse($j->tanggal_pertemuan)->format('d M Y H:i') }}
                            </td>
                            <td class="px-3 py-2">
                                <div class="text-slate-800 font-medium line-clamp-2">{{ $j->konseling->judul ?? '—' }}</div>
                            </td>
                            <td class="px-3 py-2">
                                <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold bg-indigo-100 text-indigo-700">
                                    {{ $j->konseling->kategori->nama ?? '—' }}
                                </span>
                            </td>
                            <td class="px-3 py-2">
                                <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold
                                    {{ $j->status === 'selesai' ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                                    <span class="w-1.5 h-1.5 rounded-full mr-1.5 {{ $j->status === 'selesai' ? 'bg-emerald-600' : 'bg-amber-600' }}"></span>
                                    {{ ucfirst($j->status) }}
                                </span>
                            </td>
                            <td class="px-3 py-2">
                                <div class="text-slate-600 line-clamp-2">{{ $j->catatan ?? '—' }}</div>
                            </td>
                            <td class="px-3 py-2">
                                <a href="{{ route('siswa.konseling.hasil', $j->konseling_id) }}"
                                   class="inline-flex items-center gap-1 text-xs text-indigo-600 hover:underline">
                                    <i class="bi bi-arrow-right-circle"></i> Detail
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-slate-500">
                                Belum ada jadwal konseling mendatang.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Tren 6 bulan 
    <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
        <div class="font-medium text-slate-800 mb-3">
            Tren Pelanggaran — 6 Bulan Terakhir
            @if($filterPeriode)
                <span class="text-slate-500 font-normal"> (Periode: {{ optional($periodes->firstWhere('id',$filterPeriode))->nama }})</span>
            @endif
        </div>
        <div class="h-40 flex items-end gap-3">
            @forelse ($trend as $t)
                @php $h = $trendMax ? max(6, round(($t['count']/$trendMax)*100)) : 6; @endphp
                <div class="flex flex-col items-center gap-1 w-10">
                    <div class="w-full rounded-t-md bg-gradient-to-t from-indigo-300 to-indigo-100" style="height: {{ $h }}%"></div>
                    <div class="text-[10px] text-slate-500">{{ $t['label'] }}</div>
                    <div class="text-[11px] font-medium text-slate-700">{{ $t['count'] }}</div>
                </div>
            @empty
                <div class="text-sm text-slate-500">Belum ada data pada 6 bulan terakhir.</div>
            @endforelse
        </div>
    </div>
    --}}

    {{-- Daftar Pelanggaran --}}
    <div class="rounded-2xl bg-white ring-1 ring-slate-200 p-4">
        <div class="flex items-center justify-between mb-3">
            <div class="font-medium text-slate-800">
                Pelanggaran Saya
                @if($filterPeriode)
                    <span class="text-slate-500 font-normal">— Periode:
                        {{ optional($periodes->firstWhere('id',$filterPeriode))->nama }}
                    </span>
                @endif
            </div>
            <div class="text-sm">
                <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 deskripsi / jenis / status…"
                        class="w-64 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                </label>
            </div>
        </div>

        @if ($linked)
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead class="bg-slate-50 text-left sticky top-0">
                        <tr>
                            <th class="px-3 py-2 font-medium text-slate-600 w-14">#</th>
                            <th class="px-3 py-2 font-medium text-slate-600 w-44">Tanggal</th>
                            <th class="px-3 py-2 font-medium text-slate-600 w-32">Jenis</th>
                            <th class="px-3 py-2 font-medium text-slate-600 w-32">Status</th>
                            <th class="px-3 py-2 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">
                                <td class="px-3 py-2 text-slate-500">
                                    {{ ($items->currentPage()-1)*$items->perPage() + $i + 1 }}
                                </td>
                                <td class="px-3 py-2 text-slate-700">
                                    {{ \Illuminate\Support\Carbon::parse($row->created_at)->format('d M Y H:i') }}
                                </td>
                                <td class="px-3 py-2">
                                    <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-3 py-2">
                                    <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-3 py-2">
                                    <div class="text-slate-700 line-clamp-2">{{ $row->deskripsi }}</div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-4 py-10 text-center text-slate-500">Tidak ada data.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="px-1 pt-3">
                {{ is_a($items, \Illuminate\Contracts\Pagination\Paginator::class) ? $items->links() : '' }}
            </div>
        @endif
    </div>
</div>