@extends('layouts.app')

@section('title', 'Rekap Nilai per Mata Kuliah')

@section('content')
<div class="space-y-4 md:space-y-6">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
        <h1 class="text-xl md:text-2xl font-bold text-gray-800">Rekap Nilai per Mata Kuliah</h1>
        <a href="{{ route('dosen.reports.index') }}" class="text-gray-600 hover:text-gray-800 text-sm font-medium"><i class="fas fa-arrow-left mr-1"></i> Kembali</a>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 md:p-6">
        <form method="GET" class="flex flex-col sm:flex-row gap-3 items-end">
            <div class="flex-1 w-full">
                <label class="block text-sm font-medium text-gray-700 mb-1">Pilih Mata Kuliah</label>
                <select name="course_id" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm">
                    <option value="">Pilih...</option>
                    @foreach($courses as $c)
                        <option value="{{ $c->id }}" {{ request('course_id') == $c->id ? 'selected' : '' }}>{{ $c->name }} ({{ $c->code }})</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-2.5 rounded-xl hover:from-blue-700 hover:to-indigo-700 transition text-sm font-medium shadow-lg shadow-blue-200 w-full sm:w-auto active:scale-[0.98]">Tampilkan</button>
        </form>
    </div>

    @if($selectedCourse)
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
            <div class="bg-white p-4 md:p-6 rounded-2xl shadow-sm border border-gray-100">
                <p class="text-xs text-gray-500">Total Ujian</p>
                <p class="text-xl md:text-2xl font-bold">{{ $stats['total_exams'] }}</p>
            </div>
            <div class="bg-white p-4 md:p-6 rounded-2xl shadow-sm border border-gray-100">
                <p class="text-xs text-gray-500">Total Hasil</p>
                <p class="text-xl md:text-2xl font-bold">{{ $stats['total_results'] }}</p>
            </div>
            <div class="bg-white p-4 md:p-6 rounded-2xl shadow-sm border border-gray-100">
                <p class="text-xs text-gray-500">Rata-rata</p>
                <p class="text-xl md:text-2xl font-bold">{{ $stats['avg_score'] }}%</p>
            </div>
            <div class="bg-white p-4 md:p-6 rounded-2xl shadow-sm border border-gray-100">
                <p class="text-xs text-gray-500">Tertinggi / Terendah</p>
                <p class="text-xl md:text-2xl font-bold">{{ $stats['highest'] }}% / {{ $stats['lowest'] }}%</p>
            </div>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="px-4 md:px-6 py-3 md:py-4 border-b border-gray-100"><h2 class="font-semibold text-sm md:text-base">Daftar Hasil - {{ $selectedCourse->name }}</h2></div>
            <div class="table-wrapper overflow-x-auto">
                <table class="w-full text-left min-w-[500px]">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 md:px-6 py-3 text-xs md:text-sm font-medium text-gray-600">Mahasiswa</th>
                            <th class="px-4 md:px-6 py-3 text-xs md:text-sm font-medium text-gray-600">Ujian</th>
                            <th class="px-4 md:px-6 py-3 text-xs md:text-sm font-medium text-gray-600">Nilai</th>
                            <th class="px-4 md:px-6 py-3 text-xs md:text-sm font-medium text-gray-600">Persentase</th>
                            <th class="px-4 md:px-6 py-3 text-xs md:text-sm font-medium text-gray-600">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach($results as $r)
                        <tr class="hover:bg-gray-50/50 transition">
                            <td class="px-4 md:px-6 py-3 md:py-4 text-sm">{{ $r->user->name }} ({{ $r->user->identifier }})</td>
                            <td class="px-4 md:px-6 py-3 md:py-4 text-gray-500 text-xs md:text-sm">{{ $r->exam->title }}</td>
                            <td class="px-4 md:px-6 py-3 md:py-4 font-medium text-sm">{{ $r->total_score }} / {{ $r->max_score }}</td>
                            <td class="px-4 md:px-6 py-3 md:py-4 text-sm">{{ $r->percentage }}%</td>
                            <td class="px-4 md:px-6 py-3 md:py-4">
                                <span class="px-2 py-1 text-xs rounded-full capitalize
                                    @if($r->status == 'graded') bg-green-100 text-green-700
                                    @elseif($r->status == 'completed') bg-blue-100 text-blue-700
                                    @else bg-yellow-100 text-yellow-700 @endif">{{ $r->status }}</span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
</div>
@endsection