@extends('layouts.superadmin')
@section('title', 'تحليلات البلاغات والاعتراضات')

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    <!-- Page Header -->
    <div class="mb-6">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">تحليلات البلاغات والاعتراضات</h1>
                <p class="text-gray-600 dark:text-gray-400">نظرة شاملة على إحصائيات وتحليلات البلاغات والاعتراضات</p>
            </div>
            <div class="flex gap-2">
                <select id="periodSelector" onchange="updatePeriod()" 
                        class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white">
                    <option value="7" {{ $period == '7' ? 'selected' : '' }}>آخر 7 أيام</option>
                    <option value="30" {{ $period == '30' ? 'selected' : '' }}>آخر 30 يوم</option>
                    <option value="90" {{ $period == '90' ? 'selected' : '' }}>آخر 3 أشهر</option>
                    <option value="365" {{ $period == '365' ? 'selected' : '' }}>آخر سنة</option>
                </select>
                <a href="{{ route('superadmin.reports-objections.index') }}" 
                   class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    العودة للقائمة
                </a>
            </div>
        </div>
    </div>

    <!-- الإحصائيات الرئيسية -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm border-t-4 border-blue-500">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">إجمالي الطلبات</h3>
                    <p class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-2">{{ $analytics['total_requests'] }}</p>
                </div>
                <div class="p-3 bg-blue-100 dark:bg-blue-900/20 rounded-full">
                    <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" 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>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">في آخر {{ $period }} يوم</p>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm border-t-4 border-green-500">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">متوسط وقت الاستجابة</h3>
                    <p class="text-3xl font-bold text-green-600 dark:text-green-400 mt-2">{{ number_format($analytics['response_time'], 1) }}</p>
                </div>
                <div class="p-3 bg-green-100 dark:bg-green-900/20 rounded-full">
                    <svg class="w-8 h-8 text-green-600 dark:text-green-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>
                </div>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">ساعة للمراجعة</p>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm border-t-4 border-orange-500">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">البلاغات</h3>
                    <p class="text-3xl font-bold text-orange-600 dark:text-orange-400 mt-2">{{ $analytics['by_type']['report'] ?? 0 }}</p>
                </div>
                <div class="p-3 bg-orange-100 dark:bg-orange-900/20 rounded-full">
                    <svg class="w-8 h-8 text-orange-600 dark:text-orange-400" 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-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                </div>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                {{ $analytics['total_requests'] > 0 ? round(($analytics['by_type']['report'] ?? 0) / $analytics['total_requests'] * 100, 1) : 0 }}% من المجموع
            </p>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm border-t-4 border-purple-500">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">الاعتراضات</h3>
                    <p class="text-3xl font-bold text-purple-600 dark:text-purple-400 mt-2">{{ $analytics['by_type']['objection'] ?? 0 }}</p>
                </div>
                <div class="p-3 bg-purple-100 dark:bg-purple-900/20 rounded-full">
                    <svg class="w-8 h-8 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                {{ $analytics['total_requests'] > 0 ? round(($analytics['by_type']['objection'] ?? 0) / $analytics['total_requests'] * 100, 1) : 0 }}% من المجموع
            </p>
        </div>
    </div>

    <!-- الرسوم البيانية -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- توزيع الحالات -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">توزيع الحالات</h3>
            <div class="space-y-4">
                @php
                    $totalStatus = array_sum($analytics['by_status']->toArray());
                @endphp
                @foreach(['pending' => 'معلقة', 'approved' => 'مقبولة', 'rejected' => 'مرفوضة'] as $status => $statusText)
                    @php
                        $count = $analytics['by_status'][$status] ?? 0;
                        $percentage = $totalStatus > 0 ? ($count / $totalStatus) * 100 : 0;
                        $colorClass = match($status) {
                            'pending' => 'bg-yellow-500',
                            'approved' => 'bg-green-500', 
                            'rejected' => 'bg-red-500',
                            default => 'bg-gray-500'
                        };
                    @endphp
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3 space-x-reverse">
                            <div class="w-4 h-4 rounded-full {{ $colorClass }}"></div>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $statusText }}</span>
                        </div>
                        <div class="flex items-center space-x-2 space-x-reverse">
                            <span class="text-sm text-gray-500 dark:text-gray-400">{{ number_format($percentage, 1) }}%</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $count }}</span>
                        </div>
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                        <div class="{{ $colorClass }} h-2 rounded-full transition-all duration-300" style="width: {{ $percentage }}%"></div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- أكثر المرسلين -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">أكثر المرسلين نشاطاً</h3>
            <div class="space-y-4">
                @forelse($analytics['top_senders'] as $sender)
                    <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <div class="flex items-center space-x-3 space-x-reverse">
                            <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-medium">
                                {{ substr($sender->user->name ?? 'غير محدد', 0, 2) }}
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $sender->user->name ?? 'غير محدد' }}</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $sender->count }} طلب</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-medium text-blue-600 dark:text-blue-400">{{ $sender->count }}</div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-4 text-gray-500 dark:text-gray-400">
                        <p>لا توجد بيانات متاحة</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- الرسم البياني اليومي -->
    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm mb-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">الطلبات اليومية</h3>
        <div class="h-64">
            <canvas id="dailyChart"></canvas>
        </div>
    </div>

    <!-- جدول التفاصيل -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">تفاصيل الفترة المحددة</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-900">
                    <tr>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">المقياس</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">القيمة</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">الوصف</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">إجمالي الطلبات</td>
                        <td class="px-6 py-4 text-sm text-blue-600 dark:text-blue-400 font-semibold">{{ $analytics['total_requests'] }}</td>
                        <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">جميع البلاغات والاعتراضات</td>
                    </tr>
                    <tr class="bg-gray-50 dark:bg-gray-700">
                        <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">معدل الاستجابة</td>
                        <td class="px-6 py-4 text-sm text-green-600 dark:text-green-400 font-semibold">
                            {{ $analytics['total_requests'] > 0 ? number_format((($analytics['by_status']['approved'] ?? 0) + ($analytics['by_status']['rejected'] ?? 0)) / $analytics['total_requests'] * 100, 1) : 0 }}%
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">الطلبات التي تم مراجعتها</td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">معدل القبول</td>
                        <td class="px-6 py-4 text-sm text-green-600 dark:text-green-400 font-semibold">
                            {{ $analytics['total_requests'] > 0 ? number_format(($analytics['by_status']['approved'] ?? 0) / $analytics['total_requests'] * 100, 1) : 0 }}%
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">الطلبات المقبولة من المجموع</td>
                    </tr>
                    <tr class="bg-gray-50 dark:bg-gray-700">
                        <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">متوسط وقت المراجعة</td>
                        <td class="px-6 py-4 text-sm text-yellow-600 dark:text-yellow-400 font-semibold">{{ number_format($analytics['response_time'], 1) }} ساعة</td>
                        <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">من الإرسال حتى المراجعة</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// رسم بياني للطلبات اليومية
