@php
    $errorBag = $errors ?? new \Illuminate\Support\ViewErrorBag();
    $errors = $errorBag;
    $documentType = $type === 'invoice' ? 'Invoice' : 'Quotation';
    $statusOptions = $type === 'invoice'
        ? ['draft' => 'Draft', 'sent' => 'Sent', 'paid' => 'Paid']
        : ['draft' => 'Draft', 'sent' => 'Sent'];

    if ($type === 'invoice' && ! auth()->user()?->can('mark-invoices-paid')) {
        if (($document->status ?? null) === 'paid') {
            $statusOptions = ['paid' => 'Paid'];
        } else {
            unset($statusOptions['paid']);
        }
    }
    $dateFieldTwo = $type === 'invoice' ? 'due_date' : 'valid_until';
    $dateFieldTwoLabel = $type === 'invoice' ? 'Due date' : 'Valid until';
    $items = old('items', isset($document) && $document->items ? $document->items->map(fn ($item) => $item->only(['description', 'quantity', 'unit_price']))->all() : [['description' => '', 'quantity' => 1, 'unit_price' => 0]]);
    $submitLabel = $submitLabel ?? 'Save';
    $notesLabel = $type === 'invoice' ? 'Notes' : 'Notes';

    $fieldClass = function (string $field, string $baseClass) use ($errorBag): string {
        return $errorBag->has($field) ? $baseClass.' '.$baseClass.'-invalid' : $baseClass;
    };

    $hasItemErrors = $errorBag->has('items') || collect($errorBag->keys())->contains(fn ($key) => str_starts_with($key, 'items.'));
    $initialSubtotal = collect($items)->sum(fn ($item) => (float) ($item['quantity'] ?? 0) * (float) ($item['unit_price'] ?? 0));
    $initialTaxRate = (float) old('tax_rate', $document->tax_rate ?? 15);
    $initialTax = $initialSubtotal * ($initialTaxRate / 100);
    $initialGrandTotal = $initialSubtotal + $initialTax;
@endphp

@csrf

