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

<x-layouts.app title="Credit Notes | Tarnova" page-title="Credit notes">
    <x-slot:headerActions>
        @can('view-financial-reports')
            <a href="{{ route('reports.exports.credit-notes') }}" class="secondary-button">Export CSV</a>
            <a href="{{ route('credit-notes.report') }}" class="secondary-button">Report</a>
        @endcan
        @can('manage-credit-notes')
            <a href="{{ route('credit-notes.create') }}" class="primary-button">Create credit note</a>
        @endcan
    </x-slot:headerActions>

    <x-sales-module-nav />

    <section class="section-card">
        <div class="section-header">
            <div>
                <h3 class="section-title">Credit notes</h3>
                
            </div>
        </div>

        @if ($creditNotes->isEmpty())
            <x-empty-state title="No credit notes yet" description="Create a credit note to start." />
        @else
            <div class="mt-6 overflow-hidden rounded-[1.25rem] border border-slate-200 bg-white">
                <div class="overflow-x-auto">
                    <table class="responsive-data-table min-w-full">
                        <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
                            <tr>
                                <th class="px-5 py-4">Credit note</th>
                                <th class="px-5 py-4">Invoice</th>
                                <th class="px-5 py-4">Client</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>
                                <th class="px-5 py-4 text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($creditNotes as $creditNote)
                                <tr class="transition hover:bg-slate-50/80">
                                    <td data-label="Credit note" class="px-5 py-4">
                                        <a href="{{ route('credit-notes.show', $creditNote) }}" class="inline-flex min-h-9 items-center rounded-xl pr-3 text-sm font-bold text-slate-950 transition hover:text-brand-700 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-50">{{ $creditNote->credit_note_number }}</a>
                                        <span class="mt-1 block text-xs text-slate-400">Issue date {{ $creditNote->issue_date->format('d M Y') }}</span>
                                    </td>
                                    <td data-label="Invoice" class="px-5 py-4 text-sm text-slate-600">
                                        @if ($creditNote->invoice)
                                            <a href="{{ route('invoices.show', $creditNote->invoice) }}" class="font-semibold text-slate-800 hover:text-brand-700">{{ $creditNote->invoice->invoice_number }}</a>
                                        @else
                                            <span class="text-slate-400">Unavailable</span>
                                        @endif
                                    </td>
                                    <td data-label="Client" class="px-5 py-4 text-sm text-slate-600">{{ $creditNote->client?->name ?? 'Client unavailable' }}</td>
                                    <td data-label="Type" class="px-5 py-4 text-sm font-semibold text-slate-900">{{ $creditNote->typeLabel() }}</td>
                                    <td data-label="Status" class="px-5 py-4"><span class="{{ $creditNote->statusBadgeClass() }}">{{ $creditNote->statusLabel() }}</span></td>
                                    <td data-label="Amount" class="px-5 py-4 text-right text-sm font-bold text-slate-900">{{ $money($creditNote->amount) }}</td>
                                    <td data-label="Action" class="px-5 py-4 text-right">
                                        <a href="{{ route('credit-notes.show', $creditNote) }}" class="secondary-button min-h-9 rounded-xl px-3 py-1.5 text-xs">View details</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mt-6">{{ $creditNotes->links() }}</div>
        @endif
    </section>
</x-layouts.app>