@extends('layouts.superadmin')

@section('title', 'إدارة التكريمات والمكافآت')

@section('content')

<div class="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 dark:from-gray-950 dark:via-gray-900 dark:to-slate-950 relative overflow-hidden">
    <!-- Fancy Background (خرافي بس بدون مكتبات) -->
    <div class="pointer-events-none absolute -top-24 -right-24 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-24 -left-24 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 relative">
        <!-- Page Header (نفسه كما هو عندك) -->
        <div class="mb-6">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">إدارة التكريمات والمكافآت</h1>
                    <p class="text-gray-600 dark:text-gray-400">إنشاء وإدارة تكريمات ومكافآت الأعضاء</p>
                </div>
                <div class="flex flex-col sm:flex-row gap-2">
                    <button onclick="openCreateModal()"
                            class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 shadow-sm">
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                        إضافة تكريم/مكافأة
                    </button>
                    <a href="{{ route('superadmin.honors-rewards.print', request()->query()) }}"
                       target="_blank"
                       class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition duration-200 shadow-sm">
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
                        </svg>
                        طباعة
                    </a>
                </div>
            </div>
        </div>

        <!-- ✅ Socrates Navigator + Slides + شرح -->
        <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
            <div class="p-6">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                    <div>
                        <h2 class="text-lg font-bold text-gray-900 dark:text-white">🧠 ستايل سقراط (سلايدات ذكية)</h2>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                            بدل ما تتوه بين كل الأقسام… امشي بالخطوات:
                            <span class="font-semibold">إحصائيات</span> → <span class="font-semibold">فلترة</span> → <span class="font-semibold">استعراض</span>
                        </p>
                    </div>

                    <div class="flex items-center gap-2">
                        <button id="hrPrevBtn"
                                type="button"
                                class="px-4 py-2 rounded-lg bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white transition">
                            السابق
                        </button>
                        <button id="hrNextBtn"
                                type="button"
                                class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition shadow-sm">
                            التالي
                        </button>
                    </div>
                </div>

                <!-- Progress -->
                <div class="mt-5 flex items-center gap-3">
                    <div class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                        <div id="hrProgressBar" class="h-full w-1/3 bg-gradient-to-r from-blue-600 via-cyan-500 to-emerald-500 transition-all duration-300"></div>
                    </div>
                    <div id="hrProgressText" class="text-xs font-medium text-gray-700 dark:text-gray-300">1/3</div>
                </div>

                <!-- Steps -->
                <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-3">
                    <button type="button" data-step="1"
                            class="hrStepBtn px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white hover:shadow-sm transition text-right">
                        <div class="text-xs text-gray-500 dark:text-gray-400">خطوة 1</div>
                        <div class="font-semibold">الإحصائيات</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">شو الصورة العامة؟</div>
                    </button>

                    <button type="button" data-step="2"
                            class="hrStepBtn px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white hover:shadow-sm transition text-right">
                        <div class="text-xs text-gray-500 dark:text-gray-400">خطوة 2</div>
                        <div class="font-semibold">الفلترة</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">مين؟ متى؟ شو النوع؟</div>
                    </button>

                    <button type="button" data-step="3"
                            class="hrStepBtn px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white hover:shadow-sm transition text-right">
                        <div class="text-xs text-gray-500 dark:text-gray-400">خطوة 3</div>
                        <div class="font-semibold">الاستعراض</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">كروت أو جدول</div>
                    </button>
                </div>

                <!-- Socratic Q/A (شرح داخل الصفحة) -->
                <div class="mt-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
                    <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40">
                        <div class="text-sm font-semibold text-gray-900 dark:text-white">لماذا نكرّم؟</div>
                        <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                            حتى نثبت السلوك الصح ونحفّز الباقي… مش بس “شكل”.
                        </div>
                    </div>
                    <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40">
                        <div class="text-sm font-semibold text-gray-900 dark:text-white">من يستحق؟</div>
                        <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                            اللي عنده أثر واضح + سبب موثّق + مستلمين محددين.
                        </div>
                    </div>
                    <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40">
                        <div class="text-sm font-semibold text-gray-900 dark:text-white">كيف نضمن العدالة؟</div>
                        <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                            فلترة حسب النوع/المنشئ/التاريخ + سبب مكتوب.
                        </div>
                    </div>
                    <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40">
                        <div class="text-sm font-semibold text-gray-900 dark:text-white">كيف تراجع بسرعة؟</div>
                        <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                            استخدم “الجدول” للمقارنة، و“الكروت” للتفاصيل.
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- ✅ SLIDE 1: Statistics Cards (نفس بلوكك) -->
        <section id="hr-slide-1" class="hr-slide">
            <!-- Statistics Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-6">
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
                    <div class="flex items-center">
                        <div class="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg ml-3">
                            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['total'] }}</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">الإجمالي</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
                    <div class="flex items-center">
                        <div class="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg ml-3">
                            <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['honors'] }}</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">التكريمات</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
                    <div class="flex items-center">
                        <div class="p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg ml-3">
                            <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['rewards'] }}</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">المكافآت</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
                    <div class="flex items-center">
                        <div class="p-2 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg ml-3">
                            <svg class="w-6 h-6 text-emerald-600 dark:text-emerald-400" 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>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['active'] }}</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">نشط</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
                    <div class="flex items-center">
                        <div class="p-2 bg-gray-50 dark:bg-gray-700 rounded-lg ml-3">
                            <svg class="w-6 h-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['completed'] }}</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">مكتمل</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ✅ SLIDE 2: Filters Section (نفس بلوكك) -->
        <section id="hr-slide-2" class="hr-slide hidden">
            <!-- Filters Section -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-6 border border-gray-200 dark:border-gray-700">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">البحث والفلترة</h3>
                </div>
                <div class="p-6">
                    <form method="GET" action="{{ route('superadmin.honors-rewards.index') }}" class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <!-- Search -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">البحث</label>
                                <input type="text"
                                       name="search"
                                       value="{{ request('search') }}"
                                       placeholder="ابحث في العنوان أو السبب..."
                                       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            </div>

                            <!-- Type Filter -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">النوع</label>
                                <select name="type"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                    <option value="">جميع الأنواع</option>
                                    <option value="honor" {{ request('type') === 'honor' ? 'selected' : '' }}>تكريم</option>
                                    <option value="reward" {{ request('type') === 'reward' ? 'selected' : '' }}>مكافأة</option>
                                </select>
                            </div>

                            <!-- Creator Filter -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">المنشئ</label>
                                <select name="creator"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                    <option value="">جميع المنشئين</option>
                                    @foreach($creators as $creator)
                                        <option value="{{ $creator->id }}" {{ request('creator') == $creator->id ? 'selected' : '' }}>
                                            {{ $creator->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- Date From -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">من تاريخ</label>
                                <input type="date"
                                       name="date_from"
                                       value="{{ request('date_from') }}"
                                       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            </div>

                            <!-- Date To -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">إلى تاريخ</label>
                                <input type="date"
                                       name="date_to"
                                       value="{{ request('date_to') }}"
                                       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            </div>
                        </div>

                        <div class="flex flex-col sm:flex-row gap-2">
                            <button type="submit"
                                    class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200">
                                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                </svg>
                                تطبيق الفلاتر
                            </button>
                            <a href="{{ route('superadmin.honors-rewards.index') }}"
                               class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                                </svg>
                                إعادة تعيين
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </section>

        <!-- ✅ SLIDE 3: View Toggle + Cards + Table + Pagination -->
        <section id="hr-slide-3" class="hr-slide hidden">

            <!-- Toggle (مضاف بدون ما ألمس كروتك الأصلية) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 border border-gray-200 dark:border-gray-700">
                <div class="px-6 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">الاستعراض</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">بدّل بين الكروت والجدول حسب احتياجك.</p>
                    </div>

                    <div class="inline-flex rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
                        <button id="hrViewCardsBtn" type="button"
                                class="px-4 py-2 bg-blue-600 text-white text-sm font-medium">
                            كروت
                        </button>
                        <button id="hrViewTableBtn" type="button"
                                class="px-4 py-2 bg-white dark:bg-gray-800 text-gray-800 dark:text-white text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                            جدول
                        </button>
                    </div>
                </div>
            </div>

            <!-- Data Cards (نفس كودك حرفياً + فقط أضفت id للعرض) -->
            <div id="hrCardsView" class="space-y-4">
                @forelse($honorsRewards as $item)
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow duration-200">
                        <div class="p-6">
                            <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                                <!-- Main Info -->
                                <div class="flex-1">
                                    <div class="flex items-start gap-4">
                                        <div class="p-3 rounded-lg {{ $item->type === 'honor' ? 'bg-green-50 dark:bg-green-900/20' : 'bg-yellow-50 dark:bg-yellow-900/20' }}">
                                            @if($item->type === 'honor')
                                                <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" clip-rule="evenodd"></path>
                                                </svg>
                                            @else
                                                <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                                                </svg>
                                            @endif
                                        </div>
                                        <div class="flex-1">
                                            <div class="flex items-center gap-2 mb-2">
                                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ $item->title }}</h3>
                                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $item->type === 'honor' ? 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-200' }}">
                                                    {{ $item->type_text }}
                                                </span>
                                            </div>
                                            <p class="text-gray-600 dark:text-gray-400 mb-2">{{ Str::limit($item->reason, 150) }}</p>
                                            <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                                                <span class="flex items-center">
                                                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                                    </svg>
                                                    {{ $item->creator->name }}
                                                </span>
                                                <span class="flex items-center">
                                                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                                    </svg>
                                                    {{ $item->recipients_count }} مستلم
                                                </span>
                                                <span class="flex items-center">
                                                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3a2 2 0 012-2h4a2 2 0 012 2v4m-6 0V19a2 2 0 002 2h4a2 2 0 002-2V7m-6 0h6"></path>
                                                    </svg>
                                                    {{ $item->created_at->format('Y/m/d') }}
                                                </span>
                                                @if($item->points_amount)
                                                    <span class="flex items-center">
                                                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" clip-rule="evenodd"></path>
                                                        </svg>
                                                        {{ $item->points_amount }} نقطة
                                                    </span>
                                                @endif
                                                @if($item->rank)
                                                    <span class="flex items-center">
                                                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                                        </svg>
                                                        {{ $item->rank->name }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--  Actions -->
                                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
                                    <div class="flex items-center gap-2">
                                        <a href="{{ route('superadmin.honors-rewards.show', $item) }}"
                                           class="inline-flex items-center px-3 py-1.5 bg-blue-100 hover:bg-blue-200 text-blue-700 text-sm font-medium rounded-md transition duration-200">
                                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                            </svg>
                                            عرض
                                        </a>

                                        <button onclick="openEditModal({{ $item->id }})"
                                                class="inline-flex items-center px-3 py-1.5 bg-yellow-100 hover:bg-yellow-200 text-yellow-700 text-sm font-medium rounded-md transition duration-200">
                                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                            </svg>
                                            تعديل
                                        </button>

                                        <button onclick="confirmDelete({{ $item->id }}, '{{ $item->title }}')"
                                                class="inline-flex items-center px-3 py-1.5 bg-red-100 hover:bg-red-200 text-red-700 text-sm font-medium rounded-md transition duration-200">
                                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                            </svg>
                                            حذف
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-12">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">لا توجد تكريمات أو مكافآت</h3>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">ابدأ بإنشاء أول تكريم أو مكافأة</p>
                        <div class="mt-6">
                            <button onclick="openCreateModal()"
                                    class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200">
                                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                </svg>
                                إضافة تكريم/مكافأة
                            </button>
                        </div>
                    </div>
                @endforelse
            </div>

            <!-- ✅ TABLE VIEW (مضاف جديد) -->
            <div id="hrTableView" class="hidden">
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-900/40">
                            <tr>
                                <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">العنوان</th>
                                <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">النوع</th>
                                <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">المنشئ</th>
                                <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">المستلمون</th>
                                <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">النقاط</th>
                                <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">الرتبة</th>
                                <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">التاريخ</th>
                                <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">إجراءات</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            @forelse($honorsRewards as $item)
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition">
                                    <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                                        {{ $item->title }}
                                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                            {{ Str::limit($item->reason, 70) }}
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 text-sm">
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
                                            {{ $item->type === 'honor'
                                                ? 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200'
                                                : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-200' }}">
                                            {{ $item->type_text }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
                                        {{ $item->creator->name }}
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
                                        {{ $item->recipients_count }}
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
                                        {{ $item->points_amount ?: '—' }}
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
                                        {{ $item->rank ? $item->rank->name : '—' }}
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
                                        {{ $item->created_at->format('Y/m/d') }}
                                    </td>
                                    <td class="px-4 py-3 text-sm">
                                        <div class="flex items-center gap-2">
                                            <a href="{{ route('superadmin.honors-rewards.show', $item) }}"
                                               class="inline-flex items-center px-3 py-1.5 bg-blue-100 hover:bg-blue-200 text-blue-700 text-xs font-medium rounded-md transition duration-200">
                                                عرض
                                            </a>
                                            <button onclick="openEditModal({{ $item->id }})"
                                                    class="inline-flex items-center px-3 py-1.5 bg-yellow-100 hover:bg-yellow-200 text-yellow-700 text-xs font-medium rounded-md transition duration-200">
                                                تعديل
                                            </button>
                                            <button onclick="confirmDelete({{ $item->id }}, '{{ $item->title }}')"
                                                    class="inline-flex items-center px-3 py-1.5 bg-red-100 hover:bg-red-200 text-red-700 text-xs font-medium rounded-md transition duration-200">
                                                حذف
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
                                        لا توجد بيانات لعرضها.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Pagination (نفسه كما هو عندك) -->
            @if($honorsRewards->hasPages())
                <div class="mt-6">
                    {{ $honorsRewards->links() }}
                </div>
            @endif

        </section>

    </div>
</div>

<!-- ✅ Create Modal (Wizard Slides + Progress + Summary) -->
<div id="createModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeCreateModal()"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>

        <div class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">

            <!-- Header + Progress -->
            <div class="relative overflow-hidden px-4 sm:px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white">
                <div class="pointer-events-none absolute -top-16 -right-10 w-64 h-64 rounded-full bg-blue-500/15 blur-3xl"></div>
                <div class="pointer-events-none absolute -bottom-16 -left-10 w-64 h-64 rounded-full bg-cyan-400/10 blur-3xl"></div>

                <div class="relative flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <div class="text-xs text-white/70 mb-1">إضافة تكريم/مكافأة</div>
                        <h3 class="text-lg sm:text-xl font-extrabold tracking-tight">
                            فورم سلايدات + بروغريس
                        </h3>
                        <p class="text-[11px] sm:text-xs text-white/70 mt-1">
                            امشِ خطوة خطوة وبالنهاية اعمل إنشاء ✅
                        </p>
                    </div>

                    <span id="createWizardStepCounter"
                          class="flex-shrink-0 text-xs font-extrabold px-2.5 py-1 rounded-full bg-white/10 border border-white/15">
                        1/3
                    </span>
                </div>

                <div class="relative mt-4 grid grid-cols-3 gap-2">
                    <button type="button" class="createStepBtn text-right px-3 py-2 rounded-lg border border-white/15 bg-white/5 hover:bg-white/10 transition" data-step="1">
                        <div class="text-[10px] text-white/60">سلايد 1</div>
                        <div class="text-sm font-bold">الأساسيات</div>
                    </button>
                    <button type="button" class="createStepBtn text-right px-3 py-2 rounded-lg border border-white/15 bg-white/5 hover:bg-white/10 transition" data-step="2">
                        <div class="text-[10px] text-white/60">سلايد 2</div>
                        <div class="text-sm font-bold">المستلمون</div>
                    </button>
                    <button type="button" class="createStepBtn text-right px-3 py-2 rounded-lg border border-white/15 bg-white/5 hover:bg-white/10 transition" data-step="3">
                        <div class="text-[10px] text-white/60">سلايد 3</div>
                        <div class="text-sm font-bold">التفاصيل</div>
                    </button>
                </div>

                <div class="relative mt-3 h-2 bg-white/10 rounded-full overflow-hidden border border-white/10">
                    <div id="createWizardProgress"
                         class="h-full w-1/3 bg-gradient-to-r from-blue-500 via-cyan-400 to-emerald-300 transition-all duration-300"></div>
                </div>
            </div>

            <!-- Body -->
            <div class="px-4 sm:px-6 pt-5 pb-4">
                <form id="createForm">
                    @csrf

                    <!-- ===== Slide 1 ===== -->
                    <div class="create-slide space-y-6" data-create-slide="1">
                        <!-- Type Selection -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                                نوع العملية <span class="text-red-500">*</span>
                            </label>
                            <div class="grid grid-cols-2 gap-4">
                                <button type="button" onclick="selectCreateType('honor')"
                                        class="create-type-btn flex items-center justify-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 transition duration-200"
                                        data-type="honor">
                                    <div class="text-center">
                                        <svg class="w-8 h-8 text-green-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" clip-rule="evenodd"></path>
                                        </svg>
                                        <span class="text-sm font-medium">تكريم</span>
                                        <p class="text-xs text-gray-500 mt-1">تكريم الأعضاء المتميزين</p>
                                    </div>
                                </button>

                                <button type="button" onclick="selectCreateType('reward')"
                                        class="create-type-btn flex items-center justify-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition duration-200"
                                        data-type="reward">
                                    <div class="text-center">
                                        <svg class="w-8 h-8 text-yellow-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                                        </svg>
                                        <span class="text-sm font-medium">مكافأة</span>
                                        <p class="text-xs text-gray-500 mt-1">منح مكافآت للأعضاء</p>
                                    </div>
                                </button>
                            </div>
                            <input type="hidden" id="createSelectedType" name="type">
                            <div id="create-type-error" class="text-red-500 text-sm mt-1 hidden"></div>
                        </div>

                        <!-- Title -->
                        <div>
                            <label for="createTitle" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                العنوان <span class="text-red-500">*</span>
                            </label>
                            <input type="text"
                                   id="createTitle"
                                   name="title"
                                   required
                                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                   placeholder="أدخل عنوان التكريم أو المكافأة...">
                            <div id="create-title-error" class="text-red-500 text-sm mt-1 hidden"></div>
                        </div>
                    </div>

                    <!-- ===== Slide 2 ===== -->
                    <div class="create-slide space-y-6 hidden" data-create-slide="2">
                        <!-- Recipient Type Selection -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                                اختر فئة المستلمين <span class="text-red-500">*</span>
                            </label>

                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                                <button type="button" onclick="selectCreateRecipientType('all')"
                                        class="create-recipient-type-btn flex flex-col items-center p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition duration-200"
                                        data-type="all">
                                    <span class="text-xs text-center">جميع المستخدمين</span>
                                </button>

                                <button type="button" onclick="selectCreateRecipientType('moderators')"
                                        class="create-recipient-type-btn flex flex-col items-center p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition duration-200"
                                        data-type="moderators">
                                    <span class="text-xs text-center">المشرفين</span>
                                </button>

                                <button type="button" onclick="selectCreateRecipientType('official_members')"
                                        class="create-recipient-type-btn flex flex-col items-center p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition duration-200"
                                        data-type="official_members">
                                    <span class="text-xs text-center">الأعضاء الرسميين</span>
                                </button>

                                <button type="button" onclick="selectCreateRecipientType('beta_members')"
                                        class="create-recipient-type-btn flex flex-col items-center p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-orange-500 hover:bg-orange-50 dark:hover:bg-orange-900/20 transition duration-200"
                                        data-type="beta_members">
                                    <span class="text-xs text-center">أعضاء بيتا</span>
                                </button>
                            </div>

                            <input type="hidden" id="createSelectedRecipientType" name="recipient_type">
                            <div id="create-recipient_type-error" class="text-red-500 text-sm mt-1 hidden"></div>
                        </div>

                        <!-- User Selection -->
                        <div id="createUserSelectionDiv" class="hidden">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                اختر المستلمين <span class="text-red-500">*</span>
                            </label>

                            <!-- Search Input -->
                            <div class="mb-4">
                                <input type="text"
                                       id="create-user-search"
                                       placeholder="ابحث عن المستخدمين..."
                                       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            </div>

                            <!-- Users List -->
                            <div id="create-users-list" class="space-y-2 max-h-64 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-md p-4">
                                <div class="text-sm text-gray-500 dark:text-gray-400 text-center" id="create-no-users-available">
                                    جارِ تحميل المستخدمين...
                                </div>
                            </div>

                            <!-- Selected Count -->
                            <div class="mt-3">
                                <span id="create-selected-count" class="text-sm text-gray-600 dark:text-gray-400">
                                    عدد المحددين: 0
                                </span>
                            </div>

                            <div id="create-users-error" class="text-red-500 text-sm mt-1 hidden"></div>
                        </div>
                    </div>

                    <!-- ===== Slide 3 ===== -->
                    <div class="create-slide space-y-6 hidden" data-create-slide="3">

                        <!-- ✅ Quick Summary -->
                        <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40">
                            <div class="flex items-center justify-between gap-3">
                                <div class="text-sm font-semibold text-gray-900 dark:text-white">
                                    ملخص سريع قبل الإنشاء ✅
                                </div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                    يتحدث تلقائيًا
                                </div>
                            </div>

                            <div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3">
                                <div class="p-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                                    <div class="text-xs text-gray-500 dark:text-gray-400">النوع</div>
                                    <div id="createSummaryType" class="text-sm font-bold text-gray-900 dark:text-white">—</div>
                                </div>

                                <div class="p-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                                    <div class="text-xs text-gray-500 dark:text-gray-400">العنوان</div>
                                    <div id="createSummaryTitle" class="text-sm font-bold text-gray-900 dark:text-white break-words">—</div>
                                </div>

                                <div class="p-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                                    <div class="text-xs text-gray-500 dark:text-gray-400">عدد المستلمين</div>
                                    <div id="createSummaryRecipients" class="text-sm font-bold text-gray-900 dark:text-white">0</div>
                                </div>
                            </div>
                        </div>

                        <!-- Reason -->
                        <div>
                            <label for="createReason" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                سبب التكريم/المكافأة <span class="text-red-500">*</span>
                            </label>
                            <textarea id="createReason"
                                      name="reason"
                                      rows="4"
                                      required
                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                      placeholder="اكتب سبب التكريم أو المكافأة..."></textarea>
                            <div id="create-reason-error" class="text-red-500 text-sm mt-1 hidden"></div>
                        </div>

                        <!-- Points -->
                        <div>
                            <label for="createPointsAmount" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                هل تريد إضافة نقاط؟ (اختياري)
                            </label>
                            <input type="number"
                                   id="createPointsAmount"
                                   name="points_amount"
                                   min="1"
                                   max="1000"
                                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                   placeholder="عدد النقاط...">
                            <div id="create-points_amount-error" class="text-red-500 text-sm mt-1 hidden"></div>
                        </div>

                        <!-- Rank -->
                        <div>
                            <label for="createRankId" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                هل تريد إضافة رتبة؟ (اختياري)
                            </label>
                            <select id="createRankId"
                                    name="rank_id"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">اختر رتبة (اختياري)</option>
                                @foreach($ranks as $rank)
                                    <option value="{{ $rank->id }}">{{ $rank->name }}</option>
                                @endforeach
                            </select>
                            <div id="create-rank_id-error" class="text-red-500 text-sm mt-1 hidden"></div>
                        </div>

                        <!-- Additional Notes -->
                        <div>
                            <label for="createAdditionalNotes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                إذا لديك اقتراح آخر للمكافأة أو التكريم يمكنك كتابته هنا (اختياري)
                            </label>
                            <textarea id="createAdditionalNotes"
                                      name="additional_notes"
                                      rows="3"
                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                      placeholder="اكتب أي اقتراحات أو ملاحظات إضافية..."></textarea>
                            <div id="create-additional_notes-error" class="text-red-500 text-sm mt-1 hidden"></div>
                        </div>
                    </div>

                    <!-- Wizard Actions -->
                    <div class="mt-6 flex flex-col sm:flex-row justify-between items-center gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
                        <button type="button" id="createPrevBtn"
                                class="w-full sm:w-auto inline-flex justify-center items-center px-6 py-3 bg-gray-300 hover:bg-gray-400 text-gray-800 font-medium rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed">
                            السابق
                        </button>

                        <div class="w-full sm:w-auto flex flex-col sm:flex-row gap-3">
                            <button type="button" id="createNextBtn"
                                    class="w-full sm:w-auto inline-flex justify-center items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition">
                                التالي
                            </button>

                            <button type="submit"
                                    id="create-submit-btn"
                                    class="w-full sm:w-auto hidden inline-flex items-center justify-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
                                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span id="create-submit-text">إنشاء التكريم/المكافأة</span>
                            </button>

                            <button type="button" onclick="closeCreateModal()"
                                    class="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                                إلغاء
                            </button>
                        </div>
                    </div>

                </form>
            </div>

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

<!-- Edit Modal (نفسه) -->
<div id="editModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeEditModal()"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>

        <div class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full sm:p-6">
            <div class="mb-4">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                    تعديل التكريم/المكافأة
                </h3>
            </div>

            <form id="editForm" class="space-y-6">
                @csrf
                <input type="hidden" id="editHonorRewardId" name="honor_reward_id">

                <!-- Type Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">نوع العملية <span class="text-red-500">*</span></label>
                    <div class="grid grid-cols-2 gap-4">
                        <button type="button" onclick="selectEditType('honor')"
                                class="edit-type-btn flex items-center justify-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 transition duration-200"
                                data-type="honor">
                            <div class="text-center">
                                <svg class="w-8 h-8 text-green-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="text-sm font-medium">تكريم</span>
                                <p class="text-xs text-gray-500 mt-1">تكريم الأعضاء المتميزين</p>
                            </div>
                        </button>

                        <button type="button" onclick="selectEditType('reward')"
                                class="edit-type-btn flex items-center justify-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition duration-200"
                                data-type="reward">
                            <div class="text-center">
                                <svg class="w-8 h-8 text-yellow-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                                </svg>
                                <span class="text-sm font-medium">مكافأة</span>
                                <p class="text-xs text-gray-500 mt-1">منح مكافآت للأعضاء</p>
                            </div>
                        </button>
                    </div>
                    <input type="hidden" id="editSelectedType" name="type">
                    <div id="edit-type-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Title -->
                <div>
                    <label for="editTitle" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        العنوان <span class="text-red-500">*</span>
                    </label>
                    <input type="text"
                           id="editTitle"
                           name="title"
                           required
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                           placeholder="أدخل عنوان التكريم أو المكافأة...">
                    <div id="edit-title-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Recipient Type Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">اختر فئة المستلمين <span class="text-red-500">*</span></label>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                        <button type="button" onclick="selectEditRecipientType('all')"
                                class="edit-recipient-type-btn flex flex-col items-center p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition duration-200"
                                data-type="all">
                            <svg class="w-6 h-6 text-gray-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                            <span class="text-xs text-center">جميع المستخدمين</span>
                        </button>

                        <button type="button" onclick="selectEditRecipientType('moderators')"
                                class="edit-recipient-type-btn flex flex-col items-center p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition duration-200"
                                data-type="moderators">
                            <svg class="w-6 h-6 text-purple-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                            </svg>
                            <span class="text-xs text-center">المشرفين</span>
                        </button>

                        <button type="button" onclick="selectEditRecipientType('official_members')"
                                class="edit-recipient-type-btn flex flex-col items-center p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition duration-200"
                                data-type="official_members">
                            <svg class="w-6 h-6 text-indigo-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-xs text-center">الأعضاء الرسميين</span>
                        </button>

                        <button type="button" onclick="selectEditRecipientType('beta_members')"
                                class="edit-recipient-type-btn flex flex-col items-center p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-orange-500 hover:bg-orange-50 dark:hover:bg-orange-900/20 transition duration-200"
                                data-type="beta_members">
                            <svg class="w-6 h-6 text-orange-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path>
                            </svg>
                            <span class="text-xs text-center">أعضاء بيتا</span>
                        </button>
                    </div>
                    <input type="hidden" id="editSelectedRecipientType" name="recipient_type">
                    <div id="edit-recipient_type-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- User Selection -->
                <div id="editUserSelectionDiv" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        اختر المستلمين <span class="text-red-500">*</span>
                    </label>

                    <!-- Search Input -->
                    <div class="mb-4">
                        <input type="text"
                               id="edit-user-search"
                               placeholder="ابحث عن المستخدمين..."
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    </div>

                    <!-- Users List -->
                    <div id="edit-users-list" class="space-y-2 max-h-64 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-md p-4">
                        <div class="text-sm text-gray-500 dark:text-gray-400 text-center" id="edit-no-users-available">
                            جارِ تحميل المستخدمين...
                        </div>
                    </div>

                    <!-- Selected Count -->
                    <div class="mt-3">
                        <span id="edit-selected-count" class="text-sm text-gray-600 dark:text-gray-400">
                            عدد المحددين: 0
                        </span>
                    </div>

                    <div id="edit-users-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Reason -->
                <div>
                    <label for="editReason" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        سبب التكريم/المكافأة <span class="text-red-500">*</span>
                    </label>
                    <textarea id="editReason"
                              name="reason"
                              rows="4"
                              required
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                              placeholder="اكتب سبب التكريم أو المكافأة..."></textarea>
                    <div id="edit-reason-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Points -->
                <div>
                    <label for="editPointsAmount" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        هل تريد إضافة نقاط؟ (اختياري)
                    </label>
                    <input type="number"
                           id="editPointsAmount"
                           name="points_amount"
                           min="1"
                           max="1000"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                           placeholder="عدد النقاط...">
                    <div id="edit-points_amount-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Rank -->
                <div>
                    <label for="editRankId" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        هل تريد إضافة رتبة؟ (اختياري)
                    </label>
                    <select id="editRankId"
                            name="rank_id"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        <option value="">اختر رتبة (اختياري)</option>
                        @foreach($ranks as $rank)
                            <option value="{{ $rank->id }}">{{ $rank->name }}</option>
                        @endforeach
                    </select>
                    <div id="edit-rank_id-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Additional Notes -->
                <div>
                    <label for="editAdditionalNotes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        إذا لديك اقتراح آخر للمكافأة أو التكريم يمكنك كتابته هنا (اختياري)
                    </label>
                    <textarea id="editAdditionalNotes"
                              name="additional_notes"
                              rows="3"
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                              placeholder="اكتب أي اقتراحات أو ملاحظات إضافية..."></textarea>
                    <div id="edit-additional_notes-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Form Actions -->
                <div class="flex flex-col sm:flex-row justify-end items-center gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
                    <button type="submit"
                            id="edit-submit-btn"
                            class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span id="edit-submit-text">تحديث التكريم/المكافأة</span>
                    </button>

                    <button type="button" onclick="closeEditModal()"
                            class="inline-flex items-center px-6 py-3 bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium rounded-lg transition duration-200">
                        إلغاء
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal (نفسه) -->
<div id="deleteModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeDeleteModal()"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>

        <div class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-4">
                <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                </svg>
            </div>
            <div class="text-center">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mb-2">تأكيد الحذف</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-4" id="deleteMessage"></p>

                <div class="flex flex-col sm:flex-row-reverse gap-3">
                    <button onclick="executeDelete()"
                            class="inline-flex justify-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition duration-200">
                        نعم، احذف
                    </button>
                    <button onclick="closeDeleteModal()"
                            class="inline-flex justify-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                        إلغاء
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success/Error Alerts (نفسه) -->
<div id="alert-container" class="fixed top-4 right-4 z-[60] space-y-2"></div>

<!-- ✅ JS صغير جديد للسلايدات + التبديل (لا يلمس سكربتك) -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const slides = {
        1: document.getElementById('hr-slide-1'),
        2: document.getElementById('hr-slide-2'),
        3: document.getElementById('hr-slide-3'),
    };

    const stepBtns = Array.from(document.querySelectorAll('.hrStepBtn'));
    const prevBtn = document.getElementById('hrPrevBtn');
    const nextBtn = document.getElementById('hrNextBtn');
    const progressBar = document.getElementById('hrProgressBar');
    const progressText = document.getElementById('hrProgressText');

    const viewCardsBtn = document.getElementById('hrViewCardsBtn');
    const viewTableBtn = document.getElementById('hrViewTableBtn');
    const cardsView = document.getElementById('hrCardsView');
    const tableView = document.getElementById('hrTableView');

    let step = parseInt(localStorage.getItem('HR_STEP') || '1', 10);
    step = Math.max(1, Math.min(3, step));

    function paintStepButtons() {
        stepBtns.forEach(btn => {
            const isActive = parseInt(btn.dataset.step, 10) === step;
            btn.classList.toggle('ring-2', isActive);
            btn.classList.toggle('ring-blue-500', isActive);
            btn.classList.toggle('bg-blue-50', isActive);
            btn.classList.toggle('dark:bg-blue-900/20', isActive);
        });
    }

    function setStep(n) {
        step = Math.max(1, Math.min(3, n));
        Object.keys(slides).forEach(k => {
            const el = slides[k];
            if (!el) return;
            el.classList.toggle('hidden', parseInt(k, 10) !== step);
        });

        const pct = Math.round((step / 3) * 100);
        if (progressBar) progressBar.style.width = pct + '%';
        if (progressText) progressText.textContent = `${step}/3`;

        paintStepButtons();
        localStorage.setItem('HR_STEP', String(step));
    }

    function setView(mode) {
        if (!cardsView || !tableView) return;

        const isCards = mode === 'cards';
        cardsView.classList.toggle('hidden', !isCards);
        tableView.classList.toggle('hidden', isCards);

        viewCardsBtn.classList.toggle('bg-blue-600', isCards);
        viewCardsBtn.classList.toggle('text-white', isCards);
        viewCardsBtn.classList.toggle('bg-white', !isCards);
        viewCardsBtn.classList.toggle('dark:bg-gray-800', !isCards);

        viewTableBtn.classList.toggle('bg-blue-600', !isCards);
        viewTableBtn.classList.toggle('text-white', !isCards);

        localStorage.setItem('HR_VIEW', mode);
    }

    stepBtns.forEach(btn => btn.addEventListener('click', () => setStep(parseInt(btn.dataset.step, 10))));
    prevBtn && prevBtn.addEventListener('click', () => setStep(step - 1));
    nextBtn && nextBtn.addEventListener('click', () => setStep(step + 1));

    viewCardsBtn && viewCardsBtn.addEventListener('click', () => setView('cards'));
    viewTableBtn && viewTableBtn.addEventListener('click', () => setView('table'));

    setStep(step);
    setView(localStorage.getItem('HR_VIEW') || 'cards');

    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowRight') setStep(step + 1);
        if (e.key === 'ArrowLeft') setStep(step - 1);
    });
});
</script>