<div class="builder-shell" data-document-builder>
    <div class="builder-stack">
        @if ($errorBag->any())
            <div class="builder-validation-panel" role="alert">
                <div class="builder-validation-icon">
                    <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
                </div>
                <div>
                    <h3 class="builder-validation-title">Please correct the highlighted fields.</h3>
                    <p class="builder-validation-copy">Complete the highlighted fields.</p>
                </div>
            </div>
        @endif

        <section class="builder-card">
            <div class="builder-header">
                <div class="builder-header-main">
                    <span class="builder-step">01</span>
                    <div>
                        <h3 class="builder-title">Client & status</h3>
                        <p class="builder-subtitle">Select client and status.</p>
                    </div>
                </div>
            </div>

            <div class="builder-grid">
                <div class="builder-field">
                    <label for="client_id" class="builder-label">Client</label>
                    <select id="client_id" name="client_id" class="{{ $fieldClass('client_id', 'builder-select') }}" required>
                        <option value="">Select client</option>
                        @foreach ($clients as $client)
                            <option value="{{ $client->id }}" @selected((string) old('client_id', $document->client_id ?? '') === (string) $client->id)>{{ $client->name }}</option>
                        @endforeach
                    </select>
                    @error('client_id')<p class="builder-error">{{ $message }}</p>@enderror
                    <p class="builder-help">Links to client records.</p>
                </div>

                <div class="builder-field">
                    <label for="status" class="builder-label">{{ $documentType }} status</label>
                    <select id="status" name="status" class="{{ $fieldClass('status', 'builder-select') }}" required>
                        @foreach ($statusOptions as $value => $label)
                            <option value="{{ $value }}" @selected(old('status', $document->status ?? 'draft') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('status')<p class="builder-error">{{ $message }}</p>@enderror
                    <p class="builder-help">Choose the current status.</p>
                </div>
            </div>
        </section>

        <section class="builder-card">
            <div class="builder-header">
                <div class="builder-header-main">
                    <span class="builder-step">02</span>
                    <div>
                        <h3 class="builder-title">Dates & settings</h3>
                        <p class="builder-subtitle">Set dates. VAT uses Company Settings.</p>
                    </div>
                </div>
            </div>

            <div class="builder-grid">
                <div class="builder-field">
                    <label for="issue_date" class="builder-label">Issue date</label>
                    <input id="issue_date" name="issue_date" type="date" value="{{ old('issue_date', optional($document->issue_date)->format('Y-m-d') ?? $document->issue_date ?? '') }}" class="{{ $fieldClass('issue_date', 'builder-input') }}" required>
                    @error('issue_date')<p class="builder-error">{{ $message }}</p>@enderror
                </div>

                <div class="builder-field">
                    <label for="{{ $dateFieldTwo }}" class="builder-label">{{ $dateFieldTwoLabel }}</label>
                    <input id="{{ $dateFieldTwo }}" name="{{ $dateFieldTwo }}" type="date" value="{{ old($dateFieldTwo, optional($document->{$dateFieldTwo})->format('Y-m-d') ?? $document->{$dateFieldTwo} ?? '') }}" class="{{ $fieldClass($dateFieldTwo, 'builder-input') }}" required>
                    @error($dateFieldTwo)<p class="builder-error">{{ $message }}</p>@enderror
                </div>
            </div>
            <input id="tax_rate" name="tax_rate" type="hidden" value="{{ old('tax_rate', $document->tax_rate ?? 15) }}" data-tax-rate>
            @error('tax_rate')<p class="builder-error mt-3">{{ $message }}</p>@enderror
        </section>

        <section class="builder-card">
            <div class="builder-header">
                <div class="builder-header-main">
                    <span class="builder-step">03</span>
                    <div>
                        <h3 class="builder-title">Notes</h3>
                        <p class="builder-subtitle">Add short client notes.</p>
                    </div>
                </div>
            </div>

            <div class="builder-field">
                <label for="notes" class="builder-label">{{ $notesLabel }}</label>
                <textarea id="notes" name="notes" rows="5" class="{{ $fieldClass('notes', 'builder-textarea') }}" placeholder="Example: Payment due within 7 days. Thank you for choosing Tarnova.">{{ old('notes', $document->notes ?? '') }}</textarea>
                @error('notes')<p class="builder-error">{{ $message }}</p>@enderror
                <p class="builder-help">Shown on the client document.</p>
            </div>
        </section>

        <section class="builder-card">
            <div class="builder-items-header">
                <div class="builder-header-main">
                    <span class="builder-step">04</span>
                    <div>
                        <h3 class="builder-title">Line items</h3>
                        <p class="builder-subtitle">Add products or services.</p>
                    </div>
                </div>
                <button type="button" class="builder-add-button" data-add-item>
                    <i class="fa-solid fa-plus" aria-hidden="true"></i>
                    <span>Add item</span>
                </button>
            </div>

            <div class="builder-items-table">
                <div class="builder-items-head">
                    <span>Description</span>
                    <span>Qty</span>
                    <span>Price</span>
                    <span>Total</span>
                    <span></span>
                </div>

                <div data-items-container>
                    @foreach ($items as $index => $item)
                        @php
                            $descriptionKey = "items.$index.description";
                            $quantityKey = "items.$index.quantity";
                            $priceKey = "items.$index.unit_price";
                            $lineTotal = (float) ($item['quantity'] ?? 0) * (float) ($item['unit_price'] ?? 0);
                        @endphp
                        <div class="builder-item-row builder-animate-in" data-line-item>
                            <div class="builder-row-cell">
                                <span class="builder-row-label">Description</span>
                                <div class="builder-field">
                                    <input type="text" name="items[{{ $index }}][description]" value="{{ $item['description'] ?? '' }}" class="{{ $errorBag->has($descriptionKey) ? 'builder-input builder-input-invalid' : 'builder-input' }}" placeholder="Add a line item description" required data-item-description>
                                    @error($descriptionKey)<p class="builder-error">{{ $message }}</p>@enderror
                                </div>
                            </div>

                            <div class="builder-row-cell">
                                <span class="builder-row-label">Qty</span>
                                <div class="builder-field">
                                    <input type="number" name="items[{{ $index }}][quantity]" min="1" value="{{ $item['quantity'] ?? 1 }}" class="{{ $errorBag->has($quantityKey) ? 'builder-input builder-input-invalid' : 'builder-input' }}" required data-item-quantity>
                                    @error($quantityKey)<p class="builder-error">{{ $message }}</p>@enderror
                                </div>
                            </div>

                            <div class="builder-row-cell">
                                <span class="builder-row-label">Price</span>
                                <div class="builder-field">
                                    <input type="number" name="items[{{ $index }}][unit_price]" min="0" step="0.01" value="{{ $item['unit_price'] ?? 0 }}" class="{{ $errorBag->has($priceKey) ? 'builder-input builder-input-invalid' : 'builder-input' }}" required data-item-price>
                                    @error($priceKey)<p class="builder-error">{{ $message }}</p>@enderror
                                </div>
                            </div>

                            <div class="builder-row-cell">
                                <span class="builder-row-label">Total</span>
                                <div class="builder-line-total" data-line-total>R {{ number_format($lineTotal, 2) }}</div>
                            </div>

                            <div class="builder-row-cell builder-remove-cell">
                                <button type="button" class="builder-remove" data-remove-item aria-label="Remove item">
                                    <i class="fa-solid fa-trash-can" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="builder-line-guidance">
                <div>
                    <p class="builder-line-guidance-title">Keep line items clear.</p>
                    <p class="builder-line-guidance-copy">Use one row per item.</p>
                </div>
            </div>

            @if ($hasItemErrors)
                <div class="builder-note mt-4 border border-red-100 bg-red-50 text-red-600">
                    One or more line items need attention. Review the highlighted fields below.
                </div>
            @endif
            @error('items')<p class="builder-error mt-3">{{ $message }}</p>@enderror
        </section>
    </div>

    <aside class="builder-summary">
        <div class="builder-header">
            <div class="builder-header-main">
                <span class="builder-step">Total</span>
                <div>
                    <h3 class="builder-title">{{ $documentType }} summary</h3>
                    <p class="builder-subtitle">Check totals before saving.</p>
                </div>
            </div>
        </div>

        <div class="builder-summary-list">
            <div class="builder-summary-row">
                <span>Subtotal</span>
                <strong class="text-slate-900" data-summary-subtotal>R {{ number_format($initialSubtotal, 2) }}</strong>
            </div>
            <div class="builder-summary-row">
                <span>VAT</span>
                <strong class="text-slate-900" data-summary-tax>R {{ number_format($initialTax, 2) }}</strong>
            </div>
        </div>

        <div class="builder-summary-total">
            <div>
                <p class="builder-summary-total-label">Total</p>
                <p class="mt-2 text-sm text-slate-500">{{ $documentType }} amount including VAT</p>
            </div>
            <p class="builder-summary-total-value" data-summary-total>R {{ number_format($initialGrandTotal, 2) }}</p>
        </div>

        <div class="builder-summary-chip">
            <i class="fa-solid fa-shield-halved" aria-hidden="true"></i>
            <span>VAT rate comes from Company Settings</span>
        </div>

        <div class="builder-note">
            Tip: add at least one clearly named line item so the client can immediately understand the scope and pricing.
        </div>

        <div class="builder-actions">
            <button type="submit" class="primary-button">{{ $submitLabel }}</button>
            <a href="{{ route($indexRoute) }}" class="secondary-button">Cancel</a>
        </div>
    </aside>
</div>

<template id="line-item-template">
    <div class="builder-item-row builder-animate-in" data-line-item>
        <div class="builder-row-cell">
            <span class="builder-row-label">Description</span>
            <div class="builder-field">
                <input type="text" data-name="items[__INDEX__][description]" class="builder-input" placeholder="Add a line item description" required data-item-description>
            </div>
        </div>

        <div class="builder-row-cell">
            <span class="builder-row-label">Qty</span>
            <div class="builder-field">
                <input type="number" data-name="items[__INDEX__][quantity]" min="1" value="1" class="builder-input" required data-item-quantity>
            </div>
        </div>

        <div class="builder-row-cell">
            <span class="builder-row-label">Price</span>
            <div class="builder-field">
                <input type="number" data-name="items[__INDEX__][unit_price]" min="0" step="0.01" value="0" class="builder-input" required data-item-price>
            </div>
        </div>

        <div class="builder-row-cell">
            <span class="builder-row-label">Total</span>
            <div class="builder-line-total" data-line-total>R 0.00</div>
        </div>

        <div class="builder-row-cell builder-remove-cell">
            <button type="button" class="builder-remove" data-remove-item aria-label="Remove item">
                <i class="fa-solid fa-trash-can" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</template>

@if (! file_exists(public_path('build/manifest.json')))
    @include('components.documents.builder-script')
@endif