@extends($layout)

@section('title', 'طلبات الأنشطة')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 py-8 px-4">
    <div class="max-w-7xl mx-auto">
        
        <div class="mb-8">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
                        <svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        طلبات الأنشطة
                    </h1>
                    <p class="mt-2 text-gray-600 dark:text-gray-400">عرض وإدارة طلبات الأنشطة</p>
                </div>

                @if(!auth()->user()->hasRole('super-admin'))
                <a href="{{ route('live-activities.requests.create') }}" 
                   class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-orange-600 to-orange-700 text-white rounded-xl hover:shadow-lg transition transform hover:scale-105 font-semibold">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    <span>طلب جديد</span>
                </a>
                @endif
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                <div class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-lg border border-gray-100 dark:border-gray-700 hover:scale-105 transition-transform">
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <div>
                            <div class="text-xs font-medium text-gray-600 dark:text-gray-400">قيد الانتظار</div>
                            <div class="text-2xl font-bold text-yellow-600 mt-1">{{ $stats['pending'] }}</div>
                        </div>
                    </div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-lg border border-gray-100 dark:border-gray-700 hover:scale-105 transition-transform">
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" 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"/>
                            </svg>
                        </div>
                        <div>
                            <div class="text-xs font-medium text-gray-600 dark:text-gray-400">مقبولة</div>
                            <div class="text-2xl font-bold text-green-600 mt-1">{{ $stats['approved'] }}</div>
                        </div>
                    </div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-lg border border-gray-100 dark:border-gray-700 hover:scale-105 transition-transform">
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-pink-500 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" 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"/>
                            </svg>
                        </div>
                        <div>
                            <div class="text-xs font-medium text-gray-600 dark:text-gray-400">مرفوضة</div>
                            <div class="text-2xl font-bold text-red-600 mt-1">{{ $stats['rejected'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6 border border-gray-200 dark:border-gray-700">
            <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
                        </svg>
                        الحالة
                    </label>
                    <select name="status" class="w-full px-4 py-3 rounded-xl border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
                        <option value="">الكل</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>قيد الانتظار</option>
                        <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>مقبولة</option>
                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>مرفوضة</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                        </svg>
                        نوع النشاط
                    </label>
                    <select name="type" class="w-full px-4 py-3 rounded-xl border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all">
                        <option value="">الكل</option>
                        @foreach($activityTypes as $type)
                            <option value="{{ $type->name }}" {{ request('type') == $type->name ? 'selected' : '' }}>{{ $type->display_name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="flex items-end gap-3">
                    <button type="submit" class="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:shadow-lg transition transform hover:scale-105 font-semibold flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
                        </svg>
                        تطبيق
                    </button>
                    <a href="{{ route('live-activities.requests.index') }}" class="px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-300 dark:hover:bg-gray-600 transition font-semibold flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" 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"/>
                        </svg>
                        إعادة تعيين
                    </a>
                </div>
            </form>
        </div>

        <div class="space-y-4">
            @forelse($activityRequests as $activityRequest)
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
                    <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
                        
                        <div class="flex-1">
                            <div class="flex items-start gap-4 mb-4">
                                <div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-pink-500 rounded-2xl flex items-center justify-center text-3xl shadow-lg flex-shrink-0">
                                    {{ $activityRequest->activityType->icon ?? '📅' }}
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
                                        {{ $activityRequest->activityType->display_name }}
                                    </h3>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-2 flex-wrap">
                                        <svg class="w-4 h-4 text-blue-600 flex-shrink-0" 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"/>
                                        </svg>
                                        <span class="font-semibold truncate">{{ $activityRequest->user->name }}</span>
                                        <span class="text-gray-400">•</span>
                                        <span class="text-xs">{{ $activityRequest->created_at->diffForHumans() }}</span>
                                    </p>
                                </div>
                            </div>

                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
                                <div class="flex items-center gap-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
                                    <svg class="w-5 h-5 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                    </svg>
                                    <div class="min-w-0">
                                        <div class="text-xs text-blue-600 font-medium">التاريخ</div>
                                        <div class="text-sm font-bold text-gray-900 dark:text-white truncate">{{ $activityRequest->requested_date->format('Y/m/d') }}</div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2 p-3 bg-green-50 dark:bg-green-900/20 rounded-xl">
                                    <svg class="w-5 h-5 text-green-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <div class="min-w-0">
                                        <div class="text-xs text-green-600 font-medium">الوقت</div>
                                        <div class="text-sm font-bold text-gray-900 dark:text-white truncate">{{ $activityRequest->requested_time->format('H:i') }}</div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-xl">
                                    <svg class="w-5 h-5 text-purple-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                    </svg>
                                    <div class="min-w-0">
                                        <div class="text-xs text-purple-600 font-medium">المدة</div>
                                        <div class="text-sm font-bold text-gray-900 dark:text-white truncate">{{ $activityRequest->duration_hours }}س {{ $activityRequest->duration_minutes }}د</div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2 p-3 bg-orange-50 dark:bg-orange-900/20 rounded-xl">
                                    <svg class="w-5 h-5 text-orange-600 flex-shrink-0" 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"/>
                                    </svg>
                                    <div class="min-w-0">
                                        <div class="text-xs text-orange-600 font-medium">إلى</div>
                                        <div class="text-sm font-bold text-gray-900 dark:text-white truncate">{{ $activityRequest->recipient->name }}</div>
                                    </div>
                                </div>
                            </div>

                            @if($activityRequest->request_notes)
                                <div class="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-xl mb-4 border-r-4 border-gray-400">
                                    <div class="flex items-start gap-2">
                                        <svg class="w-5 h-5 text-gray-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
                                        </svg>
                                        <div class="flex-1 min-w-0">
                                            <p class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">ملاحظات الطلب:</p>
                                            <p class="text-sm text-gray-600 dark:text-gray-400 break-words">{{ $activityRequest->request_notes }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if($activityRequest->response_notes)
                                <div class="p-4 {{ $activityRequest->status === 'approved' ? 'bg-green-50 dark:bg-green-900/20 border-green-500' : 'bg-red-50 dark:bg-red-900/20 border-red-500' }} rounded-xl border-r-4">
                                    <div class="flex items-start gap-2">
                                        <svg class="w-5 h-5 {{ $activityRequest->status === 'approved' ? 'text-green-600' : 'text-red-600' }} flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                                        </svg>
                                        <div class="flex-1 min-w-0">
                                            <p class="text-xs font-semibold {{ $activityRequest->status === 'approved' ? 'text-green-700 dark:text-green-300' : 'text-red-700 dark:text-red-300' }} mb-1">
                                                {{ $activityRequest->status === 'approved' ? 'ملاحظات القبول:' : 'سبب الرفض:' }}
                                            </p>
                                            <p class="text-sm {{ $activityRequest->status === 'approved' ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200' }} break-words">
                                                {{ $activityRequest->response_notes }}
                                            </p>
                                            @if($activityRequest->reviewer)
                                                <p class="text-xs {{ $activityRequest->status === 'approved' ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }} mt-2">
                                                    بواسطة: {{ $activityRequest->reviewer->name }} - {{ $activityRequest->reviewed_at->diffForHumans() }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="flex flex-col items-end gap-3 flex-shrink-0">
                            @php
                                $statusBadges = [
                                    'pending' => ['bg' => 'bg-yellow-100 dark:bg-yellow-900/30', 'text' => 'text-yellow-800 dark:text-yellow-200', 'label' => 'قيد الانتظار', 'icon' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'],
                                    'approved' => ['bg' => 'bg-green-100 dark:bg-green-900/30', 'text' => 'text-green-800 dark:text-green-200', 'label' => 'مقبول', 'icon' => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'],
                                    'rejected' => ['bg' => 'bg-red-100 dark:bg-red-900/30', 'text' => 'text-red-800 dark:text-red-200', 'label' => 'مرفوض', 'icon' => 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z']
                                ];
                                $badge = $statusBadges[$activityRequest->status] ?? ['bg' => 'bg-gray-100', 'text' => 'text-gray-800', 'label' => $activityRequest->status, 'icon' => 'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'];
                            @endphp
                            <span class="px-4 py-2 {{ $badge['bg'] }} {{ $badge['text'] }} rounded-xl text-sm font-semibold flex items-center gap-2 shadow-sm">
                                <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="{{ $badge['icon'] }}"/>
                                </svg>
                                {{ $badge['label'] }}
                            </span>
                            
                            @if($activityRequest->status === 'pending')
                                @if($activityRequest->recipient_id === auth()->id())
                                    <div class="flex gap-2">
                                        <button onclick="openReviewModal({{ $activityRequest->id }}, 'approve', '{{ $activityRequest->activityType->name }}')" 
                                                class="p-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-xl hover:shadow-lg transition transform hover:scale-110 group relative"
                                                title="قبول">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                            </svg>
                                            <span class="absolute -top-8 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition whitespace-nowrap">قبول</span>
                                        </button>
                                        <button onclick="openReviewModal({{ $activityRequest->id }}, 'reject', '{{ $activityRequest->activityType->name }}')" 
                                                class="p-3 bg-gradient-to-r from-red-600 to-pink-600 text-white rounded-xl hover:shadow-lg transition transform hover:scale-110 group relative"
                                                title="رفض">
                                            <svg class="w-5 h-5" 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"/>
                                            </svg>
                                            <span class="absolute -top-8 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition whitespace-nowrap">رفض</span>
                                        </button>
                                    </div>
                                @elseif($activityRequest->user_id === auth()->id())
                                    <button onclick="deleteRequest({{ $activityRequest->id }})" 
                                            class="p-3 bg-gradient-to-r from-red-600 to-pink-600 text-white rounded-xl hover:shadow-lg transition transform hover:scale-110 group relative"
                                            title="حذف">
                                        <svg class="w-5 h-5" 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"/>
                                        </svg>
                                        <span class="absolute -top-8 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition whitespace-nowrap">حذف</span>
                                    </button>
                                @endif
                            @endif

                            @if($activityRequest->liveActivity)
                          <a href="{{ route('live-activities.show', $activityRequest->liveActivity) }}" 
   class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition">
    <svg class="w-5 h-5" 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 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"/>
    </svg>
</a>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="bg-white dark:bg-gray-800 rounded-2xl p-12 text-center shadow-lg border border-gray-200 dark:border-gray-700">
                    <div class="w-24 h-24 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-12 h-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </div>
                   <p class="text-xl font-bold text-gray-600 dark:text-gray-400">لا توجد طلبات</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500 mt-2">لم يتم العثور على أي طلبات</p>
                </div>
            @endforelse
        </div>

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

    </div>
</div>

{{-- Review Modal --}}
<div id="reviewModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-md w-full transform transition-all">
        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 id="modalTitle" class="text-xl font-bold text-gray-900 dark:text-white"></h3>
                <button onclick="closeReviewModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition">
                    <svg class="w-6 h-6" 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"/>
                    </svg>
                </button>
            </div>
            
            <form id="reviewForm">
                <input type="hidden" id="requestId" name="request_id">
                <input type="hidden" id="reviewAction" name="action">
                <input type="hidden" id="activityTypeName" name="activity_type">
                
                <div id="bonusPointsSection" class="mb-6 hidden">
                    <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
                        <svg class="w-4 h-4 text-purple-600" 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"/>
                        </svg>
                        نقاط إضافية (اختياري)
                    </label>
                    <input type="number" id="bonusPoints" name="bonus_points" min="0" max="10" value="0"
                           class="w-full px-4 py-3 rounded-xl border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all"
                           placeholder="من 0 إلى 10">
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
                        <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="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"/>
                        </svg>
                        <span id="notesLabel">ملاحظات</span>
                    </label>
                    <textarea id="responseNotes" name="response_notes" rows="4"
                              class="w-full px-4 py-3 rounded-xl border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all resize-none"
                              placeholder="أضف ملاحظات..."></textarea>
                </div>

                <div class="flex gap-3">
                    <button type="submit" id="submitBtn"
                            class="flex-1 px-6 py-3 bg-gradient-to-r text-white rounded-xl hover:shadow-lg transition transform hover:scale-105 font-semibold flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        <span id="submitBtnText">تأكيد</span>
                    </button>
                    <button type="button" onclick="closeReviewModal()"
                            class="flex-1 px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-300 dark:hover:bg-gray-600 transition font-semibold">
                        إلغاء
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openReviewModal(requestId, action, activityType) {
    const modal = document.getElementById('reviewModal');
    const title = document.getElementById('modalTitle');
    const notesLabel = document.getElementById('notesLabel');
    const submitBtn = document.getElementById('submitBtn');
    const submitBtnText = document.getElementById('submitBtnText');
    const responseNotes = document.getElementById('responseNotes');
    const bonusPointsSection = document.getElementById('bonusPointsSection');
    
    document.getElementById('requestId').value = requestId;
    document.getElementById('reviewAction').value = action;
    document.getElementById('activityTypeName').value = activityType;
    
    if (action === 'approve') {
        title.textContent = 'قبول الطلب';
        notesLabel.textContent = 'ملاحظات (اختياري)';
        submitBtnText.textContent = 'قبول الطلب';
        submitBtn.className = 'flex-1 px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-xl hover:shadow-lg transition transform hover:scale-105 font-semibold flex items-center justify-center gap-2';
        responseNotes.placeholder = 'أضف ملاحظات إضافية (اختياري)';
        responseNotes.required = false;
        
        if (activityType === 'guest') {
            bonusPointsSection.classList.remove('hidden');
        } else {
            bonusPointsSection.classList.add('hidden');
        }
    } else {
        title.textContent = 'رفض الطلب';
        notesLabel.innerHTML = 'سبب الرفض <span class="text-red-500">*</span>';
        submitBtnText.textContent = 'رفض الطلب';
        submitBtn.className = 'flex-1 px-6 py-3 bg-gradient-to-r from-red-600 to-pink-600 text-white rounded-xl hover:shadow-lg transition transform hover:scale-105 font-semibold flex items-center justify-center gap-2';
        responseNotes.placeholder = 'يجب إدخال سبب الرفض';
        responseNotes.required = true;
        bonusPointsSection.classList.add('hidden');
    }
    
    responseNotes.value = '';
    document.getElementById('bonusPoints').value = '0';
    modal.classList.remove('hidden');
}

function closeReviewModal() {
    document.getElementById('reviewModal').classList.add('hidden');
}

document.getElementById('reviewForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const requestId = document.getElementById('requestId').value;
    const action = document.getElementById('reviewAction').value;
    const notes = document.getElementById('responseNotes').value;
    const bonusPoints = document.getElementById('bonusPoints').value;
    
    if (action === 'reject' && !notes.trim()) {
        showErrorMessage('يجب إدخال سبب الرفض');
        return;
    }
    
    reviewRequest(requestId, action, notes, bonusPoints);
});

function reviewRequest(requestId, action, notes, bonusPoints) {
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg><span>جاري المعالجة...</span>';
    
    const formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('action', action);
    formData.append('response_notes', notes || '');
    formData.append('bonus_points', bonusPoints || 0);
    
    fetch(`{{ url('/live-activities/requests') }}/${requestId}/review`, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: formData,
        credentials: 'same-origin'
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            closeReviewModal();
            showSuccessMessage(data.message);
            setTimeout(() => window.location.reload(), 1500);
        } else {
            showErrorMessage(data.message || 'حدث خطأ');
            resetSubmitButton();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorMessage('حدث خطأ أثناء المراجعة');
        resetSubmitButton();
    });
}

function resetSubmitButton() {
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.disabled = false;
    const action = document.getElementById('reviewAction').value;
    submitBtn.innerHTML = action === 'approve' 
        ? '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>قبول الطلب</span>'
        : '<svg class="w-5 h-5" 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"/></svg><span>رفض الطلب</span>';
}

function deleteRequest(requestId) {
    if (!confirm('هل أنت متأكد من حذف هذا الطلب؟')) {
        return;
    }
    
    fetch(`/live-activities/requests/${requestId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccessMessage('تم حذف الطلب بنجاح');
            setTimeout(() => window.location.reload(), 1500);
        } else {
            showErrorMessage(data.message || 'حدث خطأ');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorMessage('حدث خطأ أثناء الحذف');
    });
}

function showSuccessMessage(message) {
    const alert = document.createElement('div');
    alert.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-4 rounded-xl shadow-lg flex items-center gap-3 z-50 animate-fade-in';
    alert.innerHTML = `
        <svg class="w-6 h-6" 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"/>
        </svg>
        <span class="font-medium">${message}</span>
    `;
    document.body.appendChild(alert);
    setTimeout(() => alert.remove(), 3000);
}

function showErrorMessage(message) {
    const alert = document.createElement('div');
    alert.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-4 rounded-xl shadow-lg flex items-center gap-3 z-50 animate-fade-in';
    alert.innerHTML = `
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span class="font-medium">${message}</span>
    `;
    document.body.appendChild(alert);
    setTimeout(() => alert.remove(), 3000);
}
</script>

<style>
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}
</style>

@endsection