<div>
    {{-- Hero Card: Outstanding Balance --}}
    @php
        $balanceColor = ($totalOutstanding ?? 0) > 0
            ? (($overdueCount ?? 0) > 0 ? 'from-red-500 to-red-600' : 'from-amber-500 to-amber-600')
            : 'from-green-500 to-green-600';
    @endphp
    <div class="bg-gradient-to-br {{ $balanceColor }} rounded-2xl shadow-md p-6 mb-4 text-white">
        <p class="text-sm opacity-90">{{ __('الرصيد المستحق') }}</p>
        <p class="text-3xl font-bold mt-1" dir="ltr">
            {{ number_format(($totalOutstanding ?? 0) / 100, 2) }}
            <span class="text-base font-normal opacity-80">{{ __('ج.م') }}</span>
        </p>
        @if(($totalOutstanding ?? 0) > 0 && ($overdueCount ?? 0) > 0)
            <p class="text-xs mt-2 opacity-90">
                <svg class="w-3.5 h-3.5 inline-block me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                {{ __('يوجد مبالغ متأخرة عن موعد السداد') }}
            </p>
        @elseif(($totalOutstanding ?? 0) == 0)
            <p class="text-xs mt-2 opacity-90">{{ __('لا يوجد مبالغ مستحقة - ممتاز!') }}</p>
        @endif
    </div>

    {{-- Metric Cards --}}
    <div class="grid grid-cols-2 gap-3 mb-6">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
            <div class="flex items-center gap-2 mb-1">
                <svg class="w-4 h-4 text-[#DC2626]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span class="text-xs text-[#64748B]">{{ __('فواتير متأخرة') }}</span>
            </div>
            <p class="text-lg font-bold text-[#DC2626]" dir="ltr">
                {{ $overdueCount ?? 0 }}
            </p>
        </div>
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
            <div class="flex items-center gap-2 mb-1">
                <svg class="w-4 h-4 text-[#059669]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span class="text-xs text-[#64748B]">{{ __('إجمالي المدفوع') }}</span>
            </div>
            <p class="text-lg font-bold text-[#059669]" dir="ltr">
                {{ number_format(($totalPaid ?? 0) / 100, 2) }}
                <span class="text-xs font-normal text-[#64748B]">{{ __('ج.م') }}</span>
            </p>
        </div>
    </div>

    {{-- Filter Tabs --}}
    <div class="flex gap-2 overflow-x-auto pb-2 mb-4 scrollbar-hide">
        @php
            $filters = [
                '' => 'الكل',
                'sent' => 'مستحقة',
                'paid' => 'مدفوعة',
                'overdue' => 'متأخرة',
            ];
        @endphp
        @foreach($filters as $key => $label)
            <button
                wire:click="$set('statusFilter', '{{ $key }}')"
                class="px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-all min-h-[44px]
                    {{ $statusFilter === $key
                        ? 'bg-[#2563EB] text-white'
                        : 'bg-white text-[#64748B] border border-gray-200 hover:border-[#2563EB] hover:text-[#2563EB]' }}"
            >
                {{ __($label) }}
            </button>
        @endforeach
    </div>

    {{-- Invoice List --}}
    <div wire:loading.class="opacity-50 pointer-events-none">
        @if($invoices->isEmpty())
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 text-center">
                <svg class="w-12 h-12 text-gray-200 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/>
                </svg>
                <p class="text-sm text-[#64748B]">{{ __('لا توجد فواتير') }}</p>
                <p class="text-xs text-[#64748B] mt-1">{{ __('ستظهر الفواتير هنا عند إصدارها') }}</p>
            </div>
        @else
            <div class="space-y-3">
                @php
                    $invoiceStatusConfig = [
                        'paid' => ['label' => 'مدفوعة', 'bg' => 'bg-green-100', 'text' => 'text-green-700'],
                        'sent' => ['label' => 'مرسلة', 'bg' => 'bg-blue-100', 'text' => 'text-blue-700'],
                        'pending' => ['label' => 'معلقة', 'bg' => 'bg-blue-100', 'text' => 'text-blue-700'],
                        'partially_paid' => ['label' => 'مدفوعة جزئياً', 'bg' => 'bg-amber-100', 'text' => 'text-amber-700'],
                        'overdue' => ['label' => 'متأخرة', 'bg' => 'bg-red-100', 'text' => 'text-red-700'],
                        'cancelled' => ['label' => 'ملغاة', 'bg' => 'bg-gray-100', 'text' => 'text-gray-500'],
                        'draft' => ['label' => 'مسودة', 'bg' => 'bg-gray-100', 'text' => 'text-gray-600'],
                    ];
                @endphp

                @foreach($invoices as $invoice)
                    @php
                        $invoiceStatus = $invoice->status->value ?? $invoice->status ?? '';
                        $statusConf = $invoiceStatusConfig[$invoiceStatus] ?? ['label' => $invoiceStatus, 'bg' => 'bg-gray-100', 'text' => 'text-gray-700'];
                    @endphp
                    <a href="{{ route('parent.finances.invoice', ['invoice' => $invoice->uuid]) }}" wire:navigate
                       class="block bg-white rounded-2xl shadow-sm border border-gray-100 p-4 hover:shadow-md transition-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-sm font-semibold text-[#0F172A]" dir="ltr">{{ $invoice->invoice_number ?? '' }}</p>
                                <p class="text-xs text-[#64748B] mt-0.5">{{ $invoice->issue_date?->format('Y-m-d') ?? '' }}</p>
                            </div>
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-medium {{ $statusConf['bg'] }} {{ $statusConf['text'] }}">
                                {{ __($statusConf['label']) }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-50">
                            <span class="text-sm font-bold text-[#0F172A]" dir="ltr">
                                {{ number_format(($invoice->total_amount ?? 0) / 100, 2) }} {{ __('ج.م') }}
                            </span>
                            @if(($invoice->due_amount ?? 0) > 0)
                                <span class="text-xs text-[#DC2626] font-medium" dir="ltr">
                                    {{ __('متبقي:') }} {{ number_format($invoice->due_amount / 100, 2) }} {{ __('ج.م') }}
                                </span>
                            @endif
                        </div>
                    </a>
                @endforeach
            </div>

            <div class="mt-4">
                {{ $invoices->links() }}
            </div>
        @endif
    </div>
</div>
