@extends($layout)

@section('title', 'إدارة الأنشطة')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 px-4 sm:px-6 lg:px-8 py-8">
    <div class="max-w-7xl mx-auto">
        
        <!-- Header -->
        <div class="mb-8">
            <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                <div>
                    <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-2">إدارة الأنشطة</h1>
                    <p class="text-gray-600">عرض وإدارة جميع الأنشطة المجدولة</p>
                </div>
                <a href="{{ route('live-activities.create') }}" 
                   class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white rounded-xl font-bold transition-all duration-300 shadow-lg hover:shadow-xl">
                    <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 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                    إنشاء نشاط جديد
                </a>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mb-8">
            <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white shadow-xl transform hover:scale-105 transition-all duration-300">
                <div class="flex items-start justify-between mb-4">
                    <div class="p-3 bg-white/20 rounded-xl backdrop-blur-sm">
                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/>
                        </svg>
                    </div>
                    <span class="text-5xl font-bold opacity-20">{{ $stats['total'] }}</span>
                </div>
                <h3 class="text-xl font-bold">إجمالي الأنشطة</h3>
                <p class="text-sm opacity-90 mt-1">جميع الأنشطة المسجلة</p>
            </div>

            <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl p-6 text-white shadow-xl transform hover:scale-105 transition-all duration-300">
                <div class="flex items-start justify-between mb-4">
                    <div class="p-3 bg-white/20 rounded-xl backdrop-blur-sm">
                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/>
                        </svg>
                    </div>
                    <span class="text-5xl font-bold opacity-20">{{ $stats['scheduled'] }}</span>
                </div>
                <h3 class="text-xl font-bold">مجدولة</h3>
                <p class="text-sm opacity-90 mt-1">في انتظار التنفيذ</p>
            </div>

            <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl p-6 text-white shadow-xl transform hover:scale-105 transition-all duration-300">
                <div class="flex items-start justify-between mb-4">
                    <div class="p-3 bg-white/20 rounded-xl backdrop-blur-sm">
                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
                        </svg>
                    </div>
                    <span class="text-5xl font-bold opacity-20">{{ $stats['confirmed'] }}</span>
                </div>
                <h3 class="text-xl font-bold">مؤكدة</h3>
                <p class="text-sm opacity-90 mt-1">تم تأكيد الحضور</p>
            </div>

            <div class="bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl p-6 text-white shadow-xl transform hover:scale-105 transition-all duration-300">
                <div class="flex items-start justify-between mb-4">
                    <div class="p-3 bg-white/20 rounded-xl backdrop-blur-sm">
                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                        </svg>
                    </div>
                    <span class="text-5xl font-bold opacity-20">{{ $stats['pending_review'] }}</span>
                </div>
                <h3 class="text-xl font-bold">تحتاج مراجعة</h3>
                <p class="text-sm opacity-90 mt-1">إثباتات في الانتظار</p>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-2xl shadow-lg p-6 mb-8">
            <form method="GET" class="flex flex-col lg:flex-row gap-4">
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-2">الحالة</label>
                    <select name="status" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                        <option value="">جميع الحالات</option>
                        <option value="scheduled" {{ request('status') == 'scheduled' ? 'selected' : '' }}>مجدولة</option>
                        <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }}>مؤكدة</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>في الانتظار</option>
                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>ملغية</option>
                    </select>
                </div>

                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-2">نوع النشاط</label>
                    <select name="type" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                        <option value="">جميع الأنواع</option>
                        @foreach($activityTypes as $type)
                        <option value="{{ $type->id }}" {{ request('type') == $type->id ? 'selected' : '' }}>
                            {{ $type->display_name }}
                        </option>
                        @endforeach
                    </select>
                </div>

                <div class="flex items-end gap-2">
                    <button type="submit" class="px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white rounded-xl font-medium transition-all duration-300 shadow-lg hover:shadow-xl flex items-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        بحث
                    </button>
                    <a href="{{ route('live-activities.manage') }}" class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-medium transition-all duration-300">
                        إعادة تعيين
                    </a>
                </div>
            </form>
        </div>

        <!-- Activities Grid - نظام الكاردات المحسّن -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($activities as $activity)
            <div class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100 group">
                
                <!-- Header مع الأيقونة والحالة -->
                <div class="relative h-24 bg-gradient-to-br from-blue-500 via-blue-600 to-purple-600">
                    <div class="absolute inset-0 bg-black bg-opacity-10"></div>
                    
                    <!-- أيقونة النشاط -->
                    <div class="absolute top-4 right-4 p-3 bg-white/20 backdrop-blur-sm rounded-xl">
                        @if($activity->activityType->icon === 'video')
                        <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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                        </svg>
                        @elseif($activity->activityType->icon === 'users')
                        <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 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                        </svg>
                        @else
                        <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="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"/>
                        </svg>
                        @endif
                    </div>

                    <!-- حالة النشاط -->
                    <div class="absolute top-4 left-4">
                        <span class="px-3 py-1 rounded-lg text-xs font-bold bg-white/90 backdrop-blur-sm
                            @if($activity->status === 'scheduled') text-blue-700
                            @elseif($activity->status === 'confirmed') text-green-700
                            @elseif($activity->status === 'pending') text-yellow-700
                            @else text-gray-700
                            @endif">
                            {{ $activity->status_label }}
                        </span>
                    </div>
                </div>

                <!-- المحتوى -->
                <div class="p-5">
                    <!-- العنوان -->
                    <h3 class="text-lg font-bold text-gray-900 mb-2 line-clamp-2">
                        {{ $activity->activityType->display_name }}
                    </h3>
                    
                    @if($activity->title)
                    <p class="text-sm text-gray-600 mb-3 line-clamp-1">{{ $activity->title }}</p>
                    @endif

                    <!-- معلومات النشاط -->
                    <div class="space-y-2 mb-4">
                        <div class="flex items-center gap-2 text-sm text-gray-700">
                            <svg class="w-4 h-4 text-gray-400" 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>
                            <span>{{ $activity->scheduled_date->format('Y-m-d') }}</span>
                        </div>

                        <div class="flex items-center gap-2 text-sm text-gray-700">
                            <svg class="w-4 h-4 text-gray-400" 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>
                            <span>{{ date('h:i A', strtotime($activity->scheduled_time)) }}</span>
                        </div>
                    </div>

                    <!-- المشاركون مع الصور -->
                    <div class="mb-4">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-xs font-medium text-gray-600">المشاركون</span>
                            <span class="text-xs font-bold text-gray-900">{{ $activity->participants->count() }}</span>
                        </div>
                        
                        <!-- صور المشاركين -->
                        <div class="flex items-center gap-2">
                            <div class="flex -space-x-2">
                                @php
                                    $participants = $activity->participants->take(4);
                                    $remainingCount = $activity->participants->count() - 4;
                                    
                                    // فحص حالات الإثباتات والأعذار
                                    $hasProofSubmitted = $activity->participants->where('proof_uploaded_at', '!=', null)->where('reviewed_at', null)->count() > 0;
                                    $hasExcuseSubmitted = $activity->participants->where('excuse_submitted_at', '!=', null)->where('reviewed_at', null)->count() > 0;
                                @endphp
                                
                           @foreach($participants as $participant)
