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

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Top Students -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Ranking Siswa</h3>
        @if(count($statSiswa) > 0)
        <div class="space-y-3">
            @foreach(array_slice($statSiswa, 0, 5) as $i => $stat)
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold {{ $i == 0 ? 'bg-yellow-100 text-yellow-700' : ($i == 1 ? 'bg-gray-100 text-gray-700' : ($i == 2 ? 'bg-orange-100 text-orange-700' : 'bg-gray-50 text-gray-500')) }}">
                    {{ $i + 1 }}
                </div>
                <div class="flex-1">
                    <p class="font-medium text-gray-800 text-sm">{{ $stat['siswa']->nama }}</p>
                    <p class="text-xs text-gray-500">{{ $stat['siswa']->nis }}</p>
                </div>
                <div class="text-right">
                    <p class="font-bold {{ $stat['rata_rata'] >= 75 ? 'text-green-600' : 'text-red-600' }}">{{ $stat['rata_rata'] }}</p>
                    <p class="text-xs text-gray-500">rata-rata</p>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <p class="text-gray-500 text-center py-4">Belum ada data nilai</p>
        @endif
    </div>

    <!-- Nilai List -->
    <div class="lg:col-span-2">
        <!-- 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">Tahun Ajaran</label>
                    <input type="text" name="tahun_ajaran" value="{{ request('tahun_ajaran') }}" placeholder="2025/2026" class="w-full px-3 py-2 border rounded-lg">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Semester</label>
                    <select name="semester" class="w-full px-3 py-2 border rounded-lg">
                        <option value="">Semua</option>
                        <option value="ganjil" {{ request('semester') == 'ganjil' ? 'selected' : '' }}>Ganjil</option>
                        <option value="genap" {{ request('semester') == 'genap' ? 'selected' : '' }}>Genap</option>
                    </select>
                </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-nilai', $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">Siswa</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Mapel</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Tipe</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Nilai</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($nilais as $n)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3">
                            <div class="font-medium text-gray-900 text-sm">{{ $n->siswa->nama ?? '-' }}</div>
                            <div class="text-xs text-gray-500">{{ $n->siswa->nis ?? '-' }}</div>
                        </td>
                        <td class="px-4 py-3 text-sm">{{ $n->mataPelajaran->nama_mapel ?? '-' }}</td>
                        <td class="px-4 py-3 text-sm">{{ $n->tipe_label }}</td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-1 text-sm font-bold rounded {{ $n->nilai >= 75 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $n->nilai }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="4" class="px-4 py-12 text-center text-gray-500">Tidak ada data nilai</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($nilais->hasPages())<div class="mt-4">{{ $nilais->links() }}</div>@endif
    </div>
</div>
@endsection