@extends('simaju.layouts.main')
@section('title', 'Absensi')
@section('page-title', 'Absensi')
@section('content')
<div class="flex justify-between items-center mb-6">
    <a href="{{ route('simaju.absensi.create') }}" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600">+ Input Absensi</a>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6">
    <form method="GET" class="flex gap-4 items-end">
        <div><label class="block text-sm text-gray-600 mb-1">Tanggal</label><input type="date" name="tanggal" value="{{ $tanggal }}" class="px-3 py-2 border rounded-lg"></div>
        <div><label class="block text-sm text-gray-600 mb-1">Kelas</label><select name="kelas_id" class="px-3 py-2 border rounded-lg"><option value="">Semua</option>@foreach($kelasList as $k)<option value="{{ $k->id }}" {{ $kelasId==$k->id?'selected':'' }}>{{ $k->nama_kelas }}</option>@endforeach</select></div>
        <button type="submit" class="px-4 py-2 bg-gray-800 text-white rounded-lg">Tampilkan</button>
    </form>
</div>

@if($stats && $stats->count() > 0)
<div class="grid grid-cols-4 gap-4 mb-6">
    <div class="bg-green-50 rounded-lg p-4 text-center"><p class="text-2xl font-bold text-green-600">{{ $stats['hadir'] ?? 0 }}</p><p class="text-sm text-gray-600">Hadir</p></div>
    <div class="bg-yellow-50 rounded-lg p-4 text-center"><p class="text-2xl font-bold text-yellow-600">{{ $stats['sakit'] ?? 0 }}</p><p class="text-sm text-gray-600">Sakit</p></div>
    <div class="bg-blue-50 rounded-lg p-4 text-center"><p class="text-2xl font-bold text-blue-600">{{ $stats['izin'] ?? 0 }}</p><p class="text-sm text-gray-600">Izin</p></div>
    <div class="bg-red-50 rounded-lg p-4 text-center"><p class="text-2xl font-bold text-red-600">{{ $stats['alfa'] ?? 0 }}</p><p class="text-sm text-gray-600">Alpha</p></div>
</div>
@endif

<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">Siswa</th><th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Kelas</th><th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Status</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">
            @forelse($absensis as $a)
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $a->siswa->nama }}</td>
                <td class="px-4 py-3 text-sm text-gray-500">{{ $a->kelas->nama_kelas }}</td>
                <td class="px-4 py-3"><span class="px-2 py-1 text-xs font-medium rounded-full {{ $a->status_badge_class }}">{{ $a->status_label }}</span></td>
                <td class="px-4 py-3"><form action="{{ route('simaju.absensi.destroy', $a->id) }}" method="POST">@csrf @method('DELETE')<button type="submit" class="p-1 text-red-600 hover:bg-red-50 rounded" onclick="return confirm('Hapus?')">Del</button></form></td>
            </tr>
            @empty
            <tr><td colspan="4" class="px-4 py-12 text-center text-gray-500">Tidak ada data</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@if($absensis->hasPages())<div class="mt-4">{{ $absensis->links() }}</div>@endif
@endsection