@extends('layouts.app')
@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>

        <!-- Filter Form -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-200">
            <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="start_date" value="{{ request('start_date', $data['period_start'] ?? '') }}" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <div>
                    <label class="block text-sm font-medium text-black mb-2">تاريخ النهاية</label>
                    <input type="date" name="end_date" value="{{ request('end_date', $data['period_end'] ?? '') }}" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                <div class="flex items-end gap-2">
                    <button type="submit" class="flex-1 px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 font-medium shadow-md hover:shadow-lg">
                        <i class="fas fa-search ml-2"></i>بحث
                    </button>
                    <a href="{{ route('reports.purchase.period-summary') }}" class="flex-1 px-4 py-2 bg-gray-300 text-black rounded-lg hover:bg-gray-400 transition-colors font-medium text-center">
                        <i class="fas fa-redo ml-2"></i>إعادة تعيين
                    </a>
                </div>
            </form>
        </div>

        <!-- Main Statistics -->
        @if($data)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Purchase Orders Count -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-r-4 border-blue-500 hover:shadow-xl transition-shadow">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <p class="text-sm text-black font-medium mb-1">عدد أوامر الشراء</p>
                        <p class="text-4xl font-bold text-blue-600">{{ number_format($data['po_count'] ?? 0) }}</p>
                    </div>
                    <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center">
                        <i class="fas fa-file-invoice text-2xl text-blue-600"></i>
                    </div>
                </div>
                <p class="text-xs text-black">من {{ $data['period_start'] ?? 'N/A' }} إلى {{ $data['period_end'] ?? 'N/A' }}</p>
            </div>

            <!-- Purchase Orders Total -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-r-4 border-green-500 hover:shadow-xl transition-shadow">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <p class="text-sm text-black font-medium mb-1">إجمالي أوامر الشراء</p>
                        <p class="text-3xl font-bold text-green-600">{{ number_format($data['po_total'] ?? 0, 2) }}</p>
                    </div>
                    <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center">
                        <i class="fas fa-calculator text-2xl text-green-600"></i>
                    </div>
                </div>
                <p class="text-xs text-black">الوحدة: ريال سعودي</p>
            </div>

            <!-- Invoices Count -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-r-4 border-purple-500 hover:shadow-xl transition-shadow">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <p class="text-sm text-black font-medium mb-1">عدد الفواتير</p>
                        <p class="text-4xl font-bold text-purple-600">{{ number_format($data['invoice_count'] ?? 0) }}</p>
                    </div>
                    <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center">
                        <i class="fas fa-file-alt text-2xl text-purple-600"></i>
                    </div>
                </div>
                <p class="text-xs text-black">إجمالي عدد الفواتير المستلمة</p>
            </div>

            <!-- Invoices Total -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-r-4 border-orange-500 hover:shadow-xl transition-shadow">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <p class="text-sm text-black font-medium mb-1">إجمالي الفواتير</p>
                        <p class="text-3xl font-bold text-orange-600">{{ number_format($data['invoice_total'] ?? 0, 2) }}</p>
                    </div>
                    <div class="w-14 h-14 rounded-full bg-orange-100 flex items-center justify-center">
                        <i class="fas fa-money-bill-wave text-2xl text-orange-600"></i>
                    </div>
                </div>
                <p class="text-xs text-black">إجمالي قيمة الفواتير</p>
            </div>
        </div>

        <!-- Payment Statistics -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- Paid Amount -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-green-200 hover:shadow-xl transition-shadow">
                <div class="flex items-start justify-between mb-4">
                    <div>
                        <p class="text-sm text-black font-medium">المبلغ المدفوع</p>
                        <p class="text-3xl font-bold text-green-600 mt-2">{{ number_format($data['paid_amount'] ?? 0, 2) }}</p>
                    </div>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-green-100 text-green-800">
                        <i class="fas fa-check-circle ml-1"></i> مدفوع
                    </span>
                </div>
                <div class="pt-4 border-t border-gray-200">
                    <p class="text-xs text-black">من إجمالي الفواتير</p>
                </div>
            </div>

            <!-- Pending Payment -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-yellow-200 hover:shadow-xl transition-shadow">
                <div class="flex items-start justify-between mb-4">
                    <div>
                        <p class="text-sm text-black font-medium">المبلغ المتبقي</p>
                        <p class="text-3xl font-bold text-yellow-600 mt-2">{{ number_format($data['pending_payment'] ?? 0, 2) }}</p>
                    </div>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-800">
                        <i class="fas fa-hourglass-half ml-1"></i> معلق
                    </span>
                </div>
                <div class="pt-4 border-t border-gray-200">
                    <p class="text-xs text-black">المبالغ المتبقية للدفع</p>
                </div>
            </div>

            <!-- Average PO Value -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-blue-200 hover:shadow-xl transition-shadow">
                <div class="flex items-start justify-between mb-4">
                    <div>
                        <p class="text-sm text-black font-medium">متوسط قيمة الطلب</p>
                        <p class="text-3xl font-bold text-blue-600 mt-2">{{ number_format($data['average_po_value'] ?? 0, 2) }}</p>
                    </div>
                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                        <i class="fas fa-chart-line text-blue-600"></i>
                    </div>
                </div>
                <div class="pt-4 border-t border-gray-200">
                    <p class="text-xs text-black">متوسط قيمة كل طلب شراء</p>
                </div>
            </div>
        </div>

        <!-- Payment Analysis -->
        <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200 mb-8">
            <h3 class="text-xl font-bold text-black mb-6">تحليل الدفعات</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Payment Progress -->
                <div>
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-sm font-medium text-black">نسبة الدفع</span>
                        <span class="text-xl font-bold text-blue-600">
                            {{ number_format(($data['invoice_total'] > 0) ? (($data['paid_amount'] / $data['invoice_total']) * 100) : 0, 1) }}%
                        </span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
                        <div class="bg-gradient-to-r from-green-500 to-blue-600 h-full rounded-full transition-all duration-500" 
                            style="width: {{ ($data['invoice_total'] > 0) ? (($data['paid_amount'] / $data['invoice_total']) * 100) : 0 }}%">
                        </div>
                    </div>
                    <p class="text-xs text-black mt-2">{{ number_format($data['paid_amount'] ?? 0, 2) }} من {{ number_format($data['invoice_total'] ?? 0, 2) }} ريال</p>
                </div>

                <!-- Pending Progress -->
                <div>
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-sm font-medium text-black">نسبة المتبقي</span>
                        <span class="text-xl font-bold text-yellow-600">
                            {{ number_format(($data['invoice_total'] > 0) ? (($data['pending_payment'] / $data['invoice_total']) * 100) : 0, 1) }}%
                        </span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
                        <div class="bg-gradient-to-r from-yellow-500 to-orange-600 h-full rounded-full transition-all duration-500"
                            style="width: {{ ($data['invoice_total'] > 0) ? (($data['pending_payment'] / $data['invoice_total']) * 100) : 0 }}%">
                        </div>
                    </div>
                    <p class="text-xs text-black mt-2">{{ number_format($data['pending_payment'] ?? 0, 2) }} من {{ number_format($data['invoice_total'] ?? 0, 2) }} ريال</p>
                </div>

                <!-- Key Metrics -->
                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-200">
                    <h4 class="font-semibold text-black mb-4">الإحصائيات الرئيسية</h4>
                    <div class="space-y-2 text-sm">
                        <div class="flex items-center justify-between">
                            <span class="text-black">متوسط طلب الشراء:</span>
                            <span class="font-semibold text-black">{{ number_format($data['average_po_value'] ?? 0, 2) }} ر.س</span>
                        </div>
                        <div class="flex items-center justify-between pt-2 border-t border-blue-200">
                            <span class="text-black">نسبة السداد:</span>
                            <span class="font-semibold text-green-600">{{ number_format(($data['invoice_total'] > 0) ? (($data['paid_amount'] / $data['invoice_total']) * 100) : 0, 1) }}%</span>
                        </div>
                        <div class="flex items-center justify-between pt-2 border-t border-blue-200">
                            <span class="text-black">متوسط فاتورة:</span>
                            <span class="font-semibold text-black">{{ number_format(($data['invoice_count'] > 0) ? ($data['invoice_total'] / $data['invoice_count']) : 0, 2) }} ر.س</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Period Information -->
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 p-6 mb-8">
            <h3 class="text-lg font-bold text-black mb-4">معلومات الفترة</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <p class="text-sm text-black mb-1">فترة التقرير</p>
                    <div class="flex items-center gap-2">
                        <i class="fas fa-calendar text-blue-600"></i>
                        <p class="font-semibold text-black">
                            من {{ \Carbon\Carbon::parse($data['period_start'])->format('d/m/Y') }} 
                            إلى {{ \Carbon\Carbon::parse($data['period_end'])->format('d/m/Y') }}
                        </p>
                    </div>
                </div>
                <div>
                    <p class="text-sm text-black mb-1">عدد الأيام</p>
                    <div class="flex items-center gap-2">
                        <i class="fas fa-hourglass text-blue-600"></i>
                        <p class="font-semibold text-black">
                            {{ \Carbon\Carbon::parse($data['period_start'])->diffInDays(\Carbon\Carbon::parse($data['period_end'])) }} يوم
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Export Options -->
        <div class="flex gap-3 justify-center mb-8 flex-wrap no-print">
            <a href="{{ route('reports.purchase.period-summary', array_merge(request()->query(), ['export' => 'true', 'format' => 'excel'])) }}" 
                class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-all duration-200 font-medium inline-flex items-center gap-2 shadow-md hover:shadow-lg transform hover:scale-105">
                <i class="fas fa-file-excel"></i> تصدير Excel
            </a>
            <a href="{{ route('reports.purchase.period-summary', array_merge(request()->query(), ['export' => 'true', 'format' => 'pdf'])) }}" 
                class="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-all duration-200 font-medium inline-flex items-center gap-2 shadow-md hover:shadow-lg transform hover:scale-105">
                <i class="fas fa-file-pdf"></i> تصدير PDF
            </a>
            <a href="{{ route('reports.purchase.period-summary', array_merge(request()->query(), ['export' => 'true', 'format' => 'csv'])) }}" 
                class="px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-all duration-200 font-medium inline-flex items-center gap-2 shadow-md hover:shadow-lg transform hover:scale-105">
                <i class="fas fa-file-csv"></i> تصدير CSV
            </a>
            <button onclick="window.print()" 
                class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all duration-200 font-medium inline-flex items-center gap-2 shadow-md hover:shadow-lg transform hover:scale-105">
                <i class="fas fa-print"></i> طباعة
            </button>
        </div>

        @else
        <div class="bg-white rounded-xl shadow-lg p-12 text-center border border-gray-200">
            <i class="fas fa-inbox text-black text-6xl mb-4"></i>
            <p class="text-black font-medium text-lg mb-2">لا توجد بيانات متاحة</p>
            <p class="text-black mb-6">يرجى تحديد فترة زمنية وإجراء البحث</p>
            <a href="{{ route('reports.purchase.period-summary') }}" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
                <i class="fas fa-redo ml-2"></i> إعادة محاولة
            </a>
        </div>
        @endif
    </div>
</div>

<style>
    @media print {
        .no-print {
            display: none !important;
        }
        body {
            background-color: white;
        }
    }
</style>
@endsection