@extends('layouts.superadmin')
@section('title', 'إدارة طلبات الغياب - الإدارة العليا')

@push('styles')
<style>
  @keyframes pulse-scale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
  .animate-pulse-scale { animation: pulse-scale 1.2s ease-in-out infinite; }
  .sc-scrollbar::-webkit-scrollbar{ width:10px; }
  .sc-scrollbar::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }
  .sc-scrollbar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
  .sc-scrollbar::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }
</style>
@endpush

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

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

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

      <div class="relative p-5 sm:p-7 lg:p-8">
        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-5">
          <div class="space-y-2 max-w-3xl">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-emerald-300/25 text-[11px] text-emerald-100">
              <span class="inline-flex h-6 w-6 rounded-full bg-emerald-500/25 items-center justify-center">
                <i class="fa-solid fa-clipboard-check text-emerald-100 text-sm"></i>
              </span>
              <span>إدارة طلبات الغياب — الإدارة العليا</span>
            </div>

            <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-white">
              إدارة طلبات <span class="text-emerald-300">الغياب</span>
            </h1>

            <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
              مراجعة ومتابعة طلبات الغياب
              @if($filterType == 'moderators')
                — كل المشرفين
              @elseif($filterType == 'male_moderators')
                — المشرفين الذكور
              @elseif($filterType == 'female_moderators')
                — المشرفات الإناث
              @elseif($filterType == 'official_members')
                — الأعضاء الرسميين
              @elseif($filterType == 'beta_members')
                — أعضاء بيتا
              @elseif($filterType == 'all_members')
                — كل الأعضاء
              @else
                — جميع الطلبات
              @endif
            </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-cyan-400"></span>
                لوحة متابعة احترافية
              </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 animate-pulse"></span>
                تحديث حالة الطلب (Pending/Approved/Rejected)
              </span>
            </div>
          </div>

          {{-- Profile Card --}}
          <div class="w-full lg:w-[340px]">
            <div class="rounded-3xl bg-black/40 border border-white/15 p-4">
              <div class="flex items-center gap-3">
                <div class="w-11 h-11 rounded-2xl bg-cyan-500/12 border border-cyan-400/20 text-cyan-200 grid place-items-center">
                  <i class="fa-solid fa-user-shield"></i>
                </div>
                <div class="min-w-0">
                  <div class="text-[11px] text-white/60">المراجع</div>
                  <div class="font-extrabold text-white truncate">{{ auth()->user()->name }}</div>
                  <div class="text-[11px] text-white/45">الإدارة العليا</div>
                </div>
              </div>
            </div>
          </div>

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

    {{-- Alerts --}}
    @if(session('success'))
      <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
        <i class="fa-solid fa-circle-check ms-2"></i>
        {{ session('success') }}
      </div>
    @endif
    @if(session('error'))
      <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-200 px-4 py-3 text-sm">
        <i class="fa-solid fa-triangle-exclamation ms-2"></i>
        {{ session('error') }}
      </div>
    @endif

    {{-- Stats --}}
    <section class="grid grid-cols-2 md:grid-cols-5 gap-3">
      @php
        $statCards = [
          ['label'=>'إجمالي المستخدمين', 'val'=>number_format($stats['total_users']), 'icon'=>'fa-solid fa-users', 'tone'=>'bg-cyan-500/12 border-cyan-400/20 text-cyan-200'],
          ['label'=>'إجمالي الطلبات', 'val'=>number_format($stats['total_requests']), 'icon'=>'fa-solid fa-file-lines', 'tone'=>'bg-white/5 border-white/10 text-white/80'],
          ['label'=>'قيد المراجعة', 'val'=>number_format($stats['pending']), 'icon'=>'fa-solid fa-hourglass-half', 'tone'=>'bg-amber-500/12 border-amber-400/20 text-amber-200'],
          ['label'=>'معتمدة', 'val'=>number_format($stats['approved']), 'icon'=>'fa-solid fa-circle-check', 'tone'=>'bg-emerald-500/12 border-emerald-400/20 text-emerald-200'],
          ['label'=>'مرفوضة', 'val'=>number_format($stats['rejected']), 'icon'=>'fa-solid fa-circle-xmark', 'tone'=>'bg-rose-500/12 border-rose-400/20 text-rose-200'],
        ];
      @endphp

      @foreach($statCards as $c)
        <div class="relative overflow-hidden rounded-3xl border border-white/10
                    bg-gradient-to-br from-slate-900/85 via-slate-950/85 to-black/90 shadow-xl">
          <div class="pointer-events-none absolute -top-16 -right-16 w-56 h-56 rounded-full bg-white/7 blur-3xl"></div>
          <div class="relative p-4 text-center">
            <div class="w-12 h-12 mx-auto rounded-2xl border {{ $c['tone'] }} grid place-items-center mb-3">
              <i class="{{ $c['icon'] }} text-lg"></i>
            </div>
            <div class="text-xl sm:text-2xl font-extrabold text-white">{{ $c['val'] }}</div>
            <div class="text-[11px] text-white/55 mt-1">{{ $c['label'] }}</div>
          </div>
        </div>
      @endforeach
    </section>

    {{-- Filters --}}
    <section class="relative overflow-hidden rounded-3xl border border-white/10
                    bg-gradient-to-br from-slate-900/85 via-slate-950/85 to-black/90 shadow-2xl">
      <div class="pointer-events-none absolute -top-16 -left-16 w-64 h-64 rounded-full bg-white/7 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 space-y-4">
        <div class="flex items-center gap-3">
          <div class="w-11 h-11 rounded-2xl bg-cyan-500/12 border border-cyan-400/20 text-cyan-200 grid place-items-center">
            <i class="fa-solid fa-filter text-lg"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">بحث وتصفية</div>
            <div class="text-base sm:text-lg font-extrabold text-white">تصفية الطلبات</div>
          </div>
        </div>

        <form method="GET" class="space-y-4" id="filterForm">
          {{-- Filter Type Selection --}}
          <div class="grid grid-cols-2 md:grid-cols-7 gap-2">
            @php
              $tabs = [
                ['key'=>'all', 'label'=>'جميع الطلبات', 'tone'=>'from-cyan-300 via-cyan-200 to-emerald-200'],
                ['key'=>'moderators', 'label'=>'كل المشرفين', 'tone'=>'from-violet-300 via-violet-200 to-cyan-200'],
                ['key'=>'male_moderators', 'label'=>'المشرفين الذكور', 'tone'=>'from-sky-300 via-cyan-200 to-emerald-200'],
                ['key'=>'female_moderators', 'label'=>'المشرفات الإناث', 'tone'=>'from-pink-300 via-fuchsia-200 to-violet-200'],
                ['key'=>'all_members', 'label'=>'كل الأعضاء', 'tone'=>'from-emerald-300 via-emerald-200 to-cyan-200'],
                ['key'=>'official_members', 'label'=>'الأعضاء الرسميين', 'tone'=>'from-indigo-300 via-indigo-200 to-cyan-200'],
                ['key'=>'beta_members', 'label'=>'أعضاء بيتا', 'tone'=>'from-amber-300 via-orange-200 to-emerald-200'],
              ];
            @endphp

            @foreach($tabs as $t)
              <a href="{{ route('superadmin.absences.index', array_merge(request()->except('filter_type'), ['filter_type' => $t['key']])) }}"
                 class="inline-flex items-center justify-center px-3 py-2 rounded-2xl text-[12px] font-extrabold transition
                        @if($filterType == $t['key'])
                          bg-gradient-to-r {{ $t['tone'] }} text-slate-950 shadow-lg
                        @else
                          bg-white/5 border border-white/10 text-white/80 hover:bg-white/10
                        @endif">
                {{ $t['label'] }}
              </a>
            @endforeach
          </div>

          {{-- Other Filters --}}
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
            <input type="hidden" name="filter_type" value="{{ $filterType }}">

            <div>
              <label class="block text-[11px] font-extrabold text-white/70 mb-1">اسم المستخدم</label>
              <input type="text" name="user_search" value="{{ request('user_search') }}" placeholder="ابحث عن مستخدم..."
                     class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                            placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/35">
            </div>

            <div>
              <label class="block text-[11px] font-extrabold text-white/70 mb-1">من تاريخ</label>
              <input type="date" name="from" value="{{ request('from') }}"
                     class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                            focus:outline-none focus:ring-2 focus:ring-emerald-500/40">
            </div>

            <div>
              <label class="block text-[11px] font-extrabold text-white/70 mb-1">إلى تاريخ</label>
              <input type="date" name="to" value="{{ request('to') }}"
                     class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                            focus:outline-none focus:ring-2 focus:ring-emerald-500/40">
            </div>

            <div>
              <label class="block text-[11px] font-extrabold text-white/70 mb-1">حالة الطلب</label>
              <select name="status"
                      class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                             focus:outline-none focus:ring-2 focus:ring-cyan-500/35">
                <option value="">الكل</option>
                <option value="pending" @selected(request('status')=='pending')>قيد المراجعة</option>
                <option value="approved" @selected(request('status')=='approved')>معتمد</option>
                <option value="rejected" @selected(request('status')=='rejected')>مرفوض</option>
              </select>
            </div>
          </div>

          <div class="flex justify-end">
            <button type="submit"
                    class="inline-flex items-center gap-2 px-5 py-2.5 rounded-2xl text-sm font-extrabold text-slate-950
                           bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200
                           shadow-lg shadow-emerald-500/20 hover:scale-[1.01] active:scale-100 transition">
              <i class="fa-solid fa-magnifying-glass text-[12px]"></i>
              بحث
            </button>
          </div>
        </form>
      </div>
    </section>

    {{-- Actions --}}
    <section class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
      <a href="{{ route('superadmin.absences.print', request()->all()) }}" target="_blank"
         class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-2xl
                bg-white/10 hover:bg-white/15 border border-white/15
                text-white/90 text-sm font-extrabold transition">
        <i class="fa-solid fa-print text-[12px]"></i>
        طباعة التقرير الشامل
      </a>

      <div class="text-[12px] text-white/55">
        إجمالي: <span class="font-extrabold text-white">{{ $absences->total() }}</span> طلب
      </div>
    </section>

    {{-- Cards Grid --}}
    @if($absences->count() > 0)
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        @foreach ($absences as $absence)
          @php
            $userRole = $absence->user->roles->first();
            $roleNames = [
              'moderator' => 'مشرف',
              'official-member' => 'عضو رسمي',
              'member' => 'عضو بيتا'
            ];
            $rolePill = [
              'moderator' => 'bg-violet-500/12 border-violet-400/20 text-violet-200',
              'official-member' => 'bg-emerald-500/12 border-emerald-400/20 text-emerald-200',
              'member' => 'bg-cyan-500/12 border-cyan-400/20 text-cyan-200',
            ];
            $statusPill = match($absence->status) {
              'approved' => 'bg-emerald-500/12 border-emerald-400/20 text-emerald-200',
              'pending'  => 'bg-amber-500/12 border-amber-400/20 text-amber-200',
              default    => 'bg-rose-500/12 border-rose-400/20 text-rose-200',
            };
            $statusLabel = match($absence->status) {
              'approved' => 'معتمد',
              'pending'  => 'قيد المراجعة',
              default    => 'مرفوض',
            };
          @endphp

          <div class="group relative overflow-hidden rounded-3xl border border-white/10
                      bg-gradient-to-br from-slate-900/85 via-slate-950/85 to-black/90 shadow-xl hover:shadow-2xl transition">
            <div class="pointer-events-none absolute -top-16 -right-16 w-64 h-64 rounded-full bg-white/7 blur-3xl"></div>

            {{-- Header --}}
            <div class="relative p-5 border-b border-white/10 bg-black/25">
              <div class="flex items-center gap-4">
                <div class="flex-shrink-0">
                  @if($absence->user->avatar)
                    <img src="{{ $absence->user->avatar_url }}"
                         alt="{{ $absence->user->name }}"
                         class="w-16 h-16 rounded-3xl object-cover border-2 border-white/10 shadow-lg">
                  @else
                    <div class="w-16 h-16 rounded-3xl border-2 border-white/10 bg-white/5 grid place-items-center">
                      <i class="fa-solid fa-user text-white/60 text-xl"></i>
                    </div>
                  @endif
                </div>

                <div class="flex-1 min-w-0">
                  <div class="text-base font-extrabold text-white truncate">{{ $absence->user->name }}</div>
                  <div class="text-[12px] text-white/55 truncate">{{ $absence->user->email }}</div>

                  <div class="flex flex-wrap items-center gap-2 mt-2">
                    @if($userRole)
                      <span class="inline-flex px-2.5 py-1 rounded-full border text-[11px] font-extrabold {{ $rolePill[$userRole->name] ?? 'bg-white/5 border-white/10 text-white/70' }}">
                        {{ $roleNames[$userRole->name] ?? $userRole->name }}
                      </span>
                    @endif

                    <span class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border text-[11px] font-extrabold {{ $statusPill }}">
                      <span class="w-1.5 h-1.5 rounded-full {{ $absence->status=='approved' ? 'bg-emerald-400' : ($absence->status=='pending' ? 'bg-amber-400' : 'bg-rose-400') }} animate-pulse"></span>
                      {{ $statusLabel }}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            {{-- Body --}}
            <div class="relative p-5 space-y-3">
              <div class="grid grid-cols-2 gap-3">
                <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                  <div class="text-[11px] text-white/55 mb-1">من تاريخ</div>
                  <div class="text-sm font-extrabold text-white">{{ $absence->from_date }}</div>
                </div>
                <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                  <div class="text-[11px] text-white/55 mb-1">إلى تاريخ</div>
                  <div class="text-sm font-extrabold text-white">{{ $absence->to_date }}</div>
                </div>
              </div>

              @if($absence->reviewedBy)
                <div class="rounded-2xl bg-cyan-500/10 border border-cyan-400/20 p-3">
                  <div class="text-[11px] text-white/55 mb-1">راجعه</div>
                  <div class="text-sm font-extrabold text-white">{{ $absence->reviewedBy->name }}</div>
                  <div class="text-[11px] text-white/50">{{ $absence->reviewed_at->format('Y/m/d') }}</div>
                </div>
              @else
                <div class="rounded-2xl bg-white/5 border border-white/10 p-3 text-center text-[12px] text-white/55">
                  لم يتم المراجعة بعد
                </div>
              @endif
            </div>

            {{-- Footer --}}
            <div class="relative p-4 border-t border-white/10 bg-black/25">
              <div class="flex items-center justify-center gap-2">
                <a href="{{ route('superadmin.absences.show', $absence) }}"
                   class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl
                          bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200
                          text-slate-950 text-[12px] font-extrabold shadow-lg shadow-emerald-500/20 transition">
                  <i class="fa-solid fa-eye text-[12px]"></i>
                  عرض التفاصيل
                </a>

                @if($absence->status == 'pending')
                  <button onclick="openStatusModal('{{ $absence->id }}', '{{ $absence->user->name }}')"
                          class="inline-flex items-center justify-center w-11 h-11 rounded-2xl
                                 bg-emerald-500/12 hover:bg-emerald-500/16 border border-emerald-400/20
                                 text-emerald-200 transition"
                          title="تحديث الحالة">
                    <i class="fa-solid fa-pen-to-square"></i>
                  </button>
                @endif

                <a href="{{ route('superadmin.absences.member-attendance', $absence->user) }}"
                   class="inline-flex items-center justify-center w-11 h-11 rounded-2xl
                          bg-violet-500/12 hover:bg-violet-500/16 border border-violet-400/20
                          text-violet-200 transition"
                   title="سجل الحضور">
                  <i class="fa-solid fa-chart-column"></i>
                </a>
              </div>
            </div>

            <div class="h-1 bg-gradient-to-r from-emerald-400 to-cyan-400 opacity-30 group-hover:opacity-80 transition"></div>
          </div>
        @endforeach
      </div>

      {{-- Pagination --}}
      <section class="relative overflow-hidden rounded-3xl border border-white/10
                      bg-gradient-to-br from-slate-900/85 via-slate-950/85 to-black/90 shadow-2xl">
        <div class="relative p-5 sm:p-6 flex flex-col sm:flex-row justify-between items-center gap-3">
          <div class="text-[12px] text-white/60">
            عرض {{ $absences->firstItem() }} إلى {{ $absences->lastItem() }}
            من أصل <span class="font-extrabold text-white">{{ $absences->total() }}</span> نتيجة
          </div>
          <div class="text-white">
            {{ $absences->withQueryString()->links() }}
          </div>
        </div>
      </section>

    @else
      <section class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 p-10 text-center">
        <i class="fa-solid fa-inbox text-4xl text-white/40"></i>
        <div class="mt-3 text-white/80 font-extrabold">لا توجد طلبات غياب</div>
        <div class="text-[12px] text-white/45 mt-1">لم يتم العثور على أي طلبات غياب للفلتر المحدد</div>
      </section>
    @endif

  </div>
</div>

{{-- مودال تحديث حالة الطلب (Socratic) --}}
<div id="statusModal" class="fixed inset-0 z-[9999] overflow-y-auto hidden">
  <div class="absolute inset-0 bg-black/80 backdrop-blur-2xl" onclick="closeStatusModal()"></div>

  <div class="relative max-w-lg mx-auto mt-16 sm:mt-24 px-4">
    <div class="relative overflow-hidden rounded-3xl
                bg-gradient-to-br from-slate-900/95 via-slate-950/95 to-black/95
                border border-emerald-400/25 shadow-2xl shadow-emerald-500/10 p-5 sm:p-6">
      <div class="pointer-events-none absolute -top-16 -right-16 w-56 h-56 rounded-full bg-emerald-400/12 blur-3xl"></div>

      <div class="flex items-center justify-between gap-3 mb-4">
        <div class="flex items-center gap-3">
          <div class="w-11 h-11 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 text-emerald-200 grid place-items-center">
            <i class="fa-solid fa-pen-to-square"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">تحديث</div>
            <h3 class="text-lg font-extrabold text-white">حالة طلب الغياب</h3>
          </div>
        </div>

        <button type="button" onclick="closeStatusModal()"
                class="w-10 h-10 rounded-2xl bg-white/5 border border-white/10 text-white/70 hover:bg-white/10 transition grid place-items-center">
          <i class="fa-solid fa-xmark"></i>
        </button>
      </div>

      <div class="rounded-2xl bg-black/35 border border-white/10 px-4 py-3 text-[12px] text-white/70 mb-4">
        <span id="modalUserName">يرجى اتخاذ إجراء بشأن طلب الغياب</span>
      </div>

      <form id="statusForm" class="space-y-4">
        @csrf
        <input type="hidden" id="absenceId" name="absence_id">

        <div>
          <label class="block text-[11px] font-extrabold text-white/70 mb-1">حالة الطلب</label>
          <select name="status" required
                  class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                         focus:outline-none focus:ring-2 focus:ring-emerald-500/40">
            <option value="">اختر الحالة...</option>
            <option value="approved">قبول الطلب</option>
            <option value="rejected">رفض الطلب</option>
          </select>
        </div>

        <div>
          <label class="block text-[11px] font-extrabold text-white/70 mb-1">ملاحظات الإدارة (اختياري)</label>
          <textarea name="admin_notes" rows="3" placeholder="أكتب ملاحظاتك هنا..."
                    class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                           placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/35"></textarea>
        </div>

        <label class="flex items-center gap-2 text-[12px] text-white/80">
          <input type="checkbox" name="show_identity" id="show_identity" value="1"
                 class="w-5 h-5 rounded border-white/20 bg-black/40 text-emerald-400 focus:ring-emerald-500/40">
          <span>إظهار هويتي كمراجع للطلب</span>
        </label>

        <div class="flex flex-col sm:flex-row-reverse gap-2 pt-2">
          <button type="submit"
                  class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-2xl text-sm font-extrabold text-slate-950
                         bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200
                         shadow-lg shadow-emerald-500/20 hover:scale-[1.01] active:scale-100 transition">
            <i class="fa-solid fa-floppy-disk text-[12px]"></i>
            حفظ التحديث
          </button>

          <button type="button" onclick="closeStatusModal()"
                  class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-2xl
                         bg-white/10 hover:bg-white/15 border border-white/15
                         text-white/90 text-sm font-extrabold transition">
            إلغاء
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- Success Alert --}}
<div id="successAlert" class="fixed top-4 left-1/2 -translate-x-1/2 z-[99999] hidden w-[92vw] max-w-md">
  <div class="bg-emerald-500/10 border border-emerald-400/25 rounded-3xl p-4 shadow-2xl backdrop-blur-xl">
    <div class="flex items-start gap-3">
      <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 text-emerald-200 grid place-items-center">
        <i class="fa-solid fa-circle-check"></i>
      </div>
      <div class="flex-1">
        <div class="text-sm font-extrabold text-emerald-100">تم بنجاح!</div>
        <p class="mt-1 text-sm text-emerald-100/90" id="successMessage"></p>
      </div>
      <button onclick="hideSuccessAlert()" class="w-10 h-10 rounded-2xl bg-white/5 border border-white/10 text-white/70 hover:bg-white/10 transition grid place-items-center">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
  </div>
</div>

{{-- Error Alert --}}
<div id="errorAlert" class="fixed top-4 left-1/2 -translate-x-1/2 z-[99999] hidden w-[92vw] max-w-md">
  <div class="bg-rose-500/10 border border-rose-400/25 rounded-3xl p-4 shadow-2xl backdrop-blur-xl">
    <div class="flex items-start gap-3">
      <div class="w-10 h-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 text-rose-200 grid place-items-center">
        <i class="fa-solid fa-triangle-exclamation"></i>
      </div>
      <div class="flex-1">
        <div class="text-sm font-extrabold text-rose-100">حدث خطأ</div>
        <p class="mt-1 text-sm text-rose-100/90" id="errorMessage"></p>
      </div>
      <button onclick="hideErrorAlert()" class="w-10 h-10 rounded-2xl bg-white/5 border border-white/10 text-white/70 hover:bg-white/10 transition grid place-items-center">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
  </div>
</div>

<script>
function openStatusModal(absenceId, userName) {
    document.getElementById('absenceId').value = absenceId;
    document.getElementById('modalUserName').textContent = `طلب الغياب المقدم من: ${userName}`;
    document.getElementById('statusModal').classList.remove('hidden');

    // Reset form
    document.getElementById('statusForm').reset();
    document.getElementById('absenceId').value = absenceId;
}

