@extends('layouts.school')

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

@section('content')
    {{-- Row 1 — Core school population --}}
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4 mb-6">
        <a href="{{ route('school.students.index', $school->id) }}" class="stat-card block">
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-500">Students</p>
                    <p class="mt-2 text-3xl font-display font-bold text-gray-900">{{ number_format($stats['students']) }}</p>
                    <p class="mt-1 text-xs text-gray-400">Currently registered</p>
                </div>
                <span class="shrink-0 text-2xl leading-none" aria-hidden="true">👨‍🎓</span>
            </div>
        </a>

        <a href="{{ route('school.parents.index', $school->id) }}" class="stat-card block">
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-500">Parents</p>
                    <p class="mt-2 text-3xl font-display font-bold text-gray-900">{{ number_format($stats['parents']) }}</p>
                    <p class="mt-1 text-xs text-gray-400">Registered guardians</p>
                </div>
                <span class="shrink-0 text-2xl leading-none" aria-hidden="true">👨‍👩‍👧</span>
            </div>
        </a>

        <a href="{{ route('school.staff.index', $school->id) }}" class="stat-card block">
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-500">Staff</p>
                    <p class="mt-2 text-3xl font-display font-bold text-gray-900">{{ number_format($stats['staff']) }}</p>
                    <p class="mt-1 text-xs text-gray-400">Total school staff</p>
                </div>
                <span class="shrink-0 text-2xl leading-none" aria-hidden="true">🏫</span>
            </div>
        </a>

        <a href="{{ route('school.teachers.index', $school->id) }}" class="stat-card block">
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-500">Teachers</p>
                    <p class="mt-2 text-3xl font-display font-bold text-gray-900">{{ number_format($stats['teachers']) }}</p>
                    <p class="mt-1 text-xs text-gray-400">Teaching staff</p>
                </div>
                <span class="shrink-0 text-2xl leading-none" aria-hidden="true">📚</span>
            </div>
        </a>
    </div>

    {{-- Row 2 — Academic structure & admissions --}}
    <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5 mb-6">
        <a href="{{ route('school.classes.index', $school->id) }}" class="stat-card block">
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-500">Classes</p>
                    <p class="mt-2 text-3xl font-display font-bold text-gray-900">{{ number_format($stats['classes']) }}</p>
                    <p class="mt-1 text-xs text-gray-400">Active classes</p>
                </div>
                <span class="shrink-0 text-2xl leading-none" aria-hidden="true">🏫</span>
            </div>
        </a>

        <a href="{{ route('school.subjects.index', $school->id) }}" class="stat-card block">
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-500">Subjects</p>
                    <p class="mt-2 text-3xl font-display font-bold text-gray-900">{{ number_format($stats['subjects']) }}</p>
                    <p class="mt-1 text-xs text-gray-400">Active subjects</p>
                </div>
                <span class="shrink-0 text-2xl leading-none" aria-hidden="true">📖</span>
            </div>
        </a>

        <a href="{{ route('school.admission.applications.index', $school->id) }}" class="stat-card block">
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-500">Applicants</p>
                    <p class="mt-2 text-3xl font-display font-bold text-gray-900">{{ number_format($stats['applicants']) }}</p>
                    <p class="mt-1 text-xs text-gray-400">Applications received</p>
                </div>
                <span class="shrink-0 text-2xl leading-none" aria-hidden="true">📝</span>
            </div>
        </a>

        <a href="{{ route('school.admission.dashboard', $school->id) }}" class="stat-card block">
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-500">Admissions</p>
                    <p class="mt-2 text-xl font-display font-bold text-gray-900">{{ number_format($stats['admProgrammes']) }} programmes</p>
                    <p class="mt-1 text-xs text-gray-400">
                        {{ $stats['admPending'] }} pending · {{ $stats['admApproved'] }} approved · {{ $stats['admRejected'] }} rejected
                    </p>
                </div>
                <span class="shrink-0 text-2xl leading-none" aria-hidden="true">📋</span>
            </div>
        </a>

        <a href="{{ route('school.finance.dashboard', $school->id) }}" class="stat-card block">
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-500">Finance</p>
                    <p class="mt-2 text-2xl font-display font-bold text-gray-900 leading-tight">₦{{ number_format($stats['financeCollected']) }}</p>
                    <p class="mt-1 text-xs text-gray-400">Collected · ₦{{ number_format($stats['financeOutstanding']) }} outstanding</p>
                </div>
                <span class="shrink-0 text-2xl leading-none" aria-hidden="true">💰</span>
            </div>
        </a>
    </div>

    {{-- Row 3 — Recent students & quick actions --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="card">
            <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
                <h3 class="text-lg font-display font-semibold text-gray-900">Recent Students</h3>
                <a href="{{ route('school.students.index', $school->id) }}" class="text-sm text-primary-600 hover:text-primary-700">View all</a>
            </div>
            <div class="divide-y divide-gray-100">
                @forelse($recentStudents as $student)
                    <div class="flex items-center gap-4 px-6 py-3">
                        <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary-100 text-primary-700 text-xs font-bold">
                            {{ $student->initials }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-900 truncate">{{ $student->full_name }}</p>
                            <p class="text-xs text-gray-500">{{ $student->admission_no }}</p>
                        </div>
                    </div>
                @empty
                    <div class="px-6 py-8 text-center text-sm text-gray-500">No students yet.</div>
                @endforelse
            </div>
        </div>

        <div class="stat-card">
            <h3 class="text-lg font-display font-semibold text-gray-900 mb-4">Quick Actions</h3>
            <div class="grid grid-cols-2 gap-3">
                <a href="{{ route('school.students.create', $school->id) }}" class="flex flex-col items-center gap-2 rounded-lg border border-gray-200 p-4 hover:bg-gray-50 transition-colors">
                    <span class="text-2xl">+</span>
                    <span class="text-sm font-medium text-gray-700">Add Student</span>
                </a>
                <a href="{{ route('school.teachers.create', $school->id) }}" class="flex flex-col items-center gap-2 rounded-lg border border-gray-200 p-4 hover:bg-gray-50 transition-colors">
                    <span class="text-2xl">+</span>
                    <span class="text-sm font-medium text-gray-700">Add Teacher</span>
                </a>
                <a href="{{ route('school.classes.create', $school->id) }}" class="flex flex-col items-center gap-2 rounded-lg border border-gray-200 p-4 hover:bg-gray-50 transition-colors">
                    <span class="text-2xl">+</span>
                    <span class="text-sm font-medium text-gray-700">Add Class</span>
                </a>
                <a href="{{ route('school.subjects.create', $school->id) }}" class="flex flex-col items-center gap-2 rounded-lg border border-gray-200 p-4 hover:bg-gray-50 transition-colors">
                    <span class="text-2xl">+</span>
                    <span class="text-sm font-medium text-gray-700">Add Subject</span>
                </a>
            </div>
        </div>
    </div>
@endsection