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

@section('content')
@php
  $cmpEnabled = (bool)($compare_enabled ?? false);
  $showGrowth = (bool)($show_growth ?? false);
  $showShare  = (bool)($show_share ?? true);
  $showSahra  = (bool)($show_sahra_col ?? false);

  $dirNow = strtolower((string)($dir ?? 'desc')) === 'asc' ? 'asc' : 'desc';
  $toggleDir = $dirNow === 'asc' ? 'desc' : 'asc';

  $sortNow = (string)($sort ?? 'total');
  $rows = collect($rows ?? []);
  $totals = $totals ?? ['members'=>0,'live_hours'=>0,'guest_hours'=>0,'total_hours'=>0,'sahra_hours'=>0,'lives_count'=>0,'guest_count'=>0];

  $teamGoals = $teamGoals ?? [
    'team_goal_live'=>0,'team_goal_guest'=>0,'team_goal_total'=>0,
    'hit_live'=>null,'hit_guest'=>null,'hit_total'=>null,
  ];

  $liveKpis  = $liveKpis  ?? ['total'=>0,'confirmed'=>0,'pending'=>0];
  $guestKpis = $guestKpis ?? ['records'=>0,'hours'=>0];

  $qBase = request()->except(['sort','dir']);
  $sortUrl = function($key) use ($qBase, $toggleDir) {
    return request()->fullUrlWithQuery(array_merge($qBase, ['sort'=>$key,'dir'=>$toggleDir]));
  };

  $badgeHit = fn($hit) => $hit === null ? 'bg-white/5 border-white/10 text-white/70'
                      : ($hit ? 'bg-emerald-500/15 border-emerald-400/25 text-emerald-200'
                              : 'bg-rose-500/15 border-rose-400/25 text-rose-200');

  $toneNum = fn($v) => $v >= 0 ? 'text-emerald-200' : 'text-rose-200';
