@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold text-black">{{ $report->getReportTitle() }}</h1>
        <div class="flex gap-2">
            <a href="{{ route('einvoices.reports.download', $report) }}" 
               class="bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded">
                <i class="fas fa-download ml-1"></i> تحميل
            </a>
            <a href="{{ route('einvoices.reports.index') }}" 
               class="bg-gray-400 hover:bg-gray-500 text-white font-semibold py-2 px-4 rounded">
                <i class="fas fa-arrow-left ml-1"></i> عودة
            </a>
        </div>
    </div>

    <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
            <div>
                <span class="text-black">من التاريخ:</span>
                <span class="font-semibold text-black">{{ $report->period_from->format('Y-m-d') }}</span>
            </div>
            <div>
                <span class="text-black">إلى التاريخ:</span>
                <span class="font-semibold text-black">{{ $report->period_to->format('Y-m-d') }}</span>
            </div>
            <div>
                <span class="text-black">تاريخ التقرير:</span>
                <span class="font-semibold text-black">{{ $report->report_date->format('Y-m-d H:i') }}</span>
            </div>
            <div>
                <span class="text-black">نوع التقرير:</span>
                <span class="font-semibold text-black">{{ $report->report_type }}</span>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg shadow p-6 border-l-4 border-blue-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-800 text-sm font-medium">إجمالي الفواتير</p>
                    <p class="text-4xl font-bold text-blue-700 mt-2">{{ $stats['total'] }}</p>
                </div>
                <i class="fas fa-file-invoice text-blue-300 text-5xl opacity-70"></i>
            </div>
        </div>

        <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg shadow p-6 border-l-4 border-green-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-800 text-sm font-medium">المرسلة بنجاح</p>
                    <p class="text-4xl font-bold text-green-700 mt-2">{{ $stats['successful'] }}</p>
                </div>
                <i class="fas fa-check-circle text-green-300 text-5xl opacity-70"></i>
            </div>
        </div>

        <div class="bg-gradient-to-br from-red-50 to-red-100 rounded-lg shadow p-6 border-l-4 border-red-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-red-800 text-sm font-medium">الفاشلة</p>
                    <p class="text-4xl font-bold text-red-700 mt-2">{{ $stats['failed'] }}</p>
                </div>
                <i class="fas fa-times-circle text-red-300 text-5xl opacity-70"></i>
            </div>
        </div>

        <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-lg shadow p-6 border-l-4 border-yellow-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-yellow-800 text-sm font-medium">قيد الانتظار</p>
                    <p class="text-4xl font-bold text-yellow-700 mt-2">{{ $stats['pending'] }}</p>
                </div>
                <i class="fas fa-hourglass text-yellow-300 text-5xl opacity-70"></i>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="lg:col-span-2 bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-bold text-black mb-4">إحصائيات مالية</h2>
            <div class="space-y-4">
                <div class="flex justify-between items-center pb-4 border-b">
                    <span class="text-black">إجمالي المبلغ:</span>
                    <span class="text-2xl font-bold text-black">{{ number_format($financialStats['total_amount'], 2) }} ريال</span>
                </div>
                <div class="flex justify-between items-center pb-4 border-b">
                    <span class="text-black">إجمالي الضريبة:</span>
                    <span class="text-2xl font-bold text-black">{{ number_format($financialStats['total_tax'], 2) }} ريال</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-black">متوسط مبلغ الفاتورة:</span>
                    <span class="text-2xl font-bold text-black">{{ number_format($financialStats['average_invoice_amount'], 2) }} ريال</span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-bold text-black mb-4">نسب النجاح والفشل</h2>
            <div class="space-y-3">
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="text-sm text-black">نسبة النجاح</span>
                        <span class="text-sm font-semibold text-green-600">{{ $stats['success_rate'] }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-green-600 h-2 rounded-full" style="width: {{ $stats['success_rate'] }}%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="text-sm text-black">نسبة الفشل</span>
                        <span class="text-sm font-semibold text-red-600">{{ 100 - $stats['success_rate'] }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-red-600 h-2 rounded-full" style="width: {{ 100 - $stats['success_rate'] }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(isset($report->report_data['invoices_by_status']) && count($report->report_data['invoices_by_status']) > 0)
    <div class="bg-white rounded-lg shadow p-6 mb-8">
        <h2 class="text-xl font-bold text-black mb-4">توزيع الفواتير حسب الحالة</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            @foreach($report->report_data['invoices_by_status'] as $status => $count)
            <div class="bg-gray-50 p-4 rounded text-center">
                <p class="text-black text-sm mb-2">{{ ucfirst($status) }}</p>
                <p class="text-2xl font-bold text-black">{{ $count }}</p>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    @if(isset($report->report_data['top_errors']) && count($report->report_data['top_errors']) > 0)
    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-xl font-bold text-black mb-4">الأخطاء الشائعة</h2>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-100 border-b border-gray-300">
                    <tr>
                        <th class="text-right px-4 py-3 font-semibold text-black">رمز الخطأ</th>
                        <th class="text-right px-4 py-3 font-semibold text-black">عدد الحالات</th>
                        <th class="text-right px-4 py-3 font-semibold text-black">النسبة</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($report->report_data['top_errors'] as $error)
                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                        <td class="px-4 py-3">{{ $error['error_code'] ?? 'Unknown' }}</td>
                        <td class="px-4 py-3">{{ $error['count'] }}</td>
                        <td class="px-4 py-3">
                            @php
                                $percentage = $stats['failed'] > 0 ? round(($error['count'] / $stats['failed']) * 100, 1) : 0;
                            @endphp
                            {{ $percentage }}%
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
</div>
@endsection