@extends('layouts.guru')
@section('title', 'Laporan Absensi')
@section('page-title', 'Laporan Absensi')
@section('guru-content')
<x-card title="Filter Kelas" subtitle="Pilih kelas wali untuk menampilkan daftar siswa.">
    <form method="GET" class="grid grid-cols-1 gap-3 md:grid-cols-3">
        <div>
            <label class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">Kelas</label>
            <select
                name="kelas_id"
                class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none transition focus:border-brand-400 focus:ring-4 focus:ring-brand-200"
            >
                @foreach($kelasList as $kelas)
                    <option value="{{ $kelas->id }}" @selected((int) request('kelas_id', $selectedKelas->id) === $kelas->id)>
                        {{ $kelas->tingkat }} {{ $kelas->nama_kelas }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="flex items-end gap-2 md:col-span-2 md:justify-end">
            <x-button type="submit" variant="primary">Terapkan Filter</x-button>
            <x-button
                href="{{ route('guru.laporan.export', ['kelas_id' => request('kelas_id', $selectedKelas->id)]) }}"
                variant="secondary"
            >
                Export Excel
            </x-button>
        </div>
    </form>
</x-card>

<div class="mt-6">
<x-table title="Daftar Siswa" subtitle="Kelas {{ $selectedKelas->tingkat }} {{ $selectedKelas->nama_kelas }}">
    <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">No</th>
                <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">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
            @forelse($siswas as $i => $siswa)
                <tr class="hover:bg-slate-50/70">
                    <td class="px-5 py-3 text-sm text-slate-600">{{ $siswas->firstItem() + $i }}</td>
                    <td class="px-5 py-3 text-sm font-semibold text-slate-900">{{ $siswa->nis }}</td>
                    <td class="px-5 py-3 text-sm text-slate-800">{{ $siswa->nama_lengkap }}</td>
                    <td class="px-5 py-3 text-sm">
                        <x-button
                            href="{{ route('guru.laporan.show', ['siswa' => $siswa->nis]) }}"
                            variant="secondary"
                            size="sm"
                        >
                            Lihat Laporan Absensi
                        </x-button>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="px-5 py-6 text-center text-sm text-slate-500">
                        Tidak ada siswa pada kelas ini.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</x-table>
</div>
<div class="mt-4">{{ $siswas->links() }}</div>
@endsection