@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-4xl font-bold text-black mb-2">تقارير المشتريات</h1>
        <p class="text-black">إدارة ومراقبة جميع جوانب عمليات الشراء والموردين والفواتير</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-lg hover:shadow-xl transition overflow-hidden">
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
                <h3 class="text-white text-lg font-bold">📊 ملخصات وإحصائيات</h3>
            </div>
            <div class="p-6 space-y-2">
                <a href="{{ route('reports.purchase.dashboard') }}" class="block text-blue-600 hover:text-blue-800 font-semibold">لوحة التحكم</a>
                <a href="{{ route('reports.purchase.supplier-summary') }}" class="block text-blue-600 hover:text-blue-800 font-semibold">ملخص مشتريات الموردين (طلبات الشراء)</a>
                <a href="{{ route('reports.purchase.category-summary') }}" class="block text-blue-600 hover:text-blue-800 font-semibold">ملخص الفئات</a>
                <a href="{{ route('reports.purchase.period-summary') }}" class="block text-blue-600 hover:text-blue-800 font-semibold">ملخص الفترة الزمنية</a>
                <a href="{{ route('reports.purchase.supplier-performance') }}" class="block text-blue-600 hover:text-blue-800 font-semibold">أداء الموردين</a>
                <a href="{{ route('reports.purchase.pending-overdue') }}" class="block text-blue-600 hover:text-blue-800 font-semibold">المعلقة والمتأخرة</a>
                <a href="{{ route('reports.purchase.price-comparison') }}" class="block text-blue-600 hover:text-blue-800 font-semibold">مقارنة الأسعار</a>
                <a href="{{ route('reports.purchase.invoice-movement') }}" class="block text-blue-600 hover:text-blue-800 font-semibold">حركة الفواتير</a>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-lg hover:shadow-xl transition overflow-hidden">
            <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4">
                <h3 class="text-white text-lg font-bold">📋 التفاصيل والقوائم</h3>
            </div>
            <div class="p-6 space-y-2">
                <a href="{{ route('reports.purchase.po-list') }}" class="block text-green-600 hover:text-green-800 font-semibold">قائمة طلبات الشراء</a>
                <a href="{{ route('reports.purchase.invoice-list') }}" class="block text-green-600 hover:text-green-800 font-semibold">قائمة الفواتير</a>
                <a href="{{ route('reports.purchase.partner-statement') }}" class="block text-green-600 hover:text-green-800 font-semibold">كشف حساب شريك (موحد)</a>
                <a href="{{ route('reports.purchase.products-purchased') }}" class="block text-green-600 hover:text-green-800 font-semibold">المنتجات المشتراة</a>
                <a href="{{ route('reports.purchase.grn-report') }}" class="block text-green-600 hover:text-green-800 font-semibold">تقرير مذكرات الاستقبال</a>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-lg hover:shadow-xl transition overflow-hidden">
            <div class="bg-gradient-to-r from-red-500 to-red-600 px-6 py-4">
                <h3 class="text-white text-lg font-bold">✅ الامتثال والجودة</h3>
            </div>
            <div class="p-6 space-y-2">
                <a href="{{ route('reports.purchase.quality-acceptance') }}" class="block text-red-600 hover:text-red-800 font-semibold">قبول الجودة</a>
                <a href="{{ route('reports.purchase.three-way-matching') }}" class="block text-red-600 hover:text-red-800 font-semibold">المطابقة الثلاثية</a>
                <a href="{{ route('reports.purchase.contract-compliance') }}" class="block text-red-600 hover:text-red-800 font-semibold">امتثال العقد</a>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-lg hover:shadow-xl transition overflow-hidden">
            <div class="bg-gradient-to-r from-orange-500 to-orange-600 px-6 py-4">
                <h3 class="text-white text-lg font-bold">📈 التحليل المقارن</h3>
            </div>
            <div class="p-6 space-y-2">
                <a href="{{ route('reports.purchase.historical-comparison') }}" class="block text-orange-600 hover:text-orange-800 font-semibold">المقارنة التاريخية</a>
                <a href="{{ route('reports.purchase.abc-analysis') }}" class="block text-orange-600 hover:text-orange-800 font-semibold">تحليل ABC</a>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 px-6 py-4">
                <h3 class="text-white text-lg font-bold">⚡ ملخص سريع</h3>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div>
                        <p class="text-black font-semibold mb-2">📊 27 تقرير احترافي</p>
                        <p class="text-black text-sm">تقارير شاملة تغطي جميع جوانب إدارة المشتريات</p>
                    </div>
                    <div>
                        <p class="text-black font-semibold mb-2">📥 تنسيقات متعددة</p>
                        <p class="text-black text-sm">PDF, Excel, CSV, JSON</p>
                    </div>
                    <div>
                        <p class="text-black font-semibold mb-2">🔍 تصفية متقدمة</p>
                        <p class="text-black text-sm">التاريخ، المورد، الحالة، والمزيد</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-12 bg-blue-50 rounded-lg p-6 border-l-4 border-blue-500">
        <h2 class="text-xl font-bold text-blue-900 mb-2">💡 نصائح الاستخدام</h2>
        <ul class="text-blue-800 space-y-1">
            <li>✓ استخدم لوحة التحكم للحصول على نظرة عامة سريعة</li>
            <li>✓ طبّق التصفية لتخصيص التقارير حسب احتياجاتك</li>
            <li>✓ صدّر التقارير بتنسيقات مختلفة للمشاركة والتحليل</li>
            <li>✓ راقب المطابقة الثلاثية للتحقق من دقة الفواتير</li>
        </ul>
    </div>
</div>

<style>
    body {
        direction: rtl;
    }
</style>
@endsection