@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">{{ $totalSuppliers }}</p>
                </div>
                <i class="fas fa-handshake 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">{{ $totalPayments }}</p>
                </div>
                <i class="fas fa-receipt 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-red-600">{{ number_format($totalExpenses, 2) }}</p>
                </div>
                <i class="fas fa-credit-card text-4xl text-red-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">{{ $pendingSupplierBills }}</p>
                </div>
                <i class="fas fa-hourglass-half 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_expenses'], 2) }}</span>
                </div>
                <div class="flex justify-between">
                    <span>المبلغ المدفوع:</span>
                    <span class="font-bold text-green-600">{{ number_format($paymentsSummary['paid_amount'], 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>
        </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($paymentStatus 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($topSuppliers as $supplier)
                <div class="flex justify-between items-center pb-2 border-b">
                    <span>{{ $supplier->name }}</span>
                    <span class="text-sm text-black">{{ $supplier->payments_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($paymentMethods as $method)
                <div class="flex justify-between items-center pb-2 border-b">
                    <span>{{ $method->payment_method }}</span>
                    <span class="text-sm text-black">{{ $method->count }} - {{ number_format($method->total, 2) }}</span>
                </div>
                @empty
                <p class="text-black">لا توجد بيانات</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