@extends('layouts.app')

@section('title', 'Detail Laporan Ujian')

@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">
        <div>
            <h1 class="text-xl md:text-2xl font-bold text-gray-800">Detail Laporan</h1>
            <p class="text-gray-500 text-sm">{{ $exam->title }} - {{ $exam->course->name }}</p>
        </div>
        <div class="flex gap-2 flex-wrap">
            <a href="{{ route('dosen.reports.pdf', $exam) }}" class="bg-gradient-to-r from-red-500 to-red-600 text-white px-4 py-2 rounded-xl hover:from-red-600 hover:to-red-700 transition text-xs md:text-sm font-medium shadow-md shadow-red-200 active:scale-[0.98]"><i class="fas fa-file-pdf mr-1"></i> PDF</a>
            <a href="{{ route('dosen.reports.excel', $exam) }}" class="bg-gradient-to-r from-emerald-500 to-green-600 text-white px-4 py-2 rounded-xl hover:from-emerald-600 hover:to-green-700 transition text-xs md:text-sm font-medium shadow-md shadow-green-200 active:scale-[0.98]"><i class="fas fa-file-excel mr-1"></i> Excel</a>
            <a href="{{ route('dosen.reports.index') }}" class="text-gray-600 hover:text-gray-800 px-3 py-2 text-xs md:text-sm font-medium"><i class="fas fa-arrow-left mr-1"></i> Kembali</a>
        </div>
    </div>

    <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 Peserta</p>
            <p class="text-xl md:text-2xl font-bold">{{ $totalParticipants }}</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">{{ $avgScore }}%</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">Nilai Tertinggi</p>
            <p class="text-xl md:text-2xl font-bold">{{ $highestScore }}%</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">Nilai Terendah</p>
            <p class="text-xl md:text-2xl font-bold">{{ $lowestScore }}%</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 md:p-6">
            <h2 class="font-semibold text-gray-800 mb-3 md:mb-4 text-sm md:text-base">Distribusi Nilai</h2>
            <div class="space-y-3">
                @foreach($distribution as $label => $count)
                <div class="flex items-center gap-3">
                    <span class="w-16 md:w-20 text-xs md:text-sm text-gray-600 shrink-0">{{ $label }}</span>
                    <div class="flex-1 h-5 md:h-6 bg-gray-100 rounded-full overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full" style="width: {{ $totalParticipants > 0 ? ($count / $totalParticipants) * 100 : 0 }}%"></div>
                    </div>
                    <span class="w-6 text-xs md:text-sm text-right">{{ $count }}</span>
                </div>
                @endforeach
            </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-gray-800 text-sm md:text-base">Daftar Nilai</h2></div>
            <div class="table-wrapper overflow-x-auto">
                <table class="w-full text-left min-w-[300px]">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 md:px-6 py-2 text-xs md:text-sm font-medium text-gray-600">Nama</th>
                            <th class="px-4 md:px-6 py-2 text-xs md:text-sm font-medium text-gray-600">Nilai</th>
                            <th class="px-4 md:px-6 py-2 text-xs md:text-sm font-medium text-gray-600">%</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-2 md:py-3 text-xs md:text-sm">{{ $r->user->name }}</td>
                            <td class="px-4 md:px-6 py-2 md:py-3 text-xs md:text-sm font-medium">{{ $r->total_score }} / {{ $r->max_score }}</td>
                            <td class="px-4 md:px-6 py-2 md:py-3 text-xs md:text-sm">{{ $r->percentage }}%</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection