@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')
<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">

    @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

    {{-- 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 space-y-5">
        <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-triangle-exclamation text-emerald-100 text-sm"></i>
              </span>
              <span>منظومة المخالفات والإنذارات — غرفة الصقر</span>
            </div>

            <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight">
              إدارة <span class="text-emerald-300">المخالفات</span> و<span class="text-cyan-300">الإنذارات</span>
            </h1>

            <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
              إدارة وتتبع المخالفات والإنذارات للأعضاء مع إمكانية التأكيد والمتابعة، وإجراءات تلقائية للحضور.
            </p>
          </div>

          {{-- Actions --}}
          <div class="w-full lg:w-[420px]">
            <div class="rounded-3xl bg-black/40 border border-white/15 p-4 sm:p-5 space-y-2">
              <div class="text-[11px] text-white/60 font-extrabold">أزرار التحكم</div>
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                <button onclick="showEligibleMembers()"
                        class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl
                               bg-amber-500/15 hover:bg-amber-500/20 border border-amber-400/25
                               text-amber-100 text-[12px] font-extrabold transition">
                  <i class="fa-solid fa-users-viewfinder text-[12px]"></i>
                  المستحقون
                </button>

                <button onclick="processAutomaticWarnings()"
                        class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl
                               bg-orange-500/15 hover:bg-orange-500/20 border border-orange-400/25
                               text-orange-100 text-[12px] font-extrabold transition">
                  <i class="fa-solid fa-bolt text-[12px]"></i>
                  تلقائي
                </button>

                <a href="{{ route('superadmin.violations.create') }}"
                   class="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
                          hover:scale-[1.01] active:scale-100 transition">
                  <i class="fa-solid fa-plus text-[12px]"></i>
                  جديد
                </a>
              </div>
              <div class="text-[11px] text-white/45">
                المعالجة التلقائية: تُنشئ إنذار لمن عنده 5+ غيابات بدون عذر خلال 30 يوم.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    {{-- STATS --}}
    <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-3">
      @php
        $cards = [
          ['label'=>'إجمالي الأحداث','val'=>$stats['total'],'icon'=>'fa-solid fa-file-lines','tone'=>'bg-cyan-500/12 border-cyan-400/20 text-cyan-200'],
          ['label'=>'الإنذارات','val'=>$stats['warnings'],'icon'=>'fa-solid fa-triangle-exclamation','tone'=>'bg-amber-500/12 border-amber-400/20 text-amber-200'],
          ['label'=>'المخالفات','val'=>$stats['violations'],'icon'=>'fa-solid fa-ban','tone'=>'bg-rose-500/12 border-rose-400/20 text-rose-200'],
          ['label'=>'النشطة','val'=>$stats['active'],'icon'=>'fa-solid fa-bolt','tone'=>'bg-orange-500/12 border-orange-400/20 text-orange-200'],
          ['label'=>'المؤكدة','val'=>$stats['resolved'],'icon'=>'fa-solid fa-circle-check','tone'=>'bg-emerald-500/12 border-emerald-400/20 text-emerald-200'],
          ['label'=>'التلقائية','val'=>$stats['automatic'],'icon'=>'fa-solid fa-gear','tone'=>'bg-violet-500/12 border-violet-400/20 text-violet-200'],
        ];
      @endphp

      @foreach($cards 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-14 -right-14 w-40 h-40 rounded-full bg-white/7 blur-3xl"></div>
          <div class="relative p-4">
            <div class="flex items-center justify-between gap-3">
              <div class="min-w-0">
                <div class="text-[11px] text-white/60 font-extrabold">{{ $c['label'] }}</div>
                <div class="text-2xl font-extrabold text-white mt-1">{{ $c['val'] }}</div>
              </div>
              <div class="w-11 h-11 rounded-2xl border {{ $c['tone'] }} grid place-items-center">
                <i class="{{ $c['icon'] }}"></i>
              </div>
            </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 justify-between gap-3">
          <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>

          <button type="button" onclick="printReport()"
                  class="hidden sm:inline-flex items-center gap-2 px-4 py-2.5 rounded-2xl
                         bg-emerald-500/12 hover:bg-emerald-500/16 border border-emerald-400/20
                         text-emerald-100 text-sm font-extrabold transition">
            <i class="fa-solid fa-print text-[12px]"></i>
            طباعة التقرير
          </button>
        </div>

        <form method="GET" action="{{ route('superadmin.violations.index') }}" class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">

            <div>
              <label class="block text-[11px] font-extrabold text-white/70 mb-1">نوع الحدث</label>
              <select name="type" 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="warning" {{ request('type') == 'warning' ? 'selected' : '' }}>إنذارات</option>
                <option value="violation" {{ request('type') == 'violation' ? 'selected' : '' }}>مخالفات</option>
              </select>
            </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-emerald-500/40">
                <option value="">كل الحالات</option>
                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>نشط</option>
                <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>مؤكد</option>
              </select>
            </div>

            <div>
              <label class="block text-[11px] font-extrabold text-white/70 mb-1">العضو</label>
              <select name="user_id" 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>
                @foreach($users as $u)
                  <option value="{{ $u->id }}" {{ request('user_id') == $u->id ? 'selected' : '' }}>
                    {{ $u->name }} ({{ $u->username }})
                  </option>
                @endforeach
              </select>
            </div>

            <div>
              <label class="block text-[11px] font-extrabold text-white/70 mb-1">الفترة الزمنية</label>
              <select name="period" 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="today" {{ request('period') == 'today' ? 'selected' : '' }}>اليوم</option>
                <option value="week" {{ request('period') == 'week' ? 'selected' : '' }}>هذا الأسبوع</option>
                <option value="month" {{ request('period') == 'month' ? 'selected' : '' }}>هذا الشهر</option>
              </select>
            </div>

            <div>
              <label class="block text-[11px] font-extrabold text-white/70 mb-1">من تاريخ</label>
              <input type="date" name="date_from" value="{{ request('date_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-cyan-500/35">
            </div>

            <div>
              <label class="block text-[11px] font-extrabold text-white/70 mb-1">إلى تاريخ</label>
              <input type="date" name="date_to" value="{{ request('date_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-cyan-500/35">
            </div>

            <div>
              <label class="block text-[11px] font-extrabold text-white/70 mb-1">البحث</label>
              <input type="text" name="search" value="{{ request('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-emerald-500/40">
            </div>

            <div>
              <label class="block text-[11px] font-extrabold text-white/70 mb-1">نوع الإنشاء</label>
              <select name="is_automatic" 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="0" {{ request('is_automatic') === '0' ? 'selected' : '' }}>يدوي</option>
                <option value="1" {{ request('is_automatic') === '1' ? 'selected' : '' }}>تلقائي</option>
              </select>
            </div>

          </div>

          <div class="flex flex-wrap gap-2 pt-1">
            <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>

            <a href="{{ route('superadmin.violations.index') }}"
               class="inline-flex items-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-rotate text-[12px]"></i>
              إعادة تعيين
            </a>

            <button type="button" onclick="printReport()"
                    class="inline-flex items-center gap-2 px-5 py-2.5 rounded-2xl bg-emerald-500/12 hover:bg-emerald-500/16 border border-emerald-400/20
                           text-emerald-100 text-sm font-extrabold transition sm:hidden">
              <i class="fa-solid fa-print text-[12px]"></i>
              طباعة التقرير
            </button>
          </div>
        </form>
      </div>
    </section>

    {{-- RESULTS --}}
    <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-24 -right-20 w-72 h-72 rounded-full bg-white/7 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 border-b border-white/10">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
          <div>
            <h3 class="text-base sm:text-lg font-extrabold text-white">قائمة المخالفات والإنذارات</h3>
            <p class="text-[12px] text-white/55">عدد النتائج: {{ $violations->total() }} نتيجة</p>
          </div>
        </div>
      </div>

      {{-- Cards Grid --}}
      <div class="p-5 sm:p-7">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
          @forelse($violations as $violation)
            @php
              $isWarn = $violation->type === 'warning';
              $grad   = $isWarn ? 'from-amber-500/70 via-amber-400/50 to-orange-500/60' : 'from-rose-600/70 via-rose-500/50 to-red-600/60';
              $pill   = $isWarn ? 'bg-amber-500/15 border-amber-400/25 text-amber-100' : 'bg-rose-500/15 border-rose-400/25 text-rose-100';
            @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 -left-16 w-64 h-64 rounded-full bg-white/6 blur-3xl"></div>

              {{-- Top banner --}}
              <div class="relative h-28 bg-gradient-to-br {{ $grad }}">
                {{-- avatar --}}
                @if($violation->members->first() && $violation->members->first()->user && $violation->members->first()->user->avatar_url)
                  <img src="{{ $violation->members->first()->user->avatar_url }}"
                       alt="{{ $violation->members->first()->user->name }}"
                       class="absolute -bottom-6 left-4 w-16 h-16 rounded-2xl border-4 border-slate-950/80 object-cover shadow-lg">
                @else
                  <div class="absolute -bottom-6 left-4 w-16 h-16 rounded-2xl border-4 border-slate-950/80 bg-white/10 flex items-center justify-center">
                    <i class="fa-solid fa-user text-white/70 text-xl"></i>
                  </div>
                @endif

                {{-- badges --}}
                <div class="absolute top-3 right-3 flex gap-2">
                  <span class="px-3 py-1 rounded-full border text-[11px] font-extrabold {{ $pill }}">
                    {{ $isWarn ? 'إنذار' : 'مخالفة' }}
                  </span>
                  @if($violation->is_automatic)
                    <span class="px-3 py-1 rounded-full border text-[11px] font-extrabold bg-violet-500/12 border-violet-400/20 text-violet-200">
                      تلقائي
                    </span>
                  @endif
                </div>
              </div>

              <div class="relative p-5 pt-10 space-y-3">
                <div class="text-sm font-extrabold text-white line-clamp-2">
                  {{ $violation->title }}
                </div>

                <div class="text-[12px] text-white/60">
                  بواسطة: <span class="font-extrabold text-white/85">{{ $violation->creator_display_name ?? 'غير معروف' }}</span>
                </div>

                {{-- members --}}
                <div class="space-y-1">
                  <div class="text-[11px] text-white/55">الأعضاء المخالفون:</div>
                  <div class="flex flex-wrap gap-1">
                    @foreach($violation->members->take(2) as $member)
                      <span class="px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                        {{ $member->user->name ?? 'محذوف' }}
                      </span>
                    @endforeach
                    @if($violation->members->count() > 2)
                      <span class="px-2 py-0.5 rounded-full bg-cyan-500/12 border border-cyan-400/20 text-[11px] text-cyan-200">
                        +{{ $violation->members->count() - 2 }}
                      </span>
                    @endif
                  </div>
                </div>

                {{-- footer info --}}
                <div class="flex items-center justify-between text-[11px] text-white/55 pt-1">
                  <div class="flex items-center gap-2">
                    @if($violation->status === 'active')
                      <span class="px-2.5 py-1 rounded-full bg-orange-500/12 border border-orange-400/20 text-orange-200 font-extrabold">
                        نشط
                      </span>
                    @else
                      <span class="px-2.5 py-1 rounded-full bg-emerald-500/12 border border-emerald-400/20 text-emerald-200 font-extrabold">
                        مؤكد
                      </span>
                    @endif

                    @if($violation->points_deducted > 0)
                      <span class="px-2.5 py-1 rounded-full bg-rose-500/12 border border-rose-400/20 text-rose-200 font-extrabold">
                        -{{ $violation->points_deducted }}
                      </span>
                    @endif
                  </div>

                  <span>{{ $violation->created_at->format('Y/m/d') }}</span>
                </div>

                {{-- actions --}}
                <div class="flex items-center justify-between pt-3 border-t border-white/10">
                  <div class="flex gap-2">
                    <a href="{{ route('superadmin.violations.show', $violation) }}"
                       class="p-2 rounded-2xl bg-white/5 border border-white/10 text-white/80 hover:bg-white/10 transition"
                       title="عرض">
                      <i class="fa-solid fa-eye"></i>
                    </a>

                    @if($violation->status === 'active')
                      <a href="{{ route('superadmin.violations.edit', $violation) }}"
                         class="p-2 rounded-2xl bg-amber-500/10 border border-amber-400/20 text-amber-200 hover:bg-amber-500/15 transition"
                         title="تعديل">
                        <i class="fa-solid fa-pen-to-square"></i>
                      </a>
                    @endif
                  </div>

                  <button onclick="deleteViolation({{ $violation->id }})"
                          class="p-2 rounded-2xl bg-rose-500/10 border border-rose-400/20 text-rose-200 hover:bg-rose-500/15 transition"
                          title="حذف">
                    <i class="fa-solid fa-trash"></i>
                  </button>
                </div>
              </div>

              <div class="h-1 bg-gradient-to-r from-emerald-400 to-cyan-400 opacity-35 group-hover:opacity-80 transition"></div>
            </div>
          @empty
            <div class="col-span-full">
              <div class="rounded-3xl border border-dashed border-white/15 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>
              </div>
            </div>
          @endforelse
        </div>
      </div>

      @if($violations->hasPages())
        <div class="px-5 sm:px-7 py-4 border-t border-white/10">
          {{ $violations->appends(request()->query())->links() }}
        </div>
      @endif
    </section>

  </div>
</div>

{{-- ======== MODALS (Socratic Style) ======== --}}

{{-- Eligible Members --}}
<div id="eligibleMembersModal" class="fixed inset-0 hidden z-[9999]">
  <div class="absolute inset-0 bg-black/80 backdrop-blur-2xl"></div>
  <div class="relative max-w-3xl 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="pointer-events-none absolute -bottom-16 -left-16 w-56 h-56 rounded-full bg-cyan-400/12 blur-3xl"></div>

      <div class="flex justify-between items-center 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-users"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">تقرير</div>
            <h3 class="text-lg font-extrabold text-white">الأعضاء المستحقون للإنذار التلقائي</h3>
          </div>
        </div>

        <button onclick="closeEligibleMembersModal()"
                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 id="eligibleMembersContent" class="max-h-[65vh] overflow-y-auto sc-scrollbar">
        <!-- سيتم تحميل المحتوى ديناميكياً -->
      </div>

      <div class="flex justify-end gap-2 mt-5">
        <button onclick="closeEligibleMembersModal()"
                class="px-4 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>
        <button onclick="processAutomaticWarnings()"
                class="px-4 py-2.5 rounded-2xl bg-orange-500/15 hover:bg-orange-500/20 border border-orange-400/25 text-orange-100 text-sm font-extrabold transition">
          معالجة الإنذارات
        </button>
      </div>
    </div>
  </div>
</div>

{{-- Resolve --}}
<div id="resolveModal" class="fixed inset-0 hidden z-[9999]">
  <div class="absolute inset-0 bg-black/80 backdrop-blur-2xl"></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 justify-between items-center mb-4">
        <h3 class="text-lg font-extrabold text-white">تأكيد المخالفة/الإنذار</h3>
        <button onclick="closeResolveModal()"
                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>

      <form id="resolveForm">
        <div class="mb-4">
          <label class="block text-[11px] font-extrabold text-white/70 mb-1">ملاحظات إدارية (اختياري)</label>
          <textarea name="admin_notes" rows="3"
                    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-emerald-500/40"
                    placeholder="أضف أي ملاحظات إدارية..."></textarea>
        </div>

        <div class="flex justify-end gap-2">
          <button type="button" onclick="closeResolveModal()"
                  class="px-4 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>
          <button type="submit"
                  class="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">
            تأكيد
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- Attachment --}}
<div id="attachmentModal" class="fixed inset-0 hidden z-[9999]">
  <div class="absolute inset-0 bg-black/80 backdrop-blur-2xl"></div>
  <div class="relative max-w-4xl mx-auto mt-10 sm:mt-16 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 max-h-[85vh] overflow-y-auto sc-scrollbar">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-extrabold text-white">عرض المرفق</h3>
        <button onclick="closeAttachmentModal()"
                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 id="attachmentContent" class="text-center">
        <!-- سيتم تحميل المحتوى ديناميكياً -->
      </div>

      <div class="flex justify-center gap-2 mt-4">
        <button onclick="closeAttachmentModal()"
                class="px-4 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>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<script>
// ✅ نفس سكربتاتك كما هي (بدون حذف/تعديل منطق) — فقط سيعمل مع مودالاتنا الجديدة

let selectedViolations = [];
let currentViolationId = null;

async function showEligibleMembers() {
    try {
        const response = await fetch('{{ route("superadmin.violations.eligible-members") }}');
        const data = await response.json();

        if (data.success) {
            const modal = document.getElementById('eligibleMembersModal');
            const content = document.getElementById('eligibleMembersContent');

            if (data.eligible_members.length === 0) {
                content.innerHTML = `
                    <div class="text-center py-10">
                        <div class="w-14 h-14 rounded-3xl bg-emerald-500/15 border border-emerald-400/25 text-emerald-200 grid place-items-center mx-auto mb-4">
                            <i class="fa-solid fa-circle-check text-xl"></i>
                        </div>
                        <h3 class="text-lg font-extrabold text-emerald-200 mb-1">ممتاز!</h3>
                        <p class="text-white/70">لا يوجد أعضاء مستحقون للإنذار التلقائي حالياً</p>
                        <p class="text-[12px] text-white/45 mt-2">جميع الأعضاء ملتزمون بمعايير الحضور (أقل من 5 غيابات في آخر 30 يوم)</p>
                    </div>
                `;
            } else {
                let membersHtml = `
                    <div class="mb-4">
                        <div class="flex items-center justify-between mb-3">
                            <h4 class="font-extrabold text-rose-200">تم العثور على ${data.total_eligible} عضو مستحق للإنذار</h4>
                            <span class="text-[12px] text-white/55">(5+ غيابات بدون عذر في آخر 30 يوم)</span>
                        </div>
                        <div class="space-y-3">
                `;

                data.eligible_members.forEach(member => {
                    membersHtml += `
                        <div class="flex items-start justify-between gap-3 p-3 rounded-2xl
                                    bg-rose-500/10 border border-rose-400/20">
                            <div class="flex-1">
                                <div class="flex items-center gap-2">
                                    <h5 class="font-extrabold text-white">${member.name}</h5>
                                    <span class="text-[11px] bg-cyan-500/12 border border-cyan-400/20 text-cyan-200 px-2 py-0.5 rounded-full font-extrabold">${member.role}</span>
                                </div>
                                <p class="text-[12px] text-white/65">${member.email}</p>
                            </div>
                            <div class="text-left">
                                <div class="flex items-center gap-2 justify-end">
                                    <span class="text-lg font-extrabold text-rose-200">${member.absences_count}</span>
                                    <span class="text-[12px] text-white/55">غياب (30 يوم)</span>
                                </div>
                                <div class="text-[11px] text-white/50 mt-1">إجمالي: ${member.total_absences} غياب</div>
                                <div class="text-[11px] text-white/50">آخر إنذار: ${member.last_warning_date}</div>
                            </div>
                        </div>
                    `;
                });

                membersHtml += `</div></div>`;
                content.innerHTML = membersHtml;
            }

            modal.classList.remove('hidden');
        } else {
            showAlert('error', data.message || 'حدث خطأ أثناء جلب البيانات');
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('error', 'حدث خطأ في الاتصال بالخادم');
    }
}

function closeEligibleMembersModal() {
    document.getElementById('eligibleMembersModal').classList.add('hidden');
}

async function processAutomaticWarnings() {
    if (!confirm('هل أنت متأكد من رغبتك في معالجة الإنذارات التلقائية؟\n\nسيتم إنشاء إنذار للأعضاء الذين لديهم 5 غيابات أو أكثر بدون عذر في آخر 30 يوم.')) {
        return;
    }

    try {
        const response = await fetch('{{ route("superadmin.violations.process-automatic") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        const data = await response.json();

        if (data.success) {
            let message = data.message;
            if (data.warnings_created > 0 && data.warning_details) {
                message += '\n\nتفاصيل الإنذارات المنشأة:\n';
                data.warning_details.forEach(detail => {
                    message += `• ${detail.user_name}: ${detail.absences_count} غياب\n`;
                });
            }

            showAlert('success', message);
            setTimeout(() => { location.reload(); }, 2000);
        } else {
            showAlert('error', data.message || 'حدث خطأ أثناء معالجة الإنذارات');
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('error', 'حدث خطأ في الاتصال بالخادم');
    }
}

function showAttachment(violationId, attachmentUrl) {
    const modal = document.getElementById('attachmentModal');
    const content = document.getElementById('attachmentContent');

    const fileExtension = attachmentUrl.split('.').pop().toLowerCase();
    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
    const pdfExtensions = ['pdf'];

    let attachmentHtml = '';

    if (imageExtensions.includes(fileExtension)) {
        attachmentHtml = `
            <div class="max-w-full">
                <img src="${attachmentUrl}" alt="مرفق المخالفة" class="max-w-full h-auto rounded-2xl shadow-2xl mx-auto" style="max-height: 70vh;">
            </div>
        `;
    } else if (pdfExtensions.includes(fileExtension)) {
        attachmentHtml = `
            <div class="w-full h-[70vh]">
                <iframe src="${attachmentUrl}" class="w-full h-full border border-white/10 rounded-2xl" frameborder="0"></iframe>
            </div>
        `;
    } else {
        attachmentHtml = `
            <div class="text-center py-10">
                <div class="w-14 h-14 rounded-3xl bg-white/5 border border-white/10 text-white/70 grid place-items-center mx-auto mb-4">
                    <i class="fa-solid fa-file text-xl"></i>
                </div>
                <h3 class="text-lg font-extrabold text-white mb-2">ملف غير قابل للعرض</h3>
                <p class="text-white/60 mb-4">هذا النوع من الملفات لا يمكن عرضه في المتصفح</p>
                <a href="${attachmentUrl}" target="_blank"
                   class="inline-flex items-center gap-2 px-5 py-2.5 rounded-2xl
                          bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200
                          text-slate-950 text-sm font-extrabold shadow-lg shadow-emerald-500/20 transition">
                    <i class="fa-solid fa-download"></i>
                    تحميل الملف
                </a>
            </div>
        `;
    }

    content.innerHTML = attachmentHtml;
    modal.classList.remove('hidden');
}

function closeAttachmentModal() {
    document.getElementById('attachmentModal').classList.add('hidden');
}

function toggleSelectAll() {
    const selectAll = document.getElementById('select-all');
    const checkboxes = document.querySelectorAll('.violation-checkbox');

    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });

    updateSelectedViolations();
}

function updateSelectedViolations() {
    selectedViolations = [];
    document.querySelectorAll('.violation-checkbox:checked').forEach(checkbox => {
        selectedViolations.push(parseInt(checkbox.value));
    });
}

async function bulkAction(action) {
    updateSelectedViolations();

    if (selectedViolations.length === 0) {
        showAlert('warning', 'يرجى تحديد مخالفة واحدة على الأقل');
        return;
    }

    const actionText = action === 'resolve' ? 'تأكيد' : 'حذف';
    if (!confirm(`هل أنت متأكد من رغبتك في ${actionText} المخالفات المحددة؟`)) {
        return;
    }

    try {
        const response = await fetch('{{ route("superadmin.violations.bulk-action") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                action: action,
                violations: selectedViolations
            })
        });

        const data = await response.json();

        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('error', data.message || 'حدث خطأ أثناء تنفيذ العملية');
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('error', 'حدث خطأ في الاتصال بالخادم');
    }
}

function resolveViolation(violationId) {
    currentViolationId = violationId;
    document.getElementById('resolveModal').classList.remove('hidden');
}

function closeResolveModal() {
    document.getElementById('resolveModal').classList.add('hidden');
    document.getElementById('resolveForm').reset();
    currentViolationId = null;
}

async function deleteViolation(violationId) {
    if (!confirm('هل أنت متأكد من رغبتك في حذف هذه المخالفة/الإنذار؟\n\nسيتم إرجاع النقاط المخصومة للأعضاء إن وجدت.')) {
        return;
    }

    try {
        const response = await fetch(`/superadmin/violations/${violationId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        const data = await response.json();

        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('error', data.message || 'حدث خطأ أثناء حذف المخالفة');
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('error', 'حدث خطأ في الاتصال بالخادم');
    }
}

function printReport() {
    const currentUrl = new URL(window.location);
    const printUrl = '{{ route("superadmin.violations.print") }}?' + currentUrl.searchParams.toString();
    window.open(printUrl, '_blank');
}

function showAlert(type, message) {
    const alertClass = {
        'success': 'bg-emerald-500/10 border-emerald-400/25 text-emerald-100',
        'error': 'bg-rose-500/10 border-rose-400/25 text-rose-100',
        'warning': 'bg-amber-500/10 border-amber-400/25 text-amber-100',
        'info': 'bg-cyan-500/10 border-cyan-400/25 text-cyan-100'
    };

    const alert = document.createElement('div');
    alert.className = `fixed top-4 left-1/2 -translate-x-1/2 z-[99999] px-4 py-3 rounded-2xl border ${alertClass[type]} shadow-2xl backdrop-blur-xl max-w-md w-full mx-4`;
    alert.innerHTML = `
        <div class="flex items-start justify-between gap-3">
            <span class="text-sm font-extrabold">${message}</span>
            <button onclick="this.parentElement.parentElement.remove()" class="font-extrabold text-xl leading-none text-white/70 hover:text-white">&times;</button>
        </div>
    `;

    document.body.appendChild(alert);

    setTimeout(() => {
        if (alert.parentNode) alert.parentNode.removeChild(alert);
    }, 5000);
}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.violation-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', updateSelectedViolations);
    });

    const resolveForm = document.getElementById('resolveForm');
    if (resolveForm) {
        resolveForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            if (!currentViolationId) return;

            const formData = new FormData(this);

            try {
                const response = await fetch(`/superadmin/violations/${currentViolationId}/resolve`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: formData
                });

                const data = await response.json();

                if (data.success) {
                    showAlert('success', data.message);
                    closeResolveModal();
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showAlert('error', data.message || 'حدث خطأ أثناء تأكيد المخالفة');
                }
            } catch (error) {
                console.error('Error:', error);
                showAlert('error', 'حدث خطأ في الاتصال بالخادم');
            }
        });
    }
});

document.addEventListener('click', function(event) {
    const eligibleModal = document.getElementById('eligibleMembersModal');
    const resolveModal = document.getElementById('resolveModal');
    const attachmentModal = document.getElementById('attachmentModal');

    if (event.target === eligibleModal) closeEligibleMembersModal();
    if (event.target === resolveModal) closeResolveModal();
    if (event.target === attachmentModal) closeAttachmentModal();
});
</script>
@endpush