@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">
        <!-- صفحة العنوان -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">
                        <i class="fas fa-exclamation-triangle text-orange-600 ml-2"></i>
                        الطلبيات المعلقة والمتأخرة
                    </h1>
                    <p class="text-black">تتبع أوامر الشراء المعلقة والمتأخرة عن موعد التسليم</p>
                </div>
                <div class="flex gap-2">
                    <a 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-all duration-200 shadow-lg hover:shadow-xl">
                        <i class="fas fa-file-excel ml-2"></i>
                        <span>Excel</span>
                    </a>
                    <a 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-all duration-200 shadow-lg hover:shadow-xl">
                        <i class="fas fa-file-pdf ml-2"></i>
                        <span>PDF</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- الملخص الإحصائي -->
        <div class="grid grid-cols-1 md: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 mb-1">الطلبيات المعلقة</p>
                        <p class="text-3xl font-bold text-black">{{ count($data['pending'] ?? []) }}</p>
                    </div>
                    <div class="bg-blue-100 rounded-lg p-3">
                        <i class="fas fa-hourglass-half text-blue-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 mb-1">الطلبيات المتأخرة</p>
                        <p class="text-3xl font-bold text-black">{{ count($data['overdue'] ?? []) }}</p>
                    </div>
                    <div class="bg-red-100 rounded-lg p-3">
                        <i class="fas fa-exclamation-circle text-red-600 text-2xl"></i>
                    </div>
                </div>
            </div>

            <!-- المبلغ الإجمالي المعلق -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-yellow-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-1">المبلغ المعلق</p>
                        <p class="text-2xl font-bold text-black">
                            {{ number_format($data['total_pending_amount'] ?? 0, 2) }} ر.س
                        </p>
                    </div>
                    <div class="bg-yellow-100 rounded-lg p-3">
                        <i class="fas fa-money-bill-wave text-yellow-600 text-2xl"></i>
                    </div>
                </div>
            </div>

            <!-- المبلغ الإجمالي المتأخر -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-orange-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-1">المبلغ المتأخر</p>
                        <p class="text-2xl font-bold text-black">
                            {{ number_format($data['total_overdue_amount'] ?? 0, 2) }} ر.س
                        </p>
                    </div>
                    <div class="bg-orange-100 rounded-lg p-3">
                        <i class="fas fa-exclamation text-orange-600 text-2xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- الطلبيات المعلقة -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8 border border-gray-200">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-clock ml-2"></i>
                    الطلبيات المعلقة ({{ count($data['pending'] ?? []) }})
                </h2>
            </div>

            @if(count($data['pending'] ?? []) > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">#</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">رقم الطلب</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">المورد</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">تاريخ الطلب</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">المبلغ الإجمالي</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">عدد البنود</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">مدة الانتظار (أيام)</th>
                            <th class="px-6 py-4 text-center text-sm font-semibold text-black">الحالة</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($data['pending'] as $item)
                        <tr class="hover:bg-blue-50 transition-colors duration-150">
                            <td class="px-6 py-4 text-black font-medium">{{ $loop->iteration }}</td>
                            <td class="px-6 py-4">
                                <a href="/purchasing/orders/{{ $item['id'] }}" class="text-blue-600 hover:text-blue-900 font-semibold">
                                    {{ $item['po_number'] }}
                                </a>
                            </td>
                            <td class="px-6 py-4">
                                <div class="font-medium text-black">{{ $item['supplier_name'] }}</div>
                            </td>
                            <td class="px-6 py-4 text-sm text-black">
                                {{ \Carbon\Carbon::parse($item['po_date'])->format('Y-m-d') }}
                            </td>
                            <td class="px-6 py-4">
                                <span class="font-semibold text-black">{{ number_format($item['total_amount'], 2) }} ر.س</span>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-700">
                                    {{ $item['item_count'] }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="font-semibold text-yellow-600">{{ $item['days_pending'] }}</span>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-700">
                                    <span class="w-2 h-2 bg-yellow-500 rounded-full ml-2"></span>
                                    معلق
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="px-6 py-12 text-center">
                <div class="flex flex-col items-center justify-center">
                    <i class="fas fa-check-circle text-green-400 text-4xl mb-3"></i>
                    <p class="text-black font-medium">لا توجد طلبيات معلقة</p>
                    <p class="text-black text-sm mt-1">جميع الطلبيات تم استلامها بنجاح</p>
                </div>
            </div>
            @endif
        </div>

        <!-- الطلبيات المتأخرة -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
            <div class="bg-gradient-to-r from-red-600 to-red-700 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-exclamation-triangle ml-2"></i>
                    الطلبيات المتأخرة ({{ count($data['overdue'] ?? []) }})
                </h2>
            </div>

            @if(count($data['overdue'] ?? []) > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">#</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">رقم الطلب</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">المورد</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">تاريخ التسليم المتوقع</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">المبلغ الإجمالي</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">الحالة الحالية</th>
                            <th class="px-6 py-4 text-right text-sm font-semibold text-black">أيام التأخير</th>
                            <th class="px-6 py-4 text-center text-sm font-semibold text-black">مؤشر</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($data['overdue'] as $item)
                        <tr class="hover:bg-red-50 transition-colors duration-150">
                            <td class="px-6 py-4 text-black font-medium">{{ $loop->iteration }}</td>
                            <td class="px-6 py-4">
                                <a href="/purchasing/orders/{{ $item['id'] }}" class="text-blue-600 hover:text-blue-900 font-semibold">
                                    {{ $item['po_number'] }}
                                </a>
                            </td>
                            <td class="px-6 py-4">
                                <div class="font-medium text-black">{{ $item['supplier_name'] }}</div>
                            </td>
                            <td class="px-6 py-4 text-sm text-black">
                                {{ \Carbon\Carbon::parse($item['delivery_date'])->format('Y-m-d') }}
                            </td>
                            <td class="px-6 py-4">
                                <span class="font-semibold text-black">{{ number_format($item['total_amount'], 2) }} ر.س</span>
                            </td>
                            <td class="px-6 py-4">
                                @php
                                    $status = $item['status'];
                                    $statusLabels = [
                                        'pending' => 'معلق',
                                        'sent' => 'مرسل',
                                        'received' => 'مستلم',
                                        'completed' => 'مكتمل',
                                        'cancelled' => 'ملغى'
                                    ];
                                @endphp
                                @if($status == 'pending')
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-700">
                                        {{ $statusLabels[$status] ?? $status }}
                                    </span>
                                @elseif($status == 'sent')
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-700">
                                        {{ $statusLabels[$status] ?? $status }}
                                    </span>
                                @elseif($status == 'received' || $status == 'completed')
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-700">
                                        {{ $statusLabels[$status] ?? $status }}
                                    </span>
                                @elseif($status == 'cancelled')
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-black">
                                        {{ $statusLabels[$status] ?? $status }}
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-black">
                                        {{ $status }}
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                @if($item['days_overdue'] > 14)
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-red-100 text-red-700">
                                        {{ $item['days_overdue'] }} يوم
                                    </span>
                                @elseif($item['days_overdue'] > 7)
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-orange-100 text-orange-700">
                                        {{ $item['days_overdue'] }} يوم
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-yellow-100 text-yellow-700">
                                        {{ $item['days_overdue'] }} يوم
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-center">
                                @if($item['days_overdue'] > 14)
                                    <div class="text-center">
                                        <span class="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
                                        <p class="text-xs text-red-600 font-semibold mt-1">حرج</p>
                                    </div>
                                @elseif($item['days_overdue'] > 7)
                                    <div class="text-center">
                                        <span class="inline-block w-3 h-3 bg-orange-500 rounded-full"></span>
                                        <p class="text-xs text-orange-600 font-semibold mt-1">تحذير</p>
                                    </div>
                                @else
                                    <div class="text-center">
                                        <span class="inline-block w-3 h-3 bg-yellow-500 rounded-full"></span>
                                        <p class="text-xs text-yellow-600 font-semibold mt-1">ملاحظة</p>
                                    </div>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="px-6 py-12 text-center">
                <div class="flex flex-col items-center justify-center">
                    <i class="fas fa-check-circle text-green-400 text-4xl mb-3"></i>
                    <p class="text-black font-medium">لا توجد طلبيات متأخرة</p>
                    <p class="text-black text-sm mt-1">تم استقبال جميع الطلبيات في الموعد المحدد</p>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
    // تنبيهات بصرية للطلبيات المتأخرة الحرجة
    document.addEventListener('DOMContentLoaded', function() {
        const overdueCells = document.querySelectorAll('tr:has(span:contains("حرج"))');
        overdueCells.forEach(cell => {
            cell.classList.add('bg-red-50');
        });
    });

    // دالة تصدير إلى Excel
    function exportToExcel() {
        const table = document.querySelector('table');
        let csv = '\uFEFF';
        
        table.querySelectorAll('tr').forEach(row => {
            const cells = row.querySelectorAll('td, th');
            cells.forEach(cell => {
                csv += '"' + cell.textContent.trim() + '",';
            });
            csv += '\n';
        });

        const link = document.createElement('a');
        link.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
        link.download = 'pending-overdue-' + new Date().toISOString().split('T')[0] + '.csv';
        link.click();
    }
</script>
@endpush
@endsection