@php
    $note = $debitNote ?? null;
    $isEdit = (bool) $note;
    $formAction = $isEdit ? route('admin.debit-notes.update', $note) : route('admin.debit-notes.store');
    $labels = $docLabels;
    $lineItems = $lineItems ?? [['item_name' => '', 'description' => '', 'unit' => 'NOS', 'quantity' => 1, 'rate' => 0, 'discount_percent' => 0, 'tax_rate' => 0]];
@endphp

<form method="POST" action="{{ $formAction }}" id="debit-note-form" class="billing-invoice-form{{ ($gstEnabled ?? false) ? ' billing-invoice-form--gst' : '' }}"
    data-gst-enabled="{{ ($gstEnabled ?? false) ? '1' : '0' }}"
    data-company-state="{{ $company->state ?? '' }}"
    data-clients='@json($clientsJson ?? [])'
    data-items='@json($itemsJson)'
    data-tax-rates='@json($taxRatesJson)'
    data-units='@json($unitsJson)'>
    @csrf
    @if($isEdit) @method('PUT') @endif
    @include('partials.admin.billing-catalog-items-json')

    <div class="billing-form-card card border-0 mb-3">
        <div class="card-body">
            <h5 class="fw-semibold mb-1">{{ $isEdit ? 'Edit' : 'Add New' }} {{ $typeLabel }}</h5>
            <p class="text-muted small mb-4">Select client or vendor, link the original document, and add line items.</p>

            @php $entity = old('entity_type', $entityType ?? 'client'); @endphp
            <div class="mb-3">
                <div class="btn-group" role="group" id="debit-note-entity-toggle">
                    <input type="radio" class="btn-check" name="entity_type" id="entity_type_client" value="client" @checked($entity === 'client')>
                    <label class="btn btn-outline-primary btn-sm" for="entity_type_client">Client</label>
                    <input type="radio" class="btn-check" name="entity_type" id="entity_type_vendor" value="vendor" @checked($entity === 'vendor')>
                    <label class="btn btn-outline-primary btn-sm" for="entity_type_vendor">Vendor</label>
                </div>
            </div>

            <div class="row g-3 billing-invoice-header-grid">
                <div class="col-md-4" id="debit-note-client-wrap">
                    <label class="form-label">Client name <span class="text-danger">*</span></label>
                    @include('partials.admin.client-picker', [
                        'selectedCustomerId' => old('customer_id', $note?->customer_id),
                        'customers' => $customers,
                    ])
                </div>
                <div class="col-md-4 d-none" id="debit-note-vendor-wrap">
                    <label class="form-label">Vendor name <span class="text-danger">*</span></label>
                    <div class="billing-client-picker billing-unit-picker billing-unit-picker--lg" data-vendor-picker data-placeholder="Select Vendor">
                        <input type="hidden" name="vendor_id" id="billing-vendor-id" data-field="vendor_id" value="{{ old('vendor_id', $note?->vendor_id) }}">
                        <button type="button" class="billing-unit-picker__trigger form-select text-start" aria-haspopup="listbox">
                            <span class="billing-unit-picker__label text-truncate text-muted">Select Vendor</span>
                            <i class="ri-arrow-down-s-line billing-unit-picker__arrow"></i>
                        </button>
                        <div class="billing-unit-picker__dropdown d-none">
                            <div class="billing-unit-picker__search-wrap">
                                <input type="text" class="form-control form-control-sm billing-unit-picker__search" placeholder="Type to search" autocomplete="off">
                            </div>
                            <ul class="billing-unit-picker__list billing-vendor-picker__list"></ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ $labels['number'] }} <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="text" name="debit_note_prefix" class="form-control" style="max-width:45%" value="{{ old('debit_note_prefix', $note?->debit_note_prefix ?? $defaultPrefix) }}" required>
                        <input type="number" name="debit_note_seq" class="form-control" min="1" value="{{ old('debit_note_seq', $note?->debit_note_seq ?? $defaultSeq) }}" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ $labels['date'] }} <span class="text-danger">*</span></label>
                    <input type="date" name="debit_note_date" class="form-control" value="{{ old('debit_note_date', $note?->debit_note_date?->format('Y-m-d') ?? date('Y-m-d')) }}" required>
                </div>
                <div class="col-md-4" id="debit-note-invoice-wrap">
                    <label class="form-label">Invoice no</label>
                    <select name="invoice_id" id="invoice_id" class="form-select">
                        <option value="">Select invoice</option>
                        @if($note?->invoice_id)
                            <option value="{{ $note->invoice_id }}" selected>{{ $note->displayDocumentNumber() }}</option>
                        @endif
                    </select>
                </div>
                <div class="col-md-4 d-none" id="debit-note-bill-wrap">
                    <label class="form-label">Purchase bill no</label>
                    <select name="purchase_bill_id" id="purchase_bill_id" class="form-select">
                        <option value="">Select bill</option>
                        @if($note?->purchase_bill_id)
                            <option value="{{ $note->purchase_bill_id }}" selected>{{ $note->displayDocumentNumber() }}</option>
                        @endif
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label" id="debit-note-doc-date-label">{{ $entity === 'vendor' ? 'Bill date' : 'Invoice date' }}</label>
                    <input type="date" name="related_document_date" id="related_document_date" class="form-control"
                        value="{{ old('related_document_date', $note?->related_document_date?->format('Y-m-d')) }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Reason</label>
                    <select name="reason" class="form-select" required>
                        @foreach($reasons as $key => $label)
                            <option value="{{ $key }}" @selected(old('reason', $note?->reason ?? 'correction_in_invoice') === $key)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            @include('partials.admin.gst-form-fields', ['quote' => $note, 'gstEnabled' => $gstEnabled ?? false, 'indianStates' => $indianStates ?? []])
        </div>
    </div>

    <div class="billing-form-card card border-0 mb-3">
        <div class="card-body p-0">
            <div class="px-3 pt-3 pb-2">
                <h6 class="fw-semibold mb-0">{{ $labels['title'] }}</h6>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered billing-line-items-table mb-0{{ ($gstEnabled ?? false) ? ' billing-line-items-table--gst' : '' }}">
                    <thead class="table-light">
                        <tr>
                            <th class="col-no">No</th>
                            <th class="col-item">Item Name</th>
                            <th class="col-desc">Description</th>
                            <th class="col-unit">Unit</th>
                            <th class="col-qty">QTY</th>
                            <th class="col-price">Price</th>
                            <th class="col-disc">Disc. %</th>
                            @include('partials.admin.gst-line-item-columns', ['gstEnabled' => $gstEnabled ?? false])
                            @if(!($gstEnabled ?? false))
                            <th class="col-tax">Tax</th>
                            @endif
                            <th class="col-total text-end">Total</th>
                            <th class="col-act"></th>
                        </tr>
                    </thead>
                    <tbody id="line-items-body">
                        @foreach($lineItems as $idx => $line)
                        @php
                            $unitCode = $line['unit'] ?? 'NOS';
                            $unitMeta = collect($unitsCatalog)->firstWhere('code', $unitCode);
                            $unitLabel = $unitMeta['label'] ?? $unitCode;
                        @endphp
                        <tr class="line-item-row">
                            <td class="text-center line-no">{{ $idx + 1 }}</td>
                            <td class="col-item">
                                <select name="line_items[{{ $idx }}][item_id]" data-field="item_id" class="form-select form-select-sm mb-1">
                                    <option value="">Select Item</option>
                                    @include('partials.admin.catalog-item-options', [
                                        'catalogItems' => $catalogItems,
                                        'selectedId' => $line['item_id'] ?? null,
                                        'rateColumn' => 'sale_rate',
                                    ])
                                </select>
                                <input type="text" name="line_items[{{ $idx }}][item_name]" data-field="item_name" class="form-control form-control-sm" value="{{ $line['item_name'] ?? '' }}" placeholder="Item name" required>
                            </td>
                            <td class="col-desc">
                                <textarea name="line_items[{{ $idx }}][description]" data-field="description" class="form-control form-control-sm billing-desc-field" rows="2" maxlength="1000" placeholder="Description">{{ $line['description'] ?? '' }}</textarea>
                                <small class="text-muted billing-desc-hint">1000 characters left</small>
                            </td>
                            <td class="col-unit">
                                @include('partials.admin.unit-combobox', [
                                    'name' => "line_items[{$idx}][unit]",
                                    'value' => $unitCode,
                                    'label' => $unitLabel,
                                ])
                            </td>
                            <td class="col-qty"><input type="number" step="0.001" min="0.001" name="line_items[{{ $idx }}][quantity]" data-field="quantity" class="form-control form-control-sm text-center" value="{{ $line['quantity'] ?? 1 }}"></td>
                            <td class="col-price"><input type="number" step="0.01" min="0" name="line_items[{{ $idx }}][rate]" data-field="rate" class="form-control form-control-sm" value="{{ $line['rate'] ?? 0 }}" placeholder="0"></td>
                            <td class="col-disc"><input type="number" step="0.01" min="0" max="100" name="line_items[{{ $idx }}][discount_percent]" data-field="discount_percent" class="form-control form-control-sm" value="{{ $line['discount_percent'] ?? 0 }}" placeholder="0"></td>
                            @include('partials.admin.gst-line-item-cells', ['gstEnabled' => $gstEnabled ?? false, 'idx' => $idx, 'line' => $line, 'taxRates' => $taxRates])
                            @if(!($gstEnabled ?? false))
                            <td>
                                <select name="line_items[{{ $idx }}][tax_rate]" data-field="tax_rate" class="form-select form-select-sm">
                                    <option value="0">Select Tax</option>
                                    @foreach($taxRates as $tax)
                                        <option value="{{ $tax->rate }}" data-tax-name="{{ $tax->name }}" @selected(($line['tax_rate'] ?? 0) == $tax->rate)>{{ $tax->name }} ({{ $tax->rate }}%)</option>
                                    @endforeach
                                </select>
                            </td>
                            @endif
                            <td class="text-end fw-medium" data-line-total>₹ 0.00</td>
                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-soft-danger btn-remove-line"><i class="ri-delete-bin-line"></i></button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="p-3 border-top text-end">
                <button type="button" class="btn btn-primary btn-sm" id="btn-add-line">
                    <i class="ri-add-line me-1"></i> Add line
                </button>
            </div>
        </div>
    </div>

    @php
        $discAllType = old('discount_all_type', $note?->discount_all_type ?? 'percent');
        $discAllVal = old('discount_all_value', $note?->discount_all_value ?? $note?->discount_all_percent ?? 0);
    @endphp
    <div class="row g-3 billing-invoice-options-row align-items-start">
        <div class="col-lg-6">
            <div class="billing-form-card card border-0 h-100">
                <div class="card-body billing-invoice-options">
                    <h6 class="billing-options-heading"><i class="ri-settings-4-line me-1"></i> Additional options</h6>

                    <div class="billing-option-block" data-option="shipping">
                        <div class="billing-option-head">
                            <input class="form-check-input" type="checkbox" name="has_shipping" id="has_shipping" value="1" @checked(old('has_shipping', $note?->has_shipping))>
                            <label class="form-check-label fw-medium" for="has_shipping">Add shipping charges</label>
                        </div>
                        <div class="billing-option-body {{ old('has_shipping', $note?->has_shipping) ? '' : 'd-none' }}" id="has_shipping_wrap">
                            <div class="row g-2">
                                <div class="col-sm-5">
                                    <select name="shipping_mode" id="shipping_mode" class="form-select form-select-sm">
                                        <option value="">Select mode</option>
                                        @foreach($shippingModes as $key => $label)
                                            <option value="{{ $key }}" @selected(old('shipping_mode', $note?->shipping_mode) === $key)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-7">
                                    <input type="number" step="0.01" min="0" name="shipping_charges" id="shipping_charges" class="form-control form-control-sm" value="{{ old('shipping_charges', $note?->shipping_charges ?? 0) }}" placeholder="Shipping Amount">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="billing-option-block" data-option="discount_total">
                        <div class="billing-option-head">
                            <input class="form-check-input" type="checkbox" name="has_discount_total" id="has_discount_total" value="1" @checked(old('has_discount_total', $note?->has_discount_total))>
                            <label class="form-check-label fw-medium" for="has_discount_total">Add Discount On Total</label>
                        </div>
                        <div class="billing-option-body {{ old('has_discount_total', $note?->has_discount_total) ? '' : 'd-none' }}" id="has_discount_total_wrap">
                            <input type="number" step="0.01" min="0" name="discount_on_total" id="discount_on_total" class="form-control form-control-sm" value="{{ old('discount_on_total', $note?->discount_on_total ?? 0) }}" placeholder="0">
                        </div>
                    </div>

                    <div class="billing-option-block" data-option="discount_all">
                        <div class="billing-option-head">
                            <input class="form-check-input" type="checkbox" name="has_discount_all" id="has_discount_all" value="1" @checked(old('has_discount_all', $note?->has_discount_all))>
                            <label class="form-check-label fw-medium" for="has_discount_all">Add discount to all</label>
                        </div>
                        <div class="billing-option-body {{ old('has_discount_all', $note?->has_discount_all) ? '' : 'd-none' }}" id="has_discount_all_wrap">
                            <div class="row g-2">
                                <div class="col-sm-5">
                                    <input type="number" step="0.01" min="0" name="discount_all_value" id="discount_all_value" class="form-control form-control-sm" value="{{ $discAllVal }}" placeholder="0">
                                </div>
                                <div class="col-sm-7">
                                    <select name="discount_all_type" id="discount_all_type" class="form-select form-select-sm">
                                        @foreach($discountAllTypes as $key => $label)
                                            <option value="{{ $key }}" @selected($discAllType === $key)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="billing-option-block" data-option="custom">
                        <div class="billing-option-head">
                            <input class="form-check-input" type="checkbox" name="has_custom_amount" id="has_custom_amount" value="1" @checked(old('has_custom_amount', $note?->has_custom_amount))>
                            <label class="form-check-label fw-medium" for="has_custom_amount">Add Custom Amount</label>
                        </div>
                        <div class="billing-option-body {{ old('has_custom_amount', $note?->has_custom_amount) ? '' : 'd-none' }}" id="has_custom_amount_wrap">
                            <div class="row g-2">
                                <div class="col-sm-6">
                                    <input type="text" name="custom_amount_label" id="custom_amount_label" class="form-control form-control-sm" value="{{ old('custom_amount_label', $note?->custom_amount_label) }}" placeholder="Custom Amount Label">
                                </div>
                                <div class="col-sm-6">
                                    <input type="number" step="0.01" min="0" name="custom_amount" id="custom_amount" class="form-control form-control-sm" value="{{ old('custom_amount', $note?->custom_amount ?? 0) }}" placeholder="Custom Amount">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="billing-option-block" data-option="advance">
                        <div class="billing-option-head">
                            <input class="form-check-input" type="checkbox" name="has_advance_payment" id="has_advance_payment" value="1" @checked(old('has_advance_payment', $note?->has_advance_payment))>
                            <label class="form-check-label fw-medium" for="has_advance_payment">Add/Use Advance Payment</label>
                            <span class="billing-option-inline-val text-muted small" id="advance-inline-display">{{ old('has_advance_payment', $note?->has_advance_payment) ? '₹ '.number_format(old('advance_payment', $note?->advance_payment ?? 0), 2) : '' }}</span>
                        </div>
                        <div class="billing-option-body {{ old('has_advance_payment', $note?->has_advance_payment) ? '' : 'd-none' }}" id="has_advance_payment_wrap">
                            <input type="number" step="0.01" min="0" name="advance_payment" id="advance_payment" class="form-control form-control-sm mb-1" value="{{ old('advance_payment', $note?->advance_payment ?? 0) }}">
                            <a href="#" class="small text-primary" id="link-add-advance"><i class="ri-add-line"></i> Add advance payment</a>
                        </div>
                    </div>

                    <div class="billing-option-block" data-option="total_quantity">
                        <div class="billing-option-head">
                            <input class="form-check-input" type="checkbox" name="has_total_quantity" id="has_total_quantity" value="1" @checked(old('has_total_quantity', $note?->has_total_quantity))>
                            <label class="form-check-label fw-medium" for="has_total_quantity">Total quantity</label>
                        </div>
                        <div class="billing-option-body {{ old('has_total_quantity', $note?->has_total_quantity) ? '' : 'd-none' }}" id="has_total_quantity_wrap">
                            <div class="row g-2">
                                <div class="col-sm-5">
                                    <input type="text" name="total_quantity_unit" class="form-control form-control-sm" value="{{ old('total_quantity_unit', $note?->total_quantity_unit) }}" placeholder="Unit">
                                </div>
                                <div class="col-sm-7">
                                    <input type="number" step="0.001" min="0" name="total_quantity" class="form-control form-control-sm" value="{{ old('total_quantity', $note?->total_quantity) }}" placeholder="Quantity">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="billing-option-block">
                        <div class="billing-option-head">
                            <input class="form-check-input" type="checkbox" name="show_cess" id="show_cess" value="1" @checked(old('show_cess', $note?->show_cess))>
                            <label class="form-check-label fw-medium" for="show_cess">Show CESS</label>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="billing-invoice-summary card border-0 h-100 sticky-lg-top" style="top:80px">
                <div class="card-body p-0">
                    <div class="billing-summary-header px-3 py-2">Amount summary</div>
                    <div class="billing-summary-lines px-3 py-2">
                        <div class="billing-summary-line">
                            <span>Subtotal</span>
                            <span id="summary-subtotal" class="fw-medium">₹ 0.00</span>
                        </div>
                        @include('partials.admin.gst-summary-rows', ['gstEnabled' => $gstEnabled ?? false])
                        <div id="summary-tax-breakdown" class="billing-summary-tax-breakdown"></div>
                        <div class="billing-summary-line billing-summary-line--deduct d-none" id="row-summary-advance" data-summary="advance">
                            <span>Used Advanced Payment</span>
                            <span class="text-danger">(-) <span id="summary-advance">₹ 0.00</span></span>
                        </div>
                        <div class="billing-summary-line d-none" id="row-summary-shipping" data-summary="shipping">
                            <span>Shipping &amp; Packaging charges</span>
                            <span id="summary-shipping" class="text-primary">₹ 0.00</span>
                        </div>
                        <div class="billing-summary-line billing-summary-line--deduct d-none" id="row-summary-discount-total" data-summary="discount_total">
                            <span>Discount On Total</span>
                            <span class="text-danger">(-) <span id="summary-discount-total">₹ 0.00</span></span>
                        </div>
                        <div class="billing-summary-line billing-summary-line--deduct d-none" id="row-summary-discount-all" data-summary="discount_all">
                            <span id="summary-discount-all-label">Discount on all</span>
                            <span class="text-danger">(-) <span id="summary-discount-all">₹ 0.00</span></span>
                        </div>
                        <div class="billing-summary-line d-none" id="row-summary-custom" data-summary="custom">
                            <span id="summary-custom-label">Custom Amount</span>
                            <span id="summary-custom">₹ 0.00</span>
                        </div>
                    </div>
                    <div class="billing-summary-total px-3 py-3">
                        <span class="fw-semibold">Total</span>
                        <span class="billing-summary-total__amount" id="summary-total">₹ 0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-md-6">
            <label class="form-label">Terms &amp; Conditions</label>
            <textarea name="terms" class="form-control" rows="4" placeholder="Payment terms visible on document">{{ old('terms', $note?->terms) }}</textarea>
        </div>
        <div class="col-md-6">
            <label class="form-label">Private notes <span class="text-muted">(not shown to client)</span></label>
            <textarea name="private_notes" class="form-control" rows="4" placeholder="Internal notes">{{ old('private_notes', $note?->private_notes) }}</textarea>
        </div>
    </div>

    <div class="billing-form-footer mt-4">
        <div class="d-flex flex-wrap gap-2 ms-md-auto">
            <button type="submit" name="save_action" value="preview" class="btn btn-success">
                <i class="ri-eye-line me-1"></i> Save &amp; Preview
            </button>
            <button type="submit" name="save_action" value="save" class="btn btn-outline-success">
                <i class="ri-check-line me-1"></i> Save
            </button>
            <button type="submit" name="save_action" value="draft" class="btn btn-light border">
                Save as draft
            </button>
            <a href="{{ route('admin.debit-notes.index') }}" class="btn btn-light">Cancel</a>
        </div>
    </div>
