@php
    $errorBag = $errors ?? new \Illuminate\Support\ViewErrorBag();
    $items = old('items', $recurringInvoice->items?->map(fn ($item) => $item->only(['description', 'quantity', 'unit_price']))->all() ?: [['description' => '', 'quantity' => 1, 'unit_price' => 0]]);
    $fieldClass = fn (string $field, string $baseClass): string => $errorBag->has($field) ? $baseClass.' '.$baseClass.'-invalid' : $baseClass;
    $initialSubtotal = collect($items)->sum(fn ($item) => (float) ($item['quantity'] ?? 0) * (float) ($item['unit_price'] ?? 0));
    $initialTaxRate = (float) old('tax_rate', $recurringInvoice->tax_rate ?? 15);
    $initialTax = $initialSubtotal * ($initialTaxRate / 100);
    $initialGrandTotal = $initialSubtotal + $initialTax;
    $hasItemErrors = $errorBag->has('items') || collect($errorBag->keys())->contains(fn ($key) => str_starts_with($key, 'items.'));
@endphp

@csrf
@if (($method ?? null) === 'PUT')
    @method('PUT')
@endif

<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 recurring invoice setup.</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 & schedule</h3>
                        <p class="builder-subtitle">Choose who gets billed and how often.</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', $recurringInvoice->client_id ?? '') === (string) $client->id)>{{ $client->name }}{{ $client->email ? ' - '.$client->email : '' }}</option>
                        @endforeach
                    </select>
                    @error('client_id')<p class="builder-error">{{ $message }}</p>@enderror
                </div>

                <div class="builder-field">
                    <label for="title" class="builder-label">Schedule name</label>
                    <input id="title" name="title" type="text" value="{{ old('title', $recurringInvoice->title ?? '') }}" class="{{ $fieldClass('title', 'builder-input') }}" placeholder="Monthly website hosting" required>
                    @error('title')<p class="builder-error">{{ $message }}</p>@enderror
                </div>

                <div class="builder-field">
                    <label for="frequency" class="builder-label">Frequency</label>
                    <select id="frequency" name="frequency" class="{{ $fieldClass('frequency', 'builder-select') }}" required>
                        @foreach (\App\Models\RecurringInvoice::FREQUENCIES as $frequency)
                            <option value="{{ $frequency }}" @selected(old('frequency', $recurringInvoice->frequency ?? \App\Models\RecurringInvoice::FREQUENCY_MONTHLY) === $frequency)>{{ str($frequency)->headline() }}</option>
                        @endforeach
                    </select>
                    @error('frequency')<p class="builder-error">{{ $message }}</p>@enderror
                </div>

                <div class="builder-field">
                    <label for="generation_mode" class="builder-label">Generation mode</label>
                    <select id="generation_mode" name="generation_mode" class="{{ $fieldClass('generation_mode', 'builder-select') }}" required>
                        <option value="draft" @selected(old('generation_mode', $recurringInvoice->generation_mode ?? 'draft') === 'draft')>Generate draft</option>
                        <option value="track" @selected(old('generation_mode', $recurringInvoice->generation_mode ?? 'draft') === 'track')>Track only - no email</option>
                        <option value="send" @selected(old('generation_mode', $recurringInvoice->generation_mode ?? 'draft') === 'send')>Generate and email</option>
                    </select>
                    @error('generation_mode')<p class="builder-error">{{ $message }}</p>@enderror
                    <p class="builder-help">Track only creates an open invoice for manual payment recording without emailing the client.</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 & terms</h3>
                        <p class="builder-subtitle">Control the next invoice date and due terms.</p>
                    </div>
                </div>
            </div>

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

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

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

                <div class="builder-field">
                    <label for="due_days" class="builder-label">Due days</label>
                    <input id="due_days" name="due_days" type="number" min="0" max="365" value="{{ old('due_days', $recurringInvoice->due_days ?? 14) }}" class="{{ $fieldClass('due_days', 'builder-input') }}" required>
                    @error('due_days')<p class="builder-error">{{ $message }}</p>@enderror
                </div>
            </div>
            <input id="tax_rate" name="tax_rate" type="hidden" value="{{ old('tax_rate', $recurringInvoice->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">Shown on generated invoices.</p>
                    </div>
                </div>
            </div>
            <textarea id="notes" name="notes" rows="4" class="{{ $fieldClass('notes', 'builder-textarea') }}" placeholder="Payment terms or recurring service details">{{ old('notes', $recurringInvoice->notes ?? '') }}</textarea>
            @error('notes')<p class="builder-error">{{ $message }}</p>@enderror
        </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">These items copy to each generated invoice.</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>
                                <input type="text" name="items[{{ $index }}][description]" value="{{ $item['description'] ?? '' }}" class="{{ $errorBag->has($descriptionKey) ? 'builder-input builder-input-invalid' : 'builder-input' }}" placeholder="Hosting and maintenance" required data-item-description>
                                @error($descriptionKey)<p class="builder-error">{{ $message }}</p>@enderror
                            </div>
                            <div class="builder-row-cell">
                                <span class="builder-row-label">Qty</span>
                                <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 class="builder-row-cell">
                                <span class="builder-row-label">Price</span>
                                <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 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>
            @if ($hasItemErrors)<div class="builder-note mt-4 border border-red-100 bg-red-50 text-red-600">Review the highlighted line items.</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">Recurring total</h3><p class="builder-subtitle">Amount per generated invoice.</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">Every generated invoice</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>Use Track only when you want the invoice generated automatically but payments updated manually.</span></div>
        <div class="builder-actions">
            <button type="submit" class="primary-button">{{ $submitLabel }}</button>
            <a href="{{ route('recurring-invoices.index') }}" 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><input type="text" data-name="items[__INDEX__][description]" class="builder-input" placeholder="Hosting and maintenance" required data-item-description></div>
        <div class="builder-row-cell"><span class="builder-row-label">Qty</span><input type="number" data-name="items[__INDEX__][quantity]" min="1" value="1" class="builder-input" required data-item-quantity></div>
        <div class="builder-row-cell"><span class="builder-row-label">Price</span><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 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