<!-- ✅ سكربتك الأصلي + (مضاف عليه Wizard Create فقط) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Variables for Create Modal
    let createSelectedUsers = [];
    let createAllUsers = [];
    let createCurrentRecipientType = '';
    let createSearchTimeout;

    // Variables for Edit Modal
    let editSelectedUsers = [];
    let editAllUsers = [];
    let editCurrentRecipientType = '';
    let editSearchTimeout;
    let editItemId = null;

    // Variables for Delete Modal
    let deleteItemId = null;

    // ====== CREATE WIZARD (Slides + Progress + Summary) ======
    let createWizardStep = 1;

    const createWizardSlides = Array.from(document.querySelectorAll('#createModal .create-slide'));
    const createWizardStepBtns = Array.from(document.querySelectorAll('#createModal .createStepBtn'));
    const createWizardStepCounter = document.getElementById('createWizardStepCounter');
    const createWizardProgress = document.getElementById('createWizardProgress');
    const createPrevBtn = document.getElementById('createPrevBtn');
    const createNextBtn = document.getElementById('createNextBtn');
    const createSubmitBtn = document.getElementById('create-submit-btn');

    const createSummaryType = document.getElementById('createSummaryType');
    const createSummaryTitle = document.getElementById('createSummaryTitle');
    const createSummaryRecipients = document.getElementById('createSummaryRecipients');

    function updateCreateSummary() {
        const type = document.getElementById('createSelectedType')?.value || '';
        const title = document.getElementById('createTitle')?.value?.trim() || '';

        const typeText = type === 'honor' ? 'تكريم' : (type === 'reward' ? 'مكافأة' : '—');
        const titleText = title ? title : '—';
        const count = createSelectedUsers.length;

        if (createSummaryType) createSummaryType.textContent = typeText;
        if (createSummaryTitle) createSummaryTitle.textContent = titleText;
        if (createSummaryRecipients) createSummaryRecipients.textContent = String(count);
    }

    function updateCreateWizardUI() {
        createWizardSlides.forEach(slide => {
            const s = parseInt(slide.dataset.createSlide, 10);
            slide.classList.toggle('hidden', s !== createWizardStep);
        });

        createWizardStepBtns.forEach(btn => {
            const s = parseInt(btn.dataset.step, 10);
            const active = s === createWizardStep;
            btn.classList.toggle('ring-2', active);
            btn.classList.toggle('ring-blue-500', active);
            btn.classList.toggle('bg-white/10', active);
        });

        if (createWizardStepCounter) createWizardStepCounter.textContent = `${createWizardStep}/3`;
        if (createWizardProgress) createWizardProgress.style.width = `${Math.round((createWizardStep / 3) * 100)}%`;

        if (createPrevBtn) createPrevBtn.disabled = (createWizardStep === 1);

        if (createSubmitBtn) createSubmitBtn.classList.toggle('hidden', createWizardStep !== 3);
        if (createNextBtn) createNextBtn.classList.toggle('hidden', createWizardStep === 3);

        if (createWizardStep === 3) updateCreateSummary();
    }

    function setCreateWizardStep(step) {
        createWizardStep = Math.max(1, Math.min(3, step));
        updateCreateWizardUI();
    }

    function validateCreateStep(step) {
        let ok = true;
        clearCreateErrors();

        if (step === 1) {
            const type = document.getElementById('createSelectedType').value;
            const title = document.getElementById('createTitle').value.trim();

            if (!type) { showCreateError('type', 'يجب اختيار نوع العملية'); ok = false; }
            if (!title) { showCreateError('title', 'عنوان التكريم/المكافأة مطلوب'); ok = false; }
        }

        if (step === 2) {
            const recipientType = document.getElementById('createSelectedRecipientType').value;

            if (!recipientType) { showCreateError('recipient_type', 'يجب اختيار فئة المستلمين'); ok = false; }
            if (createSelectedUsers.length === 0) { showCreateError('users', 'يجب اختيار مستلم واحد على الأقل'); ok = false; }
        }

        if (step === 3) {
            const reason = document.getElementById('createReason').value.trim();
            if (!reason) { showCreateError('reason', 'سبب التكريم/المكافأة مطلوب'); ok = false; }
        }

        return ok;
    }

    createPrevBtn?.addEventListener('click', () => setCreateWizardStep(createWizardStep - 1));
    createNextBtn?.addEventListener('click', () => {
        if (validateCreateStep(createWizardStep)) setCreateWizardStep(createWizardStep + 1);
    });

    createWizardStepBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const target = parseInt(btn.dataset.step, 10);
            if (target > createWizardStep) {
                if (!validateCreateStep(createWizardStep)) return;
            }
            setCreateWizardStep(target);
        });
    });

    const createTitleInput = document.getElementById('createTitle');
    if (createTitleInput) createTitleInput.addEventListener('input', updateCreateSummary);

    // ====== CREATE MODAL FUNCTIONS ======
    window.openCreateModal = function() {
        document.getElementById('createModal').classList.remove('hidden');
        resetCreateForm();
        setCreateWizardStep(1);
        updateCreateSummary();
    };

    window.closeCreateModal = function() {
        document.getElementById('createModal').classList.add('hidden');
        resetCreateForm();
    };

    // Type selection for create
    window.selectCreateType = function(type) {
        document.querySelectorAll('.create-type-btn').forEach(btn => {
            btn.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20',
                                'border-yellow-500', 'bg-yellow-50', 'dark:bg-yellow-900/20');
            btn.classList.add('border-gray-200', 'dark:border-gray-600');
        });

        const selectedBtn = document.querySelector(`.create-type-btn[data-type="${type}"]`);
        if (selectedBtn) {
            selectedBtn.classList.remove('border-gray-200', 'dark:border-gray-600');
            if (type === 'honor') {
                selectedBtn.classList.add('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
            } else {
                selectedBtn.classList.add('border-yellow-500', 'bg-yellow-50', 'dark:bg-yellow-900/20');
            }
        }

        document.getElementById('createSelectedType').value = type;
        hideCreateError('type');
        updateCreateSummary();
    };

    // Recipient type selection for create
    window.selectCreateRecipientType = function(type) {
        document.querySelectorAll('.create-recipient-type-btn').forEach(btn => {
            btn.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
            btn.classList.add('border-gray-200', 'dark:border-gray-600');
        });

        const selectedBtn = document.querySelector(`.create-recipient-type-btn[data-type="${type}"]`);
        if (selectedBtn) {
            selectedBtn.classList.remove('border-gray-200', 'dark:border-gray-600');
            selectedBtn.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
        }

        document.getElementById('createSelectedRecipientType').value = type;
        createCurrentRecipientType = type;

        const userSelectionDiv = document.getElementById('createUserSelectionDiv');
        userSelectionDiv.classList.remove('hidden');

        createSelectedUsers = [];
        updateCreateSelectedCount();
        fetchCreateUsers();
        hideCreateError('recipient_type');
        updateCreateSummary();
    };

    // Fetch users for create
    async function fetchCreateUsers() {
        try {
            const response = await fetch(`/superadmin/honors-rewards/users-by-type?type=${createCurrentRecipientType}`);

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const users = await response.json();

            if (users.error) {
                throw new Error(users.message || 'حدث خطأ في الخادم');
            }

            createAllUsers = users;
            displayCreateUsers(users);
        } catch (error) {
            console.error('Error fetching users:', error);
            document.getElementById('create-users-list').innerHTML =
                `<div class="text-red-500 text-sm text-center">حدث خطأ في تحميل المستخدمين: ${error.message}</div>`;
        }
    }

    // Display users for create
    function displayCreateUsers(users) {
        const usersList = document.getElementById('create-users-list');

        if (!users || users.length === 0) {
            usersList.innerHTML = '<div class="text-sm text-gray-500 dark:text-gray-400 text-center">لا يوجد مستخدمون للنوع المختار</div>';
            return;
        }

        const usersHtml = users.map(user => {
            const isSelected = createSelectedUsers.some(selected => selected.id === user.id);
            return `
                <div class="flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
                    <input type="checkbox"
                           id="create_user_${user.id}"
                           value="${user.id}"
                           ${isSelected ? 'checked' : ''}
                           class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                           onchange="toggleCreateUserSelection(${user.id}, '${user.name}', '${user.email}', this.checked)">
                    <label for="create_user_${user.id}" class="mr-3 text-sm font-medium text-gray-900 dark:text-gray-300 cursor-pointer flex-1">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center ml-3">
                                <span class="text-xs font-medium text-blue-600 dark:text-blue-400">${user.name.charAt(0)}</span>
                            </div>
                            <div>
                                <div class="font-medium">${user.name}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">${user.email}</div>
                            </div>
                        </div>
                    </label>
                </div>
            `;
        }).join('');

        usersList.innerHTML = usersHtml;
        updateCreateSelectedCount();
    }

    // Toggle user selection for create
    window.toggleCreateUserSelection = function(userId, userName, userEmail, isChecked) {
        const user = { id: userId, name: userName, email: userEmail };

        if (isChecked) {
            if (!createSelectedUsers.some(selected => selected.id === userId)) {
                createSelectedUsers.push(user);
            }
        } else {
            createSelectedUsers = createSelectedUsers.filter(selected => selected.id !== userId);
        }

        updateCreateSelectedCount();
        hideCreateError('users');
        updateCreateSummary();
    };

    // Update selected count for create
    function updateCreateSelectedCount() {
        const selectedCountSpan = document.getElementById('create-selected-count');
        if (selectedCountSpan) {
            selectedCountSpan.textContent = `عدد المحددين: ${createSelectedUsers.length}`;
        }
        updateCreateSummary();
    }

    // Search users for create
    const createUserSearch = document.getElementById('create-user-search');
    if (createUserSearch) {
        createUserSearch.addEventListener('input', function() {
            const query = this.value.trim().toLowerCase();

            clearTimeout(createSearchTimeout);

            if (query.length === 0) {
                displayCreateUsers(createAllUsers);
                return;
            }

            createSearchTimeout = setTimeout(() => {
                const filteredUsers = createAllUsers.filter(user =>
                    user.name.toLowerCase().includes(query) ||
                    user.email.toLowerCase().includes(query)
                );
                displayCreateUsers(filteredUsers);
            }, 300);
        });
    }

    // Create form submission (Wizard-aware)
    const createForm = document.getElementById('createForm');
    if (createForm) {
        createForm.addEventListener('submit', function(e) {
            e.preventDefault();

            // إذا مش بالسلايد 3: اعتبره "التالي"
            if (createWizardStep < 3) {
                if (validateCreateStep(createWizardStep)) {
                    setCreateWizardStep(createWizardStep + 1);
                }
                return;
            }

            // بالسلايد 3: تحقق كامل ثم أرسل
            if (!validateCreateForm()) return;
            submitCreateForm();
        });
    }

    // ====== EDIT MODAL FUNCTIONS ======
    window.openEditModal = function(id) {
        editItemId = id;

        fetch(`/superadmin/honors-rewards/${id}/edit`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    populateEditForm(data.honor_reward);
                    document.getElementById('editModal').classList.remove('hidden');
                } else {
                    showAlert('فشل في تحميل بيانات التكريم/المكافأة', 'error');
                }
            })
            .catch(error => {
                console.error('Error fetching honor reward data:', error);
                showAlert('حدث خطأ أثناء تحميل البيانات', 'error');
            });
    };

    window.closeEditModal = function() {
        document.getElementById('editModal').classList.add('hidden');
        resetEditForm();
    };

    // Type selection for edit
    window.selectEditType = function(type) {
        document.querySelectorAll('.edit-type-btn').forEach(btn => {
            btn.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20',
                                'border-yellow-500', 'bg-yellow-50', 'dark:bg-yellow-900/20');
            btn.classList.add('border-gray-200', 'dark:border-gray-600');
        });

        const selectedBtn = document.querySelector(`.edit-type-btn[data-type="${type}"]`);
        if (selectedBtn) {
            selectedBtn.classList.remove('border-gray-200', 'dark:border-gray-600');
            if (type === 'honor') {
                selectedBtn.classList.add('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
            } else {
                selectedBtn.classList.add('border-yellow-500', 'bg-yellow-50', 'dark:bg-yellow-900/20');
            }
        }

        document.getElementById('editSelectedType').value = type;
        hideEditError('type');
    };

    // Recipient type selection for edit
    window.selectEditRecipientType = function(type) {
        document.querySelectorAll('.edit-recipient-type-btn').forEach(btn => {
            btn.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
            btn.classList.add('border-gray-200', 'dark:border-gray-600');
        });

        const selectedBtn = document.querySelector(`.edit-recipient-type-btn[data-type="${type}"]`);
        if (selectedBtn) {
            selectedBtn.classList.remove('border-gray-200', 'dark:border-gray-600');
            selectedBtn.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
        }

        document.getElementById('editSelectedRecipientType').value = type;
        editCurrentRecipientType = type;

        const userSelectionDiv = document.getElementById('editUserSelectionDiv');
        userSelectionDiv.classList.remove('hidden');

        editSelectedUsers = [];
        updateEditSelectedCount();
        fetchEditUsers();
        hideEditError('recipient_type');
    };

    // Fetch users for edit
    async function fetchEditUsers() {
        try {
            const response = await fetch(`/superadmin/honors-rewards/users-by-type?type=${editCurrentRecipientType}`);

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const users = await response.json();

            if (users.error) {
                throw new Error(users.message || 'حدث خطأ في الخادم');
            }

            editAllUsers = users;
            displayEditUsers(users);
        } catch (error) {
            console.error('Error fetching users:', error);
            document.getElementById('edit-users-list').innerHTML =
                `<div class="text-red-500 text-sm text-center">حدث خطأ في تحميل المستخدمين: ${error.message}</div>`;
        }
    }

    // Display users for edit
    function displayEditUsers(users) {
        const usersList = document.getElementById('edit-users-list');

        if (!users || users.length === 0) {
            usersList.innerHTML = '<div class="text-sm text-gray-500 dark:text-gray-400 text-center">لا يوجد مستخدمون للنوع المختار</div>';
            return;
        }

        const usersHtml = users.map(user => {
            const isSelected = editSelectedUsers.some(selected => selected.id === user.id);
            return `
                <div class="flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
                    <input type="checkbox"
                           id="edit_user_${user.id}"
                           value="${user.id}"
                           ${isSelected ? 'checked' : ''}
                           class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                           onchange="toggleEditUserSelection(${user.id}, '${user.name}', '${user.email}', this.checked)">
                    <label for="edit_user_${user.id}" class="mr-3 text-sm font-medium text-gray-900 dark:text-gray-300 cursor-pointer flex-1">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center ml-3">
                                <span class="text-xs font-medium text-blue-600 dark:text-blue-400">${user.name.charAt(0)}</span>
                            </div>
                            <div>
                                <div class="font-medium">${user.name}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">${user.email}</div>
                            </div>
                        </div>
                    </label>
                </div>
            `;
        }).join('');

        usersList.innerHTML = usersHtml;
        updateEditSelectedCount();
    }

    // Toggle user selection for edit
    window.toggleEditUserSelection = function(userId, userName, userEmail, isChecked) {
        const user = { id: userId, name: userName, email: userEmail };

        if (isChecked) {
            if (!editSelectedUsers.some(selected => selected.id === userId)) {
                editSelectedUsers.push(user);
            }
        } else {
            editSelectedUsers = editSelectedUsers.filter(selected => selected.id !== userId);
        }

        updateEditSelectedCount();
        hideEditError('users');
    };

    // Update selected count for edit
    function updateEditSelectedCount() {
        const selectedCountSpan = document.getElementById('edit-selected-count');
        if (selectedCountSpan) {
            selectedCountSpan.textContent = `عدد المحددين: ${editSelectedUsers.length}`;
        }
    }

    // Search users for edit
    const editUserSearch = document.getElementById('edit-user-search');
    if (editUserSearch) {
        editUserSearch.addEventListener('input', function() {
            const query = this.value.trim().toLowerCase();

            clearTimeout(editSearchTimeout);

            if (query.length === 0) {
                displayEditUsers(editAllUsers);
                return;
            }

            editSearchTimeout = setTimeout(() => {
                const filteredUsers = editAllUsers.filter(user =>
                    user.name.toLowerCase().includes(query) ||
                    user.email.toLowerCase().includes(query)
                );
                displayEditUsers(filteredUsers);
            }, 300);
        });
    }

    // Edit form submission
    const editForm = document.getElementById('editForm');
    if (editForm) {
        editForm.addEventListener('submit', function(e) {
            e.preventDefault();

            if (!validateEditForm()) {
                return;
            }

            submitEditForm();
        });
    }

    // ====== DELETE MODAL FUNCTIONS ======
    window.confirmDelete = function(id, title) {
        deleteItemId = id;
        document.getElementById('deleteMessage').textContent =
            `هل أنت متأكد من حذف "${title}"؟ لا يمكن التراجع عن هذا الإجراء.`;
        document.getElementById('deleteModal').classList.remove('hidden');
    };

    window.closeDeleteModal = function() {
        document.getElementById('deleteModal').classList.add('hidden');
        deleteItemId = null;
    };

    window.executeDelete = function() {
        if (!deleteItemId) return;

        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

        fetch(`/superadmin/honors-rewards/${deleteItemId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message, 'success');
                closeDeleteModal();
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                showAlert(data.message, 'error');
            }
        })
        .catch(error => {
            showAlert('حدث خطأ أثناء الحذف', 'error');
        });
    };

    // ====== VALIDATION FUNCTIONS ======
    function validateCreateForm() {
        let isValid = true;
        clearCreateErrors();

        const type = document.getElementById('createSelectedType').value;
        if (!type) {
            showCreateError('type', 'يجب اختيار نوع العملية');
            isValid = false;
        }

        const title = document.getElementById('createTitle').value.trim();
        if (!title) {
            showCreateError('title', 'عنوان التكريم/المكافأة مطلوب');
            isValid = false;
        }

        const recipientType = document.getElementById('createSelectedRecipientType').value;
        if (!recipientType) {
            showCreateError('recipient_type', 'يجب اختيار فئة المستلمين');
            isValid = false;
        }

        if (createSelectedUsers.length === 0) {
            showCreateError('users', 'يجب اختيار مستلم واحد على الأقل');
            isValid = false;
        }

        const reason = document.getElementById('createReason').value.trim();
        if (!reason) {
            showCreateError('reason', 'سبب التكريم/المكافأة مطلوب');
            isValid = false;
        }

        return isValid;
    }

    function validateEditForm() {
        let isValid = true;
        clearEditErrors();

        const type = document.getElementById('editSelectedType').value;
        if (!type) {
            showEditError('type', 'يجب اختيار نوع العملية');
            isValid = false;
        }

        const title = document.getElementById('editTitle').value.trim();
        if (!title) {
            showEditError('title', 'عنوان التكريم/المكافأة مطلوب');
            isValid = false;
        }

        const recipientType = document.getElementById('editSelectedRecipientType').value;
        if (!recipientType) {
            showEditError('recipient_type', 'يجب اختيار فئة المستلمين');
            isValid = false;
        }

        if (editSelectedUsers.length === 0) {
            showEditError('users', 'يجب اختيار مستلم واحد على الأقل');
            isValid = false;
        }

        const reason = document.getElementById('editReason').value.trim();
        if (!reason) {
            showEditError('reason', 'سبب التكريم/المكافأة مطلوب');
            isValid = false;
        }

        return isValid;
    }

    // ====== FORM SUBMISSION FUNCTIONS ======
    function submitCreateForm() {
        const formData = new FormData();
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        formData.append('_token', csrfToken || '');

        formData.append('type', document.getElementById('createSelectedType').value);
        formData.append('title', document.getElementById('createTitle').value.trim());
        formData.append('reason', document.getElementById('createReason').value.trim());
        formData.append('points_amount', document.getElementById('createPointsAmount').value || '');
        formData.append('rank_id', document.getElementById('createRankId').value || '');
        formData.append('additional_notes', document.getElementById('createAdditionalNotes').value.trim());

        createSelectedUsers.forEach(user => {
            formData.append('recipient_data[]', user.id);
        });

        setCreateLoading(true);

        fetch('/superadmin/honors-rewards', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message, 'success');
                closeCreateModal();
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                if (data.errors) {
                    Object.keys(data.errors).forEach(field => {
                        showCreateError(field, data.errors[field][0]);
                    });
                }
                showAlert(data.message, 'error');
            }
        })
        .catch(error => {
            showAlert('حدث خطأ أثناء إرسال البيانات: ' + error.message, 'error');
        })
        .finally(() => {
            setCreateLoading(false);
        });
    }

    function submitEditForm() {
        const formData = new FormData();
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        formData.append('_token', csrfToken || '');
        formData.append('_method', 'PUT');

        formData.append('type', document.getElementById('editSelectedType').value);
        formData.append('title', document.getElementById('editTitle').value.trim());
        formData.append('reason', document.getElementById('editReason').value.trim());
        formData.append('points_amount', document.getElementById('editPointsAmount').value || '');
        formData.append('rank_id', document.getElementById('editRankId').value || '');
        formData.append('additional_notes', document.getElementById('editAdditionalNotes').value.trim());

        editSelectedUsers.forEach(user => {
            formData.append('recipient_data[]', user.id);
        });

        setEditLoading(true);

        fetch(`/superadmin/honors-rewards/${editItemId}`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message, 'success');
                closeEditModal();
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                if (data.errors) {
                    Object.keys(data.errors).forEach(field => {
                        showEditError(field, data.errors[field][0]);
                    });
                }
                showAlert(data.message, 'error');
            }
        })
        .catch(error => {
            showAlert('حدث خطأ أثناء إرسال البيانات: ' + error.message, 'error');
        })
        .finally(() => {
            setEditLoading(false);
        });
    }

    // ====== HELPER FUNCTIONS ======
    function populateEditForm(data) {
        document.getElementById('editHonorRewardId').value = data.id;
        document.getElementById('editTitle').value = data.title || '';
        document.getElementById('editReason').value = data.reason || '';
        document.getElementById('editPointsAmount').value = data.points_amount || '';
        document.getElementById('editRankId').value = data.rank_id || '';
        document.getElementById('editAdditionalNotes').value = data.additional_notes || '';

        if (data.type) {
            selectEditType(data.type);
        }

        if (data.recipient_data && Array.isArray(data.recipient_data)) {
            selectEditRecipientType('all');

            setTimeout(() => {
                data.recipient_data.forEach(userId => {
                    const checkbox = document.getElementById(`edit_user_${userId}`);
                    if (checkbox) {
                        checkbox.checked = true;
                        const user = editAllUsers.find(u => u.id == userId);
                        if (user) {
                            toggleEditUserSelection(user.id, user.name, user.email, true);
                        }
                    }
                });
            }, 1000);
        }
    }

    function setCreateLoading(loading) {
        const submitBtn = document.getElementById('create-submit-btn');
        const submitText = document.getElementById('create-submit-text');

        if (!submitBtn || !submitText) return;

        if (loading) {
            submitBtn.disabled = true;
            submitText.textContent = 'جارٍ المعالجة...';
        } else {
            submitBtn.disabled = false;
            submitText.textContent = 'إنشاء التكريم/المكافأة';
        }
    }

    function setEditLoading(loading) {
        const submitBtn = document.getElementById('edit-submit-btn');
        const submitText = document.getElementById('edit-submit-text');

        if (!submitBtn || !submitText) return;

        if (loading) {
            submitBtn.disabled = true;
            submitText.textContent = 'جارٍ المعالجة...';
        } else {
            submitBtn.disabled = false;
            submitText.textContent = 'تحديث التكريم/المكافأة';
        }
    }

    function showCreateError(field, message) {
        const errorDiv = document.getElementById(`create-${field}-error`);
        if (errorDiv) {
            errorDiv.textContent = message;
            errorDiv.classList.remove('hidden');
        }
    }

    function hideCreateError(field) {
        const errorDiv = document.getElementById(`create-${field}-error`);
        if (errorDiv) {
            errorDiv.classList.add('hidden');
        }
    }

    function clearCreateErrors() {
        document.querySelectorAll('[id^="create-"][id$="-error"]').forEach(errorDiv => {
            errorDiv.classList.add('hidden');
        });
    }

    function showEditError(field, message) {
        const errorDiv = document.getElementById(`edit-${field}-error`);
        if (errorDiv) {
            errorDiv.textContent = message;
            errorDiv.classList.remove('hidden');
        }
    }

    function hideEditError(field) {
        const errorDiv = document.getElementById(`edit-${field}-error`);
        if (errorDiv) {
            errorDiv.classList.add('hidden');
        }
    }

    function clearEditErrors() {
        document.querySelectorAll('[id^="edit-"][id$="-error"]').forEach(errorDiv => {
            errorDiv.classList.add('hidden');
        });
    }

    function resetCreateForm() {
        document.getElementById('createForm').reset();
        document.getElementById('createSelectedType').value = '';
        document.getElementById('createSelectedRecipientType').value = '';

        document.querySelectorAll('.create-type-btn').forEach(btn => {
            btn.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20',
                                'border-yellow-500', 'bg-yellow-50', 'dark:bg-yellow-900/20');
            btn.classList.add('border-gray-200', 'dark:border-gray-600');
        });

        document.querySelectorAll('.create-recipient-type-btn').forEach(btn => {
            btn.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
            btn.classList.add('border-gray-200', 'dark:border-gray-600');
        });

        document.getElementById('createUserSelectionDiv').classList.add('hidden');

        createSelectedUsers = [];
        createAllUsers = [];
        createCurrentRecipientType = '';
        updateCreateSelectedCount();
        clearCreateErrors();

        setCreateWizardStep(1);
        updateCreateSummary();
    }

    function resetEditForm() {
        document.getElementById('editForm').reset();
        document.getElementById('editSelectedType').value = '';
        document.getElementById('editSelectedRecipientType').value = '';
        document.getElementById('editHonorRewardId').value = '';

        document.querySelectorAll('.edit-type-btn').forEach(btn => {
            btn.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20',
                                'border-yellow-500', 'bg-yellow-50', 'dark:bg-yellow-900/20');
            btn.classList.add('border-gray-200', 'dark:border-gray-600');
        });

        document.querySelectorAll('.edit-recipient-type-btn').forEach(btn => {
            btn.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
            btn.classList.add('border-gray-200', 'dark:border-gray-600');
        });

        document.getElementById('editUserSelectionDiv').classList.add('hidden');

        editSelectedUsers = [];
        editAllUsers = [];
        editCurrentRecipientType = '';
        editItemId = null;
        updateEditSelectedCount();
        clearEditErrors();
    }

    function showAlert(message, type = 'info') {
        const alertContainer = document.getElementById('alert-container');
        const alertDiv = document.createElement('div');

        const bgColor = type === 'success' ? 'bg-green-100 border-green-200 text-green-800' :
                       type === 'error' ? 'bg-red-100 border-red-200 text-red-800' :
                       'bg-blue-100 border-blue-200 text-blue-800';

        alertDiv.className = `${bgColor} border rounded-lg p-4 shadow-lg max-w-md transition-all duration-300`;
        alertDiv.innerHTML = `
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20">
                        ${type === 'success' ?
                            '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>' :
                            '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>'
                        }
                    </svg>
                    <span class="text-sm font-medium">${message}</span>
                </div>
                <button onclick="this.parentElement.parentElement.remove()" class="mr-2 text-gray-500 hover:text-gray-700">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        `;

        alertContainer.appendChild(alertDiv);

        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.style.transform = 'translateX(100%)';
                alertDiv.style.opacity = '0';
                setTimeout(() => {
                    alertDiv.remove();
                }, 300);
            }
        }, 5000);
    }

    // ESC key to close modals
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeCreateModal();
            closeEditModal();
            closeDeleteModal();
        }
    });

    // init wizard safely
    setCreateWizardStep(1);
    updateCreateSummary();
});
</script>

<!-- CSRF Token for AJAX requests (نفسه) -->
<meta name="csrf-token" content="{{ csrf_token() }}">

@endsection