</form>

<div class="modal fade" id="modal-add-unit" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title">Add new unit</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="form-add-unit">
                <div class="modal-body">
                    <div class="mb-2">
                        <label class="form-label small">Unit name</label>
                        <input type="text" name="name" class="form-control form-control-sm" required placeholder="e.g. Carton">
                    </div>
                    <div class="mb-2">
                        <label class="form-label small">Unit code</label>
                        <input type="text" name="code" class="form-control form-control-sm" required placeholder="e.g. CTN" maxlength="20">
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_gst" value="1" id="new_unit_gst">
                        <label class="form-check-label small" for="new_unit_gst">GST unit</label>
                    </div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success btn-sm">Add unit</button>
                </div>
            </form>
        </div>
    </div>
</div>

@include('partials.admin.modal-quick-client')

@push('scripts')
<script>
    window.__billingUnits = @json($unitsJson);
    window.__billingCsrf = '{{ csrf_token() }}';
    window.__billingUnitsStore = '{{ route('admin.units.store') }}';
</script>
@include('partials.admin.document-form-client-scripts')
<script src="{{ asset('js/unit-picker.js') }}"></script>
@include('partials.admin.invoice-form-script')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('debit-note-form');
        const vendors = @json($vendorsJson ?? []);
        const invoicesUrl = @json($invoicesJsonUrl ?? '');
        const billsUrl = @json($purchaseBillsJsonUrl ?? '');
        const invoiceSelect = document.getElementById('invoice_id');
        const billSelect = document.getElementById('purchase_bill_id');
        const docDateInput = document.getElementById('related_document_date');
        const customerHidden = form?.querySelector('[data-field="customer_id"]');
        const vendorHidden = document.getElementById('billing-vendor-id');
        const clientWrap = document.getElementById('debit-note-client-wrap');
        const vendorWrap = document.getElementById('debit-note-vendor-wrap');
        const invoiceWrap = document.getElementById('debit-note-invoice-wrap');
        const billWrap = document.getElementById('debit-note-bill-wrap');
        const dateLabel = document.getElementById('debit-note-doc-date-label');
        const initialInvoiceId = @json(old('invoice_id', $note?->invoice_id));
        const initialBillId = @json(old('purchase_bill_id', $note?->purchase_bill_id));

        if (window.BillingClientPicker) {
            BillingClientPicker.configure({ clients: window.__billingClients || [] });
            BillingClientPicker.initAll(form);
        }

        function entityType() {
            const checked = form.querySelector('input[name="entity_type"]:checked');
            return checked ? checked.value : 'client';
        }

        function setEntityUi(type) {
            const isClient = type === 'client';
            clientWrap?.classList.toggle('d-none', !isClient);
            vendorWrap?.classList.toggle('d-none', isClient);
            invoiceWrap?.classList.toggle('d-none', !isClient);
            billWrap?.classList.toggle('d-none', isClient);
            if (dateLabel) dateLabel.textContent = isClient ? 'Invoice date' : 'Bill date';
            if (customerHidden) customerHidden.required = isClient;
            if (vendorHidden) vendorHidden.required = !isClient;
        }

        form.querySelectorAll('input[name="entity_type"]').forEach(function (radio) {
            radio.addEventListener('change', function () {
                setEntityUi(this.value);
            });
        });
        setEntityUi(entityType());

        function initVendorPicker() {
            const picker = form.querySelector('[data-vendor-picker]');
            if (!picker || picker.dataset.initialized) return;
            picker.dataset.initialized = '1';
            const hidden = picker.querySelector('[data-field="vendor_id"]');
            const label = picker.querySelector('.billing-unit-picker__label');
            const list = picker.querySelector('.billing-vendor-picker__list');
            const search = picker.querySelector('.billing-unit-picker__search');

            function render(filter) {
                const q = (filter || '').toLowerCase();
                const rows = vendors.filter(v => !q || `${v.name} ${v.city || ''}`.toLowerCase().includes(q));
                list.innerHTML = rows.map(v => `
                    <li class="billing-unit-picker__option" role="option" data-id="${v.id}" tabindex="0">
                        <span>${v.name}${v.city ? ' - ' + v.city : ''}</span>
                    </li>
                `).join('') || '<li class="text-muted small px-2 py-2">No vendors found</li>';
            }

            function select(id) {
                const v = vendors.find(x => String(x.id) === String(id));
                if (hidden) hidden.value = v ? String(v.id) : '';
                if (label) {
                    label.textContent = v ? `${v.name}${v.city ? ' - ' + v.city : ''}` : 'Select Vendor';
                    label.classList.toggle('text-muted', !v);
                }
                picker.querySelector('.billing-unit-picker__dropdown')?.classList.add('d-none');
                hidden?.dispatchEvent(new CustomEvent('billing-vendor-changed', { bubbles: true }));
            }

            picker.querySelector('.billing-unit-picker__trigger')?.addEventListener('click', function (e) {
                e.preventDefault();
                picker.querySelector('.billing-unit-picker__dropdown')?.classList.toggle('d-none');
                render('');
            });
            search?.addEventListener('input', e => render(e.target.value));
            list?.addEventListener('click', e => {
                const opt = e.target.closest('.billing-unit-picker__option');
                if (opt?.dataset.id) select(opt.dataset.id);
            });
            if (hidden?.value) select(hidden.value);
        }
        initVendorPicker();

        async function loadInvoices(customerId, keepSelection) {
            if (!invoiceSelect || !invoicesUrl || !customerId) {
                if (invoiceSelect) invoiceSelect.innerHTML = '<option value="">Select invoice</option>';
                return;
            }
            const response = await fetch(invoicesUrl + '?customer_id=' + encodeURIComponent(customerId), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            const invoices = await response.json();
            const selected = keepSelection ? (invoiceSelect.value || initialInvoiceId) : '';
            invoiceSelect.innerHTML = '<option value="">Select invoice</option>';
            invoices.forEach(function (inv) {
                const opt = document.createElement('option');
                opt.value = String(inv.id);
                opt.textContent = inv.invoice_number;
                opt.dataset.docDate = inv.invoice_date || '';
                if (String(inv.id) === String(selected)) opt.selected = true;
                invoiceSelect.appendChild(opt);
            });
            syncDocDate(invoiceSelect);
        }

        async function loadBills(vendorId, keepSelection) {
            if (!billSelect || !billsUrl || !vendorId) {
                if (billSelect) billSelect.innerHTML = '<option value="">Select bill</option>';
                return;
            }
            const response = await fetch(billsUrl + '?vendor_id=' + encodeURIComponent(vendorId), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            const bills = await response.json();
            const selected = keepSelection ? (billSelect.value || initialBillId) : '';
            billSelect.innerHTML = '<option value="">Select bill</option>';
            bills.forEach(function (bill) {
                const opt = document.createElement('option');
                opt.value = String(bill.id);
                opt.textContent = bill.bill_number;
                opt.dataset.docDate = bill.bill_date || '';
                if (String(opt.value) === String(selected)) opt.selected = true;
                billSelect.appendChild(opt);
            });
            syncDocDate(billSelect);
        }

        function syncDocDate(selectEl) {
            if (!selectEl || !docDateInput) return;
            const opt = selectEl.options[selectEl.selectedIndex];
            const date = opt?.dataset?.docDate;
            if (date) docDateInput.value = date;
        }

        invoiceSelect?.addEventListener('change', () => syncDocDate(invoiceSelect));
        billSelect?.addEventListener('change', () => syncDocDate(billSelect));

        if (customerHidden) {
            const onClient = () => loadInvoices(customerHidden.value, false);
            customerHidden.addEventListener('billing-customer-changed', onClient);
            customerHidden.addEventListener('change', onClient);
            if (customerHidden.value && entityType() === 'client') loadInvoices(customerHidden.value, true);
        }
        if (vendorHidden) {
            const onVendor = () => loadBills(vendorHidden.value, false);
            vendorHidden.addEventListener('billing-vendor-changed', onVendor);
            vendorHidden.addEventListener('change', onVendor);
            if (vendorHidden.value && entityType() === 'vendor') loadBills(vendorHidden.value, true);
        }

        document.dispatchEvent(new CustomEvent('billing-invoice-form-ready'));
    });
</script>
@endpush