const dailyData = @json($analytics['daily_requests']->pluck('count'));
const dailyLabels = @json($analytics['daily_requests']->map(function($item) { return \Carbon\Carbon::parse($item->date)->format('m/d'); }));

const ctx = document.getElementById('dailyChart').getContext('2d');
const dailyChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dailyLabels,
        datasets: [{
            label: 'عدد الطلبات',
            data: dailyData,
            borderColor: 'rgb(59, 130, 246)',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            borderWidth: 2,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: true,
                position: 'top',
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 1
                }
            }
        }
    }
});

// تغيير الفترة الزمنية
function updatePeriod() {
    const period = document.getElementById('periodSelector').value;
    window.location.href = `{{ route('superadmin.reports-objections.analytics') }}?period=${period}`;
}

// تحديث البيانات تلقائياً كل 5 دقائق
setInterval(function() {
    fetch(`{{ route('superadmin.reports-objections.analytics') }}?period={{ $period }}`, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        // تحديث الإحصائيات الرئيسية
        updateMainStats(data);
        
        // تحديث الرسم البياني
        updateDailyChart(data.daily_requests);
    })
    .catch(error => {
        console.log('خطأ في تحديث البيانات:', error);
    });
}, 300000); // كل 5 دقائق

function updateMainStats(data) {
    // يمكن إضافة تحديث الإحصائيات هنا
    console.log('تم تحديث البيانات:', data);
}

function updateDailyChart(dailyRequests) {
    const newData = dailyRequests.map(item => item.count);
    const newLabels = dailyRequests.map(item => {
        const date = new Date(item.date);
        return (date.getMonth() + 1) + '/' + date.getDate();
    });
    
    dailyChart.data.labels = newLabels;
    dailyChart.data.datasets[0].data = newData;
    dailyChart.update();
}
</script>
@endsection