<div>
    {{-- Back Button --}}
    <div class="mb-4">
        <a href="{{ route('parent.finances') }}" wire:navigate
           class="inline-flex items-center gap-1.5 text-sm text-[#64748B] hover:text-[#2563EB] transition-colors min-h-[44px]">
            <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            {{ __('الفواتير') }}
        </a>
    </div>

    {{-- Invoice Header --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-4">
        <div class="flex items-start justify-between mb-3">
            <div>
                <p class="text-lg font-bold text-[#0F172A]" dir="ltr">{{ $invoice['number'] ?? '' }}</p>
                <p class="text-xs text-[#64748B] mt-1">{{ __('تاريخ الإصدار:') }} {{ $invoice['issue_date'] ?? '' }}</p>
            </div>
            @php
                $statusConfig = [
                    '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'],
                ];
                $conf = $statusConfig[$invoice['status'] ?? ''] ?? ['label' => $invoice['status'] ?? '', 'bg' => 'bg-gray-100', 'text' => 'text-gray-700'];
            @endphp
            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium {{ $conf['bg'] }} {{ $conf['text'] }}">
                {{ __($conf['label']) }}
            </span>
        </div>
        @if($invoice['due_date'] ?? null)
            <p class="text-xs text-[#64748B]">
                {{ __('تاريخ الاستحقاق:') }}
                <span class="{{ ($invoice['status'] ?? '') === 'overdue' ? 'text-[#DC2626] font-medium' : '' }}">
                    {{ $invoice['due_date'] }}
                </span>
            </p>
        @endif
    </div>

    {{-- Amount Summary Card --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-4">
        <div class="grid grid-cols-3 gap-4 text-center">
            <div>
                <p class="text-xs text-[#64748B]">{{ __('الإجمالي') }}</p>
                <p class="text-base font-bold text-[#0F172A] mt-1" dir="ltr">
                    {{ number_format(($invoice['total_amount'] ?? 0) / 100, 2) }}
                </p>
            </div>
            <div>
                <p class="text-xs text-[#64748B]">{{ __('المدفوع') }}</p>
                <p class="text-base font-bold text-[#059669] mt-1" dir="ltr">
                    {{ number_format(($invoice['paid_amount'] ?? 0) / 100, 2) }}
                </p>
            </div>
            <div>
                <p class="text-xs text-[#64748B]">{{ __('المتبقي') }}</p>
                <p class="text-base font-bold {{ ($invoice['balance_due'] ?? 0) > 0 ? 'text-[#DC2626]' : 'text-[#059669]' }} mt-1" dir="ltr">
                    {{ number_format(($invoice['balance_due'] ?? 0) / 100, 2) }}
                </p>
            </div>
        </div>
        <p class="text-[10px] text-[#64748B] text-center mt-2">{{ __('المبالغ بالجنيه المصري') }}</p>
    </div>

    {{-- Line Items --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-4 overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100">
            <h3 class="text-sm font-semibold text-[#0F172A]">{{ __('بنود الفاتورة') }}</h3>
        </div>
        <div class="divide-y divide-gray-50">
            @forelse($invoice['items'] ?? [] as $item)
                <div class="px-5 py-3">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <p class="text-sm text-[#0F172A]">{{ $item['description'] ?? '' }}</p>
                            <p class="text-xs text-[#64748B] mt-0.5" dir="ltr">
                                {{ $item['quantity'] ?? 1 }} x {{ number_format(($item['unit_price'] ?? 0) / 100, 2) }}
                            </p>
                        </div>
                        <p class="text-sm font-medium text-[#0F172A]" dir="ltr">
                            {{ number_format(($item['line_total'] ?? 0) / 100, 2) }} {{ __('ج.م') }}
                        </p>
                    </div>
                </div>
            @empty
                <div class="px-5 py-6 text-center">
                    <p class="text-sm text-[#64748B]">{{ __('لا توجد بنود') }}</p>
                </div>
            @endforelse
        </div>
    </div>

    {{-- Payment History --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-6 overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100">
            <h3 class="text-sm font-semibold text-[#0F172A]">{{ __('سجل المدفوعات') }}</h3>
        </div>
        @if(empty($invoice['payments']))
            <div class="px-5 py-6 text-center">
                <p class="text-sm text-[#64748B]">{{ __('لا توجد مدفوعات بعد') }}</p>
            </div>
        @else
            <div class="divide-y divide-gray-50">
                @foreach($invoice['payments'] as $payment)
                    <div class="px-5 py-3">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-[#0F172A]">{{ $payment['date'] ?? '' }}</p>
                                <p class="text-xs text-[#64748B] mt-0.5">
                                    @php
                                        $methods = [
                                            'cash' => 'نقدي',
                                            'card' => 'بطاقة',
                                            'wallet' => 'محفظة',
                                            'bank_transfer' => 'تحويل بنكي',
                                            'online' => 'إلكتروني',
                                        ];
                                    @endphp
                                    {{ __($methods[$payment['method'] ?? ''] ?? $payment['method'] ?? '') }}
                                </p>
                            </div>
                            <p class="text-sm font-bold text-[#059669]" dir="ltr">
                                {{ number_format(($payment['amount'] ?? 0) / 100, 2) }} {{ __('ج.م') }}
                            </p>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Pay Now Button --}}
    @if(($invoice['balance_due'] ?? 0) > 0)
        <div class="fixed bottom-20 start-4 end-4 sm:static sm:mt-4">
            <button
                wire:click="payNow"
                wire:loading.attr="disabled"
                wire:target="payNow"
                class="w-full bg-[#2563EB] text-white font-medium py-3.5 px-6 rounded-2xl hover:bg-blue-700 transition-colors min-h-[44px] shadow-lg sm:shadow-none disabled:opacity-50"
            >
                <span wire:loading.remove wire:target="payNow">{{ __('ادفع الآن') }}</span>
                <span wire:loading wire:target="payNow">{{ __('جارٍ المعالجة...') }}</span>
            </button>
        </div>
    @endif
</div>
