@extends('layouts.main_dashboard.app')
@section('title', app()->getLocale() === 'ar' ? 'التقارير والتحليلات' : 'Reports and Analytics')
@section('skip_page_hero', true)
@php($isArabic = app()->getLocale() === 'ar')
@section('content')
<div class="space-y-6">
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <p class="text-xs font-black uppercase tracking-[0.24em] text-brand-600">{{ $isArabic ? 'التقارير والتحليلات' : 'Reports and analytics' }}</p>
                <h1 class="mt-3 text-2xl font-black text-zinc-900 dark:text-white md:text-3xl">{{ $isArabic ? 'قراءة كلية للمشكلات المدرسية بدون كشف الأفراد' : 'Aggregated school issues without exposing identities' }}</h1>
            </div>
            <a href="{{ route('social-worker.reports.export') }}" class="inline-flex items-center justify-center rounded-2xl bg-zinc-900 px-5 py-3 text-sm font-black text-white dark:bg-white dark:text-zinc-900">{{ $isArabic ? 'تصدير التقرير' : 'Export report' }}</a>
            <a href="{{ route('social-worker.reports.sessions.pdf') }}" class="inline-flex items-center gap-2 justify-center rounded-2xl bg-teal-600 px-5 py-3 text-sm font-black text-white hover:bg-teal-700 transition-colors">
                <i class="fa-solid fa-file-pdf text-xs"></i>{{ $isArabic ? 'PDF الجلسات' : 'Sessions PDF' }}
            </a>
            <a href="{{ route('social-worker.reports.referrals.pdf') }}" class="inline-flex items-center gap-2 justify-center rounded-2xl bg-violet-600 px-5 py-3 text-sm font-black text-white hover:bg-violet-700 transition-colors">
                <i class="fa-solid fa-file-pdf text-xs"></i>{{ $isArabic ? 'PDF الإحالات' : 'Referrals PDF' }}
            </a>
        </div>
    </section>
    <section class="grid gap-4 md:grid-cols-4">
        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-950"><p class="text-xs font-black text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'إجمالي الحالات' : 'Total cases' }}</p><p class="mt-2 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $overview['total_cases'] }}</p></article>
        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-950"><p class="text-xs font-black text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'المفتوحة' : 'Open' }}</p><p class="mt-2 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $overview['open_cases'] }}</p></article>
        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-950"><p class="text-xs font-black text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'مرتفعة الشدة' : 'High severity' }}</p><p class="mt-2 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $overview['high_severity'] }}</p></article>
        <article class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-950"><p class="text-xs font-black text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'المغلقة' : 'Resolved' }}</p><p class="mt-2 text-3xl font-black text-zinc-900 dark:text-white font-numbers">{{ $overview['resolved_cases'] }}</p></article>
    </section>
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-800">
                <thead class="bg-zinc-50 dark:bg-zinc-900/60"><tr class="text-start text-xs font-black uppercase tracking-[0.2em] text-zinc-500 dark:text-zinc-400"><th class="px-4 py-3">{{ $isArabic ? 'نوع المشكلة' : 'Issue type' }}</th><th class="px-4 py-3">{{ $isArabic ? 'الإجمالي' : 'Total' }}</th><th class="px-4 py-3">{{ $isArabic ? 'المفتوح' : 'Open' }}</th><th class="px-4 py-3">{{ $isArabic ? 'مرتفع الشدة' : 'High severity' }}</th><th class="px-4 py-3">{{ $isArabic ? 'المغلق' : 'Resolved' }}</th></tr></thead>
                <tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
                    @foreach($rows as $row)
                        <tr>
                            <td class="px-4 py-3 text-sm font-black text-zinc-900 dark:text-white">{{ $row['issue_type'] }}</td>
                            <td class="px-4 py-3 text-sm text-zinc-600 dark:text-zinc-300 font-numbers">{{ $row['total_cases'] }}</td>
                            <td class="px-4 py-3 text-sm text-zinc-600 dark:text-zinc-300 font-numbers">{{ $row['open_cases'] }}</td>
                            <td class="px-4 py-3 text-sm text-zinc-600 dark:text-zinc-300 font-numbers">{{ $row['high_severity'] }}</td>
                            <td class="px-4 py-3 text-sm text-zinc-600 dark:text-zinc-300 font-numbers">{{ $row['resolved_cases'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>
</div>
@endsection