@extends('layouts.superadmin')
@section('title','ساعات الأعضاء — غرفة إيمان الملكاوي')

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

  $badge = 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';
  };

  $dirIcon = function($dir){
    return $dir === 'asc' ? 'fa-solid fa-arrow-up-wide-short' : 'fa-solid fa-arrow-down-wide-short';
  };

  $fmt = function($n, $d=2){
    if ($n === null) return '—';
    return number_format((float)$n, $d);
  };

  $pctClr = function($pct){
    if ($pct === null) return 'text-white/60';
    if ($pct >= 10) return 'text-emerald-200';
    if ($pct >= 0)  return 'text-cyan-200';
    if ($pct <= -10) return 'text-rose-200';
    return 'text-amber-200';
  };

  $deltaSign = function($v){
    if ($v === null) return '';
    return $v > 0 ? '+' : '';
  };
@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-sky-400/20 shadow-2xl shadow-sky-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-sky-400/10 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-fuchsia-400/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-sky-300/25 text-[11px] text-sky-100">
            <i class="fa-solid fa-clock text-xs"></i>
            <span>ساعات الأعضاء — لايفات + قستات + (سهرة اختياري)</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            ساعات الأعضاء
          </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 }} → {{ $to }}
            </span>

            @if($cmpEnabled)
              <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">
                مقارنة: {{ $compare_from }} → {{ $compare_to }}
              </span>
            @endif
          </div>
        </div>

        <div class="w-full lg:w-auto space-y-2">
          <div class="flex items-center justify-end gap-2 flex-wrap">
            <a href="{{ url()->current() }}?{{ http_build_query(array_merge(request()->query(), ['view'=>'table'])) }}"
               class="px-4 py-2 rounded-2xl text-xs font-extrabold border border-white/15
               {{ $viewMode === '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="{{ url()->current() }}?{{ http_build_query(array_merge(request()->query(), ['view'=>'cards'])) }}"
               class="px-4 py-2 rounded-2xl text-xs font-extrabold border border-white/15
               {{ $viewMode === '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>

            <button id="mh_copy_wa"
              class="px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
              bg-gradient-to-r from-sky-200 via-fuchsia-200 to-cyan-200 shadow-lg shadow-sky-500/15 hover:scale-[1.01] active:scale-100 transition">
              <i class="fa-brands fa-whatsapp ms-2"></i> نسخ رسالة واتساب
            </button>
          </div>

          <div class="flex items-center justify-end">
            <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>
        </div>

      </div>
    </div>

    {{-- FILTERS --}}
    <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
      <div class="flex items-center justify-between gap-3 mb-3">
        <div class="text-sm font-extrabold text-white">
          <i class="fa-solid fa-filter text-white/70 ms-2"></i> فلاتر وتحكّم
        </div>
        <div class="text-[11px] text-white/55">
          رتّب النتائج وغيّر العرض بدون ما تنضرب JS.
        </div>
      </div>

      <form method="get" class="grid gap-3 lg:grid-cols-12">
        {{-- dates --}}
        <div class="lg:col-span-2">
          <label class="text-[10px] text-white/60">من</label>
          <input type="date" name="from" value="{{ $from }}"
            class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500/25">
        </div>

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

        {{-- compare --}}
        <div class="lg:col-span-2">
          <label class="text-[10px] text-white/60">المقارنة</label>
          <select name="compare_mode"
            class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/20">
            <option value="none" {{ ($compare_mode ?? 'prev_month')==='none' ? 'selected' : '' }}>بدون</option>
            <option value="prev_month" {{ ($compare_mode ?? 'prev_month')==='prev_month' ? 'selected' : '' }}>الشهر السابق</option>
            <option value="custom" {{ ($compare_mode ?? 'prev_month')==='custom' ? 'selected' : '' }}>مخصص</option>
          </select>
        </div>

        <div class="lg:col-span-2">
          <label class="text-[10px] text-white/60">مقارنة من</label>
          <input type="date" name="compare_from" value="{{ $compare_from }}"
            class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-white/10">
        </div>

        <div class="lg:col-span-2">
          <label class="text-[10px] text-white/60">مقارنة إلى</label>
          <input type="date" name="compare_to" value="{{ $compare_to }}"
            class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-white/10">
        </div>

        {{-- live filters --}}
        <div class="lg:col-span-2">
          <label class="text-[10px] text-white/60">نوع اللايف</label>
          <select name="live_type"
            class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-500/20">
            <option value="" {{ ($live_type ?? '')==='' ? 'selected':'' }}>الكل</option>
            <option value="guests" {{ ($live_type ?? '')==='guests' ? 'selected':'' }}>Guests</option>
            <option value="tours" {{ ($live_type ?? '')==='tours' ? 'selected':'' }}>Tours</option>
            <option value="both" {{ ($live_type ?? '')==='both' ? 'selected':'' }}>Both</option>
          </select>
        </div>

        <div class="lg:col-span-2">
          <label class="text-[10px] text-white/60">السهرات</label>
          <select name="sahra_mode"
            class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-500/20">
            <option value="include" {{ ($sahra_mode ?? 'include')==='include' ? 'selected':'' }}>تضمين</option>
            <option value="exclude" {{ ($sahra_mode ?? 'include')==='exclude' ? 'selected':'' }}>استبعاد</option>
            <option value="only" {{ ($sahra_mode ?? 'include')==='only' ? 'selected':'' }}>سهرات فقط</option>
          </select>
        </div>

        {{-- toggles --}}
        <div class="lg:col-span-10 flex flex-wrap items-center gap-2 pt-1">
          <label class="inline-flex items-center gap-2 text-[11px] text-white/70 px-3 py-2 rounded-2xl bg-white/5 border border-white/10">
            <input type="checkbox" name="show_share" value="1" {{ !empty($show_share) ? 'checked' : '' }} class="w-4 h-4 rounded bg-black/40 border-white/20">
            إظهار النسب (Share)
          </label>

          <label class="inline-flex items-center gap-2 text-[11px] text-white/70 px-3 py-2 rounded-2xl bg-white/5 border border-white/10">
            <input type="checkbox" name="show_growth" value="1" {{ !empty($show_growth) ? 'checked' : '' }} class="w-4 h-4 rounded bg-black/40 border-white/20">
            إظهار النمو (Growth)
          </label>

          <label class="inline-flex items-center gap-2 text-[11px] text-white/70 px-3 py-2 rounded-2xl bg-white/5 border border-white/10">
            <input type="checkbox" name="include_zero" value="1" {{ !empty($include_zero) ? 'checked' : '' }} class="w-4 h-4 rounded bg-black/40 border-white/20">
            تضمين صفر ساعات
          </label>

          <label class="inline-flex items-center gap-2 text-[11px] text-white/70 px-3 py-2 rounded-2xl bg-white/5 border border-white/10">
            <input type="checkbox" name="show_sahra_col" value="1" {{ !empty($show_sahra_col) ? 'checked' : '' }} class="w-4 h-4 rounded bg-black/40 border-white/20">
            إظهار عمود السهرة
          </label>
        </div>

        {{-- sort --}}
        <div class="lg:col-span-3">
          <label class="text-[10px] text-white/60">الترتيب</label>
          <select name="sort"
            class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-white/10">
            <option value="total" {{ ($sort ?? 'total')==='total' ? 'selected':'' }}>الإجمالي</option>
            <option value="live"  {{ ($sort ?? 'total')==='live'  ? 'selected':'' }}>لايف</option>
            <option value="guest" {{ ($sort ?? 'total')==='guest' ? 'selected':'' }}>قست</option>
            <option value="sahra" {{ ($sort ?? 'total')==='sahra' ? 'selected':'' }}>سهرة</option>
          </select>
        </div>

        <div class="lg:col-span-2">
          <label class="text-[10px] text-white/60">الاتجاه</label>
          <select name="dir"
            class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-white/10">
            <option value="desc" {{ ($dir ?? 'desc')==='desc' ? 'selected':'' }}>تنازلي</option>
            <option value="asc"  {{ ($dir ?? 'desc')==='asc'  ? 'selected':'' }}>تصاعدي</option>
          </select>
        </div>

        <div class="lg:col-span-2">
          <label class="text-[10px] text-white/60">العرض</label>
          <input type="hidden" name="view" value="{{ $viewMode }}">
          <button class="w-full mt-1 inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
            bg-gradient-to-r from-sky-200 via-fuchsia-200 to-cyan-200 shadow-lg shadow-sky-500/20 hover:scale-[1.01] active:scale-100 transition">
            <i class="fa-solid fa-rotate ms-2"></i> تحديث
          </button>
        </div>

        {{-- goals --}}
        <div class="lg:col-span-12 mt-2 grid gap-3 sm:grid-cols-3">
          <div>
            <label class="text-[10px] text-white/60">هدف لايف (للعضو) (ساعات)</label>
            <input type="number" step="0.01" name="goal_live" value="{{ $goal_live ?? '' }}"
              class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
          </div>
          <div>
            <label class="text-[10px] text-white/60">هدف قست (للعضو) (ساعات)</label>
            <input type="number" step="0.01" name="goal_guest" value="{{ $goal_guest ?? '' }}"
              class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
          </div>
          <div>
            <label class="text-[10px] text-white/60">هدف إجمالي (للعضو) (ساعات)</label>
            <input type="number" step="0.01" name="goal_total" value="{{ $goal_total ?? '' }}"
              class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-xs text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
          </div>
        </div>

      </form>
    </div>

    {{-- KPIs --}}
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
      <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">{{ $totals['members'] ?? 0 }}</div>
      </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-emerald-200 mt-1">{{ $fmt($totals['live_hours'] ?? 0) }}</div>
      </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">{{ $fmt($totals['guest_hours'] ?? 0) }}</div>
      </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($totals['total_hours'] ?? 0) }}</div>
      </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($totals['sahra_hours'] ?? 0) }}</div>
      </div>
    </div>

    {{-- TABLE / CARDS --}}
    @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['id']);
            $avatar = $r['avatar'] ?? 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-sky-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 bg-white/5 border border-white/10 overflow-hidden grid place-items-center">
                  @if($avatar)
                    <img src="{{ $avatar }}" class="w-full h-full object-cover" alt="avatar">
                  @else
                    <i class="fa-solid fa-user text-white/40"></i>
                  @endif
                </div>
                <div class="min-w-0">
                  <div class="text-[14px] font-extrabold text-white truncate">{{ $name }}</div>
                  <div class="text-[11px] text-white/55 truncate">{{ $r['username'] ?? '' }}</div>
                </div>
              </div>

              <div class="text-right">
                <div class="text-[10px] text-white/60">الإجمالي</div>
                <div class="text-xl font-extrabold text-cyan-200">{{ $fmt($r['total_hours'] ?? 0) }}</div>
              </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>لايف</span>
                <span class="font-extrabold text-emerald-200">{{ $fmt($r['live_hours'] ?? 0) }}س • {{ (int)($r['live_count'] ?? 0) }}x</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">{{ $fmt($r['guest_hours'] ?? 0) }}س • {{ (int)($r['guest_count'] ?? 0) }}x</span>
              </div>

              @if(!empty($show_sahra_col))
                <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-amber-200">{{ $fmt($r['sahra_hours'] ?? 0) }}س</span>
                </div>
              @endif
            </div>

            @if(!empty($show_share))
              <div class="mt-4 rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[11px] text-white/70">
                Share — لايف: <b class="text-white">{{ $fmt($r['share_live'] ?? 0, 1) }}%</b>
                • قست: <b class="text-white">{{ $fmt($r['share_guest'] ?? 0, 1) }}%</b>
                • إجمالي: <b class="text-white">{{ $fmt($r['share_total'] ?? 0, 1) }}%</b>
              </div>
            @endif

            @if($cmpEnabled && !empty($show_growth))
              <div class="mt-3 rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[11px] text-white/70">
                Growth — إجمالي:
                <b class="{{ $pctClr($r['pct_total'] ?? null) }}">
                  {{ ($r['pct_total'] === null) ? '—' : ($deltaSign($r['pct_total']).$fmt($r['pct_total'],1).'%') }}
                </b>
                <span class="text-white/50">•</span>
                Δ {{ $deltaSign($r['delta_total'] ?? 0) }}{{ $fmt($r['delta_total'] ?? 0) }}س
              </div>
            @endif

            <div class="mt-4 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></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] {{ $badge($r['hit_live'] ?? null) }}">
                لايف: {{ $r['hit_live']===null ? '—' : ($r['hit_live'] ? 'حقق الهدف' : 'لم يحقق') }}
              </span>
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-[11px] {{ $badge($r['hit_guest'] ?? null) }}">
                قست: {{ $r['hit_guest']===null ? '—' : ($r['hit_guest'] ? 'حقق الهدف' : 'لم يحقق') }}
              </span>
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-[11px] {{ $badge($r['hit_total'] ?? null) }}">
                إجمالي: {{ $r['hit_total']===null ? '—' : ($r['hit_total'] ? 'حقق الهدف' : 'لم يحقق') }}
              </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 gap-3 mb-3">
          <div class="text-sm font-extrabold text-white">جدول الساعات</div>
          <div class="text-[11px] text-white/60">
            Sort: <b class="text-white">{{ $sort ?? 'total' }}</b> • Dir: <i class="{{ $dirIcon($dir ?? 'desc') }}"></i>
          </div>
        </div>

        <div class="overflow-x-auto">
          <table class="w-full text-sm">
            <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">لايف (س)</th>
                <th class="py-2 text-right">عدد اللايف</th>
                @if(!empty($show_sahra_col))
                  <th class="py-2 text-right">سهرة (س)</th>
                @endif
                <th class="py-2 text-right">قست (س)</th>
                <th class="py-2 text-right">عدد القست</th>
                <th class="py-2 text-right">الإجمالي (س)</th>

                @if(!empty($show_share))
                  <th class="py-2 text-right">Share إجمالي</th>
                @endif

                @if($cmpEnabled && !empty($show_growth))
                  <th class="py-2 text-right">Δ إجمالي</th>
                  <th class="py-2 text-right">% نمو</th>
                @endif

                <th class="py-2 text-right">أهداف</th>
              </tr>
            </thead>

            <tbody class="text-[12px] text-white/80">
              @forelse(($rows ?? []) as $r)
                @php
                  $name = $r['name'] ?? ('#'.$r['id']);
                  $avatar = $r['avatar'] ?? 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-[220px]">
                      <div class="w-9 h-9 rounded-2xl bg-white/5 border border-white/10 overflow-hidden grid place-items-center">
                        @if($avatar)
                          <img src="{{ $avatar }}" class="w-full h-full object-cover" alt="avatar">
                        @else
                          <i class="fa-solid fa-user text-white/35 text-xs"></i>
                        @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'] ?? '' }}</div>
                      </div>
                    </div>
                  </td>

                  <td class="py-2 font-extrabold text-emerald-200">{{ $fmt($r['live_hours'] ?? 0) }}</td>
                  <td class="py-2 text-white/60">{{ (int)($r['live_count'] ?? 0) }}</td>

                  @if(!empty($show_sahra_col))
                    <td class="py-2 font-extrabold text-amber-200">{{ $fmt($r['sahra_hours'] ?? 0) }}</td>
                  @endif

                  <td class="py-2 font-extrabold text-fuchsia-200">{{ $fmt($r['guest_hours'] ?? 0) }}</td>
                  <td class="py-2 text-white/60">{{ (int)($r['guest_count'] ?? 0) }}</td>

                  <td class="py-2 font-extrabold text-cyan-200">{{ $fmt($r['total_hours'] ?? 0) }}</td>

                  @if(!empty($show_share))
                    <td class="py-2 text-white/70">{{ $fmt($r['share_total'] ?? 0, 1) }}%</td>
                  @endif

                  @if($cmpEnabled && !empty($show_growth))
                    <td class="py-2 text-white/80">
                      {{ ($r['delta_total']===null) ? '—' : ($deltaSign($r['delta_total']).$fmt($r['delta_total'])) }}
                    </td>
                    <td class="py-2 font-extrabold {{ $pctClr($r['pct_total'] ?? null) }}">
                      {{ ($r['pct_total']===null) ? '—' : ($deltaSign($r['pct_total']).$fmt($r['pct_total'],1).'%') }}
                    </td>
                  @endif

                  <td class="py-2">
                    <div class="flex flex-wrap gap-2">
                      <span class="inline-flex items-center px-2.5 py-1 rounded-full border text-[10px] {{ $badge($r['hit_live'] ?? null) }}">لايف</span>
                      <span class="inline-flex items-center px-2.5 py-1 rounded-full border text-[10px] {{ $badge($r['hit_guest'] ?? null) }}">قست</span>
                      <span class="inline-flex items-center px-2.5 py-1 rounded-full border text-[10px] {{ $badge($r['hit_total'] ?? null) }}">إجمالي</span>
                    </div>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="20" class="py-4 text-white/50">لا يوجد بيانات للفترة الحالية.</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    @endif

    {{-- TEAM GOALS (Optional) --}}
    @if(!empty($teamGoals))
      <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="text-sm font-extrabold text-white mb-2">أهداف التيم (اختياري)</div>
        <div class="grid gap-3 sm:grid-cols-3 text-[12px] text-white/75">
          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
            هدف لايف: <b class="text-white">{{ $teamGoals['team_goal_live'] ?? 0 }}</b>
            <span class="text-white/50">•</span>
            الحالة:
            <b class="{{ ($teamGoals['hit_live'] ?? null)===true ? 'text-emerald-200' : 'text-rose-200' }}">
              {{ ($teamGoals['hit_live'] ?? null)===null ? '—' : (($teamGoals['hit_live'] ?? false) ? 'متحقق' : 'غير متحقق') }}
            </b>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
            هدف قست: <b class="text-white">{{ $teamGoals['team_goal_guest'] ?? 0 }}</b>
            <span class="text-white/50">•</span>
            الحالة:
            <b class="{{ ($teamGoals['hit_guest'] ?? null)===true ? 'text-emerald-200' : 'text-rose-200' }}">
              {{ ($teamGoals['hit_guest'] ?? null)===null ? '—' : (($teamGoals['hit_guest'] ?? false) ? 'متحقق' : 'غير متحقق') }}
            </b>
          </div>
          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
            هدف إجمالي: <b class="text-white">{{ $teamGoals['team_goal_total'] ?? 0 }}</b>
            <span class="text-white/50">•</span>
            الحالة:
            <b class="{{ ($teamGoals['hit_total'] ?? null)===true ? 'text-emerald-200' : 'text-rose-200' }}">
              {{ ($teamGoals['hit_total'] ?? null)===null ? '—' : (($teamGoals['hit_total'] ?? false) ? 'متحقق' : 'غير متحقق') }}
            </b>
          </div>
        </div>
      </div>
    @endif

    {{-- WhatsApp Message (Hidden Source) --}}
    <textarea id="mh_wa_text" class="hidden">{{ $waMessage ?? '' }}</textarea>

  </div>
</div>

<script>
(() => {
  // ✅ JS معزول بالكامل (بدون تعارض)
  const btn = document.getElementById('mh_copy_wa');
  const ta  = document.getElementById('mh_wa_text');

  btn?.addEventListener('click', async () => {
    const text = (ta?.value || '').trim();
    if (!text) return;

    try {
      await navigator.clipboard.writeText(text);
      btn.classList.add('opacity-80');
      btn.innerHTML = '<i class="fa-solid fa-check ms-2"></i> تم النسخ';
      setTimeout(() => {
        btn.classList.remove('opacity-80');
        btn.innerHTML = '<i class="fa-brands fa-whatsapp ms-2"></i> نسخ رسالة واتساب';
      }, 1200);
    } catch (e) {
      // fallback
      ta.classList.remove('hidden');
      ta.select();
      document.execCommand('copy');
      ta.classList.add('hidden');
    }
  });
})();
</script>
@endsection