@extends('layouts.app')

@section('title', 'لوحة تحكم المخزون')

@section('content')
<div class="container m-auto p-4 py-6">
    <h1 class="text-2l font-bold mb-6">لوحة تحكم المخزون</h1>

    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 p-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 p-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('success') }}</span>
        </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- المخازن -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                    </svg>
                </div>
                <div class="mr-4">
                    <p class="text-black text-sm">المخازن</p>
                    <p class="text-2l font-bold">{{ $warehousesCount }}</p>
                </div>
            </div>
            <div class="mt-4">
                <a href="{{ route('inventory.warehouses.index') }}" class="text-blue-500 hover:text-blue-700 text-sm">عرض المخازن &larr;</a>
            </div>
        </div>

        <!-- الأصناف -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                    </svg>
                </div>
                <div class="mr-4">
                    <p class="text-black text-sm">الأصناف</p>
                    <p class="text-2l font-bold">{{ $itemsCount }}</p>
                </div>
            </div>
            <div class="mt-4">
                <a href="{{ route('inventory.items.index') }}" class="text-green-500 hover:text-green-700 text-sm">عرض الأصناف &larr;</a>
            </div>
        </div>

        <!-- أذون الصرف -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-red-100 text-red-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                    </svg>
                </div>
                <div class="mr-4">
                    <p class="text-black text-sm">أذون الصرف</p>
                    <p class="text-2l font-bold">{{ $issuesCount }}</p>
                </div>
            </div>
            <div class="mt-4">
                <a href="{{ route('inventory.issues.index') }}" class="text-red-500 hover:text-red-700 text-sm">عرض أذون الصرف &larr;</a>
            </div>
        </div>

        <!-- أذون الاستلام -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-100 text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
                    </svg>
                </div>
                <div class="mr-4">
                    <p class="text-black text-sm">أذون الاستلام</p>
                    <p class="text-2l font-bold">{{ $receiptsCount }}</p>
                </div>
            </div>
            <div class="mt-4">
                <a href="{{ route('inventory.receipts.index') }}" class="text-yellow-500 hover:text-yellow-700 text-sm">عرض أذون الاستلام &larr;</a>
            </div>
        </div>
    </div>

    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-l font-bold mb-4">روابط سريعة</h2>
            <div class="grid grid-cols-2 gap-4">
                <a href="{{ route('inventory.items.create') }}" class="bg-blue-50 hover:bg-blue-100 p-4 rounded-lg flex items-center">
                    <span class="text-blue-500 ml-2">+</span>
                    <span>إضافة صنف جديد</span>
                </a>
                <a href="{{ route('inventory.issues.create') }}" class="bg-red-50 hover:bg-red-100 p-4 rounded-lg flex items-center">
                    <span class="text-red-500 ml-2">+</span>
                    <span>إنشاء إذن صرف</span>
                </a>
                <a href="{{ route('inventory.receipts.create') }}" class="bg-green-50 hover:bg-green-100 p-4 rounded-lg flex items-center">
                    <span class="text-green-500 ml-2">+</span>
                    <span>إنشاء إذن استلام</span>
                </a>
                <a href="{{ route('inventory.transfers.create') }}" class="bg-yellow-50 hover:bg-yellow-100 p-4 rounded-lg flex items-center">
                    <span class="text-yellow-500 ml-2">+</span>
                    <span>إنشاء إذن تحويل</span>
                </a>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-l font-bold mb-4">التقارير</h2>
            <div class="grid grid-cols-2 gap-4">
                <a href="{{ route('inventory.reports.stock-balances') }}" class="bg-purple-50 hover:bg-purple-100 p-4 rounded-lg flex items-center">
                    <span class="text-purple-500 ml-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                        </svg>
                    </span>
                    <span>أرصدة المخزون</span>
                </a>
                <a href="{{ route('inventory.reports.item-movements') }}" class="bg-indigo-50 hover:bg-indigo-100 p-4 rounded-lg flex items-center">
                    <span class="text-indigo-500 ml-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
                        </svg>
                    </span>
                    <span>حركة الأصناف</span>
                </a>
                <a href="{{ route('inventory.reports.inventory-movements') }}" class="bg-pink-50 hover:bg-pink-100 p-4 rounded-lg flex items-center">
                    <span class="text-pink-500 ml-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
                        </svg>
                    </span>
                    <span>حركة المخازن</span>
                </a>
                <a href="{{ route('inventory.reports.inventory-value') }}" class="bg-gray-50 hover:bg-gray-100 p-4 rounded-lg flex items-center">
                    <span class="text-black ml-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </span>
                    <span>تقييم المخزون</span>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection