@extends('layouts.app')

@section('content')
<div class="container mx-auto p-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-black">ملخص المخزون</h1>
        <p class="text-black mt-2">نظرة عامة على حالة المخزون والإحصائيات</p>
    </div>

    <!-- بطاقات الملخص -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <!-- إجمالي الأصناف -->
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-black text-sm">إجمالي الأصناف</p>
                    <p class="text-2xl font-bold text-blue-600 mt-2">{{ $summary['total_items'] ?? 0 }}</p>
                </div>
                <i class="fas fa-cubes text-blue-300 text-4xl opacity-50"></i>
            </div>
        </div>

        <!-- عدد المخازن -->
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-black text-sm">عدد المخازن</p>
                    <p class="text-2xl font-bold text-green-600 mt-2">{{ $summary['total_warehouses'] ?? 0 }}</p>
                </div>
                <i class="fas fa-warehouse text-green-300 text-4xl opacity-50"></i>
            </div>
        </div>

        <!-- عدد التصنيفات -->
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-purple-500">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-black text-sm">عدد التصنيفات</p>
                    <p class="text-2xl font-bold text-purple-600 mt-2">{{ $summary['total_categories'] ?? 0 }}</p>
                </div>
                <i class="fas fa-list text-purple-300 text-4xl opacity-50"></i>
            </div>
        </div>

        <!-- مخزون منخفض -->
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-orange-500">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-black text-sm">مخزون منخفض</p>
                    <p class="text-2xl font-bold text-orange-600 mt-2">{{ $summary['low_stock_items'] ?? 0 }}</p>
                </div>
                <i class="fas fa-exclamation-triangle text-orange-300 text-4xl opacity-50"></i>
            </div>
        </div>
    </div>

    <!-- روابط سريعة -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <a href="{{ route('inventory.reports.low-stock-items') }}" class="bg-white rounded-lg shadow p-6 hover:shadow-lg transition-shadow">
            <i class="fas fa-exclamation text-orange-600 text-3xl mb-4"></i>
            <h3 class="font-semibold text-black mb-2">أصناف منخفضة المخزون</h3>
            <p class="text-black text-sm">عرض الأصناف التي تحتاج إعادة طلب</p>
        </a>

        <a href="{{ route('inventory.reports.stock-balances') }}" class="bg-white rounded-lg shadow p-6 hover:shadow-lg transition-shadow">
            <i class="fas fa-calculator text-blue-600 text-3xl mb-4"></i>
            <h3 class="font-semibold text-black mb-2">أرصدة الأصناف</h3>
            <p class="text-black text-sm">عرض الكميات المتاحة لكل صنف</p>
        </a>

        <a href="{{ route('inventory.reports.item-movements') }}" class="bg-white rounded-lg shadow p-6 hover:shadow-lg transition-shadow">
            <i class="fas fa-exchange-alt text-green-600 text-3xl mb-4"></i>
            <h3 class="font-semibold text-black mb-2">حركات الأصناف</h3>
            <p class="text-black text-sm">عرض سجل الحركات والتحويلات</p>
        </a>
    </div>
</div>
@endsection