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

@section('content')
    <div class="space-y-5">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <p class="text-sm font-medium text-booklio-muted">Update invoice details, line items, tax, notes, and customer billing data.</p>
            <div class="flex flex-col gap-3 sm:flex-row">
                <x-ui.button variant="secondary" href="{{ route('admin.invoices.show', $invoice) }}">View Invoice</x-ui.button>
                <x-ui.button variant="secondary" href="{{ route('admin.invoices.index') }}">Back to Invoices</x-ui.button>
            </div>
        </div>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(360px,0.8fr)]">
            <div>
                @include('admin.invoices.partials.form')
            </div>

            <div class="space-y-4 xl:sticky xl:top-24">
                <div>
                    <h2 class="text-lg font-extrabold">PDF Preview</h2>
                    <p class="mt-1 text-sm font-medium text-booklio-muted">Updated invoice preview from saved data.</p>
                </div>
                @include('admin.invoices.partials.pdf-preview', ['invoice' => $invoice])
            </div>
        </section>
    </div>
@endsection