{{-- resources/views/superadmin/absences-members/index.blade.php --}}
@extends('layouts.superadmin')
@section('title','مركز الغياب — غيابات الأعضاء')

@section('content')
<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-amber-400/25 shadow-2xl shadow-amber-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-amber-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-center 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-amber-300/20 text-[11px] text-amber-100">
            <i class="fa-solid fa-user-clock text-xs"></i>
            <span>Members Absences Center • SuperAdmin</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            غيابات <span class="text-amber-300">الأعضاء</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 bg-white/5 border border-white/10 text-[11px] text-white/80">
              <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
              بدون عذر: {{ number_format($stats['no_excuse_total'] ?? 0) }}
            </span>
            <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">
              <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
              مع عذر: {{ number_format($stats['with_excuse_total'] ?? 0) }}
            </span>
            <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">
              <span class="w-1.5 h-1.5 rounded-full bg-amber-300"></span>
              طلبات معلّقة: {{ number_format($stats['requests_pending'] ?? 0) }}
            </span>
          </div>
        </div>

        {{-- FILTER --}}
        <div class="w-full lg:w-auto">
          <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 space-y-2 text-xs text-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 rounded-xl bg-amber-500/20 text-amber-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-extrabold text-sm truncate">تحليل الغياب</div>
              </div>
            </div>

            <form method="get" class="grid grid-cols-2 gap-2 pt-2">
              <div class="col-span-2 grid grid-cols-2 gap-2">
                <div>
                  <label class="text-[10px] text-slate-300/80">النمط</label>
                  <select name="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-amber-500/40">
                    @foreach(['day'=>'يومي','week'=>'أسبوعي','month'=>'شهري','all'=>'كلي','custom'=>'مخصص'] as $k=>$v)
                      <option value="{{ $k }}" @selected(($mode ?? 'week')===$k)>{{ $v }}</option>
                    @endforeach
                  </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/40">
                    @foreach(['cards'=>'كروت','table'=>'جداول','charts'=>'ترسيم'] as $k=>$v)
                      <option value="{{ $k }}" @selected(($viewMode ?? 'cards')===$k)>{{ $v }}</option>
                    @endforeach
                  </select>
                </div>
              </div>

              <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-amber-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>

              <label class="col-span-2 inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-white/5 border border-white/10">
                <input type="checkbox" name="compare" value="1" class="rounded" @checked((int)($compare??0)===1)>
                <span class="text-[11px] text-slate-200/90">تفعيل مقارنة مع الفترة السابقة</span>
              </label>

              <button class="col-span-2 inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-black text-slate-900
                bg-gradient-to-r from-amber-200 via-amber-100 to-cyan-200 shadow-lg shadow-amber-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>

    <div class="h-px bg-gradient-to-r from-transparent via-amber-400/20 to-transparent"></div>

    {{-- APP --}}
    <div x-data="AbsencesMembersCenter()" x-init="init()" class="space-y-4">

      {{-- Main Tabs --}}
      <div class="sticky top-0 z-30 -mx-2 px-2 pt-2">
        <div class="rounded-3xl border border-white/10 bg-black/35 backdrop-blur-xl shadow-2xl">
          <div class="p-2 sm:p-3 flex flex-wrap gap-2">
            <button @click="setTab('no')" :class="tabBtn('no')" class="px-4 py-2 rounded-2xl text-[12px] font-extrabold">
              <i class="fa-solid fa-triangle-exclamation ms-2"></i> بدون عذر
              <span class="ms-2 inline-flex items-center justify-center min-w-[22px] h-5 px-2 rounded-full text-[11px] border bg-rose-500/15 border-rose-400/25 text-rose-200">
                {{ (int)($stats['no_excuse_total'] ?? 0) }}
              </span>
            </button>

            <button @click="setTab('yes')" :class="tabBtn('yes')" class="px-4 py-2 rounded-2xl text-[12px] font-extrabold">
              <i class="fa-solid fa-circle-check ms-2"></i> مع عذر
              <span class="ms-2 inline-flex items-center justify-center min-w-[22px] h-5 px-2 rounded-full text-[11px] border bg-emerald-500/15 border-emerald-400/25 text-emerald-200">
                {{ (int)($stats['with_excuse_total'] ?? 0) }}
              </span>
            </button>

            <button @click="setTab('req')" :class="tabBtn('req')" class="px-4 py-2 rounded-2xl text-[12px] font-extrabold">
              <i class="fa-solid fa-file-signature ms-2"></i> طلبات الغياب
              <span class="ms-2 inline-flex items-center justify-center min-w-[22px] h-5 px-2 rounded-full text-[11px] border bg-amber-500/15 border-amber-400/25 text-amber-200">
                {{ (int)($stats['requests_pending'] ?? 0) }}
              </span>
            </button>

            <button @click="setTab('charts')" :class="tabBtn('charts')" class="px-4 py-2 rounded-2xl text-[12px] font-extrabold">
              <i class="fa-solid fa-chart-line ms-2"></i> إحصائيات
            </button>

            <button @click="setTab('reads')" :class="tabBtn('reads')" class="px-4 py-2 rounded-2xl text-[12px] font-extrabold">
              <i class="fa-solid fa-eye ms-2"></i> قراءات الإدارة
            </button>
          </div>
        </div>
      </div>

      {{-- ===================== بدون عذر ===================== --}}
      <div x-show="tab==='no'" x-cloak class="space-y-4">

        {{-- Sub Tabs: No --}}
        <div class="sticky top-[72px] z-20 -mx-2 px-2">
          <div class="rounded-3xl border border-white/10 bg-black/35 backdrop-blur-xl shadow-xl p-2 flex flex-wrap gap-2">
            <button type="button" @click="scrollTo('no_live')" :class="subBtn('no_live')" class="px-4 py-2 rounded-2xl text-[12px] font-extrabold">
              <i class="fa-solid fa-video ms-2"></i> لايفات
              <span class="ms-2 inline-flex items-center justify-center min-w-[22px] h-5 px-2 rounded-full text-[11px] border bg-rose-500/15 border-rose-400/25 text-rose-200">
                {{ (int)($stats['no_live'] ?? 0) }}
              </span>
            </button>

            <button type="button" @click="scrollTo('no_eval')" :class="subBtn('no_eval')" class="px-4 py-2 rounded-2xl text-[12px] font-extrabold">
              <i class="fa-solid fa-clipboard-check ms-2"></i> تقييمات الإدارة
              <span class="ms-2 inline-flex items-center justify-center min-w-[22px] h-5 px-2 rounded-full text-[11px] border bg-rose-500/15 border-rose-400/25 text-rose-200">
                {{ (int)($stats['no_eval'] ?? 0) }}
              </span>
            </button>

            <button type="button" @click="scrollTo('no_meet')" :class="subBtn('no_meet')" class="px-4 py-2 rounded-2xl text-[12px] font-extrabold">
              <i class="fa-solid fa-people-group ms-2"></i> آخر
              <span class="ms-2 inline-flex items-center justify-center min-w-[22px] h-5 px-2 rounded-full text-[11px] border bg-rose-500/15 border-rose-400/25 text-rose-200">
                {{ (int)($stats['no_meet'] ?? 0) }}
              </span>
            </button>
          </div>
        </div>

        @php
          $noLive = ($noExcuseGrouped['live'] ?? collect());
          $noEval = ($noExcuseGrouped['evaluation'] ?? collect());
          $noMeet = ($noExcuseGrouped['meeting'] ?? collect());
        @endphp

        {{-- Lives --}}
        <section id="no_live" class="scroll-mt-[190px]">
          <div class="rounded-3xl border border-white/10 bg-slate-950/55 shadow-2xl overflow-hidden">
            <div class="p-4 sm:p-5 flex items-center justify-between">
              <div class="flex items-center gap-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-video"></i>
                </div>
                <div>
                  <div class="text-[11px] text-slate-300/80">بدون عذر</div>
                  <div class="text-base font-extrabold text-white">لايفات</div>
                </div>
              </div>
              <div class="text-[11px] text-slate-200/70">الفترة: {{ $from }} → {{ $to }}</div>
            </div>

            <div class="h-px bg-white/10"></div>

            <div class="p-3 sm:p-4">
              @if($noLive->isEmpty())
                <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/70">
                  لا يوجد لايفات بدون عذر ضمن الفترة.
                </div>
              @else
                @if(($viewMode ?? 'cards') === 'table')
                  <div class="overflow-x-auto">
                    <table class="w-full text-[12px]">
                      <thead>
                        <tr class="text-slate-200/80">
                          <th class="p-3 text-start">العضو</th>
                          <th class="p-3 text-start">اليوم</th>
                          <th class="p-3 text-start">الوقت</th>
                          <th class="p-3 text-start">الحالة</th>
                        </tr>
                      </thead>
                      <tbody class="divide-y divide-white/10">
                        @foreach($noLive as $row)
                          <tr class="hover:bg-white/5 cursor-pointer" @click="openDetails(@js($row))">
                            <td class="p-3 font-extrabold text-white">{{ $row->user_name }}</td>
                            <td class="p-3 text-slate-200/80">{{ $row->day }}</td>
                            <td class="p-3 text-slate-200/80">{{ $row->time ?? '—' }}</td>
                            <td class="p-3 text-rose-200 font-black">{{ $row->status }}</td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                @else
                  <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($noLive as $row)
                      <button type="button" @click="openDetails(@js($row))"
                              class="text-start rounded-3xl border border-white/10 bg-black/25 hover:bg-white/5 transition p-4">
                        <div class="flex items-center gap-3">
                          <div class="h-10 w-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 grid place-items-center text-rose-200">
                            <i class="fa-solid fa-user-slash text-[12px]"></i>
                          </div>
                          <div class="min-w-0">
                            <div class="text-[12px] font-extrabold text-white truncate">{{ $row->user_name }}</div>
                            <div class="text-[10px] text-slate-300/80 truncate">{{ $row->day }} {{ $row->time ? ('• '.$row->time) : '' }}</div>
                          </div>
                        </div>

                        <div class="mt-3 text-[11px] text-slate-200/75">
                          حالة: <span class="font-extrabold text-rose-200">{{ $row->status }}</span>
                        </div>

                        <div class="mt-2 text-[10px] text-slate-300/60">اضغط لعرض التفاصيل</div>
                      </button>
                    @endforeach
                  </div>
                @endif
              @endif
            </div>
          </div>
        </section>

        {{-- Evaluations --}}
        <section id="no_eval" class="scroll-mt-[190px]">
          <div class="rounded-3xl border border-white/10 bg-slate-950/55 shadow-2xl overflow-hidden">
            <div class="p-4 sm:p-5 flex items-center justify-between">
              <div class="flex items-center gap-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-clipboard-check"></i>
                </div>
                <div>
                  <div class="text-[11px] text-slate-300/80">بدون عذر</div>
                  <div class="text-base font-extrabold text-white">تقييمات الإدارة</div>
                </div>
              </div>
              <div class="text-[11px] text-slate-200/70">الفترة: {{ $from }} → {{ $to }}</div>
            </div>

            <div class="h-px bg-white/10"></div>

            <div class="p-3 sm:p-4">
              @if($noEval->isEmpty())
                <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/70">
                  لا يوجد تقييمات بدون عذر ضمن الفترة.
                </div>
              @else
                @if(($viewMode ?? 'cards') === 'table')
                  <div class="overflow-x-auto">
                    <table class="w-full text-[12px]">
                      <thead>
                        <tr class="text-slate-200/80">
                          <th class="p-3 text-start">العضو</th>
                          <th class="p-3 text-start">اليوم</th>
                          <th class="p-3 text-start">الحالة</th>
                          <th class="p-3 text-start">Reviewed By</th>
                        </tr>
                      </thead>
                      <tbody class="divide-y divide-white/10">
                        @foreach($noEval as $row)
                          <tr class="hover:bg-white/5 cursor-pointer" @click="openDetails(@js($row))">
                            <td class="p-3 font-extrabold text-white">{{ $row->user_name }}</td>
                            <td class="p-3 text-slate-200/80">{{ $row->day }}</td>
                            <td class="p-3 text-rose-200 font-black">{{ $row->status }}</td>
                            <td class="p-3 text-slate-200/80">{{ $row->reviewed_by ?? '—' }}</td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                @else
                  <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($noEval as $row)
                      <button type="button" @click="openDetails(@js($row))"
                              class="text-start rounded-3xl border border-white/10 bg-black/25 hover:bg-white/5 transition p-4">
                        <div class="flex items-center gap-3">
                          <div class="h-10 w-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 grid place-items-center text-rose-200">
                            <i class="fa-solid fa-clipboard-check text-[12px]"></i>
                          </div>
                          <div class="min-w-0">
                            <div class="text-[12px] font-extrabold text-white truncate">{{ $row->user_name }}</div>
                            <div class="text-[10px] text-slate-300/80 truncate">{{ $row->day }} • evaluation</div>
                          </div>
                        </div>

                        <div class="mt-3 text-[11px] text-slate-200/75">
                          حالة: <span class="font-extrabold text-rose-200">{{ $row->status }}</span>
                        </div>

                        <div class="mt-2 text-[10px] text-slate-300/60">اضغط لعرض التفاصيل</div>
                      </button>
                    @endforeach
                  </div>
                @endif
              @endif
            </div>
          </div>
        </section>

        {{-- Meetings --}}
        <section id="no_meet" class="scroll-mt-[190px]">
          <div class="rounded-3xl border border-white/10 bg-slate-950/55 shadow-2xl overflow-hidden">
            <div class="p-4 sm:p-5 flex items-center justify-between">
              <div class="flex items-center gap-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-group"></i>
                </div>
                <div>
                  <div class="text-[11px] text-slate-300/80">بدون عذر</div>
                  <div class="text-base font-extrabold text-white">آخر</div>
                </div>
              </div>
              <div class="text-[11px] text-slate-200/70">الفترة: {{ $from }} → {{ $to }}</div>
            </div>

            <div class="h-px bg-white/10"></div>

            <div class="p-3 sm:p-4">
              @if($noMeet->isEmpty())
                <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/70">
                  لا يوجد اجتماعات بدون عذر ضمن الفترة.
                </div>
              @else
                @if(($viewMode ?? 'cards') === 'table')
                  <div class="overflow-x-auto">
                    <table class="w-full text-[12px]">
                      <thead>
                        <tr class="text-slate-200/80">
                          <th class="p-3 text-start">العضو</th>
                          <th class="p-3 text-start">اليوم</th>
                          <th class="p-3 text-start">الوقت</th>
                          <th class="p-3 text-start">الحالة</th>
                        </tr>
                      </thead>
                      <tbody class="divide-y divide-white/10">
                        @foreach($noMeet as $row)
                          <tr class="hover:bg-white/5 cursor-pointer" @click="openDetails(@js($row))">
                            <td class="p-3 font-extrabold text-white">{{ $row->user_name }}</td>
                            <td class="p-3 text-slate-200/80">{{ $row->day }}</td>
                            <td class="p-3 text-slate-200/80">{{ $row->time ?? '—' }}</td>
                            <td class="p-3 text-rose-200 font-black">{{ $row->status }}</td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                @else
                  <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($noMeet as $row)
                      <button type="button" @click="openDetails(@js($row))"
                              class="text-start rounded-3xl border border-white/10 bg-black/25 hover:bg-white/5 transition p-4">
                        <div class="flex items-center gap-3">
                          <div class="h-10 w-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-group text-[12px]"></i>
                          </div>
                          <div class="min-w-0">
                            <div class="text-[12px] font-extrabold text-white truncate">{{ $row->user_name }}</div>
                            <div class="text-[10px] text-slate-300/80 truncate">{{ $row->day }} {{ $row->time ? ('• '.$row->time) : '' }} • meeting</div>
                          </div>
                        </div>

                        <div class="mt-3 text-[11px] text-slate-200/75">
                          حالة: <span class="font-extrabold text-rose-200">{{ $row->status }}</span>
                        </div>

                        <div class="mt-2 text-[10px] text-slate-300/60">اضغط لعرض التفاصيل</div>
                      </button>
                    @endforeach
                  </div>
                @endif
              @endif
            </div>
          </div>
        </section>
      </div>

      {{-- ===================== مع عذر ===================== --}}
      <div x-show="tab==='yes'" x-cloak class="space-y-4">

        {{-- Sub Tabs: Yes --}}
        <div class="sticky top-[72px] z-20 -mx-2 px-2">
          <div class="rounded-3xl border border-white/10 bg-black/35 backdrop-blur-xl shadow-xl p-2 flex flex-wrap gap-2">
            <button type="button" @click="scrollTo('yes_live')" :class="subBtn('yes_live')" class="px-4 py-2 rounded-2xl text-[12px] font-extrabold">
              <i class="fa-solid fa-video ms-2"></i> لايفات
              <span class="ms-2 inline-flex items-center justify-center min-w-[22px] h-5 px-2 rounded-full text-[11px] border bg-emerald-500/15 border-emerald-400/25 text-emerald-200">
                {{ (int)($stats['yes_live'] ?? 0) }}
              </span>
            </button>

            <button type="button" @click="scrollTo('yes_eval')" :class="subBtn('yes_eval')" class="px-4 py-2 rounded-2xl text-[12px] font-extrabold">
              <i class="fa-solid fa-clipboard-check ms-2"></i> تقييمات الإدارة
              <span class="ms-2 inline-flex items-center justify-center min-w-[22px] h-5 px-2 rounded-full text-[11px] border bg-emerald-500/15 border-emerald-400/25 text-emerald-200">
                {{ (int)($stats['yes_eval'] ?? 0) }}
              </span>
            </button>

            <button type="button" @click="scrollTo('yes_meet')" :class="subBtn('yes_meet')" class="px-4 py-2 rounded-2xl text-[12px] font-extrabold">
              <i class="fa-solid fa-people-group ms-2"></i> آخر
              <span class="ms-2 inline-flex items-center justify-center min-w-[22px] h-5 px-2 rounded-full text-[11px] border bg-emerald-500/15 border-emerald-400/25 text-emerald-200">
                {{ (int)($stats['yes_meet'] ?? 0) }}
              </span>
            </button>
          </div>
        </div>

        @php
          $yesLive = ($withExcuseGrouped['live'] ?? collect());
          $yesEval = ($withExcuseGrouped['evaluation'] ?? collect());
          $yesMeet = ($withExcuseGrouped['meeting'] ?? collect());
        @endphp

        {{-- Lives --}}
        <section id="yes_live" class="scroll-mt-[190px]">
          <div class="rounded-3xl border border-white/10 bg-slate-950/55 shadow-2xl overflow-hidden">
            <div class="p-4 sm:p-5 flex items-center justify-between">
              <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                  <i class="fa-solid fa-video"></i>
                </div>
                <div>
                  <div class="text-[11px] text-slate-300/80">مع عذر</div>
                  <div class="text-base font-extrabold text-white">لايفات</div>
                </div>
              </div>
              <div class="text-[11px] text-slate-200/70">الفترة: {{ $from }} → {{ $to }}</div>
            </div>

            <div class="h-px bg-white/10"></div>

            <div class="p-3 sm:p-4">
              @if($yesLive->isEmpty())
                <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/70">
                  لا يوجد لايفات مع عذر ضمن الفترة.
                </div>
              @else
                @if(($viewMode ?? 'cards') === 'table')
                  <div class="overflow-x-auto">
                    <table class="w-full text-[12px]">
                      <thead>
                        <tr class="text-slate-200/80">
                          <th class="p-3 text-start">العضو</th>
                          <th class="p-3 text-start">اليوم</th>
                          <th class="p-3 text-start">الوقت</th>
                          <th class="p-3 text-start">الحالة</th>
                        </tr>
                      </thead>
                      <tbody class="divide-y divide-white/10">
                        @foreach($yesLive as $row)
                          <tr class="hover:bg-white/5 cursor-pointer" @click="openDetails(@js($row))">
                            <td class="p-3 font-extrabold text-white">{{ $row->user_name }}</td>
                            <td class="p-3 text-slate-200/80">{{ $row->day }}</td>
                            <td class="p-3 text-slate-200/80">{{ $row->time ?? '—' }}</td>
                            <td class="p-3 text-emerald-200 font-black">{{ $row->status }}</td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                @else
                  <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($yesLive as $row)
                      <button type="button" @click="openDetails(@js($row))"
                              class="text-start rounded-3xl border border-white/10 bg-black/25 hover:bg-white/5 transition p-4">
                        <div class="flex items-center gap-3">
                          <div class="h-10 w-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                            <i class="fa-solid fa-file-circle-check text-[12px]"></i>
                          </div>
                          <div class="min-w-0">
                            <div class="text-[12px] font-extrabold text-white truncate">{{ $row->user_name }}</div>
                            <div class="text-[10px] text-slate-300/80 truncate">{{ $row->day }} {{ $row->time ? ('• '.$row->time) : '' }}</div>
                          </div>
                        </div>

                        <div class="mt-3 text-[11px] text-slate-200/75">
                          حالة: <span class="font-extrabold text-emerald-200">{{ $row->status }}</span>
                        </div>

                        <div class="mt-2 text-[11px] text-slate-200/75 line-clamp-2">
                          العذر: <span class="text-slate-100/90">{{ $row->excuse ?: '—' }}</span>
                        </div>

                        <div class="mt-2 text-[10px] text-slate-300/60">اضغط لعرض التفاصيل</div>
                      </button>
                    @endforeach
                  </div>
                @endif
              @endif
            </div>
          </div>
        </section>

        {{-- Evaluations --}}
        <section id="yes_eval" class="scroll-mt-[190px]">
          <div class="rounded-3xl border border-white/10 bg-slate-950/55 shadow-2xl overflow-hidden">
            <div class="p-4 sm:p-5 flex items-center justify-between">
              <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                  <i class="fa-solid fa-clipboard-check"></i>
                </div>
                <div>
                  <div class="text-[11px] text-slate-300/80">مع عذر</div>
                  <div class="text-base font-extrabold text-white">تقييمات الإدارة</div>
                </div>
              </div>
              <div class="text-[11px] text-slate-200/70">الفترة: {{ $from }} → {{ $to }}</div>
            </div>

            <div class="h-px bg-white/10"></div>

            <div class="p-3 sm:p-4">
              @if($yesEval->isEmpty())
                <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/70">
                  لا يوجد تقييمات مع عذر ضمن الفترة.
                </div>
              @else
                @if(($viewMode ?? 'cards') === 'table')
                  <div class="overflow-x-auto">
                    <table class="w-full text-[12px]">
                      <thead>
                        <tr class="text-slate-200/80">
                          <th class="p-3 text-start">العضو</th>
                          <th class="p-3 text-start">اليوم</th>
                          <th class="p-3 text-start">الحالة</th>
                        </tr>
                      </thead>
                      <tbody class="divide-y divide-white/10">
                        @foreach($yesEval as $row)
                          <tr class="hover:bg-white/5 cursor-pointer" @click="openDetails(@js($row))">
                            <td class="p-3 font-extrabold text-white">{{ $row->user_name }}</td>
                            <td class="p-3 text-slate-200/80">{{ $row->day }}</td>
                            <td class="p-3 text-emerald-200 font-black">{{ $row->status }}</td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                @else
                  <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($yesEval as $row)
                      <button type="button" @click="openDetails(@js($row))"
                              class="text-start rounded-3xl border border-white/10 bg-black/25 hover:bg-white/5 transition p-4">
                        <div class="flex items-center gap-3">
                          <div class="h-10 w-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                            <i class="fa-solid fa-file-circle-check text-[12px]"></i>
                          </div>
                          <div class="min-w-0">
                            <div class="text-[12px] font-extrabold text-white truncate">{{ $row->user_name }}</div>
                            <div class="text-[10px] text-slate-300/80 truncate">{{ $row->day }} • evaluation</div>
                          </div>
                        </div>

                        <div class="mt-3 text-[11px] text-slate-200/75">
                          حالة: <span class="font-extrabold text-emerald-200">{{ $row->status }}</span>
                        </div>

                        <div class="mt-2 text-[11px] text-slate-200/75 line-clamp-2">
                          العذر: <span class="text-slate-100/90">{{ $row->excuse ?: '—' }}</span>
                        </div>

                        <div class="mt-2 text-[10px] text-slate-300/60">اضغط لعرض التفاصيل</div>
                      </button>
                    @endforeach
                  </div>
                @endif
              @endif
            </div>
          </div>
        </section>

        {{-- Meetings --}}
        <section id="yes_meet" class="scroll-mt-[190px]">
          <div class="rounded-3xl border border-white/10 bg-slate-950/55 shadow-2xl overflow-hidden">
            <div class="p-4 sm:p-5 flex items-center justify-between">
              <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                  <i class="fa-solid fa-people-group"></i>
                </div>
                <div>
                  <div class="text-[11px] text-slate-300/80">مع عذر</div>
                  <div class="text-base font-extrabold text-white">آخر</div>
                </div>
              </div>
              <div class="text-[11px] text-slate-200/70">الفترة: {{ $from }} → {{ $to }}</div>
            </div>

            <div class="h-px bg-white/10"></div>

            <div class="p-3 sm:p-4">
              @if($yesMeet->isEmpty())
                <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/70">
                  لا يوجد اجتماعات مع عذر ضمن الفترة.
                </div>
              @else
                @if(($viewMode ?? 'cards') === 'table')
                  <div class="overflow-x-auto">
                    <table class="w-full text-[12px]">
                      <thead>
                        <tr class="text-slate-200/80">
                          <th class="p-3 text-start">العضو</th>
                          <th class="p-3 text-start">اليوم</th>
                          <th class="p-3 text-start">الوقت</th>
                          <th class="p-3 text-start">الحالة</th>
                        </tr>
                      </thead>
                      <tbody class="divide-y divide-white/10">
                        @foreach($yesMeet as $row)
                          <tr class="hover:bg-white/5 cursor-pointer" @click="openDetails(@js($row))">
                            <td class="p-3 font-extrabold text-white">{{ $row->user_name }}</td>
                            <td class="p-3 text-slate-200/80">{{ $row->day }}</td>
                            <td class="p-3 text-slate-200/80">{{ $row->time ?? '—' }}</td>
                            <td class="p-3 text-emerald-200 font-black">{{ $row->status }}</td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                @else
                  <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($yesMeet as $row)
                      <button type="button" @click="openDetails(@js($row))"
                              class="text-start rounded-3xl border border-white/10 bg-black/25 hover:bg-white/5 transition p-4">
                        <div class="flex items-center gap-3">
                          <div class="h-10 w-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                            <i class="fa-solid fa-file-circle-check text-[12px]"></i>
                          </div>
                          <div class="min-w-0">
                            <div class="text-[12px] font-extrabold text-white truncate">{{ $row->user_name }}</div>
                            <div class="text-[10px] text-slate-300/80 truncate">{{ $row->day }} {{ $row->time ? ('• '.$row->time) : '' }} • meeting</div>
                          </div>
                        </div>

                        <div class="mt-3 text-[11px] text-slate-200/75">
                          حالة: <span class="font-extrabold text-emerald-200">{{ $row->status }}</span>
                        </div>

                        <div class="mt-2 text-[11px] text-slate-200/75 line-clamp-2">
                          العذر: <span class="text-slate-100/90">{{ $row->excuse ?: '—' }}</span>
                        </div>

                        <div class="mt-2 text-[10px] text-slate-300/60">اضغط لعرض التفاصيل</div>
                      </button>
                    @endforeach
                  </div>
                @endif
              @endif
            </div>
          </div>
        </section>
      </div>

      {{-- ===================== طلبات الغياب ===================== --}}
      <div x-show="tab==='req'" x-cloak class="rounded-3xl border border-white/10 bg-slate-950/55 shadow-2xl overflow-hidden">
        <div class="p-4 sm:p-5 flex items-center justify-between">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-2xl bg-amber-500/15 border border-amber-400/25 grid place-items-center text-amber-200">
              <i class="fa-solid fa-file-signature"></i>
            </div>
            <div>
              <div class="text-[11px] text-slate-300/80">الغياب</div>
              <div class="text-base font-extrabold text-white">طلبات الغياب</div>
            </div>
          </div>
        </div>

        <div class="h-px bg-white/10"></div>

        <div class="p-3 sm:p-4 space-y-3">
          @if(($requests ?? collect())->isEmpty())
            <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/70">
              لا يوجد طلبات ضمن الفترة.
            </div>
          @else
            @foreach($requests as $req)
              <button type="button" @click="openRequest(@js($req))"
                      class="w-full text-start rounded-3xl border border-white/10 bg-black/25 hover:bg-white/5 transition p-4">
                <div class="flex items-center justify-between gap-3">
                  <div class="min-w-0">
                    <div class="text-[12px] font-extrabold text-white truncate">{{ $req->user_name }}</div>
                    <div class="text-[10px] text-slate-300/80 truncate">{{ $req->from_date }} → {{ $req->to_date }}</div>
                  </div>
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black border
                    {{ $req->status==='approved' ? 'bg-emerald-500/15 border-emerald-400/25 text-emerald-200' : ($req->status==='rejected' ? 'bg-rose-500/15 border-rose-400/25 text-rose-200' : 'bg-amber-500/15 border-amber-400/25 text-amber-200') }}">
                    {{ $req->status }}
                  </span>
                </div>
                <div class="mt-3 text-[11px] text-slate-200/75 line-clamp-2">
                  العذر: <span class="text-slate-100/90">{{ $req->excuse_reason }}</span>
                </div>
              </button>
            @endforeach
          @endif
        </div>
      </div>

      {{-- ===================== إحصائيات ===================== --}}
      <div x-show="tab==='charts'" x-cloak class="grid gap-4 lg:grid-cols-3">
        <div class="lg:col-span-2 rounded-3xl border border-white/10 bg-slate-950/55 shadow-2xl p-5 space-y-4">
          <div class="flex items-center justify-between gap-3">
            <div class="flex items-center gap-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-chart-line"></i>
              </div>
              <div>
                <div class="text-[11px] text-slate-300/80">ترسيم</div>
                <div class="text-base font-extrabold text-white">إحصائيات الغياب</div>
              </div>
            </div>

            <div class="flex items-center gap-2">
              <select x-model="chartKind" @change="renderCharts()"
                      class="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">
                <option value="line">Line</option>
                <option value="bar">Bar</option>
                <option value="donut">Donut (نِسب)</option>
              </select>

              <button @click="renderCharts(true)"
                      class="inline-flex items-center justify-center px-3 py-2 rounded-xl text-xs font-black text-slate-900
                             bg-gradient-to-r from-amber-200 via-amber-100 to-cyan-200 shadow-lg shadow-amber-500/20">
                <i class="fa-solid fa-rotate ms-2 text-[11px]"></i> تحديث
              </button>
            </div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-black/25 p-4">
            <canvas id="absChart" height="120"></canvas>
          </div>

          <div class="grid sm:grid-cols-3 gap-2">
            <div class="rounded-2xl border border-white/10 bg-black/25 p-4">
              <div class="text-[10px] text-slate-300/80">بدون عذر</div>
              <div class="text-xl font-extrabold text-rose-200">{{ number_format($charts['current']['sum_no'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-black/25 p-4">
              <div class="text-[10px] text-slate-300/80">مع عذر</div>
              <div class="text-xl font-extrabold text-emerald-200">{{ number_format($charts['current']['sum_yes'] ?? 0) }}</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-black/25 p-4">
              <div class="text-[10px] text-slate-300/80">النِّسب</div>
              <div class="text-[11px] text-rose-200 font-black">أحمر: {{ $charts['ratios']['no_excuse_pct'] ?? '—' }}%</div>
              <div class="text-[11px] text-emerald-200 font-black">أخضر: {{ $charts['ratios']['with_excuse_pct'] ?? '—' }}%</div>
            </div>
          </div>
        </div>

        <div class="rounded-3xl border border-white/10 bg-slate-950/55 shadow-2xl p-5 space-y-3">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-2xl bg-amber-500/15 border border-amber-400/25 grid place-items-center text-amber-200">
              <i class="fa-solid fa-sliders"></i>
            </div>
            <div>
              <div class="text-[11px] text-slate-300/80">الوضع الحالي</div>
              <div class="text-base font-extrabold text-white">Mode / Compare / View</div>
            </div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/85">
            <div>Mode: <span class="font-black text-white">{{ $mode ?? 'week' }}</span></div>
            <div>Compare: <span class="font-black text-white">{{ (int)($compare ?? 0) === 1 ? 'ON' : 'OFF' }}</span></div>
            <div>View: <span class="font-black text-white">{{ $viewMode ?? 'cards' }}</span></div>
          </div>

          <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/85">
            ملاحظة: تغيير يومي/أسبوعي/شهري/كلي يتم من الفلتر بالأعلى (mode).
          </div>
        </div>
      </div>

      {{-- ===================== قراءات الإدارة (مُلخّص مجمّع) ===================== --}}
      <div x-show="tab==='reads'" x-cloak class="rounded-3xl border border-white/10 bg-slate-950/55 shadow-2xl overflow-hidden">
        <div class="p-4 sm:p-5 flex items-center justify-between">
          <div class="flex items-center gap-3">
            <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-eye"></i>
            </div>
            <div>
              <div class="text-[11px] text-slate-300/80">Analytics</div>
              <div class="text-base font-extrabold text-white">قراءات الإدارة للصفحة (ملخص)</div>
            </div>
          </div>
          <div class="text-[11px] text-slate-200/70">
            الاسم — كم مرة — مجموع الوقت (بدون تكرار)
          </div>
        </div>

        <div class="h-px bg-white/10"></div>

        <div class="p-3 sm:p-4">
          @if(($adminReadsAgg ?? collect())->isEmpty())
            <div class="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-[12px] text-slate-200/70">
              لا يوجد بيانات قراءة بعد. تأكد: جدول admin_page_reads + routes + @stack('scripts') بالـ layout.
            </div>
          @else
            <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              @foreach($adminReadsAgg as $a)
                @php
                  $reads = (int)($a->reads_count ?? 0);
                  $totalMs = (int)($a->total_duration_ms ?? 0);
                  $avgMs = (int)($a->avg_duration_ms ?? 0);

                  $totalSec = (int) round($totalMs / 1000);
                  $avgSec   = (int) round($avgMs / 1000);

                  $totalMin = intdiv($totalSec, 60);
                  $totalRem = $totalSec % 60;

                  $avgMin = intdiv($avgSec, 60);
                  $avgRem = $avgSec % 60;

                  $totalPretty = $totalMin > 0 ? ($totalMin.'m '.$totalRem.'s') : ($totalSec.'s');
                  $avgPretty   = $avgMin > 0 ? ($avgMin.'m '.$avgRem.'s') : ($avgSec.'s');
                @endphp

                <div class="rounded-3xl border border-white/10 bg-black/25 p-4 hover:bg-white/5 transition">
                  <div class="flex items-center justify-between gap-3">
                    <div class="min-w-0">
                      <div class="text-[13px] font-extrabold text-white truncate">
                        {{ $a->admin_name }}
                      </div>
                      <div class="text-[10px] text-slate-300/80 truncate">
                        آخر ظهور: {{ $a->last_seen_at ?? '—' }}
                      </div>
                    </div>
                    <div class="h-10 w-10 rounded-2xl bg-violet-500/15 border border-violet-400/25 text-violet-200 grid place-items-center">
                      <i class="fa-solid fa-user-shield"></i>
                    </div>
                  </div>

                  <div class="mt-3 grid grid-cols-3 gap-2">
                    <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                      <div class="text-[10px] text-slate-300/80">كم مرة</div>
                      <div class="text-[13px] font-black text-white">{{ number_format($reads) }}</div>
                    </div>

                    <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                      <div class="text-[10px] text-slate-300/80">مجموع الوقت</div>
                      <div class="text-[13px] font-black text-amber-200">{{ $totalPretty }}</div>
                    </div>

                    <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                      <div class="text-[10px] text-slate-300/80">متوسط</div>
                      <div class="text-[13px] font-black text-slate-100">{{ $avgPretty }}</div>
                    </div>
                  </div>

                  <div class="mt-3 text-[10px] text-slate-300/70">
                    * يتم تسجيل Ping كل 30 ثانية + عند إغلاق/إخفاء الصفحة، والواجهة تعرض “ملخص مجمّع”.
                  </div>
                </div>
              @endforeach
            </div>

            @if(($adminReadsRaw ?? collect())->isNotEmpty())
              <details class="mt-4 rounded-3xl border border-white/10 bg-black/20 p-4">
                <summary class="cursor-pointer text-[12px] font-extrabold text-white/80 select-none">
                  عرض آخر Pings خام (Debug)
                </summary>
                <div class="mt-3 space-y-2">
                  @foreach($adminReadsRaw as $r)
                    <div class="rounded-2xl border border-white/10 bg-black/25 p-3 flex items-center justify-between gap-3">
                      <div class="min-w-0">
                        <div class="text-[12px] font-extrabold text-white truncate">{{ $r->admin_name }}</div>
                        <div class="text-[10px] text-slate-300/80 truncate">{{ $r->created_at }} • {{ $r->ip_address }}</div>
                      </div>
                      <div class="text-[11px] font-black text-slate-100">
                        {{ number_format(round(((int)$r->duration_ms)/1000, 1)) }}s
                      </div>
                    </div>
                  @endforeach
                </div>
              </details>
            @endif
          @endif
        </div>
      </div>

      {{-- DETAILS MODAL --}}
      <div x-show="modalOpen" x-cloak class="fixed inset-0 z-50">
        <div class="absolute inset-0 bg-black/70" @click="close()"></div>
        <div class="absolute left-0 right-0 bottom-0 sm:bottom-auto sm:top-1/2 sm:-translate-y-1/2 mx-auto w-full sm:w-[520px] p-3">
          <div class="rounded-3xl border border-white/10 bg-slate-950/90 backdrop-blur-xl shadow-2xl overflow-hidden">
            <div class="p-4 flex items-center justify-between gap-3">
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">تفاصيل الغياب</div>
                <div class="text-base font-extrabold text-white truncate" x-text="selected?.user_name || '—'"></div>
              </div>
              <button @click="close()" class="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 hover:bg-white/10 text-white">
                <i class="fa-solid fa-xmark"></i>
              </button>
            </div>

            <div class="h-px bg-white/10"></div>

            <div class="p-4 space-y-3 text-[12px] text-slate-200/85">
              <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                <div class="text-[10px] text-slate-300/80">المصدر</div>
                <div class="font-extrabold text-white" x-text="selected?.source || '—'"></div>
              </div>

              <div class="grid grid-cols-2 gap-2">
                <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                  <div class="text-[10px] text-slate-300/80">اليوم</div>
                  <div class="font-extrabold text-white" x-text="selected?.day || '—'"></div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                  <div class="text-[10px] text-slate-300/80">الوقت</div>
                  <div class="font-extrabold text-white" x-text="selected?.time || '—'"></div>
                </div>
              </div>

              <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                <div class="text-[10px] text-slate-300/80">الحالة</div>
                <div class="font-extrabold text-white" x-text="selected?.status || '—'"></div>
              </div>

              <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                <div class="text-[10px] text-slate-300/80">Reviewed By</div>
                <div class="font-extrabold text-white" x-text="selected?.reviewed_by || '—'"></div>
              </div>

              <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                <div class="text-[10px] text-slate-300/80">العذر</div>
                <div class="text-slate-100/90 leading-relaxed whitespace-pre-wrap" x-text="selected?.excuse || '—'"></div>
              </div>
            </div>

            <div class="p-4">
              <button @click="close()"
                      class="w-full inline-flex items-center justify-center px-4 py-3 rounded-2xl text-xs font-black text-slate-900
                             bg-gradient-to-r from-amber-200 via-amber-100 to-cyan-200 shadow-lg shadow-amber-500/20">
                تم
              </button>
            </div>
          </div>
        </div>
      </div>

      {{-- REQUEST MODAL --}}
      <div x-show="reqOpen" x-cloak class="fixed inset-0 z-50">
        <div class="absolute inset-0 bg-black/70" @click="closeReq()"></div>
        <div class="absolute left-0 right-0 bottom-0 sm:bottom-auto sm:top-1/2 sm:-translate-y-1/2 mx-auto w-full sm:w-[560px] p-3">
          <div class="rounded-3xl border border-white/10 bg-slate-950/90 backdrop-blur-xl shadow-2xl overflow-hidden">
            <div class="p-4 flex items-center justify-between gap-3">
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">طلب غياب</div>
                <div class="text-base font-extrabold text-white truncate" x-text="reqItem?.user_name || '—'"></div>
              </div>
              <button @click="closeReq()" class="h-10 w-10 rounded-2xl bg-white/5 border border-white/10 hover:bg-white/10 text-white">
                <i class="fa-solid fa-xmark"></i>
              </button>
            </div>

            <div class="h-px bg-white/10"></div>

            <div class="p-4 space-y-3 text-[12px] text-slate-200/85">
              <div class="grid grid-cols-2 gap-2">
                <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                  <div class="text-[10px] text-slate-300/80">من</div>
                  <div class="font-extrabold text-white" x-text="reqItem?.from_date || '—'"></div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                  <div class="text-[10px] text-slate-300/80">إلى</div>
                  <div class="font-extrabold text-white" x-text="reqItem?.to_date || '—'"></div>
                </div>
              </div>

              <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                <div class="text-[10px] text-slate-300/80">الحالة</div>
                <div class="font-extrabold text-white" x-text="reqItem?.status || '—'"></div>
              </div>

              <div class="rounded-2xl border border-white/10 bg-black/25 p-3">
                <div class="text-[10px] text-slate-300/80">العذر</div>
                <div class="text-slate-100/90 leading-relaxed whitespace-pre-wrap" x-text="reqItem?.excuse_reason || '—'"></div>
              </div>
            </div>

            <div class="p-4">
              <button @click="closeReq()"
                      class="w-full inline-flex items-center justify-center px-4 py-3 rounded-2xl text-xs font-black text-slate-900
                             bg-gradient-to-r from-amber-200 via-amber-100 to-cyan-200 shadow-lg shadow-amber-500/20">
                تم
              </button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<script>
function AbsencesMembersCenter() {
  return {
    tab: @js(($viewMode ?? 'cards') === 'charts' ? 'charts' : 'no'),
    sub: 'no_live',

    modalOpen: false,
    reqOpen: false,
    selected: null,
    reqItem: null,

    // Read Ping (تلقائي)
    readStartedAt: null,
    lastPingAt: null,
    pingTimer: null,
    pingSending: false,

    chartKind: 'line',
    chart: null,

    init() {
      this.readStartedAt = new Date();
      this.lastPingAt = new Date();

      // Ping تلقائي كل 30 ثانية
      this.pingTimer = setInterval(() => this.sendReadPing(false), 30000);

      // Ping عند الخروج/الإخفاء
      const sendFinal = () => this.sendReadPing(true);

      window.addEventListener('beforeunload', sendFinal, { passive: true });
      document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') sendFinal();
      });

      this.setupSectionObserver();

      if (this.tab === 'charts') setTimeout(() => this.renderCharts(true), 80);
      if (this.tab === 'no') setTimeout(() => this.scrollTo(this.sub, true), 50);
    },

    setTab(t) {
      this.tab = t;

      if (t === 'no') this.sub = 'no_live';
      if (t === 'yes') this.sub = 'yes_live';

      this.$nextTick(() => {
        if (t === 'charts') this.renderCharts(true);
        if (t === 'no') this.scrollTo('no_live', true);
        if (t === 'yes') this.scrollTo('yes_live', true);
      });
    },

    tabBtn(key) {
      const base = "inline-flex items-center gap-2 rounded-2xl border transition select-none";
      if (this.tab === key) return base + " bg-white/10 border-white/15 text-white shadow";
      return base + " bg-black/20 border-white/10 text-white/75 hover:text-white hover:bg-white/5";
    },

    subBtn(key) {
      const base = "inline-flex items-center gap-2 rounded-2xl border transition select-none";
      if (this.sub === key) return base + " bg-white/10 border-white/15 text-white shadow";
      return base + " bg-black/20 border-white/10 text-white/75 hover:text-white hover:bg-white/5";
    },

    // ✅ FIXED: scrollIntoView + nextTick (أفضل مع sticky)
    scrollTo(id, silent=false) {
      this.sub = id;

      this.$nextTick(() => {
        const el = document.getElementById(id);
        if (!el) return;

        el.scrollIntoView({
          behavior: silent ? 'auto' : 'smooth',
          block: 'start'
        });
      });
    },

    setupSectionObserver() {
      const ids = ['no_live','no_eval','no_meet','yes_live','yes_eval','yes_meet'];
      const obs = new IntersectionObserver((entries) => {
        const visible = entries
          .filter(e => e.isIntersecting)
          .sort((a,b) => (b.intersectionRatio - a.intersectionRatio))[0];

        if (!visible) return;

        const id = visible.target.id;
        if (this.tab === 'no' && id.startsWith('no_')) this.sub = id;
        if (this.tab === 'yes' && id.startsWith('yes_')) this.sub = id;
      }, { root: null, threshold: [0.15, 0.25, 0.4, 0.6] });

      ids.forEach(id => {
        const el = document.getElementById(id);
        if (el) obs.observe(el);
      });
    },

    openDetails(row) {
      this.selected = row || null;
      this.modalOpen = true;
      document.documentElement.classList.add('overflow-hidden');
    },
    close() {
      this.modalOpen = false;
      this.selected = null;
      document.documentElement.classList.remove('overflow-hidden');
    },

    openRequest(req) {
      this.reqItem = req || null;
      this.reqOpen = true;
      document.documentElement.classList.add('overflow-hidden');
    },
    closeReq() {
      this.reqOpen = false;
      this.reqItem = null;
      document.documentElement.classList.remove('overflow-hidden');
    },

    sendReadPing(isFinal) {
      if (this.pingSending) return;
      this.pingSending = true;

      try {
        const end = new Date();
        const start = this.lastPingAt || this.readStartedAt || end;
        const ms = Math.max(0, end.getTime() - start.getTime());

        if (!isFinal && ms < 2000) {
          this.pingSending = false;
          return;
        }

        const payload = {
          route_name: @js('superadmin.absences.members.index'),
          url: window.location.href,
          started_at: start.toISOString(),
          ended_at: end.toISOString(),
          duration_ms: ms
        };

        this.lastPingAt = end;

        const url = @js(route('superadmin.absences.members.readPing'));

        if (navigator.sendBeacon) {
          const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
          navigator.sendBeacon(url, blob);
          this.pingSending = false;
          return;
        }

        fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': @js(csrf_token()),
            'Accept': 'application/json',
          },
          body: JSON.stringify(payload),
          keepalive: true
        }).finally(() => {
          this.pingSending = false;
        });

      } catch (e) {
        this.pingSending = false;
      }
    },

    async renderCharts(force=false){
      const canvas = document.getElementById('absChart');
      if (!canvas) return;

      try {
        const url = new URL(@js(route('superadmin.absences.members.data')), window.location.origin);
        const qs = new URLSearchParams(window.location.search);
        qs.forEach((v,k) => url.searchParams.set(k, v));

        const res = await fetch(url.toString(), { headers: { 'Accept': 'application/json' }});
        const j = await res.json();
        if (!j || !j.ok) return;

        const curNo = (j.charts?.current?.no_excuse || []);
        const curYes = (j.charts?.current?.with_excuse || []);
        const cmpEnabled = !!(j.charts?.compare?.enabled);
        const cmpNo = (j.charts?.compare?.no_excuse || []);
        const cmpYes = (j.charts?.compare?.with_excuse || []);

        const setDays = new Set();
        curNo.forEach(x => setDays.add(x.day));
        curYes.forEach(x => setDays.add(x.day));
        const labels = Array.from(setDays).sort();

        const mapTo = (arr) => {
          const m = new Map(arr.map(x => [x.day, Number(x.total || 0)]));
          return labels.map(d => m.get(d) ?? 0);
        };

        const dataNo = mapTo(curNo);
        const dataYes = mapTo(curYes);

        const destroy = () => { try { if (this.chart) { this.chart.destroy(); this.chart = null; } } catch(e){} };

        if (this.chartKind === 'donut') {
          const noPct = Number(j.charts?.ratios?.no_excuse_pct || 0);
          const yesPct = Number(j.charts?.ratios?.with_excuse_pct || 0);

          destroy();
          this.chart = new Chart(canvas, {
            type: 'doughnut',
            data: {
              labels: ['بدون عذر (أحمر)', 'مع عذر (أخضر)'],
              datasets: [{
                data: [noPct, yesPct],
                backgroundColor: ['rgba(244,63,94,0.75)','rgba(16,185,129,0.75)'],
                borderWidth: 0
              }]
            },
            options: {
              responsive: true,
              plugins: { legend: { labels: { color: 'rgba(226,232,240,0.9)' } } }
            }
          });
          return;
        }

        const datasets = [
          { label: 'بدون عذر (حالي)', data: dataNo, borderColor: 'rgba(244,63,94,0.95)', backgroundColor: 'rgba(244,63,94,0.25)', tension: 0.35 },
          { label: 'مع عذر (حالي)', data: dataYes, borderColor: 'rgba(16,185,129,0.95)', backgroundColor: 'rgba(16,185,129,0.25)', tension: 0.35 },
        ];

        if (cmpEnabled) {
          const mapCmp = (arr) => {
            const m = new Map(arr.map(x => [x.day, Number(x.total || 0)]));
            return labels.map(d => m.get(d) ?? 0);
          };

          datasets.push({ label: 'بدون عذر (مقارنة)', data: mapCmp(cmpNo), borderColor: 'rgba(244,63,94,0.55)', backgroundColor: 'rgba(244,63,94,0.10)', borderDash: [6,6], tension: 0.35 });
          datasets.push({ label: 'مع عذر (مقارنة)', data: mapCmp(cmpYes), borderColor: 'rgba(16,185,129,0.55)', backgroundColor: 'rgba(16,185,129,0.10)', borderDash: [6,6], tension: 0.35 });
        }

        destroy();
        this.chart = new Chart(canvas, {
          type: (this.chartKind === 'bar') ? 'bar' : 'line',
          data: { labels, datasets },
          options: {
            responsive: true,
            plugins: { legend: { labels: { color: 'rgba(226,232,240,0.9)' } } },
            scales: {
              x: { ticks: { color: 'rgba(226,232,240,0.75)' }, grid: { color: 'rgba(255,255,255,0.06)' } },
              y: { ticks: { color: 'rgba(226,232,240,0.75)' }, grid: { color: 'rgba(255,255,255,0.06)' } }
            }
          }
        });

      } catch (e) {
        // صامت
      }
    }
  }
}
</script>
@endpush
@endsection