@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <h1 class="text-3xl font-bold text-black mb-6">لوحة تحكم العملاء</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm">إجمالي العملاء</p>
                    <p class="text-3xl font-bold text-blue-600">{{ $totalCustomers }}</p>
                </div>
                <i class="fas fa-users text-4xl text-blue-200"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm">إجمالي الفواتير</p>
                    <p class="text-3xl font-bold text-green-600">{{ $totalInvoices }}</p>
                </div>
                <i class="fas fa-file-invoice text-4xl text-green-200"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm">الإيرادات الكلية</p>
                    <p class="text-3xl font-bold text-purple-600">{{ number_format($totalRevenue, 2) }}</p>
                </div>
                <i class="fas fa-money-bill-wave text-4xl text-purple-200"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm">المبلغ المدفوع</p>
                    <p class="text-3xl font-bold text-orange-600">{{ number_format($paidAmount, 2) }}</p>
                </div>
                <i class="fas fa-check-circle text-4xl text-orange-200"></i>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold mb-4">ملخص الدفعات</h3>
            <div class="space-y-2">
                <div class="flex justify-between">
                    <span>المبلغ الإجمالي:</span>
                    <span class="font-bold">{{ number_format($paymentsSummary['total_invoiced'], 2) }}</span>
                </div>
                <div class="flex justify-between">
                    <span>المبلغ المدفوع:</span>
                    <span class="font-bold text-green-600">{{ number_format($paymentsSummary['total_paid'], 2) }}</span>
                </div>
                <div class="flex justify-between">
                    <span>المبلغ المتبقي:</span>
                    <span class="font-bold text-orange-600">{{ number_format($paymentsSummary['pending_amount'], 2) }}</span>
                </div>
                <div class="border-t pt-2 flex justify-between">
                    <span>نسبة السداد:</span>
                    <span class="font-bold text-blue-600">{{ $paymentsSummary['percentage_paid'] }}%</span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold mb-4">حالة الفواتير</h3>
            <div class="space-y-2">
                @foreach($invoiceStatus as $status)
                <div class="flex justify-between">
                    <span>{{ $status->status }}:</span>
                    <span class="font-bold">{{ $status->count }}</span>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold mb-4">أكثر العملاء استثماراً</h3>
            <div class="space-y-2">
                @forelse($topCustomers as $customer)
                <div class="flex justify-between items-center pb-2 border-b">
                    <span>{{ $customer->name }}</span>
                    <span class="text-sm text-black">{{ $customer->invoices_count }} فاتورة</span>
                </div>
                @empty
                <p class="text-black">لا توجد بيانات</p>
                @endforelse
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold mb-4">الفواتير المتأخرة</h3>
            <div class="space-y-2">
                @forelse($overdueInvoices as $invoice)
                <div class="flex justify-between items-center pb-2 border-b">
                    <span>{{ $invoice->customer->name }}</span>
                    <span class="text-red-600 font-bold">{{ number_format($invoice->total_amount, 2) }}</span>
                </div>
                @empty
                <p class="text-green-600">لا توجد فواتير متأخرة</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="mt-6">
        <a href="{{ route('reports.custom.index') }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            عرض التقارير المفصلة
        </a>
    </div>
</div>
@endsection