@extends('layouts.main_dashboard.app')
@section('title', __('dashboard.Home Page'))
@section('page_heading', __('dashboard.Home Page'))

@php $isAr = app()->getLocale() === 'ar'; @endphp

@section('content')

{{-- ═══ Hero ═══ --}}
<div class="relative rounded-xl overflow-hidden mb-5 bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800">
    <div class="absolute -top-16 -end-16 w-48 h-48 bg-brand-100/30 dark:bg-brand-500/5 rounded-full blur-3xl pointer-events-none"></div>
    <div class="relative z-10 p-6">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
                <div class="text-[10px] font-bold uppercase tracking-widest text-surface-400 mb-1">نظام إدارة التعليم</div>
                <h1 class="text-xl font-black tracking-tight text-surface-900 dark:text-white">{{ $dashboardHero['title'] }}</h1>
                <p class="text-surface-500 dark:text-surface-400 text-xs mt-1">
                    <i class="fa-regular fa-calendar me-1"></i>{{ \Carbon\Carbon::now()->translatedFormat('l، j F Y') }}
                    <span class="mx-2 opacity-30">·</span>
                    {{ $dashboardHero['summary_label'] }}
                </p>
            </div>
            <div class="flex gap-2 shrink-0">
                <a href="{{ route('admin.students.create') }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg font-bold text-sm hover:bg-brand-700 transition-colors shadow-sm">
                    <i class="fa-solid fa-plus text-xs"></i>{{ $isAr ? 'طالب جديد' : 'New Student' }}
                </a>
                <a href="{{ route('admin.statistics.course-progress') }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 rounded-lg font-bold text-sm hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors border border-surface-200 dark:border-surface-700">
                    <i class="fa-solid fa-chart-line text-xs"></i>{{ $isAr ? 'التقارير' : 'Reports' }}
                </a>
                <a href="{{ route('admin.reports.dashboard.pdf') }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg font-bold text-sm hover:bg-red-700 transition-colors shadow-sm">
                    <i class="fa-solid fa-file-pdf text-xs"></i>{{ $isAr ? 'تصدير PDF' : 'Export PDF' }}
                </a>
                <button onclick="window.location.reload()"
                        class="inline-flex items-center px-3 py-2 bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 rounded-lg text-sm hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors border border-surface-200 dark:border-surface-700">
                    <i class="fa-solid fa-rotate text-xs"></i>
                </button>
            </div>
        </div>

        {{-- Summary row --}}
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-5">
            @foreach([
                ['val' => collect($primaryMetrics)->firstWhere('label', $isAr ? 'الطلاب' : 'Students')['value'] ?? 0,        'label' => $isAr ? 'الطلاب' : 'Students'],
                ['val' => collect($primaryMetrics)->firstWhere('label', $isAr ? 'المعلمون' : 'Teachers')['value'] ?? 0,      'label' => $isAr ? 'المعلمون' : 'Teachers'],
                ['val' => collect($primaryMetrics)->firstWhere('label', $isAr ? 'أولياء الأمور' : 'Parents')['value'] ?? 0,  'label' => $isAr ? 'أولياء الأمور' : 'Parents'],
                ['val' => collect($primaryMetrics)->firstWhere('label', $isAr ? 'المساقات' : 'Courses')['value'] ?? 0,       'label' => $isAr ? 'المساقات' : 'Courses'],
            ] as $s)
            <div class="bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-xl p-3 text-center">
                <div class="text-xl font-black font-mono text-surface-900 dark:text-white">{{ number_format($s['val']) }}</div>
                <div class="text-[9px] font-bold uppercase tracking-widest text-surface-500 dark:text-surface-400 mt-1">{{ $s['label'] }}</div>
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- ═══ Quick Links (under hero) ═══ --}}
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-5">
    @foreach($quickLinks as $link)
    <a href="{{ $link['url'] }}"
       class="group flex items-center gap-2 px-3 py-2.5 rounded-xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 hover:border-brand-300 dark:hover:border-brand-600 hover:-translate-y-0.5 transition-all">
        <div class="w-6 h-6 rounded-lg bg-surface-50 dark:bg-surface-800 flex items-center justify-center shrink-0 group-hover:bg-brand-50 dark:group-hover:bg-brand-500/10 transition-colors border border-surface-100 dark:border-surface-700">
            <i class="fa-solid {{ $link['icon'] }} text-surface-400 group-hover:text-brand-600 dark:group-hover:text-brand-400 text-[10px] transition-colors"></i>
        </div>
        <span class="text-xs font-bold text-surface-600 dark:text-surface-400 group-hover:text-surface-900 dark:group-hover:text-white truncate transition-colors">{{ $link['label'] }}</span>
    </a>
    @endforeach
