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

<x-layouts.public-document title="Statement | Tarnova">
    <section class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
        <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="border-b border-slate-200 pb-6">
                <p class="text-xs font-bold uppercase tracking-[0.24em] text-slate-400">Client statement</p>
                <h1 class="mt-2 text-xl font-bold tracking-[-0.03em] text-slate-950">{{ $client->name }}</h1>
                <p class="mt-2 text-sm text-slate-500">{{ $period['start']->format('d M Y') }} to {{ $period['end']->format('d M Y') }}</p>
            </div>

            <x-public-client-details :client="$client" heading="Account holder" />

            <div class="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                <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">Invoiced</p>
                    <p class="mt-2 text-base font-bold text-slate-900">{{ $money($totals['total_invoiced']) }}</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">Paid</p>
                    <p class="mt-2 text-base font-bold text-green-700">{{ $money($totals['total_paid']) }}</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">Credited</p>
                    <p class="mt-2 text-base font-bold text-slate-900">{{ $money($totals['total_credited'] ?? 0) }}</p>
                </div>
                <div class="rounded-2xl bg-slate-950 p-4 text-white">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-white/50">Outstanding</p>
                    <p class="mt-2 text-base font-bold">{{ $money($totals['outstanding_balance']) }}</p>
                </div>
            </div>

            <div class="mt-6 overflow-hidden rounded-2xl border border-slate-200">
                <div class="overflow-x-auto">
                    <table class="public-document-table responsive-data-table min-w-full text-sm">
                        <thead class="bg-slate-50 text-left text-xs font-bold uppercase tracking-[0.18em] text-slate-400">
                            <tr>
                                <th class="px-5 py-4">Invoice</th>
                                <th class="px-5 py-4">Due</th>
                                <th class="px-5 py-4">Status</th>
                                <th class="px-5 py-4 text-right">Balance</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($unpaidInvoices as $invoice)
                                <tr>
                                    <td data-label="Invoice" class="px-5 py-4 font-semibold text-slate-900">{{ $invoice->invoice_number }}</td>
                                    <td data-label="Due" class="px-5 py-4 text-slate-500">{{ $invoice->due_date->format('d M Y') }}</td>
                                    <td data-label="Status" class="px-5 py-4"><span class="{{ $invoice->statusBadgeClass() }}">{{ $invoice->statusLabel() }}</span></td>
                                    <td data-label="Balance" class="px-5 py-4 text-right font-bold text-slate-900">{{ $money($invoice->remainingBalance()) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-5 py-8 text-center text-sm font-medium text-slate-500">No unpaid invoices in this statement period.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if ($creditNotes->isNotEmpty())
                <div class="mt-6 overflow-hidden rounded-2xl border border-slate-200">
                    <div class="border-b border-slate-200 bg-slate-50 px-5 py-4">
                        <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Credit notes</p>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="public-document-table responsive-data-table min-w-full text-sm">
                            <thead class="bg-white text-left text-xs font-bold uppercase tracking-[0.18em] text-slate-400">
                                <tr>
                                    <th class="px-5 py-4">Date</th>
                                    <th class="px-5 py-4">Credit note</th>
                                    <th class="px-5 py-4">Invoice</th>
                                    <th class="px-5 py-4">Type</th>
                                    <th class="px-5 py-4 text-right">Amount</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @foreach ($creditNotes as $creditNote)
                                    <tr>
                                        <td data-label="Date" class="px-5 py-4 text-slate-500">{{ $creditNote->issue_date->format('d M Y') }}</td>
                                        <td data-label="Credit note" class="px-5 py-4 font-semibold text-slate-900">{{ $creditNote->credit_note_number }}</td>
                                        <td data-label="Invoice" class="px-5 py-4 text-slate-500">{{ $creditNote->invoice?->invoice_number ?? 'No invoice' }}</td>
                                        <td data-label="Type" class="px-5 py-4 text-slate-500">{{ $creditNote->typeLabel() }}</td>
                                        <td data-label="Amount" class="px-5 py-4 text-right font-bold text-slate-900">{{ $money($creditNote->amount) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            @if ($payments->isNotEmpty())
                <div class="mt-6 overflow-hidden rounded-2xl border border-slate-200">
                    <div class="border-b border-slate-200 bg-slate-50 px-5 py-4">
                        <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Payments</p>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="public-document-table responsive-data-table min-w-full text-sm">
                            <thead class="bg-white text-left text-xs font-bold uppercase tracking-[0.18em] text-slate-400">
                                <tr>
                                    <th class="px-5 py-4">Date</th>
                                    <th class="px-5 py-4">Invoice</th>
                                    <th class="px-5 py-4">Method</th>
                                    <th class="px-5 py-4 text-right">Amount</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @foreach ($payments as $payment)
                                    <tr>
                                        <td data-label="Date" class="px-5 py-4 text-slate-500">{{ $payment->payment_date->format('d M Y') }}</td>
                                        <td data-label="Invoice" class="px-5 py-4 font-semibold text-slate-900">{{ $payment->invoice?->invoice_number ?? 'No invoice' }}</td>
                                        <td data-label="Method" class="px-5 py-4 text-slate-500">{{ $payment->methodLabel() }}</td>
                                        <td data-label="Amount" class="px-5 py-4 text-right font-bold text-slate-900">{{ $money($payment->amount_paid) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        <aside class="rounded-[2rem] border border-white/70 bg-white p-6 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)] lg:sticky lg:top-6 lg:h-fit">
            <h2 class="text-base font-bold tracking-[-0.02em] text-slate-950">Statement response</h2>
            <p class="mt-2 text-sm leading-6 text-slate-500">Acknowledge or send a query.</p>


            @if ($bankingLines !== [])
                <div class="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Statement banking details</p>
                    <div class="mt-3 space-y-3">
                        @foreach ($bankingLines as $line)
                            <div class="border-b border-slate-200 pb-3 last:border-b-0 last:pb-0">
                                @if ($line['label'])
                                    <p class="text-[0.68rem] font-black uppercase tracking-[0.18em] text-slate-400">{{ $line['label'] }}</p>
                                @endif
                                <p class="mt-1 text-sm font-semibold text-slate-900">{{ $line['value'] }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
            <div class="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm font-semibold text-slate-700">
                {{ $statementResponse->acknowledged_at ? 'Acknowledged' : ($statementResponse->queried_at ? 'Query received' : 'Awaiting response') }}
            </div>

            <form action="{{ $statementResponse->publicAcknowledgeUrl() }}" method="POST" class="mt-5 space-y-3">
                @csrf
                <textarea name="comment" rows="3" class="builder-textarea" placeholder="Optional comment"></textarea>
                <button class="primary-button w-full" type="submit">Acknowledge statement</button>
            </form>

            <form action="{{ $statementResponse->publicQueryUrl() }}" method="POST" class="mt-4 space-y-3">
                @csrf
                <textarea name="comment" rows="4" class="builder-textarea" placeholder="Add a short query or note" required></textarea>
                <button class="secondary-button w-full" type="submit">Send statement query</button>
            </form>
        </aside>
    </section>
</x-layouts.public-document>