function closeStatusModal() {
    document.getElementById('statusModal').classList.add('hidden');
}

function showSuccessAlert(message) {
    document.getElementById('successMessage').textContent = message;
    document.getElementById('successAlert').classList.remove('hidden');
    setTimeout(hideSuccessAlert, 5000);
}

function hideSuccessAlert() {
    document.getElementById('successAlert').classList.add('hidden');
}

function showErrorAlert(message) {
    document.getElementById('errorMessage').textContent = message;
    document.getElementById('errorAlert').classList.remove('hidden');
    setTimeout(hideErrorAlert, 5000);
}

function hideErrorAlert() {
    document.getElementById('errorAlert').classList.add('hidden');
}

document.addEventListener('DOMContentLoaded', function() {
    // إرسال تحديث الحالة AJAX (نفس منطقك)
    document.getElementById('statusForm').onsubmit = function(e) {
        e.preventDefault();

        const form = this;
        const submitButton = form.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        const absenceId = document.getElementById('absenceId').value;

        submitButton.disabled = true;
        submitButton.innerHTML = `
            <i class="fa-solid fa-spinner fa-spin"></i>
            جاري الحفظ...
        `;

        const formData = new FormData(form);

        fetch(`/superadmin/absences/${absenceId}/update-status`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': formData.get('_token'),
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                closeStatusModal();
                showSuccessAlert(data.message);
                setTimeout(() => location.reload(), 1500);
            } else {
                showErrorAlert(data.message || 'حدث خطأ غير متوقع');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showErrorAlert('تعذر الاتصال بالخادم، يرجى المحاولة مرة أخرى');
        })
        .finally(() => {
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
        });
    };

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeStatusModal();
    });
});
</script>
@endsection