@extends('layouts.main_dashboard.app')

@section('title', $child->name)
@section('skip_page_hero', true)

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

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

    {{-- Header --}}
    <div class="flex items-start gap-3 sm:items-center sm:gap-4">
        <a href="{{ route('parent.home') }}"
           class="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-zinc-200 bg-white text-zinc-500 transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400 sm:mt-0 sm:h-10 sm:w-10">
            <i class="fa-solid fa-arrow-{{ $isArabic ? 'right' : 'left' }} text-sm"></i>
        </a>
        <div class="min-w-0">
            <h1 class="truncate text-xl font-black text-zinc-900 dark:text-white sm:text-2xl">{{ $child->name }}</h1>
            <p class="mt-0.5 truncate text-sm text-zinc-500 dark:text-zinc-400">{{ $child->schoolClass->map->name->join(' / ') }}</p>
        </div>
    </div>

    {{-- Summary Cards --}}
    @php
        $avgMark = $marks->whereNotNull('mark')->avg('mark');
        $submittedCount = collect($assignments)->where('submitted', true)->count();
        $totalAssignments = collect($assignments)->count();
        $quizAvg = $quizResults->whereNotNull('pct')->avg('pct');
    @endphp
    <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 text-center shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-3xl font-black text-zinc-900 dark:text-white">{{ $avgMark ? number_format($avgMark, 1) : '—' }}</p>
            <p class="mt-1 text-xs font-bold text-zinc-400">{{ $isArabic ? 'متوسط الدرجات' : 'Avg. Mark' }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 text-center shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-3xl font-black {{ ($attendanceSummary['pct'] ?? 100) >= 80 ? 'text-emerald-600' : 'text-amber-600' }}">
                {{ $attendanceSummary['pct'] !== null ? $attendanceSummary['pct'].'%' : '—' }}
            </p>
            <p class="mt-1 text-xs font-bold text-zinc-400">{{ $isArabic ? 'نسبة الحضور' : 'Attendance' }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 text-center shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-3xl font-black text-zinc-900 dark:text-white">{{ $submittedCount }}/{{ $totalAssignments }}</p>
            <p class="mt-1 text-xs font-bold text-zinc-400">{{ $isArabic ? 'الواجبات المسلّمة' : 'Assignments' }}</p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 text-center shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <p class="text-3xl font-black text-zinc-900 dark:text-white">{{ $quizAvg ? number_format($quizAvg, 0).'%' : '—' }}</p>
            <p class="mt-1 text-xs font-bold text-zinc-400">{{ $isArabic ? 'متوسط الاختبارات' : 'Quiz Avg.' }}</p>
        </div>
    </div>

    {{-- Marks Trend Chart --}}
    @if($marksTrend->isNotEmpty())
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <h2 class="mb-4 text-lg font-black text-zinc-900 dark:text-white">
            <i class="fa-solid fa-chart-line me-2 text-brand-500"></i>
            {{ $isArabic ? 'مسار الدرجات' : 'Marks Trend' }}
        </h2>
        <canvas id="marksTrendChart" height="80"></canvas>
    </section>
    @endif

    {{-- Per-Subject Breakdown --}}
    @if($marksBySubject->isNotEmpty())
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">
                <i class="fa-solid fa-book-open me-2 text-violet-500"></i>
                {{ $isArabic ? 'الأداء حسب المادة' : 'Performance by Subject' }}
            </h2>
        </div>
        <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
            @foreach($marksBySubject as $subject => $data)
            <div class="flex flex-col gap-2 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                <div>
                    <p class="font-bold text-zinc-900 dark:text-white">{{ $subject }}</p>
                    <p class="mt-0.5 text-xs text-zinc-400">{{ $data['count'] }} {{ $isArabic ? 'درجة' : 'marks' }}</p>
                </div>
                <div class="flex items-center gap-3">
                    <div class="h-2 flex-1 sm:w-24 sm:flex-none overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
                        @php $pct = min(100, max(0, ($data['avg'] / 100) * 100)); @endphp
                        <div class="h-full rounded-full {{ $data['avg'] >= 70 ? 'bg-emerald-500' : ($data['avg'] >= 50 ? 'bg-amber-500' : 'bg-red-500') }}"
                             style="width: {{ $pct }}%"></div>
                    </div>
                    <span class="w-12 text-end text-lg font-black {{ $data['avg'] >= 70 ? 'text-emerald-600' : ($data['avg'] >= 50 ? 'text-amber-600' : 'text-red-600') }}">
                        {{ $data['avg'] }}
                    </span>
                </div>
            </div>
            @endforeach
        </div>
    </section>
    @endif

    {{-- Attendance Summary --}}
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <h2 class="mb-4 text-lg font-black text-zinc-900 dark:text-white">
            <i class="fa-solid fa-calendar-check me-2 text-amber-500"></i>
            {{ $isArabic ? 'الحضور والغياب' : 'Attendance' }}
        </h2>
        <div class="grid gap-3 grid-cols-2 sm:grid-cols-4">
            <div class="rounded-2xl bg-zinc-50 p-4 text-center dark:bg-zinc-800">
                <p class="text-2xl font-black text-zinc-900 dark:text-white">{{ $attendanceSummary['total'] }}</p>
                <p class="mt-1 text-xs font-bold text-zinc-400">{{ $isArabic ? 'إجمالي الحصص' : 'Total' }}</p>
            </div>
            <div class="rounded-2xl bg-emerald-50 p-4 text-center dark:bg-emerald-500/10">
                <p class="text-2xl font-black text-emerald-700 dark:text-emerald-400">{{ $attendanceSummary['present'] }}</p>
                <p class="mt-1 text-xs font-bold text-emerald-600">{{ $isArabic ? 'حاضر' : 'Present' }}</p>
            </div>
            <div class="rounded-2xl bg-red-50 p-4 text-center dark:bg-red-500/10">
                <p class="text-2xl font-black text-red-700 dark:text-red-400">{{ $attendanceSummary['absent'] }}</p>
                <p class="mt-1 text-xs font-bold text-red-600">{{ $isArabic ? 'غائب' : 'Absent' }}</p>
            </div>
            <div class="rounded-2xl {{ ($attendanceSummary['pct'] ?? 100) >= 80 ? 'bg-sky-50 dark:bg-sky-500/10' : 'bg-amber-50 dark:bg-amber-500/10' }} p-4 text-center">
                <p class="text-2xl font-black {{ ($attendanceSummary['pct'] ?? 100) >= 80 ? 'text-sky-700 dark:text-sky-400' : 'text-amber-700 dark:text-amber-400' }}">
                    {{ $attendanceSummary['pct'] !== null ? $attendanceSummary['pct'].'%' : '—' }}
                </p>
                <p class="mt-1 text-xs font-bold {{ ($attendanceSummary['pct'] ?? 100) >= 80 ? 'text-sky-600' : 'text-amber-600' }}">
                    {{ $isArabic ? 'نسبة الحضور' : 'Rate' }}
                </p>
            </div>
        </div>
    </section>

    {{-- Quiz Results --}}
    @if($quizResults->isNotEmpty())
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">
                <i class="fa-solid fa-clipboard-question me-2 text-indigo-500"></i>
                {{ $isArabic ? 'نتائج الاختبارات' : 'Quiz Results' }}
            </h2>
        </div>
        <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
            @foreach($quizResults as $qr)
            <div class="flex flex-col gap-2 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                <div>
                    <p class="font-bold text-zinc-900 dark:text-white">{{ $qr['title'] }}</p>
                    <p class="mt-0.5 text-xs text-zinc-400">{{ $qr['subject'] }} · {{ $qr['date'] }}</p>
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-sm font-bold text-zinc-500">{{ $qr['score'] }}/{{ $qr['max'] }}</span>
                    <span class="rounded-full px-3 py-1 text-xs font-black
                        {{ $qr['passed'] ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400' : 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' }}">
                        {{ $qr['pct'] !== null ? $qr['pct'].'%' : '—' }}
                    </span>
                </div>
            </div>
            @endforeach
        </div>
    </section>
    @endif

    {{-- Marks List --}}
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">
                <i class="fa-solid fa-star me-2 text-amber-500"></i>
                {{ $isArabic ? 'الدرجات التفصيلية' : 'Detailed Marks' }}
            </h2>
        </div>
        @if($marks->isEmpty())
            <div class="px-6 py-10 text-center text-sm text-zinc-400">{{ $isArabic ? 'لا توجد درجات منشورة.' : 'No published marks yet.' }}</div>
        @else
            <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                @foreach($marks->sortByDesc(fn($ms) => $ms->mark->date) as $ms)
                <div class="flex flex-col gap-2 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                    <div>
                        <p class="font-bold text-zinc-900 dark:text-white">{{ $ms->mark->title }}</p>
                        <p class="mt-0.5 text-xs text-zinc-400">
                            {{ $ms->mark->course?->subject?->name }}
                            @if($ms->mark->date) · {{ $ms->mark->date->format('Y-m-d') }} @endif
                        </p>
                    </div>
                    <div class="text-start sm:text-end">
                        @if($ms->absent)
                            <span class="rounded-full bg-red-100 px-3 py-1 text-xs font-black text-red-700 dark:bg-red-500/20 dark:text-red-400">{{ $isArabic ? 'غائب' : 'Absent' }}</span>
                        @else
                            <span class="text-xl font-black text-zinc-900 dark:text-white">{{ $ms->mark }}</span>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </section>

    {{-- Assignments --}}
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">
                <i class="fa-solid fa-list-check me-2 text-amber-500"></i>
                {{ $isArabic ? 'الواجبات' : 'Assignments' }}
            </h2>
        </div>
        @if(collect($assignments)->isEmpty())
            <div class="px-6 py-10 text-center text-sm text-zinc-400">{{ $isArabic ? 'لا توجد واجبات.' : 'No assignments.' }}</div>
        @else
            <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                @foreach($assignments as $a)
                <div class="flex flex-col gap-2 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                    <div>
                        <p class="font-bold text-zinc-900 dark:text-white">{{ $a['title'] }}</p>
                        <p class="mt-0.5 text-xs text-zinc-400">
                            {{ $a['subject'] }}
                            @if($a['due_date']) · {{ $a['due_date']->format('Y-m-d') }} @endif
                        </p>
                    </div>
                    <div>
                        @if($a['submitted'])
                            <span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-black text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400">{{ $isArabic ? 'تم التسليم' : 'Submitted' }}</span>
                        @elseif($a['late'])
                            <span class="rounded-full bg-red-100 px-3 py-1 text-xs font-black text-red-700 dark:bg-red-500/20 dark:text-red-400">{{ $isArabic ? 'متأخر' : 'Late' }}</span>
                        @else
                            <span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-black text-amber-700 dark:bg-amber-500/20 dark:text-amber-400">{{ $isArabic ? 'بانتظار التسليم' : 'Pending' }}</span>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </section>

    {{-- Export --}}
    @php $childCourseIds = \App\Models\Course::whereIn('school_class_id', $child->schoolClass->pluck('id'))->pluck('id'); @endphp
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <p class="mb-3 text-xs font-black uppercase tracking-widest text-zinc-400">{{ $isArabic ? 'تصدير التقارير' : 'Export Reports' }}</p>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('parent.reports.child.pdf', $child->id) }}"
               class="flex items-center gap-2 rounded-2xl bg-amber-500 px-4 py-2 text-sm font-bold text-white hover:bg-amber-600 no-underline">
                <i class="fa-solid fa-file-pdf text-xs"></i>
                {{ $isArabic ? 'تقرير شامل' : 'Full Report' }}
            </a>
            @foreach(\App\Models\Course::whereIn('id', $childCourseIds)->with('subject')->get() as $c)
            <div class="flex flex-wrap items-center gap-2 rounded-2xl border border-zinc-200 px-3 py-2 dark:border-zinc-700">
                <span class="text-xs font-bold text-zinc-600 dark:text-zinc-300">{{ $c->subject?->name ?? $c->name }}</span>
                <a href="{{ route('parent.reports.marks.pdf', $c->id) }}" class="rounded-lg bg-red-50 px-2 py-1 text-xs font-bold text-red-600 hover:bg-red-100 dark:bg-red-500/10 dark:text-red-400">
                    <i class="fa-solid fa-file-pdf me-1 text-xs"></i>{{ $isArabic ? 'درجات' : 'Marks' }}
                </a>
                <a href="{{ route('parent.reports.attendance.pdf', $c->id) }}" class="rounded-lg bg-sky-50 px-2 py-1 text-xs font-bold text-sky-600 hover:bg-sky-100 dark:bg-sky-500/10 dark:text-sky-400">
                    <i class="fa-solid fa-file-pdf me-1 text-xs"></i>{{ $isArabic ? 'حضور' : 'Attend.' }}
                </a>
            </div>
            @endforeach
        </div>
    </section>

</div>
@endsection

@if($marksTrend->isNotEmpty())
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
const isDark = document.documentElement.classList.contains('dark');
const trendData = @json($marksTrend);
new Chart(document.getElementById('marksTrendChart'), {
    type: 'line',
    data: {
        labels: trendData.map(d => d.label),
        datasets: [{
            label: '{{ $isArabic ? "الدرجة" : "Mark" }}',
            data: trendData.map(d => d.value),
            borderColor: '#6366f1',
            backgroundColor: 'rgba(99,102,241,0.1)',
            borderWidth: 2,
            pointRadius: 4,
            tension: 0.3,
            fill: true,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: false, grid: { color: isDark ? '#27272a' : '#f4f4f5' } },
            x: { ticks: { maxRotation: 30, font: { size: 10 } }, grid: { display: false } }
        }
    }
});
</script>
@endpush
@endif