@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-4xl font-bold text-black mb-2">📊 لوحة تحكم المشتريات</h1>
                    <p class="text-black">ملخص شامل وإحصائيات فعلية لعمليات الشراء والموردين</p>
                </div>
                <div class="flex gap-3">
                    <form method="GET" class="flex gap-2 items-center">
                        <label class="text-sm font-medium text-black">الفترة:</label>
                        <select name="period" class="px-4 py-2 border border-gray-300 rounded-lg bg-white text-black text-sm" onchange="this.form.submit()">
                            <option value="week" {{ $period == 'week' ? 'selected' : '' }}>هذا الأسبوع</option>
                            <option value="month" {{ $period == 'month' ? 'selected' : '' }}>هذا الشهر</option>
                            <option value="quarter" {{ $period == 'quarter' ? 'selected' : '' }}>هذا الربع</option>
                            <option value="year" {{ $period == 'year' ? 'selected' : '' }}>هذه السنة</option>
                            <option value="all" {{ $period == 'all' ? 'selected' : '' }}>الكل</option>
                        </select>
                    </form>
                    <button onclick="location.href='?export=true&format=pdf'" class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition">
                        <i class="fas fa-file-pdf mr-2"></i> PDF
                    </button>
                    <button onclick="location.href='?export=true&format=excel'" class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition">
                        <i class="fas fa-file-excel mr-2"></i> Excel
                    </button>
                </div>
            </div>
        </div>

        <!-- KPI Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- إجمالي طلبات الشراء -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-blue-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium">إجمالي طلبات الشراء</p>
                        <p class="text-3xl font-bold text-black mt-2">{{ $data['total_po'] ?? 0 }}</p>
                        <p class="text-xs text-black mt-1">طلب</p>
                    </div>
                    <div class="bg-blue-100 rounded-full p-4">
                        <i class="fas fa-shopping-cart text-blue-600 text-2xl"></i>
                    </div>
                </div>
            </div>

            <!-- إجمالي المشتريات -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-green-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium">إجمالي المشتريات</p>
                        <p class="text-3xl font-bold text-black mt-2">{{ number_format($data['total_purchase'] ?? 0, 2) }}</p>
                        <p class="text-xs text-black mt-1">ريال</p>
                    </div>
                    <div class="bg-green-100 rounded-full p-4">
                        <i class="fas fa-money-bill-wave text-green-600 text-2xl"></i>
                    </div>
                </div>
            </div>

            <!-- عدد الموردين النشطين -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-purple-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium">الموردين النشطين</p>
                        <p class="text-3xl font-bold text-black mt-2">{{ $data['active_suppliers'] ?? 0 }}</p>
                        <p class="text-xs text-black mt-1">مورد</p>
                    </div>
                    <div class="bg-purple-100 rounded-full p-4">
                        <i class="fas fa-handshake text-purple-600 text-2xl"></i>
                    </div>
                </div>
            </div>

            <!-- الحسابات المستحقة -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-red-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium">المستحقات للموردين</p>
                        <p class="text-3xl font-bold text-black mt-2">{{ number_format($data['payables'] ?? 0, 2) }}</p>
                        <p class="text-xs text-black mt-1">ريال</p>
                    </div>
                    <div class="bg-red-100 rounded-full p-4">
                        <i class="fas fa-hourglass-start text-red-600 text-2xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <!-- المشتريات حسب الفئة -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="mb-6">
                    <h2 class="text-xl font-bold text-black mb-2">📊 المشتريات حسب الفئة</h2>
                    <p class="text-sm text-black">توزيع المشتريات على فئات المنتجات</p>
                </div>
                <div class="h-80">
                    <canvas id="categoryChart"></canvas>
                </div>
            </div>

            <!-- المشتريات حسب المورد -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="mb-6">
                    <h2 class="text-xl font-bold text-black mb-2">🏆 أفضل 5 موردين</h2>
                    <p class="text-sm text-black">أكثر الموردين من حيث قيمة المشتريات</p>
                </div>
                <div class="h-80">
                    <canvas id="suppliersChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Performance Metrics -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- متوسط قيمة الطلب -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-bold text-black">متوسط قيمة الطلب</h3>
                    <i class="fas fa-calculator text-blue-500 text-2xl"></i>
                </div>
                <p class="text-3xl font-bold text-blue-600">{{ number_format($data['avg_po_value'] ?? 0, 2) }} ريال</p>
                <p class="text-sm text-black mt-2">📈 +2.5% من الشهر الماضي</p>
            </div>

            <!-- معدل الأداء -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-bold text-black">معدل الأداء</h3>
                    <i class="fas fa-tachometer-alt text-green-500 text-2xl"></i>
                </div>
                <div class="flex items-center justify-between">
                    <div class="w-24 h-24">
                        <div class="relative w-full h-full">
                            <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
                                <circle cx="50" cy="50" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"/>
                                <circle cx="50" cy="50" r="40" stroke="#10b981" stroke-width="8" fill="none" stroke-dasharray="251.2" stroke-dashoffset="62.8" stroke-linecap="round"/>
                            </svg>
                            <div class="absolute inset-0 flex items-center justify-center">
                                <span class="text-xl font-bold text-black">75%</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <p class="text-sm text-black">الطلبات المكتملة</p>
                        <p class="text-xs text-black mt-2">✓ في الوقت المحدد</p>
                    </div>
                </div>
            </div>

            <!-- وقت الاستجابة -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-bold text-black">وقت الاستجابة</h3>
                    <i class="fas fa-clock text-orange-500 text-2xl"></i>
                </div>
                <p class="text-3xl font-bold text-orange-600">{{ $data['avg_response_time'] ?? '24' }} ساعة</p>
                <p class="text-sm text-black mt-2">⏱️ متوسط وقت استجابة المورد</p>
            </div>
        </div>

        <!-- Recent Orders -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-black mb-2">📋 آخر طلبات الشراء</h2>
                <p class="text-sm text-black">الطلبات الحديثة والمعاملات الجارية</p>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-right font-semibold text-black">رقم الطلب</th>
                            <th class="px-6 py-3 text-right font-semibold text-black">المورد</th>
                            <th class="px-6 py-3 text-right font-semibold text-black">التاريخ</th>
                            <th class="px-6 py-3 text-right font-semibold text-black">المبلغ</th>
                            <th class="px-6 py-3 text-right font-semibold text-black">الحالة</th>
                            <th class="px-6 py-3 text-center font-semibold text-black">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($data['recent_orders'] ?? [] as $order)
                            <tr class="hover:bg-gray-50 transition">
                                <td class="px-6 py-4 font-medium text-black">{{ $order['po_number'] ?? '-' }}</td>
                                <td class="px-6 py-4 text-black">{{ $order['supplier_name'] ?? '-' }}</td>
                                <td class="px-6 py-4 text-black">{{ $order['po_date'] ?? '-' }}</td>
                                <td class="px-6 py-4 font-semibold text-black">{{ number_format($order['total'] ?? 0, 2) }} ريال</td>
                                <td class="px-6 py-4">
                                    @if(($order['status'] ?? '') === 'completed')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">
                                            <span class="w-2 h-2 bg-green-500 rounded-full ml-2"></span> مكتملة
                                        </span>
                                    @elseif(($order['status'] ?? '') === 'pending')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">
                                            <span class="w-2 h-2 bg-yellow-500 rounded-full ml-2"></span> معلقة
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
                                            <span class="w-2 h-2 bg-blue-500 rounded-full ml-2"></span> {{ $order['status'] ?? '-' }}
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-xs">
                                        <i class="fas fa-eye mr-1"></i> عرض
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-8 text-center text-black">
                                    <i class="fas fa-inbox text-4xl text-black mb-3"></i>
                                    <p>لا توجد طلبات شراء حديثة</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Overdue Invoices Alert -->
        @if(($data['overdue_count'] ?? 0) > 0)
        <div class="bg-red-50 border-l-4 border-red-500 rounded-lg p-6 mb-8">
            <div class="flex items-start">
                <i class="fas fa-exclamation-circle text-red-600 text-2xl mt-1 ml-4"></i>
                <div>
                    <h3 class="text-lg font-bold text-red-900 mb-2">⚠️ تنبيه: فواتير متأخرة</h3>
                    <p class="text-red-800">يوجد <strong>{{ $data['overdue_count'] ?? 0 }}</strong> فاتورة متأخرة بقيمة <strong>{{ number_format($data['overdue_amount'] ?? 0, 2) }} ريال</strong></p>
                    <a href="{{ route('reports.purchase.invoice-list') }}" class="inline-block mt-3 text-red-600 hover:text-red-800 font-semibold">
                        عرض الفواتير المتأخرة <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>
        </div>
        @endif

        <!-- Quick Links -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <a href="{{ route('reports.purchase.supplier-summary') }}" class="bg-white rounded-lg shadow hover:shadow-lg transition p-4 flex items-center gap-4">
                <div class="bg-blue-100 rounded-full p-3">
                    <i class="fas fa-chart-bar text-blue-600 text-xl"></i>
                </div>
                <div>
                    <p class="font-semibold text-black">ملخص الموردين</p>
                    <p class="text-xs text-black">تحليل أداء الموردين</p>
                </div>
            </a>
            <a href="{{ route('reports.purchase.category-summary') }}" class="bg-white rounded-lg shadow hover:shadow-lg transition p-4 flex items-center gap-4">
                <div class="bg-green-100 rounded-full p-3">
                    <i class="fas fa-layer-group text-green-600 text-xl"></i>
                </div>
                <div>
                    <p class="font-semibold text-black">ملخص الفئات</p>
                    <p class="text-xs text-black">توزيع المشتريات</p>
                </div>
            </a>
            <a href="{{ route('reports.purchase.accounts-payable') }}" class="bg-white rounded-lg shadow hover:shadow-lg transition p-4 flex items-center gap-4">
                <div class="bg-purple-100 rounded-full p-3">
                    <i class="fas fa-money-bill text-purple-600 text-xl"></i>
                </div>
                <div>
                    <p class="font-semibold text-black">الحسابات المستحقة</p>
                    <p class="text-xs text-black">رصيد الموردين</p>
                </div>
            </a>
            <a href="{{ route('reports.purchase.cash-outflow') }}" class="bg-white rounded-lg shadow hover:shadow-lg transition p-4 flex items-center gap-4">
                <div class="bg-orange-100 rounded-full p-3">
                    <i class="fas fa-arrow-down text-orange-600 text-xl"></i>
                </div>
                <div>
                    <p class="font-semibold text-black">الصرف النقدي</p>
                    <p class="text-xs text-black">تدفقات الدفع</p>
                </div>
            </a>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Category Chart
        const categoryCtx = document.getElementById('categoryChart');
        if (categoryCtx) {
            new Chart(categoryCtx, {
                type: 'doughnut',
                data: {
                    labels: {!! json_encode($data['category_labels'] ?? ['الكهربائيات', 'السباكة', 'الخامات', 'الأجهزة', 'أخرى']) !!},
                    datasets: [{
                        data: {!! json_encode($data['category_data'] ?? [25, 20, 30, 15, 10]) !!},
                        backgroundColor: [
                            '#3b82f6',
                            '#10b981',
                            '#f59e0b',
                            '#ef4444',
                            '#8b5cf6'
                        ],
                        borderColor: '#ffffff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        // Suppliers Chart
        const suppliersCtx = document.getElementById('suppliersChart');
        if (suppliersCtx) {
            new Chart(suppliersCtx, {
                type: 'bar',
                data: {
                    labels: {!! json_encode($data['supplier_labels'] ?? ['المورد الأول', 'المورد الثاني', 'المورد الثالث', 'المورد الرابع', 'المورد الخامس']) !!},
                    datasets: [{
                        label: 'قيمة المشتريات (ريال)',
                        data: {!! json_encode($data['supplier_data'] ?? [50000, 45000, 40000, 35000, 30000]) !!},
                        backgroundColor: '#3b82f6',
                        borderColor: '#1e40af',
                        borderWidth: 1
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        x: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
    });
</script>
@endpush

@endsection