@extends('layouts.main_dashboard.app')
@section('title', __('dashboard.Class Comparison'))
@section('page_heading', __('dashboard.Class Comparison'))

@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">
        <p class="mb-3 text-xs font-black uppercase tracking-widest text-zinc-400">{{ $isArabic ? 'اختر فصلين أو أكثر للمقارنة' : 'Select 2+ classes to compare' }}</p>
        <div class="flex flex-wrap gap-3">
            @foreach($grades as $grade)
                @foreach($grade->schoolClasses as $class)
                <label class="flex cursor-pointer items-center gap-2 rounded-xl border px-3 py-2 text-sm font-bold transition
                    {{ in_array($class->id, $selectedClassIds) ? 'border-brand-500 bg-brand-50 text-brand-700 dark:bg-brand-500/10 dark:text-brand-300' : 'border-zinc-200 text-zinc-600 hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-300' }}">
                    <input type="checkbox" name="class_ids[]" value="{{ $class->id }}" class="hidden" {{ in_array($class->id, $selectedClassIds) ? 'checked' : '' }}>
                    {{ $class->name }}
                    <span class="text-xs font-normal text-zinc-400">({{ $grade->name }})</span>
                </label>
                @endforeach
            @endforeach
        </div>
        <div class="mt-4">
            <button type="submit" class="rounded-xl bg-brand-600 px-5 py-2 text-sm font-bold text-white hover:bg-brand-700">
                {{ $isArabic ? 'مقارنة' : 'Compare' }}
            </button>
        </div>
    </form>

    @if($classData->count() >= 2)

    {{-- Comparison Table --}}
    <div class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900 overflow-x-auto">
        <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-table-columns me-2 text-brand-500"></i>
                {{ $isArabic ? 'مقارنة الفصول' : 'Class Comparison' }}
            </h2>
        </div>
        <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 ? 'المؤشر' : 'Metric' }}</th>
                    @foreach($classData as $c)
                    <th class="px-6 py-3 text-center text-xs font-bold text-zinc-500">{{ $c['name'] }}<br><span class="font-normal text-zinc-400">{{ $c['grade'] }}</span></th>
                    @endforeach
                </tr>
            </thead>
            <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
                @php
                    $metrics = [
                        ['key' => 'students_count', 'label' => $isArabic ? 'عدد الطلاب' : 'Students', 'suffix' => ''],
                        ['key' => 'courses_count', 'label' => $isArabic ? 'عدد المساقات' : 'Courses', 'suffix' => ''],
                        ['key' => 'avg_mark', 'label' => $isArabic ? 'متوسط الدرجات' : 'Avg. Mark', 'suffix' => ''],
                        ['key' => 'attendance_pct', 'label' => $isArabic ? 'نسبة الحضور' : 'Attendance', 'suffix' => '%'],
                        ['key' => 'quiz_pass_rate', 'label' => $isArabic ? 'معدل نجاح الاختبارات' : 'Quiz Pass Rate', 'suffix' => '%'],
                        ['key' => 'assignment_rate', 'label' => $isArabic ? 'معدل تسليم الواجبات' : 'Assignment Rate', 'suffix' => '%'],
                    ];
                @endphp
                @foreach($metrics as $metric)
                <tr>
                    <td class="px-6 py-4 font-bold text-zinc-700 dark:text-zinc-300">{{ $metric['label'] }}</td>
                    @foreach($classData as $c)
                    @php
                        $val = $c[$metric['key']];
                        $best = $classData->max($metric['key']);
                        $isBest = $val !== null && $val == $best && $best > 0;
                    @endphp
                    <td class="px-6 py-4 text-center font-black {{ $isBest ? 'text-emerald-600 dark:text-emerald-400' : 'text-zinc-900 dark:text-white' }}">
                        {{ $val !== null ? $val . $metric['suffix'] : '—' }}
                        @if($isBest) <i class="fa-solid fa-crown text-xs text-amber-400 ms-1"></i> @endif
                    </td>
                    @endforeach
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Chart --}}
    <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-bar me-2 text-indigo-500"></i>
            {{ $isArabic ? 'مقارنة بصرية' : 'Visual Comparison' }}
        </h2>
        <canvas id="comparisonChart" height="80"></canvas>
    </div>

    @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-table-columns mb-3 text-4xl text-zinc-300"></i>
        <p class="text-sm text-zinc-400">{{ $isArabic ? 'اختر فصلين على الأقل للمقارنة.' : 'Select at least 2 classes to compare.' }}</p>
    </div>
    @endif

</div>
@endsection

@if($classData->count() >= 2)
@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 labels = @json($classData->pluck('name'));
const colors = ['#6366f1','#10b981','#f59e0b','#ef4444','#8b5cf6','#06b6d4'];

new Chart(document.getElementById('comparisonChart'), {
    type: 'bar',
    data: {
        labels: ['{{ $isArabic ? "متوسط الدرجات" : "Avg Mark" }}','{{ $isArabic ? "الحضور%" : "Attend%" }}','{{ $isArabic ? "نجاح الاختبارات%" : "Quiz Pass%" }}','{{ $isArabic ? "تسليم الواجبات%" : "Assign%" }}'],
        datasets: @json($classData->map(fn($c, $i) => [
            'label' => $c['name'],
            'data' => [$c['avg_mark'], $c['attendance_pct'], $c['quiz_pass_rate'], $c['assignment_rate']],
            'backgroundColor' => ['#6366f1','#10b981','#f59e0b','#ef4444','#8b5cf6','#06b6d4'][$loop->index % 6] ?? '#6366f1',
            'borderRadius' => 6,
        ])->values())
    },
    options: {
        responsive: true,
        plugins: { legend: { position: 'top' } },
        scales: { y: { min: 0, max: 100, grid: { color: isDark ? '#27272a' : '#f4f4f5' } }, x: { grid: { display: false } } }
    }
});

// Make checkboxes toggle visually
document.querySelectorAll('label input[type=checkbox]').forEach(cb => {
    cb.addEventListener('change', function() {
        this.closest('label').classList.toggle('border-brand-500', this.checked);
        this.closest('label').classList.toggle('bg-brand-50', this.checked);
    });
});
</script>
@endpush
@endif