@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_warnings']),
            '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="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>',
            'iconBg' => 'bg-orange-50'
        ])

        @include('general.score-records.partials._stats-card', [
            'title' => 'النقاط المخصومة',
            'value' => '-' . number_format($stats['total_points_deducted']),
            'valueColor' => 'text-orange-600',
            '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="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/></svg>',
            'iconBg' => 'bg-orange-50'
        ])

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

    {{-- Warning Box --}}
    <div class="bg-gradient-to-br from-orange-50 to-yellow-50 rounded-xl shadow-sm border border-orange-200 p-6">
        <div class="flex items-start gap-4">
            <div class="p-3 bg-orange-100 rounded-lg flex-shrink-0">
                <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="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 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