@extends('layouts.superadmin')

@section('title', 'Weekly Tests Analytics')
@section('page-title', 'منظومة الذكاء (EES) - تحليلات الاختبارات الأسبوعية')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
    <div class="max-w-6xl mx-auto px-4 rtl text-white">

        {{-- هيدر --}}
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                            ring-2 ring-violet-500/70 shadow-lg shadow-violet-500/40">
                    <i class="fa-solid fa-file-circle-check text-violet-300 text-xl"></i>
                </div>
                <div class="text-center sm:text-right">
                    <h1 class="text-xl sm:text-2xl font-bold">تحليلات الاختبارات الأسبوعية</h1>
                    <p class="text-sm text-slate-300/80">
                        لكل اختبار: عدد المشاركين، عدد المحاولات، متوسط العلامة، أعلى وأقل علامة ضمن الفترة المحددة.
                    </p>
                </div>
            </div>
        </div>

        {{-- ملخص --}}
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-5">
            <div class="rounded-2xl border border-slate-800 bg-slate-900/70 p-4">
                <div class="text-[11px] text-slate-400">عدد الاختبارات في التحليل</div>
                <div class="text-xl font-bold text-white mt-1">{{ (int)($summary['tests'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-sky-500/25 bg-sky-500/5 p-4">
                <div class="text-[11px] text-sky-100/80">إجمالي الـ Submissions</div>
                <div class="text-xl font-bold text-sky-100 mt-1">{{ (int)($summary['submissions'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-emerald-500/25 bg-emerald-500/5 p-4">
                <div class="text-[11px] text-emerald-100/80">إجمالي المشاركين (مميزين)</div>
                <div class="text-xl font-bold text-emerald-100 mt-1">{{ (int)($summary['participants'] ?? 0) }}</div>
            </div>
        </div>

        {{-- فلاتر --}}
        <form method="GET" action="{{ route('superadmin.falcon-room.ees.tests-analytics') }}"
              class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-4 sm:p-5 shadow-xl">
            <div class="grid gap-4 md:grid-cols-4 grid-cols-1">
                <div class="flex flex-col gap-1 md:col-span-2">
                    <label class="text-xs text-slate-300 mb-1">اختبار معيّن (اختياري)</label>
                    <select name="test_id"
                            class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                   focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500">
                        <option value="">كل الاختبارات</option>
                        @foreach($testsList as $t)
                            <option value="{{ $t->id }}" @selected($testId == $t->id)>{{ $t->title }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">من (حسب submitted_at)</label>
                    <input type="date" name="from" value="{{ $from }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">إلى</label>
                    <input type="date" name="to" value="{{ $to }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500">
                </div>
            </div>

            <div class="mt-3 flex flex-wrap items-center gap-2">
                <button class="inline-flex items-center justify-center rounded-xl bg-violet-500 px-4 py-2 text-sm font-semibold
                               text-slate-950 hover:bg-violet-400 transition">
                    <i class="fa-solid fa-filter ml-2 text-xs"></i>
                    تطبيق الفلاتر
                </button>

                <a href="{{ route('superadmin.falcon-room.ees.tests-analytics') }}"
                   class="inline-flex items-center justify-center rounded-xl border border-slate-600 px-4 py-2 text-sm
                          font-medium text-slate-200 hover:bg-slate-800/80 transition">
                    إعادة ضبط
                </a>
            </div>
        </form>

        @php
            $totalRows = method_exists($rows, 'total') ? $rows->total() : $rows->count();
        @endphp

        {{-- جدول الاختبارات --}}
        <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden mb-4">
            <div class="border-b border-slate-800 px-4 py-3 flex items-center justify-between">
                <div>
                    <h2 class="text-sm sm:text-base font-semibold">نتائج الاختبارات</h2>
                    <p class="text-[11px] text-slate-400">
                        يعرض فقط الاختبارات التي تحتوي على Submissions ضمن الفترة المحددة.
                    </p>
                </div>
                <span class="text-[11px] text-slate-400">
                    عدد الاختبارات: {{ $totalRows }}
                </span>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs sm:text-sm text-slate-200">
                    <thead class="bg-slate-900/90 border-b border-slate-800 text-[11px] uppercase tracking-wide">
                        <tr>
                            <th class="px-3 py-2 text-right">العنوان</th>
                            <th class="px-3 py-2 text-right">الفئة المستهدفة</th>
                            <th class="px-3 py-2 text-right">المشاركون</th>
                            <th class="px-3 py-2 text-right">Submissions</th>
                            <th class="px-3 py-2 text-right">متوسط العلامة</th>
                            <th class="px-3 py-2 text-right">أعلى علامة</th>
                            <th class="px-3 py-2 text-right">أقل علامة</th>
                            <th class="px-3 py-2 text-right">من → إلى</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800">
                        @forelse($rows as $row)
                            @php
                                $avg = $row->avg_score !== null ? round($row->avg_score, 1) : null;
                                $first = $row->first_submit
                                    ? \Carbon\Carbon::parse($row->first_submit)->format('Y-m-d')
                                    : '—';
                                $last = $row->last_submit
                                    ? \Carbon\Carbon::parse($row->last_submit)->format('Y-m-d')
                                    : '—';
                            @endphp
                            <tr class="hover:bg-slate-800/50">
                                <td class="px-3 py-2 align-top text-[12px] font-semibold text-slate-100">
                                    {{ $row->title }}
                                </td>
                                <td class="px-3 py-2 align-top text-[11px] text-slate-300">
                                    {{ $row->audience }}
                                </td>
                                <td class="px-3 py-2 align-top text-center text-sky-200">
                                    {{ (int)$row->participants_count }}
                                </td>
                                <td class="px-3 py-2 align-top text-center text-slate-100">
                                    {{ (int)$row->submissions_count }}
                                </td>
                                <td class="px-3 py-2 align-top text-center">
                                    @if($avg !== null)
                                        <span class="inline-flex items-center justify-center rounded-xl px-2 py-1 text-[11px]
                                                     bg-emerald-500/10 text-emerald-200 border border-emerald-500/30">
                                            {{ $avg }}
                                        </span>
                                    @else
                                        <span class="text-[11px] text-slate-500">—</span>
                                    @endif
                                </td>
                                <td class="px-3 py-2 align-top text-center text-emerald-200">
                                    {{ (int)$row->max_score }}
                                </td>
                                <td class="px-3 py-2 align-top text-center text-rose-200">
                                    {{ (int)$row->min_score }}
                                </td>
                                <td class="px-3 py-2 align-top text-[11px] text-slate-300">
                                    {{ $first }} → {{ $last }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-4 py-8 text-center text-slate-400">
                                    لا توجد اختبارات ضمن الشروط الحالية للفلاتر.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if(method_exists($rows, 'hasPages') && $rows->hasPages())
                <div class="px-4 py-3 border-t border-slate-800">
                    {{ $rows->links() }}
                </div>
            @endif
        </div>

        <div class="mt-5 text-[11px] text-slate-500 text-center">
            هذه اللوحة تساعدك تعرف أي اختبار فعلاً “دخل للناس”: من شارك، كم مرة، وكيف كانت العلامات بشكل عام.
        </div>

    </div>
</div>
@endsection