@extends($layout)

@section('title', 'إحصائيات التكريمات والمكافآت')

@section('content')
<div class="container-fluid px-4 py-6">
    {{-- Header --}}
    <div class="flex items-center gap-4 mb-6">
        <a href="{{ route('score-records.statistics') }}" class="p-2 hover:bg-white rounded-lg transition">
            <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </a>
        <div>
            <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-2">إحصائيات التكريمات والمكافآت</h1>
            <p class="text-gray-600">تحليل شامل للنقاط المكتسبة من التكريمات والمكافآت</p>
        </div>
    </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 --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
        @include('general.score-records.partials._stats-card', [
            'title' => 'إجمالي التكريمات والمكافآت',
            'value' => number_format($stats['total_honors_rewards']),
            'icon' => '<svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>',
            'iconBg' => 'bg-yellow-50'
        ])

        @include('general.score-records.partials._stats-card', [
            'title' => 'إجمالي النقاط',
            'value' => '+' . number_format($stats['total_points']),
            'valueColor' => 'text-green-600',
            'icon' => '<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>',
            'iconBg' => 'bg-green-50'
        ])

        @include('general.score-records.partials._stats-card', [
            'title' => 'متوسط النقاط',
            'value' => $stats['total_honors_rewards'] > 0 ? number_format($stats['total_points'] / $stats['total_honors_rewards'], 1) : '0',
            'valueColor' => 'text-purple-600',
            'subtitle' => 'لكل تكريم/مكافأة',
            '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="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-purple-50'
        ])
    </div>

    {{-- Success Box --}}
    <div class="bg-gradient-to-br from-yellow-50 to-amber-50 rounded-xl shadow-sm border border-yellow-200 p-6">
        <div class="flex items-start gap-4">
            <div class="p-3 bg-yellow-100 rounded-lg flex-shrink-0">
                <svg class="w-8 h-8 text-yellow-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>
            </div>
            <div class="flex-1">
                <h3 class="text-lg font-bold text-gray-800 mb-2">أهمية التكريمات والمكافآت</h3>
                <p class="text-gray-700 leading-relaxed">
                    التكريمات والمكافآت تُمنح للأعضاء المتميزين الذين يبذلون جهداً استثنائياً في خدمة الفريق والمجتمع.
                    هذه التقديرات تعكس التزام العضو وإنجازاته، وتُشجع الجميع على السعي نحو التميز والإبداع في مختلف الأنشطة.
                    كل تكريم يحمل قيمة معنوية كبيرة بالإضافة إلى النقاط المكتسبة.
                </p>
            </div>
        </div>
    </div>
</div>
@endsection