@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-3xl font-bold text-black mb-2">📊 تقارير المبيعات</h1>
                    <p class="text-black">مركز التحكم الشامل لتحليل أداء المبيعات</p>
                </div>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 mb-8">
            <!-- إجمالي الفواتير -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-2">عدد الفواتير</p>
                        <p class="text-2xl font-bold text-black">{{ number_format($stats['total_invoices']) }}</p>
                    </div>
                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-file-invoice text-blue-600 text-xl"></i>
                    </div>
                </div>
            </div>

            <!-- إجمالي المبيعات -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-2">إجمالي المبيعات</p>
                        <p class="text-2xl font-bold text-black">{{ number_format($stats['total_sales'], 0) }}</p>
                    </div>
                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-chart-line text-green-600 text-xl"></i>
                    </div>
                </div>
            </div>

            <!-- المبالغ المدفوعة -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-2">المدفوع</p>
                        <p class="text-2xl font-bold text-black">{{ number_format($stats['total_paid'], 0) }}</p>
                    </div>
                    <div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-check-circle text-emerald-600 text-xl"></i>
                    </div>
                </div>
            </div>

            <!-- المبالغ المعلقة -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-2">المعلق</p>
                        <p class="text-2xl font-bold text-black">{{ number_format($stats['total_pending'], 0) }}</p>
                    </div>
                    <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-hourglass text-amber-600 text-xl"></i>
                    </div>
                </div>
            </div>

            <!-- معدل التحصيل -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-2">معدل التحصيل</p>
                        <p class="text-2xl font-bold text-black">{{ $stats['collection_rate'] }}%</p>
                    </div>
                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-percentage text-purple-600 text-xl"></i>
                    </div>
                </div>
            </div>

            <!-- متوسط الفاتورة -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-2">متوسط الفاتورة</p>
                        <p class="text-2xl font-bold text-black">{{ number_format($stats['average_invoice'], 0) }}</p>
                    </div>
                    <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-calculator text-pink-600 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reports Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- تقرير المبيعات الإجمالي -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-pie text-blue-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">المبيعات الإجمالية</h3>
                    </div>
                    <p class="text-black mb-4">عرض ملخص شامل لإجمالي المبيعات والضرائب والخصومات والمدفوع</p>
                    <a href="{{ route('reports.sales.summary') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير المبيعات حسب العميل -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-users text-green-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">حسب العميل</h3>
                    </div>
                    <p class="text-black mb-4">توزيع المبيعات على العملاء مع تفاصيل المبالغ المدفوعة والمعلقة</p>
                    <a href="{{ route('reports.sales.by-customer') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير المبيعات حسب الفترة -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-calendar text-purple-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">حسب الفترة</h3>
                    </div>
                    <p class="text-black mb-4">تتبع اتجاه المبيعات عبر فترات زمنية مختلفة مع رسوم بيانية</p>
                    <a href="{{ route('reports.sales.by-period') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير أفضل العملاء -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-star text-yellow-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">أفضل العملاء</h3>
                    </div>
                    <p class="text-black mb-4">تحديد أكبر العملاء وأكثرهم نشاطاً مع رسم بياني دائري</p>
                    <a href="{{ route('reports.sales.top-customers') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير الدفعات -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-money-bill text-red-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">الدفعات</h3>
                    </div>
                    <p class="text-black mb-4">تتبع الدفعات المحصلة من العملاء مع طرق الدفع والمبالغ</p>
                    <a href="{{ route('reports.sales.payments') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير بنود الفواتير -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-list text-indigo-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">بنود الفواتير</h3>
                    </div>
                    <p class="text-black mb-4">تفاصيل شاملة لكل بند من بنود الفواتير مع الكميات والأسعار</p>
                    <a href="{{ route('reports.sales.line-items') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير المعلق والمتأخر -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-exclamation-circle text-orange-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">المعلق والمتأخر</h3>
                    </div>
                    <p class="text-black mb-4">تتبع الفواتير المعلقة والمتأخرة بشكل فردي</p>
                    <a href="{{ route('reports.sales.outstanding-overdue') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير أعمار الديون -->
            @permission('sales.reports.aging')
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-slate-800 rounded-lg flex items-center justify-center">
                            <i class="fas fa-history text-white text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">أعمار الديون</h3>
                    </div>
                    <p class="text-black mb-4">تحليل المبالغ المستحقة موزعة على فترات زمنية (Aging)</p>
                    <a href="{{ route('reports.sales.aging') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>
            @endpermission

            <!-- تقرير متوسط أيام التحصيل -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-cyan-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-bar text-cyan-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">متوسط أيام التحصيل</h3>
                    </div>
                    <p class="text-black mb-4">مؤشر أداء حساب المتوسط الزمني لتحصيل المستحقات</p>
                    <a href="{{ route('reports.sales.dso') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير المرتجعات -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-rose-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-undo text-rose-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">المرتجعات</h3>
                    </div>
                    <p class="text-black mb-4">تتبع المرتجعات والإشعارات الدائنة مع تصنيف الأسباب</p>
                    <a href="{{ route('reports.sales.returns') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير المقارنة -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-exchange-alt text-teal-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">المقارنة</h3>
                    </div>
                    <p class="text-black mb-4">مقارنة المبيعات الشهرية والسنوية مع تحليل الاتجاهات</p>
                    <a href="{{ route('reports.sales.comparison') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- الفاصل: المرحلة الثالثة -->
            <div class="col-span-1 md:col-span-2 lg:col-span-3 my-4">
                <div class="flex items-center gap-4">
                    <div class="flex-1 h-0.5 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
                    <span class="text-black font-semibold text-sm">المرحلة الثالثة - التحليلات المتقدمة</span>
                    <div class="flex-1 h-0.5 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
                </div>
            </div>

            <!-- تقرير تحليل الخصومات والضرائب -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-violet-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-percentage text-violet-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">الخصومات والضرائب</h3>
                    </div>
                    <p class="text-black mb-4">تحليل معدلات الخصومات والضرائب مع المقارنة بين الفواتير</p>
                    <a href="{{ route('reports.sales.discount-tax-analysis') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير تحليل المنتجات -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-lime-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-box text-lime-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">تحليل المنتجات</h3>
                    </div>
                    <p class="text-black mb-4">توزيع المبيعات حسب المنتجات مع تحليل الكميات والإيرادات</p>
                    <a href="{{ route('reports.sales.product-analysis') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير الأداء الشهري والسنوي -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-sky-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-line text-sky-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">الأداء الشهري والسنوي</h3>
                    </div>
                    <p class="text-black mb-4">تتبع الأداء على 12 شهراً مع معدلات التحصيل</p>
                    <a href="{{ route('reports.sales.monthly-yearly-performance') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير تحليل الربحية -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-coins text-emerald-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">تحليل الربحية</h3>
                    </div>
                    <p class="text-black mb-4">حساب هوامش الربح الإجمالي والصافي ومؤشرات الربحية</p>
                    <a href="{{ route('reports.sales.profit-analysis') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير تركز المبيعات -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-fuchsia-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-project-diagram text-fuchsia-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">تركز المبيعات</h3>
                    </div>
                    <p class="text-black mb-4">تقييم مخاطر التركز باستخدام مبدأ باريتو (أفضل 5 و10 عملاء)</p>
                    <a href="{{ route('reports.sales.sales-concentration') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير تحليل الموسمية -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-leaf text-amber-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">تحليل الموسمية</h3>
                    </div>
                    <p class="text-black mb-4">حساب مؤشرات الموسمية والتغيرات الشهرية من المتوسط</p>
                    <a href="{{ route('reports.sales.seasonality-analysis') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير ربحية الأصناف -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-line text-emerald-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">ربحية الأصناف</h3>
                    </div>
                    <p class="text-black mb-4">تحليل الربحية لكل صنف بناءً على الفرق بين سعر البيع وسعر الشراء</p>
                    <a href="{{ route('reports.sales.item-profitability') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- الفاصل: المرحلة الرابعة -->
            <div class="col-span-1 md:col-span-2 lg:col-span-3 my-4">
                <div class="flex items-center gap-4">
                    <div class="flex-1 h-0.5 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
                    <span class="text-black font-semibold text-sm">المرحلة الرابعة - التقارير المتقدمة</span>
                    <div class="flex-1 h-0.5 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
                </div>
            </div>

            <!-- تقرير تفاصيل الفاتورة -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-file-invoice-dollar text-indigo-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">تفاصيل الفاتورة</h3>
                    </div>
                    <p class="text-black mb-4">عرض تفاصيل شاملة للفاتورة مع البنود والدفعات والملخص المالي</p>
                    <a href="{{ route('reports.sales.invoice-list-detailed') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير كشف حساب العميل -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-user-tie text-blue-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">كشف حساب العميل</h3>
                    </div>
                    <p class="text-black mb-4">بيان مفصل لحركة حساب العميل مع الرصيد المتراكم والمدفوعات</p>
                    <div class="flex gap-2">
                        <a href="{{ route('reports.sales.customer-statement') }}" class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors text-sm">
                            <span>كشف عادي</span>
                        </a>
                        <a href="{{ route('reports.sales.partner-statement') }}" class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors text-sm">
                            <span>كشف موحد (شريك)</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- تقرير قائمة الفواتير المفصلة -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-list-check text-green-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">قائمة الفواتير المفصلة</h3>
                    </div>
                    <p class="text-black mb-4">قائمة شاملة للفواتير مع تصفية متقدمة حسب التاريخ والعميل والحالة</p>
                    <a href="{{ route('reports.sales.invoice-list-detailed') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

            <!-- تقرير المدفوع مقابل المعلق -->
            <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden border border-gray-200">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-doughnut text-purple-600 text-lg"></i>
                        </div>
                        <h3 class="ml-4 text-xl font-bold text-black">المدفوع مقابل المعلق</h3>
                    </div>
                    <p class="text-black mb-4">تحليل الفواتير حسب حالة الدفع مع رسم بياني يوضح التوزيع</p>
                    <a href="{{ route('reports.sales.paid-vs-pending') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <span>عرض التقرير</span>
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>

        </div>

        <!-- Date Range Selector -->
        <div class="mt-8 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
            <h3 class="text-lg font-bold text-black mb-4">🗓️ نطاق التاريخ الافتراضي</h3>
            <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-black mb-2">من التاريخ</label>
                    <input type="date" name="from_date" value="{{ $fromDate }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-black mb-2">إلى التاريخ</label>
                    <input type="date" name="to_date" value="{{ $toDate }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="flex items-end">
                    <button type="submit" class="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium">
                        تحديث
                    </button>
                </div>
                <div class="flex items-end">
                    <a href="{{ route('reports.sales.index') }}" class="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium text-center">
                        إعادة تعيين
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection