@extends('layouts.admin', [
    'title' => 'Invoice Details',
    'pageTitle' => 'Invoice Details',
    'active' => 'invoices',
])

@php
    $statusVariants = [
        'draft' => 'muted',
        'unpaid' => 'warning',
        'partial' => 'purple',
        'paid' => 'success',
        'overdue' => 'danger',
        'cancelled' => 'muted',
    ];
    $paymentVariants = [
        'pending' => 'warning',
        'paid' => 'success',
        'failed' => 'danger',
        'refunded' => 'purple',
        'cancelled' => 'muted',
    ];
    $money = fn ($amount, $currency = 'USD') => $currency.' '.number_format((float) $amount, 2);
@endphp

@section('content')
    <div class="space-y-5">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <x-ui.button variant="secondary" href="{{ route('admin.invoices.index') }}">
                <x-ui.icon name="arrow-left" class="h-4 w-4" />
                Back to Invoices
            </x-ui.button>
            <div class="flex flex-col gap-3 sm:flex-row">
                <x-ui.button variant="secondary" href="{{ route('admin.invoices.pdf', $invoice) }}" target="_blank">
                    <x-ui.icon name="download" class="h-4 w-4" />
                    PDF
                </x-ui.button>
                <x-ui.button variant="secondary" href="{{ route('admin.invoices.edit', $invoice) }}">
                    <x-ui.icon name="edit" class="h-4 w-4" />
                    Edit
                </x-ui.button>
                <x-ui.button data-modal-open="#record-payment-modal-{{ $invoice->id }}">
                    <x-ui.icon name="credit-card" class="h-4 w-4" />
                    Record Payment
                </x-ui.button>
            </div>
        </div>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <div class="space-y-5">
                @include('admin.invoices.partials.pdf-preview', ['invoice' => $invoice])
            </div>

            <div class="space-y-5">
                <x-ui.card title="Invoice Summary">
                    <div class="space-y-4 text-sm">
                        <div class="flex items-center justify-between gap-4"><span class="font-bold text-booklio-muted">Invoice</span><span class="min-w-0 truncate text-right font-extrabold text-booklio-primary">{{ $invoice->invoice_number }}</span></div>
                        <div class="flex items-center justify-between gap-4"><span class="font-bold text-booklio-muted">Status</span><x-ui.badge :variant="$statusVariants[$invoice->status_value] ?? 'muted'">{{ $invoice->status_label }}</x-ui.badge></div>
                        <div class="flex items-center justify-between gap-4"><span class="font-bold text-booklio-muted">Issue Date</span><span class="break-words text-right font-extrabold">{{ $invoice->issue_date?->format('M d, Y') ?? '-' }}</span></div>
                        <div class="flex items-center justify-between gap-4"><span class="font-bold text-booklio-muted">Due Date</span><span class="break-words text-right font-extrabold">{{ $invoice->due_date?->format('M d, Y') ?? '-' }}</span></div>
                        <div class="border-t border-booklio-border pt-4">
                            <div class="flex items-center justify-between gap-4 text-base"><span class="font-extrabold">Balance Due</span><span class="break-words text-right font-extrabold text-booklio-danger">{{ $money($invoice->balance_due, $invoice->currency) }}</span></div>
                        </div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Customer">
                    <div class="flex items-center gap-3">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xs font-extrabold text-booklio-primary">{{ $invoice->customer?->initials ?? 'CU' }}</div>
                        <div class="min-w-0">
                            <p class="truncate text-sm font-extrabold">{{ $invoice->customer?->name ?? 'Walk-in customer' }}</p>
                            <p class="truncate text-xs font-medium text-booklio-muted">{{ $invoice->customer?->email ?? 'No email saved' }}</p>
                        </div>
                    </div>
                    <div class="mt-4 flex min-w-0 items-center gap-3 text-sm font-bold">
                        <x-ui.icon name="phone" class="h-5 w-5 shrink-0 text-booklio-primary" />
                        <span class="min-w-0 break-words">{{ $invoice->customer?->phone ?? 'No phone saved' }}</span>
                    </div>
                </x-ui.card>

                <x-ui.card title="Payment History" padding="p-0">
                    @if ($invoice->payments->isEmpty())
                        <div class="p-5">
                            <x-ui.empty-state icon="credit-card" title="No payments yet" description="Record a payment when the customer pays this invoice." class="shadow-none" />
                        </div>
                    @else
                        <div class="divide-y divide-booklio-border">
                            @foreach ($invoice->payments as $payment)
                                <div class="p-5">
                                    <div class="flex items-start justify-between gap-4">
                                        <div class="min-w-0">
                                            <p class="truncate text-sm font-extrabold">{{ $payment->method_label }} Payment</p>
                                            <p class="mt-1 truncate text-xs font-medium text-booklio-muted">{{ $payment->paid_at?->format('M d, Y') ?? 'No date' }} - {{ $payment->transaction_id ?: 'Manual record' }}</p>
                                            @if ($payment->note)
                                                <p class="mt-2 break-words text-xs font-medium text-booklio-muted">{{ $payment->note }}</p>
                                            @endif
                                        </div>
                                        <div class="shrink-0 text-right">
                                            <p class="text-sm font-extrabold text-emerald-600">{{ $money($payment->amount, $payment->currency) }}</p>
                                            <x-ui.badge class="mt-2" :variant="$paymentVariants[$payment->status_value] ?? 'muted'">{{ $payment->status_label }}</x-ui.badge>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </x-ui.card>

                <x-ui.card title="Danger Zone">
                    <p class="text-sm leading-6 text-booklio-muted">Deleting an invoice removes it from active billing lists. Payment records remain soft-deleted with the invoice record for audit recovery later.</p>
                    <form method="POST" action="{{ route('admin.invoices.destroy', $invoice) }}" class="mt-4">
                        @csrf
                        @method('DELETE')
                        <x-ui.button type="submit" variant="danger">Delete Invoice</x-ui.button>
                    </form>
                </x-ui.card>
            </div>
        </section>
    </div>

    @push('modals')
        @include('admin.invoices.partials.payment-modal', ['invoice' => $invoice, 'paymentMethods' => $paymentMethods])
    @endpush
@endsection