@extends('layouts.app')

@section('title', 'Dashboard Mahasiswa')

@section('content')
<div class="space-y-6">
    <h1 class="text-xl md:text-2xl font-bold text-gray-800">Dashboard Mahasiswa</h1>

    <div class="grid grid-cols-2 gap-3 md:gap-6">
        <div class="bg-white p-4 md:p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
            <div class="flex items-center gap-3 md:gap-4">
                <div class="w-10 h-10 md:w-12 md:h-12 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center text-lg md:text-xl"><i class="fas fa-pencil-alt"></i></div>
                <div>
                    <p class="text-xs md:text-sm text-gray-500">Ujian Tersedia</p>
                    <p class="text-xl md:text-2xl font-bold">{{ $availableExams }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white p-4 md:p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
            <div class="flex items-center gap-3 md:gap-4">
                <div class="w-10 h-10 md:w-12 md:h-12 bg-green-100 text-green-600 rounded-xl flex items-center justify-center text-lg md:text-xl"><i class="fas fa-check-circle"></i></div>
                <div>
                    <p class="text-xs md:text-sm text-gray-500">Ujian Selesai</p>
                    <p class="text-xl md:text-2xl font-bold">{{ $completedExams }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-4 md:px-6 py-4 border-b border-gray-100">
            <h2 class="font-semibold text-gray-800 text-sm md:text-base">Hasil Ujian Terbaru</h2>
        </div>
        <div class="divide-y divide-gray-100">
            @forelse($recentResults as $result)
                <div class="px-4 md:px-6 py-3 md:py-4 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
                    <div>
                        <p class="font-medium text-gray-800 text-sm md:text-base">{{ $result->exam->title }}</p>
                        <p class="text-xs md:text-sm text-gray-500">{{ $result->exam->course->name }}</p>
                    </div>
                    <div class="text-left sm:text-right">
                        <p class="font-bold text-lg md:text-xl {{ $result->percentage >= 60 ? 'text-green-600' : 'text-red-600' }}">{{ $result->percentage }}%</p>
                        <p class="text-xs text-gray-500">{{ $result->total_score }} / {{ $result->max_score }}</p>
                    </div>
                </div>
            @empty
                <div class="px-4 md:px-6 py-8 text-center text-gray-500 text-sm">Belum ada hasil ujian.</div>
            @endforelse
        </div>
    </div>
</div>
@endsection