@php
    $primary = $setting?->primary_color ?: '#124a61';
    $accent = $setting?->accent_color ?: '#2e86ab';
    $companyName = $setting?->company_name ?: $invoice->team?->name;
    $symbol = $currencySymbol ?: '';
    $code = $invoice->currency_code ?: '';

    $money = function ($value) use ($symbol, $code) {
        $formatted = number_format((float) $value, 2);
        return ($symbol !== '' ? $symbol . ' ' : ($code !== '' ? $code . ' ' : '')) . $formatted;
    };

    $logoUrl = $setting?->logoSrc();

    // Where to pay, for this invoice's currency only, resolved through the same
    // helper the PDF uses so the page and the download always agree — including
    // on whether the bank details show at all, which follows the invoice's
    // payment method.
    $banking = \App\Support\DocumentBanking::for(
        $invoice->team_id, $invoice->currency_code, $setting, $invoice->paymentMethod
    );
    $hasBanking = $banking['showsBanking'];

    $hasBalance = (float) $invoice->balance_due > 0.01 && ! in_array($invoice->status, ['VOID', 'PAID'], true);
    $paynowConfigured = $paynowConfigured ?? false;
    $canPayOnline = $hasBalance && $paynowConfigured;
    $isPaid = ! $hasBalance && $invoice->status !== 'VOID';

    $total = (float) $invoice->total;
    $paid = (float) $invoice->amount_paid;
    $paidPct = $total > 0 ? min(100, round(($paid / $total) * 100)) : ($isPaid ? 100 : 0);
    $itemCount = $invoice->lineItems->count();

    // Status as a customer would say it, not as the database stores it.
    $statusMeta = [
        'UNPAID'  => ['label' => __('Unpaid'),          'icon' => 'shield-check',        'bg' => '#fff7ed', 'text' => '#c2410c'],
        'PARTIAL' => ['label' => __('Partially paid'),  'icon' => 'clock',               'bg' => '#fefce8', 'text' => '#a16207'],
        'PAID'    => ['label' => __('Paid'),            'icon' => 'check',               'bg' => '#ecfdf5', 'text' => '#047857'],
        'OVERDUE' => ['label' => __('Unpaid, overdue'), 'icon' => 'exclamation-triangle','bg' => '#fff1f2', 'text' => '#be123c'],
        'VOID'    => ['label' => __('Cancelled'),       'icon' => 'x-mark',              'bg' => '#f1f5f9', 'text' => '#475569'],
    ];
    $status = $statusMeta[$invoice->isOverdue() ? 'OVERDUE' : $invoice->displayStatus()];

    // Wallets Paynow can push a prompt to. Each shows its own logo from
    // public/images/wallets/ when the file is there, and falls back to a
    // wordmark in the brand colour so a missing asset never breaks the card.
    $walletLogo = function (string $slug): ?string {
        foreach (['svg', 'png', 'webp'] as $extension) {
            $path = "images/wallets/{$slug}.{$extension}";

            if (is_file(public_path($path))) {
                return asset($path);
            }
        }

        return null;
    };

    // Until the logo files land, each wallet is drawn as its own two-tone
    // wordmark, which is how all three brands actually split their colours.
    // Closer to the real mark than one flat colour, and it never 404s.
    // Each logo gets its own height. A wordmark 5x wider than it is tall and a
    // stacked mark only 2x wider cannot share one, sizing them alike leaves the
    // stacked one a smudge. Heights are optical, matched by eye at 100% zoom.
    $wallets = [
        'ecocash' => [
            'label' => 'EcoCash', 'hint' => __('Econet'), 'tone' => '#e5262c',
            'height' => 'h-[17px]',
            'parts' => [['Eco', '#0056a4'], ['Cash', '#e5262c']],
        ],
        'onemoney' => [
            'label' => 'OneMoney', 'hint' => __('NetOne'), 'tone' => '#f58220',
            'height' => 'h-[30px]',
            'parts' => [['One', '#231f20'], ['Money', '#f58220']],
        ],
        'innbucks' => [
            'label' => 'InnBucks', 'hint' => __('Any network'), 'tone' => '#12284c',
            'height' => 'h-[19px]',
            'parts' => [['Inn', '#12284c'], ['Bucks', '#12284c']],
            'dots' => ['#f3b41b', '#8e5ea2', '#2faf8e', '#e1252b'],
        ],
    ];

    foreach ($wallets as $slug => $wallet) {
        $wallets[$slug]['logo'] = $walletLogo($slug);
    }

    $selectedWallet = old('method', 'ecocash');
