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

@section('title','غرفة إيمان — سجلات الأعضاء')

@section('content')
@php
  $viewMode = $view ?? 'table';
  $sortKey  = $sort ?? 'points';
  $dirKey   = $dir ?? 'desc';

  $compareEnabled = (bool)($compare_enabled ?? false);

  $male   = $gender['male'] ?? ['members'=>0,'points'=>0,'hours'=>0,'records'=>0,'live_confirmed_hours'=>0];
  $female = $gender['female'] ?? ['members'=>0,'points'=>0,'hours'=>0,'records'=>0,'live_confirmed_hours'=>0];

  $maleHours   = (float)($male['hours'] ?? 0);
  $femaleHours = (float)($female['hours'] ?? 0);
  $sumHours    = max(0.0001, $maleHours + $femaleHours);
  $malePct     = round(($maleHours / $sumHours) * 100, 1);
  $femalePct   = round(($femaleHours / $sumHours) * 100, 1);

  $qsKeep = function(array $merge = []) {
      $all = array_merge(request()->all(), $merge);
      return http_build_query($all);
  };

  $badge = [
    'ok'   => 'border-emerald-400/20 bg-emerald-500/10 text-emerald-200',
    'warn' => 'border-amber-400/20 bg-amber-500/10 text-amber-200',
    'bad'  => 'border-rose-400/20 bg-rose-500/10 text-rose-200',
    'info' => 'border-cyan-400/20 bg-cyan-500/10 text-cyan-200',
    'muted'=> 'border-white/10 bg-white/5 text-white/70',
  ];

  $toneChip = function($t){
    return match($t){
      'points' => ['fa-solid fa-bolt', 'from-fuchsia-300 via-fuchsia-200 to-cyan-200'],
      'hours'  => ['fa-solid fa-hourglass-half', 'from-emerald-200 via-cyan-200 to-sky-200'],
      'records'=> ['fa-solid fa-layer-group', 'from-amber-200 via-rose-200 to-fuchsia-200'],
      'live_hours' => ['fa-solid fa-wifi', 'from-sky-200 via-cyan-200 to-emerald-200'],
      default  => ['fa-solid fa-ranking-star', 'from-fuchsia-300 via-fuchsia-200 to-cyan-200'],
    };
  };

  [$sortIcon, $sortGrad] = $toneChip($sortKey);

  $safeNumber = fn($n, $dec=0) => is_null($n) ? '—' : number_format((float)$n, $dec);
@endphp

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

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-violet-400/25 shadow-2xl shadow-violet-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-violet-400/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/15 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
        <div class="space-y-3 max-w-2xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-violet-300/20 text-[11px] text-violet-100">
            <i class="fa-solid fa-scroll text-xs"></i>
            <span>غرفة إيمان — سجلات الأعضاء • Members Logs</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            سجلات <span class="text-violet-200">الأعضاء</span>
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            قراءة ذكية للنقاط + الساعات + عدد السجلات، مع مقارنة اختيارية، ومقارنة بين الجنسين.
          </p>

          <div class="flex flex-wrap gap-2 pt-1">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border {{ $badge['info'] }} text-[11px]">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400"></span>
              أعضاء: {{ $safeNumber($totals['members'] ?? 0) }}
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border {{ $badge['muted'] }} text-[11px]">
              <i class="fa-solid fa-layer-group text-[11px] opacity-80"></i>
              سجلات: {{ $safeNumber($totals['records'] ?? 0) }}
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border {{ $badge['muted'] }} text-[11px]">
              <i class="fa-solid fa-bolt text-[11px] opacity-80"></i>
              نقاط: {{ $safeNumber($totals['points'] ?? 0) }}
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border {{ $badge['muted'] }} text-[11px]">
              <i class="fa-solid fa-clock text-[11px] opacity-80"></i>
              ساعات: {{ $safeNumber($totals['hours'] ?? 0, 2) }}
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border {{ $badge['muted'] }} text-[11px]">
              <i class="fa-solid fa-wifi text-[11px] opacity-80"></i>
              لايف مؤكد: {{ $safeNumber($totals['live_confirmed_hours'] ?? 0, 2) }}س
            </span>
          </div>
        </div>

        {{-- FILTER PANEL --}}
        <div class="w-full lg:w-[420px]">
          <div class="rounded-3xl bg-black/40 border border-white/15 px-4 py-4 space-y-3">
            <div class="flex items-center gap-2">
              <div class="w-10 h-10 rounded-2xl bg-violet-500/15 border border-violet-400/25 grid place-items-center text-violet-200">
                <i class="fa-solid fa-filter"></i>
              </div>
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">فلترة + مقارنة + عرض</div>
                <div class="font-extrabold text-sm text-white truncate">Members Logs Controls</div>
              </div>
            </div>

            <form method="get" class="grid grid-cols-2 gap-2 pt-1">
              <div>
                <label class="text-[10px] text-slate-300/80">من</label>
                <input type="date" name="from" value="{{ $from ?? '' }}"
                       class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-violet-500/40">
              </div>
              <div>
                <label class="text-[10px] text-slate-300/80">إلى</label>
                <input type="date" name="to" value="{{ $to ?? '' }}"
                       class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
              </div>

              <div class="col-span-2 grid grid-cols-2 gap-2">
                <div>
                  <label class="text-[10px] text-slate-300/80">المقارنة</label>
                  <select name="compare_mode"
                          class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-violet-500/30">
                    <option value="none" @selected(($compare_mode ?? 'prev_month') === 'none')>بدون</option>
                    <option value="prev_month" @selected(($compare_mode ?? 'prev_month') === 'prev_month')>الشهر السابق</option>
                    <option value="custom" @selected(($compare_mode ?? 'prev_month') === 'custom')>مخصصة</option>
                  </select>
                </div>
                <div>
                  <label class="text-[10px] text-slate-300/80">طريقة العرض</label>
                  <select name="view"
                          class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
                    <option value="table" @selected($viewMode==='table')>جدول</option>
                    <option value="cards" @selected($viewMode==='cards')>كروت</option>
                  </select>
                </div>
              </div>

              <div class="col-span-2 grid grid-cols-2 gap-2" data-compare-fields>
                <div>
                  <label class="text-[10px] text-slate-300/80">مقارنة من</label>
                  <input type="date" name="compare_from" value="{{ $compare_from ?? '' }}"
                         class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-violet-500/25">
                </div>
                <div>
                  <label class="text-[10px] text-slate-300/80">مقارنة إلى</label>
                  <input type="date" name="compare_to" value="{{ $compare_to ?? '' }}"
                         class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-violet-500/25">
                </div>
              </div>

              <div class="col-span-2 grid grid-cols-3 gap-2">
                <div class="col-span-2">
                  <label class="text-[10px] text-slate-300/80">الترتيب حسب</label>
                  <select name="sort"
                          class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
                    <option value="points" @selected($sortKey==='points')>النقاط</option>
                    <option value="hours" @selected($sortKey==='hours')>الساعات</option>
                    <option value="records" @selected($sortKey==='records')>عدد السجلات</option>
                    <option value="live_hours" @selected($sortKey==='live_hours')>لايف مؤكد</option>
                  </select>
                </div>
                <div>
                  <label class="text-[10px] text-slate-300/80">الاتجاه</label>
                  <select name="dir"
                          class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
                    <option value="desc" @selected($dirKey==='desc')>تنازلي</option>
                    <option value="asc" @selected($dirKey==='asc')>تصاعدي</option>
                  </select>
                </div>
              </div>

              <button class="col-span-2 inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-900
                bg-gradient-to-r {{ $sortGrad }} shadow-lg shadow-violet-500/20 hover:scale-[1.01] active:scale-100 transition">
                <i class="{{ $sortIcon }} ms-2 text-[11px]"></i>
                تحديث
              </button>

              <a href="{{ url()->current() }}"
                 class="col-span-2 inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold
                        border border-white/15 bg-white/5 text-white/80 hover:bg-white/10 transition">
                <i class="fa-solid fa-eraser ms-2 text-[11px]"></i>
                تصفير الفلاتر
              </a>
            </form>

            @if($compareEnabled)
              <div class="rounded-2xl border border-violet-400/20 bg-violet-500/10 text-violet-200 px-3 py-2 text-[11px]">
                المقارنة مفعّلة: {{ $compare_from }} → {{ $compare_to }}
              </div>
            @else
              <div class="rounded-2xl border border-white/10 bg-white/5 text-white/70 px-3 py-2 text-[11px]">
                المقارنة غير مفعّلة (اختر "الشهر السابق" أو "مخصصة" مع تاريخين صحيحين).
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>

    {{-- GENDER COMPARE + AI --}}
    <div class="grid gap-4 lg:grid-cols-3">
      {{-- Gender compare --}}
      <div class="lg:col-span-1 relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/60 shadow-2xl p-5">
        <div class="pointer-events-none absolute -top-20 -right-10 w-72 h-72 rounded-full bg-pink-400/10 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 rounded-full bg-emerald-400/10 blur-3xl"></div>

        <div class="flex items-center gap-3 mb-3">
          <div class="w-10 h-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 grid place-items-center text-rose-200">
            <i class="fa-solid fa-people-arrows"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">مقارنة الجنسين</div>
            <div class="text-base font-extrabold text-white">Gender Insight</div>
          </div>
        </div>

        <div class="space-y-3">
          <div class="rounded-2xl border border-white/10 bg-black/25 p-4">
            <div class="flex items-center justify-between text-[12px]">
              <div class="font-extrabold text-emerald-200">ذكور</div>
              <div class="text-white/80">{{ $safeNumber($male['hours'] ?? 0, 2) }}س</div>
            </div>
            <div class="mt-2 h-2 rounded-full bg-white/10 overflow-hidden">
              <div class="h-full bg-emerald-400/70" style="width: {{ $malePct }}%"></div>
            </div>
            <div class="mt-1 text-[11px] text-white/60">نسبة ساعات: {{ $malePct }}%</div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-black/25 p-4">
            <div class="flex items-center justify-between text-[12px]">
              <div class="font-extrabold text-pink-200">إناث</div>
              <div class="text-white/80">{{ $safeNumber($female['hours'] ?? 0, 2) }}س</div>
            </div>
            <div class="mt-2 h-2 rounded-full bg-white/10 overflow-hidden">
              <div class="h-full bg-pink-400/70" style="width: {{ $femalePct }}%"></div>
            </div>
            <div class="mt-1 text-[11px] text-white/60">نسبة ساعات: {{ $femalePct }}%</div>
          </div>

          <div class="grid grid-cols-2 gap-2">
            <div class="rounded-2xl border {{ $badge['muted'] }} p-3 text-[11px]">
              <div class="text-white/60">ذكور</div>
              <div class="text-white font-extrabold mt-1">{{ $safeNumber($male['members'] ?? 0) }} عضو</div>
              <div class="text-white/60 mt-1">نقاط: {{ $safeNumber($male['points'] ?? 0) }}</div>
              <div class="text-white/60">سجلات: {{ $safeNumber($male['records'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border {{ $badge['muted'] }} p-3 text-[11px]">
              <div class="text-white/60">إناث</div>
              <div class="text-white font-extrabold mt-1">{{ $safeNumber($female['members'] ?? 0) }} عضو</div>
              <div class="text-white/60 mt-1">نقاط: {{ $safeNumber($female['points'] ?? 0) }}</div>
              <div class="text-white/60">سجلات: {{ $safeNumber($female['records'] ?? 0) }}</div>
            </div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[11px] text-white/70 leading-relaxed">
            * المقارنة هنا على <span class="text-white/90 font-bold">الساعات</span> ضمن الفترة المحددة.
          </div>
        </div>
      </div>

      {{-- AI --}}
      <div class="lg:col-span-2 relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/60 shadow-2xl p-5">
        <div class="pointer-events-none absolute -top-20 -right-10 w-72 h-72 rounded-full bg-cyan-400/10 blur-3xl"></div>

        <div class="flex items-center gap-3 mb-3">
          <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
            <i class="fa-solid fa-brain"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">تحليل AI</div>
            <div class="text-base font-extrabold text-white">{{ $ai['summary'] ?? 'تحليل ذكي' }}</div>
          </div>
        </div>

        <div class="space-y-2">
          @foreach(($ai['tips'] ?? []) as $tip)
            <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/90 leading-relaxed">
              <span class="text-cyan-200 font-extrabold">•</span> {{ $tip }}
            </div>
          @endforeach

          @if(empty($ai['tips']))
            <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/70">
              لا يوجد Insights حالياً.
            </div>
          @endif
        </div>
      </div>
    </div>

    {{-- HR --}}
    <div class="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>

    {{-- LIST HEADER --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
      <div class="flex items-center gap-2">
        <div class="w-10 h-10 rounded-2xl bg-violet-500/15 border border-violet-400/25 grid place-items-center text-violet-200">
          <i class="fa-solid fa-table-list"></i>
        </div>
        <div>
          <div class="text-[11px] text-white/60">قائمة الأعضاء ضمن الفترة</div>
          <div class="text-white font-extrabold">النتائج</div>
        </div>
      </div>

      <div class="flex items-center gap-2">
        <a href="{{ url()->current() }}?{{ $qsKeep(['view'=>'table']) }}"
           class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl text-[11px] font-bold border transition
                  {{ $viewMode==='table' ? 'border-white/15 bg-white/10 text-white' : 'border-white/10 bg-white/5 text-white/70 hover:bg-white/10' }}">
          <i class="fa-solid fa-table"></i> جدول
        </a>
        <a href="{{ url()->current() }}?{{ $qsKeep(['view'=>'cards']) }}"
           class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl text-[11px] font-bold border transition
                  {{ $viewMode==='cards' ? 'border-white/15 bg-white/10 text-white' : 'border-white/10 bg-white/5 text-white/70 hover:bg-white/10' }}">
          <i class="fa-regular fa-id-card"></i> كروت
        </a>
      </div>
    </div>

    {{-- TABLE VIEW --}}
    @if($viewMode === 'table')
      <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/60 shadow-2xl">
        <div class="overflow-x-auto">
          <table class="min-w-[980px] w-full text-sm">
            <thead class="bg-black/35 border-b border-white/10">
              <tr class="text-[11px] text-white/70">
                <th class="px-4 py-3 text-right sticky right-0 bg-black/35 z-10">العضو</th>
                <th class="px-4 py-3 text-right">النقاط</th>
                <th class="px-4 py-3 text-right">الساعات</th>
                <th class="px-4 py-3 text-right">السجلات</th>
                <th class="px-4 py-3 text-right">نقاط +</th>
                <th class="px-4 py-3 text-right">نقاط -</th>
                <th class="px-4 py-3 text-right">لايف مؤكد</th>
                @if($compareEnabled)
                  <th class="px-4 py-3 text-right">Δ نقاط</th>
                  <th class="px-4 py-3 text-right">Δ ساعات</th>
                  <th class="px-4 py-3 text-right">Δ سجلات</th>
                  <th class="px-4 py-3 text-right">Δ لايف</th>
                @endif
              </tr>
            </thead>

            <tbody class="divide-y divide-white/5">
              @forelse($rows as $r)
                @php
                  $name = $r['name'] ?? ($r['username'] ?? '—');
                  $username = $r['username'] ?? null;
                  $genderV = $r['gender'] ?? null;

                  $avatar = $r['avatar'] ?? null;
                  $points = (int)($r['points'] ?? 0);
                  $hours  = (float)($r['hours'] ?? 0);
                  $records= (int)($r['records'] ?? 0);
                  $pos    = (int)($r['positive_points'] ?? 0);
                  $neg    = (int)($r['negative_points'] ?? 0);
                  $liveH  = (float)($r['live_confirmed_hours'] ?? 0);

                  $deltaPoints = $r['delta_points'] ?? null;
                  $deltaHours  = $r['delta_hours'] ?? null;
                  $deltaRecs   = $r['delta_records'] ?? null;
                  $deltaLive   = $r['delta_live_confirmed_hours'] ?? null;

                  $deltaCls = function($v){
                    if (is_null($v)) return 'text-white/50';
                    if ($v > 0) return 'text-emerald-200';
                    if ($v < 0) return 'text-rose-200';
                    return 'text-amber-200';
                  };

                  $genderChip = match($genderV){
                    'female' => 'border-pink-400/20 bg-pink-500/10 text-pink-200',
                    'male'   => 'border-emerald-400/20 bg-emerald-500/10 text-emerald-200',
                    default  => 'border-white/10 bg-white/5 text-white/70',
                  };
                @endphp

                <tr class="hover:bg-white/[0.03] transition">
                  {{-- Member --}}
                  <td class="px-4 py-3 sticky right-0 bg-slate-950/70 backdrop-blur z-10">
                    <div class="flex items-center gap-3 min-w-[260px]">
                      <div class="w-10 h-10 rounded-2xl bg-white/5 border border-white/10 overflow-hidden grid place-items-center text-white/70">
                        @if($avatar)
                          <img src="{{ $avatar }}" alt="avatar" class="w-full h-full object-cover">
                        @else
                          <span class="text-xs font-extrabold">{{ mb_substr($name,0,1) }}</span>
                        @endif
                      </div>
                      <div class="min-w-0">
                        <div class="text-white font-extrabold text-[13px] truncate">{{ $name }}</div>
                        <div class="flex items-center gap-2 mt-0.5">
                          @if($username)
                            <span class="text-[11px] text-white/50 truncate">@{{ $username }}</span>
                          @endif
                          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] border {{ $genderChip }}">
                            {{ $genderV === 'female' ? 'صبايا' : ($genderV === 'male' ? 'شباب' : '—') }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </td>

                  {{-- Metrics --}}
                  <td class="px-4 py-3 text-white/90 font-extrabold">{{ number_format($points) }}</td>
                  <td class="px-4 py-3 text-white/80">{{ number_format($hours, 2) }}</td>
                  <td class="px-4 py-3 text-white/80">{{ number_format($records) }}</td>
                  <td class="px-4 py-3 text-emerald-200/90">{{ number_format($pos) }}</td>
                  <td class="px-4 py-3 text-rose-200/90">{{ number_format($neg) }}</td>
                  <td class="px-4 py-3 text-cyan-200/90">{{ number_format($liveH, 2) }}س</td>

                  @if($compareEnabled)
                    <td class="px-4 py-3 font-bold {{ $deltaCls($deltaPoints) }}">
                      {{ is_null($deltaPoints) ? '—' : (($deltaPoints>0?'+':'') . $deltaPoints) }}
                    </td>
                    <td class="px-4 py-3 font-bold {{ $deltaCls($deltaHours) }}">
                      {{ is_null($deltaHours) ? '—' : (($deltaHours>0?'+':'') . number_format((float)$deltaHours, 2)) }}
                    </td>
                    <td class="px-4 py-3 font-bold {{ $deltaCls($deltaRecs) }}">
                      {{ is_null($deltaRecs) ? '—' : (($deltaRecs>0?'+':'') . $deltaRecs) }}
                    </td>
                    <td class="px-4 py-3 font-bold {{ $deltaCls($deltaLive) }}">
                      {{ is_null($deltaLive) ? '—' : (($deltaLive>0?'+':'') . number_format((float)$deltaLive, 2)) }}
                    </td>
                  @endif
                </tr>
              @empty
                <tr>
                  <td colspan="{{ $compareEnabled ? 11 : 7 }}" class="px-6 py-10 text-center text-white/60">
                    لا يوجد بيانات ضمن هذه الفترة.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>

        <div class="px-4 py-3 border-t border-white/10 text-[11px] text-white/60 bg-black/25">
          * الجدول قابل للتمرير أفقياً على الهاتف.
        </div>
      </div>
    @endif

    {{-- CARDS VIEW --}}
    @if($viewMode === 'cards')
      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        @forelse($rows as $r)
          @php
            $name = $r['name'] ?? ($r['username'] ?? '—');
            $username = $r['username'] ?? null;
            $genderV = $r['gender'] ?? null;

            $avatar = $r['avatar'] ?? null;
            $points = (int)($r['points'] ?? 0);
            $hours  = (float)($r['hours'] ?? 0);
            $records= (int)($r['records'] ?? 0);
            $pos    = (int)($r['positive_points'] ?? 0);
            $neg    = (int)($r['negative_points'] ?? 0);
            $liveH  = (float)($r['live_confirmed_hours'] ?? 0);

            $deltaPoints = $r['delta_points'] ?? null;
            $deltaHours  = $r['delta_hours'] ?? null;
            $deltaRecs   = $r['delta_records'] ?? null;
            $deltaLive   = $r['delta_live_confirmed_hours'] ?? null;

            $deltaCls = function($v){
              if (is_null($v)) return 'text-white/50';
              if ($v > 0) return 'text-emerald-200';
              if ($v < 0) return 'text-rose-200';
              return 'text-amber-200';
            };

            $genderChip = match($genderV){
              'female' => 'border-pink-400/20 bg-pink-500/10 text-pink-200',
              'male'   => 'border-emerald-400/20 bg-emerald-500/10 text-emerald-200',
              default  => 'border-white/10 bg-white/5 text-white/70',
            };
          @endphp

          <div class="group relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900/60 via-black/30 to-black/40 p-5 shadow-2xl">
            <div class="pointer-events-none absolute -top-24 -right-16 w-80 h-80 rounded-full bg-violet-400/10 blur-3xl"></div>

            <div class="flex items-center gap-3">
              <div class="w-12 h-12 rounded-3xl bg-white/5 border border-white/10 overflow-hidden grid place-items-center text-white/70">
                @if($avatar)
                  <img src="{{ $avatar }}" alt="avatar" class="w-full h-full object-cover">
                @else
                  <span class="text-sm font-extrabold">{{ mb_substr($name,0,1) }}</span>
                @endif
              </div>
              <div class="min-w-0">
                <div class="text-[13px] font-extrabold text-white truncate">{{ $name }}</div>
                <div class="flex items-center gap-2 mt-1">
                  @if($username)
                    <span class="text-[11px] text-white/50 truncate">@{{ $username }}</span>
                  @endif
                  <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] border {{ $genderChip }}">
                    {{ $genderV === 'female' ? 'صبايا' : ($genderV === 'male' ? 'شباب' : '—') }}
                  </span>
                </div>
              </div>
            </div>

            <div class="mt-4 grid grid-cols-2 gap-2">
              <div class="rounded-2xl border {{ $badge['muted'] }} p-3">
                <div class="text-[10px] text-white/60">النقاط</div>
                <div class="text-white font-extrabold mt-1">{{ number_format($points) }}</div>
                @if($compareEnabled)
                  <div class="text-[11px] mt-1 font-bold {{ $deltaCls($deltaPoints) }}">
                    Δ {{ is_null($deltaPoints) ? '—' : (($deltaPoints>0?'+':'') . $deltaPoints) }}
                  </div>
                @endif
              </div>

              <div class="rounded-2xl border {{ $badge['muted'] }} p-3">
                <div class="text-[10px] text-white/60">الساعات</div>
                <div class="text-white font-extrabold mt-1">{{ number_format($hours, 2) }}</div>
                @if($compareEnabled)
                  <div class="text-[11px] mt-1 font-bold {{ $deltaCls($deltaHours) }}">
                    Δ {{ is_null($deltaHours) ? '—' : (($deltaHours>0?'+':'') . number_format((float)$deltaHours,2)) }}
                  </div>
                @endif
              </div>

              <div class="rounded-2xl border {{ $badge['muted'] }} p-3">
                <div class="text-[10px] text-white/60">عدد السجلات</div>
                <div class="text-white font-extrabold mt-1">{{ number_format($records) }}</div>
                @if($compareEnabled)
                  <div class="text-[11px] mt-1 font-bold {{ $deltaCls($deltaRecs) }}">
                    Δ {{ is_null($deltaRecs) ? '—' : (($deltaRecs>0?'+':'') . $deltaRecs) }}
                  </div>
                @endif
              </div>

              <div class="rounded-2xl border {{ $badge['muted'] }} p-3">
                <div class="text-[10px] text-white/60">لايف مؤكد</div>
                <div class="text-white font-extrabold mt-1">{{ number_format($liveH, 2) }}س</div>
                @if($compareEnabled)
                  <div class="text-[11px] mt-1 font-bold {{ $deltaCls($deltaLive) }}">
                    Δ {{ is_null($deltaLive) ? '—' : (($deltaLive>0?'+':'') . number_format((float)$deltaLive,2)) }}
                  </div>
                @endif
              </div>
            </div>

            <div class="mt-3 grid grid-cols-2 gap-2">
              <div class="rounded-2xl border border-emerald-400/15 bg-emerald-500/10 p-3">
                <div class="text-[10px] text-emerald-200/80">نقاط +</div>
                <div class="text-emerald-100 font-extrabold mt-1">{{ number_format($pos) }}</div>
              </div>
              <div class="rounded-2xl border border-rose-400/15 bg-rose-500/10 p-3">
                <div class="text-[10px] text-rose-200/80">نقاط -</div>
                <div class="text-rose-100 font-extrabold mt-1">{{ number_format($neg) }}</div>
              </div>
            </div>

            <div class="mt-4 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>

            <div class="mt-3 text-[11px] text-white/55">
              * ترتيب حسب: <span class="text-white/80 font-bold">{{ $sortKey }}</span> • اتجاه: <span class="text-white/80 font-bold">{{ $dirKey }}</span>
            </div>
          </div>
        @empty
          <div class="rounded-3xl border border-white/10 bg-slate-950/60 p-10 text-center text-white/60">
            لا يوجد بيانات ضمن هذه الفترة.
          </div>
        @endforelse
      </div>
    @endif

  </div>
</div>

{{-- JS صغير جداً بدون تعارض --}}
<script>
(() => {
  const root = document.getElementById('imanMembersLogsRoot');
  if (!root) return;

  const compareMode = root.querySelector('select[name="compare_mode"]');
  const compareFields = root.querySelector('[data-compare-fields]');
  const toggleCompare = () => {
    if (!compareFields || !compareMode) return;
    const on = compareMode.value === 'custom';
    compareFields.style.display = on ? '' : 'none';
  };

  if (compareMode) {
    compareMode.addEventListener('change', toggleCompare, { passive: true });
    toggleCompare();
  }
})();
</script>
@endsection