@extends('layouts.admin')
@section('title', 'Data Siswa')
@section('page-title', 'Data Siswa')
@section('page-actions')
    <div class="flex flex-wrap items-center gap-2">
        <x-button href="{{ route('admin.siswa.import-template') }}" variant="ghost">Unduh Template Excel</x-button>
        <x-button href="{{ route('admin.siswa.create') }}" variant="ghost">Form Tambah Siswa</x-button>
        <x-button type="button" variant="secondary" id="btnOpenImportModal">Import Excel</x-button>
    </div>
@endsection
@section('admin-content')
<form method="GET" class="mb-4 flex flex-wrap gap-3 items-end">
    <div>
        <label class="block text-xs font-bold uppercase text-slate-500">Filter Kelas</label>
        <select name="kelas_id" class="rounded-xl border px-3 py-2 text-sm">
            <option value="">Semua Kelas</option>
            @foreach($kelasList as $k)
                <option value="{{ $k->id }}" @selected($kelasId == $k->id)>{{ $k->tingkat }} {{ $k->nama_kelas }}</option>
            @endforeach
        </select>
    </div>
    <div>
        <label class="block text-xs font-bold uppercase text-slate-500">Urutkan</label>
        <select name="sort_by" class="rounded-xl border px-3 py-2 text-sm">
            <option value="nama_lengkap" @selected($sortBy == 'nama_lengkap')>Nama (A-Z)</option>
            <option value="nis" @selected($sortBy == 'nis')>NIS</option>
            <option value="kelas_id" @selected($sortBy == 'kelas_id')>Kelas</option>
        </select>
    </div>
    <div>
        <label class="block text-xs font-bold uppercase text-slate-500">Arah</label>
        <select name="order" class="rounded-xl border px-3 py-2 text-sm">
            <option value="asc" @selected($order == 'asc')>Naik</option>
            <option value="desc" @selected($order == 'desc')>Turun</option>
        </select>
    </div>
    <div>
        <label class="block text-xs font-bold uppercase text-slate-500">Cari</label>
        <input type="text" name="search" placeholder="NIS / Nama" value="{{ request('search') }}" 
               class="rounded-xl border px-3 py-2 text-sm w-48">
    </div>
    <x-button type="submit" variant="secondary">Terapkan</x-button>
    <a href="{{ route('admin.siswa.index') }}" class="inline-flex items-center rounded-xl border px-4 py-2 text-sm">Reset</a>
</form>
<x-table title="Daftar Siswa" subtitle="Kelola data siswa dan akun login.">
    <table class="min-w-full divide-y divide-slate-200">
        <thead class="bg-slate-50">
            <tr>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">NIS</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Nama</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Kelas</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
            @foreach($siswas as $s)
            <tr class="hover:bg-slate-50/70">
                <td class="px-5 py-3 text-sm font-semibold text-slate-900">{{ $s->nis }}</td>
                <td class="px-5 py-3 text-sm text-slate-800">{{ $s->nama_lengkap }}</td>
                <td class="px-5 py-3 text-sm text-slate-600">{{ $s->kelas ? $s->kelas->tingkat.' - '.$s->kelas->nama_kelas : '-' }}</td>
                <td class="px-5 py-3">
                    <a href="{{ route('admin.siswa.edit', $s) }}" class="text-sm font-semibold text-ink-700 hover:text-ink-900">Edit</a>
                    <form action="{{ route('admin.siswa.destroy', $s) }}" method="POST" class="inline" onsubmit="return confirm('Hapus?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="ml-3 text-sm font-semibold text-rose-700 hover:text-rose-900">Hapus</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</x-table>
@endsection