@endphp
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">
    <title>{{ $invoice->invoice_number }} &middot; {{ $companyName }}</title>
    {{-- Same company mark the rest of the app uses, so a customer's tab is
         recognisable while they pay. --}}
    <link rel="icon" type="image/svg+xml" href="{{ asset('images/semita-logo.svg') }}">
    {{-- The built stylesheet, not the Tailwind CDN: it carries the self-hosted
         icon font that <x-icon> needs, and keeps a payment page off third-party
         script hosts. Every utility used here is in the build, tailwind.config
         scans resources/views/**. --}}
    @vite(['resources/css/app.css'])
    <style>
        :root {
            --brand: {{ $primary }};
            --accent: {{ $accent }};
            --brand-tint: {{ $primary }}0f;
        }
        .brand-gradient { background-image: linear-gradient(135deg, var(--brand), var(--accent)); }
        .brand-text { color: var(--brand); }
        .brand-bg { background-color: var(--brand); }

        /* Wallet chooser: the radio is visually hidden, the card next to it
           carries the whole selected state so a tap anywhere selects. */
        .wallet-input:checked + .wallet-card {
            border-color: var(--brand);
            background-color: var(--brand-tint);
        }
        .wallet-input:checked + .wallet-card .wallet-check { opacity: 1; transform: scale(1); }
        .wallet-input:focus-visible + .wallet-card { outline: 2px solid var(--brand); outline-offset: 2px; }

        .rich ul { list-style: disc; padding-left: 1.25rem; margin: 0.25rem 0; }
        .rich ol { list-style: decimal; padding-left: 1.25rem; margin: 0.25rem 0; }
        .rich li { margin: 0.125rem 0; }
        .rich p { margin: 0.25rem 0; }
        .rich a { color: var(--brand); text-decoration: underline; }
    </style>
</head>
<body class="min-h-full bg-slate-50 font-sans text-slate-800 antialiased">
    <div class="mx-auto max-w-6xl px-4 py-5 sm:py-8">

        <!-- Header bar: who is billing, which document, what state it is in -->
        <div class="flex flex-col gap-4 rounded-2xl bg-white px-5 py-4 shadow-sm ring-1 ring-slate-900/5 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex flex-wrap items-center gap-x-5 gap-y-3">
                <div class="flex items-center gap-3">
                    @if ($logoUrl)
                        <img src="{{ $logoUrl }}" alt="{{ $companyName }}" class="h-9 w-auto max-w-[130px] object-contain">
                    @endif
                    <p class="text-base font-bold tracking-tight text-slate-900">{{ $companyName }}</p>
                </div>
                <div class="flex flex-wrap items-center gap-3">
                    <span class="text-sm text-slate-500">{{ __('Invoice') }} #{{ $invoice->invoice_number }}</span>
                    <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold"
                          style="background-color: {{ $status['bg'] }}; color: {{ $status['text'] }};">
                        <x-icon :name="$status['icon']" class="h-3 w-3" />
                        {{ $status['label'] }}
                    </span>
                </div>
            </div>

            <a href="{{ route('portal.invoice.pdf', $invoice->public_token) }}"
               class="inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
                <x-icon name="arrow-down-tray" class="h-4 w-4" />
                {{ __('Download PDF') }}
            </a>
        </div>

        @if (session('paynow_error'))
            <div class="mt-5 flex items-start gap-3 rounded-2xl border border-rose-100 bg-rose-50 px-4 py-3.5 text-sm text-rose-700">
                <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-rose-100 text-rose-600">
                    <x-icon name="exclamation-triangle" class="h-3.5 w-3.5" />
                </span>
                <span>{{ session('paynow_error') }}</span>
            </div>
        @endif

        <div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">

            <!-- Left: the amount, then how to settle it -->
            <div class="space-y-5 lg:col-span-2">

                <!-- Amount due -->
                <div class="brand-gradient relative overflow-hidden rounded-2xl px-7 py-8 text-white shadow-sm">
                    <div class="pointer-events-none absolute -right-16 -top-24 h-64 w-64 rounded-full bg-white/10"></div>
                    <div class="relative">
                        <p class="text-sm font-medium text-white/70">
                            {{ $isPaid ? __('Amount paid') : __('Amount due') }}
                        </p>
                        <p class="mt-1.5 text-4xl font-bold tabular-nums tracking-tight sm:text-5xl">
                            {{ $isPaid ? $money($invoice->total) : $money($invoice->balance_due) }}
                        </p>

                        @if ($isPaid)
                            <p class="mt-2 inline-flex items-center gap-1.5 text-sm text-white/75">
                                <x-icon name="check" class="h-3.5 w-3.5" />
                                {{ __('Paid in full. Thank you for your business.') }}
                            </p>
                        @elseif ($paid > 0)
                            <div class="mt-4 max-w-xs">
                                <div class="h-1.5 w-full overflow-hidden rounded-full bg-white/20">
                                    <div class="h-full rounded-full bg-white/90" style="width: {{ $paidPct }}%;"></div>
                                </div>
                                <p class="mt-2 text-xs text-white/70">
                                    {{ $money($paid) }} {{ __('of') }} {{ $money($total) }} {{ __('paid') }}
                                </p>
                            </div>
                        @elseif ($invoice->due_date)
                            <p class="mt-2 text-sm text-white/70">{{ __('Due') }} {{ $invoice->due_date->format('M j, Y') }}</p>
                        @endif
                    </div>
                </div>

                <!-- Pay -->
                @if ($canPayOnline)
                    <div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-900/5">
                        <div class="border-b border-slate-100 px-6 py-5">
                            <h2 class="text-lg font-bold tracking-tight text-slate-900">{{ __('Select a payment method') }}</h2>
                            <p class="mt-1 text-sm text-slate-500">
                                {{ __('Secure online payments through Paynow.') }}
                            </p>
                        </div>

                        <!-- Option 1, mobile money -->
                        <div class="px-6 py-6">
                            <div class="flex items-start justify-between gap-4">
                                <div class="flex items-start gap-3.5">
                                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl"
                                          style="background-color: var(--brand-tint); color: var(--brand);">
                                        <x-icon name="device-phone-mobile" class="h-5 w-5" />
                                    </span>
                                    <div>
                                        <h3 class="text-base font-bold text-slate-900">{{ __('Mobile money') }}</h3>
                                    </div>
                                </div>
                                <span class="hidden shrink-0 rounded-full bg-emerald-50 px-2.5 py-1 text-[11px] font-semibold text-emerald-700 sm:inline-block">
                                    {{ __('Instant') }}
                                </span>
                            </div>

                            <form method="POST" action="{{ route('paynow.express', $invoice->public_token) }}" id="pay-form" class="mt-5">
                                @csrf

                                @if ($errors->any())
                                    <div class="mb-4 rounded-xl border border-rose-100 bg-rose-50 px-3.5 py-2.5 text-xs font-medium text-rose-700">
                                        {{ $errors->first() }}
                                    </div>
                                @endif

                                <!-- Wallet -->
                                <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                                    @foreach ($wallets as $value => $wallet)
                                        <label class="relative block cursor-pointer">
                                            <input type="radio" name="method" value="{{ $value }}"
                                                   class="wallet-input sr-only" data-label="{{ $wallet['label'] }}"
                                                   @checked($selectedWallet === $value)>
                                            <span class="wallet-card flex items-center gap-3 rounded-xl border-2 border-slate-200 bg-white px-4 py-3.5 transition hover:border-slate-300">
                                                <span class="flex min-w-0 flex-1 flex-col gap-1.5">
                                                    @if ($wallet['logo'])
                                                        {{-- Fixed-height slot so the three cards line up whatever
                                                             shape each logo is; the mark sizes itself inside it. --}}
                                                        <span class="flex h-[30px] items-center">
                                                            <img src="{{ $wallet['logo'] }}" alt="{{ $wallet['label'] }}"
                                                                 class="{{ $wallet['height'] }} w-auto max-w-[104px] object-contain object-left">
                                                        </span>
                                                    @else
                                                        <span class="flex h-[30px] items-center gap-1.5">
                                                            @if (! empty($wallet['dots']))
                                                                <span class="grid shrink-0 grid-cols-2 gap-[1.5px]">
                                                                    @foreach ($wallet['dots'] as $dot)
                                                                        <span class="h-[5px] w-[5px] rounded-full" style="background-color: {{ $dot }};"></span>
                                                                    @endforeach
                                                                </span>
                                                            @endif
                                                            <span class="truncate text-[15px] font-extrabold leading-none tracking-tight">
                                                                @foreach ($wallet['parts'] as [$text, $colour])
                                                                    <span style="color: {{ $colour }};">{{ $text }}</span>
                                                                @endforeach
                                                            </span>
                                                        </span>
                                                    @endif
                                                    <span class="truncate text-[11px] text-slate-400">{{ $wallet['hint'] }}</span>
                                                </span>
                                                <span class="wallet-check flex h-5 w-5 shrink-0 scale-75 items-center justify-center rounded-full text-white opacity-0 transition brand-bg">
                                                    <x-icon name="check" class="h-2.5 w-2.5" />
                                                </span>
                                            </span>
                                        </label>
                                    @endforeach
                                </div>

                                <!-- Details -->
                                <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                                    <div>
                                        <label for="pn_phone" class="block text-sm font-medium text-slate-600" id="phone-label"
                                               data-template="{{ __(':wallet mobile number') }}">
                                            {{ __(':wallet mobile number', ['wallet' => $wallets[$selectedWallet]['label'] ?? 'EcoCash']) }}
                                        </label>
                                        <input id="pn_phone" type="tel" name="phone" required inputmode="tel" autocomplete="tel"
                                               value="{{ old('phone', $invoice->customer?->phone) }}"
                                               placeholder="+263 77 123 4567"
                                               class="mt-1.5 block w-full rounded-xl border-slate-200 px-3.5 py-2.5 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-300 focus:border-slate-400 focus:ring-slate-400">
                                    </div>
                                    <div>
                                        <label for="pn_email" class="block text-sm font-medium text-slate-600">{{ __('Email address for receipt') }}</label>
                                        <input id="pn_email" type="email" name="email" required autocomplete="email"
                                               value="{{ old('email', $invoice->customer?->email) }}"
                                               placeholder="you@example.com"
                                               class="mt-1.5 block w-full rounded-xl border-slate-200 px-3.5 py-2.5 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-300 focus:border-slate-400 focus:ring-slate-400">
                                    </div>
                                </div>

                                <button type="submit" id="pay-submit"
                                        class="brand-bg mt-4 inline-flex w-full items-center justify-center gap-2 rounded-xl px-6 py-3.5 text-sm font-bold text-white shadow-sm transition hover:opacity-95 disabled:cursor-wait disabled:opacity-70">
                                    <span id="pay-label"
                                          data-template="{{ __('Pay via :wallet') }}">{{ __('Pay via :wallet', ['wallet' => $wallets[$selectedWallet]['label'] ?? 'EcoCash']) }}</span>
                                    <span class="opacity-60">&middot;</span>
                                    <span class="tabular-nums">{{ $money($invoice->balance_due) }}</span>
                                </button>

                                <p class="mt-3 text-center text-xs leading-relaxed text-slate-400" id="pay-hint"
                                   data-template="{{ __('A prompt will be sent to your phone. Enter your :wallet PIN to authorise the payment.') }}">
                                    <span>{{ __('A prompt will be sent to your phone. Enter your :wallet PIN to authorise the payment.', ['wallet' => $wallets[$selectedWallet]['label'] ?? 'EcoCash']) }}</span>
                                </p>
                            </form>
                        </div>

                        <!-- Option 2, card via Paynow's hosted checkout -->
                        <div class="relative border-t border-slate-100 bg-slate-50/60 px-6 pb-6 pt-8">
                            <!-- "or" straddles the divider, so the two options read as a choice -->
                            <span class="absolute -top-2.5 left-1/2 -translate-x-1/2 rounded-full bg-white px-3 py-0.5 text-[11px] font-semibold uppercase tracking-wider text-slate-400 ring-1 ring-slate-200">
                                {{ __('or') }}
                            </span>

                            <div class="flex items-start gap-3.5">
                                <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-white text-slate-500 ring-1 ring-slate-200">
                                    <x-icon name="credit-card" class="h-5 w-5" />
                                </span>
                                <div class="min-w-0">
                                    <h3 class="text-base font-bold text-slate-900">{{ __('Debit or credit card') }}</h3>
                                    <p class="mt-0.5 text-sm leading-relaxed text-slate-500">
                                        {{ __('Pay via Visa / Mastercard through Paynow Secure Payments.') }}
                                    </p>
                                </div>
                            </div>

                            <form method="POST" action="{{ route('paynow.initiate', $invoice->public_token) }}" class="mt-5">
                                @csrf
                                {{-- Paynow's own button: customers recognise it, and it states
                                     which cards and wallets the hosted checkout accepts. --}}
                                <button type="submit"
                                        class="mx-auto block rounded-lg transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                                        style="outline-color: var(--brand);">
                                    <img src="{{ asset('images/paynow-pay-now.png') }}"
                                         alt="{{ __('Pay by card with Paynow') }}"
                                         width="200" height="81" class="h-auto w-[200px]">
                                </button>
                            </form>
                        </div>

                        <!-- Assurance strip -->
                        <div class="flex items-center justify-center gap-2 border-t border-slate-100 px-6 py-3.5 text-center">
                            <x-icon name="lock-closed" class="h-3.5 w-3.5 text-slate-400" />
                            <p class="text-xs text-slate-400">
                                {{ __('Secured by Paynow. :company never sees your PIN or card details.', ['company' => $companyName]) }}
                            </p>
                        </div>
                    </div>
                @endif

                <!-- Manual payment instructions (shown when online payment is unavailable) -->
                @if ($hasBalance && ! $paynowConfigured && $banking['hasAny'])
                    <div class="rounded-2xl bg-white p-6 text-sm shadow-sm ring-1 ring-slate-900/5">
                        <h2 class="text-base font-bold text-slate-900">{{ __('How to pay') }}</h2>
                        @if ($banking['paymentMethods']->isNotEmpty())
                            <div class="mt-2 space-y-1.5 text-slate-600">
                                @foreach ($banking['paymentMethods'] as $method)
                                    <p>
                                        <span class="font-semibold text-slate-800">{{ $method->name }}</span>
                                        @if ($method->instructions)
                                            <span class="block text-slate-500">{{ $method->instructions }}</span>
                                        @endif
                                    </p>
                                @endforeach
                            </div>
                        @elseif ($setting?->payment_methods)
                            <div class="rich mt-2 text-slate-600">{!! \App\Support\Html::display($setting->payment_methods) !!}</div>
                        @endif
                        @if ($hasBanking)
                            <div class="mt-3">
                                @include('portal.partials.banking', ['banking' => $banking, 'setting' => $setting, 'currencyCode' => $invoice->currency_code])
                            </div>
                        @endif
                    </div>
                @endif

                <!-- Payment history -->
                @if ($invoice->payments->isNotEmpty())
                    <div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-900/5">
                        <h2 class="text-base font-bold text-slate-900">{{ __('Payments received') }}</h2>
                        <div class="mt-4 space-y-2">
                            @foreach ($invoice->payments->sortBy('paid_at') as $payment)
                                <div class="flex items-center justify-between gap-4 rounded-xl bg-slate-50 px-4 py-3">
                                    <div class="min-w-0">
                                        <p class="truncate text-sm font-semibold text-slate-800">{{ $payment->channel }}</p>
                                        <p class="text-xs text-slate-400">
                                            {{ optional($payment->paid_at)->format('d M Y') }}
                                            @if ($payment->reference) &middot; {{ $payment->reference }} @endif
                                            @if ((float) $payment->surcharge > 0) &middot; +{{ $money($payment->surcharge) }} {{ __('fee') }} @endif
                                        </p>
                                    </div>
                                    <p class="shrink-0 text-sm font-bold tabular-nums text-emerald-600">{{ $money($payment->amount) }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Notes / terms -->
                @if ($invoice->notes || ($hasBalance && $hasBanking && $paynowConfigured) || $setting?->terms_and_conditions)
                    <div class="space-y-4 rounded-2xl bg-white p-6 text-sm shadow-sm ring-1 ring-slate-900/5">
                        @if ($invoice->notes)
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Notes') }}</p>
                                <p class="mt-1 whitespace-pre-line text-slate-600">{{ $invoice->notes }}</p>
                            </div>
                        @endif
                        @if ($hasBalance && $hasBanking && $paynowConfigured)
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">
                                    {{ __('Banking Details') }}
                                    @if ($banking['accounts']->isNotEmpty())
                                        <span class="text-slate-300">&middot;</span> {{ $invoice->currency_code }}
                                    @endif
                                </p>
                                <div class="mt-1">
                                    @include('portal.partials.banking', ['banking' => $banking, 'setting' => $setting, 'currencyCode' => $invoice->currency_code])
                                </div>
                            </div>
                        @endif
                        @if ($setting?->terms_and_conditions)
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Terms & Conditions') }}</p>
                                <div class="rich mt-1 text-slate-600">{!! \App\Support\Html::display(\App\Support\DocumentTerms::forInvoice($setting, $invoice)) !!}</div>
                            </div>
                        @endif
                    </div>
                @endif
            </div>

            <!-- Right: what is being charged -->
            <div class="space-y-5">

                <!-- Invoice summary -->
                <div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-900/5">
                    <h2 class="text-base font-bold text-slate-900">{{ __('Invoice summary') }}</h2>

                    <dl class="mt-4 space-y-3 text-sm">
                        <div class="flex justify-between gap-4">
                            <dt class="text-slate-500">{{ __('Invoice number') }}</dt>
                            <dd class="text-right font-medium text-slate-900">{{ $invoice->invoice_number }}</dd>
                        </div>
                        <div class="flex justify-between gap-4">
                            <dt class="text-slate-500">{{ __('Issue date') }}</dt>
                            <dd class="whitespace-nowrap text-right font-medium text-slate-900">{{ $invoice->created_at?->format('M j, Y') }}</dd>
                        </div>
                        @if ($invoice->due_date)
                            <div class="flex justify-between gap-4">
                                <dt class="text-slate-500">{{ __('Due date') }}</dt>
                                <dd class="whitespace-nowrap text-right font-medium text-slate-900">{{ $invoice->due_date->format('M j, Y') }}</dd>
                            </div>
                        @endif
                        <div class="flex justify-between gap-4">
                            <dt class="shrink-0 text-slate-500">{{ __('Billed to') }}</dt>
                            <dd class="text-right">
                                <span class="block font-medium text-slate-900">{{ $invoice->customer?->name ?: '—' }}</span>
                                @if ($invoice->customer?->email)
                                    <span class="block break-all text-xs text-slate-400">{{ $invoice->customer->email }}</span>
                                @endif
                                @if ($invoice->customer?->phone)
                                    <span class="block text-xs text-slate-400">{{ $invoice->customer->phone }}</span>
                                @endif
                            </dd>
                        </div>
                        <div class="flex justify-between gap-4">
                            <dt class="text-slate-500">{{ __('Currency') }}</dt>
                            <dd class="text-right font-medium text-slate-900">{{ $code ?: '—' }}</dd>
                        </div>
                    </dl>

                    <dl class="mt-5 space-y-2.5 border-t border-slate-100 pt-4 text-sm">
                        <div class="flex justify-between gap-4">
                            <dt class="text-slate-500">{{ __('Subtotal') }}</dt>
                            <dd class="whitespace-nowrap font-medium tabular-nums text-slate-900">{{ $money($invoice->subtotal) }}</dd>
                        </div>
                        @if ((float) $invoice->discount > 0)
                            <div class="flex justify-between gap-4">
                                <dt class="text-slate-500">{{ __('Discount') }}</dt>
                                <dd class="whitespace-nowrap font-medium tabular-nums text-slate-900">- {{ $money($invoice->discount) }}</dd>
                            </div>
                        @endif
                        <div class="flex justify-between gap-4">
                            <dt class="text-slate-500">{{ __('VAT') }}</dt>
                            <dd class="whitespace-nowrap font-medium tabular-nums text-slate-900">{{ $money($invoice->vat) }}</dd>
                        </div>
                        @if ((float) $invoice->surcharge > 0)
                            <div class="flex justify-between gap-4">
                                <dt class="text-slate-500">{{ \App\Models\PaymentMethod::feeLabel() }}</dt>
                                <dd class="whitespace-nowrap font-medium tabular-nums text-slate-900">{{ $money($invoice->surcharge) }}</dd>
                            </div>
                        @endif
                        <div class="flex justify-between gap-4 border-t border-slate-100 pt-3">
                            <dt class="text-base font-bold text-slate-900">{{ __('Total') }}</dt>
                            <dd class="whitespace-nowrap text-base font-bold tabular-nums text-emerald-600">{{ $money($invoice->total) }}</dd>
                        </div>
                        @if ($paid > 0 && ! $isPaid)
                            <div class="flex justify-between gap-4">
                                <dt class="text-slate-500">{{ __('Already paid') }}</dt>
                                <dd class="whitespace-nowrap font-medium tabular-nums text-slate-900">- {{ $money($paid) }}</dd>
                            </div>
                            <div class="flex justify-between gap-4">
                                <dt class="font-semibold text-slate-900">{{ __('Balance due') }}</dt>
                                <dd class="whitespace-nowrap font-bold tabular-nums text-slate-900">{{ $money($invoice->balance_due) }}</dd>
                            </div>
                        @endif
                    </dl>
                </div>

                <!-- Order details -->
                <div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-900/5">
                    <div class="flex items-center justify-between gap-3">
                        <h2 class="text-base font-bold text-slate-900">{{ __('Order details') }}</h2>
                        <span class="shrink-0 rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-500">
                            {{ $itemCount }} {{ trans_choice('item|items', $itemCount) }}
                        </span>
                    </div>

                    <div class="mt-4 divide-y divide-slate-100">
                        @forelse ($invoice->lineItems as $line)
                            <div class="flex items-start justify-between gap-4 py-3.5 first:pt-0">
                                <div class="min-w-0">
                                    <p class="text-sm font-semibold text-slate-900">{{ $line->name }}</p>
                                    @if ($line->description)
                                        <p class="mt-0.5 text-xs text-slate-400">{!! nl2br(e($line->description)) !!}</p>
                                    @endif
                                    <p class="mt-1 text-xs text-slate-400">
                                        {{ rtrim(rtrim(number_format((float) $line->qty, 2), '0'), '.') }} &times; {{ $money($line->unit_price) }}
                                    </p>
                                </div>
                                <p class="shrink-0 whitespace-nowrap text-sm font-semibold tabular-nums text-slate-900">{{ $money($line->line_total) }}</p>
                            </div>
                        @empty
                            <p class="py-6 text-center text-sm text-slate-400">{{ __('No items.') }}</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-8 text-center text-xs text-slate-400">
            <p class="font-medium text-slate-500">{{ $companyName }}</p>
            @if ($setting?->email || $setting?->phone)
                <p class="mt-1">
                    {{ __('Questions about this invoice?') }}
                    @if ($setting?->email) {{ $setting->email }} @endif
                    @if ($setting?->email && $setting?->phone) &middot; @endif
                    @if ($setting?->phone) {{ $setting->phone }} @endif
                </p>
            @endif
        </div>
    </div>

    @if ($canPayOnline)
        <script>
            (function () {
                var form = document.getElementById('pay-form');
                if (!form) return;

                // Every bit of copy that names the wallet re-renders on selection,
                // so the card, the label and the button never disagree.
                var slots = ['phone-label', 'pay-label', 'pay-hint'].map(function (id) {
                    var el = document.getElementById(id);
                    if (!el) return null;
                    var target = el.tagName === 'P' && el.querySelector('span') ? el.querySelector('span') : el;
                    return { el: el, target: target, template: el.getAttribute('data-template') || '' };
                }).filter(Boolean);

                function applyWallet(label) {
                    slots.forEach(function (slot) {
                        if (slot.template) slot.target.textContent = slot.template.replace(':wallet', label);
                    });
                }

                form.querySelectorAll('.wallet-input').forEach(function (input) {
                    input.addEventListener('change', function () {
                        if (input.checked) applyWallet(input.getAttribute('data-label'));
                    });
                });

                // Reaching Paynow takes a few seconds; say so and block a second
                // submit, which would push two prompts to the same handset.
                var submit = document.getElementById('pay-submit');

                form.addEventListener('submit', function () {
                    var label = document.getElementById('pay-label');
                    if (submit) submit.disabled = true;
                    if (label) label.textContent = @json(__('Sending to your phone…'));
                });
            })();
        </script>
    @endif
</body>
</html>