@extends('simaju.layouts.main')
@section('title', 'Rekap Absensi')
@section('page-title', 'Rekap Absensi')
@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">Rekap Absensi {{ $kelas->nama_kelas }}</h2>
            <p class="text-sm text-gray-500">Wali Kelas: {{ $kelas->waliKelas->nama ?? '-' }}</p>
        </div>
    </div>
</div>

<!-- Summary Cards -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-green-50 border border-green-200 rounded-xl p-4 text-center">
        <p class="text-3xl font-bold text-green-600">{{ $summary['hadir'] ?? 0 }}</p>
        <p class="text-sm text-green-800">Hadir</p>
    </div>
    <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 text-center">
        <p class="text-3xl font-bold text-yellow-600">{{ $summary['sakit'] ?? 0 }}</p>
        <p class="text-sm text-yellow-800">Sakit</p>
    </div>
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 text-center">
        <p class="text-3xl font-bold text-blue-600">{{ $summary['izin'] ?? 0 }}</p>
        <p class="text-sm text-blue-800">Izin</p>
    </div>
    <div class="bg-red-50 border border-red-200 rounded-xl p-4 text-center">
        <p class="text-3xl font-bold text-red-600">{{ $summary['alpha'] ?? 0 }}</p>
        <p class="text-sm text-red-800">Alpha</p>
    </div>
</div>

<!-- Filter -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Bulan</label>
            <select name="bulan" class="w-full px-3 py-2 border rounded-lg">
                <option value="">Semua Bulan</option>
                @foreach(['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'] as $i => $bulan)
                <option value="{{ $i+1 }}" {{ request('bulan') == $i+1 ? 'selected' : '' }}>{{ $bulan }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Tahun</label>
            <input type="number" name="tahun" value="{{ request('tahun', now()->year) }}" class="w-full px-3 py-2 border rounded-lg">
        </div>
        <div class="flex items-end gap-2">
            <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-blue-600">Filter</button>
            <a href="{{ route('simaju.guru-wali.rekap-absensi', $kelas->waliKelas->id) }}" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">Reset</a>
        </div>
    </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">Tanggal</th>
                <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">NIS</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">Keterangan</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            @forelse($absensis as $a)
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-3 text-sm">{{ $a->tanggal->format('d/m/Y') }}</td>
                <td class="px-4 py-3 text-sm font-medium">{{ $a->siswa->nama ?? '-' }}</td>
                <td class="px-4 py-3 text-sm text-gray-500">{{ $a->siswa->nis ?? '-' }}</td>
                <td class="px-4 py-3">
                    @php
                        $badge = ['hadir' => 'bg-green-100 text-green-800', 'sakit' => 'bg-yellow-100 text-yellow-800', 'izin' => 'bg-blue-100 text-blue-800', 'alpha' => 'bg-red-100 text-red-800'];
                        $label = ['hadir' => 'Hadir', 'sakit' => 'Sakit', 'izin' => 'Izin', 'alpha' => 'Alpha'];
                    @endphp
                    <span class="px-2 py-1 text-xs rounded-full {{ $badge[$a->status] ?? 'bg-gray-100' }}">{{ $label[$a->status] ?? $a->status }}</span>
                </td>
                <td class="px-4 py-3 text-sm">{{ $a->keterangan ?? '-' }}</td>
            </tr>
            @empty
            <tr><td colspan="5" class="px-4 py-12 text-center text-gray-500">Tidak ada data absensi</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@if($absensis->hasPages())<div class="mt-4">{{ $absensis->links() }}</div>@endif
@endsection