@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'الأبناء والأداء' : 'Children & Performance')
@section('skip_page_hero', true)

@php
    $isArabic = app()->getLocale() === 'ar';
    $children = $children ?? collect();
@endphp

@section('content')
<div class="space-y-6">
    <section class="rounded-[2rem] border border-zinc-200 bg-white/80 p-6 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70">
        <p class="text-xs font-black uppercase tracking-[0.28em] text-zinc-400">{{ $isArabic ? 'ملف الأبناء' : 'Child Profiles' }}</p>
        <h1 class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الأبناء والأداء الأكاديمي' : 'Children & Academic Performance' }}</h1>
        <p class="mt-2 max-w-3xl text-sm leading-6 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'متابعة تفصيلية لكل طفل: الأداء، الحضور، الواجبات، ونقاط المتابعة التي تحتاج تدخلك.' : 'Detailed tracking for each child: performance, attendance, assignments, and the items that need your intervention.' }}</p>
    </section>

    <div class="space-y-4">
        @foreach($children as $child)
            <article class="rounded-[1.8rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
                    <div>
                        <div class="flex items-center gap-4">
                            <div class="flex h-16 w-16 items-center justify-center rounded-[1.4rem] bg-amber-100 text-xl font-black text-amber-700 dark:bg-amber-500/15 dark:text-amber-300">
                                {{ mb_substr($child['name'], 0, 1) }}
                            </div>
                            <div>
                                <h2 class="text-2xl font-black text-zinc-900 dark:text-white">{{ $child['name'] }}</h2>
                                <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $child['class'] }} · {{ $child['stage'] }}</p>
                            </div>
                        </div>

                        <div class="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                            <div class="rounded-2xl bg-zinc-50 px-4 py-4 dark:bg-zinc-800/70">
                                <p class="text-[11px] font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'المعدل' : 'Average' }}</p>
                                <p class="mt-2 text-lg font-black text-zinc-900 dark:text-white">{{ $child['grade_average'] }}</p>
                            </div>
                            <div class="rounded-2xl bg-zinc-50 px-4 py-4 dark:bg-zinc-800/70">
                                <p class="text-[11px] font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'الحضور' : 'Attendance' }}</p>
                                <p class="mt-2 text-lg font-black text-zinc-900 dark:text-white">{{ $child['attendance'] }}</p>
                            </div>
                            <div class="rounded-2xl bg-zinc-50 px-4 py-4 dark:bg-zinc-800/70">
                                <p class="text-[11px] font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'واجبات مفتوحة' : 'Open Assignments' }}</p>
                                <p class="mt-2 text-lg font-black text-zinc-900 dark:text-white">{{ $child['open_tasks'] }}</p>
                            </div>
                            <div class="rounded-2xl bg-zinc-50 px-4 py-4 dark:bg-zinc-800/70">
                                <p class="text-[11px] font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'مادة تحتاج متابعة' : 'Needs Attention' }}</p>
                                <p class="mt-2 text-lg font-black text-zinc-900 dark:text-white">{{ $child['focus'] }}</p>
                            </div>
                        </div>

                        <div class="mt-5 rounded-[1.4rem] border border-zinc-200 p-4 dark:border-zinc-700">
                            <p class="text-sm font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'ملاحظات المتابعة' : 'Follow-up Notes' }}</p>
                            <ul class="mt-3 space-y-2 text-sm leading-7 text-zinc-500 dark:text-zinc-400">
                                @foreach($child['notes'] as $note)
                                    <li>{{ $note }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="rounded-[1.4rem] border border-zinc-200 p-4 dark:border-zinc-700">
                            <p class="text-xs font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'الحالة الحالية' : 'Current Status' }}</p>
                            <p class="mt-3 text-lg font-black text-zinc-900 dark:text-white">{{ $child['status'] }}</p>
                            <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $child['status_hint'] }}</p>
                        </div>

                        <div class="rounded-[1.4rem] border border-zinc-200 p-4 dark:border-zinc-700">
                            <p class="text-xs font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'هذا الأسبوع' : 'This Week' }}</p>
                            <div class="mt-3 space-y-3">
                                @foreach($child['week'] as $row)
                                    <div class="flex items-center justify-between gap-4 rounded-xl bg-zinc-50 px-3 py-3 dark:bg-zinc-800/60">
                                        <span class="text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $row['label'] }}</span>
                                        <span class="text-sm font-black text-zinc-900 dark:text-white">{{ $row['value'] }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        @endforeach
    </div>
</div>
@endsection