@extends('layouts.app')

@section('content')
<div class="container m-auto p-4 sm:p-6 lg:p-8">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <h1 class="text-2xl font-bold text-black mb-6">ملخص المخزون</h1>

        <!-- بطاقات الملخص -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <!-- إجمالي قيمة المخزون -->
            <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-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-2xl font-bold text-blue-600 mt-2">{{ number_format($totalInventoryValue, 2) }}</p>
                    </div>
                    <i class="fas fa-box text-blue-300 text-3xl opacity-50"></i>
                </div>
            </div>

            <!-- عدد الأصناف -->
            <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-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-2xl font-bold text-green-600 mt-2">{{ $totalItems }}</p>
                    </div>
                    <i class="fas fa-cubes text-green-300 text-3xl opacity-50"></i>
                </div>
            </div>

            <!-- عدد المخازن -->
            <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-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-2xl font-bold text-purple-600 mt-2">{{ $totalWarehouses }}</p>
                    </div>
                    <i class="fas fa-warehouse text-purple-300 text-3xl opacity-50"></i>
                </div>
            </div>
        </div>

        <!-- جدول ملخص المخازن -->
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-right text-xs font-medium text-black uppercase tracking-wider">
                            المخزن
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-black uppercase tracking-wider">
                            عدد الأصناف
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-black uppercase tracking-wider">
                            إجمالي الكمية
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-black uppercase tracking-wider">
                            إجمالي القيمة
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-black uppercase tracking-wider">
                            النسبة من الإجمالي
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($warehouseSummaries as $summary)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-black">
                            {{ $summary['warehouse'] }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ $summary['items_count'] }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($summary['total_quantity'], 2) }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-blue-600">
                            {{ number_format($summary['total_value'], 2) }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-black">
                            @if($totalInventoryValue > 0)
                                {{ number_format(($summary['total_value'] / $totalInventoryValue) * 100, 1) }}%
                            @else
                                0%
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-6 py-12 text-center text-black">
                            <i class="fas fa-inbox text-4xl text-black mb-4"></i>
                            <p class="mt-2">لا توجد بيانات للعرض</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection