<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-l text-gray-800 leading-tight">
            {{ __('تقارير الأداء التفصيلية') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <!-- مؤشرات الأداء الرئيسية -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                <div class="bg-white rounded-lg shadow p-6">
                    <h3 class="text-sm text-gray-600 mb-2">نسبة الربحية</h3>
                    <p class="text-4xl font-bold text-blue-600">{{ $kpis['profitMargin'] }}%</p>
                    <p class="text-xs text-gray-500 mt-2">من الإيرادات الكلية</p>
                </div>

                <div class="bg-white rounded-lg shadow p-6">
                    <h3 class="text-sm text-gray-600 mb-2">معدل إكمال المشاريع</h3>
                    <p class="text-4xl font-bold text-green-600">{{ $kpis['projectCompletion'] }}%</p>
                    <p class="text-xs text-gray-500 mt-2">المشاريع المكتملة</p>
                </div>

                <div class="bg-white rounded-lg shadow p-6">
                    <h3 class="text-sm text-gray-600 mb-2">إنتاجية الموظف</h3>
                    <p class="text-3xl font-bold text-purple-600">{{ number_format($kpis['employeeProductivity']) }}</p>
                    <p class="text-xs text-gray-500 mt-2">إيرادات لكل موظف</p>
                </div>

                <div class="bg-white rounded-lg shadow p-6">
                    <h3 class="text-sm text-gray-600 mb-2">استخدام الأصول</h3>
                    <p class="text-4xl font-bold text-orange-600">{{ $kpis['assetTurnover'] }}</p>
                    <p class="text-xs text-gray-500 mt-2">دوران الأصول</p>
                </div>

                <div class="bg-white rounded-lg shadow p-6">
                    <h3 class="text-sm text-gray-600 mb-2">نسبة السيولة</h3>
                    <p class="text-4xl font-bold text-red-600">{{ $kpis['currentRatio'] }}</p>
                    <p class="text-xs text-gray-500 mt-2">السيولة المتاحة</p>
                </div>

                <div class="bg-white rounded-lg shadow p-6">
                    <h3 class="text-sm text-gray-600 mb-2">استخدام القوى العاملة</h3>
                    <p class="text-4xl font-bold text-indigo-600">{{ $kpis['workForceUtilization'] }}%</p>
                    <p class="text-xs text-gray-500 mt-2">الموظفون النشطون</p>
                </div>
            </div>

            <!-- أداء الأقسام -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-lg shadow p-6">
                    <h3 class="font-semibold text-lg mb-4">أداء الأقسام</h3>
                    <div class="space-y-4">
                        @if($departmentPerformance)
                            @foreach($departmentPerformance as $dept)
                            <div class="p-4 bg-gray-50 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="font-medium">{{ $dept->department ?? 'غير محدد' }}</span>
                                    <span class="text-sm text-gray-600">{{ $dept->employees }} موظفين</span>
                                </div>
                                <p class="text-sm text-gray-600">متوسط الراتب: {{ number_format($dept->avg_salary) }} ريال</p>
                            </div>
                            @endforeach
                        @else
                            <p class="text-gray-500 text-center py-4">لا توجد بيانات متاحة</p>
                        @endif
                    </div>
                </div>

                <!-- استخدام الأصول -->
                <div class="bg-white rounded-lg shadow p-6">
                    <h3 class="font-semibold text-lg mb-4">استخدام الأصول</h3>
                    <canvas id="assetUtilizationChart" height="100"></canvas>
                </div>
            </div>

            <!-- الاتجاهات والتوقعات -->
            <div class="bg-white rounded-lg shadow p-6 mb-6">
                <h3 class="font-semibold text-lg mb-4">الاتجاهات الشهرية</h3>
                <canvas id="trendsChart" height="50"></canvas>
            </div>

            <!-- جدول الأداء التفصيلي -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="font-semibold text-lg mb-4">ملخص مؤشرات الأداء</h3>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-right text-sm font-medium text-gray-700">المؤشر</th>
                                <th class="px-6 py-3 text-right text-sm font-medium text-gray-700">القيمة</th>
                                <th class="px-6 py-3 text-right text-sm font-medium text-gray-700">الحالة</th>
                                <th class="px-6 py-3 text-right text-sm font-medium text-gray-700">الملاحظات</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 font-medium">نسبة الربحية</td>
                                <td class="px-6 py-4">{{ $kpis['profitMargin'] }}%</td>
                                <td class="px-6 py-4"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">ممتاز</span></td>
                                <td class="px-6 py-4 text-sm text-gray-600">مؤشر إيجابي</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 font-medium">دوران المستحقات</td>
                                <td class="px-6 py-4">{{ $kpis['receivablesTurnover'] }} مرات</td>
                                <td class="px-6 py-4"><span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">جيد</span></td>
                                <td class="px-6 py-4 text-sm text-gray-600">تحصيل فعال</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 font-medium">معدل إكمال المشاريع</td>
                                <td class="px-6 py-4">{{ $kpis['projectCompletion'] }}%</td>
                                <td class="px-6 py-4"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">متوسط</span></td>
                                <td class="px-6 py-4 text-sm text-gray-600">يحتاج تحسين</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 font-medium">إنتاجية الموظف</td>
                                <td class="px-6 py-4">{{ number_format($kpis['employeeProductivity']) }} ريال</td>
                                <td class="px-6 py-4"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">جيد</span></td>
                                <td class="px-6 py-4 text-sm text-gray-600">إيرادات قوية</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 font-medium">استخدام القوى العاملة</td>
                                <td class="px-6 py-4">{{ $kpis['workForceUtilization'] }}%</td>
                                <td class="px-6 py-4"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">ممتاز</span></td>
                                <td class="px-6 py-4 text-sm text-gray-600">فريق نشط</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Asset Utilization Chart
        const assetCtx = document.getElementById('assetUtilizationChart').getContext('2d');
        new Chart(assetCtx, {
            type: 'radar',
            data: {
                labels: ['الآلات', 'المعدات', 'المركبات', 'الكمبيوتر', 'الأثاث'],
                datasets: [{
                    label: 'الاستخدام %',
                    data: [85, 75, 90, 70, 60],
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    fill: true
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        labels: { font: { family: "'Cairo', sans-serif" } }
                    }
                }
            }
        });

        // Trends Chart
        const trendsCtx = document.getElementById('trendsChart').getContext('2d');
        new Chart(trendsCtx, {
            type: 'line',
            data: {
                labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو'],
                datasets: [
                    {
                        label: 'الإيرادات',
                        data: [1000000, 1200000, 1100000, 1300000, 1400000, 1500000],
                        borderColor: '#10b981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        fill: true,
                        tension: 0.3
                    },
                    {
                        label: 'المصروفات',
                        data: [800000, 900000, 850000, 1000000, 1050000, 1100000],
                        borderColor: '#ef4444',
                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
                        fill: true,
                        tension: 0.3
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        labels: { font: { family: "'Cairo', sans-serif" } }
                    }
                }
            }
        });
    </script>
    @endpush
</x-app-layout>
