@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')
<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-sky-500/25
                    bg-gradient-to-br from-slate-950 via-sky-950/35 to-slate-950
                    shadow-xl shadow-sky-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-sky-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-chart-line"></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-5 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 {{ ($kpis['net'] ?? 0) >= 0 ? 'text-emerald-200' : 'text-rose-200' }}">
                        {{ ($kpis['net'] ?? 0) > 0 ? '+' : '' }}{{ number_format((float)($kpis['net'] ?? 0), 2) }}
                    </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">{{ number_format((float)($kpis['pos'] ?? 0), 2) }}</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">{{ number_format((float)abs($kpis['neg'] ?? 0), 2) }}</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-sky-200">{{ number_format((float)($kpis['hours'] ?? 0), 2) }}</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">{{ (int)($kpis['total'] ?? 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-sky-500 hover:bg-sky-600 text-white text-sm font-bold">
                    تطبيق
                </button>
            </form>
        </div>

        {{-- Breakdown --}}
        <div class="rounded-3xl border border-white/10 bg-white/5 p-4 sm:p-5 text-white">
            <div class="text-sm font-extrabold mb-3">تفصيل حسب المصدر</div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                @forelse($bySource as $b)
                    @php
                        $label = $sourceTypeLabels[$b->source_type] ?? ($b->source_type ?: 'غير محدد');
                    @endphp
                    <div class="rounded-2xl border border-white/10 bg-black/20 p-3">
                        <div class="text-[12px] text-white/70">{{ $label }}</div>
                        <div class="mt-1 flex items-center justify-between text-[12px]">
                            <span class="text-white/60">نقاط</span>
                            <span class="font-extrabold {{ ((float)$b->points)>=0 ? 'text-emerald-200' : 'text-rose-200' }}">
                                {{ ((float)$b->points)>0?'+':'' }}{{ number_format((float)$b->points, 2) }}
                            </span>
                        </div>
                        <div class="mt-1 flex items-center justify-between text-[12px]">
                            <span class="text-white/60">ساعات</span>
                            <span class="font-extrabold text-sky-200">{{ number_format((float)$b->hours, 2) }}</span>
                        </div>
                        <div class="mt-1 flex items-center justify-between text-[12px]">
                            <span class="text-white/60">سجلات</span>
                            <span class="font-extrabold text-white">{{ (int)$b->records }}</span>
                        </div>
                    </div>
                @empty
                    <div class="text-white/60 text-sm">لا يوجد تفصيل ضمن هذه الفلاتر.</div>
                @endforelse
            </div>
        </div>

        {{-- LIST --}}
        @if($rows->count())
            <div class="space-y-4">
                @foreach($rows as $r)
                    @php
                        $pts = (float)($r->points ?? 0);
                        $hrs = (float)($r->hours ?? 0);
                        $src = $r->source_type ?? 'unknown';
                        $label = $sourceTypeLabels[$src] ?? $src;

                        $d = $r->recorded_date
                            ? \Carbon\Carbon::parse($r->recorded_date)->format('Y-m-d')
                            : '—';

                        $note = trim((string)($r->note ?? $r->description ?? ''));
                    @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
                                                {{ $pts>=0 ? 'bg-emerald-500/15 border-emerald-400/25 text-emerald-200' : 'bg-rose-500/15 border-rose-400/25 text-rose-200' }}
                                                text-[11px] font-bold">
                                        <i class="fa-solid {{ $pts>=0 ? 'fa-circle-plus' : 'fa-circle-minus' }}"></i>
                                        <span>{{ $pts>=0 ? 'إضافة' : 'خصم' }}</span>
                                    </div>

                                    <div class="text-[12px] sm:text-sm text-white/85">
                                        <span class="text-white/60">المصدر:</span>
                                        <span class="font-extrabold">{{ $label }}</span>
                                        <span class="mx-2 text-white/30">•</span>
                                        <span class="text-white/60">التاريخ:</span>
                                        <span class="font-extrabold">{{ $d }}</span>
                                    </div>

                                    @if($note !== '')
                                        <div class="text-[12px] text-white/65 leading-relaxed">
                                            {{ $note }}
                                        </div>
                                    @endif
                                </div>

                                <div class="text-right">
                                    <div class="text-[11px] text-white/60">النقاط</div>
                                    <div class="text-2xl font-extrabold {{ $pts>=0 ? 'text-emerald-200' : 'text-rose-200' }}">
                                        {{ $pts>0?'+':'' }}{{ number_format($pts, 2) }}
                                    </div>
                                    <div class="text-[11px] text-white/60 mt-1">ساعات: <span class="text-sky-200 font-bold">{{ number_format($hrs, 2) }}</span></div>
                                </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