@extends('simaju.layouts.main')
@section('title', 'Daftar Siswa')
@section('page-title', 'Daftar Siswa - ' . ($kelas->nama_kelas ?? ''))
@section('content')
<!-- Header -->
<div class="mb-6">
    <div class="flex items-center gap-4">
        <a href="{{ route('simaju.guru-wali.dashboard', $kelas->waliKelas->id) }}" class="p-2 hover:bg-gray-100 rounded-lg">
            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
        </a>
        <div>
            <h2 class="text-xl font-semibold text-gray-800">Daftar Siswa {{ $kelas->nama_kelas }}</h2>
            <p class="text-sm text-gray-500">Wali Kelas: {{ $kelas->waliKelas->nama ?? '-' }}</p>
        </div>
    </div>
</div>

<!-- Search -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6">
    <form method="GET" class="flex gap-4">
        <div class="flex-1">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama atau NIS..." class="w-full px-4 py-2 border rounded-lg">
        </div>
        <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600">Cari</button>
        <a href="{{ route('simaju.guru-wali.siswa', $kelas->waliKelas->id) }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">Reset</a>
    </form>
</div>

<!-- Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">No</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Nama</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">NIS</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">JK</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Tempat, Tgl Lahir</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            @forelse($siswas as $i => $s)
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-3 text-sm">{{ $siswas->firstItem() + $i }}</td>
                <td class="px-4 py-3">
                    <div class="font-medium text-gray-900">{{ $s->nama }}</div>
                </td>
                <td class="px-4 py-3 text-sm">{{ $s->nis }}</td>
                <td class="px-4 py-3 text-sm">{{ $s->jk == 'L' ? 'Laki-laki' : 'Perempuan' }}</td>
                <td class="px-4 py-3 text-sm">{{ $s->tempat_lahir }}, {{ $s->tanggal_lahir ? $s->tanggal_lahir->format('d/m/Y') : '-' }}</td>
                <td class="px-4 py-3">
                    <a href="{{ route('simaju.guru-wali.siswa-detail', [$kelas->waliKelas->id, $s->id]) }}" class="text-primary hover:text-blue-600 text-sm font-medium">Detail</a>
                </td>
            </tr>
            @empty
            <tr><td colspan="6" class="px-4 py-12 text-center text-gray-500">Tidak ada data siswa</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@if($siswas->hasPages())<div class="mt-4">{{ $siswas->links() }}</div>@endif
@endsection