@extends('layouts.moderator')

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

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- 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">
                        إنشاء وإدارة تكريمات ومكافآت الأعضاء من نفس الجنس
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200 mr-2">
                            {{ $moderatorGender === 'male' ? 'الشباب' : 'الصبايا' }}
                        </span>
                    </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">
                        <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('moderator.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">
                        <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>

        <!-- 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-indigo-50 dark:bg-indigo-900/20 rounded-lg ml-3">
                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" 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>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['my_created'] }}</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>

        <!-- 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('moderator.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>

                        <!-- Status Filter -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الحالة</label>
                            <select name="status" 
                                    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="active" {{ request('status') === 'active' ? 'selected' : '' }}>نشط</option>
                                <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>مكتمل</option>
                                <option value="cancelled" {{ request('status') === 'cancelled' ? '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('moderator.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>

        <!-- Data Cards -->
        <div 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">
                                <!-- Status Badge -->
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
                                    @if($item->status === 'active') bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200
                                    @elseif($item->status === 'completed') bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200
                                    @else bg-gray-100 text-gray-800 dark:bg-gray-900/50 dark:text-gray-200 @endif">
                                    @if($item->status === 'active') نشط
                                    @elseif($item->status === 'completed') مكتمل
                                    @else ملغي @endif
                                </span>

                                <!-- Actions -->
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('moderator.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>

                                    @if(auth()->id() === $item->created_by)
                                        <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>
                                    @endif
                                </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">ابدأ بإنشاء أول تكريم أو مكافأة للأعضاء من {{ $moderatorGender === 'male' ? 'الشباب' : 'الصبايا' }}</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>

        <!-- Pagination -->
        @if($honorsRewards->hasPages())
            <div class="mt-6">
                {{ $honorsRewards->links() }}
            </div>
        @endif
    </div>
</div>

<!-- Create Modal -->
<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-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>
                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                    يمكنك تكريم أو مكافأة الأعضاء من {{ $moderatorGender === 'male' ? 'الشباب' : 'الصبايا' }} فقط
                </p>
            </div>

            <form id="createForm" class="space-y-6">
                @csrf

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

                <!-- User Selection (Gender restricted) -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        اختر المستلمين من {{ $moderatorGender === 'male' ? 'الشباب' : 'الصبايا' }} <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>

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

                <!-- 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="create-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="create-submit-text">إنشاء التكريم/المكافأة</span>
                    </button>
                    
                    <button type="button" onclick="closeCreateModal()" 
                            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>

<!-- Edit Modal -->
<!-- Edit Modal - Complete Version -->
<!-- Edit Modal - Complete Version -->
<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
                @method('PUT')
                <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>

                <!-- User Selection -->
                <div>
                    <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>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Variables for Create Modal
    let createSelectedUsers = [];
    let createAllUsers = [];
    let createSearchTimeout;

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

    // Variables for Delete Modal
    let deleteItemId = null;

    // ====== CREATE MODAL FUNCTIONS ======
    window.openCreateModal = function() {
        document.getElementById('createModal').classList.remove('hidden');
        resetCreateForm();
        // Load users on modal open for moderator's gender
        fetchCreateUsers();
    };

    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');
    };

    // Fetch users for create (restricted by moderator's gender)
    async function fetchCreateUsers() {
        try {
            const response = await fetch(`/moderator/honors-rewards/users-by-type?type=all`);
            
            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');
    };

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

    // 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
    const createForm = document.getElementById('createForm');
    if (createForm) {
        createForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (!validateCreateForm()) {
                return;
            }
            
            submitCreateForm();
        });
    }

    // ====== EDIT MODAL FUNCTIONS ======
    window.openEditModal = function(id) {
        editItemId = id;
        
        // Fetch item data and populate form
        fetch(`/moderator/honors-rewards/${id}`, {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                populateEditForm(data.honor_reward);
                document.getElementById('editModal').classList.remove('hidden');
                // Load users for edit modal
                fetchEditUsers();
            } else {
                showAlert('فشل في تحميل بيانات التكريم/المكافأة', 'error');
            }
        })
        .catch(error => {
            console.error('Error fetching honor reward data:', error);
            showAlert('حدث خطأ أثناء تحميل البيانات: ' + error.message, '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');
    };

    // Populate edit form
    function populateEditForm(honorReward) {
        // Basic fields
        document.getElementById('editHonorRewardId').value = honorReward.id;
        document.getElementById('editTitle').value = honorReward.title;
        document.getElementById('editReason').value = honorReward.reason;
        document.getElementById('editAdditionalNotes').value = honorReward.additional_notes || '';
        document.getElementById('editPointsAmount').value = honorReward.points_amount || '';
        document.getElementById('editRankId').value = honorReward.rank_id || '';

        // Set type
        selectEditType(honorReward.type);

        // Set selected users
        editSelectedUsers = honorReward.recipients || [];
    }

    // Fetch users for edit
    async function fetchEditUsers() {
        try {
            const response = await fetch(`/moderator/honors-rewards/users-by-type?type=all`);
            
            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 for edit:', 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(`/moderator/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();

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

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

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

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

        return isValid;
    }

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

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

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

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

        // Reason validation
        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 || '');

        // Form fields
        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());

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

        setCreateLoading(true);

        fetch('/moderator/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');

        // Form fields
        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());

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

        setEditLoading(true);

        fetch(`/moderator/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 setCreateLoading(loading) {
        const submitBtn = document.getElementById('create-submit-btn');
        const submitText = document.getElementById('create-submit-text');
        
        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 (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');
        }
        
        const input = document.getElementById(`create${field.charAt(0).toUpperCase() + field.slice(1)}`) || 
                     document.getElementById(`createSelected${field.charAt(0).toUpperCase() + field.slice(1)}`);
        if (input) {
            input.classList.add('border-red-500');
        }
    }

    function showEditError(field, message) {
        const errorDiv = document.getElementById(`edit-${field}-error`);
        if (errorDiv) {
            errorDiv.textContent = message;
            errorDiv.classList.remove('hidden');
        }
        
        const input = document.getElementById(`edit${field.charAt(0).toUpperCase() + field.slice(1)}`) || 
                     document.getElementById(`editSelected${field.charAt(0).toUpperCase() + field.slice(1)}`);
        if (input) {
            input.classList.add('border-red-500');
        }
    }

    function hideCreateError(field) {
        const errorDiv = document.getElementById(`create-${field}-error`);
        if (errorDiv) {
            errorDiv.classList.add('hidden');
        }
        
        const input = document.getElementById(`create${field.charAt(0).toUpperCase() + field.slice(1)}`) || 
                     document.getElementById(`createSelected${field.charAt(0).toUpperCase() + field.slice(1)}`);
        if (input) {
            input.classList.remove('border-red-500');
        }
    }

    function hideEditError(field) {
        const errorDiv = document.getElementById(`edit-${field}-error`);
        if (errorDiv) {
            errorDiv.classList.add('hidden');
        }
        
        const input = document.getElementById(`edit${field.charAt(0).toUpperCase() + field.slice(1)}`) || 
                     document.getElementById(`editSelected${field.charAt(0).toUpperCase() + field.slice(1)}`);
        if (input) {
            input.classList.remove('border-red-500');
        }
    }

    function clearCreateErrors() {
        document.querySelectorAll('[id^="create-"][id$="-error"]').forEach(errorDiv => {
            errorDiv.classList.add('hidden');
        });
        
        document.querySelectorAll('#createModal .border-red-500').forEach(input => {
            input.classList.remove('border-red-500');
        });
    }

    function clearEditErrors() {
        document.querySelectorAll('[id^="edit-"][id$="-error"]').forEach(errorDiv => {
            errorDiv.classList.add('hidden');
        });
        
        document.querySelectorAll('#editModal .border-red-500').forEach(input => {
            input.classList.remove('border-red-500');
        });
    }

    function resetCreateForm() {
        document.getElementById('createForm').reset();
        document.getElementById('createSelectedType').value = '';
        
        // Reset type buttons
        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');
        });

        createSelectedUsers = [];
        updateCreateSelectedCount();
        clearCreateErrors();
    }

    function resetEditForm() {
        document.getElementById('editForm').reset();
        document.getElementById('editSelectedType').value = '';
        
        // Reset type buttons
        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');
        });

        editSelectedUsers = [];
        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);
        
        // Auto remove after 5 seconds
        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();
        }
    });
});
</script>

<!-- CSRF Token for AJAX requests -->
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection