@extends('layouts.app')

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

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

    <div class="grid grid-cols-2 md: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-users"></i></div>
                <div>
                    <p class="text-xs md:text-sm text-gray-500">Total User</p>
                    <p class="text-xl md:text-2xl font-bold">{{ $stats['total_users'] }}</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-chalkboard-teacher"></i></div>
                <div>
                    <p class="text-xs md:text-sm text-gray-500">Dosen</p>
                    <p class="text-xl md:text-2xl font-bold">{{ $stats['total_dosen'] }}</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-purple-100 text-purple-600 rounded-xl flex items-center justify-center text-lg md:text-xl"><i class="fas fa-user-graduate"></i></div>
                <div>
                    <p class="text-xs md:text-sm text-gray-500">Mahasiswa</p>
                    <p class="text-xl md:text-2xl font-bold">{{ $stats['total_mahasiswa'] }}</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-orange-100 text-orange-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">{{ $stats['total_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">{{ $stats['total_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">{{ $stats['total_questions'] }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection