@extends($layout)

@section('title', 'الإحصائيات الرئيسية')

@section('content')
<div class="container-fluid px-4 py-6">
    {{-- Header --}}
    <div class="mb-6">
        <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-2">الإحصائيات الرئيسية</h1>
        <p class="text-gray-600">نظرة شاملة على جميع أنواع النقاط والأنشطة</p>
    </div>

    {{-- Date Filter --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5 mb-6">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">من تاريخ</label>
                <input type="date" name="date_from" value="{{ $startDate }}"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">إلى تاريخ</label>
                <input type="date" name="date_to" value="{{ $endDate }}"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
            <div class="flex items-end">
                <button type="submit" class="w-full px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                    تطبيق
                </button>
            </div>
        </form>
    </div>

    {{-- Stats Cards --}}
    @php
        // ✅ حساب الساعات الصحيحة من الكنترولر (تم تمريرها بالفعل في $stats['total_hours'])
        // الكنترولر يرسل القيمة الصحيحة، لكن للتوضيح في الواجهة:
        $displayTotalHours = $stats['total_hours'] ?? 0;
    @endphp
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        @include('general.score-records.partials._stats-card', [
            'title' => 'إجمالي السجلات',
            'value' => number_format($stats['total_records']),
            'icon' => '<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 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>',
            'iconBg' => 'bg-blue-50'
        ])

        @include('general.score-records.partials._stats-card', [
            'title' => 'إجمالي النقاط',
            'value' => number_format($stats['total_points']),
            'valueColor' => $stats['total_points'] >= 0 ? 'text-green-600' : 'text-red-600',
            'icon' => '<svg class="w-6 h-6 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>',
            'iconBg' => 'bg-purple-50'
        ])

        @include('general.score-records.partials._stats-card', [
            'title' => 'متوسط النقاط',
            'value' => number_format($stats['average_points'], 2),
            'valueColor' => 'text-orange-600',
            'subtitle' => 'لكل سجل',
            'icon' => '<svg class="w-6 h-6 text-orange-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>',
            'iconBg' => 'bg-orange-50'
        ])

        @include('general.score-records.partials._stats-card', [
            'title' => 'إجمالي الساعات',
            'value' => number_format($displayTotalHours, 1) . ' ساعة',
            'subtitle' => 'فقط الحضور الفعلي',
            'valueColor' => 'text-indigo-600',
            'icon' => '<svg class="w-6 h-6 text-indigo-600" 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>',
            'iconBg' => 'bg-indigo-50'
        ])
    </div>

    {{-- Points Breakdown --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl shadow-sm border border-green-200 p-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="p-3 bg-green-100 rounded-lg">
                    <svg class="w-6 h-6 text-green-600" 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>
                </div>
                <div>
                    <h3 class="text-sm text-gray-600">النقاط الموجبة</h3>
                    <p class="text-2xl font-bold text-green-600">+{{ number_format($stats['total_points_added']) }}</p>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-red-50 to-pink-50 rounded-xl shadow-sm border border-red-200 p-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="p-3 bg-red-100 rounded-lg">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/>
                    </svg>
                </div>
                <div>
                    <h3 class="text-sm text-gray-600">النقاط المخصومة</h3>
                    <p class="text-2xl font-bold text-red-600">-{{ number_format($stats['total_points_deducted']) }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- ملاحظة توضيحية حول الساعات --}}
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
        <div class="flex items-start gap-3">
            <svg class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div class="text-sm text-blue-800">
                <p class="font-semibold mb-1">ملاحظة هامة حول احتساب الساعات:</p>
                <ul class="list-disc list-inside space-y-1 text-blue-700">
                    <li>يتم احتساب الساعات فقط للحضور الفعلي في الأنشطة المباشرة والقيستات</li>
                    <li>لا يتم احتساب ساعات للغياب بعذر أو بدون عذر</li>
                    <li>الساعات تُحسب فقط عندما تكون الحالة: "محضر" (confirmed)</li>
                </ul>
            </div>
        </div>
    </div>

    {{-- Breakdown by Type --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h2 class="text-xl font-bold text-gray-800 mb-6">التفصيل حسب نوع النشاط</h2>
        
        @if($stats['by_type']->isEmpty())
            <p class="text-center text-gray-500 py-8">لا توجد بيانات للفترة المحددة</p>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($stats['by_type'] as $type)
                    <div class="p-5 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl border border-blue-200">
                        <h3 class="font-semibold text-gray-800 mb-3">
                            @if($type->source_type == 'evaluation') تقييم يومي
                            @elseif($type->source_type == 'live_activity') نشاط مباشر
                            @elseif($type->source_type == 'guest') قيست
                            @elseif($type->source_type == 'violation') مخالفة
                            @elseif($type->source_type == 'warning') إنذار
                            @elseif($type->source_type == 'honor_reward') تكريم/مكافأة
                            @elseif($type->source_type == 'competition') مسابقة
                            @else {{ $type->source_type }}
                            @endif
                        </h3>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">العدد:</span>
                                <span class="font-bold text-gray-800">{{ number_format($type->count) }}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">النقاط:</span>
                                <span class="font-bold {{ $type->points >= 0 ? 'text-green-600' : 'text-red-600' }}">
                                    {{ $type->points >= 0 ? '+' : '' }}{{ number_format($type->points) }}
                                </span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Quick Links --}}
    <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="{{ route('score-records.statistics.evaluations') }}" class="p-4 bg-white rounded-lg border hover:shadow-md transition text-center">
            <p class="text-sm text-gray-600">التقييمات</p>
            <p class="text-lg font-bold text-blue-600">{{ number_format($stats['total_evaluations']) }}</p>
        </a>
        <a href="{{ route('score-records.statistics.live-activities') }}" class="p-4 bg-white rounded-lg border hover:shadow-md transition text-center">
            <p class="text-sm text-gray-600">الأنشطة المباشرة</p>
        </a>
        <a href="{{ route('score-records.statistics.guests') }}" class="p-4 bg-white rounded-lg border hover:shadow-md transition text-center">
            <p class="text-sm text-gray-600">القيستات</p>
        </a>
        <a href="{{ route('score-records.statistics.violations') }}" class="p-4 bg-white rounded-lg border hover:shadow-md transition text-center">
            <p class="text-sm text-gray-600">المخالفات</p>
        </a>
    </div>
</div>

@push('scripts')
<script>
// ملاحظة للمطورين
console.log('✅ تم إصلاح عرض الساعات في الإحصائيات:');
console.log('- الساعات تُحسب فقط للحضور الفعلي (status = confirmed)');
console.log('- يتم استبعاد الغياب بعذر (absent_with_excuse)');
console.log('- يتم استبعاد الغياب بدون عذر (absent_without_excuse)');
console.log('- القيمة تأتي من الكنترولر بعد الفلترة الصحيحة');
</script>
@endpush
@endsection