@extends('layouts.admin')

@section('title', 'Credit Note '.$creditNote->credit_note_number)

@section('page-title', 'Credit Note '.$creditNote->credit_note_number)

@section('breadcrumbs')
    <a href="{{ route('admin.credit-notes.index') }}" class="hover:text-primary">Credit Notes</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">{{ $creditNote->credit_note_number }}</span>
@endsection

@section('content')
<div class="max-w-[1400px] mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden p-6 space-y-4">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-xl font-bold text-gray-900">{{ $creditNote->credit_note_number }}</h1>
                <p class="text-sm text-gray-500 mt-1">
                    {{ $creditNote->credit_note_date?->format('M d, Y') ?? '—' }}
                    ·
                    <span class="capitalize">{{ $creditNote->status }}</span>
                </p>
            </div>
            <a href="{{ route('admin.credit-notes.index') }}" class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700 hover:bg-gray-50">
                <span class="material-symbols-outlined text-lg">arrow_back</span>
                Back to list
            </a>
        </div>
        <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm border-t border-gray-100 pt-4">
            <div>
                <dt class="text-gray-500">Invoice</dt>
                <dd class="font-medium text-gray-900 mt-0.5">
                    @if($creditNote->invoice)
                        {{ $creditNote->invoice->invoice_number }}
                    @else
                        —
                    @endif
                </dd>
            </div>
            <div>
                <dt class="text-gray-500">Customer</dt>
                <dd class="font-medium text-gray-900 mt-0.5">
                    {{ $creditNote->customer?->name ?? $creditNote->invoice?->customer?->name ?? '—' }}
                </dd>
            </div>
            <div>
                <dt class="text-gray-500">Amount</dt>
                <dd class="font-medium text-gray-900 mt-0.5">
                    {{ \App\Models\Currency::formatAmount((float) $creditNote->total, $creditNote->currency ?? null) }}
                </dd>
            </div>
        </dl>

        @if($creditNote->items->isNotEmpty())
            <div class="border-t border-gray-100 pt-4">
                <h2 class="text-sm font-semibold text-gray-700 mb-3">Line items</h2>
                <div class="overflow-x-auto rounded-lg border border-gray-200">
                    <table class="w-full text-sm text-left">
                        <thead class="bg-gray-50 text-xs uppercase text-gray-500">
                            <tr>
                                <th class="px-4 py-2">Description</th>
                                <th class="px-4 py-2 text-right">Qty</th>
                                <th class="px-4 py-2 text-right">Rate</th>
                                <th class="px-4 py-2 text-right">Amount</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($creditNote->items as $line)
                                <tr>
                                    <td class="px-4 py-2 text-gray-900">{{ $line->description }}</td>
                                    <td class="px-4 py-2 text-right text-gray-600">{{ $line->quantity }}</td>
                                    <td class="px-4 py-2 text-right text-gray-600">{{ \App\Models\Currency::formatAmount((float) $line->rate, $creditNote->currency ?? null) }}</td>
                                    <td class="px-4 py-2 text-right font-medium text-gray-900">{{ \App\Models\Currency::formatAmount((float) $line->amount, $creditNote->currency ?? null) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection