{{-- resources/views/filament/pages/customer-account-report.blade.php --}}
<x-filament-panels::page>
<style>
/* Custom injected Tailwind shim for uncompiled production reports */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded { border-radius: 0.25rem; }
.border { border-width: 1px; border-style: solid; border-color: #e5e7eb; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-color: #e5e7eb; }
.bg-white { background-color: #ffffff; }
.p-4 { padding: 1rem; }
.p-2 { padding: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.w-full { width: 100%; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.text-blue-600 { color: #2563eb; }
.text-green-600 { color: #16a34a; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.bg-blue-600 { background-color: #2563eb; }
.text-white { color: #ffffff; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-1 { margin-bottom: 0.25rem; }
.block { display: block; }
.flex { display: flex; }
.items-end { align-items: flex-end; }
.overflow-x-auto { overflow-x: auto; }
.min-w-\[900px\] { min-width: 900px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.bg-green-100 { background-color: #dcfce7; }
.text-green-700 { color: #15803d; }
.bg-red-100 { background-color: #fee2e2; }
.text-red-700 { color: #b91c1c; }
.bg-gray-100 { background-color: #f3f4f6; }
.text-gray-500 { color: #6b7280; }
.text-gray-700 { color: #374151; }
th { text-align: right; }
table { border-collapse: collapse; width: 100%; }
.dark .bg-white { background-color: #1f2937 !important; }
.dark .border { border-color: #374151 !important; }
.dark .border-b { border-color: #374151 !important; }
.dark .bg-gray-900 { background-color: #111827 !important; }
.dark .bg-gray-800 { background-color: #1f2937 !important; }
</style>
<div id="customer-account-report" dir="rtl">
    <style>
        /* === نفس تنسيق تقرير الشريك بالضبط، بدون Bootstrap === */
        #customer-account-report {
            font-family: 'Tajawal', 'Segoe UI', Arial, sans-serif;
            background: linear-gradient(135deg, #e0f7fa, #f3e8ff);
            padding: 24px;
            border-radius: 18px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.07);
            max-width: 1100px;
            margin: 0 auto;
        }

        /* Dark Mode Support */
        .dark #customer-account-report {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            color: #e2e8f0;
        }

        #customer-account-report .title {
            font-size: 28px;
            font-weight: 900;
            color: #1e3a8a;
            text-align: center;
            margin-bottom: 18px;
        }

        .dark #customer-account-report .title {
            color: #38bdf8;
        }

        #customer-account-report .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        #customer-account-report .btn {
            background: #00796b;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 8px 12px;
            font-size: 13px;
            cursor: pointer;
        }

        .dark #customer-account-report .btn {
            background: #1e40af;
            color: #f1f5f9;
        }

        #customer-account-report .btn:hover { opacity: .92; }
        #customer-account-report .filters {
            display: flex;
            gap: 16px;
            margin-bottom: 18px;
            justify-content: center;
            flex-wrap: wrap;
        }
        #customer-account-report label {
            font-weight: 700;
            color: #00796b;
            margin-left: 6px;
        }

        .dark #customer-account-report label {
            color: #38bdf8;
        }

        #customer-account-report select,
        #customer-account-report input[type="date"] {
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid #b2dfdb;
            font-size: 14px;
            background: #fff;
        }

        .dark #customer-account-report select,
        .dark #customer-account-report input[type="date"] {
            background: #374151;
            border: 1px solid #4b5563;
            color: #e5e7eb;
        }

        #customer-account-report .section { margin-bottom: 24px; }
        #customer-account-report .section-title {
            font-size: 18px; font-weight: 700; color: #00796b; margin-bottom: 10px;
        }

        .dark #customer-account-report .section-title {
            color: #38bdf8;
        }

        #customer-account-report .info-table,
        #customer-account-report .table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
        }

        .dark #customer-account-report .info-table,
        .dark #customer-account-report .table {
            background: #1f2937;
        }

        #customer-account-report .info-table td {
            padding: 10px 12px;
            font-size: 15px;
            border-bottom: 1px solid #eef2f7;
        }

        .dark #customer-account-report .info-table td {
            border-bottom: 1px solid #4b5563;
            color: #e5e7eb;
        }

        #customer-account-report .table th,
        #customer-account-report .table td {
            padding: 10px 12px;
            font-size: 14px;
            border-bottom: 1px solid #eef2f7;
            text-align: start;
        }

        .dark #customer-account-report .table th,
        .dark #customer-account-report .table td {
            border-bottom: 1px solid #4b5563;
            color: #e5e7eb;
        }

        #customer-account-report .table thead th {
            background: #e0f7fa;
            color: #00695c;
            font-weight: 800;
        }

        .dark #customer-account-report .table thead th {
            background: #374151;
            color: #38bdf8;
        }

        #customer-account-report .amount { color: #00796b; font-weight: 800; }

        .dark #customer-account-report .amount { color: #10b981; }

        #customer-account-report .badge {
            display: inline-block;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
        }

        #customer-account-report .badge.paid {
            background: #dcfce7;
            color: #15803d;
        }

        .dark #customer-account-report .badge.paid {
            background: #166534;
            color: #bbf7d0;
        }

        #customer-account-report .badge.unpaid {
            background: #fee2e2;
            color: #b91c1c;
        }

        .dark #customer-account-report .badge.unpaid {
            background: #991b1b;
            color: #fecaca;
        }
            font-size: 12px;
            font-weight: 700;
            background: #e0f7fa;
            color: #00796b;
        }
        #customer-account-report .badge-danger { background: #ffebee; color: #c62828; }
        #customer-account-report .badge-success { background: #e8f5e9; color: #2e7d32; }

        #customer-account-report .empty {
            padding: 18px; text-align: center; color: #64748b; font-style: italic; background:#fff; border-radius: 12px;
        }

        /* طباعة مثل تقرير الشريك */
        @media print {
            body * { visibility: hidden !important; }
            #customer-account-report, #customer-account-report * { visibility: visible !important; }
            #customer-account-report {
                position: absolute !important; inset: 0 !important; margin: 0 !important;
                background: #fff !important; box-shadow: none !important;
            }
            #customer-account-report .toolbar,
            #customer-account-report .filters { display: none !important; }
            @page { size: A4; margin: 12mm; }
        }
    </style>

    {{-- شريط الأدوات --}}
    <div class="toolbar">
        @includeWhen(View::exists('filament.partials.company-header'), 'filament.partials.company-header')
        <button class="btn" onclick="window.print()">🖨️ طباعة</button>
    </div>

    {{-- العنوان --}}
    <h1 class="title">تقرير حساب العميل</h1>

    {{-- فلاتر التقرير (نفس فكرة تقرير الشريك) --}}
    <form wire:submit.prevent="generateReport" class="filters">
        <label>العميل:</label>
        <select wire:model.lazy="customerId">
            <option value="">اختر العميل</option>
            @foreach($allCustomers as $id => $name)
                <option value="{{ $id }}">{{ $name }}</option>
            @endforeach
        </select>

        <label>فلترة حسب:</label>
        <select wire:model.lazy="filter_by">
            <option value="contract_date">تاريخ العقد</option>
            <option value="payment_date">تاريخ السداد</option>
        </select>

        <label>من:</label>
        <input type="date" wire:model.lazy="date_from">

        <label>إلى:</label>
        <input type="date" wire:model.lazy="date_to">

        <button type="submit" class="btn">بحث</button>
    </form>

    {{-- بيانات العميل --}}
    <div class="section">
        <div class="section-title">بيانات العميل</div>
        <table class="info-table">
            <tr><td>الاسم:</td><td>{{ $customer->name ?? '—' }}</td></tr>
            <tr><td>الهاتف:</td><td>{{ $customer->phone ?? '—' }}</td></tr>
            <tr><td>العنوان:</td><td>{{ $customer->address ?? '—' }}</td></tr>
            <tr><td>الرقم القومي:</td><td>{{ $customer->national_id ?? '—' }}</td></tr>
            <tr><td>الضامن:</td><td>{{ optional($customer?->guarantor)->name ?? '—' }}</td></tr>
        </table>
    </div>

    {{-- ملخص سريع على نفس ستايل الشريك --}}
    @php
        $totalContracts  = $contracts->count();
        $sumOriginal     = $contracts->sum('original_price');
        $sumInstallment  = $contracts->sum('installment_price');

        $allInstallments = $contracts->flatMap(fn($c) => $c->installments);
        $paidCount       = $allInstallments->where('is_paid', true)->count();
        $unpaidCount     = $allInstallments->where('is_paid', false)->count();

        // حساب المبالغ الفعلية
        $totalPaidAmount = $allInstallments->where('is_paid', true)->whereNotNull('paid_amount')->sum('paid_amount');
        $totalDueAmount = $allInstallments->where('is_paid', false)->sum('value');

        // حساب المدفوعات المباشرة
        $totalPayments = $payments ? $payments->sum('amount') : 0;
        $paymentsCount = $payments ? $payments->count() : 0;

        // إجمالي ما تم تحصيله: نعتمد مدفوعات العميل فقط لتجنب الازدواج
        // لأن المدفوعات يتم توزيعها على الأقساط تلقائيا.
        $totalCollected = $totalPayments;
    @endphp
    <div class="section">
        <div class="section-title">ملخص سريع</div>
        <table class="info-table">
            <tr><td>عدد العقود</td><td class="amount">{{ $totalContracts }}</td></tr>
            <tr><td>إجمالي السعر الأصلي</td><td class="amount">{{ number_format($sumOriginal, 2) }} جنيه</td></tr>
            <tr><td>إجمالي سعر التقسيط</td><td class="amount">{{ number_format($sumInstallment, 2) }} جنيه</td></tr>
            <tr><td>أقساط مدفوعة</td><td><span class="badge badge-success">{{ $paidCount }}</span></td></tr>
            <tr><td>أقساط غير مدفوعة</td><td><span class="badge badge-danger">{{ $unpaidCount }}</span></td></tr>
            <tr><td>إجمالي المبالغ المسددة (أقساط)</td><td class="amount">{{ number_format($totalPaidAmount, 2) }} جنيه</td></tr>
            <tr><td>{{ __('payments.plural_model_label') }}</td><td class="amount" style="color: #00796b;">{{ number_format($totalPayments, 2) }} {{ __('app.currency') }} ({{ $paymentsCount }} {{ __('payments.model_label') }})</td></tr>
            <tr><td><strong>إجمالي المحصل</strong></td><td class="amount" style="background: #e8f5e8; font-weight: 900;"><strong>{{ number_format($totalCollected, 2) }} جنيه</strong></td></tr>
            <tr><td>إجمالي المبالغ المستحقة</td><td class="amount">{{ number_format($totalDueAmount, 2) }} جنيه</td></tr>
        </table>
    </div>

    {{-- العقود + الأقساط --}}
    <div class="section">
        <div class="section-title">العقود</div>

        @forelse($contracts as $contract)
            <div class="section" style="background:#ffffff;border-radius:14px;padding:14px;box-shadow:0 4px 14px rgba(0,0,0,.05);">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
                    <div class="badge">تاريخ التعاقد: {{ $contract->contract_date }}</div>
                    <div class="badge">عدد الأقساط: {{ $contract->installment_count }}</div>
                </div>

                <table class="info-table" style="margin-bottom:12px;">
                    <tr>
                        <td>المنتجات</td>
                        <td>
                            @forelse($contract->products as $product)
                                <div style="margin-bottom:6px;">
                                    <strong>{{ $product->name }}</strong>
                                    <span style="color:#888">({{ $product->brand?->name ?? '—' }})</span>
                                    <span style="color:#888">{{ $product->category?->name ?? '' }}</span>
                                </div>
                            @empty
                                —
                            @endforelse
                        </td>
                    </tr>
                    {{-- <tr><td>تفاصيل المجموعة</td><td>{{ $contract->product_details ?? '—' }}</td></tr> --}}
                    <tr><td>السعر الأصلي</td><td class="amount">{{ number_format($contract->original_price, 2) }}</td></tr>
                    <tr><td>سعر التقسيط</td><td class="amount">{{ number_format($contract->installment_price, 2) }}</td></tr>
                    <tr><td>قيمة القسط</td><td class="amount">{{ number_format($contract->installment_value, 2) }}</td></tr>
                    <tr><td>الحالة</td><td>{{ __('contracts.statuses.' . $contract->status) }}</td></tr>
                </table>

                <table class="table">
                    <thead>
                        <tr>
                            <th>تاريخ الاستحقاق</th>
                            <th>قيمة القسط الأصلية</th>
                            <th>المبلغ المسدد</th>
                            <th>تاريخ السداد</th>
                            <th>الحالة</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($contract->installments as $inst)
                            <tr>
                                <td>{{ $inst->due_date ? \Carbon\Carbon::parse($inst->due_date)->format('d/m/Y') : '-' }}</td>
                                <td class="amount">{{ number_format($inst->value, 2) }} جنيه</td>
                                <td class="amount" style="color: #00796b; font-weight: bold;">
                                    {{ $inst->paid_amount ? number_format($inst->paid_amount, 2) . ' جنيه' : '-' }}
                                </td>
                                <td>{{ $inst->payment_date ? \Carbon\Carbon::parse($inst->payment_date)->format('d/m/Y') : '-' }}</td>
                                <td>
                                    @if($inst->is_paid)
                                        <span class="badge badge-success">مدفوع</span>
                                    @else
                                        <span class="badge badge-danger">غير مدفوع</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="empty">لا توجد أقساط</td></tr>
                        @endforelse
                    </tbody>
                    @if($contract->installments && $contract->installments->count() > 0)
                    <tfoot style="background: #f0f9ff; border-top: 2px solid #00796b;">
                        <tr>
                            <td colspan="2" style="font-weight: 900; color: #00796b; text-align: right;">الإجماليات:</td>
                            <td class="amount" style="font-weight: 900; color: #00796b;">
                                {{ number_format($contract->installments->whereNotNull('paid_amount')->sum('paid_amount'), 2) }} جنيه
                            </td>
                            <td colspan="2" style="text-align: center;">
                                <span class="badge badge-success">مدفوع: {{ $contract->installments->where('is_paid', true)->count() }}</span>
                                <span class="badge badge-danger" style="margin-right: 8px;">غير مدفوع: {{ $contract->installments->where('is_paid', false)->count() }}</span>
                            </td>
                        </tr>
                    </tfoot>
                    @endif
                </table>
            </div>
        @empty
            <div class="empty">لا توجد تعاقدات خلال الفترة المحددة</div>
        @endforelse
    </div>

    {{-- قسم المدفوعات الجديد --}}
    @if($payments && $payments->count() > 0)
    <div class="section">
        <div class="section-title">{{ __('payments.plural_model_label') }}</div>
        <table class="table">
            <thead>
                <tr>
                    <th>{{ __('payments.contract') }}</th>
                    <th>{{ __('payments.amount') }}</th>
                    <th>{{ __('payments.payment_date') }}</th>
                    <th>{{ __('payments.payment_method') }}</th>
                    <th>{{ __('payments.receipt_number') }}</th>
                    <th>{{ __('payments.notes') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($payments as $payment)
                    <tr>
                        <td>
                            @if($payment->contract && $payment->contract->products)
                                {{ __('payments.contract_format', ['id' => $payment->contract_id, 'amount' => '']) }} - {{ $payment->contract->products->pluck('name')->join(', ') }}
                            @else
                                {{ __('payments.contract_format', ['id' => $payment->contract_id, 'amount' => '']) }}
                            @endif
                        </td>
                        <td class="amount">{{ number_format($payment->amount, 2) }} {{ __('app.currency') }}</td>
                        <td>{{ $payment->payment_date ? \Carbon\Carbon::parse($payment->payment_date)->format('d/m/Y') : '-' }}</td>
                        <td>
                            @php
                                $methodColors = [
                                    'cash' => '#e8f5e8; color: #2e7d2e',
                                    'bank_transfer' => '#e3f2fd; color: #1976d2',
                                    'check' => '#fff3e0; color: #f57c00',
                                    'card' => '#f3e5f5; color: #7b1fa2'
                                ];
                                $methodLabels = [
                                    'cash' => __('payments.payment_methods.cash'),
                                    'bank_transfer' => __('payments.payment_methods.bank_transfer'),
                                    'check' => __('payments.payment_methods.check'),
                                    'card' => __('payments.payment_methods.card')
                                ];
                            @endphp
                            <span class="badge" style="background: {{ $methodColors[$payment->payment_method] ?? '#f5f5f5; color: #666' }};">
                                {{ $methodLabels[$payment->payment_method] ?? $payment->payment_method }}
                            </span>
                        </td>
                        <td>{{ $payment->receipt_number ?? '-' }}</td>
                        <td>{{ $payment->notes ?? '-' }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        {{-- ملخص المدفوعات --}}
        @php
            $totalPayments = $payments->sum('amount');
            $paymentsByMethod = $payments->groupBy('payment_method');
        @endphp
        <div style="margin-top: 16px; padding: 12px; background: #f8f9fa; border-radius: 8px;">
            <strong>{{ __('payments.plural_model_label') }} {{ __('app.total') }}:</strong>
            <div style="display: flex; gap: 20px; margin-top: 8px; flex-wrap: wrap;">
                <div><span class="badge">{{ __('app.total') }} {{ __('payments.plural_model_label') }}: {{ number_format($totalPayments, 2) }} {{ __('app.currency') }}</span></div>
                <div><span class="badge">عدد {{ __('payments.plural_model_label') }}: {{ $payments->count() }}</span></div>
            </div>
        </div>
    </div>
    @endif

    {{-- إحصائيات شاملة للعميل --}}
    @if($contracts->count() > 0)
    @php
        $allInstallments = $contracts->flatMap(fn($c) => $c->installments);
        $totalInstallmentsCount = $allInstallments->count();
        $paidInstallmentsCount = $allInstallments->where('is_paid', true)->count();
        $unpaidInstallmentsCount = $allInstallments->where('is_paid', false)->count();
        $overdueInstallmentsCount = $allInstallments->where('is_paid', false)->where('due_date', '<', now())->count();
        
        $totalPaidFromInstallments = $allInstallments->where('is_paid', true)->sum('paid_amount');
        $totalDirectPayments = $payments ? $payments->sum('amount') : 0;
        $totalRemaining = $allInstallments->where('is_paid', false)->sum('value');
    @endphp
    
    <style>
        .compact-stats-container {
            padding: 16px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 12px;
            margin-top: 24px;
            direction: rtl;
        }
        
        .dark .compact-stats-container {
            background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
        }
        
        .compact-stat-card {
            background: white;
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 12px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            border-left: 4px solid;
            position: relative;
        }
        
        .dark .compact-stat-card {
            background: #1f2937;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
        }
        
        .compact-stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }
        
        .compact-stat-card.primary { border-left-color: #3b82f6; background: linear-gradient(135deg, #ffffff 0%, #dbeafe 100%); }
        .compact-stat-card.success { border-left-color: #10b981; background: linear-gradient(135deg, #ffffff 0%, #d1fae5 100%); }
        .compact-stat-card.danger { border-left-color: #ef4444; background: linear-gradient(135deg, #ffffff 0%, #fee2e2 100%); }
        .compact-stat-card.warning { border-left-color: #f59e0b; background: linear-gradient(135deg, #ffffff 0%, #fed7aa 100%); }
        .compact-stat-card.info { border-left-color: #06b6d4; background: linear-gradient(135deg, #ffffff 0%, #cffafe 100%); }
        
        .dark .compact-stat-card.primary { background: linear-gradient(135deg, #1f2937 0%, #1e3a8a 100%); }
        .dark .compact-stat-card.success { background: linear-gradient(135deg, #1f2937 0%, #065f46 100%); }
        .dark .compact-stat-card.danger { background: linear-gradient(135deg, #1f2937 0%, #991b1b 100%); }
        .dark .compact-stat-card.warning { background: linear-gradient(135deg, #1f2937 0%, #92400e 100%); }
        .dark .compact-stat-card.info { background: linear-gradient(135deg, #1f2937 0%, #164e63 100%); }
        
        .compact-stat-icon {
            font-size: 24px;
            margin-bottom: 6px;
            display: block;
        }
        
        .compact-stat-label {
            font-size: 11px;
            font-weight: 600;
            color: #6b7280;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        
        .dark .compact-stat-label {
            color: #9ca3af;
        }
        
        .compact-stat-value {
            font-size: 20px;
            font-weight: 800;
            color: #111827;
            line-height: 1.2;
        }
        
        .dark .compact-stat-value {
            color: #f3f4f6;
        }
        
        .compact-stat-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 16px;
            font-size: 10px;
            font-weight: 700;
            margin-top: 6px;
        }
        
        .compact-stats-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 14px;
            margin-bottom: 14px;
        }
        
        .compact-section-title {
            font-size: 16px;
            font-weight: 800;
            color: #1f2937;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e5e7eb;
        }
        
        .dark .compact-section-title {
            color: #f3f4f6;
            border-bottom-color: #374151;
        }
        
        @media print {
            .compact-stats-container { display: none !important; }
        }
    </style>
    
    <div class="compact-stats-container section">
        <div class="compact-section-title">📊 الإحصائيات الإجمالية للعميل</div>
        
        <div class="compact-stats-row">
            <div class="compact-stat-card primary">
                <span class="compact-stat-icon">📝</span>
                <div class="compact-stat-label">إجمالي الأقساط</div>
                <div class="compact-stat-value">{{ $totalInstallmentsCount }}</div>
                <span class="compact-stat-badge badge-success">قسط</span>
            </div>
            
            <div class="compact-stat-card success">
                <span class="compact-stat-icon">✅</span>
                <div class="compact-stat-label">أقساط مدفوعة</div>
                <div class="compact-stat-value">{{ $paidInstallmentsCount }}</div>
                <span class="compact-stat-badge badge-success">مكتمل</span>
            </div>
            
            <div class="compact-stat-card danger">
                <span class="compact-stat-icon">❌</span>
                <div class="compact-stat-label">أقساط غير مدفوعة</div>
                <div class="compact-stat-value">{{ $unpaidInstallmentsCount }}</div>
                <span class="compact-stat-badge badge-danger">متبقي</span>
            </div>
            
            <div class="compact-stat-card warning">
                <span class="compact-stat-icon">⚠️</span>
                <div class="compact-stat-label">أقساط متأخرة</div>
                <div class="compact-stat-value">{{ $overdueInstallmentsCount }}</div>
                <span class="compact-stat-badge badge-warning">متأخر</span>
            </div>
        </div>
        
        <div class="compact-section-title">💰 الملخص المالي</div>
        <div class="compact-stats-row">
            <div class="compact-stat-card success">
                <span class="compact-stat-icon">💵</span>
                <div class="compact-stat-label">إجمالي المدفوع من الأقساط</div>
                <div class="compact-stat-value">{{ number_format($totalPaidFromInstallments, 2) }}</div>
                <span class="compact-stat-badge badge-success">جنيه</span>
            </div>
            
            <div class="compact-stat-card info">
                <span class="compact-stat-icon">💳</span>
                <div class="compact-stat-label">المدفوعات المباشرة</div>
                <div class="compact-stat-value">{{ number_format($totalDirectPayments, 2) }}</div>
                <span class="compact-stat-badge badge-info">جنيه</span>
            </div>
            
            <div class="compact-stat-card warning">
                <span class="compact-stat-icon">⏳</span>
                <div class="compact-stat-label">المبلغ المتبقي</div>
                <div class="compact-stat-value">{{ number_format($totalRemaining, 2) }}</div>
                <span class="compact-stat-badge badge-warning">جنيه</span>
            </div>
        </div>
    </div>
    @endif
</div>
</x-filament-panels::page>