{{-- resources/views/superadmin/iman-room/members-goals.blade.php --}}
@extends('layouts.superadmin')
@section('title','أهداف الأعضاء — غرفة إيمان الملكاوي')

@section('content')
@php
  $view = $view ?? (string)request('view','cards'); // cards|table
  $cmpMode = $compare_mode ?? (string)request('compare_mode','prev_month');
  $cmpEnabled = (bool)($compare_enabled ?? false);

  $goalsTeam   = $goalsTeam   ?? ['total_hours'=>0,'guest_count'=>0,'live_hours'=>0,'sahra_hours'=>0];
  $goalsMember = $goalsMember ?? ['mix_hours'=>0,'sahra_hours'=>0];

  $team    = $team    ?? ['members'=>0,'live_hours'=>0,'sahra_hours'=>0,'guest_hours'=>0,'guest_count'=>0,'total_hours'=>0,'hit_total'=>null,'hit_guest'=>null,'hit_live'=>null,'hit_sahra'=>null];
  $teamCmp = $teamCmp ?? null;

  $rows = $rows ?? collect();

  $pct = function($now, $goal){
    $goal = (float)$goal;
    $now  = (float)$now;
    if ($goal <= 0) return 0;
    return max(0, min(100, round(($now/$goal)*100, 1)));
  };

  $toneBadge = function($hit){
    if ($hit === null) return 'bg-white/5 border-white/10 text-white/70';
    return $hit ? 'bg-emerald-500/15 border-emerald-400/20 text-emerald-200' : 'bg-rose-500/15 border-rose-400/20 text-rose-200';
  };

  $deltaCls = function($v){
    if ($v === null) return 'text-white/60';
    if ($v > 0) return 'text-emerald-200';
    if ($v < 0) return 'text-rose-200';
    return 'text-white/70';
  };

  $fmt = function($v, $suf=''){
    if ($v === null) return '—';
    $n = is_numeric($v) ? (float)$v : null;
    if ($n === null) return e((string)$v);
    $t = rtrim(rtrim(number_format($n, 2, '.', ''), '0'), '.');
    return $t.$suf;
  };