<div class="relative">
 @if($participant->user)
    <img class="w-8 h-8 rounded-full border-2 border-white object-cover" 
         src="{{ $participant->user->avatar_url }}" 
         alt="{{ $participant->user->name }}"
         title="{{ $participant->user->name }}">
@else
    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-400 to-gray-600 flex items-center justify-center border-2 border-white">
        <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
        </svg>
    </div>
@endif

    
    <!-- مؤشر حالة المشارك -->
    @if($participant->proof_uploaded_at && !$participant->reviewed_at)
        <div class="absolute -top-1 -right-1 w-3 h-3 bg-orange-500 border-2 border-white rounded-full" title="تم رفع إثبات"></div>
    @elseif($participant->excuse_submitted_at && !$participant->reviewed_at)
        <div class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-500 border-2 border-white rounded-full" title="تم تقديم عذر"></div>
    @elseif($participant->status === 'confirmed')
        <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 border-2 border-white rounded-full" title="مؤكد"></div>
    @endif
</div>
@endforeach

                                
                                @if($remainingCount > 0)
                                <div class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white flex items-center justify-center">
                                    <span class="text-xs font-bold text-gray-600">+{{ $remainingCount }}</span>
                                </div>
                                @endif
                            </div>

                            <!-- مؤشرات الحاجة للمراجعة -->
                            <div class="flex gap-1 mr-auto">
                                @if($hasProofSubmitted)
                                <div class="px-2 py-1 bg-orange-100 rounded-md" title="يوجد إثباتات تحتاج مراجعة">
                                    <svg class="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                    </svg>
                                </div>
                                @endif
                                
                                @if($hasExcuseSubmitted)
                                <div class="px-2 py-1 bg-yellow-100 rounded-md" title="يوجد أعذار تحتاج مراجعة">
                                    <svg class="w-4 h-4 text-yellow-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>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- الإجراءات بأيقونات فقط -->
                    <div class="flex items-center justify-between pt-4 border-t border-gray-100">
                        <div class="flex items-center gap-1">
                            <!-- عرض التفاصيل -->
                            <a href="{{ route('live-activities.show', $activity) }}" 
                               class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200"
                               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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    <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"/>
                                </svg>
                            </a>

                            @if(!$activity->isPast())
                            <!-- تعديل -->
                            <a href="{{ route('live-activities.edit', $activity) }}" 
                               class="p-2 text-purple-600 hover:bg-purple-50 rounded-lg transition-all duration-200"
                               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="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>
                            </a>

                            <!-- حذف -->
                            <button onclick="deleteActivity({{ $activity->id }})" 
                                    class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-all duration-200"
                                    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>
                            </button>
                            @endif
                        </div>

                        <!-- منشئ النشاط -->
                        <div class="flex items-center gap-1 text-xs text-gray-500">
                            <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="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="truncate max-w-[80px]">{{ $activity->creator->name }}</span>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-span-full">
                <div class="bg-white rounded-2xl shadow-lg p-12 text-center">
                    <div class="p-6 bg-gray-100 rounded-full inline-block mb-4">
                        <svg class="w-16 h-16 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 2v12a2 2 0 002 2h10a2 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"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">لا توجد أنشطة</h3>
                    <p class="text-gray-600 mb-6">لم يتم إنشاء أي نشاط بعد</p>
                    <a href="{{ route('live-activities.create') }}" 
                       class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white rounded-xl font-medium transition-all duration-300 shadow-lg hover:shadow-xl">
                        <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 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                        إنشاء أول نشاط
                    </a>
                </div>
            </div>
            @endforelse
        </div>

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

    </div>
</div>

<script>
async function deleteActivity(activityId) {
    if(!confirm('هل أنت متأكد من حذف هذا النشاط؟\nسيتم حذف جميع البيانات المرتبطة به.')) return;
    
    try {
        const response = await fetch(`/live-activities/${activityId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            }
        });
        
        const result = await response.json();
        alert(result.message);
        
        if(result.success) {
            location.reload();
        }
    } catch (error) {
        alert('حدث خطأ أثناء الحذف');
    }
}
</script>
@endsection