</div>

{{-- ═══ Metrics (2 rows × 4) ═══ --}}
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-5">
    @foreach([
        ['icon'=>'fa-user-graduate',  'metric'=>$isAr?'الطلاب':'Students',              'color'=>'blue',    'route'=>'admin.students.index'],
        ['icon'=>'fa-chalkboard-user','metric'=>$isAr?'المعلمون':'Teachers',             'color'=>'violet',  'route'=>'admin.teachers.index'],
        ['icon'=>'fa-school',         'metric'=>$isAr?'الصفوف الدراسية':'School classes','color'=>'amber',   'route'=>'admin.school-classes.index'],
        ['icon'=>'fa-book-open',      'metric'=>$isAr?'المساقات':'Courses',              'color'=>'emerald', 'route'=>'admin.courses.index'],
        ['icon'=>'fa-book',           'metric'=>$isAr?'المواد':'Subjects',               'color'=>'indigo',  'route'=>'admin.subjects.index'],
        ['icon'=>'fa-bell',           'metric'=>$isAr?'الإشعارات العامة':'General notifications','color'=>'rose','route'=>'admin.general_notifications.index'],
        ['icon'=>'fa-award',          'metric'=>$isAr?'الشهادات':'Certificates',         'color'=>'amber',   'route'=>'admin.certificates.issued.index'],
        ['icon'=>'fa-sitemap',        'metric'=>$isAr?'المراحل':'Stages',                'color'=>'emerald', 'route'=>'admin.stages.index'],
    ] as $c)
    @php $m = collect($primaryMetrics)->firstWhere('label', $c['metric']); @endphp
    <a href="{{ route($c['route']) }}" class="group bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 rounded-xl p-3 flex items-center gap-3 hover:border-{{ $c['color'] }}-300 dark:hover:border-{{ $c['color'] }}-700 transition-colors">
        <div class="w-7 h-7 rounded-lg bg-{{ $c['color'] }}-50 dark:bg-{{ $c['color'] }}-950/40 flex items-center justify-center shrink-0">
            <i class="fa-solid {{ $c['icon'] }} text-{{ $c['color'] }}-600 dark:text-{{ $c['color'] }}-400 text-[11px]"></i>
        </div>
        <div class="min-w-0">
            <div class="text-base font-black text-surface-900 dark:text-white font-mono leading-none">{{ number_format($m['value'] ?? 0) }}</div>
            <div class="text-[10px] text-surface-500 dark:text-surface-400 mt-0.5 truncate">{{ $c['metric'] }}</div>
        </div>
    </a>
    @endforeach
</div>

