@php
    $user = auth()->user();

    if ($user->hasRole('super-admin')) $layout = 'layouts.superadmin';
    elseif ($user->hasRole('advisor')) $layout = 'layouts.advisor';
    elseif ($user->hasRole('moderator')) $layout = 'layouts.moderator';
    else $layout = 'layouts.member';

    $from  = $from  ?? request('from','');
    $to    = $to    ?? request('to','');
    $qText = $qText ?? request('q','');
@endphp


@extends($layout)
@section('title','اختباراتي ومعدلاتي')

@section('content')
@php
    $from  = $from  ?? request('from','');
    $to    = $to    ?? request('to','');
    $qText = $qText ?? request('q','');
@endphp

<div class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 px-3 sm:px-6 py-6 rtl">
    <div class="max-w-6xl mx-auto space-y-5">

        {{-- HERO --}}
        <div class="relative overflow-hidden rounded-3xl border border-indigo-500/25
                    bg-gradient-to-br from-slate-950 via-indigo-950/35 to-slate-950
                    shadow-xl shadow-indigo-500/10 p-5 sm:p-6 text-white">
            <div class="pointer-events-none absolute -top-24 -left-16 w-72 h-72 rounded-full bg-indigo-400/12 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-16 w-72 h-72 rounded-full bg-fuchsia-400/10 blur-3xl"></div>

            <div class="flex items-start justify-between gap-3">
                <div class="space-y-1">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/15 text-[11px] font-bold">
                        <i class="fa-solid fa-square-poll-vertical"></i>
                        <span>سجل شخصي — محاولاتك فقط</span>
                    </div>
                    <h1 class="text-xl sm:text-2xl font-extrabold">اختباراتي ومعدلاتي</h1>
                    <p class="text-[12px] sm:text-sm text-white/75">
                        ترتيب الأحدث للأقدم — النسبة محسوبة بدقة حتى لو كانت الداتا قديمة.
                    </p>
                </div>

                <div class="text-right">
                    <div class="text-[11px] text-white/60">ضمن الفلاتر</div>
                    <div class="text-2xl font-extrabold">{{ number_format((int)($kpis['total'] ?? 0)) }}</div>
                </div>
            </div>

            {{-- KPIs --}}
            <div class="mt-4 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2">
                <div class="rounded-2xl border border-white/10 bg-white/5 px-3 py-2">
                    <div class="text-[10px] text-white/60">المعدل</div>
                    <div class="text-sm font-extrabold text-indigo-200">{{ $kpis['avg'] ?? 0 }}%</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 px-3 py-2">
                    <div class="text-[10px] text-white/60">أفضل نتيجة</div>
                    <div class="text-sm font-extrabold text-emerald-200">{{ $kpis['best'] ?? 0 }}%</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 px-3 py-2">
                    <div class="text-[10px] text-white/60">أضعف نتيجة</div>
                    <div class="text-sm font-extrabold text-rose-200">{{ $kpis['worst'] ?? 0 }}%</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 px-3 py-2">
                    <div class="text-[10px] text-white/60">نجاح</div>
                    <div class="text-sm font-extrabold text-emerald-200">{{ (int)($kpis['pass'] ?? 0) }}</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 px-3 py-2">
                    <div class="text-[10px] text-white/60">رسوب</div>
                    <div class="text-sm font-extrabold text-rose-200">{{ (int)($kpis['fail'] ?? 0) }}</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 px-3 py-2">
                    <div class="text-[10px] text-white/60">نسبة النجاح</div>
                    <div class="text-sm font-extrabold text-white">{{ $kpis['pass_rate'] ?? 0 }}%</div>
                </div>
            </div>

            {{-- Filters --}}
            <form method="GET" class="mt-4 grid grid-cols-1 sm:grid-cols-4 gap-2">
                <input name="from" type="date" value="{{ $from }}"
                       class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">
                <input name="to" type="date" value="{{ $to }}"
                       class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">
                <input name="q" value="{{ $qText }}" placeholder="بحث بعنوان الاختبار.."
                       class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">
                <button class="px-4 py-2 rounded-xl bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-bold">
                    تطبيق
                </button>
            </form>
        </div>

        {{-- LIST --}}
        @if($rows->count())
            <div class="space-y-4">
                @foreach($rows as $r)
                    @php
                        $isPass = (bool)($r->is_pass ?? false);
                        $badgeCls = $isPass
                            ? 'bg-emerald-500/15 border-emerald-400/25 text-emerald-200'
                            : 'bg-rose-500/15 border-rose-400/25 text-rose-200';

                        $percent = number_format((float)($r->percent ?? 0), 2);
                        $date = $r->submitted_at ? \Carbon\Carbon::parse($r->submitted_at)->format('Y-m-d H:i') : '—';
                    @endphp

                    <div class="relative overflow-hidden rounded-3xl border border-white/10
                                bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                                shadow-lg shadow-black/30">
                        <div class="absolute inset-0 bg-white/[0.03] pointer-events-none"></div>

                        <div class="p-4 sm:p-5 text-white">
                            <div class="flex items-start justify-between gap-3">
                                <div class="space-y-1 min-w-0">
                                    <div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border {{ $badgeCls }} text-[11px] font-bold">
                                        <i class="fa-solid {{ $isPass ? 'fa-circle-check' : 'fa-circle-xmark' }}"></i>
                                        <span>{{ $isPass ? 'ناجح' : 'راسب' }}</span>
                                    </div>

                                    <div class="text-[12px] sm:text-sm text-white/85">
                                        <span class="text-white/60">الاختبار:</span>
                                        <span class="font-extrabold">{{ $r->test_title ?? ('#'.$r->test_id) }}</span>
                                    </div>

                                    <div class="text-[12px] sm:text-sm text-white/70">
                                        <span class="text-white/60">تاريخ التسليم:</span>
                                        <span class="font-bold">{{ $date }}</span>
                                    </div>
                                </div>

                                <div class="text-right">
                                    <div class="text-[11px] text-white/60">نتيجتك</div>
                                    <div class="text-2xl font-extrabold {{ $isPass ? 'text-emerald-200' : 'text-rose-200' }}">
                                        {{ $percent }}%
                                    </div>
                                    <div class="text-[10px] text-white/50">#{{ $r->id }}</div>
                                </div>
                            </div>

                            <div class="mt-4 rounded-2xl border border-white/10 bg-white/5 p-3 text-[12px] text-white/70">
                                <div class="flex flex-wrap gap-2">
                                    <span class="px-2 py-1 rounded-xl bg-black/20 border border-white/10">
                                        أسئلة: {{ (int)($r->questions_count ?? 0) }}
                                    </span>
                                    <span class="px-2 py-1 rounded-xl bg-black/20 border border-white/10">
                                        طريقة الحساب: {{ ($r->score_mode ?? '') === 'raw' ? 'عدد صحيح → %' : '% مباشر' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="pt-2">
                {{ $rows->links() }}
            </div>
        @else
            <div class="rounded-3xl border border-white/10 bg-white/5 p-10 text-center text-white/70">
                لا يوجد محاولات ضمن هذه الفلاتر.
            </div>
        @endif

    </div>
</div>
@endsection