@extends('layouts.teacher')

@section('title', 'Hasil Ujian')
@section('header_title', 'Hasil Evaluasi Siswa')

@section('content')

<div class="max-w-6xl mx-auto">
    
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
        <div>
            <a href="{{ route('guru.ujian.index') }}" class="inline-flex items-center text-gray-500 hover:text-indigo-600 transition text-sm font-medium mb-2">
                <i class="ph ph-arrow-left mr-2"></i> Kembali ke Daftar Ujian
            </a>
            <h2 class="text-2xl font-bold text-gray-800">{{ $exam->title }}</h2>
            <div class="flex items-center gap-4 mt-1 text-sm text-gray-500">
                <span class="bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded text-xs font-bold">KKM: {{ $exam->passing_score }}</span>
                <span><i class="ph ph-users mr-1"></i> {{ count($results) }} Siswa Mengerjakan</span>
            </div>
        </div>

        <a href="{{ route('guru.ujian.export', $exam->id) }}" 
   class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-700 transition flex items-center shadow-sm">
    <i class="ph ph-microsoft-excel-logo mr-2 text-lg"></i> Export Nilai
</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white p-5 rounded-xl border border-gray-100 shadow-sm flex items-center">
            <div class="w-10 h-10 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center mr-4">
                <i class="ph ph-chart-bar text-xl"></i>
            </div>
            <div>
                <p class="text-xs text-gray-500 uppercase font-bold">Rata-rata Nilai</p>
                <p class="text-xl font-bold text-gray-800">
                    {{ $averageScore }}
                </p>
            </div>
        </div>
        <div class="bg-white p-5 rounded-xl border border-gray-100 shadow-sm flex items-center">
            <div class="w-10 h-10 rounded-full bg-green-50 text-green-600 flex items-center justify-center mr-4">
                <i class="ph ph-check-circle text-xl"></i>
            </div>
            <div>
                <p class="text-xs text-gray-500 uppercase font-bold">↥ KKM</p>
                <p class="text-xl font-bold text-gray-800">
                    {{ $passedCount }} Siswa
                </p>
            </div>
        </div>
        <div class="bg-white p-5 rounded-xl border border-gray-100 shadow-sm flex items-center">
            <div class="w-10 h-10 rounded-full bg-red-50 text-red-600 flex items-center justify-center mr-4">
                <i class="ph ph-x-circle text-xl"></i>
            </div>
            <div>
                <p class="text-xs text-gray-500 uppercase font-bold">↧ KKM</p>
                <p class="text-xl font-bold text-gray-800">
                    {{ $failedCount }} Siswa
                </p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-gray-50 text-xs uppercase text-gray-500 font-bold border-b border-gray-200">
                    <tr>
                        <th class="px-6 py-4">Nama Siswa</th>
                        <th class="px-6 py-4">Waktu Submit</th>
                        <th class="px-6 py-4 text-center">Nilai Akhir</th>
                        <th class="px-6 py-4 text-center">Status</th>
                        <th class="px-6 py-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="text-sm divide-y divide-gray-100">
                    @foreach($results as $res)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4">
                            <div class="font-bold text-gray-800">{{ $res->student_name }}</div>
                            <div class="text-xs text-gray-500">{{ $res->student_nisn }} • {{ $res->class }}</div>
                        </td>
                        <td class="px-6 py-4 text-gray-600">
                            {{ $res->submitted_at }}
                        </td>
                        <td class="px-6 py-4 text-center">
                            <span class="text-lg font-bold {{ $res->score >= $exam->passing_score ? 'text-green-600' : 'text-red-600' }}">
                                {{ $res->score }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-center">
                            @if($res->status == 'Lulus')
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-50 text-green-700 border border-green-100">
                                    Lulus
                                </span>
                            @else
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-red-50 text-red-700 border border-red-100">
                                    Remedial
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-right">
                            <a href="{{ route('guru.ujian.jawaban', ['quiz_id' => $exam->id, 'user_id' => $res->user_id]) }}" 
                            class="inline-block text-gray-400 hover:text-indigo-600 transition" 
                            title="Lihat Detail Jawaban">
                                <i class="ph ph-eye text-lg"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        @if(count($results) === 0)
        <div class="p-8 text-center text-gray-500">
            Belum ada siswa yang mengerjakan ujian ini.
        </div>
        @endif
    </div>
</div>

@endsection