@extends('layouts.app')

@section('title', 'Ujian Tersedia')

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

    @if($exams->count())
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
            @foreach($exams as $exam)
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 md:p-6 hover:shadow-md transition">
                <div class="flex justify-between items-start mb-3 md:mb-4">
                    <div class="min-w-0">
                        <h3 class="font-semibold text-sm md:text-base truncate">{{ $exam->title }}</h3>
                        <p class="text-xs md:text-sm text-gray-500">{{ $exam->course->name }}</p>
                    </div>
                    <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700 shrink-0">Aktif</span>
                </div>
                <div class="space-y-1.5 md:space-y-2 text-xs md:text-sm text-gray-600 mb-3 md:mb-4">
                    <p><i class="far fa-clock mr-1.5 w-4 text-center"></i>{{ $exam->duration }} menit</p>
                    <p><i class="far fa-calendar mr-1.5 w-4 text-center"></i>{{ $exam->start_time->format('d M Y H:i') }} WITA - {{ $exam->end_time->format('H:i') }} WITA</p>
                </div>
                @if(in_array($exam->id, $completedExamIds))
                    <a href="{{ route('mahasiswa.results.show', $exam) }}" class="block w-full text-center bg-gray-100 text-gray-700 py-2.5 rounded-xl hover:bg-gray-200 transition text-sm font-medium active:scale-[0.98]">Lihat Hasil</a>
                @else
                    <a href="{{ route('exam.start', $exam) }}" class="block w-full text-center bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-2.5 rounded-xl hover:from-blue-700 hover:to-indigo-700 transition text-sm font-medium shadow-md shadow-blue-200 active:scale-[0.98]">Mulai Ujian</a>
                @endif
            </div>
            @endforeach
        </div>
    @else
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 text-center text-gray-500">
            <i class="fas fa-inbox text-3xl mb-3 text-gray-300"></i>
            <p>Tidak ada ujian yang tersedia saat ini.</p>
        </div>
    @endif
</div>
@endsection