@php
    $money = fn ($value) => 'R '.number_format((float) $value, 2);
    $invoice = $creditNote->invoice;
@endphp

<x-layouts.app title="{{ $creditNote->credit_note_number }} | Tarnova" page-title="Credit note details">
    <x-slot:headerActions>
        <a href="{{ route('credit-notes.index') }}" class="secondary-button">Back to credit notes</a>
        <a href="{{ route('credit-notes.pdf', $creditNote) }}" class="secondary-button">Download PDF</a>
        @can('send-credit-note-emails')
            @if ($creditNote->isFinanciallyActive())
                <form action="{{ route('credit-notes.send', $creditNote) }}" method="POST">
                    @csrf
                    <button type="submit" class="secondary-button">Email client</button>
                </form>
            @endif
        @endcan
        @can('manage-credit-notes')
            @if ($creditNote->isDraft())
                <a href="{{ route('credit-notes.edit', $creditNote) }}" class="secondary-button">Edit</a>
                <form action="{{ route('credit-notes.issue', $creditNote) }}" method="POST">
                    @csrf
                    <button type="submit" class="primary-button">Issue credit note</button>
                </form>
            @elseif ($creditNote->status === \App\Models\CreditNote::STATUS_ISSUED)
                <form action="{{ route('credit-notes.apply', $creditNote) }}" method="POST">
                    @csrf
                    <button type="submit" class="primary-button">Mark applied</button>
                </form>
            @endif
        @endcan
    </x-slot:headerActions>

    <x-sales-module-nav />

    <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
        <section class="invoice-detail-hero">
            <div class="invoice-detail-hero-top">
                <div>
                    <p class="dashboard-kicker">Credit note</p>
                    <div class="mt-2 flex flex-wrap items-center gap-3">
                        <h3 class="invoice-detail-title">{{ $creditNote->credit_note_number }}</h3>
                        <span class="{{ $creditNote->statusBadgeClass() }}">{{ $creditNote->statusLabel() }}</span>
                    </div>
                    <p class="invoice-detail-subtitle">{{ $creditNote->client->name }} - linked to {{ $invoice->invoice_number }}</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">{{ $creditNote->typeLabel() }} amount</p>
                    <p class="mt-2 text-xl font-bold tracking-[-0.03em]">{{ $money($creditNote->amount) }}</p>
                    <p class="mt-2 text-xs font-medium text-white/60">Issued {{ $creditNote->issued_at?->format('d M Y H:i') ?? 'not yet issued' }}</p>
                </div>
            </div>

            <div class="invoice-hero-stats">
                <div class="invoice-hero-stat"><span>Issue date</span><strong>{{ $creditNote->issue_date->format('d M Y') }}</strong></div>
                <div class="invoice-hero-stat"><span>Type</span><strong>{{ $creditNote->typeLabel() }}</strong></div>
                <div class="invoice-hero-stat"><span>Collectible balance</span><strong>{{ $money($invoice->remainingBalance()) }}</strong></div>
                <div class="invoice-hero-stat"><span>Created by</span><strong>{{ $creditNote->creator?->name ?? 'System' }}</strong></div>
            </div>
        </section>

        <aside class="invoice-side-card">
            <h3 class="section-title">Financial impact</h3>
            <div class="mt-6 space-y-4">
                <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($invoice->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>Collectible balance</span><strong>{{ $money($invoice->remainingBalance()) }}</strong></div>
                    @if ($invoice->overpaidAmount() > 0)
                        <div class="financial-warning-row"><span>Refund / overpayment</span><strong>{{ $money($invoice->overpaidAmount()) }}</strong></div>
                    @endif
                    <p class="mt-3 text-xs leading-5 text-slate-500">Collectible balance is never negative. Any payment above the adjusted total is shown separately as a refund/overpayment.</p>
                </div>
            </div>
        </aside>
    </div>

    <section class="section-card">
        <div class="section-header">
            <div>
                <h3 class="section-title">Reason</h3>
                <p class="mt-2 text-sm text-slate-500">Business context for this correction.</p>
            </div>
        </div>
        <p class="mt-6 rounded-[1.25rem] border border-slate-200 bg-slate-50 p-5 text-sm leading-6 text-slate-600">{{ $creditNote->reason }}</p>

        @if ($creditNote->type === \App\Models\CreditNote::TYPE_REFUND)
            <div class="mt-5 grid gap-4 md:grid-cols-2">
                <div class="rounded-[1.25rem] border border-slate-200 bg-white p-5">
                    <p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Refund method</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ $creditNote->refund_method ?: 'Not recorded' }}</p>
                </div>
                <div class="rounded-[1.25rem] border border-slate-200 bg-white p-5">
                    <p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Refund reference</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ $creditNote->refund_reference ?: 'Not recorded' }}</p>
                </div>
            </div>
        @endif
    </section>
</x-layouts.app>