@php
    use App\Models\Payment;

    $money = fn ($value) => 'R '.number_format((float) $value, 2);
    $totalPaid = $invoice->totalPaid();
    $remainingBalance = $invoice->remainingBalance();
    $adjustedTotal = $invoice->adjustedTotal();
    $paymentProgress = $adjustedTotal > 0 ? min(100, round(($totalPaid / $adjustedTotal) * 100)) : 100;
@endphp

<x-layouts.app title="{{ $invoice->invoice_number }} | Tarnova" page-title="Invoice details">
    <x-slot:headerActions>
        <a href="{{ route('invoices.index') }}" class="secondary-button">Back to invoices</a>
        <a href="{{ route('invoices.pdf', $invoice) }}" class="secondary-button">Download PDF</a>
        @can('manage-credit-notes')
            @if ($invoice->isActive())
                <a href="{{ route('credit-notes.create', ['invoice_id' => $invoice->id]) }}" class="secondary-button">Create Credit Note</a>
            @endif
        @endcan
        @can('send-invoice-emails')
            @if ($invoice->isActive())
            <form action="{{ route('invoices.send', $invoice) }}" method="POST" data-send-invoice-form>
                @csrf
                <button type="button" class="primary-button" data-send-invoice-trigger data-invoice-id="{{ $invoice->id }}" data-invoice-number="{{ $invoice->invoice_number }}" data-client-email="{{ $invoice->client->email ?: 'the client' }}">
                    {{ $invoice->sent_at ? 'Resend invoice' : 'Send invoice' }}
                </button>
            </form>
            @endif
        @endcan
    </x-slot:headerActions>

    <x-sales-module-nav />

    <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
        <div class="space-y-6">
            <section class="invoice-detail-hero">
                <div class="invoice-detail-hero-top">
                    <div class="min-w-0">
                        <p class="dashboard-kicker">Invoice</p>
                        <div class="mt-2 flex flex-wrap items-center gap-3">
                            <h3 class="invoice-detail-title">{{ $invoice->invoice_number }}</h3>
                            <span class="{{ $invoice->statusBadgeClass() }}" data-invoice-status="{{ $invoice->id }}">
                                <i class="fa-solid fa-circle text-[0.42rem]" aria-hidden="true"></i>{{ $invoice->statusLabel() }}
                            </span>
                        </div>
                        <p class="invoice-detail-subtitle">{{ $invoice->client->name }} - {{ $invoice->client->email ?: 'No email on file' }}</p>
                    </div>

                    <div class="min-w-[220px] rounded-[1.35rem] bg-slate-950 p-5 text-white shadow-[0_20px_50px_-34px_rgba(15,23,42,0.72)]">
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-white/60">Balance due</p>
                        <p class="mt-2 text-xl font-bold tracking-[-0.03em]">{{ $money($remainingBalance) }}</p>
                        <div class="mt-4 h-2 overflow-hidden rounded-full bg-white/15">
                            <div class="h-full rounded-full bg-white" style="width: {{ $paymentProgress }}%"></div>
                        </div>
                        <p class="mt-2 text-xs font-medium text-white/60">{{ $paymentProgress }}% paid</p>
                    </div>
                </div>

                <div class="invoice-hero-stats">
                    <div class="invoice-hero-stat">
                        <span>Issue date</span>
                        <strong>{{ $invoice->issue_date->format('d M Y') }}</strong>
                    </div>
                    <div class="invoice-hero-stat">
                        <span>Due date</span>
                        <strong>{{ $invoice->due_date->format('d M Y') }}</strong>
                    </div>
                    <div class="invoice-hero-stat">
                        <span>Email status</span>
                        <strong data-invoice-sent-at="{{ $invoice->id }}">{{ $invoice->sent_at?->format('d M Y H:i') ?? 'Not sent' }}</strong>
                    </div>
                    <div class="invoice-hero-stat">
                        <span>Payment status</span>
                        <strong data-invoice-paid-at="{{ $invoice->id }}">{{ $invoice->paid_at?->format('d M Y H:i') ?? 'Awaiting payment' }}</strong>
                    </div>
                </div>
            </section>

            <section class="section-card">
                <div class="section-header">
                    <div>
                        <p class="dashboard-kicker">Invoice journey</p>
                        <h3 class="section-title">Lifecycle timeline</h3>
                        <p class="mt-2 text-sm text-slate-500">Created, sent, viewed, paid, credited, settled.</p>
                    </div>
                    <span class="{{ $invoice->isCollectible() ? 'status-badge status-sent' : ($remainingBalance <= 0.01 && ! $invoice->isTerminal() && $invoice->status !== \App\Models\Invoice::STATUS_DRAFT ? 'status-badge status-paid' : $invoice->statusBadgeClass()) }}">
                        {{ $invoice->isCollectible() ? 'Collectible' : ($remainingBalance <= 0.01 && ! $invoice->isTerminal() && $invoice->status !== \App\Models\Invoice::STATUS_DRAFT ? 'Settled' : $invoice->statusLabel()) }}
                    </span>
                </div>

                <div class="invoice-timeline-grid mt-6 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                    @foreach ($timelineSteps as $step)
                        @php
                            $stateClass = match ($step['state']) {
                                'complete' => 'border-green-200 bg-green-50 text-green-800',
                                'current' => 'border-blue-200 bg-blue-50 text-blue-800',
                                'stopped' => 'border-rose-200 bg-rose-50 text-rose-800',
                                'unavailable' => 'border-slate-200 bg-slate-50 text-slate-500',
                                default => 'border-slate-200 bg-white text-slate-600',
                            };

                            $iconClass = match ($step['state']) {
                                'current' => 'invoice-timeline-icon-current',
                                'stopped' => 'invoice-timeline-icon-stopped',
                                'unavailable' => 'invoice-timeline-icon-muted',
                                default => '',
                            };
                        @endphp

                        <article class="invoice-timeline-card relative overflow-hidden rounded-3xl border p-4 shadow-[0_18px_55px_-44px_rgba(15,23,42,0.55)] {{ $stateClass }}">
                            <div class="flex items-start gap-3">
                                <span class="invoice-timeline-icon {{ $iconClass }}">
                                    <i class="fa-solid {{ $step['icon'] }}" aria-hidden="true"></i>
                                </span>
                                <div class="min-w-0">
                                    <p class="text-sm font-bold tracking-[-0.01em] text-slate-950">{{ $step['label'] }}</p>
                                    <p class="mt-1 text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
                                        {{ $step['timestamp'] ? $step['timestamp']->format('d M Y H:i') : ucfirst($step['state']) }}
                                    </p>
                                </div>
                            </div>

                            <p class="invoice-timeline-copy mt-4 text-sm leading-6 text-slate-600">{{ $step['description'] }}</p>

                            @if (! empty($step['note']))
                                <p class="invoice-timeline-note mt-3 rounded-2xl border border-white/70 bg-white/70 p-3 text-xs font-medium leading-5 text-slate-600">{{ $step['note'] }}</p>
                            @endif

                            @if (! empty($step['url']) && ! empty($step['link_label']))
                                <a href="{{ $step['url'] }}" class="invoice-timeline-link mt-3 inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.14em] text-slate-900 hover:text-brand-600">
                                    Open {{ $step['link_label'] }}
                                    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                                </a>
                            @endif
                        </article>
                    @endforeach
                </div>
            </section>

            @if (auth()->user()->can('record-payments') || auth()->user()->can('send-invoice-reminders') || auth()->user()->can('cancel-invoices') || auth()->user()->can('void-invoices') || auth()->user()->can('mark-invoices-paid'))
                <section class="section-card">
                    <div class="section-header">
                        <div>
                            <h3 class="section-title">Invoice actions</h3>
                            <p class="mt-2 text-sm text-slate-500">Choose an invoice action.</p>
                        </div>
                    </div>

                    <div class="invoice-action-strip">
                        @can('record-payments')
                            @if ($invoice->isCollectible())
                            <a href="#record-payment" class="invoice-action-tile">
                                <i class="fa-solid fa-money-bill-wave text-green-700" aria-hidden="true"></i>
                                Record payment
                            </a>
                            @endif
                        @endcan

                        @can('send-invoice-reminders')
                            @if ($reminderEligible)
                            <form action="{{ route('invoices.reminder', $invoice) }}" method="POST" data-send-reminder-form>
                                @csrf
                                <button type="button" class="invoice-action-tile w-full" data-send-reminder-trigger data-invoice-id="{{ $invoice->id }}" data-invoice-number="{{ $invoice->invoice_number }}" data-client-email="{{ $invoice->client->email ?: 'the client' }}">
                                    <i class="fa-solid fa-bell text-brand-600" aria-hidden="true"></i>
                                    Send reminder
                                </button>
                            </form>
                            @endif
                        @endcan

                        @if ($invoice->isCollectible())
                            @can('cancel-invoices')
                            <form action="{{ route('invoices.cancel', $invoice) }}" method="POST" data-cancel-invoice-form>
                                @csrf
                                <button type="button" class="invoice-action-tile w-full" data-cancel-invoice-trigger data-invoice-id="{{ $invoice->id }}" data-invoice-number="{{ $invoice->invoice_number }}">
                                    <i class="fa-solid fa-ban text-amber-700" aria-hidden="true"></i>
                                    Cancel
                                </button>
                            </form>
                            @endcan
                            @can('void-invoices')
                            <form action="{{ route('invoices.void', $invoice) }}" method="POST" data-void-invoice-form>
                                @csrf
                                <button type="button" class="invoice-action-tile w-full" data-void-invoice-trigger data-invoice-id="{{ $invoice->id }}" data-invoice-number="{{ $invoice->invoice_number }}">
                                    <i class="fa-solid fa-circle-xmark text-slate-700" aria-hidden="true"></i>
                                    Void
                                </button>
                            </form>
                            @endcan
                        @endif
                    </div>

                    @can('mark-invoices-paid')
                    @if ($invoice->isActive())
                        <form action="{{ route('invoices.status', $invoice) }}" method="POST" class="mt-5 rounded-[1.25rem] border border-slate-200 bg-slate-50/80 p-4">
                            @csrf
                            @method('PATCH')
                            <div class="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-end">
                                <label class="block">
                                    <span class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Manual status</span>
                                    <select name="status" class="builder-select">
                                        @foreach (\App\Models\Invoice::manualStatuses() as $status)
                                            <option value="{{ $status }}" @selected($invoice->status === $status)>{{ Str::headline($status) }}</option>
                                        @endforeach
                                    </select>
                                </label>
                                <button type="submit" class="secondary-button">Update status</button>
                            </div>
                        </form>
                    @endif
                    @endcan
                </section>
            @endif

            <section class="section-card">
                <div class="section-header">
                    <div>
                        <h3 class="section-title">Line items</h3>
                        <p class="mt-2 text-sm text-slate-500">Itemized work and pricing for this invoice.</p>
                    </div>
                </div>

                <div class="mt-6 overflow-hidden rounded-[1.25rem] border border-slate-200">
                    <div class="overflow-x-auto">
                        <table class="min-w-full">
                            <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
                                <tr>
                                    <th class="px-5 py-4">Description</th>
                                    <th class="px-5 py-4 text-right">Qty</th>
                                    <th class="px-5 py-4 text-right">Price</th>
                                    <th class="px-5 py-4 text-right">Total</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 bg-white">
                                @foreach ($invoice->items as $item)
                                    <tr class="transition hover:bg-slate-50/80">
                                        <td class="px-5 py-4 text-sm font-medium text-slate-900">{{ $item->description }}</td>
                                        <td class="px-5 py-4 text-right text-sm text-slate-500">{{ $item->quantity }}</td>
                                        <td class="px-5 py-4 text-right text-sm text-slate-500">{{ $money($item->unit_price) }}</td>
                                        <td class="px-5 py-4 text-right text-sm font-semibold text-slate-900">{{ $money($item->line_total) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

            <section id="record-payment" class="section-card scroll-mt-8">
                <div class="section-header">
                    <div>
                        <h3 class="section-title">Record payment</h3>
                        <p class="mt-2 text-sm text-slate-500">Capture method, amount, date, and reference while keeping the invoice status automatic.</p>
                    </div>
                    <span class="{{ $remainingBalance <= 0 ? 'status-badge status-paid' : 'status-badge status-draft' }}">
                        {{ $remainingBalance <= 0 ? 'Fully paid' : 'Balance '.$money($remainingBalance) }}
                    </span>
                </div>

                @can('record-payments')
                    @if ($invoice->isTerminal())
                        <div class="mt-6 rounded-[1.25rem] border border-slate-200 bg-slate-50 px-5 py-4 text-sm font-medium text-slate-600">
                            This invoice is {{ strtolower($invoice->statusLabel()) }} and no longer accepts payments.
                        </div>
                    @elseif ($remainingBalance <= 0)
                        <div class="mt-6 rounded-[1.25rem] border border-green-100 bg-green-50 px-5 py-4 text-sm font-medium text-green-800">
                            This invoice is fully paid. Additional payments are blocked to prevent accidental overpayment.
                        </div>
                    @else
                        <form action="{{ route('invoices.payments.store', $invoice) }}" method="POST" class="mt-6 space-y-5">
                            @csrf
                            <div class="grid gap-5 md:grid-cols-2">
                                <label class="block">
                                    <span class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Payment method</span>
                                    <select name="payment_method" class="builder-select @error('payment_method') builder-select-invalid @enderror">
                                        @foreach (Payment::methods() as $method => $label)
                                            <option value="{{ $method }}" @selected(old('payment_method') === $method)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    @error('payment_method')<span class="mt-2 block text-xs font-semibold text-red-600">{{ $message }}</span>@enderror
                                </label>

                                <label class="block">
                                    <span class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Payment date</span>
                                    <input type="date" name="payment_date" value="{{ old('payment_date', now()->toDateString()) }}" class="builder-input @error('payment_date') builder-input-invalid @enderror">
                                    @error('payment_date')<span class="mt-2 block text-xs font-semibold text-red-600">{{ $message }}</span>@enderror
                                </label>

                                <label class="block">
                                    <span class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Amount paid</span>
                                    <input type="number" name="amount_paid" value="{{ old('amount_paid', number_format($remainingBalance, 2, '.', '')) }}" min="0.01" max="{{ number_format($remainingBalance, 2, '.', '') }}" step="0.01" class="builder-input @error('amount_paid') builder-input-invalid @enderror">
                                    @error('amount_paid')<span class="mt-2 block text-xs font-semibold text-red-600">{{ $message }}</span>@enderror
                                </label>

                                <label class="block">
                                    <span class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Reference</span>
                                    <input type="text" name="payment_reference" value="{{ old('payment_reference') }}" placeholder="Bank ref, receipt number, or transaction ID" class="builder-input @error('payment_reference') builder-input-invalid @enderror">
                                    @error('payment_reference')<span class="mt-2 block text-xs font-semibold text-red-600">{{ $message }}</span>@enderror
                                </label>
                            </div>

                            <label class="block">
                                <span class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Notes</span>
                                <textarea name="notes" rows="4" placeholder="Optional internal payment note" class="builder-textarea @error('notes') builder-textarea-invalid @enderror">{{ old('notes') }}</textarea>
                                @error('notes')<span class="mt-2 block text-xs font-semibold text-red-600">{{ $message }}</span>@enderror
                            </label>

                            <div class="flex flex-col gap-3 border-t border-slate-200 pt-5 sm:flex-row sm:items-center sm:justify-between">
                                <p class="text-sm text-slate-500">Full payment automatically marks the invoice as paid. Partial payment keeps the balance visible.</p>
                                <button type="submit" class="primary-button">Save payment</button>
                            </div>
                        </form>
                    @endif
                @else
                    <div class="mt-6 rounded-[1.25rem] border border-slate-200 bg-slate-50 px-5 py-4 text-sm text-slate-500">
                        Only admins can record invoice payments.
                    </div>
                @endcan
            </section>


            <section class="section-card">
                <div class="section-header">
                    <div>
                        <h3 class="section-title">Credit notes</h3>
                        <p class="mt-2 text-sm text-slate-500">Refunds and adjustments linked to this invoice.</p>
                    </div>
                    @can('manage-credit-notes')
                        @if ($invoice->isActive())
                            <a href="{{ route('credit-notes.create', ['invoice_id' => $invoice->id]) }}" class="secondary-button">Create credit note</a>
                        @endif
                    @endcan
                </div>

                @if ($invoice->creditNotes->isEmpty())
                    <div class="mt-6 rounded-[1.5rem] border border-dashed border-slate-200 bg-slate-50 px-6 py-10 text-center">
                        <p class="text-sm font-semibold text-slate-900">No credit notes issued</p>
                        <p class="mt-2 text-sm text-slate-500">Credit notes will appear here when an invoice correction or refund is created.</p>
                    </div>
                @else
                    <div class="mt-6 overflow-hidden rounded-[1.25rem] border border-slate-200">
                        <div class="overflow-x-auto">
                            <table class="min-w-full">
                                <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
                                    <tr>
                                        <th class="px-5 py-4">Credit note</th>
                                        <th class="px-5 py-4">Type</th>
                                        <th class="px-5 py-4">Status</th>
                                        <th class="px-5 py-4 text-right">Amount</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 bg-white">
                                    @foreach ($invoice->creditNotes->sortByDesc('issue_date') as $creditNote)
                                        <tr class="transition hover:bg-slate-50/80">
                                            <td class="px-5 py-4"><a href="{{ route('credit-notes.show', $creditNote) }}" class="font-semibold text-slate-950 hover:text-brand-700">{{ $creditNote->credit_note_number }}</a><span class="mt-1 block text-xs text-slate-400">{{ $creditNote->issue_date->format('d M Y') }}</span></td>
                                            <td class="px-5 py-4 text-sm text-slate-600">{{ $creditNote->typeLabel() }}</td>
                                            <td class="px-5 py-4"><span class="{{ $creditNote->statusBadgeClass() }}">{{ $creditNote->statusLabel() }}</span></td>
                                            <td class="px-5 py-4 text-right text-sm font-bold text-slate-900">{{ $money($creditNote->amount) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif
            </section>

            <section class="section-card">
                <div class="section-header">
                    <div>
                        <h3 class="section-title">Payment history</h3>
                        <p class="mt-2 text-sm text-slate-500">Successful payments, pending gateway attempts, and failed or cancelled payment records in one audit-friendly view.</p>
                    </div>
                </div>

                @if ($invoice->payments->isEmpty())
                    <div class="mt-6 rounded-[1.5rem] border border-dashed border-slate-200 bg-slate-50 px-6 py-10 text-center">
                        <p class="text-sm font-semibold text-slate-900">No payments recorded yet</p>
                        <p class="mt-2 text-sm text-slate-500">When a client pays this invoice, the payment will appear here.</p>
                    </div>
                @else
                    <div class="mt-6 overflow-hidden rounded-[1.25rem] border border-slate-200">
                        <div class="overflow-x-auto">
                            <table class="min-w-full">
                                <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
                                    <tr>
                                        <th class="px-5 py-4">Date</th>
                                        <th class="px-5 py-4">Method</th>
                                        <th class="px-5 py-4">Status</th>
                                        <th class="px-5 py-4">Reference</th>
                                        <th class="px-5 py-4">Proof / notes</th>
                                        <th class="px-5 py-4 text-right">Amount</th>
                                        <th class="px-5 py-4 text-right">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 bg-white">
                                    @foreach ($invoice->payments->sortByDesc(fn ($payment) => $payment->paid_at ?? $payment->created_at) as $payment)
                                        @php
                                            $paymentStatusClass = match ($payment->status) {
                                                Payment::STATUS_SUCCEEDED => 'status-badge status-paid',
                                                Payment::STATUS_PENDING => 'status-badge status-sent',
                                                Payment::STATUS_FAILED => 'status-badge status-overdue',
                                                Payment::STATUS_CANCELLED => 'status-badge status-cancelled',
                                                Payment::STATUS_REJECTED => 'status-badge status-void',
                                                default => 'status-badge status-draft',
                                            };
                                        @endphp
                                        <tr class="transition hover:bg-slate-50/80">
                                            <td class="px-5 py-4 text-sm font-semibold text-slate-900">{{ ($payment->paid_at ?? $payment->payment_date)->format('d M Y') }}</td>
                                            <td class="px-5 py-4 text-sm text-slate-600">
                                                <span class="font-semibold text-slate-900">{{ $payment->methodLabel() }}</span>
                                                @if ($payment->gateway)
                                                    <span class="mt-1 block text-xs text-slate-400">{{ Str::headline($payment->gateway) }}</span>
                                                @endif
                                            </td>
                                            <td class="px-5 py-4"><span class="{{ $paymentStatusClass }}">{{ $payment->statusLabel() }}</span></td>
                                            <td class="px-5 py-4 text-sm text-slate-500">{{ $payment->payment_reference ?: ($payment->gateway_reference ?: 'No reference') }}</td>
                                            <td class="max-w-xs px-5 py-4 text-sm text-slate-500">
                                                <p>{{ $payment->notes ?: 'No notes' }}</p>
                                                @if ($payment->hasProof())
                                                    <a href="{{ route('payments.proof', $payment) }}" target="_blank" class="payment-proof-link mt-2">View proof</a>
                                                @endif
                                                @if (data_get($payment->metadata, 'client_note'))
                                                    <p class="mt-2 rounded-2xl bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-600">Client note: {{ data_get($payment->metadata, 'client_note') }}</p>
                                                @endif
                                            </td>
                                            <td class="px-5 py-4 text-right text-sm font-bold {{ $payment->isSuccessful() ? 'text-slate-900' : 'text-slate-400' }}">{{ $money($payment->amount_paid) }}</td>
                                            <td class="px-5 py-4">
                                                @if ($payment->isPending())
                                                    <div class="payment-verification-actions min-w-[220px]">
                                                        <form action="{{ route('payments.approve', $payment) }}" method="POST" class="payment-verification-form flex w-full flex-col gap-2">
                                                            @csrf
                                                            <input type="text" name="admin_note" maxlength="1000" placeholder="Optional admin note" class="builder-input !min-h-10 !px-3 !py-2 text-xs">
                                                            <button type="submit" class="primary-button w-full !min-h-10 !px-3 !py-2 text-xs">Approve</button>
                                                        </form>
                                                        <form action="{{ route('payments.reject', $payment) }}" method="POST" class="payment-verification-form payment-verification-form-danger flex w-full flex-col gap-2">
                                                            @csrf
                                                            <input type="text" name="admin_note" maxlength="1000" placeholder="Optional reject note" class="builder-input !min-h-10 !px-3 !py-2 text-xs">
                                                            <button type="submit" class="secondary-button w-full !min-h-10 !px-3 !py-2 text-xs">Reject</button>
                                                        </form>
                                                    </div>
                                                @else
                                                    <span class="block text-right text-xs font-semibold text-slate-400">No action</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif
            </section>

            <section class="section-card">
                <div class="section-header">
                    <div>
                        <h3 class="section-title">Reminder history</h3>
                        <p class="mt-2 text-sm text-slate-500">Current interval for this invoice: every {{ $reminderIntervalDays }} {{ Str::plural('day', $reminderIntervalDays) }}.</p>
                    </div>
                    @if ($reminderEligible)
                        <span class="{{ $reminderDue ? 'status-badge status-overdue' : 'status-badge status-sent' }}">{{ $reminderDue ? 'Auto reminder due' : 'Waiting interval' }}</span>
                    @else
                        <span class="status-badge status-draft">Not eligible</span>
                    @endif
                </div>

                @if ($invoice->reminders->isEmpty())
                    <div class="mt-6 rounded-[1.5rem] border border-dashed border-slate-200 bg-slate-50 px-6 py-10 text-center">
                        <p class="text-sm font-semibold text-slate-900">No reminders sent yet</p>
                        <p class="mt-2 text-sm text-slate-500">Reminder emails will appear here once sent manually or by the scheduler.</p>
                    </div>
                @else
                    <div class="mt-6 overflow-hidden rounded-[1.25rem] border border-slate-200">
                        <div class="overflow-x-auto">
                            <table class="min-w-full">
                                <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
                                    <tr>
                                        <th class="px-5 py-4">Sent at</th>
                                        <th class="px-5 py-4">Sent to</th>
                                        <th class="px-5 py-4">Sent by</th>
                                        <th class="px-5 py-4">Type</th>
                                        <th class="px-5 py-4">Status</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 bg-white" data-reminder-history>
                                    @foreach ($invoice->reminders->sortByDesc('sent_at') as $reminder)
                                        <tr class="transition hover:bg-slate-50/80">
                                            <td class="px-5 py-4 text-sm font-semibold text-slate-900">{{ $reminder->sent_at?->format('d M Y H:i') ?? 'Not sent' }}</td>
                                            <td class="px-5 py-4 text-sm text-slate-600">{{ $reminder->sent_to }}</td>
                                            <td class="px-5 py-4 text-sm text-slate-500">{{ $reminder->sender?->name ?? 'Automatic scheduler' }}</td>
                                            <td class="px-5 py-4"><span class="status-badge status-draft">{{ $reminder->was_manual ? 'Manual' : 'Automatic' }}</span></td>
                                            <td class="px-5 py-4"><span class="{{ $reminder->status === 'sent' ? 'status-badge status-paid' : 'status-badge status-overdue' }}">{{ Str::headline($reminder->status) }}</span></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif
            </section>
        </div>

        <aside class="invoice-side-card">
            <h3 class="section-title">Financial summary</h3>
            <div class="mt-6 space-y-4">
                <div class="flex justify-between text-sm text-slate-500"><span>Subtotal</span><strong class="text-slate-900">{{ $money($invoice->subtotal) }}</strong></div>
                <div class="flex justify-between text-sm text-slate-500"><span>VAT</span><strong class="text-slate-900">{{ $money($invoice->tax_total) }}</strong></div>
                <div class="flex justify-between text-sm text-slate-500"><span>Original invoice total</span><strong class="text-slate-900">{{ $money($invoice->grand_total) }}</strong></div>
                <div class="flex justify-between text-sm text-slate-500"><span>Total credited</span><strong class="text-amber-700">{{ $money($invoice->totalCredited()) }}</strong></div>
                <div class="flex justify-between text-sm text-slate-500"><span>Adjusted invoice total</span><strong class="text-slate-900">{{ $money($invoice->adjustedTotal()) }}</strong></div>
                <div class="flex justify-between text-sm text-slate-500"><span>Total paid</span><strong class="text-green-700">{{ $money($totalPaid) }}</strong></div>
                <div class="border-t border-slate-200 pt-5">
                    <div class="flex justify-between text-base font-bold text-slate-900"><span>Balance due</span><strong>{{ $money($remainingBalance) }}</strong></div>
                    @if ($invoice->overpaidAmount() > 0)
                        <div class="financial-warning-row"><span>Refund / overpayment</span><strong>{{ $money($invoice->overpaidAmount()) }}</strong></div>
                    @endif
                    <div class="mt-4 invoice-progress-bar">
                        <div class="invoice-progress-fill" style="width: {{ $paymentProgress }}%"></div>
                    </div>
                    <p class="mt-2 text-xs font-medium text-slate-500">{{ $paymentProgress }}% paid against adjusted invoice total</p>
                </div>
            </div>
            <div class="mt-6 rounded-[1.25rem] border border-slate-200 bg-slate-50/80 p-4">
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Client link activity</p>
                <div class="mt-4 space-y-3 text-sm text-slate-600">
                    <div class="flex justify-between gap-4"><span>Secure view</span><strong class="text-right text-slate-900">{{ $invoice->client_viewed_at?->format('d M Y H:i') ?? 'Not viewed yet' }}</strong></div>
                    <div class="flex justify-between gap-4"><span>Acknowledged</span><strong class="text-right text-slate-900">{{ $invoice->client_acknowledged_at?->format('d M Y H:i') ?? 'Not acknowledged' }}</strong></div>
                    <div class="flex justify-between gap-4"><span>Query status</span><strong class="text-right text-slate-900">{{ $invoice->client_disputed_at?->format('d M Y H:i') ?? 'No query' }}</strong></div>
                </div>
                @if ($invoice->client_dispute_reason)
                    <p class="mt-4 rounded-2xl bg-white px-4 py-3 text-sm leading-6 text-slate-600">{{ $invoice->client_dispute_reason }}</p>
                @endif
            </div>
        </aside>
    </div>

    @if (! file_exists(public_path('build/manifest.json')))
        @include('components.documents.list-script')
    @endif
</x-layouts.app>