@extends('layouts.admin')
@section('title', 'Data Kelas')
@section('page-title', 'Data Kelas')
@section('page-actions')
    <div class="flex flex-wrap items-center gap-2">
        <x-button href="{{ route('admin.kelas.import-template') }}" variant="ghost">Unduh Template Excel</x-button>
        <x-button type="button" variant="secondary" id="btnOpenImportKelasModal">Import Excel</x-button>
    </div>
@endsection
@section('admin-content')
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
    <form method="GET" class="flex gap-2">
        <input type="text" name="search" placeholder="Cari tingkat / nama kelas / wali kelas..." 
               value="{{ request('search') }}" 
               class="rounded-xl border border-slate-200 px-4 py-2 text-sm w-72">
        <x-button type="submit" variant="secondary">Cari</x-button>
        @if(request('search'))
            <a href="{{ route('admin.kelas.index') }}" class="inline-flex items-center rounded-xl border px-4 py-2 text-sm">Reset</a>
        @endif
    </form>
</div>
<x-table title="Daftar Kelas" subtitle="Tambah data kelas lewat impor Excel; ubah atau hapus lewat tabel.">
    <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">Tingkat</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Nama Kelas</th>
                <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Wali 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($kelas as $k)
            <tr class="hover:bg-slate-50/70">
                <td class="px-5 py-3 text-sm font-semibold text-slate-900">{{ $k->tingkat }}</td>
                <td class="px-5 py-3 text-sm text-slate-800">{{ $k->nama_kelas }}</td>
                <td class="px-5 py-3 text-sm text-slate-600">{{ $k->waliKelas?->nama_lengkap ?? '-' }}</td>
                <td class="px-5 py-3 text-sm">
                    <a href="{{ route('admin.kelas.edit', $k) }}" class="font-semibold text-ink-700 hover:text-ink-900">Edit</a>
                    <form action="{{ route('admin.kelas.destroy', $k) }}" method="POST" class="inline" onsubmit="return confirm('Hapus?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="ml-3 font-semibold text-rose-700 hover:text-rose-900">Hapus</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</x-table>
<!-- modal import -->
@endsection