@extends('layouts.superadmin')

@section('title', 'إدارة المستخدمين')
@section('page-title', 'إدارة المستخدمين')

@push('styles')
<style>
    /* ===== Socrates/Enterprise micro touches ===== */
    @keyframes pulseScale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
    .animate-pulse-scale { animation: pulseScale 1.2s ease-in-out infinite; }

    .sc-scroll::-webkit-scrollbar{ width:10px; height:10px; }
    .sc-scroll::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius:999px; }
    .sc-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:999px; }
    .sc-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }

    .sc-card{
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
    .sc-card-soft{
        background: rgba(0,0,0,.18);
        border: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
</style>
@endpush

@section('content')
<div class="min-h-screen rtl" dir="rtl"
     style="background:
       radial-gradient(45vmax 45vmax at 115% -10%, rgba(59,130,246,.20) 0, transparent 60%),
       radial-gradient(42vmax 42vmax at -10% 120%, rgba(34,211,238,.16) 0, transparent 60%),
       radial-gradient(34vmax 34vmax at 30% 10%, rgba(168,85,247,.12) 0, transparent 55%),
       linear-gradient(180deg, #020617 0%, #0b1224 45%, #020617 100%);">

    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 py-6 sm:py-8 space-y-6 text-white">

        {{-- HERO --}}
        <section class="relative overflow-hidden rounded-3xl shadow-2xl
                        bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                        border border-sky-500/25">
            <div class="pointer-events-none absolute -top-24 -right-10 w-80 h-80 rounded-full bg-sky-500/16 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-32 -left-16 w-96 h-96 rounded-full bg-indigo-500/14 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 space-y-3">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                    <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-sky-400/20 text-[11px] text-white/85">
                            <span class="inline-flex w-6 h-6 rounded-full bg-gradient-to-br from-sky-500 to-indigo-500 text-white items-center justify-center">
                                <i class="fa-solid fa-users-gear text-[11px]"></i>
                            </span>
                            غرفة الإدارة العليا — إدارة المستخدمين (Enterprise)
                        </div>

                        <h1 class="text-xl sm:text-2xl lg:text-3xl font-extrabold tracking-tight">
                            إدارة المستخدمين
                        </h1>

                        <p class="text-[12px] sm:text-[14px] text-white/70 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-emerald-400 animate-pulse"></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-sky-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-fuchsia-400"></span>
                                كروت Enterprise
                            </span>
                        </div>
                    </div>

                    {{-- CTA --}}
                    <div class="flex flex-col sm:flex-row gap-2">
                        <a href="{{ route('superadmin.users.create') }}"
                           class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-2xl
                                  bg-gradient-to-r from-sky-500/20 to-indigo-500/20 hover:from-sky-500/28 hover:to-indigo-500/28
                                  border border-sky-400/25 text-sky-100 font-extrabold transition shadow-lg shadow-sky-500/10">
                            <i class="fa-solid fa-user-plus text-[12px]"></i>
                            إضافة مستخدم جديد
                        </a>

                        <a href="{{ route('superadmin.users.index') }}"
                           class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-2xl
                                  bg-white/10 hover:bg-white/15 border border-white/15
                                  text-white/90 font-extrabold transition">
                            <i class="fa-solid fa-rotate-left text-[12px]"></i>
                            إزالة الفلاتر
                        </a>
                    </div>
                </div>
            </div>
        </section>

        {{-- إحصائيات سريعة --}}
        <section class="sc-card rounded-3xl shadow-xl p-4 sm:p-6">
            <div class="flex items-center justify-between gap-3 mb-4">
                <div>
                    <h2 class="text-base sm:text-lg font-extrabold">📊 إحصائيات سريعة</h2>
                    <p class="text-[11px] sm:text-xs text-white/55">نظرة عامة سريعة على حالة المستخدمين.</p>
                </div>
                <div class="text-[11px] text-white/55">
                    عرض {{ $users->total() }} نتيجة
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
                {{-- Card 1 --}}
                <div class="sc-card-soft rounded-2xl p-4 border border-sky-400/20 shadow-lg shadow-sky-500/10 hover:shadow-sky-500/15 transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sky-200 text-[12px] font-bold">إجمالي المستخدمين</p>
                            <p class="text-3xl font-extrabold text-white mt-1">{{ $stats['total_users'] }}</p>
                        </div>
                        <div class="p-3 rounded-2xl bg-sky-500/15 border border-sky-400/20">
                            <svg class="w-6 h-6 text-sky-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-1a4 4 0 11-8 0 4 4 0 018 0z"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                {{-- Card 2 --}}
                <div class="sc-card-soft rounded-2xl p-4 border border-emerald-400/20 shadow-lg shadow-emerald-500/10 hover:shadow-emerald-500/15 transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-emerald-200 text-[12px] font-bold">نشط</p>
                            <p class="text-3xl font-extrabold text-white mt-1">{{ $stats['active_users'] }}</p>
                        </div>
                        <div class="p-3 rounded-2xl bg-emerald-500/15 border border-emerald-400/20">
                            <svg class="w-6 h-6 text-emerald-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                {{-- Card 3 --}}
                <div class="sc-card-soft rounded-2xl p-4 border border-fuchsia-400/20 shadow-lg shadow-fuchsia-500/10 hover:shadow-fuchsia-500/15 transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-fuchsia-200 text-[12px] font-bold">رسمي</p>
                            <p class="text-3xl font-extrabold text-white mt-1">{{ $stats['official_members'] }}</p>
                        </div>
                        <div class="p-3 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/20">
                            <svg class="w-6 h-6 text-fuchsia-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                {{-- Card 4 --}}
                <div class="sc-card-soft rounded-2xl p-4 border border-amber-400/20 shadow-lg shadow-amber-500/10 hover:shadow-amber-500/15 transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-amber-200 text-[12px] font-bold">بيتا</p>
                            <p class="text-3xl font-extrabold text-white mt-1">{{ $stats['beta_members'] }}</p>
                        </div>
                        <div class="p-3 rounded-2xl bg-amber-500/15 border border-amber-400/20">
                            <svg class="w-6 h-6 text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                {{-- Card 5 --}}
                <div class="sc-card-soft rounded-2xl p-4 border border-rose-400/20 shadow-lg shadow-rose-500/10 hover:shadow-rose-500/15 transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-rose-200 text-[12px] font-bold">معلق</p>
                            <p class="text-3xl font-extrabold text-white mt-1">{{ $stats['suspended_users'] }}</p>
                        </div>
                        <div class="p-3 rounded-2xl bg-rose-500/15 border border-rose-400/20">
                            <svg class="w-6 h-6 text-rose-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                {{-- Card 6 --}}
                <div class="sc-card-soft rounded-2xl p-4 border border-slate-300/15 shadow-lg shadow-black/20 hover:shadow-black/30 transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-white/70 text-[12px] font-bold">المغادرون</p>
                            <p class="text-3xl font-extrabold text-white mt-1">{{ $stats['left_users'] }}</p>
                        </div>
                        <div class="p-3 rounded-2xl bg-white/10 border border-white/12">
                            <svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- شريط البحث والفلاتر (نفس الفورم — ستايل Enterprise) --}}
        <section class="sc-card rounded-3xl shadow-xl p-5 sm:p-6">
            <div class="flex items-center justify-between gap-3 mb-4">
                <div>
                    <h2 class="text-base sm:text-lg font-extrabold">🎛️ البحث والفلاتر</h2>
                    <p class="text-[11px] sm:text-xs text-white/55">فلترة متقدمة حسب التواجد/الدور/العضوية/حالة الحساب.</p>
                </div>
                <div class="text-[11px] text-white/55">
                    نصيحة: اكتب جزء من الاسم أو الإيميل.
                </div>
            </div>

            <form method="GET" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-6 gap-4">
                    {{-- البحث --}}
                    <div class="md:col-span-2">
                        <div class="relative">
                            <span class="absolute inset-y-0 right-3 flex items-center text-white/40 pointer-events-none">
                                <i class="fa-solid fa-magnifying-glass text-[12px]"></i>
                            </span>
                            <input type="text"
                                   name="search"
                                   value="{{ request('search') }}"
                                   placeholder="البحث في المستخدمين..."
                                   class="w-full pr-10 pl-4 py-2.5 rounded-2xl
                                          bg-black/30 border border-white/12
                                          text-white placeholder:text-white/30
                                          focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition">
                        </div>
                    </div>

                    {{-- حالة التواجد --}}
                    <div>
                        <select name="team_status"
                                class="w-full py-2.5 px-3 rounded-2xl
                                       bg-black/30 border border-white/12 text-white
                                       focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition">
                            <option value="">حالة التواجد</option>
                            <option value="present" {{ request('team_status') == 'present' ? 'selected' : '' }}>المتواجدون</option>
                            <option value="left" {{ request('team_status') == 'left' ? 'selected' : '' }}>المغادرون</option>
                        </select>
                    </div>

                    {{-- فلتر الدور --}}
                    <div>
                        <select name="role"
                                class="w-full py-2.5 px-3 rounded-2xl
                                       bg-black/30 border border-white/12 text-white
                                       focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition">
                            <option value="">جميع الأدوار</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->name }}" {{ request('role') == $role->name ? 'selected' : '' }}>
                                    {{ $role->name == 'super-admin' ? 'إدارة عليا' :
                                       ($role->name == 'advisor' ? 'مستشار' :
                                       ($role->name == 'moderator' ? 'مشرف' :
                                       ($role->name == 'official-member' ? 'عضو رسمي' : 'عضو بيتا'))) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- فلتر العضوية --}}
                    <div>
                        <select name="membership_status"
                                class="w-full py-2.5 px-3 rounded-2xl
                                       bg-black/30 border border-white/12 text-white
                                       focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition">
                            <option value="">جميع الأعضاء</option>
                            <option value="official" {{ request('membership_status') == 'official' ? 'selected' : '' }}>رسمي</option>
                            <option value="beta" {{ request('membership_status') == 'beta' ? 'selected' : '' }}>بيتا</option>
                        </select>
                    </div>

                    {{-- فلتر الحالة --}}
                    <div>
                        <select name="account_status"
                                class="w-full py-2.5 px-3 rounded-2xl
                                       bg-black/30 border border-white/12 text-white
                                       focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition">
                            <option value="">جميع الحالات</option>
                            <option value="active" {{ request('account_status') == 'active' ? 'selected' : '' }}>نشط</option>
                            <option value="suspended" {{ request('account_status') == 'suspended' ? 'selected' : '' }}>معلق</option>
                            <option value="banned" {{ request('account_status') == 'banned' ? 'selected' : '' }}>محظور</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pt-1">
                    <div class="flex gap-2">
                        <button type="submit"
                                class="bg-gradient-to-r from-sky-500/20 to-indigo-500/20 hover:from-sky-500/28 hover:to-indigo-500/28
                                       text-white px-6 py-2.5 rounded-2xl transition flex items-center gap-2
                                       border border-sky-400/25 shadow-lg shadow-sky-500/10">
                            <i class="fa-solid fa-magnifying-glass text-[12px]"></i>
                            <span class="font-extrabold">بحث</span>
                        </button>

                        <a href="{{ route('superadmin.users.index') }}"
                           class="bg-white/10 hover:bg-white/15 text-white px-6 py-2.5 rounded-2xl transition
                                  border border-white/15 font-extrabold">
                            إزالة الفلاتر
                        </a>
                    </div>

                    <div class="text-[12px] text-white/55">
                        عرض {{ $users->total() }} نتيجة
                    </div>
                </div>
            </form>
        </section>

        {{-- شريط الإجراءات --}}
        <section class="sc-card rounded-3xl shadow-xl p-4 sm:p-5">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <a href="{{ route('superadmin.users.create') }}"
                       class="bg-gradient-to-r from-sky-500/20 to-indigo-500/20 hover:from-sky-500/28 hover:to-indigo-500/28
                              text-white px-5 py-2.5 rounded-2xl transition flex items-center gap-2
                              border border-sky-400/25 shadow-lg shadow-sky-500/10 font-extrabold">
                        <i class="fa-solid fa-user-plus text-[12px]"></i>
                        <span>إضافة مستخدم جديد</span>
                    </a>
                </div>
            </div>
        </section>

        {{-- عرض المستخدمين بنظام الكاردات (نفس منطقك — ستايل ملحمي) --}}
        <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($users as $user)
                <div class="relative overflow-hidden rounded-3xl sc-card shadow-xl hover:shadow-2xl transition-all duration-300 group">
                    {{-- Header --}}
                    <div class="relative h-32 bg-gradient-to-br from-sky-500/25 via-indigo-500/20 to-fuchsia-500/15 border-b border-white/10">
                        <div class="pointer-events-none absolute -top-10 -right-10 w-44 h-44 rounded-full bg-sky-500/14 blur-3xl"></div>
                        <div class="pointer-events-none absolute -bottom-16 -left-10 w-52 h-52 rounded-full bg-indigo-500/14 blur-3xl"></div>

                        {{-- badges --}}
                        <div class="absolute top-4 left-4 flex gap-2">
                            @if($user->isLeft)
                                <span class="px-3 py-1 text-[11px] font-extrabold rounded-full bg-rose-500/20 border border-rose-400/25 text-rose-100">
                                    مغادر
                                </span>
                            @endif
                            @if($user->account_status === 'suspended')
                                <span class="px-3 py-1 text-[11px] font-extrabold rounded-full bg-amber-500/20 border border-amber-400/25 text-amber-100">
                                    معلق
                                </span>
                            @endif
                            @if($user->account_status === 'banned')
                                <span class="px-3 py-1 text-[11px] font-extrabold rounded-full bg-rose-500/20 border border-rose-400/25 text-rose-100">
                                    محظور
                                </span>
                            @endif
                        </div>

                        {{-- Avatar --}}
                        <div class="absolute -bottom-12 right-6">
                            <div class="relative">
                                <img class="w-24 h-24 rounded-2xl object-cover border-4 border-slate-950/70 shadow-2xl"
                                     src="{{ $user->avatar_url }}"
                                     alt="{{ $user->name }}">
                                @if($user->is_online)
                                    <div class="absolute -bottom-1 -left-1 w-5 h-5 bg-emerald-400 border-4 border-slate-950/80 rounded-full animate-pulse-scale"></div>
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- Body --}}
                    <div class="pt-16 px-6 pb-6">
                        <div class="mb-4">
                            <h3 class="text-xl font-extrabold text-white mb-1">{{ $user->name }}</h3>
                            <p class="text-sm text-white/60">{{ $user->email }}</p>
                            @if($user->username)
                                <p class="text-xs text-white/40 mt-1">{{ $user->username }}</p>
                            @endif
                        </div>

                        {{-- Roles --}}
                        <div class="mb-4 flex flex-wrap gap-2">
                            @foreach($user->roles as $role)
                                <span class="inline-flex px-3 py-1 text-[11px] font-extrabold rounded-full border
                                    @switch($role->name)
                                        @case('super-admin')
                                            bg-rose-500/15 border-rose-400/20 text-rose-100
                                        @break
                                        @case('advisor')
                                            bg-fuchsia-500/15 border-fuchsia-400/20 text-fuchsia-100
                                        @break
                                        @case('moderator')
                                            bg-sky-500/15 border-sky-400/20 text-sky-100
                                        @break
                                        @case('official-member')
                                            bg-emerald-500/15 border-emerald-400/20 text-emerald-100
                                        @break
                                        @default
                                            bg-white/10 border-white/15 text-white/90
                                    @endswitch">
                                    {{ $role->name == 'super-admin' ? 'إدارة عليا' :
                                       ($role->name == 'advisor' ? 'مستشار' :
                                       ($role->name == 'moderator' ? 'مشرف' :
                                       ($role->name == 'official-member' ? 'عضو رسمي' : 'عضو بيتا'))) }}
                                </span>
                            @endforeach
                        </div>

                        {{-- Stats --}}
                        <div class="grid grid-cols-2 gap-3 mb-4">
                            <div class="rounded-2xl bg-black/25 border border-white/10 p-3">
                                <p class="text-[11px] text-white/50 mb-1">النقاط</p>
                                <p class="text-lg font-extrabold text-white">{{ number_format($user->total_points) }}</p>
                            </div>
                            <div class="rounded-2xl bg-black/25 border border-white/10 p-3">
                                <p class="text-[11px] text-white/50 mb-1">العضوية</p>
                                <p class="text-sm font-extrabold {{ $user->membership_status === 'official' ? 'text-emerald-300' : 'text-amber-300' }}">
                                    {{ $user->membership_status === 'official' ? 'رسمي' : 'بيتا' }}
                                </p>
                            </div>
                        </div>

                        {{-- Last activity --}}
                        @if($user->last_activity)
                            <div class="mb-4 text-[11px] text-white/55 flex items-center gap-2">
                                <i class="fa-regular fa-clock"></i>
                                <span>آخر نشاط: {{ $user->last_activity->diffForHumans() }}</span>
                            </div>
                        @endif

                        {{-- Actions --}}
                        <div class="flex items-center justify-between pt-4 border-t border-white/10">
                            <div class="flex items-center gap-2">
                                <a href="{{ route('superadmin.users.show', $user) }}"
                                   class="p-2 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 transition"
                                   title="عرض التفاصيل">
                                    <i class="fa-regular fa-eye text-sky-200"></i>
                                </a>

                                <a href="{{ route('superadmin.users.report', $user) }}"
                                   class="p-2 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 transition"
                                   title="تحميل تقرير {{ $user->isLeft ? 'المغادر' : 'العضو' }}">
                                    <i class="fa-regular fa-file-lines text-indigo-200"></i>
                                </a>

                                <a href="{{ route('superadmin.users.edit', $user) }}"
                                   class="p-2 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 transition"
                                   title="تعديل">
                                    <i class="fa-regular fa-pen-to-square text-amber-200"></i>
                                </a>

                                @if(!$user->isLeft)
                                    <button onclick="showMarkAsLeftModal({{ $user->id }}, '{{ $user->name }}')"
                                            class="p-2 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 transition"
                                            title="تسجيل كمغادر">
                                        <i class="fa-solid fa-right-from-bracket text-white/80"></i>
                                    </button>
                                @else
                                    <button onclick="reintegrateUser({{ $user->id }}, '{{ $user->name }}')"
                                            class="p-2 rounded-2xl bg-emerald-500/10 hover:bg-emerald-500/15 border border-emerald-400/20 transition"
                                            title="إعادة للفريق">
                                        <i class="fa-solid fa-right-to-bracket text-emerald-200"></i>
                                    </button>
                                @endif
                            </div>

                            <div class="flex items-center gap-2">
                                @if(!$user->hasRole('super-admin'))
                                    <button onclick="toggleUserStatus({{ $user->id }}, '{{ $user->account_status }}')"
                                            class="p-2 rounded-2xl border transition
                                                   {{ $user->account_status === 'active'
                                                        ? 'bg-rose-500/10 hover:bg-rose-500/15 border-rose-400/20'
                                                        : 'bg-emerald-500/10 hover:bg-emerald-500/15 border-emerald-400/20' }}"
                                            title="{{ $user->account_status === 'active' ? 'تعليق الحساب' : 'تفعيل الحساب' }}">
                                        @if($user->account_status === 'active')
                                            <i class="fa-solid fa-user-slash text-rose-200"></i>
                                        @else
                                            <i class="fa-solid fa-user-check text-emerald-200"></i>
                                        @endif
                                    </button>

                                    <button onclick="deleteUser({{ $user->id }}, '{{ $user->name }}')"
                                            class="p-2 rounded-2xl bg-rose-500/10 hover:bg-rose-500/15 border border-rose-400/20 transition"
                                            title="حذف">
                                        <i class="fa-regular fa-trash-can text-rose-200"></i>
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-span-full">
                    <div class="sc-card rounded-3xl shadow-xl p-12 text-center">
                        <div class="w-14 h-14 mx-auto rounded-2xl bg-white/10 border border-white/15 grid place-items-center mb-4">
                            <i class="fa-regular fa-face-frown text-white/60 text-xl"></i>
                        </div>
                        <p class="text-xl font-extrabold text-white/85 mb-2">لم يتم العثور على مستخدمين</p>
                        <p class="text-sm text-white/55">جرب تغيير معايير البحث أو إضافة مستخدم جديد</p>
                    </div>
                </div>
            @endforelse
        </section>

        {{-- Pagination --}}
        @if($users->hasPages())
            <section class="sc-card rounded-3xl shadow-xl p-4">
                {{ $users->links('pagination::tailwind') }}
            </section>
        @endif

    </div>
</div>

<!-- Modal تسجيل المغادرة (نفسه، بس ستايل Socrates) -->
<div id="markAsLeftModal" class="fixed inset-0 hidden items-center justify-center z-50">
    <div class="absolute inset-0 bg-black/70 backdrop-blur-xl" onclick="hideMarkAsLeftModal()"></div>

    <div class="relative max-w-md w-full mx-4 rounded-3xl sc-card shadow-2xl p-6">
        <div class="flex items-center gap-3 mb-4">
            <div class="w-11 h-11 rounded-2xl bg-rose-500/12 border border-rose-400/20 grid place-items-center text-rose-200">
                <i class="fa-solid fa-triangle-exclamation"></i>
            </div>
            <div>
                <div class="text-[11px] text-white/55">إجراء إداري</div>
                <h3 class="text-lg font-extrabold text-white">تسجيل المستخدم كمغادر للفريق</h3>
            </div>
        </div>

        <form id="markAsLeftForm" method="POST">
            @csrf
            <div class="space-y-4">
                <p class="text-white/70 text-sm">
                    هل أنت متأكد من تسجيل <span id="userNameToLeave" class="font-extrabold text-white"></span> كمغادر للفريق؟
                </p>

                <div>
                    <label class="block text-[11px] font-extrabold text-white/60 mb-2">سبب المغادرة (اختياري)</label>
                    <textarea name="left_reason" rows="3"
                              class="w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/12
                                     text-white placeholder:text-white/30
                                     focus:outline-none focus:ring-2 focus:ring-rose-500/40 focus:border-rose-500/35"
                              placeholder="سبب مغادرة العضو للفريق..."></textarea>
                </div>
            </div>

            <div class="flex gap-3 mt-6">
                <button type="submit"
                        class="flex-1 bg-rose-500/15 hover:bg-rose-500/20 border border-rose-400/20
                               text-rose-100 font-extrabold px-4 py-2.5 rounded-2xl transition">
                    تسجيل كمغادر
                </button>

                <button type="button" onclick="hideMarkAsLeftModal()"
                        class="flex-1 bg-white/10 hover:bg-white/15 border border-white/15
                               text-white/90 font-extrabold px-4 py-2.5 rounded-2xl transition">
                    إلغاء
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Scripts (كما هو عندك بدون تغيير) -->
<script>
function showMarkAsLeftModal(userId, userName) {
    document.getElementById('userNameToLeave').textContent = userName;
    document.getElementById('markAsLeftForm').action = `/superadmin/users/${userId}/mark-as-left`;
    document.getElementById('markAsLeftModal').classList.remove('hidden');
    document.getElementById('markAsLeftModal').classList.add('flex');
}

