@extends('layouts.app')

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

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

    <div class="grid grid-cols-1 sm:grid-cols-3 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-book"></i></div>
                <div>
                    <p class="text-xs md:text-sm text-gray-500">Mata Kuliah</p>
                    <p class="text-xl md:text-2xl font-bold">{{ $courses }}</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-red-100 text-red-600 rounded-xl flex items-center justify-center text-lg md:text-xl"><i class="fas fa-clipboard-list"></i></div>
                <div>
                    <p class="text-xs md:text-sm text-gray-500">Ujian</p>
                    <p class="text-xl md:text-2xl font-bold">{{ $exams }}</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-teal-100 text-teal-600 rounded-xl flex items-center justify-center text-lg md:text-xl"><i class="fas fa-question-circle"></i></div>
                <div>
                    <p class="text-xs md:text-sm text-gray-500">Soal</p>
                    <p class="text-xl md:text-2xl font-bold">{{ $questions }}</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">Ujian Terbaru</h2>
        </div>
        <div class="divide-y divide-gray-100">
            @forelse($recentExams as $exam)
                <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">{{ $exam->title }}</p>
                        <p class="text-xs md:text-sm text-gray-500">{{ $exam->course->name }} &middot; {{ $exam->start_time->format('d M Y H:i') }} WITA</p>
                    </div>
                    <span class="px-3 py-1 text-xs rounded-full w-fit
                        @if($exam->status == 'published') bg-green-100 text-green-700
                        @elseif($exam->status == 'draft') bg-gray-100 text-gray-700
                        @else bg-red-100 text-red-700 @endif">
                        {{ $exam->status }}
                    </span>
                </div>
            @empty
                <div class="px-4 md:px-6 py-8 text-center text-gray-500 text-sm">Belum ada ujian.</div>
            @endforelse
        </div>
    </div>
</div>
@endsection