@php
    $periodQuery = array_filter($period['query'], fn ($value) => filled($value));
    $money = fn ($value) => 'R '.number_format((float) $value, 2);
@endphp

<x-layouts.app title="Client Statement | {{ $client->name }} | Tarnova" page-title="Client statement">
    <x-slot:headerActions>
        <a href="{{ route('clients.index') }}" class="secondary-button">Back to clients</a>
        <a href="{{ route('clients.statement.pdf', ['client' => $client, ...$periodQuery]) }}" class="secondary-button">
            <i class="fa-solid fa-file-pdf mr-2" aria-hidden="true"></i>Download PDF
        </a>
        @can('send-client-statements')
            <form action="{{ route('clients.statement.send', $client) }}" method="POST">
                @csrf
                <input type="hidden" name="period" value="{{ $period['key'] }}">
                @if ($period['key'] === 'custom')
                    <input type="hidden" name="start_date" value="{{ $period['start']->toDateString() }}">
                    <input type="hidden" name="end_date" value="{{ $period['end']->toDateString() }}">
                @endif
                <button type="submit" class="primary-button">
                    <i class="fa-solid fa-paper-plane mr-2" aria-hidden="true"></i>Send statement
                </button>
            </form>
        @endcan
    </x-slot:headerActions>

    <x-workspace-module-nav workspace="clients" />

    <section class="client-statement-hero">
        <div class="client-statement-identity">
            <div class="client-avatar client-avatar-large" aria-hidden="true">{{ Str::of($client->name)->substr(0, 1)->upper() }}</div>
            <div>
                <p class="dashboard-kicker">Statement for</p>
                <h2 class="client-statement-title">{{ $client->name }}</h2>
                <p class="client-statement-copy">
                    Financial activity from <strong>{{ $period['start']->format('d M Y') }}</strong> to <strong>{{ $period['end']->format('d M Y') }}</strong>.
                </p>
            </div>
        </div>

        <div class="client-detail-panel">
            <p class="client-detail-label">Client details</p>
            <div class="client-detail-list">
                <div>
                    <span>Email</span>
                    <strong>{{ $client->email ?: 'No email saved' }}</strong>
                </div>
                <div>
                    <span>Phone</span>
                    <strong>{{ $client->phone ?: 'No phone saved' }}</strong>
                </div>
                <div>
                    <span>Department</span>
                    <strong>{{ $client->department ?: 'Not specified' }}</strong>
                </div>
                <div>
                    <span>Representative</span>
                    <strong>{{ $client->contact_person ?: 'Not specified' }}</strong>
                </div>
                <div>
                    <span>VAT number</span>
                    <strong>{{ $client->vat_number ?: 'Not specified' }}</strong>
                </div>
                <div class="client-detail-address">
                    <span>Address</span>
                    <strong>{{ $client->documentAddress() ?: 'No address saved' }}</strong>
                </div>
            </div>
        </div>
    </section>

    <section class="client-filter-card">
        <div class="client-filter-header">
            <div>
                <p class="dashboard-kicker">Reporting period</p>
                <h3 class="client-section-title">Statement period</h3>
                <p class="client-section-copy">Choose a period.</p>
            </div>
            <span class="status-badge status-sent">{{ $period['label'] }}</span>
        </div>

        <form action="{{ route('clients.statement', $client) }}" method="GET" class="client-filter-form">
            <label class="client-filter-field">
                <span>Period</span>
                <select name="period" class="builder-select">
                    @foreach ($periodOptions as $value => $label)
                        <option value="{{ $value }}" @selected($period['key'] === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </label>

            <label class="client-filter-field">
                <span>Start date</span>
                <input type="date" name="start_date" value="{{ old('start_date', $period['start']->toDateString()) }}" class="builder-input">
            </label>

            <label class="client-filter-field">
                <span>End date</span>
                <input type="date" name="end_date" value="{{ old('end_date', $period['end']->toDateString()) }}" class="builder-input">
            </label>

            <button type="submit" class="primary-button">View statement</button>
        </form>
    </section>

    <div class="client-statement-stats">
        <div class="client-statement-stat">
            <span class="client-stat-icon"><i class="fa-solid fa-file-invoice-dollar" aria-hidden="true"></i></span>
            <div>
                <p>Total invoiced</p>
                <strong>{{ $money($totals['total_invoiced']) }}</strong>
            </div>
        </div>
        <div class="client-statement-stat client-statement-stat-paid">
            <span class="client-stat-icon"><i class="fa-solid fa-circle-check" aria-hidden="true"></i></span>
            <div>
                <p>Total paid</p>
                <strong>{{ $money($totals['total_paid']) }}</strong>
            </div>
        </div>
        <div class="client-statement-stat">
            <span class="client-stat-icon client-stat-icon-warning"><i class="fa-solid fa-wallet" aria-hidden="true"></i></span>
            <div>
                <p>Outstanding balance</p>
                <strong>{{ $money($totals['outstanding_balance']) }}</strong>
            </div>
        </div>
        <div class="client-statement-stat">
            <span class="client-stat-icon"><i class="fa-solid fa-receipt" aria-hidden="true"></i></span>
            <div>
                <p>Total credited</p>
                <strong>{{ $money($totals['total_credited'] ?? 0) }}</strong>
            </div>
        </div>
        <div class="client-statement-stat">
            <span class="client-stat-icon"><i class="fa-solid fa-clock" aria-hidden="true"></i></span>
            <div>
                <p>Unpaid invoices</p>
                <strong>{{ $totals['unpaid_count'] }}</strong>
            </div>
        </div>
    </div>

    <section class="client-section-card">
        <div class="client-section-header">
            <div>
                <p class="dashboard-kicker">What is still owed</p>
                <h3 class="client-section-title">Unpaid invoices</h3>
                <p class="client-section-copy">Open balances for this period.</p>
            </div>
        </div>

        @if ($unpaidInvoices->isEmpty())
            <div class="client-empty-state client-empty-state-success">
                <span><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                <p>No unpaid invoices</p>
                <small>No balance for this period.</small>
            </div>
        @else
            <div class="client-table-shell">
                <table class="client-table">
                    <thead>
                        <tr>
                            <th>Invoice</th>
                            <th>Due date</th>
                            <th class="text-right">Total</th>
                            <th class="text-right">Paid</th>
                            <th class="text-right">Balance</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($unpaidInvoices as $invoice)
                            <tr>
                                <td><a href="{{ route('invoices.show', $invoice) }}">{{ $invoice->invoice_number }}</a></td>
                                <td>{{ $invoice->due_date->format('d M Y') }}</td>
                                <td class="text-right font-semibold text-slate-900">{{ $money($invoice->grand_total) }}</td>
                                <td class="text-right">{{ $money($invoice->totalPaid()) }}</td>
                                <td class="text-right font-bold text-slate-900">{{ $money($invoice->remainingBalance()) }}</td>
                                <td><span class="{{ $invoice->statusBadgeClass() }}">{{ $invoice->statusLabel() }}</span></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>

    <section class="client-section-card">
        <div class="client-section-header">
            <div>
                <p class="dashboard-kicker">Invoice activity</p>
                <h3 class="client-section-title">All invoices</h3>
                <p class="client-section-copy">Invoices in this period.</p>
            </div>
            <a href="{{ route('invoices.create') }}" class="secondary-button">Create invoice</a>
        </div>

        @if ($invoices->isEmpty())
            <div class="client-empty-state">
                <span><i class="fa-solid fa-file-invoice" aria-hidden="true"></i></span>
                <p>No invoices in this period</p>
                <small>Try another period.</small>
            </div>
        @else
            <div class="client-table-shell">
                <table class="client-table">
                    <thead>
                        <tr>
                            <th>Invoice</th>
                            <th>Issue date</th>
                            <th>Due date</th>
                            <th class="text-right">Total</th>
                            <th class="text-right">Paid</th>
                            <th class="text-right">Balance</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($invoices as $invoice)
                            <tr>
                                <td><a href="{{ route('invoices.show', $invoice) }}">{{ $invoice->invoice_number }}</a></td>
                                <td>{{ $invoice->issue_date->format('d M Y') }}</td>
                                <td>{{ $invoice->due_date->format('d M Y') }}</td>
                                <td class="text-right font-semibold text-slate-900">{{ $money($invoice->grand_total) }}</td>
                                <td class="text-right">{{ $money($invoice->totalPaid()) }}</td>
                                <td class="text-right font-bold text-slate-900">{{ $money($invoice->remainingBalance()) }}</td>
                                <td><span class="{{ $invoice->statusBadgeClass() }}">{{ $invoice->statusLabel() }}</span></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>

    <section class="client-section-card">
        <div class="client-section-header">
            <div>
                <p class="dashboard-kicker">Credit activity</p>
                <h3 class="client-section-title">Credit notes</h3>
                <p class="client-section-copy">Issued and applied credits in this period.</p>
            </div>
        </div>

        @if ($creditNotes->isEmpty())
            <div class="client-empty-state">
                <span><i class="fa-solid fa-file-circle-minus" aria-hidden="true"></i></span>
                <p>No credit notes</p>
                <small>No credits in this period.</small>
            </div>
        @else
            <div class="client-table-shell">
                <table class="client-table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Credit note</th>
                            <th>Invoice</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th class="text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($creditNotes as $creditNote)
                            <tr>
                                <td class="font-semibold text-slate-900">{{ $creditNote->issue_date->format('d M Y') }}</td>
                                <td>{{ $creditNote->credit_note_number }}</td>
                                <td>{{ $creditNote->invoice?->invoice_number ?? 'No invoice' }}</td>
                                <td>{{ $creditNote->typeLabel() }}</td>
                                <td><span class="{{ $creditNote->statusBadgeClass() }}">{{ $creditNote->statusLabel() }}</span></td>
                                <td class="text-right font-bold text-slate-900">{{ $money($creditNote->amount) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>
    <section class="client-section-card">
        <div class="client-section-header">
            <div>
                <p class="dashboard-kicker">Cash activity</p>
                <h3 class="client-section-title">Payment history</h3>
                <p class="client-section-copy">Payments in this period.</p>
            </div>
        </div>

        @if ($payments->isEmpty())
            <div class="client-empty-state">
                <span><i class="fa-solid fa-receipt" aria-hidden="true"></i></span>
                <p>No payments recorded</p>
                <small>No payments in this period.</small>
            </div>
        @else
            <div class="client-table-shell">
                <table class="client-table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Invoice</th>
                            <th>Method</th>
                            <th>Reference</th>
                            <th class="text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($payments as $payment)
                            <tr>
                                <td class="font-semibold text-slate-900">{{ $payment->payment_date->format('d M Y') }}</td>
                                <td><a href="{{ route('invoices.show', $payment->invoice) }}">{{ $payment->invoice->invoice_number }}</a></td>
                                <td>{{ $payment->methodLabel() }}</td>
                                <td>{{ $payment->payment_reference ?: 'No reference' }}</td>
                                <td class="text-right font-bold text-slate-900">{{ $money($payment->amount_paid) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>
</x-layouts.app>