@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">
        <!-- Page 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>
                <a href="{{ route('reports.purchase.index') }}" class="text-blue-600 hover:text-blue-700">
                    <i class="fas fa-arrow-right ml-2"></i> العودة للتقارير
                </a>
            </div>
        </div>

        @if(session('success'))
        <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                </div>
                <div class="mr-3">
                    <p class="text-green-700 font-medium">{{ session('success') }}</p>
                </div>
            </div>
        </div>
        @endif

        @if(!empty($data))
            <!-- Summary Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <!-- Total Purchase Cost -->
                <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-blue-500">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-semibold text-black">إجمالي تكلفة المشتريات</h3>
                        <i class="fas fa-shopping-cart text-blue-500 text-xl"></i>
                    </div>
                    <p class="text-3xl font-bold text-black">{{ $data['summary']['total_purchase_cost'] }}</p>
                    <p class="text-xs text-black mt-2">
                        {{ $data['summary']['po_count'] }} أوامر شراء
                    </p>
                </div>

                <!-- Total Tax -->
                <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-purple-500">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-semibold text-black">الضرائب</h3>
                        <i class="fas fa-percentage text-purple-500 text-xl"></i>
                    </div>
                    <p class="text-3xl font-bold text-black">{{ $data['summary']['total_tax'] }}</p>
                    <p class="text-xs text-black mt-2">
                        {{ $data['cost_breakdown']['tax_percentage'] }}% من الإجمالي
                    </p>
                </div>

                <!-- Total Shipping -->
                <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-amber-500">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-semibold text-black">تكاليف الشحن</h3>
                        <i class="fas fa-truck text-amber-500 text-xl"></i>
                    </div>
                    <p class="text-3xl font-bold text-black">{{ $data['summary']['total_shipping'] }}</p>
                    <p class="text-xs text-black mt-2">
                        {{ $data['cost_breakdown']['shipping_percentage'] }}% من الإجمالي
                    </p>
                </div>

                <!-- Total Landed Cost -->
                <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-green-500">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-semibold text-black">التكلفة الإجمالية</h3>
                        <i class="fas fa-coins text-green-500 text-xl"></i>
                    </div>
                    <p class="text-3xl font-bold text-black">{{ $data['summary']['total_landed_cost'] }}</p>
                    <p class="text-xs text-black mt-2">
                        تكلفة الوحدة: {{ $data['summary']['average_cost_per_unit'] }}
                    </p>
                </div>
            </div>

            <!-- Key Metrics -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                <!-- Statistics Box -->
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-lg font-bold text-black mb-4 flex items-center">
                        <i class="fas fa-chart-bar ml-2 text-blue-600"></i>
                        الإحصائيات الرئيسية
                    </h2>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-black">عدد أوامر الشراء</span>
                            <span class="font-semibold text-black">{{ $data['summary']['po_count'] }}</span>
                        </div>
                        <div class="flex justify-between border-t pt-3">
                            <span class="text-black">إجمالي الأصناف المطلوبة</span>
                            <span class="font-semibold text-black">{{ $data['summary']['total_items_ordered'] }}</span>
                        </div>
                        <div class="flex justify-between border-t pt-3">
                            <span class="text-black">الأصناف المستقبلة</span>
                            <span class="font-semibold text-black">{{ $data['summary']['total_items_received'] }}</span>
                        </div>
                        <div class="flex justify-between border-t pt-3">
                            <span class="text-black">معدل الاستقبال</span>
                            <span class="font-semibold text-green-600">{{ $data['summary']['receipt_completion_rate'] }}%</span>
                        </div>
                    </div>
                </div>

                <!-- Cost Breakdown Percentages -->
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-lg font-bold text-black mb-4 flex items-center">
                        <i class="fas fa-pie-chart ml-2 text-purple-600"></i>
                        توزيع التكاليف
                    </h2>
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-black">تكلفة المشتريات</span>
                                <span class="font-semibold">{{ $data['cost_breakdown']['purchase_cost_percentage'] }}%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-500 h-2 rounded-full" style="width: {{ $data['cost_breakdown']['purchase_cost_percentage'] }}%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-black">الضرائب</span>
                                <span class="font-semibold">{{ $data['cost_breakdown']['tax_percentage'] }}%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-purple-500 h-2 rounded-full" style="width: {{ $data['cost_breakdown']['tax_percentage'] }}%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-black">الشحن</span>
                                <span class="font-semibold">{{ $data['cost_breakdown']['shipping_percentage'] }}%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-amber-500 h-2 rounded-full" style="width: {{ $data['cost_breakdown']['shipping_percentage'] }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Average Values -->
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-lg font-bold text-black mb-4 flex items-center">
                        <i class="fas fa-calculator ml-2 text-green-600"></i>
                        المتوسطات
                    </h2>
                    <div class="space-y-3">
                        <div class="bg-blue-50 p-3 rounded-lg">
                            <p class="text-xs text-black">متوسط تكلفة الوحدة</p>
                            <p class="text-2xl font-bold text-blue-600">{{ $data['summary']['average_cost_per_unit'] }}</p>
                        </div>
                        <div class="bg-green-50 p-3 rounded-lg">
                            <p class="text-xs text-black">متوسط قيمة الفاتورة</p>
                            <p class="text-2xl font-bold text-green-600">{{ $data['summary']['average_invoice_value'] }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Detailed PO List -->
            @if($data['po_details']->count() > 0)
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 mb-8">
                <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                    <h2 class="text-lg font-bold flex items-center">
                        <i class="fas fa-list ml-2"></i>
                        تفاصيل أوامر الشراء
                    </h2>
                </div>
                <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 font-semibold text-black">رقم الأمر</th>
                                <th class="px-6 py-4 text-right font-semibold text-black">المورد</th>
                                <th class="px-6 py-4 text-right font-semibold text-black">التاريخ</th>
                                <th class="px-6 py-4 text-right font-semibold text-black">المبلغ الفرعي</th>
                                <th class="px-6 py-4 text-right font-semibold text-black">الضريبة</th>
                                <th class="px-6 py-4 text-right font-semibold text-black">الشحن</th>
                                <th class="px-6 py-4 text-right font-semibold text-black">الإجمالي</th>
                                <th class="px-6 py-4 text-center font-semibold text-black">الحالة</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @foreach($data['po_details'] as $po)
                            <tr class="hover:bg-blue-50 transition-colors duration-150">
                                <td class="px-6 py-4 font-semibold text-black">{{ $po['po_number'] }}</td>
                                <td class="px-6 py-4 text-black">{{ $po['supplier_name'] }}</td>
                                <td class="px-6 py-4 text-black">{{ $po['po_date'] }}</td>
                                <td class="px-6 py-4 text-black">{{ number_format($po['subtotal'], 2) }}</td>
                                <td class="px-6 py-4 text-black">{{ number_format($po['tax'], 2) }}</td>
                                <td class="px-6 py-4 text-black">{{ number_format($po['shipping'], 2) }}</td>
                                <td class="px-6 py-4 font-semibold text-black">{{ number_format($po['total'], 2) }}</td>
                                <td class="px-6 py-4 text-center">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                                        @if($po['status'] == 'completed') bg-green-100 text-green-700
                                        @elseif($po['status'] == 'pending') bg-yellow-100 text-yellow-700
                                        @else bg-blue-100 text-blue-700 @endif">
                                        {{ ucfirst($po['status']) }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif

            <!-- Product Breakdown -->
            @if($data['product_breakdown']->count() > 0)
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                    <h2 class="text-lg font-bold flex items-center">
                        <i class="fas fa-box-open ml-2"></i>
                        تفصيل الأصناف
                    </h2>
                </div>
                <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 font-semibold text-black">الصنف</th>
                                <th class="px-6 py-4 text-right font-semibold text-black">المطلوب</th>
                                <th class="px-6 py-4 text-right font-semibold text-black">المستقبل</th>
                                <th class="px-6 py-4 text-right font-semibold text-black">سعر الوحدة</th>
                                <th class="px-6 py-4 text-right font-semibold text-black">الإجمالي</th>
                                <th class="px-6 py-4 text-right font-semibold text-black">معدل الإكمال</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @foreach($data['product_breakdown'] as $product)
                            <tr class="hover:bg-blue-50 transition-colors duration-150">
                                <td class="px-6 py-4 font-semibold text-black">{{ $product['name'] }}</td>
                                <td class="px-6 py-4 text-black">{{ $product['quantity_ordered'] }}</td>
                                <td class="px-6 py-4 text-black">{{ $product['quantity_received'] }}</td>
                                <td class="px-6 py-4 text-black">{{ number_format($product['unit_cost'], 2) }}</td>
                                <td class="px-6 py-4 font-semibold text-black">{{ number_format($product['total_cost'], 2) }}</td>
                                <td class="px-6 py-4">
                                    @php
                                        $completionRate = $product['quantity_ordered'] > 0 
                                            ? ($product['quantity_received'] / $product['quantity_ordered']) * 100 
                                            : 0;
                                    @endphp
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-blue-500 h-2 rounded-full" style="width: {{ $completionRate }}%"></div>
                                    </div>
                                    <p class="text-xs text-black mt-1">{{ number_format($completionRate, 1) }}%</p>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @else
            <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-12">
                <div class="text-center">
                    <i class="fas fa-inbox text-black text-5xl mb-4"></i>
                    <p class="text-black font-medium text-lg">لا توجد بيانات للعرض</p>
                    <p class="text-black text-sm mt-1">حاول البحث بمعايير مختلفة</p>
                </div>
            </div>
            @endif
        @else
        <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-12">
            <div class="text-center">
                <i class="fas fa-chart-line text-black text-5xl mb-4"></i>
                <p class="text-black font-medium text-lg">لا توجد بيانات متاحة</p>
                <p class="text-black text-sm mt-1">يرجى التأكد من وجود أوامر شراء في النظام</p>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection