<div class="space-y-4">

    <x-portal.tabs :tabs="['installments' => __('الأقساط'), 'offers' => __('العروض')]" :active="$tab" />

    @error('pay') <div role="alert" class="portal-card px-4 py-3 text-xs" style="color: var(--brand-danger);">{{ $message }}</div> @enderror
    @error('offer') <div role="alert" class="portal-card px-4 py-3 text-xs" style="color: var(--brand-danger);">{{ $message }}</div> @enderror

    @if($tab === 'installments')
        @forelse($installments as $installment)
            @php
                $invoice = $installment->paymentPlan?->invoice;
                $overdue = $installment->due_date?->isPast();
                $participantId = (int) ($invoice?->billable_id ?? 0);
                $balance = (int) ($walletBalances[$participantId] ?? 0);
                $amount = min((int) $installment->amount, (int) ($invoice?->due_amount ?? 0));
                $canPay = in_array($participantId, $payableIds, true) && $balance >= $amount && $amount > 0;
            @endphp
            <article class="portal-card px-4 py-3">
                <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <p class="text-sm font-bold">{{ __('قسط') }} #{{ $installment->sequence }}</p>
                        <p class="num text-[11px]" style="color: {{ $overdue ? 'var(--brand-danger)' : 'var(--portal-muted)' }};">
                            {{ $installment->due_date?->translatedFormat('j M Y') }}
                            @if($overdue) · {{ __('متأخر') }} @endif
                        </p>
                        @if($invoice)
                            <p class="num text-[11px]" style="color: var(--portal-muted);">{{ $invoice->number }}</p>
                        @endif
                    </div>
                    <span class="num shrink-0 text-sm font-extrabold">{{ format_money((int) $installment->amount) }}</span>
                </div>

                @if($canPay)
                    {{-- Wallet only. A card gateway is feature-flagged off and an
                         InstaPay transfer is a claim awaiting review, so this is
                         the one payment the portal can settle immediately —
                         money the academy already holds for this member. --}}
                    <button type="button" wire:click="payInstallmentFromWallet({{ $installment->id }})"
                            wire:loading.attr="disabled"
                            class="mt-3 w-full rounded-xl px-4 py-2.5 text-xs font-bold"
                            style="background: var(--brand-500); color: var(--brand-fg);">
                        {{ __('سداد من المحفظة') }} ({{ format_money($balance) }})
                    </button>
                @elseif($invoice)
                    <a href="{{ route('portal.invoice.transfer', $invoice->uuid) }}" wire:navigate
                       class="mt-3 block rounded-xl border px-4 py-2.5 text-center text-xs font-bold"
                       style="border-color: var(--portal-border); color: var(--brand-600);">
                        {{ __('تسجيل تحويل') }}
                    </a>
                @endif
            </article>
        @empty
            <x-portal.card>
                <x-portal.empty :title="__('لا توجد أقساط مستحقة')" />
            </x-portal.card>
        @endforelse

        @if($renewals->isNotEmpty())
            <x-portal.card :title="__('التجديدات')">
                <ul class="space-y-2">
                    @foreach($renewals as $renewal)
                        <li class="flex items-center justify-between gap-3">
                            <div class="min-w-0">
                                <p class="num truncate text-sm font-semibold">{{ $renewal->number }}</p>
                                <p class="text-[11px]" style="color: var(--portal-muted);">
                                    {{ __('تجديد الاشتراك') }} · {{ $renewal->status->label() }}
                                </p>
                            </div>
                            <a href="{{ route('portal.invoice', $renewal->uuid) }}" wire:navigate
                               class="num shrink-0 text-sm font-bold" style="color: var(--brand-600);">
                                {{ format_money((int) $renewal->due_amount) }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </x-portal.card>
        @endif

    @else
        @forelse($offers as $offer)
            <article class="portal-card px-4 py-4">
                <p class="text-sm font-bold">{{ __('توفّر مقعد') }}</p>
                <p class="mt-0.5 text-xs" style="color: var(--portal-muted);">
                    {{ $offer->group?->name_ar ?? $offer->group?->program?->name_ar ?? __('مجموعة') }}
                    — {{ $offer->participant?->person?->name_ar }}
                </p>
                @if($offer->expires_at)
                    <p class="num mt-1 text-[11px]" style="color: var(--brand-warning);">
                        {{ __('ينتهي العرض') }} {{ $offer->expires_at->diffForHumans() }}
                    </p>
                @endif
                <div class="mt-3 flex gap-2">
                    <button type="button" wire:click="respondToOffer({{ $offer->id }}, 'accepted')"
                            class="flex-1 rounded-xl px-4 py-2.5 text-xs font-bold"
                            style="background: var(--brand-500); color: var(--brand-fg);">
                        {{ __('أوافق') }}
                    </button>
                    <button type="button" wire:click="respondToOffer({{ $offer->id }}, 'declined')"
                            class="rounded-xl border px-4 py-2.5 text-xs font-bold"
                            style="border-color: var(--portal-border); color: var(--portal-muted);">
                        {{ __('أعتذر') }}
                    </button>
                </div>
            </article>
        @empty
            <x-portal.card>
                <x-portal.empty :title="__('لا توجد عروض حالياً')"
                                :body="__('عند توفّر مقعد في مجموعة أنت على قائمة انتظارها سيظهر هنا')" />
            </x-portal.card>
        @endforelse
    @endif
</div>
