@extends('layouts.app')

@section('content')
    <h1 class="mb-4 text-3xl font-bold tracking-tight text-white">Staff Dashboard</h1>
    <div class="mb-6 flex flex-wrap gap-3">
        <a href="{{ route('staff.models.create') }}" class="btn-primary">Add new model</a>
        <a href="{{ route('staff.models.index') }}" class="btn-secondary">Manage models</a>
    </div>
    <div class="mb-6 grid gap-4 md:grid-cols-4">
        <div class="app-card p-4"><p class="text-xs text-slate-300">Models</p><p class="text-2xl font-semibold text-white">{{ $stats['models'] }}</p></div>
        <div class="app-card p-4"><p class="text-xs text-slate-300">Lessons</p><p class="text-2xl font-semibold text-white">{{ $stats['lessons'] }}</p></div>
        <div class="app-card p-4"><p class="text-xs text-slate-300">Quizzes</p><p class="text-2xl font-semibold text-white">{{ $stats['quizzes'] }}</p></div>
        <div class="app-card p-4"><p class="text-xs text-slate-300">Published Models</p><p class="text-2xl font-semibold text-white">{{ $stats['publishedModels'] }}</p></div>
    </div>

    <div class="grid gap-4 md:grid-cols-2">
        <section class="app-card p-4">
            <h2 class="font-semibold text-white">Recent Models</h2>
            <ul class="mt-3 space-y-2 text-sm text-slate-200">
                @foreach($recentModels as $item)
                    <li>{{ $item->title }} <span class="text-slate-400">({{ $item->programme }})</span></li>
                @endforeach
            </ul>
        </section>
        <section class="app-card p-4">
            <h2 class="font-semibold text-white">Recent Lessons</h2>
            <ul class="mt-3 space-y-2 text-sm text-slate-200">
                @foreach($recentLessons as $lesson)
                    <li>{{ $lesson->title }}</li>
                @endforeach
            </ul>
        </section>
    </div>
@endsection