<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-2 text-xs" style="color: var(--portal-muted);">{{ __('المطلوب سداده') }}</p>
        <p class="num text-3xl font-extrabold leading-none" style="color: var(--brand-danger);">
            {{ format_money((int) $invoice->due_amount) }}
        </p>
    </div>

    @if($handle)
        <x-portal.card :title="__('حوّل إلى')">
            <div class="flex items-center gap-2"
                 x-data="{ copied: false }">
                <code class="num flex-1 truncate rounded-xl px-3 py-2.5 text-sm font-bold"
                      style="background: var(--brand-50); color: var(--brand-700);"
                      x-ref="handle">{{ $handle }}</code>
                <button type="button" class="tap-target rounded-xl px-3 text-xs font-bold"
                        style="background: var(--brand-500); color: var(--brand-fg);"
                        @click="navigator.clipboard.writeText($refs.handle.textContent.trim()); copied = true; setTimeout(() => copied = false, 1800)">
                    <span x-show="!copied">{{ __('نسخ') }}</span>
                    <span x-show="copied" x-cloak>{{ __('تم') }}</span>
                </button>
            </div>
            @if($instructions)
                <p class="mt-3 whitespace-pre-line text-xs leading-relaxed" style="color: var(--portal-muted);">{{ $instructions }}</p>
            @endif
        </x-portal.card>
    @else
        <x-portal.card>
            <p class="text-xs leading-relaxed" style="color: var(--brand-warning);">
                {{ __('لم تُضِف الأكاديمية بيانات إنستاباي لهذا الفرع بعد. تواصل مع الإدارة قبل التحويل.') }}
            </p>
        </x-portal.card>
    @endif

    <form wire:submit="submit" class="portal-card space-y-4 px-4 py-4">
        <h2 class="text-sm font-bold">{{ __('بيانات التحويل') }}</h2>

        <div>
            <label for="amount" class="block text-xs font-semibold">{{ __('المبلغ المحوَّل') }}</label>
            {{-- dir="ltr" on every numeric input: an Arabic document renders a
                 number right-to-left otherwise and the caret jumps. --}}
            <input id="amount" type="text" inputmode="decimal" dir="ltr" wire:model="amount"
                   class="num mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                   style="border-color: var(--portal-border); background: var(--portal-surface);">
            @error('amount') <p role="alert" class="mt-1 text-[11px]" style="color: var(--brand-danger);">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="reference" class="block text-xs font-semibold">{{ __('رقم عملية التحويل') }}</label>
            <input id="reference" type="text" dir="ltr" wire:model="senderReference"
                   class="num mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                   style="border-color: var(--portal-border); background: var(--portal-surface);">
            <p class="mt-1 text-[11px]" style="color: var(--portal-muted);">
                {{ __('الرقم الذي يظهر في رسالة التأكيد — به تُطابق الإدارة التحويل مع كشف الحساب') }}
            </p>
            @error('senderReference') <p role="alert" class="mt-1 text-[11px]" style="color: var(--brand-danger);">{{ $message }}</p> @enderror
        </div>

        <div class="grid grid-cols-2 gap-3">
            <div>
                <label for="phone" class="block text-xs font-semibold">{{ __('رقم المُحوِّل') }}</label>
                <input id="phone" type="tel" dir="ltr" wire:model="senderPhone"
                       class="num mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                       style="border-color: var(--portal-border); background: var(--portal-surface);">
            </div>
            <div>
                <label for="date" class="block text-xs font-semibold">{{ __('تاريخ التحويل') }}</label>
                <input id="date" type="date" dir="ltr" wire:model="transferredAt"
                       class="num mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                       style="border-color: var(--portal-border); background: var(--portal-surface);">
                @error('transferredAt') <p role="alert" class="mt-1 text-[11px]" style="color: var(--brand-danger);">{{ $message }}</p> @enderror
            </div>
        </div>

        <div>
            <label for="proof" class="block text-xs font-semibold">{{ __('صورة إثبات التحويل') }}</label>
            <input id="proof" type="file" wire:model="proof" accept="image/*,application/pdf"
                   class="mt-1 block w-full text-xs">
            <div wire:loading wire:target="proof" class="mt-1 text-[11px]" style="color: var(--portal-muted);">
                {{ __('جارٍ رفع الملف...') }}
            </div>
            @error('proof') <p role="alert" class="mt-1 text-[11px]" style="color: var(--brand-danger);">{{ $message }}</p> @enderror
        </div>

        <button type="submit" wire:loading.attr="disabled" wire:target="submit,proof"
                class="w-full rounded-xl px-4 py-3 text-sm font-bold disabled:opacity-60"
                style="background: var(--brand-500); color: var(--brand-fg);">
            <span wire:loading.remove wire:target="submit">{{ __('إرسال إثبات التحويل') }}</span>
            <span wire:loading wire:target="submit">{{ __('جارٍ الإرسال...') }}</span>
        </button>

        <p class="text-[11px] leading-relaxed" style="color: var(--portal-muted);">
            {{ __('يُسجَّل المبلغ على الفاتورة بعد مراجعة الإدارة ومطابقته مع كشف الحساب، وليس فور الإرسال.') }}
        </p>
    </form>
</div>