{{-- ═══ Main Grid ═══ --}}
<div class="grid grid-cols-1 xl:grid-cols-[minmax(0,1.5fr)_20rem] gap-5 mb-5">

    {{-- Report Groups --}}
    <div class="space-y-4">
        @foreach($reportGroups as $group)
        <div class="bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 rounded-xl overflow-hidden">
            <div class="px-5 py-3 border-b border-surface-100 dark:border-surface-800 flex items-center justify-between">
                <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ $group['title'] }}</h3>
                <span class="text-[10px] font-black text-surface-400 bg-surface-100 dark:bg-surface-800 px-2 py-0.5 rounded-full">{{ count($group['cards']) }}</span>
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-4">
                @foreach($group['cards'] as $card)
                <div class="p-4 border-e border-b border-surface-100 dark:border-surface-800 last:border-e-0 [&:nth-child(2)]:border-e-0 sm:[&:nth-child(2)]:border-e sm:[&:nth-child(4)]:border-e-0">
                    <div class="flex items-center gap-1.5 mb-2">
                        <i class="fa-solid {{ $card['icon'] }} text-surface-300 dark:text-surface-600 text-[10px]"></i>
                        <span class="text-[10px] font-bold uppercase tracking-wider text-surface-400 dark:text-surface-500 truncate">{{ $card['label'] }}</span>
                    </div>
                    <div class="text-2xl font-black text-surface-900 dark:text-white font-mono">{{ number_format($card['value']) }}</div>
                    <div class="text-[10px] text-surface-400 dark:text-surface-500 mt-0.5 leading-tight">{{ $card['description'] }}</div>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>

    {{-- Right Sidebar --}}
    <div class="space-y-4">

        {{-- System Pulse --}}
        <div class="bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 rounded-xl overflow-hidden">
            <div class="px-5 py-3 border-b border-surface-100 dark:border-surface-800">
                <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ $isAr ? 'نبض النظام' : 'System Pulse' }}</h3>
            </div>
            <div class="grid grid-cols-2 gap-3 p-3">
                @foreach($systemPulseCards as $pulse)
                <div class="bg-surface-50 dark:bg-surface-800 border border-surface-100 dark:border-surface-700 rounded-xl p-3 flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-700 flex items-center justify-center shrink-0">
                        <i class="fa-solid {{ $pulse['icon'] }} {{ $pulse['colorClass'] }} text-xs"></i>
                    </div>
                    <div class="min-w-0">
                        <div class="text-base font-black text-surface-900 dark:text-white font-mono leading-none">{{ number_format($pulse['value']) }}</div>
                        <div class="text-[10px] text-surface-500 dark:text-surface-400 mt-0.5 truncate">{{ $pulse['label'] }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Recent Users --}}
        <div class="bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 rounded-xl overflow-hidden">
            <div class="px-5 py-3 border-b border-surface-100 dark:border-surface-800">
                <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ $isAr ? 'آخر المستخدمين' : 'Recent Users' }}</h3>
            </div>
            <div class="p-3 space-y-2">
                @forelse($recentUserCards as $i => $user)
                <div class="flex items-center gap-3 px-3 py-2.5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-100 dark:border-surface-700">
                    <span class="w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-black shrink-0
                        {{ $i === 0 ? 'bg-brand-100 dark:bg-brand-950/50 text-brand-600' : 'bg-surface-200 dark:bg-surface-700 text-surface-500' }}">
                        {{ $i + 1 }}
                    </span>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-semibold text-surface-900 dark:text-white truncate">{{ $user['name'] }}</div>
                        <div class="text-[10px] text-surface-400">{{ $user['type'] }}</div>
                    </div>
                    @if($user['show_link'])
                    <a href="{{ $user['url'] }}" class="text-[10px] font-bold text-brand-500 hover:text-brand-700 shrink-0">{{ $isAr ? 'عرض' : 'View' }}</a>
                    @endif
                </div>
                @empty
                <div class="py-6 text-center text-xs text-surface-400">—</div>
                @endforelse
            </div>
        </div>

        {{-- Recent Inquiries --}}
        <div class="bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 rounded-xl overflow-hidden">
            <div class="px-5 py-3 border-b border-surface-100 dark:border-surface-800 flex items-center justify-between">
                <h3 class="text-sm font-black text-surface-900 dark:text-white flex items-center gap-2">
                    <i class="fa-solid fa-circle-question text-brand-500 text-xs"></i>{{ $isAr ? 'آخر الاستفسارات' : 'Recent Inquiries' }}
                </h3>
                <a href="{{ route('admin.parent-inquiries.index') }}" class="text-[10px] font-bold text-brand-500 hover:underline">{{ $isAr ? 'الكل' : 'All' }}</a>
            </div>
            <div class="p-3 space-y-2">
                @forelse($recentInquiryCards as $i => $inquiry)
                <a href="{{ $inquiry['url'] }}"
                   class="flex items-center gap-3 px-3 py-2.5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-100 dark:border-surface-700 hover:border-brand-200 dark:hover:border-brand-800 transition-colors">
                    <span class="w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-black shrink-0
                        {{ $i === 0 ? 'bg-brand-100 dark:bg-brand-950/50 text-brand-600' : 'bg-surface-200 dark:bg-surface-700 text-surface-500' }}">{{ $i + 1 }}</span>
                    <div class="flex-1 min-w-0">
                        <div class="text-xs font-semibold text-surface-900 dark:text-white truncate">{{ $inquiry['title'] }}</div>
                        <div class="text-[10px] text-surface-400 truncate">{{ $inquiry['sender_name'] }} · {{ $inquiry['time'] }}</div>
                    </div>
                    <span class="text-[9px] font-black uppercase px-1.5 py-0.5 rounded shrink-0
                        {{ $inquiry['status'] === 'replied' ? 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400' : 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400' }}">
                        {{ $inquiry['status'] }}
                    </span>
                </a>
                @empty
                <div class="py-6 text-center text-xs text-surface-400">—</div>
                @endforelse
            </div>
        </div>

    </div>
</div>

