@extends('layouts.superadmin')

@section('title','الأكاديمية — غرفة الإدارة العليا')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8 rtl">
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

        {{-- HERO (Socrates Style) --}}
        <div class="relative overflow-hidden rounded-3xl
                    bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98
                    border border-fuchsia-400/30 shadow-2xl shadow-fuchsia-500/10">

            <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-fuchsia-400/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/20 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 space-y-4">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full
                            bg-black/40 border border-fuchsia-300/30 text-[11px] text-fuchsia-100">
                    غرفة الإدارة — نظام الأكاديمية
                </div>

                <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                    لوحة تحكم الأكاديمية
                </h1>

                <p class="text-[13px] sm:text-[14px] text-slate-200/85 leading-relaxed max-w-2xl">
                    متابعة البرامج، الأداء، الدرجات، والتحليلات العامة للأكاديمية.
                    هذه اللوحة لا تغيّر أي خوارزمية، فقط عرض إداري احترافي.
                </p>
            </div>
        </div>

        {{-- STATS (Socrates Cards) --}}
        <div class="grid gap-4 lg:grid-cols-4">
            <div class="rounded-3xl bg-slate-950/80 border border-white/10 p-5 shadow-xl">
                <div class="text-[11px] text-slate-400">إجمالي البرامج</div>
                <div class="text-3xl font-extrabold text-white mt-2">
                    {{ $stats['courses_total'] ?? 0 }}
                </div>
            </div>

            <div class="rounded-3xl bg-slate-950/80 border border-emerald-400/20 p-5 shadow-xl">
                <div class="text-[11px] text-slate-400">برامج منشورة</div>
                <div class="text-3xl font-extrabold text-emerald-300 mt-2">
                    {{ $stats['courses_published'] ?? 0 }}
                </div>
            </div>

            <div class="rounded-3xl bg-slate-950/80 border border-cyan-400/20 p-5 shadow-xl">
                <div class="text-[11px] text-slate-400">طلاب نشطون</div>
                <div class="text-3xl font-extrabold text-cyan-300 mt-2">
                    {{ $stats['active_students'] ?? 0 }}
                </div>
            </div>

            <div class="rounded-3xl bg-slate-950/80 border border-fuchsia-400/20 p-5 shadow-xl">
                <div class="text-[11px] text-slate-400">متوسط الدرجات</div>
                <div class="text-3xl font-extrabold text-fuchsia-300 mt-2">
                    {{ $stats['avg_score'] ?? '—' }}
                </div>
            </div>
        </div>

        {{-- ANALYTICS PLACEHOLDER --}}
        <div class="rounded-3xl bg-slate-950/70 border border-white/10 p-6 shadow-2xl">
            <h2 class="text-sm font-extrabold text-white mb-2">
                تحليلات الأكاديمية
            </h2>

            <p class="text-[12px] text-slate-300/80 leading-relaxed">
                سيتم عرض تحليلات الذكاء الاصطناعي، الرسوم البيانية،
                ونِسَب الأداء هنا بنفس أسلوب سقراط (AI Insights • Charts • Trends).
            </p>
        </div>

    </div>
</div>
@endsection