@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'بوابة ولي الأمر' : 'Parent Portal')
@section('skip_page_hero', true)

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

@section('content')
<div class="space-y-6">

    {{-- Hero --}}
    <section class="overflow-hidden rounded-[2rem] bg-gradient-to-br from-amber-500 via-orange-500 to-rose-500 p-6 text-white shadow-xl">
        <div class="grid gap-6 lg:grid-cols-[1fr_320px] lg:items-center">
            <div>
                <p class="text-xs font-black uppercase tracking-[0.28em] text-white/70">{{ $isArabic ? 'بوابة ولي الأمر' : 'Parent Portal' }}</p>
                <h1 class="mt-3 text-3xl font-black">{{ $isArabic ? 'متابعة الأبناء من شاشة واحدة' : 'Track Every Child From One Screen' }}</h1>
            </div>
            <div class="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
                <div class="rounded-[1.6rem] border border-white/15 bg-white/10 p-4 backdrop-blur">
                    <p class="text-xs font-black uppercase tracking-[0.22em] text-white/70">{{ $isArabic ? 'الأبناء' : 'Children' }}</p>
                    <p class="mt-3 text-3xl font-black">{{ $summary['children_count'] }}</p>
                </div>
                <div class="rounded-[1.6rem] border border-white/15 bg-white/10 p-4 backdrop-blur">
                    <p class="text-xs font-black uppercase tracking-[0.22em] text-white/70">{{ $isArabic ? 'مهام مفتوحة' : 'Open Tasks' }}</p>
                    <p class="mt-3 text-3xl font-black">{{ $summary['open_tasks'] }}</p>
                </div>
                <div class="rounded-[1.6rem] border border-white/15 bg-white/10 p-4 backdrop-blur">
                    <p class="text-xs font-black uppercase tracking-[0.22em] text-white/70">{{ $isArabic ? 'متأخرة' : 'Late' }}</p>
                    <p class="mt-3 text-3xl font-black">{{ $summary['late_assignments'] }}</p>
                </div>
            </div>
        </div>
    </section>

    {{-- Summary Stats --}}
    <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <article class="rounded-[1.6rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-xs font-black uppercase tracking-[0.24em] text-zinc-400">{{ $isArabic ? 'متوسط الدرجات' : 'Avg. Grade' }}</p>
            <p class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">
                {{ $summary['avg_grade'] ? round($summary['avg_grade'], 1) : '—' }}
            </p>
        </article>
        <article class="rounded-[1.6rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-xs font-black uppercase tracking-[0.24em] text-zinc-400">{{ $isArabic ? 'متوسط الحضور' : 'Avg. Attendance' }}</p>
            <p class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">
                {{ $summary['avg_attendance'] ? round($summary['avg_attendance']).'%' : '—' }}
            </p>
        </article>
        <article class="rounded-[1.6rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-xs font-black uppercase tracking-[0.24em] text-zinc-400">{{ $isArabic ? 'واجبات متأخرة' : 'Late Assignments' }}</p>
            <p class="mt-3 text-3xl font-black {{ $summary['late_assignments'] > 0 ? 'text-red-600' : 'text-zinc-900 dark:text-white' }}">
                {{ $summary['late_assignments'] }}
            </p>
        </article>
        <article class="rounded-[1.6rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-xs font-black uppercase tracking-[0.24em] text-zinc-400">{{ $isArabic ? 'مهام قادمة' : 'Pending Tasks' }}</p>
            <p class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $summary['open_tasks'] }}</p>
        </article>
    </section>

    {{-- Children Cards --}}
    <section>
        <div class="mb-4 flex items-center justify-between">
            <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الأبناء' : 'Children' }}</h2>
            <a href="{{ route('parent.inquiries.create') }}"
               class="inline-flex items-center gap-2 rounded-xl bg-amber-500 px-4 py-2 text-sm font-bold text-white transition hover:bg-amber-600">
                <i class="fa-solid fa-paper-plane text-xs"></i>
                {{ $isArabic ? 'مراسلة معلم' : 'Message Teacher' }}
            </a>
        </div>

        @if($childrenData->isEmpty())
            <div class="rounded-[2rem] border border-dashed border-zinc-300 bg-white p-12 text-center dark:border-zinc-700 dark:bg-zinc-900">
                <p class="text-zinc-500">{{ $isArabic ? 'لا يوجد أبناء مرتبطون بحسابك.' : 'No children linked to your account.' }}</p>
            </div>
        @else
            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                @foreach($childrenData as $child)
                <article class="flex flex-col rounded-[2rem] border border-zinc-200 bg-white shadow-sm transition hover:border-amber-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="flex items-center gap-4 p-5 pb-4">
                        <div class="flex h-14 w-14 items-center justify-center rounded-2xl 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 class="min-w-0 flex-1">
                            <h3 class="font-black text-zinc-900 dark:text-white">{{ $child['name'] }}</h3>
                            <p class="mt-0.5 text-xs text-zinc-400 truncate">{{ $child['class'] }}</p>
                            @if($child['stage'])
                                <p class="text-xs text-zinc-400">{{ $child['stage'] }}</p>
                            @endif
                        </div>
                    </div>

                    <div class="grid grid-cols-3 gap-px border-t border-zinc-100 dark:border-zinc-800">
                        <div class="flex flex-col items-center gap-1 py-3 text-center">
                            <span class="text-base font-black text-zinc-900 dark:text-white">
                                {{ $child['grade_avg'] !== null ? $child['grade_avg'] : '—' }}
                            </span>
                            <span class="text-[10px] font-bold text-zinc-400">{{ $isArabic ? 'المعدل' : 'Grade' }}</span>
                        </div>
                        <div class="flex flex-col items-center gap-1 py-3 text-center">
                            <span class="text-base font-black {{ $child['attendance'] !== null && $child['attendance'] < 80 ? 'text-red-600' : 'text-zinc-900 dark:text-white' }}">
                                {{ $child['attendance'] !== null ? $child['attendance'].'%' : '—' }}
                            </span>
                            <span class="text-[10px] font-bold text-zinc-400">{{ $isArabic ? 'الحضور' : 'Attend.' }}</span>
                        </div>
                        <div class="flex flex-col items-center gap-1 py-3 text-center">
                            <span class="text-base font-black {{ $child['late'] > 0 ? 'text-red-600' : 'text-zinc-900 dark:text-white' }}">
                                {{ $child['late'] }}
                            </span>
                            <span class="text-[10px] font-bold text-zinc-400">{{ $isArabic ? 'متأخرة' : 'Late' }}</span>
                        </div>
                    </div>

                    <div class="p-4 pt-0 mt-auto">
                        <a href="{{ route('parent.child', $child['id']) }}"
                           class="flex w-full items-center justify-center gap-2 rounded-2xl bg-amber-500 px-4 py-2.5 text-sm font-bold text-white no-underline transition hover:bg-amber-600">
                            <i class="fa-solid fa-chart-line text-xs"></i>
                            {{ $isArabic ? 'عرض التفاصيل' : 'View Details' }}
                        </a>
                    </div>
                </article>
                @endforeach
            </div>
        @endif
    </section>

    {{-- Quick Links --}}
    <section class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <a href="{{ route('parent.inquiries.index') }}"
           class="flex items-center gap-3 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm transition hover:border-amber-300 dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300">
                <i class="fa-solid fa-envelope"></i>
            </div>
            <span class="font-bold text-zinc-900 dark:text-white text-sm">{{ $isArabic ? 'الاستفسارات' : 'Inquiries' }}</span>
        </a>
        <a href="{{ route('parent.social-care.messages') }}"
           class="flex items-center gap-3 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm transition hover:border-amber-300 dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300">
                <i class="fa-solid fa-heart-pulse"></i>
            </div>
            <span class="font-bold text-zinc-900 dark:text-white text-sm">{{ $isArabic ? 'الرعاية الاجتماعية' : 'Social Care' }}</span>
        </a>
        <a href="{{ route('parent.inquiries.create') }}"
           class="flex items-center gap-3 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm transition hover:border-amber-300 dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300">
                <i class="fa-solid fa-paper-plane"></i>
            </div>
            <span class="font-bold text-zinc-900 dark:text-white text-sm">{{ $isArabic ? 'مراسلة معلم' : 'Message Teacher' }}</span>
        </a>
        <a href="{{ route('parent.support') }}"
           class="flex items-center gap-3 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm transition hover:border-amber-300 dark:border-zinc-800 dark:bg-zinc-900">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300">
                <i class="fa-solid fa-circle-question"></i>
            </div>
            <span class="font-bold text-zinc-900 dark:text-white text-sm">{{ $isArabic ? 'الدعم' : 'Support' }}</span>
        </a>
    </section>

</div>
@endsection