{{-- ═══ Bottom Row: Stages + Top Classes + Teacher Load ═══ --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

    <div class="bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 rounded-xl overflow-hidden">
        <div class="px-5 py-3 border-b border-surface-100 dark:border-surface-800">
            <h3 class="text-sm font-black text-surface-900 dark:text-white flex items-center gap-2">
                <i class="fa-solid fa-layer-group text-emerald-500 text-xs"></i>{{ $isAr ? 'المراحل الدراسية' : 'Stages' }}
            </h3>
        </div>
        <div class="p-3 space-y-2">
            @forelse($stageCards as $i => $stage)
            <div class="flex items-center gap-3 px-3 py-2.5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-100 dark:border-surface-700">
                <span class="w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-black shrink-0
                    {{ $i === 0 ? 'bg-emerald-100 dark:bg-emerald-950/50 text-emerald-600' : 'bg-surface-200 dark:bg-surface-700 text-surface-500' }}">{{ $i + 1 }}</span>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-semibold text-surface-900 dark:text-white truncate">{{ $stage['name'] }}</div>
                    <div class="text-[10px] text-surface-400">{{ $stage['grades_count'] }} {{ $isAr?'صف':'grades' }} · {{ $stage['classes_count'] }} {{ $isAr?'فصل':'classes' }}</div>
                </div>
                <div class="text-end shrink-0">
                    <div class="text-sm font-black text-emerald-600 dark:text-emerald-400 font-mono">{{ $stage['students_count'] }}</div>
                    <div class="text-[9px] text-surface-400">{{ $isAr?'طالب':'stu' }}</div>
                </div>
            </div>
            @empty
            <div class="py-6 text-center text-xs text-surface-400">—</div>
            @endforelse
        </div>
    </div>

    <div class="bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 rounded-xl overflow-hidden">
        <div class="px-5 py-3 border-b border-surface-100 dark:border-surface-800">
            <h3 class="text-sm font-black text-surface-900 dark:text-white flex items-center gap-2">
                <i class="fa-solid fa-school text-brand-500 text-xs"></i>{{ $isAr ? 'أكثر الفصول طلاباً' : 'Top Classes' }}
            </h3>
        </div>
        <div class="p-3 space-y-2">
            @forelse($topClassCards as $i => $class)
            <div class="flex items-center gap-3 px-3 py-2.5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-100 dark:border-surface-700">
                <span class="w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-black shrink-0
                    {{ $i === 0 ? 'bg-brand-100 dark:bg-brand-950/50 text-brand-600' : 'bg-surface-200 dark:bg-surface-700 text-surface-500' }}">{{ $i + 1 }}</span>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-semibold text-surface-900 dark:text-white truncate">{{ $class['name'] }} <span class="text-[10px] text-surface-400 font-normal">{{ $class['grade_name'] }}</span></div>
                    <div class="h-1 bg-surface-200 dark:bg-surface-700 rounded-full mt-1.5 overflow-hidden">
                        <div class="h-full bg-brand-500 rounded-full" style="width:{{ $class['progress'] }}%"></div>
                    </div>
                </div>
                <span class="text-sm font-black text-surface-900 dark:text-white font-mono shrink-0">{{ $class['students_count'] }}</span>
            </div>
            @empty
            <div class="py-6 text-center text-xs text-surface-400">—</div>
            @endforelse
        </div>
    </div>

    <div class="bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 rounded-xl overflow-hidden">
        <div class="px-5 py-3 border-b border-surface-100 dark:border-surface-800">
            <h3 class="text-sm font-black text-surface-900 dark:text-white flex items-center gap-2">
                <i class="fa-solid fa-chalkboard-user text-violet-500 text-xs"></i>{{ $isAr ? 'حمل المعلمين' : 'Teacher Load' }}
            </h3>
        </div>
        <div class="p-3 space-y-2">
            @forelse($teacherLoadCards as $i => $teacher)
            <div class="flex items-center gap-3 px-3 py-2.5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-100 dark:border-surface-700">
                <span class="w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-black shrink-0
                    {{ $i === 0 ? 'bg-violet-100 dark:bg-violet-950/50 text-violet-600' : 'bg-surface-200 dark:bg-surface-700 text-surface-500' }}">{{ $i + 1 }}</span>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-semibold text-surface-900 dark:text-white truncate">{{ $teacher['name'] }}</div>
                    <div class="h-1 bg-surface-200 dark:bg-surface-700 rounded-full mt-1.5 overflow-hidden">
                        <div class="h-full bg-emerald-500 rounded-full" style="width:{{ $teacher['progress'] }}%"></div>
                    </div>
                </div>
                <span class="text-sm font-black text-emerald-600 dark:text-emerald-400 font-mono shrink-0">{{ $teacher['courses_count'] }}</span>
            </div>
            @empty
            <div class="py-6 text-center text-xs text-surface-400">—</div>
            @endforelse
        </div>
    </div>

</div>

@endsection