@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-black mb-8">تقارير الفواتير الإلكترونية</h1>

    <div class="grid grid-cols-1 lg: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">{{ $totalInvoices }}</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">{{ $successfulCount }}</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">{{ $failedCount }}</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">{{ $successRate }}%</p>
                </div>
                <i class="fas fa-chart-pie text-yellow-300 text-5xl opacity-70"></i>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
        <h2 class="text-xl font-bold text-black mb-6">توليد التقارير</h2>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <button onclick="generateReport('daily')" 
                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded transition">
                <i class="fas fa-calendar-day ml-2"></i> تقرير يومي
            </button>
            <button onclick="generateReport('weekly')" 
                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded transition">
                <i class="fas fa-calendar-week ml-2"></i> تقرير أسبوعي
            </button>
            <button onclick="generateReport('monthly')" 
                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded transition">
                <i class="fas fa-calendar ml-2"></i> تقرير شهري
            </button>
            <button onclick="openCustomDateModal()" 
                    class="bg-gray-600 hover:bg-gray-700 text-white font-semibold py-3 px-4 rounded transition">
                <i class="fas fa-calendar-check ml-2"></i> تقرير مخصص
            </button>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
        <h2 class="text-xl font-bold text-black mb-6">آخر التقارير</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>
                        <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>
                    @forelse($reports as $report)
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="px-4 py-3">{{ $report->report_type }}</td>
                            <td class="px-4 py-3">{{ $report->getPeriodLabel() }}</td>
                            <td class="px-4 py-3">{{ $report->total_invoices }}</td>
                            <td class="px-4 py-3">
                                <span class="text-{{ $report->success_rate >= 90 ? 'green' : ($report->success_rate >= 70 ? 'yellow' : 'red') }}-600 font-semibold">
                                    {{ $report->getSuccessRatePercentage() }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-black">{{ $report->report_date->format('Y-m-d H:i') }}</td>
                            <td class="px-4 py-3">
                                <button onclick="viewReport({{ $report->id }})" 
                                        class="text-blue-600 hover:text-blue-800 text-sm ml-2">
                                    <i class="fas fa-eye ml-1"></i> عرض
                                </button>
                                <button onclick="downloadReport({{ $report->id }})" 
                                        class="text-green-600 hover:text-green-800 text-sm">
                                    <i class="fas fa-download ml-1"></i> تحميل
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-black">
                                لا توجد تقارير
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-bold text-black mb-4">توزيع الحالات</h3>
            <canvas id="statusChart"></canvas>
        </div>

        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-bold text-black mb-4">الأخطاء الشائعة</h3>
            <div class="space-y-2" id="errorsList">
                <p class="text-black">جاري التحميل...</p>
            </div>
        </div>
    </div>
</div>

<div id="custom-date-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
        <div class="bg-gray-100 px-6 py-4 border-b border-gray-300">
            <h3 class="text-lg font-bold text-black">تقرير مخصص</h3>
        </div>
        <div class="p-6">
            <form onsubmit="generateCustomReport(event)">
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-black mb-2">من التاريخ</label>
                    <input type="date" id="fromDate" required class="w-full border border-gray-300 rounded px-3 py-2">
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-black mb-2">إلى التاريخ</label>
                    <input type="date" id="toDate" required class="w-full border border-gray-300 rounded px-3 py-2">
                </div>
                <div class="flex gap-2">
                    <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">
                        توليد التقرير
                    </button>
                    <button type="button" onclick="closeCustomDateModal()" 
                            class="flex-1 bg-gray-400 hover:bg-gray-500 text-white font-semibold py-2 px-4 rounded">
                        إلغاء
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
function generateReport(type) {
    window.location.href = `/einvoices/reports/generate?type=${type}`;
}

function openCustomDateModal() {
    document.getElementById('custom-date-modal').classList.remove('hidden');
}

function closeCustomDateModal() {
    document.getElementById('custom-date-modal').classList.add('hidden');
}

function generateCustomReport(e) {
    e.preventDefault();
    const from = document.getElementById('fromDate').value;
    const to = document.getElementById('toDate').value;
    window.location.href = `/einvoices/reports/generate?type=custom&from=${from}&to=${to}`;
}

function viewReport(reportId) {
    window.location.href = `/einvoices/reports/${reportId}`;
}

function downloadReport(reportId) {
    window.location.href = `/einvoices/reports/${reportId}/download`;
}

document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('statusChart').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['مرسلة بنجاح', 'فاشلة', 'قيد الانتظار'],
            datasets: [{
                data: [{{ $successfulCount }}, {{ $failedCount }}, {{ $pendingCount }}],
                backgroundColor: ['#10b981', '#ef4444', '#eab308'],
                borderColor: '#fff',
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                }
            }
        }
    });
});
</script>
@endsection