@extends('layouts.superadmin')

@section('title', 'منظومة العلامات - نمو العلامات')
@section('page-title', 'منظومة العلامات - نمو العلامات (Growth)')

@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 justify-between gap-3">
                <div class="flex items-center gap-3">
                    <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                                ring-2 ring-sky-500/60 shadow-lg shadow-sky-500/30">
                        <i class="fa-solid fa-chart-line text-sky-300 text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl sm:text-2xl font-bold">نمو العلامات (Growth)</h1>
                        <p class="text-sm text-slate-300/80">
                            مقارنة صافي نقاط كل عضو بين
                            <span class="font-semibold text-emerald-300">الفترة الحالية</span>
                            وبين
                            <span class="font-semibold text-amber-300">فترة سابقة بنفس المدة</span>
                            لمعرفة من يتقدم ومن يتراجع.
                        </p>
                        <p class="text-[11px] text-slate-400 mt-1">
                            الفترة السابقة: من {{ $fromPrevDate }} إلى {{ $toPrevDate }}
                        </p>
                    </div>
                </div>

                {{-- تبديل عرض جدول / كروت --}}
                <div class="flex items-center gap-2">
                    @php $isCards = ($view ?? 'table') === 'cards'; @endphp
                    <a href="{{ request()->fullUrlWithQuery(['view'=>'table','page'=>null]) }}"
                       class="h-9 px-3 rounded-xl text-xs font-semibold border
                              {{ !$isCards ? 'bg-white/15 border-white/20 text-white' : 'border-slate-700 text-slate-200 hover:bg-white/10' }}">
                        <i class="fa-solid fa-table ml-1"></i> جدول
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['view'=>'cards','page'=>null]) }}"
                       class="h-9 px-3 rounded-xl text-xs font-semibold border
                              {{ $isCards ? 'bg-white/15 border-white/20 text-white' : 'border-slate-700 text-slate-200 hover:bg-white/10' }}">
                        <i class="fa-solid fa-id-card ml-1"></i> كروت
                    </a>
                </div>
            </div>
        </div>

        {{-- كروت الملخص --}}
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-3 mb-6">
            <div class="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
                <div class="text-[11px] text-slate-400">عدد الأعضاء في التحليل</div>
                <div class="text-2xl font-bold text-white mt-1">{{ (int)($summary['count'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-emerald-500/25 bg-emerald-500/5 p-4">
                <div class="text-[11px] text-emerald-200/80">متوسط الفرق (Δ نقاط)</div>
                <div class="text-2xl font-bold text-emerald-100 mt-1">{{ $summary['avg_delta'] ?? 0 }}</div>
            </div>
            <div class="rounded-2xl border border-sky-500/25 bg-sky-500/5 p-4">
                <div class="text-[11px] text-sky-200/80">متوسط نسبة النمو (%)</div>
                <div class="text-2xl font-bold text-sky-100 mt-1">{{ $summary['avg_growth'] ?? 0 }}%</div>
            </div>
            <div class="rounded-2xl border border-amber-500/25 bg-amber-500/5 p-4">
                <div class="text-[11px] text-amber-200/80">تحسن / تراجع</div>
                <div class="text-sm text-emerald-100 mt-1">
                    + تحسن: {{ (int)($summary['improved'] ?? 0) }}
                </div>
                <div class="text-sm text-rose-100">
                    - تراجع: {{ (int)($summary['worsened'] ?? 0) }}
                </div>
                <div class="text-[11px] text-slate-300 mt-1">
                    ثابت تقريبًا: {{ (int)($summary['no_change'] ?? 0) }}
                </div>
            </div>
        </div>

        {{-- الفلاتر --}}
        <form method="GET" action="{{ route('superadmin.falcon-room.marks.growth') }}"
              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-6 grid-cols-1">

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300">من (الفترة الحالية)</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-sky-500 focus:border-sky-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300">إلى</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-sky-500 focus:border-sky-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300">الجنس</label>
                    <select name="gender"
                            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-sky-500 focus:border-sky-500">
                        <option value="all"    {{ $gender==='all'?'selected':'' }}>الكل</option>
                        <option value="male"   {{ $gender==='male'?'selected':'' }}>شباب</option>
                        <option value="female" {{ $gender==='female'?'selected':'' }}>صبايا</option>
                    </select>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300">نوع العضو</label>
                    <select name="segment"
                            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-sky-500 focus:border-sky-500">
                        <option value="members" {{ $segment==='members'?'selected':'' }}>أعضاء فقط</option>
                        <option value="admins"  {{ $segment==='admins'?'selected':'' }}>إدارة فقط</option>
                        <option value="all"     {{ $segment==='all'?'selected':'' }}>الكل</option>
                    </select>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300">ترتيب حسب</label>
                    <select name="order"
                            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-sky-500 focus:border-sky-500">
                        <option value="delta"    {{ $order==='delta'?'selected':'' }}>أكبر فرق (Δ نقاط)</option>
                        <option value="rate"     {{ $order==='rate'?'selected':'' }}>أعلى نسبة نمو (%)</option>
                        <option value="current"  {{ $order==='current'?'selected':'' }}>أعلى نقاط حالية</option>
                        <option value="previous" {{ $order==='previous'?'selected':'' }}>أعلى نقاط سابقة</option>
                    </select>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300">بحث عن عضو</label>
                    <input type="text" name="q" value="{{ $q }}" placeholder="اسم / يوزر / إيميل"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  placeholder:text-slate-500 focus:outline-none focus:ring-2
                                  focus:ring-sky-500 focus:border-sky-500">
                </div>

                <input type="hidden" name="view" value="{{ $view }}">
            </div>

            <div class="mt-3 flex flex-wrap items-center gap-2">
                <button class="inline-flex items-center justify-center rounded-xl bg-sky-500 px-4 py-2 text-sm font-semibold
                               text-slate-950 hover:bg-sky-400 transition">
                    <i class="fa-solid fa-filter ml-2 text-xs"></i>
                    تطبيق الفلاتر
                </button>
                <a href="{{ route('superadmin.falcon-room.marks.growth') }}"
                   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>
                <span class="text-[11px] text-slate-400">
                    النمو محسوب من جدول <span class="font-semibold">score_records</span> فقط.
                </span>
            </div>
        </form>

        {{-- وضع الكروت --}}
        @if($isCards)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                @forelse($rows as $r)
                    @php
                        $cur   = (float)($r->current_points ?? 0);
                        $prev  = (float)($r->previous_points ?? 0);
                        $delta = (float)($r->delta_points ?? 0);
                        $rate  = (float)($r->growth_rate ?? 0);
                        $rateClamped = max(-100, min(100, $rate));

                        $colorBar = $delta >= 0
                            ? 'from-emerald-500 via-emerald-400 to-sky-400'
                            : 'from-rose-500 via-orange-400 to-amber-400';
                    @endphp

                    <div class="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
                        <div class="flex items-start justify-between gap-2">
                            <div class="min-w-0">
                                <div class="font-semibold text-slate-100 truncate">
                                    {{ $r->name ?? ('#'.$r->id) }}
                                </div>
                                <div class="text-[11px] text-slate-400 truncate">
                                    {{ $r->username ?? '' }} • {{ $r->membership_status }}
                                    @if($r->gender === 'male') • شاب
                                    @elseif($r->gender === 'female') • صبية
                                    @endif
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-[10px] text-slate-400">نمو (%)</div>
                                <div class="text-sm font-bold {{ $delta>=0 ? 'text-emerald-200' : 'text-rose-200' }}">
                                    {{ $rate }}%
                                </div>
                            </div>
                        </div>

                        {{-- شريط نمو - من -100% إلى +100% --}}
                        <div class="mt-3">
                            <div class="h-2 rounded-full bg-slate-800 overflow-hidden relative">
                                {{-- المنتصف (0%) --}}
                                <div class="absolute left-1/2 top-0 bottom-0 w-px bg-slate-600/60"></div>
                                @php
                                    // تحويل -100..100 -> 0..100 لعرض الشريط
                                    $percentWidth = abs($rateClamped);
                                @endphp
                                <div class="h-full {{ $colorBar }} bg-gradient-to-r
                                             @if($delta >= 0)
                                                 origin-left
                                             @else
                                                 origin-right ml-auto
                                             @endif"
                                     style="width: {{ $percentWidth }}%;"></div>
                            </div>
                            <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                                <span>-100%</span>
                                <span>0%</span>
                                <span>+100%</span>
                            </div>
                        </div>

                        <div class="grid grid-cols-3 gap-2 mt-3">
                            <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                                <div class="text-[10px] text-slate-400">نقاط الفترة السابقة</div>
                                <div class="text-sm font-bold text-slate-100">{{ $prev }}</div>
                            </div>
                            <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                                <div class="text-[10px] text-slate-400">نقاط الفترة الحالية</div>
                                <div class="text-sm font-bold text-emerald-200">{{ $cur }}</div>
                            </div>
                            <div class="rounded-xl border border-slate-800 bg-slate-950/40 p-2">
                                <div class="text-[10px] text-slate-400">الفرق (Δ)</div>
                                <div class="text-sm font-bold {{ $delta>=0 ? 'text-emerald-200' : 'text-rose-200' }}">
                                    {{ $delta }}
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-6 text-center text-slate-400">
                        لا يوجد أعضاء ضمن الفلاتر الحالية.
                    </div>
                @endforelse
            </div>

            <div class="mt-4">
                {{ $rows->links() }}
            </div>
        @else
            {{-- جدول --}}
            <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden">
                <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">
                            Δ = نقاط الفترة الحالية − نقاط الفترة السابقة (نفس الطول)، Growth% = نسبة التغير.
                        </p>
                    </div>
                    <span class="text-[11px] text-slate-400">عدد النتائج: {{ $rows->total() }}</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">الجنس</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>
                                <th class="px-3 py-2 text-right">شريط</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-800">
                            @forelse($rows as $r)
                                @php
                                    $cur   = (float)($r->current_points ?? 0);
                                    $prev  = (float)($r->previous_points ?? 0);
                                    $delta = (float)($r->delta_points ?? 0);
                                    $rate  = (float)($r->growth_rate ?? 0);
                                    $rateClamped = max(-100, min(100, $rate));
                                    $colorBar = $delta >= 0
                                        ? 'from-emerald-500 via-emerald-400 to-sky-400'
                                        : 'from-rose-500 via-orange-400 to-amber-400';
                                    $percentWidth = abs($rateClamped);
                                @endphp
                                <tr class="hover:bg-slate-800/50 align-top">
                                    <td class="px-3 py-2">
                                        <div class="flex flex-col">
                                            <span class="font-semibold text-slate-100">{{ $r->name ?? ('#'.$r->id) }}</span>
                                        </div>
                                    </td>
                                    <td class="px-3 py-2 text-[11px] text-slate-300">
                                        {{ $r->username ?? '—' }}
                                    </td>
                                    <td class="px-3 py-2 text-[11px] text-slate-300">
                                        {{ $r->membership_status }}
                                    </td>
                                    <td class="px-3 py-2 text-[11px] text-slate-300">
                                        @if($r->gender === 'male') شاب
                                        @elseif($r->gender === 'female') صبية
                                        @else غير محدد
                                        @endif
                                    </td>

                                    <td class="px-3 py-2 text-slate-100">
                                        {{ $prev }}
                                    </td>
                                    <td class="px-3 py-2 text-emerald-200">
                                        {{ $cur }}
                                    </td>
                                    <td class="px-3 py-2 {{ $delta>=0 ? 'text-emerald-200' : 'text-rose-200' }}">
                                        {{ $delta }}
                                    </td>
                                    <td class="px-3 py-2 {{ $delta>=0 ? 'text-emerald-200' : 'text-rose-200' }}">
                                        {{ $rate }}%
                                    </td>
                                    <td class="px-3 py-2">
                                        <div class="h-2 rounded-full bg-slate-800 overflow-hidden relative">
                                            <div class="absolute left-1/2 top-0 bottom-0 w-px bg-slate-600/60"></div>
                                            <div class="h-full bg-gradient-to-r {{ $colorBar }}
                                                         @if($delta >= 0)
                                                             origin-left
                                                         @else
                                                             origin-right ml-auto
                                                         @endif"
                                                 style="width: {{ $percentWidth }}%;"></div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="px-4 py-8 text-center text-slate-400">
                                        لا يوجد نتائج ضمن الفلاتر الحالية.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

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

        <div class="mt-5 text-[11px] text-slate-500 text-center">
            استخدم هذه الصفحة لاكتشاف من يتقدّم بسرعة، ومن بدأ يتراجع، ومن يحتاج خطة دعم أو تكريم.
        </div>
    </div>
</div>
@endsection