function hideMarkAsLeftModal() {
    document.getElementById('markAsLeftModal').classList.add('hidden');
    document.getElementById('markAsLeftModal').classList.remove('flex');
}

function reintegrateUser(userId, userName) {
    if (confirm(`هل أنت متأكد من إعادة ${userName} إلى الفريق؟`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/superadmin/users/${userId}/reintegrate`;
        form.innerHTML = `<input type="hidden" name="_token" value="{{ csrf_token() }}">`;
        document.body.appendChild(form);
        form.submit();
    }
}

function toggleUserStatus(userId, currentStatus) {
    const newStatus = currentStatus === 'active' ? 'معلق' : 'نشط';
    if (confirm(`هل تريد تغيير حالة المستخدم إلى ${newStatus}؟`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/superadmin/users/${userId}/toggle-status`;
        form.innerHTML = `<input type="hidden" name="_token" value="{{ csrf_token() }}">`;
        document.body.appendChild(form);
        form.submit();
    }
}

function deleteUser(userId, userName) {
    if (confirm(`هل أنت متأكد من حذف المستخدم "${userName}"؟\nهذا الإجراء لا يمكن التراجع عنه.`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/superadmin/users/${userId}`;
        form.innerHTML = `
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="_method" value="DELETE">
        `;
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endsection