@php
    $money = fn ($value) => 'R '.number_format((float) $value, 2);
    $company = \App\Models\CompanySetting::current();
    $bankingLines = $company->bankingDetailsLines($invoice->invoice_number);
@endphp

<x-layouts.public-document title="Pay Invoice {{ $invoice->invoice_number }} | Tarnova">
    <section class="mx-auto max-w-4xl">
        <div class="rounded-[2rem] border border-white/70 bg-white p-6 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)] sm:p-8">
            <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_300px] lg:items-start">
                <div>
                    <p class="text-xs font-bold uppercase tracking-[0.24em] text-slate-400">Secure payment</p>
                    <h1 class="mt-3 text-xl font-bold tracking-[-0.03em] text-slate-950">Pay invoice {{ $invoice->invoice_number }}</h1>
                    <p class="mt-3 text-sm leading-6 text-slate-500">Pay online or upload EFT proof.</p>
                </div>
                <div class="rounded-[1.5rem] bg-slate-950 p-5 text-white">
                    <p class="text-xs font-bold uppercase tracking-[0.2em] text-white/50">Amount due now</p>
                    <p class="mt-2 text-xl font-bold tracking-[-0.03em]">{{ $money($amount) }}</p>
                    <p class="mt-2 text-xs font-medium text-white/55">{{ $currency }} &middot; balance due</p>
                </div>
            </div>

            <div class="mt-6 grid gap-4 sm:grid-cols-3">
                <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Invoice total</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ $money($invoice->grand_total) }}</p>
                </div>
                <div class="rounded-2xl border border-green-100 bg-green-50 p-4">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-green-600/70">Already paid</p>
                    <p class="mt-2 font-semibold text-green-800">{{ $money($invoice->totalPaid()) }}</p>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white p-4">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Due date</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ $invoice->due_date->format('d M Y') }}</p>
                </div>
            </div>

            <div class="mt-7 grid gap-4 lg:grid-cols-2">
                <div class="payment-method-card payment-method-card-primary">
                    <div class="flex items-start gap-4">
                        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-white text-slate-950"><i class="fa-solid fa-shield-halved" aria-hidden="true"></i></span>
                        <div>
                            <h2 class="text-base font-black tracking-[-0.03em]">Secure online payment</h2>
                            <p class="mt-2 text-sm leading-6 text-white/60">Pay the balance online.</p>
                        </div>
                    </div>

                    <form action="{{ $invoice->publicPayStartUrl() }}" method="POST" class="mt-5">
                        @csrf
                        <button type="submit" class="inline-flex min-h-12 w-full items-center justify-center rounded-2xl bg-white px-5 py-3 text-sm font-black text-slate-950 transition hover:-translate-y-0.5 hover:bg-slate-100 focus:outline-none focus:ring-4 focus:ring-white/25">
                            Continue to secure payment
                        </button>
                    </form>
                </div>

                <div class="payment-method-card">
                    <div class="flex items-start gap-4">
                        <span class="payment-method-icon"><i class="fa-solid fa-building-columns" aria-hidden="true"></i></span>
                        <div>
                            <h2 class="payment-method-title">Pay by EFT / bank transfer</h2>
                            <p class="payment-method-copy">Transfer, then upload proof.</p>
                        </div>
                    </div>

                    <div class="payment-summary-grid">
                        <div class="payment-summary-tile">
                            <p class="payment-summary-tile-label">Reference</p>
                            <p class="payment-summary-tile-value">{{ $invoice->invoice_number }}</p>
                        </div>
                        <div class="payment-summary-tile payment-summary-tile-emphasis">
                            <p class="payment-summary-tile-label">EFT amount</p>
                            <p class="payment-summary-tile-value">{{ $money($amount) }}</p>
                        </div>
                    </div>

                    @if ($bankingLines !== [])
                        <div class="payment-bank-details">
                            @foreach ($bankingLines as $line)
                                <div class="payment-bank-detail-row">
                                    @if ($line['label'])
                                        <span>{{ $line['label'] }}</span>
                                    @endif
                                    <strong>{{ $line['value'] }}</strong>
                                </div>
                            @endforeach
                        </div>

                        @if ($pendingEftPayment)
                            <div class="payment-proof-notice">
                                <span class="payment-proof-notice-icon"><i class="fa-solid fa-clock" aria-hidden="true"></i></span>
                                <div>
                                    <p class="font-black">Proof already submitted</p>
                                    <p class="mt-1">Waiting for approval: {{ $pendingEftPayment->gateway_reference }}.</p>
                                </div>
                            </div>
                        @else
                            <form action="{{ $invoice->publicEftProofUrl() }}" method="POST" enctype="multipart/form-data" class="payment-proof-form">
                                @csrf
                                <label class="block">
                                    <span class="payment-field-label">Upload proof of payment</span>
                                    <input type="file" name="proof" accept=".pdf,.jpg,.jpeg,.png,.webp,application/pdf,image/jpeg,image/png,image/webp" class="payment-file-input">
                                    @error('proof')<span class="mt-2 block text-xs font-bold text-red-600">{{ $message }}</span>@enderror
                                    <span class="payment-help-text">PDF, JPG, PNG, WebP. Max 5MB.</span>
                                </label>

                                <label class="block">
                                    <span class="payment-field-label">Optional note</span>
                                    <textarea name="client_note" rows="3" class="builder-textarea @error('client_note') builder-textarea-invalid @enderror" placeholder="Optional note or reference.">{{ old('client_note') }}</textarea>
                                    @error('client_note')<span class="mt-2 block text-xs font-bold text-red-600">{{ $message }}</span>@enderror
                                </label>

                                <button type="submit" class="primary-button w-full justify-center">Submit proof for verification</button>
                                <p class="payment-help-text">Counts after approval.</p>
                            </form>
                        @endif
                    @else
                        <div class="payment-proof-notice">
                            <span class="payment-proof-notice-icon"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i></span>
                            <p>Contact us for EFT details.</p>
                        </div>
                    @endif
                </div>
            </div>

            <div class="mt-6 flex flex-col gap-3 border-t border-slate-200 pt-5 sm:flex-row sm:items-center sm:justify-between">
                <a href="{{ $invoice->publicViewUrl() }}" class="secondary-button justify-center">Back to invoice</a>
                <p class="text-xs leading-5 text-slate-500 sm:max-w-md sm:text-right">Pending payments need approval.</p>
            </div>
        </div>
    </section>
</x-layouts.public-document>