<div class="space-y-4">
    <div class="portal-card px-4 py-4">
        <p class="num text-sm font-bold">{{ $invoice->number }}</p>
        <p class="mt-0.5 text-xs" style="color: var(--portal-muted);">
            {{ $invoice->issue_date?->translatedFormat('j M Y') }} · {{ $invoice->status->label() }}
        </p>
        <p class="num mt-3 text-3xl font-extrabold leading-none"
           style="color: {{ $invoice->due_amount > 0 ? 'var(--brand-danger)' : 'var(--brand-success)' }};">
            {{ format_money((int) $invoice->due_amount) }}
        </p>
        <p class="num mt-1 text-[11px]" style="color: var(--portal-muted);">
            {{ __('الإجمالي') }} {{ format_money((int) $invoice->total_amount) }} ·
            {{ __('المسدَّد') }} {{ format_money((int) $invoice->paid_amount) }}
        </p>
    </div>

    <x-portal.card :title="__('البنود')">
        {{-- Frozen at issue. An invoice does not re-price itself. --}}
        <ul class="space-y-2">
            @foreach($invoice->items as $item)
                <li class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <p class="truncate text-sm">{{ $item->description }}</p>
                        <p class="num text-[11px]" style="color: var(--portal-muted);">
                            {{ $item->quantity }} × {{ format_money((int) $item->unit_price) }}
                        </p>
                    </div>
                    <span class="num shrink-0 text-sm font-semibold">{{ format_money((int) $item->total_amount) }}</span>
                </li>
            @endforeach
        </ul>
    </x-portal.card>

    @if($invoice->payments->isNotEmpty())
        <x-portal.card :title="__('المدفوعات')">
            <ul class="space-y-2">
                @foreach($invoice->payments as $payment)
                    <li class="flex items-center justify-between gap-3">
                        <div class="min-w-0">
                            <p class="num truncate text-sm">{{ $payment->reference }}</p>
                            <p class="text-[11px]" style="color: var(--portal-muted);">
                                {{ $payment->payment_date?->translatedFormat('j M Y') }} · {{ $payment->method?->label() }}
                            </p>
                        </div>
                        <span class="num shrink-0 text-sm font-semibold">{{ format_money((int) $payment->amount) }}</span>
                    </li>
                @endforeach
            </ul>
        </x-portal.card>
    @endif
</div>
