@extends('layouts.main_dashboard.app')
@section('title', __('dashboard.Student Performance Trend'))
@section('page_heading', __('dashboard.Student Performance Trend'))

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

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

    {{-- Filter --}}
    <form method="GET" class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div class="flex flex-wrap items-end gap-4">
            <div class="flex-1 min-w-[200px]">
                <label class="mb-1.5 block text-xs font-bold text-zinc-500">{{ $isArabic ? 'اختر الطالب' : 'Select Student' }}</label>
                <select name="student_id" class="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-800 dark:text-white">
                    <option value="">— {{ $isArabic ? 'اختر' : 'Choose' }} —</option>
                    @foreach($students as $s)
                        <option value="{{ $s->id }}" @selected($s->id == $selectedStudentId)>{{ $s->name }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="rounded-xl bg-brand-600 px-5 py-2 text-sm font-bold text-white hover:bg-brand-700">
                {{ $isArabic ? 'عرض' : 'Show' }}
            </button>
        </div>
    </form>

    @if($student)

    {{-- Summary --}}
    @if($attendanceSummary)
    <div class="grid gap-4 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">{{ $trendData->count() }}</p>
            <p class="mt-1 text-xs font-bold text-zinc-400">{{ $isArabic ? 'إجمالي الدرجات' : 'Total Marks' }}</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">
                {{ $trendData->isNotEmpty() ? number_format($trendData->avg('value'), 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">{{ $quizTrend->count() }}</p>
            <p class="mt-1 text-xs font-bold text-zinc-400">{{ $isArabic ? 'اختبارات مكتملة' : 'Quizzes Done' }}</p>
        </div>
    </div>
    @endif

    {{-- Marks Trend Chart --}}
    @if($trendData->isNotEmpty())
    <div 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>
    </div>
    @endif

    {{-- Quiz Trend Chart --}}
    @if($quizTrend->isNotEmpty())
    <div 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-clipboard-question me-2 text-indigo-500"></i>
            {{ $isArabic ? 'مسار الاختبارات' : 'Quiz Trend' }}
        </h2>
        <canvas id="quizTrendChart" height="80"></canvas>
    </div>
    @endif

    {{-- Marks Table --}}
    @if($trendData->isNotEmpty())
    <div 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">{{ $isArabic ? 'تفاصيل الدرجات' : 'Marks Detail' }}</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-zinc-50 dark:bg-zinc-800">
                    <tr>
                        <th class="px-6 py-3 text-start text-xs font-bold text-zinc-500">{{ $isArabic ? 'الاختبار' : 'Test' }}</th>
                        <th class="px-6 py-3 text-start text-xs font-bold text-zinc-500">{{ $isArabic ? 'المادة' : 'Subject' }}</th>
                        <th class="px-6 py-3 text-start text-xs font-bold text-zinc-500">{{ $isArabic ? 'التاريخ' : 'Date' }}</th>
                        <th class="px-6 py-3 text-end text-xs font-bold text-zinc-500">{{ $isArabic ? 'الدرجة' : 'Mark' }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
                    @foreach($trendData->sortByDesc('date') as $row)
                    <tr>
                        <td class="px-6 py-3 font-medium text-zinc-900 dark:text-white">{{ $row['label'] }}</td>
                        <td class="px-6 py-3 text-zinc-500">{{ $row['subject'] }}</td>
                        <td class="px-6 py-3 text-zinc-500">{{ $row['date'] }}</td>
                        <td class="px-6 py-3 text-end font-black text-zinc-900 dark:text-white">{{ $row['value'] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    @else
    <div class="rounded-[1.75rem] border border-zinc-200 bg-white px-6 py-16 text-center shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <i class="fa-solid fa-chart-line mb-3 text-4xl text-zinc-300"></i>
        <p class="text-sm text-zinc-400">{{ $isArabic ? 'اختر طالباً لعرض تقرير أدائه.' : 'Select a student to view their performance report.' }}</p>
    </div>
    @endif

</div>
@endsection

@if(isset($trendData) && $trendData->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 gridColor = isDark ? '#27272a' : '#f4f4f5';

@if($trendData->isNotEmpty())
new Chart(document.getElementById('marksTrendChart'), {
    type: 'line',
    data: {
        labels: @json($trendData->pluck('label')),
        datasets: [{ label: '{{ $isArabic ? "الدرجة" : "Mark" }}', data: @json($trendData->pluck('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: gridColor } }, x: { ticks: { maxRotation: 30, font: { size: 10 } }, grid: { display: false } } } }
});
@endif

@if($quizTrend->isNotEmpty())
new Chart(document.getElementById('quizTrendChart'), {
    type: 'bar',
    data: {
        labels: @json($quizTrend->pluck('label')),
        datasets: [{ label: '%', data: @json($quizTrend->pluck('pct')),
            backgroundColor: @json($quizTrend->map(fn($q) => $q['pct'] >= 50 ? 'rgba(16,185,129,0.7)' : 'rgba(239,68,68,0.7)')),
            borderRadius: 6 }]
    },
    options: { responsive: true, plugins: { legend: { display: false } },
        scales: { y: { min: 0, max: 100, grid: { color: gridColor } }, x: { ticks: { maxRotation: 30, font: { size: 10 } }, grid: { display: false } } } }
});
@endif
</script>
@endpush
@endif