@extends('layouts.app')

@section('title', 'تقارير المخزون الشاملة')

@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 flex items-center">
                        <i class="fas fa-chart-bar text-blue-600 ml-3"></i>
                        تقارير المخزون الشاملة
                    </h1>
                    <p class="text-black">جميع التقارير والتحليلات المتاحة في نظام إدارة المخزون</p>
                </div>
            </div>

            <!-- QUICK STATS -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
                <div class="bg-white rounded-lg shadow p-4 border-l-4 border-blue-500">
                    <p class="text-black text-sm font-medium">إجمالي التقارير</p>
                    <p class="text-3xl font-bold text-black">24</p>
                </div>
                <div class="bg-white rounded-lg shadow p-4 border-l-4 border-green-500">
                    <p class="text-black text-sm font-medium">تقارير المخزون</p>
                    <p class="text-3xl font-bold text-black">6</p>
                </div>
                <div class="bg-white rounded-lg shadow p-4 border-l-4 border-purple-500">
                    <p class="text-black text-sm font-medium">تقارير المستندات</p>
                    <p class="text-3xl font-bold text-black">3</p>
                </div>
                <div class="bg-white rounded-lg shadow p-4 border-l-4 border-orange-500">
                    <p class="text-black text-sm font-medium">تقارير التحليل</p>
                    <p class="text-3xl font-bold text-black">15</p>
                </div>
            </div>
        </div>

        <!-- 1. MAIN INVENTORY REPORTS -->
        <section class="mb-12">
            <div class="flex items-center mb-6">
                <div class="h-1 w-1 bg-blue-600 rounded-full ml-3"></div>
                <h2 class="text-2xl font-bold text-black flex items-center">
                    <i class="fas fa-boxes text-blue-600 ml-2"></i>
                    تقارير المخزون الأساسية
                </h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @php
                $mainReports = [
                    ['url' => 'inventory.reports.inventory-summary', 'icon' => 'fa-list-alt', 'color' => 'blue', 'title' => 'ملخص المخزون', 'desc' => 'إحصائيات شاملة عن حالة المخزون'],
                    ['url' => 'inventory.reports.stock-balances', 'icon' => 'fa-chart-pie', 'color' => 'green', 'title' => 'أرصدة الأصناف', 'desc' => 'جدول مفصل برصيد كل صنف'],
                    ['url' => 'inventory.reports.inventory-value', 'icon' => 'fa-money-bill-wave', 'color' => 'purple', 'title' => 'قيمة المخزون', 'desc' => 'القيمة الإجمالية للمخزون'],
                    ['url' => 'inventory.reports.warehouse-summary', 'icon' => 'fa-warehouse', 'color' => 'yellow', 'title' => 'ملخص المخازن', 'desc' => 'أداء وحالة كل مخزن'],
                    ['url' => 'inventory.reports.low-stock-items', 'icon' => 'fa-exclamation-triangle', 'color' => 'red', 'title' => 'الأصناف الناقصة', 'desc' => 'أصناف بكميات منخفضة'],
                    ['url' => 'inventory.reports.inventory-movements', 'icon' => 'fa-arrows-alt', 'color' => 'cyan', 'title' => 'حركة المخزون', 'desc' => 'سجل حركة الوارد والصرف'],
                ];
                @endphp
                
                @foreach($mainReports as $report)
                    <a href="{{ route($report['url']) }}" class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-200 border-t-4 border-{{ $report['color'] }}-500 group">
                        <div class="flex items-center mb-4">
                            <div class="p-3 rounded-full bg-{{ $report['color'] }}-100 group-hover:bg-{{ $report['color'] }}-200 transition-colors">
                                <i class="fas {{ $report['icon'] }} text-{{ $report['color'] }}-600 text-xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-black ml-3">{{ $report['title'] }}</h3>
                        </div>
                        <p class="text-black text-sm mb-4">{{ $report['desc'] }}</p>
                        <span class="inline-flex items-center text-{{ $report['color'] }}-600 font-medium text-sm group-hover:text-{{ $report['color'] }}-700">
                            عرض <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </span>
                    </a>
                @endforeach
            </div>
        </section>

        <!-- 2. ITEM-SPECIFIC REPORTS -->
        <section class="mb-12">
            <div class="flex items-center mb-6">
                <div class="h-1 w-1 bg-green-600 rounded-full ml-3"></div>
                <h2 class="text-2xl font-bold text-black flex items-center">
                    <i class="fas fa-tag text-green-600 ml-2"></i>
                    تقارير الأصناف والحركة
                </h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @php
                $itemReports = [
                    ['url' => 'inventory.reports.item-movements', 'icon' => 'fa-sync-alt', 'color' => 'teal', 'title' => 'حركة الأصناف', 'desc' => 'تفاصيل حركة كل صنف'],
                    ['url' => 'inventory.reports.slow-moving-items', 'icon' => 'fa-tortoise', 'color' => 'orange', 'title' => 'الأصناف الراكدة', 'desc' => 'أصناف بحركة بطيئة'],
                    ['url' => 'inventory.reports.expiry-items', 'icon' => 'fa-calendar-times', 'color' => 'rose', 'title' => 'الأصناف منتهية الصلاحية', 'desc' => 'أصناف قارب انتهاء صلاحيتها'],
                ];
                @endphp
                
                @foreach($itemReports as $report)
                    <a href="{{ route($report['url']) }}" class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-200 border-t-4 border-{{ $report['color'] }}-500 group">
                        <div class="flex items-center mb-4">
                            <div class="p-3 rounded-full bg-{{ $report['color'] }}-100 group-hover:bg-{{ $report['color'] }}-200 transition-colors">
                                <i class="fas {{ $report['icon'] }} text-{{ $report['color'] }}-600 text-xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-black ml-3">{{ $report['title'] }}</h3>
                        </div>
                        <p class="text-black text-sm mb-4">{{ $report['desc'] }}</p>
                        <span class="inline-flex items-center text-{{ $report['color'] }}-600 font-medium text-sm group-hover:text-{{ $report['color'] }}-700">
                            عرض <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </span>
                    </a>
                @endforeach
            </div>
        </section>

        <!-- 3. WAREHOUSE DOCUMENTS -->
        <section class="mb-12">
            <div class="flex items-center mb-6">
                <div class="h-1 w-1 bg-purple-600 rounded-full ml-3"></div>
                <h2 class="text-2xl font-bold text-black flex items-center">
                    <i class="fas fa-file-invoice text-purple-600 ml-2"></i>
                    تقارير مستندات المخزن
                </h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @php
                $docReports = [
                    ['url' => 'inventory.reports.receipts', 'icon' => 'fa-inbox', 'color' => 'indigo', 'title' => 'إيصالات الاستقبال', 'desc' => 'تفاصيل الوارد والمستقبلات'],
                    ['url' => 'inventory.reports.issues', 'icon' => 'fa-share', 'color' => 'fuchsia', 'title' => 'أوامر الصرف', 'desc' => 'سجل الأصناف المصروفة'],
                    ['url' => 'inventory.reports.transfers', 'icon' => 'fa-exchange-alt', 'color' => 'sky', 'title' => 'التحويلات بين المخازن', 'desc' => 'تفاصيل نقل الأصناف'],
                ];
                @endphp
                
                @foreach($docReports as $report)
                    <a href="{{ route($report['url']) }}" class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-200 border-t-4 border-{{ $report['color'] }}-500 group">
                        <div class="flex items-center mb-4">
                            <div class="p-3 rounded-full bg-{{ $report['color'] }}-100 group-hover:bg-{{ $report['color'] }}-200 transition-colors">
                                <i class="fas {{ $report['icon'] }} text-{{ $report['color'] }}-600 text-xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-black ml-3">{{ $report['title'] }}</h3>
                        </div>
                        <p class="text-black text-sm mb-4">{{ $report['desc'] }}</p>
                        <span class="inline-flex items-center text-{{ $report['color'] }}-600 font-medium text-sm group-hover:text-{{ $report['color'] }}-700">
                            عرض <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </span>
                    </a>
                @endforeach
            </div>
        </section>

        <!-- 4. ADVANCED ANALYSIS -->
        <section class="mb-12">
            <div class="flex items-center mb-6">
                <div class="h-1 w-1 bg-orange-600 rounded-full ml-3"></div>
                <h2 class="text-2xl font-bold text-black flex items-center">
                    <i class="fas fa-chart-line text-orange-600 ml-2"></i>
                    تقارير التحليل المتقدمة
                </h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @php
                $analysisReports = [
                    ['url' => 'inventory.reports.abc-analysis', 'icon' => 'fa-project-diagram', 'color' => 'amber', 'title' => 'تحليل ABC', 'desc' => 'تصنيف الأصناف حسب الأهمية'],
                    ['url' => 'inventory.reports.warehouse-efficiency', 'icon' => 'fa-tachometer-alt', 'color' => 'lime', 'title' => 'كفاءة المخازن', 'desc' => 'مؤشرات أداء كل مخزن'],
                    ['url' => 'inventory.reports.turnover-rate', 'icon' => 'fa-redo', 'color' => 'emerald', 'title' => 'معدل دوران المخزون', 'desc' => 'سرعة حركة الأصناف'],
                    ['url' => 'inventory.reports.variance-analysis', 'icon' => 'fa-chart-area', 'color' => 'cyan', 'title' => 'تحليل الانحرافات', 'desc' => 'الفروقات عن المتوقع'],
                    ['url' => 'inventory.reports.storage-cost', 'icon' => 'fa-coins', 'color' => 'yellow', 'title' => 'تكلفة التخزين', 'desc' => 'تحليل تكاليف التخزين'],
                    ['url' => 'inventory.reports.waste-returns', 'icon' => 'fa-trash-alt', 'color' => 'red', 'title' => 'النفايات والمردودات', 'desc' => 'تقرير النفايات والمرتجعات'],
                ];
                @endphp
                
                @foreach($analysisReports as $report)
                    <a href="{{ route($report['url']) }}" class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-200 border-t-4 border-{{ $report['color'] }}-500 group">
                        <div class="flex items-center mb-4">
                            <div class="p-3 rounded-full bg-{{ $report['color'] }}-100 group-hover:bg-{{ $report['color'] }}-200 transition-colors">
                                <i class="fas {{ $report['icon'] }} text-{{ $report['color'] }}-600 text-xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-black ml-3">{{ $report['title'] }}</h3>
                        </div>
                        <p class="text-black text-sm mb-4">{{ $report['desc'] }}</p>
                        <span class="inline-flex items-center text-{{ $report['color'] }}-600 font-medium text-sm group-hover:text-{{ $report['color'] }}-700">
                            عرض <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </span>
                    </a>
                @endforeach
            </div>
        </section>

        <!-- 5. COMPARISON & TRENDS -->
        <section class="mb-12">
            <div class="flex items-center mb-6">
                <div class="h-1 w-1 bg-rose-600 rounded-full ml-3"></div>
                <h2 class="text-2xl font-bold text-black flex items-center">
                    <i class="fas fa-balance-scale text-rose-600 ml-2"></i>
                    تقارير المقارنة والاتجاهات
                </h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @php
                $comparisonReports = [
                    ['url' => 'inventory.reports.periods-comparison', 'icon' => 'fa-calendar-alt', 'color' => 'violet', 'title' => 'مقارنة الفترات', 'desc' => 'مقارنة بين فترات زمنية'],
                    ['url' => 'inventory.reports.warehouses-comparison', 'icon' => 'fa-sitemap', 'color' => 'blue', 'title' => 'مقارنة المخازن', 'desc' => 'مقارنة أداء المخازن'],
                    ['url' => 'inventory.reports.trends-analysis', 'icon' => 'fa-chart-line', 'color' => 'green', 'title' => 'تحليل الاتجاهات', 'desc' => 'اتجاهات الحركة على مدى الوقت'],
                ];
                @endphp
                
                @foreach($comparisonReports as $report)
                    <a href="{{ route($report['url']) }}" class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-200 border-t-4 border-{{ $report['color'] }}-500 group">
                        <div class="flex items-center mb-4">
                            <div class="p-3 rounded-full bg-{{ $report['color'] }}-100 group-hover:bg-{{ $report['color'] }}-200 transition-colors">
                                <i class="fas {{ $report['icon'] }} text-{{ $report['color'] }}-600 text-xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-black ml-3">{{ $report['title'] }}</h3>
                        </div>
                        <p class="text-black text-sm mb-4">{{ $report['desc'] }}</p>
                        <span class="inline-flex items-center text-{{ $report['color'] }}-600 font-medium text-sm group-hover:text-{{ $report['color'] }}-700">
                            عرض <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </span>
                    </a>
                @endforeach
            </div>
        </section>

        <!-- FOOTER SECTION -->
        <section class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-8 border border-blue-200">
            <div class="text-center mb-6">
                <h3 class="text-xl font-bold text-black mb-2">تحتاج إلى مساعدة أو ملاحظات؟</h3>
                <p class="text-black">جميع التقارير متاحة مع إمكانيات تصدير وتصفية متقدمة</p>
            </div>
            <div class="flex justify-center gap-4 flex-wrap">
                <a href="{{ route('inventory.dashboard') }}" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-semibold">
                    <i class="fas fa-home ml-2"></i>
                    الذهاب إلى لوحة التحكم
                </a>
                <a href="{{ route('inventory.items.index') }}" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold">
                    <i class="fas fa-boxes ml-2"></i>
                    إدارة الأصناف
                </a>
                <a href="{{ route('inventory.warehouses.index') }}" class="inline-flex items-center px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-semibold">
                    <i class="fas fa-warehouse ml-2"></i>
                    إدارة المخازن
                </a>
            </div>
        </section>
    </div>
</div>
@endsection