{{-- resources/views/superadmin/iman-room/members-marks.blade.php --}}
@extends('layouts.superadmin')

@section('title','علامات الأعضاء')
@section('page-title','علامات الأعضاء')

@section('content')
@php
  $view    = $view    ?? request('view','table'); // table|cards
  $gender  = $gender  ?? request('gender','all');
  $segment = $segment ?? request('segment','members');
  $level   = $level   ?? request('level','all');
  $q       = $q       ?? request('q','');
  $from    = $from    ?? request('from', now()->subDays(30)->format('Y-m-d'));
  $to      = $to      ?? request('to', now()->format('Y-m-d'));

  $levelMeta = [
    'elite'  => ['label'=>'نخبة',   'cls'=>'border-emerald-400/30 bg-emerald-500/12 text-emerald-200'],
    'pro'    => ['label'=>'محترف',  'cls'=>'border-sky-400/30 bg-sky-500/12 text-sky-200'],
    'active' => ['label'=>'نشط',    'cls'=>'border-indigo-400/30 bg-indigo-500/12 text-indigo-200'],
    'weak'   => ['label'=>'ضعيف',   'cls'=>'border-amber-400/30 bg-amber-500/12 text-amber-200'],
    'zero'   => ['label'=>'صفر',    'cls'=>'border-rose-400/30 bg-rose-500/12 text-rose-200'],
  ];

  $segLabel = [
    'members' => 'الأعضاء',
    'admins'  => 'الإدارة/المشرفين',
    'all'     => 'الكل',
  ];

  $genderLabel = [
    'all'    => 'الكل',
    'male'   => 'ذكور',
    'female' => 'إناث',
  ];

  $qs = request()->query();
@endphp

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

    {{-- Header --}}
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl">
      <div class="pointer-events-none absolute -top-24 -right-10 w-80 h-80 rounded-full bg-fuchsia-500/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -left-10 w-96 h-96 rounded-full bg-cyan-500/10 blur-3xl"></div>

      <div class="relative p-4 sm:p-6 space-y-4">
        <div class="flex items-start justify-between gap-3">
          <div>
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-black/30 text-white/80 text-xs">
              <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
              أعضاء • علامات • تصنيف
            </div>
            <h1 class="mt-2 text-xl sm:text-2xl font-extrabold text-white">علامات الأعضاء</h1>
            <p class="mt-1 text-sm text-white/60">
              الفترة: <span class="text-white/90 font-semibold">{{ $from }}</span>
              → <span class="text-white/90 font-semibold">{{ $to }}</span>
              • الشريحة: <span class="text-white/90 font-semibold">{{ $segLabel[$segment] ?? $segment }}</span>
              • الجنس: <span class="text-white/90 font-semibold">{{ $genderLabel[$gender] ?? $gender }}</span>
            </p>
          </div>

          <div class="flex items-center gap-2">
            <a href="{{ request()->fullUrlWithQuery(['view'=>'table']) }}"
               class="px-3 py-2 rounded-xl text-xs font-semibold border {{ $view==='table' ? 'bg-white text-slate-900 border-white' : 'bg-white/5 text-white/80 border-white/10 hover:bg-white/10' }}">
              جدول
            </a>
            <a href="{{ request()->fullUrlWithQuery(['view'=>'cards']) }}"
               class="px-3 py-2 rounded-xl text-xs font-semibold border {{ $view==='cards' ? 'bg-white text-slate-900 border-white' : 'bg-white/5 text-white/80 border-white/10 hover:bg-white/10' }}">
              كروت
            </a>
          </div>
        </div>

        {{-- Filters --}}
        <form method="GET" action="{{ url()->current() }}" class="grid grid-cols-1 sm:grid-cols-12 gap-2">
          <input type="hidden" name="section" value="{{ $section ?? 'members_marks' }}">
          <input type="hidden" name="view" value="{{ $view }}">

          <div class="sm:col-span-3">
            <label class="block text-xs text-white/60 mb-1">من</label>
            <input type="date" name="from" value="{{ $from }}"
                   class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
          </div>

          <div class="sm:col-span-3">
            <label class="block text-xs text-white/60 mb-1">إلى</label>
            <input type="date" name="to" value="{{ $to }}"
                   class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
          </div>

          <div class="sm:col-span-3">
            <label class="block text-xs text-white/60 mb-1">بحث</label>
            <input type="text" name="q" value="{{ $q }}" placeholder="اسم / يوزر / ايميل"
                   class="w-full rounded-xl bg-black/40 border border-white/10 text-white placeholder:text-white/30 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
          </div>

          <div class="sm:col-span-3">
            <label class="block text-xs text-white/60 mb-1">الجنس</label>
            <select name="gender"
                    class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
              <option value="all" @selected($gender==='all')>الكل</option>
              <option value="male" @selected($gender==='male')>ذكور</option>
              <option value="female" @selected($gender==='female')>إناث</option>
            </select>
          </div>

          <div class="sm:col-span-4">
            <label class="block text-xs text-white/60 mb-1">الشريحة</label>
            <select name="segment"
                    class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
              <option value="members" @selected($segment==='members')>الأعضاء</option>
              <option value="admins"  @selected($segment==='admins')>الإدارة/المشرفين</option>
              <option value="all"     @selected($segment==='all')>الكل</option>
            </select>
          </div>

          <div class="sm:col-span-4">
            <label class="block text-xs text-white/60 mb-1">المستوى</label>
            <select name="level"
                    class="w-full rounded-xl bg-black/40 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
              <option value="all" @selected($level==='all')>الكل</option>
              <option value="elite" @selected($level==='elite')>نخبة</option>
              <option value="pro" @selected($level==='pro')>محترف</option>
              <option value="active" @selected($level==='active')>نشط</option>
              <option value="weak" @selected($level==='weak')>ضعيف</option>
              <option value="zero" @selected($level==='zero')>صفر</option>
            </select>
          </div>

          <div class="sm:col-span-4 flex items-end gap-2">
            <button type="submit"
                    class="w-full px-4 py-2.5 rounded-xl bg-white text-slate-900 font-extrabold hover:bg-white/90">
              تطبيق الفلاتر
            </button>
            <a href="{{ url()->current() . '?' . http_build_query(['section'=>$section ?? 'members_marks','view'=>$view]) }}"
               class="px-4 py-2.5 rounded-xl bg-white/5 text-white/80 border border-white/10 hover:bg-white/10 text-center font-semibold">
              تصفير
            </a>
          </div>
        </form>
      </div>
    </div>

    {{-- Summary --}}
    <div class="grid grid-cols-2 sm:grid-cols-6 gap-2">
      <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
        <div class="text-xs text-white/60">المجموع</div>
        <div class="text-lg font-extrabold text-white">{{ $summary['count'] ?? 0 }}</div>
      </div>

      @foreach(['elite','pro','active','weak','zero'] as $k)
        <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
          <div class="text-xs text-white/60">{{ $levelMeta[$k]['label'] }}</div>
          <div class="text-lg font-extrabold text-white">{{ $summary[$k] ?? 0 }}</div>
        </div>
      @endforeach
    </div>

    {{-- Content --}}
    @if(($rows->count() ?? 0) === 0)
      <div class="rounded-3xl border border-white/10 bg-white/5 p-6 text-center text-white/70">
        لا توجد نتائج ضمن هذه الفترة أو الفلاتر.
      </div>
    @else

      @if($view === 'cards')
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          @foreach($rows as $r)
            @php
              $lk = $r->level_key ?? 'zero';
              $meta = $levelMeta[$lk] ?? $levelMeta['zero'];
              $avatar = $r->avatar ? asset('storage/avatars/'.$r->avatar) : null;
            @endphp

            <div class="rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-4">
              <div class="flex items-start gap-3">
                <div class="shrink-0">
                  <div class="w-12 h-12 rounded-2xl overflow-hidden border border-white/10 bg-black/40">
                    @if($avatar)
                      <img src="{{ $avatar }}" class="w-full h-full object-cover" alt="">
                    @else
                      <div class="w-full h-full flex items-center justify-center text-white/60 font-black">
                        {{ mb_substr(($r->name ?? $r->username ?? 'U'),0,1) }}
                      </div>
                    @endif
                  </div>
                </div>

                <div class="min-w-0 flex-1">
                  <div class="flex items-center justify-between gap-2">
                    <div class="min-w-0">
                      <div class="text-white font-extrabold truncate">
                        {{ $r->name ?: $r->username }}
                      </div>
                      <div class="text-xs text-white/50 truncate">
                        {{ '@'.$r->username }} • {{ $r->gender === 'male' ? 'ذكر' : 'أنثى' }}
                      </div>
                    </div>
                    <span class="px-2.5 py-1 rounded-full text-xs font-bold border {{ $meta['cls'] }}">
                      {{ $meta['label'] }}
                    </span>
                  </div>

                  <div class="mt-3 grid grid-cols-2 gap-2 text-sm">
                    <div class="rounded-2xl border border-white/10 bg-black/30 p-2">
                      <div class="text-xs text-white/60">صافي النقاط</div>
                      <div class="text-white font-extrabold">{{ (int)$r->net_points }}</div>
                    </div>
                    <div class="rounded-2xl border border-white/10 bg-black/30 p-2">
                      <div class="text-xs text-white/60">الساعات</div>
                      <div class="text-white font-extrabold">{{ round((float)$r->total_hours,2) }}</div>
                    </div>
                    <div class="rounded-2xl border border-white/10 bg-black/30 p-2">
                      <div class="text-xs text-white/60">إيجابي</div>
                      <div class="text-emerald-200 font-extrabold">{{ (int)$r->positive_points }}</div>
                    </div>
                    <div class="rounded-2xl border border-white/10 bg-black/30 p-2">
                      <div class="text-xs text-white/60">سلبي</div>
                      <div class="text-rose-200 font-extrabold">{{ abs((int)$r->negative_points) }}</div>
                    </div>
                  </div>

                  <div class="mt-3 text-xs text-white/50">
                    عدد السجلات: <span class="text-white/80 font-bold">{{ (int)$r->records_count }}</span>
                    • الحالة: <span class="text-white/80 font-bold">{{ $r->membership_status }}</span>
                  </div>
                </div>
              </div>
            </div>
          @endforeach
        </div>

      @else
        <div class="rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl overflow-hidden">
          <div class="overflow-x-auto">
            <table class="min-w-[980px] w-full text-sm">
              <thead class="bg-black/40 text-white/70">
                <tr>
                  <th class="px-3 py-3 text-right">#</th>
                  <th class="px-3 py-3 text-right">العضو</th>
                  <th class="px-3 py-3 text-right">الجنس</th>
                  <th class="px-3 py-3 text-right">الحالة</th>
                  <th class="px-3 py-3 text-right">المستوى</th>
                  <th class="px-3 py-3 text-right">صافي النقاط</th>
                  <th class="px-3 py-3 text-right">إيجابي</th>
                  <th class="px-3 py-3 text-right">سلبي</th>
                  <th class="px-3 py-3 text-right">الساعات</th>
                  <th class="px-3 py-3 text-right">السجلات</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-white/5">
                @foreach($rows as $i => $r)
                  @php
                    $lk = $r->level_key ?? 'zero';
                    $meta = $levelMeta[$lk] ?? $levelMeta['zero'];
                    $avatar = $r->avatar ? asset('storage/avatars/'.$r->avatar) : null;
                  @endphp
                  <tr class="text-white/80 hover:bg-white/5">
                    <td class="px-3 py-3 text-white/50">
                      {{ ($rows->firstItem() ?? 1) + $i }}
                    </td>

                    <td class="px-3 py-3">
                      <div class="flex items-center gap-2">
                        <div class="w-9 h-9 rounded-xl overflow-hidden border border-white/10 bg-black/40">
                          @if($avatar)
                            <img src="{{ $avatar }}" class="w-full h-full object-cover" alt="">
                          @else
                            <div class="w-full h-full flex items-center justify-center text-white/60 font-black">
                              {{ mb_substr(($r->name ?? $r->username ?? 'U'),0,1) }}
                            </div>
                          @endif
                        </div>
                        <div class="min-w-0">
                          <div class="font-extrabold text-white truncate">{{ $r->name ?: $r->username }}</div>
                          <div class="text-xs text-white/50 truncate">{{ '@'.$r->username }}</div>
                        </div>
                      </div>
                    </td>

                    <td class="px-3 py-3">
                      <span class="px-2 py-1 rounded-full text-xs border border-white/10 bg-black/30">
                        {{ $r->gender === 'male' ? 'ذكر' : 'أنثى' }}
                      </span>
                    </td>

                    <td class="px-3 py-3">
                      <span class="px-2 py-1 rounded-full text-xs border border-white/10 bg-black/30">
                        {{ $r->membership_status }}
                      </span>
                    </td>

                    <td class="px-3 py-3">
                      <span class="px-2.5 py-1 rounded-full text-xs font-bold border {{ $meta['cls'] }}">
                        {{ $meta['label'] }}
                      </span>
                    </td>

                    <td class="px-3 py-3 font-extrabold text-white">{{ (int)$r->net_points }}</td>
                    <td class="px-3 py-3 font-bold text-emerald-200">{{ (int)$r->positive_points }}</td>
                    <td class="px-3 py-3 font-bold text-rose-200">{{ abs((int)$r->negative_points) }}</td>
                    <td class="px-3 py-3 font-bold text-white">{{ round((float)$r->total_hours,2) }}</td>
                    <td class="px-3 py-3 text-white/70">{{ (int)$r->records_count }}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>

          <div class="p-3 border-t border-white/10">
            {{ $rows->links() }}
          </div>
        </div>
      @endif

    @endif

  </div>
</div>
@endsection