{{-- Partial: Stats Widget Component --}}
{{-- Path: resources/views/general/live-activities/partials/stats-widget.blade.php --}}

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-6">
    
    {{-- Total Activities --}}
    <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/30 dark:to-blue-800/30 rounded-xl p-5 shadow-sm hover:shadow-md transition">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-blue-600 dark:text-blue-400 mb-1">إجمالي الأنشطة</p>
                <p class="text-3xl font-bold text-blue-900 dark:text-blue-100">{{ $stats['total'] ?? 0 }}</p>
            </div>
            <div class="p-3 bg-blue-200 dark:bg-blue-700 rounded-xl">
                <svg class="w-8 h-8 text-blue-600 dark:text-blue-300" 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>
        </div>
        <div class="mt-3 flex items-center text-xs text-blue-700 dark:text-blue-300">
            <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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
            </svg>
            <span>جميع الأنشطة المجدولة</span>
        </div>
    </div>

    {{-- Scheduled --}}
    <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/30 dark:to-indigo-800/30 rounded-xl p-5 shadow-sm hover:shadow-md transition">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-indigo-600 dark:text-indigo-400 mb-1">قيد الانتظار</p>
                <p class="text-3xl font-bold text-indigo-900 dark:text-indigo-100">{{ $stats['scheduled'] ?? 0 }}</p>
            </div>
            <div class="p-3 bg-indigo-200 dark:bg-indigo-700 rounded-xl">
                <svg class="w-8 h-8 text-indigo-600 dark:text-indigo-300" 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="mt-3 flex items-center text-xs text-indigo-700 dark:text-indigo-300">
            <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span>في انتظار التنفيذ</span>
        </div>
    </div>

    {{-- Confirmed --}}
    <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/30 dark:to-green-800/30 rounded-xl p-5 shadow-sm hover:shadow-md transition">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-green-600 dark:text-green-400 mb-1">مؤكدة</p>
                <p class="text-3xl font-bold text-green-900 dark:text-green-100">{{ $stats['confirmed'] ?? 0 }}</p>
            </div>
            <div class="p-3 bg-green-200 dark:bg-green-700 rounded-xl">
                <svg class="w-8 h-8 text-green-600 dark:text-green-300" 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="mt-3 flex items-center text-xs text-green-700 dark:text-green-300">
            <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="M5 13l4 4L19 7"/>
            </svg>
            <span>تم التأكيد والإنجاز</span>
        </div>
    </div>

    {{-- My Activities --}}
    <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/30 dark:to-purple-800/30 rounded-xl p-5 shadow-sm hover:shadow-md transition">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-purple-600 dark:text-purple-400 mb-1">أنشطتي</p>
                <p class="text-3xl font-bold text-purple-900 dark:text-purple-100">{{ $stats['my_activities'] ?? 0 }}</p>
            </div>
            <div class="p-3 bg-purple-200 dark:bg-purple-700 rounded-xl">
                <svg class="w-8 h-8 text-purple-600 dark:text-purple-300" 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>
        </div>
        <div class="mt-3 flex items-center text-xs text-purple-700 dark:text-purple-300">
            <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"/>
            </svg>
            <span>أنشطتي الشخصية</span>
        </div>
    </div>

    {{-- Pending (إذا كانت موجودة في الإحصائيات) --}}
    @if(isset($stats['pending']) && $stats['pending'] > 0)
    <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/30 dark:to-yellow-800/30 rounded-xl p-5 shadow-sm hover:shadow-md transition">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-yellow-600 dark:text-yellow-400 mb-1">تحتاج مراجعة</p>
                <p class="text-3xl font-bold text-yellow-900 dark:text-yellow-100">{{ $stats['pending'] }}</p>
            </div>
            <div class="p-3 bg-yellow-200 dark:bg-yellow-700 rounded-xl">
                <svg class="w-8 h-8 text-yellow-600 dark:text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
            </div>
        </div>
        <div class="mt-3 flex items-center text-xs text-yellow-700 dark:text-yellow-300">
            <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"/>
            </svg>
            <span>في انتظار المراجعة</span>
        </div>
    </div>
    @endif

    {{-- Absent No Excuse (إذا كانت موجودة في الإحصائيات) --}}
    @if(isset($stats['absent_no_excuse']) && $stats['absent_no_excuse'] > 0)
    <div class="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/30 dark:to-red-800/30 rounded-xl p-5 shadow-sm hover:shadow-md transition">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-red-600 dark:text-red-400 mb-1">غياب بدون عذر</p>
                <p class="text-3xl font-bold text-red-900 dark:text-red-100">{{ $stats['absent_no_excuse'] }}</p>
            </div>
            <div class="p-3 bg-red-200 dark:bg-red-700 rounded-xl">
                <svg class="w-8 h-8 text-red-600 dark:text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
        </div>
        <div class="mt-3 flex items-center text-xs text-red-700 dark:text-red-300">
            <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="M6 18L18 6M6 6l12 12"/>
            </svg>
            <span>حالات غياب غير مبررة</span>
        </div>
    </div>
    @endif

    {{-- Total Points (للأعضاء) --}}
    @if(isset($stats['total_points_earned']))
    <div class="bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900/30 dark:to-amber-800/30 rounded-xl p-5 shadow-sm hover:shadow-md transition">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-amber-600 dark:text-amber-400 mb-1">إجمالي النقاط</p>
                <p class="text-3xl font-bold text-amber-900 dark:text-amber-100">{{ $stats['total_points_earned'] ?? 0 }}</p>
            </div>
            <div class="p-3 bg-amber-200 dark:bg-amber-700 rounded-xl">
                <svg class="w-8 h-8 text-amber-600 dark:text-amber-300" 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>
            </div>
        </div>
        <div class="mt-3 flex items-center text-xs text-amber-700 dark:text-amber-300">
            <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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
            </svg>
            <span>من جميع الأنشطة</span>
            @if(isset($stats['bonus_points']) && $stats['bonus_points'] > 0)
                <span class="mr-2 px-2 py-0.5 bg-amber-300 dark:bg-amber-700 rounded-full text-xs font-bold">
                    +{{ $stats['bonus_points'] }} نقاط إضافية
                </span>
            @endif
        </div>
    </div>
    @endif

</div>

{{-- Optional: Performance Chart --}}
@if(isset($stats['chart_data']))
<div class="mt-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
    <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
        <svg class="w-6 h-6 text-blue-600" 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"/>
        </svg>
        الأداء خلال الفترة
    </h3>
    <div class="h-64">
        {{-- يمكنك إضافة مكتبة رسم بياني هنا مثل Chart.js --}}
        <canvas id="performanceChart"></canvas>
    </div>
</div>
@endif