@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">

    {{-- 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-lime-400/20 shadow-2xl shadow-lime-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-lime-400/10 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/10 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
        <div class="space-y-2">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-lime-300/25 text-[11px] text-lime-100">
            <i class="fa-solid fa-bullseye text-xs"></i>
            <span>members_goals — أهداف + مقارنة + تحليل AI</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            أهداف الأعضاء <span class="text-lime-300">ProMission</span>
          </h1>

          <div class="text-[12px] sm:text-[14px] text-slate-200/80">
            متابعة ساعات (لايف بدون سهرة + قستات) + ساعات السهرة + مؤشرات إنجاز الفريق والأعضاء.
          </div>

          <div class="mt-3 flex flex-wrap gap-2">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              الفترة: {{ $from ?? request('from') }} → {{ $to ?? request('to') }}
            </span>

            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-[11px] {{ $toneBadge($team['hit_total'] ?? null) }}">
              <span class="w-1.5 h-1.5 rounded-full {{ ($team['hit_total'] ?? null) ? 'bg-emerald-400' : 'bg-rose-400' }}"></span>
              هدف الفريق الكلي: {{ $fmt($team['total_hours'] ?? 0,'س') }} / {{ $fmt($goalsTeam['total_hours'] ?? 0,'س') }}
            </span>
          </div>
        </div>

        {{-- TOOLS --}}
        <div class="w-full lg:w-auto space-y-2">
          <div class="flex items-center justify-end gap-2 flex-wrap">

            <a href="{{ request()->fullUrlWithQuery(['view'=>'cards']) }}"
               class="px-4 py-2 rounded-2xl text-xs font-extrabold border border-white/15
               {{ $view === 'cards' ? 'bg-white/15 text-white' : 'bg-white/5 text-white/70 hover:bg-white/10' }} transition">
              <i class="fa-solid fa-grip ms-2"></i> كروت
            </a>

            <a href="{{ request()->fullUrlWithQuery(['view'=>'table']) }}"
               class="px-4 py-2 rounded-2xl text-xs font-extrabold border border-white/15
               {{ $view === 'table' ? 'bg-white/15 text-white' : 'bg-white/5 text-white/70 hover:bg-white/10' }} transition">
              <i class="fa-solid fa-table ms-2"></i> جدول
            </a>

            <a href="{{ route('superadmin.iman.index') }}"
               class="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
              <i class="fa-solid fa-arrow-left-long"></i>
              رجوع للغرفة
            </a>
          </div>

          {{-- FILTER FORM --}}
          <form method="get" class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 space-y-3 text-xs text-slate-100">
            <input type="hidden" name="view" value="{{ $view }}"/>

            <div class="flex items-center gap-2">
              <div class="w-8 h-8 rounded-xl bg-lime-500/20 text-lime-200 grid place-items-center">
                <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-bold text-sm truncate">أهداف الأعضاء</div>
              </div>
            </div>

            <div class="grid grid-cols-2 gap-2">
              <div>
                <label class="text-[10px] text-slate-300/80">من</label>
                <input type="date" name="from" value="{{ $from ?? request('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-lime-500/30">
              </div>
              <div>
                <label class="text-[10px] text-slate-300/80">إلى</label>
                <input type="date" name="to" value="{{ $to ?? request('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/30">
              </div>
            </div>

            <div class="grid gap-2 sm:grid-cols-3">
              <div class="sm:col-span-1">
                <label class="text-[10px] text-slate-300/80">المقارنة</label>
                <select id="mg_compare_mode" 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-white/10">
                  <option value="none"      {{ $cmpMode==='none' ? 'selected' : '' }}>بدون</option>
                  <option value="prev_month"{{ $cmpMode==='prev_month' ? 'selected' : '' }}>الشهر السابق</option>
                  <option value="custom"    {{ $cmpMode==='custom' ? 'selected' : '' }}>مخصص</option>
                </select>
              </div>

              <div id="mg_compare_wrap" class="sm:col-span-2 grid grid-cols-2 gap-2 {{ $cmpMode==='custom' ? '' : 'hidden' }}">
                <div>
                  <label class="text-[10px] text-slate-300/80">مقارنة من</label>
                  <input type="date" name="compare_from" value="{{ $compare_from ?? request('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-fuchsia-500/25">
                </div>
                <div>
                  <label class="text-[10px] text-slate-300/80">مقارنة إلى</label>
                  <input type="date" name="compare_to" value="{{ $compare_to ?? request('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-fuchsia-500/25">
                </div>
              </div>
            </div>

            <button class="w-full inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
              bg-gradient-to-r from-lime-200 via-fuchsia-200 to-cyan-200 shadow-lg shadow-lime-500/20 hover:scale-[1.01] active:scale-100 transition">
              <i class="fa-solid fa-rotate ms-2 text-[11px]"></i>
              تحديث المؤشرات
            </button>
          </form>
        </div>

      </div>
    </div>

    {{-- TEAM KPIs --}}
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-[11px] text-white/60">إجمالي ساعات الفريق</div>
        <div class="text-2xl font-extrabold text-white mt-1">{{ $fmt($team['total_hours'] ?? 0,'س') }}</div>
        <div class="mt-3 h-2 rounded-full bg-white/10 overflow-hidden">
          <div class="h-2 rounded-full bg-gradient-to-r from-lime-300 via-fuchsia-200 to-cyan-200" style="width: {{ $pct($team['total_hours'] ?? 0, $goalsTeam['total_hours'] ?? 0) }}%"></div>
        </div>
        <div class="mt-2 text-[11px] text-white/60">هدف: {{ $fmt($goalsTeam['total_hours'] ?? 0,'س') }} • إنجاز: {{ $pct($team['total_hours'] ?? 0, $goalsTeam['total_hours'] ?? 0) }}%</div>

        @if($cmpEnabled && $teamCmp)
          <div class="mt-2 text-[11px] {{ $deltaCls($teamCmp['delta_total'] ?? null) }}">
            مقارنة: {{ $fmt($teamCmp['delta_total'] ?? null,'س') }}
            <span class="text-white/40">•</span>
            {{ ($teamCmp['pct_total'] ?? null) !== null ? ($teamCmp['pct_total'].'%') : '—' }}
          </div>
        @endif
      </div>

      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-[11px] text-white/60">لايف (بدون سهرة)</div>
        <div class="text-2xl font-extrabold text-cyan-200 mt-1">{{ $fmt($team['live_hours'] ?? 0,'س') }}</div>
        <div class="mt-3 h-2 rounded-full bg-white/10 overflow-hidden">
          <div class="h-2 rounded-full bg-gradient-to-r from-cyan-200 to-fuchsia-200" style="width: {{ $pct($team['live_hours'] ?? 0, $goalsTeam['live_hours'] ?? 0) }}%"></div>
        </div>
        <div class="mt-2 text-[11px] text-white/60">هدف: {{ $fmt($goalsTeam['live_hours'] ?? 0,'س') }} • {{ $pct($team['live_hours'] ?? 0, $goalsTeam['live_hours'] ?? 0) }}%</div>

        @if($cmpEnabled && $teamCmp)
          <div class="mt-2 text-[11px] {{ $deltaCls($teamCmp['delta_live'] ?? null) }}">
            مقارنة: {{ $fmt($teamCmp['delta_live'] ?? null,'س') }}
            <span class="text-white/40">•</span>
            {{ ($teamCmp['pct_live'] ?? null) !== null ? ($teamCmp['pct_live'].'%') : '—' }}
          </div>
        @endif
      </div>

      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-[11px] text-white/60">السهرات</div>
        <div class="text-2xl font-extrabold text-amber-200 mt-1">{{ $fmt($team['sahra_hours'] ?? 0,'س') }}</div>
        <div class="mt-3 h-2 rounded-full bg-white/10 overflow-hidden">
          <div class="h-2 rounded-full bg-gradient-to-r from-amber-200 to-lime-200" style="width: {{ $pct($team['sahra_hours'] ?? 0, $goalsTeam['sahra_hours'] ?? 0) }}%"></div>
        </div>
        <div class="mt-2 text-[11px] text-white/60">هدف: {{ $fmt($goalsTeam['sahra_hours'] ?? 0,'س') }} • {{ $pct($team['sahra_hours'] ?? 0, $goalsTeam['sahra_hours'] ?? 0) }}%</div>

        @if($cmpEnabled && $teamCmp)
          <div class="mt-2 text-[11px] {{ $deltaCls($teamCmp['delta_sahra'] ?? null) }}">
            مقارنة: {{ $fmt($teamCmp['delta_sahra'] ?? null,'س') }}
            <span class="text-white/40">•</span>
            {{ ($teamCmp['pct_sahra'] ?? null) !== null ? ($teamCmp['pct_sahra'].'%') : '—' }}
          </div>
        @endif
      </div>

      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-[11px] text-white/60">القستات</div>
        <div class="text-2xl font-extrabold text-fuchsia-200 mt-1">{{ (int)($team['guest_count'] ?? 0) }}</div>
        <div class="mt-3 h-2 rounded-full bg-white/10 overflow-hidden">
          <div class="h-2 rounded-full bg-gradient-to-r from-fuchsia-200 to-cyan-200" style="width: {{ $pct($team['guest_count'] ?? 0, $goalsTeam['guest_count'] ?? 0) }}%"></div>
        </div>
        <div class="mt-2 text-[11px] text-white/60">هدف: {{ (int)($goalsTeam['guest_count'] ?? 0) }} • {{ $pct($team['guest_count'] ?? 0, $goalsTeam['guest_count'] ?? 0) }}%</div>

        @if($cmpEnabled && $teamCmp)
          <div class="mt-2 text-[11px] {{ $deltaCls($teamCmp['delta_guest_count'] ?? null) }}">
            مقارنة: {{ $teamCmp['delta_guest_count'] ?? '—' }}
            <span class="text-white/40">•</span>
            {{ ($teamCmp['pct_guest_count'] ?? null) !== null ? ($teamCmp['pct_guest_count'].'%') : '—' }}
          </div>
        @endif
      </div>
    </div>

    {{-- AI Analysis --}}
    <div class="grid gap-4 lg:grid-cols-3">
      <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-lime-400/10 blur-3xl"></div>
        <div class="flex items-center gap-3 mb-3">
          <div class="w-10 h-10 rounded-2xl bg-lime-500/15 border border-lime-400/25 grid place-items-center text-lime-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'] ?? ('تحليل ذكي للفترة '.$from.' → '.$to) }}</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-lime-200 font-bold">•</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">
              لا يوجد Tips حالياً — سيتم تعبئتها لاحقاً.
            </div>
          @endif
        </div>
      </div>

      <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/60 shadow-2xl p-5">
        <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 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-flag-checkered"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">أهداف العضو</div>
            <div class="text-base font-extrabold text-white">Targets</div>
          </div>
        </div>

        <div class="space-y-2 text-[12px] text-white/80">
          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
            Mix (لايف بدون سهرة + قست): <b class="text-white">{{ $fmt($goalsMember['mix_hours'] ?? 0,'س') }}</b>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
            سهرة: <b class="text-white">{{ $fmt($goalsMember['sahra_hours'] ?? 0,'س') }}</b>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
            أعضاء ضمن الفترة: <b class="text-white">{{ (int)($team['members'] ?? 0) }}</b>
          </div>
        </div>
      </div>
    </div>

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

    {{-- ROWS --}}
    @if($view === 'cards')
      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        @forelse($rows as $r)
          @php
            $avatar = $r['avatar'] ?? null;
            $name = $r['name'] ?? ($r['username'] ?? ('#'.($r['id'] ?? '')));
            $mix  = (float)($r['mix_hours'] ?? 0);
            $sah  = (float)($r['sahra_hours'] ?? 0);
            $tot  = (float)($r['total_hours'] ?? 0);

            $hitMix = $r['hit_member_mix'] ?? null;
            $hitSah = $r['hit_member_sahra'] ?? null;
          @endphp

          <div class="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-lime-400/10 blur-3xl"></div>

            <div class="flex items-start justify-between gap-3">
              <div class="flex items-center gap-3 min-w-0">
                <div class="w-12 h-12 rounded-3xl overflow-hidden bg-white/5 border border-white/10 shrink-0">
                  @if($avatar)
                    <img src="{{ $avatar }}" alt="avatar" class="w-full h-full object-cover">
                  @else
                    <div class="w-full h-full grid place-items-center text-white/50">
                      <i class="fa-solid fa-user"></i>
                    </div>
                  @endif
                </div>
                <div class="min-w-0">
                  <div class="text-[13px] font-extrabold text-white truncate">{{ $name }}</div>
                  <div class="text-[11px] text-white/55 truncate">
                    {{ $r['username'] ?? '' }}
                    <span class="text-white/35">•</span>
                    #{{ $r['id'] ?? '—' }}
                  </div>
                </div>
              </div>

              <div class="text-right">
                <div class="text-[10px] text-white/60">الإجمالي</div>
                <div class="text-xl font-extrabold text-white">{{ $fmt($tot,'س') }}</div>
                @if($cmpEnabled)
                  <div class="text-[11px] {{ $deltaCls($r['delta_total'] ?? null) }}">
                    {{ $fmt($r['delta_total'] ?? null,'س') }}
                    <span class="text-white/40">•</span>
                    {{ ($r['pct_total'] ?? null) !== null ? ($r['pct_total'].'%') : '—' }}
                  </div>
                @endif
              </div>
            </div>

            <div class="mt-4 grid gap-2 text-[11px] text-white/70">
              <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 flex items-center justify-between">
                <span>Mix (لايف+قست)</span>
                <span class="font-extrabold {{ $hitMix ? 'text-emerald-200' : 'text-rose-200' }}">{{ $fmt($mix,'س') }}</span>
              </div>

              <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 flex items-center justify-between">
                <span>سهرة</span>
                <span class="font-extrabold {{ $hitSah ? 'text-emerald-200' : 'text-amber-200' }}">{{ $fmt($sah,'س') }}</span>
              </div>

              <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 flex items-center justify-between">
                <span>قستات</span>
                <span class="font-extrabold text-fuchsia-200">{{ (int)($r['guest_count'] ?? 0) }}</span>
              </div>
            </div>

            <div class="mt-4 flex flex-wrap gap-2">
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-[11px] {{ $toneBadge($hitMix) }}">
                <i class="fa-solid fa-bullseye text-[10px]"></i> هدف Mix
              </span>
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-[11px] {{ $toneBadge($hitSah) }}">
                <i class="fa-solid fa-moon text-[10px]"></i> هدف السهرة
              </span>
            </div>
          </div>
        @empty
          <div class="rounded-3xl border border-white/10 bg-black/25 p-6 text-white/60">
            لا يوجد بيانات ضمن الفترة الحالية.
          </div>
        @endforelse
      </div>
    @else
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5 overflow-hidden">
        <div class="flex items-center justify-between mb-3">
          <div class="text-sm font-extrabold text-white">جدول أهداف الأعضاء</div>
          <div class="text-[11px] text-white/50">Scroll أفقي للهاتف • مقارنة: {{ $cmpEnabled ? 'مفعّلة' : 'لا' }}</div>
        </div>

        <div class="overflow-x-auto">
          <table class="w-full text-sm min-w-[1100px]">
            <thead class="text-[11px] text-white/60">
              <tr class="border-b border-white/10">
                <th class="py-2 text-right">العضو</th>
                <th class="py-2 text-right">Mix (س)</th>
                <th class="py-2 text-right">سهرة (س)</th>
                <th class="py-2 text-right">قست (س)</th>
                <th class="py-2 text-right">عدد القستات</th>
                <th class="py-2 text-right">الإجمالي (س)</th>
                @if($cmpEnabled)
                  <th class="py-2 text-right">Δ إجمالي</th>
                  <th class="py-2 text-right">% إجمالي</th>
                @endif
                <th class="py-2 text-right">Hit Mix</th>
                <th class="py-2 text-right">Hit Sahra</th>
              </tr>
            </thead>

            <tbody class="text-[12px] text-white/85">
              @forelse($rows as $r)
                @php
                  $avatar = $r['avatar'] ?? null;
                  $name = $r['name'] ?? ($r['username'] ?? ('#'.($r['id'] ?? '')));
                  $hitMix = $r['hit_member_mix'] ?? null;
                  $hitSah = $r['hit_member_sahra'] ?? null;
                @endphp

                <tr class="border-b border-white/5 hover:bg-white/5 transition">
                  <td class="py-2">
                    <div class="flex items-center gap-3 min-w-[260px]">
                      <div class="w-9 h-9 rounded-2xl overflow-hidden bg-white/5 border border-white/10 shrink-0">
                        @if($avatar)
                          <img src="{{ $avatar }}" alt="avatar" class="w-full h-full object-cover">
                        @else
                          <div class="w-full h-full grid place-items-center text-white/50">
                            <i class="fa-solid fa-user text-[12px]"></i>
                          </div>
                        @endif
                      </div>
                      <div class="min-w-0">
                        <div class="font-extrabold text-white truncate">{{ $name }}</div>
                        <div class="text-[11px] text-white/55 truncate">{{ $r['username'] ?? '' }} <span class="text-white/35">•</span> #{{ $r['id'] ?? '—' }}</div>
                      </div>
                    </div>
                  </td>

                  <td class="py-2 font-bold {{ $hitMix ? 'text-emerald-200' : 'text-rose-200' }}">{{ $fmt($r['mix_hours'] ?? 0) }}</td>
                  <td class="py-2 font-bold {{ $hitSah ? 'text-emerald-200' : 'text-amber-200' }}">{{ $fmt($r['sahra_hours'] ?? 0) }}</td>
                  <td class="py-2 text-white/70">{{ $fmt($r['guest_hours'] ?? 0) }}</td>
                  <td class="py-2 text-fuchsia-200 font-extrabold">{{ (int)($r['guest_count'] ?? 0) }}</td>
                  <td class="py-2 font-extrabold text-white">{{ $fmt($r['total_hours'] ?? 0) }}</td>

                  @if($cmpEnabled)
                    <td class="py-2 font-bold {{ $deltaCls($r['delta_total'] ?? null) }}">{{ $fmt($r['delta_total'] ?? null) }}</td>
                    <td class="py-2 text-white/70">{{ ($r['pct_total'] ?? null) !== null ? ($r['pct_total'].'%') : '—' }}</td>
                  @endif

                  <td class="py-2">
                    <span class="inline-flex items-center px-2 py-1 rounded-full border text-[11px] {{ $toneBadge($hitMix) }}">
                      {{ $hitMix === null ? '—' : ($hitMix ? '✅' : '❌') }}
                    </span>
                  </td>
                  <td class="py-2">
                    <span class="inline-flex items-center px-2 py-1 rounded-full border text-[11px] {{ $toneBadge($hitSah) }}">
                      {{ $hitSah === null ? '—' : ($hitSah ? '✅' : '❌') }}
                    </span>
                  </td>
                </tr>
              @empty
                <tr><td colspan="{{ $cmpEnabled ? 10 : 8 }}" class="py-4 text-white/60">لا يوجد بيانات ضمن الفترة الحالية.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    @endif

  </div>
</div>

<script>
(() => {
  // members_goals safe scope
  const mode = document.getElementById('mg_compare_mode');
  const wrap = document.getElementById('mg_compare_wrap');

  const toggle = () => {
    const v = (mode?.value || '');
    if (!wrap) return;
    wrap.classList.toggle('hidden', v !== 'custom');
  };

  mode?.addEventListener('change', toggle);
  toggle();
})();
</script>
@endsection