@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-start 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>

        {{-- FILTER --}}
        <div class="w-full lg:w-[520px]">
          <div class="rounded-3xl bg-black/40 border border-white/15 p-4 sm:p-5 space-y-3 text-xs text-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-9 h-9 rounded-2xl bg-sky-500/15 border border-sky-400/25 grid place-items-center text-sky-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 truncate">خيارات التحليل</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-2xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500/35">
              </div>

              <div>
                <label class="text-[10px] text-slate-300/80">إلى</label>
                <input type="date" name="to" value="{{ $to }}"
                  class="w-full mt-1 rounded-2xl 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 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-2xl 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"      {{ ($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>
                  <label class="text-[10px] text-slate-300/80">نوع اللايف</label>
                  <select name="live_type"
                    class="w-full mt-1 rounded-2xl 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=""      {{ ($live_type ?? '')==='' ? 'selected' : '' }}>الكل</option>
                    <option value="guests"{{ ($live_type ?? '')==='guests' ? 'selected' : '' }}>قستات</option>
                    <option value="tours" {{ ($live_type ?? '')==='tours' ? 'selected' : '' }}>جولات</option>
                    <option value="both"  {{ ($live_type ?? '')==='both' ? 'selected' : '' }}>both</option>
                  </select>
                </div>
              </div>

              <div class="col-span-2 grid grid-cols-2 gap-2">
                <div>
                  <label class="text-[10px] text-slate-300/80">السهرات</label>
                  <select name="sahra_mode"
                    class="w-full mt-1 rounded-2xl 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="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>

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

              {{-- compare custom --}}
              <div class="col-span-2 grid grid-cols-2 gap-2 {{ ($compare_mode ?? 'prev_month')==='custom' ? '' : 'opacity-70' }}">
                <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-2xl 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">
                </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-2xl 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">
                </div>
              </div>

              <div class="col-span-2 flex flex-wrap gap-3 pt-1">
                <label class="inline-flex items-center gap-2 text-[11px] text-white/80">
                  <input type="checkbox" name="show_growth" value="1" {{ $showGrowth ? 'checked' : '' }}
                    class="w-4 h-4 rounded border-white/20 bg-black/40">
                  إظهار النمو
                </label>

                <label class="inline-flex items-center gap-2 text-[11px] text-white/80">
                  <input type="checkbox" name="show_share" value="1" {{ $showShare ? 'checked' : '' }}
                    class="w-4 h-4 rounded border-white/20 bg-black/40">
                  إظهار الحصص
                </label>

                <label class="inline-flex items-center gap-2 text-[11px] text-white/80">
                  <input type="checkbox" name="include_zero" value="1" {{ ($include_zero ?? false) ? 'checked' : '' }}
                    class="w-4 h-4 rounded border-white/20 bg-black/40">
                  تضمين 0 ساعة
                </label>
              </div>

              {{-- Goals --}}
              <div class="col-span-2 grid grid-cols-3 gap-2">
                <div>
                  <label class="text-[10px] text-slate-300/80">هدف لايف (عضو)</label>
                  <input type="number" step="0.01" min="0" name="goal_live" value="{{ $goal_live ?? '' }}"
                    class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
                </div>
                <div>
                  <label class="text-[10px] text-slate-300/80">هدف قست (عضو)</label>
                  <input type="number" step="0.01" min="0" name="goal_guest" value="{{ $goal_guest ?? '' }}"
                    class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-500/20">
                </div>
                <div>
                  <label class="text-[10px] text-slate-300/80">هدف مجموع (عضو)</label>
                  <input type="number" step="0.01" min="0" name="goal_total" value="{{ $goal_total ?? '' }}"
                    class="w-full mt-1 rounded-2xl 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/20">
                </div>
              </div>

              <div class="col-span-2 grid grid-cols-3 gap-2">
                <div>
                  <label class="text-[10px] text-slate-300/80">هدف لايف (تيم)</label>
                  <input type="number" step="0.01" min="0" name="team_goal_live" value="{{ $teamGoals['team_goal_live'] ?? '' }}"
                    class="w-full mt-1 rounded-2xl 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">
                </div>
                <div>
                  <label class="text-[10px] text-slate-300/80">هدف قست (تيم)</label>
                  <input type="number" step="0.01" min="0" name="team_goal_guest" value="{{ $teamGoals['team_goal_guest'] ?? '' }}"
                    class="w-full mt-1 rounded-2xl 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">
                </div>
                <div>
                  <label class="text-[10px] text-slate-300/80">هدف مجموع (تيم)</label>
                  <input type="number" step="0.01" min="0" name="team_goal_total" value="{{ $teamGoals['team_goal_total'] ?? '' }}"
                    class="w-full mt-1 rounded-2xl 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">
                </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 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 text-[11px]"></i>
                تحديث النتائج
              </button>
            </form>

          </div>
        </div>

      </div>
    </div>

    {{-- STATS --}}
    <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">{{ number_format($totals['members'] ?? 0) }}</div>
        <div class="text-[11px] text-white/50 mt-1">ترتيب حسب: <b class="text-white/80">{{ $sortNow }}</b> • <b class="text-white/70">{{ $dirNow }}</b></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">{{ $totals['live_hours'] ?? 0 }}س</div>
        <div class="text-[11px] text-white/55 mt-1">
          مؤكد: {{ $liveKpis['confirmed'] ?? 0 }} • إجمالي: {{ $liveKpis['total'] ?? 0 }} • معلّق: {{ $liveKpis['pending'] ?? 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">{{ $totals['guest_hours'] ?? 0 }}س</div>
        <div class="text-[11px] text-white/55 mt-1">سجلات: {{ $guestKpis['records'] ?? 0 }} • ساعات: {{ $guestKpis['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">{{ $totals['total_hours'] ?? 0 }}س</div>

        <div class="mt-2 flex flex-wrap gap-2">
          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-[11px] {{ $badgeHit($teamGoals['hit_live'] ?? null) }}">
            لايف تيم: {{ $teamGoals['team_goal_live'] ?? 0 }}س
          </span>
          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-[11px] {{ $badgeHit($teamGoals['hit_guest'] ?? null) }}">
            قست تيم: {{ $teamGoals['team_goal_guest'] ?? 0 }}س
          </span>
          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-[11px] {{ $badgeHit($teamGoals['hit_total'] ?? null) }}">
            مجموع تيم: {{ $teamGoals['team_goal_total'] ?? 0 }}س
          </span>
        </div>
      </div>
    </div>

    {{-- TABLE --}}
    <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="flex flex-wrap items-center gap-2 text-[11px]">
          <a href="{{ $sortUrl('total') }}" class="px-3 py-1.5 rounded-2xl border border-white/15 {{ $sortNow==='total' ? 'bg-white/15 text-white' : 'bg-white/5 text-white/70 hover:bg-white/10' }} transition">
            مجموع
          </a>
          <a href="{{ $sortUrl('live') }}" class="px-3 py-1.5 rounded-2xl border border-white/15 {{ $sortNow==='live' ? 'bg-white/15 text-white' : 'bg-white/5 text-white/70 hover:bg-white/10' }} transition">
            لايف
          </a>
          <a href="{{ $sortUrl('guest') }}" class="px-3 py-1.5 rounded-2xl border border-white/15 {{ $sortNow==='guest' ? 'bg-white/15 text-white' : 'bg-white/5 text-white/70 hover:bg-white/10' }} transition">
            قست
          </a>
          <a href="{{ $sortUrl('sahra') }}" class="px-3 py-1.5 rounded-2xl border border-white/15 {{ $sortNow==='sahra' ? 'bg-white/15 text-white' : 'bg-white/5 text-white/70 hover:bg-white/10' }} transition">
            سهرة
          </a>
        </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($showSahra)
                <th class="py-2 text-right">سهرة (س)</th>
              @endif
              <th class="py-2 text-right">مجموع (س)</th>
              <th class="py-2 text-right">عدّاد</th>

              @if($showShare)
                <th class="py-2 text-right">حصة مجموع</th>
              @endif

              @if($cmpEnabled && $showGrowth)
                <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;

                $shareTotal = $r['share_total'] ?? null;

                $deltaTotal = $r['delta_total'] ?? null;
                $pctTotal   = $r['pct_total'] ?? null;

                $hitLive  = $r['hit_live'] ?? null;
                $hitGuest = $r['hit_guest'] ?? null;
                $hitTotal = $r['hit_total'] ?? 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-10 h-10 rounded-2xl overflow-hidden bg-white/10 border border-white/10 grid place-items-center">
                      @if($avatar)
                        <img src="{{ $avatar }}" alt="{{ $name }}" class="w-full h-full object-cover">
                      @else
                        <i class="fa-solid fa-user text-white/40"></i>
                      @endif
                    </div>
                    <div class="min-w-0">
                      <div class="font-extrabold text-white truncate">{{ $name }}</div>
                      <div class="text-[11px] text-white/50 truncate">{{ $r['username'] ?? '' }}</div>
                    </div>
                  </div>
                </td>

                <td class="py-2 font-bold text-emerald-200">{{ number_format((float)($r['live_hours'] ?? 0), 2) }}</td>
                <td class="py-2 font-bold text-amber-200">{{ number_format((float)($r['guest_hours'] ?? 0), 2) }}</td>

                @if($showSahra)
                  <td class="py-2 font-bold text-fuchsia-200">{{ number_format((float)($r['sahra_hours'] ?? 0), 2) }}</td>
                @endif

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

                <td class="py-2 text-white/70">
                  <span class="text-white/60">لايف:</span> {{ (int)($r['live_count'] ?? 0) }}
                  <span class="text-white/40">•</span>
                  <span class="text-white/60">قست:</span> {{ (int)($r['guest_count'] ?? 0) }}
                </td>

                @if($showShare)
                  <td class="py-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">
                      {{ $shareTotal !== null ? number_format((float)$shareTotal, 1).'%' : '—' }}
                    </span>
                  </td>
                @endif

                @if($cmpEnabled && $showGrowth)
                  <td class="py-2 font-extrabold {{ $toneNum((float)($deltaTotal ?? 0)) }}">
                    {{ $deltaTotal !== null ? ( ($deltaTotal>=0?'+':'').number_format((float)$deltaTotal,2) ) : '—' }}
                  </td>
                  <td class="py-2 font-extrabold {{ $toneNum((float)($pctTotal ?? 0)) }}">
                    {{ $pctTotal !== null ? ( ($pctTotal>=0?'+':'').number_format((float)$pctTotal,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-[11px] {{ $badgeHit($hitLive) }}">لايف</span>
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full border text-[11px] {{ $badgeHit($hitGuest) }}">قست</span>
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full border text-[11px] {{ $badgeHit($hitTotal) }}">مجموع</span>
                  </div>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="12" class="py-4 text-white/50">لا يوجد بيانات ضمن الفلاتر الحالية.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

    {{-- WhatsApp Message --}}
    <div class="grid gap-4 lg:grid-cols-3">
      <div class="lg:col-span-2 rounded-3xl border border-white/10 bg-black/25 p-5">
        <div class="flex items-center justify-between gap-3">
          <div>
            <div class="text-[11px] text-white/60">تقرير جاهز للواتساب</div>
            <div class="text-base font-extrabold text-white">WhatsApp Message</div>
          </div>
          <button id="mh_copyBtn"
            class="px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-900 bg-gradient-to-r from-emerald-200 via-sky-200 to-cyan-200 shadow-lg shadow-emerald-500/15 hover:scale-[1.01] active:scale-100 transition">
            <i class="fa-solid fa-copy ms-2"></i> نسخ
          </button>
        </div>

        <textarea id="mh_wa"
          class="mt-4 w-full min-h-[180px] rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-sky-500/25"
          spellcheck="false"></textarea>

        <div id="mh_copyToast" class="hidden mt-3 rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
          تم النسخ ✅
        </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-base font-extrabold text-white">Quick KPIs</div>

        <div class="mt-4 space-y-2 text-[12px] text-white/80">
          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 flex items-center justify-between">
            <span class="text-white/60">ساعات سهرة</span>
            <b class="text-fuchsia-200">{{ number_format((float)($totals['sahra_hours'] ?? 0), 2) }}س</b>
          </div>

          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 flex items-center justify-between">
            <span class="text-white/60">عدّاد لايف</span>
            <b class="text-emerald-200">{{ (int)($totals['lives_count'] ?? 0) }}</b>
          </div>

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

  </div>
</div>

<script>
(() => {
  // ✅ Safe JS (No collisions) — IDs prefixed with mh_
  const btn = document.getElementById('mh_copyBtn');
  const ta  = document.getElementById('mh_wa');
  const toast = document.getElementById('mh_copyToast');

  btn?.addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText(ta?.value || '');
      toast?.classList.remove('hidden');
      setTimeout(() => toast?.classList.add('hidden'), 1200);
    } catch (e) {
      // fallback
      if (ta) { ta.select(); document.execCommand('copy'); }
      toast?.classList.remove('hidden');
      setTimeout(() => toast?.classList.add('hidden'), 1200);
    }
  });
})();
</script>
@endsection