@extends('layouts.school')

@section('title', 'Reports & Analytics')
@section('header', 'Reports & Analytics')

@section('content')
    <div class="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-medium text-gray-500">Active Students</p>
            <p class="mt-1 text-2xl font-bold text-gray-900">{{ $stats['total_students'] }}</p>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-medium text-gray-500">Classes</p>
            <p class="mt-1 text-2xl font-bold text-gray-900">{{ $stats['total_classes'] }}</p>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-medium text-gray-500">Total Exams</p>
            <p class="mt-1 text-2xl font-bold text-gray-900">{{ $stats['total_exams'] }}</p>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-medium text-gray-500">Attendance Today</p>
            <p class="mt-1 text-2xl font-bold text-gray-900">{{ $stats['attendance_today'] }}</p>
        </div>
    </div>

    <div class="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
        <div class="rounded-xl bg-green-50 p-5 shadow-sm ring-1 ring-green-200">
            <p class="text-xs font-medium text-green-700">Total Collected</p>
            <p class="mt-1 text-2xl font-bold text-green-900">₦{{ number_format($stats['total_paid'], 2) }}</p>
        </div>
        <div class="rounded-xl bg-red-50 p-5 shadow-sm ring-1 ring-red-200">
            <p class="text-xs font-medium text-red-700">Outstanding</p>
            <p class="mt-1 text-2xl font-bold text-red-900">₦{{ number_format($stats['total_outstanding'], 2) }}</p>
        </div>
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-medium text-gray-500">Invoices</p>
            <p class="mt-1 text-2xl font-bold text-gray-900">{{ $stats['total_invoices'] }}</p>
        </div>
        <div class="rounded-xl bg-amber-50 p-5 shadow-sm ring-1 ring-amber-200">
            <p class="text-xs font-medium text-amber-700">Pending Applications</p>
            <p class="mt-1 text-2xl font-bold text-amber-900">{{ $stats['pending_applications'] }}</p>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <a href="{{ route('school.reports.student-report', request()->route('schoolId')) }}" class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 hover:ring-primary-300 transition-colors">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
            </div>
            <h3 class="mt-3 text-sm font-semibold text-gray-900">Student Report Card</h3>
            <p class="mt-1 text-xs text-gray-500">View grades and attendance for individual students</p>
        </a>

        <a href="{{ route('school.reports.class-report', request()->route('schoolId')) }}" class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 hover:ring-primary-300 transition-colors">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-100 text-purple-600">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg>
            </div>
            <h3 class="mt-3 text-sm font-semibold text-gray-900">Class Report</h3>
            <p class="mt-1 text-xs text-gray-500">Compare students across a class with rankings</p>
        </a>

        <a href="{{ route('school.reports.academic-performance', request()->route('schoolId')) }}" class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 hover:ring-primary-300 transition-colors">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
            </div>
            <h3 class="mt-3 text-sm font-semibold text-gray-900">Academic Performance</h3>
            <p class="mt-1 text-xs text-gray-500">Pass rates, top students and subject analytics</p>
        </a>

        <a href="{{ route('school.reports.attendance-report', request()->route('schoolId')) }}" class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 hover:ring-primary-300 transition-colors">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-green-100 text-green-600">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z" /></svg>
            </div>
            <h3 class="mt-3 text-sm font-semibold text-gray-900">Attendance Report</h3>
            <p class="mt-1 text-xs text-gray-500">Track attendance by class and date range</p>
        </a>

        <a href="{{ route('school.reports.finance-report', request()->route('schoolId')) }}" class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 hover:ring-primary-300 transition-colors">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-100 text-amber-600">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" /></svg>
            </div>
            <h3 class="mt-3 text-sm font-semibold text-gray-900">Finance Report</h3>
            <p class="mt-1 text-xs text-gray-500">Revenue, payments and outstanding balances</p>
        </a>
    </div>
@endsection