@extends('layouts.portal')

@php
    $isEdit = $document->exists;
    $quickPaymentMode = old(
        'quick_payment_mode',
        $document->quick_payment_method_id !== null
            ? 'method'
            : ($document->quick_paid_by_person_id !== null ? 'employee' : ($isEdit ? null : 'method')),
    );
@endphp

@section('title', $isEdit ? __('Edit supplier invoice') : __('New supplier invoice'))

@push('styles')
    @include('accounting.journal._styles')
    <style>
        .inv-band { margin-top: .5rem; padding: .4rem .8rem; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; border-left: 5px solid; border-radius: 4px; }
        .band-header { background: #e3f0ff; border-color: #2f7de1; color: #15509c; }
        .band-lines { background: #fff4de; border-color: #f0a020; color: #8a5a00; }
        .band-payment { background: #ecfdf3; border-color: #16a34a; color: #166534; }
        .inv-lines td { vertical-align: middle; }
        .inv-lines .form-control, .inv-lines .form-select { min-width: 90px; }
        .inv-bulk, .quick-pay-box { background: #f8fafc; border: 1px dashed #b9c6d6; border-radius: 6px; }
        .quick-pay-fields[hidden] { display: none !important; }
    </style>
@endpush

@section('content')
<div class="portal-page">
    @include('partials.portal-header')

    <main class="module-main">
        <div class="container-fluid py-4">
            <header class="mb-3">
                <h1 class="h3 mb-0">{{ $isEdit ? __('Edit supplier invoice') : __('New supplier invoice') }} @if($isEdit)<small class="text-muted">{{ $document->document_number }}</small>@endif</h1>
                <p class="text-muted mb-0">{{ __('Save the draft now, then post it when it is ready to become a true invoice.') }}</p>
            </header>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ $isEdit ? route('purchases.invoices.update', $document) : route('purchases.invoices.store') }}" class="card shadow-sm" id="invoice-form">
                @csrf
                @if($isEdit)
                    @method('PUT')
                @endif

                <div class="card-body row g-3">
                    <div class="col-12 inv-band band-header">{{ __('Invoice header') }}</div>
                    <div class="col-12 col-md-5">
                        <label for="person_id" class="form-label">{{ __('Supplier') }}</label>
                        <select id="person_id" name="person_id" class="form-select @error('person_id') is-invalid @enderror" required>
                            <option value="">—</option>
                            @foreach($suppliers as $supplier)
                                <option value="{{ $supplier->id }}" @selected((int) old('person_id', $document->person_id) === (int) $supplier->id)>{{ $supplier->first_name }} {{ $supplier->last_name }}@if($supplier->supplier_number) ({{ $supplier->supplier_number }})@endif</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 col-md-2">
                        <label for="document_date" class="form-label">{{ __('Invoice date') }}</label>
                        <input type="date" id="document_date" name="document_date" class="form-control @error('document_date') is-invalid @enderror" value="{{ old('document_date', $document->document_date?->format('Y-m-d')) }}" required>
                    </div>
                    <div class="col-6 col-md-2">
                        <label for="payment_term_id" class="form-label">{{ __('Payment term') }}</label>
                        <select id="payment_term_id" name="payment_term_id" class="form-select @error('payment_term_id') is-invalid @enderror">
                            <option value="">—</option>
                            @foreach($terms as $term)
                                <option value="{{ $term->id }}" data-days="{{ $term->days }}" @selected((int) old('payment_term_id', $document->payment_term_id) === $term->id)>{{ $term->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 col-md-3">
                        <label for="due_date" class="form-label">{{ __('Due date') }}</label>
                        <input type="date" id="due_date" name="due_date" class="form-control @error('due_date') is-invalid @enderror" value="{{ old('due_date', $document->due_date?->format('Y-m-d')) }}">
                    </div>
                    <div class="col-12 col-md-4">
                        <label for="reference" class="form-label">{{ __("Supplier's invoice number") }}</label>
                        <input type="text" id="reference" name="reference" class="form-control @error('reference') is-invalid @enderror" value="{{ old('reference', $document->reference) }}" maxlength="60">
                    </div>
                    <div class="col-12 col-md-4">
                        <label for="warehouse_id" class="form-label">{{ __('Warehouse for stock items') }}</label>
                        <select id="warehouse_id" name="warehouse_id" class="form-select @error('warehouse_id') is-invalid @enderror">
                            <option value="">—</option>
                            @foreach($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}" @selected((int) old('warehouse_id', $document->warehouse_id) === (int) $warehouse->id)>{{ $warehouse->code }} — {{ $warehouse->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-4">
                        <label for="project_id" class="form-label">{{ __('Project (whole invoice)') }}</label>
                        <div class="input-group">
                            <select id="project_id" name="project_id" class="form-select @error('project_id') is-invalid @enderror">
                                <option value="">—</option>
                                @foreach($projects as $project)
                                    <option value="{{ $project->id }}" @selected((int) old('project_id', $document->project_id) === (int) $project->id)>{{ $project->code }} — {{ $project->name }}</option>
                                @endforeach
                            </select>
                            <button type="button" class="btn btn-outline-primary" id="apply-project">{{ __('Apply to all lines') }}</button>
                        </div>
                    </div>
                    <div class="col-12">
                        <label for="notes" class="form-label">{{ __('Notes') }}</label>
                        <input type="text" id="notes" name="notes" class="form-control" value="{{ old('notes', $document->notes) }}" maxlength="2000">
                    </div>

                    <div class="col-12 inv-band band-payment">{{ __('Immediate payment (optional)') }}</div>
                    <div class="col-12 quick-pay-box p-3">
                        <div class="form-check form-switch mb-3">
                            <input type="checkbox" class="form-check-input" id="quick-payment-toggle" role="switch" @checked($quickPaymentMode !== null)>
                            <label for="quick-payment-toggle" class="form-check-label">{{ __('Record a straightforward payment when this invoice is posted') }}</label>
                        </div>

                        <div id="quick-payment-fields" class="quick-pay-fields row g-3" @if($quickPaymentMode === null) hidden @endif>
                            <div class="col-12 form-text">{{ __('An immediate payment always covers the full invoice total.') }}</div>
                            <div class="col-12 col-md-3">
                                <label for="quick_payment_mode" class="form-label">{{ __('Paid by') }}</label>
                                <select id="quick_payment_mode" name="quick_payment_mode" class="form-select @error('quick_payment_mode') is-invalid @enderror">
                                    <option value="">—</option>
                                    <option value="method" @selected($quickPaymentMode === 'method')>{{ __('The company directly') }}</option>
                                    <option value="employee" @selected($quickPaymentMode === 'employee')>{{ __('An employee personally') }}</option>
                                </select>
                            </div>
                            <div class="col-12 col-md-6 method-only" @if($quickPaymentMode !== 'method') hidden @endif>
                                <label for="quick_payment_method_id" class="form-label">{{ __('Payment method') }}</label>
                                <select id="quick_payment_method_id" name="quick_payment_method_id" class="form-select @error('quick_payment_method_id') is-invalid @enderror" @disabled($quickPaymentMode !== 'method')>
                                    <option value="">—</option>
                                    @foreach($paymentMethods as $method)
                                        <option value="{{ $method->id }}" @selected((int) old('quick_payment_method_id', $document->quick_payment_method_id) === (int) $method->id)>{{ $method->name }}</option>
                                    @endforeach
                                </select>
                                <div class="form-text">{{ __('Use this for cash, card or bank transfer paid by the company itself.') }}</div>
                            </div>
                            <div class="col-12 col-md-6 employee-only" @if($quickPaymentMode !== 'employee') hidden @endif>
                                <label for="quick_paid_by_person_id" class="form-label">{{ __('Employee who paid personally') }}</label>
                                <select id="quick_paid_by_person_id" name="quick_paid_by_person_id" class="form-select @error('quick_paid_by_person_id') is-invalid @enderror" @disabled($quickPaymentMode !== 'employee')>
                                    <option value="">—</option>
                                    @foreach($employees as $employee)
                                        <option value="{{ $employee->id }}" @selected((int) old('quick_paid_by_person_id', $document->quick_paid_by_person_id) === (int) $employee->id)>{{ $employee->first_name }} {{ $employee->last_name }} ({{ $employee->employee_number }})</option>
                                    @endforeach
                                </select>
                                <div class="form-text">{{ __('This settles the supplier and records a liability to reimburse the employee later.') }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 inv-band band-lines">{{ __('Lines') }}</div>
                    @php
                        $showAllAccounts = auth()->user()?->can('use-all-purchase-accounts')
                            && ($concepts->isEmpty()
                                || (bool) old('show_all_accounts')
                                || collect($initialLines)->contains(fn (array $line): bool => ($line['line_type'] ?? null) === 'account'
                                    && blank($line['purchase_concept_id'] ?? null)
                                    && filled($line['account_id'] ?? null)));
                    @endphp
                    <div class="col-12 inv-bulk p-2">
                        <div class="row g-2 align-items-center">
                            <div class="col-12 col-md-auto fw-semibold">{{ __('Set all concept lines to:') }}</div>
                            <div class="col-12 col-md-5">
                                <select id="bulk-concept" class="form-select form-select-sm">
                                    <option value="">—</option>
                                    @include('invoicing.supplier-invoices._concept-options')
                                </select>
                                <select id="bulk-account" class="form-select form-select-sm" hidden>
                                    <option value="">—</option>
                                    @foreach($accounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->code }} — {{ $account->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 col-md-auto">
                                <button type="button" class="btn btn-sm btn-outline-primary" id="apply-account">{{ __('Apply to concept lines') }}</button>
                            </div>
                            @can('use-all-purchase-accounts')
                                <div class="col-12 col-md-auto">
                                    <div class="form-check form-switch mb-0">
                                        <input type="checkbox" class="form-check-input" id="show-all-accounts" name="show_all_accounts" value="1" role="switch" @checked($showAllAccounts)>
                                        <label for="show-all-accounts" class="form-check-label small">{{ __('Show all accounts') }}</label>
                                    </div>
                                </div>
                            @endcan
                            <div class="col-12 col-md text-muted small">{{ __('Item lines resolve their linked accounts from the item first, then from the category tree.') }}</div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="alert alert-warning py-2" id="inventory-missing-data-warning" role="status" aria-live="polite" hidden>
                            <strong>{{ __('Important inventory information is missing.') }}</strong>
                            <ul class="mb-0" id="inventory-missing-data-list"></ul>
                            <div class="small">{{ __('These details are recommended but will not prevent saving the invoice.') }}</div>
                        </div>
                        <div class="je-grid-wrap">
                            <table class="je-table inv-lines">
                                <thead>
                                    <tr>
                                        <th class="row-number">#</th>
                                        <th style="min-width: 110px">{{ __('Line type') }}</th>
                                        <th style="min-width: 260px">{{ __('Item / account') }}</th>
                                        <th style="min-width: 200px">{{ __('Description') }}</th>
                                        <th style="width: 100px">{{ __('Quantity') }}</th>
                                        <th>{{ __('Unit') }}</th>
                                        <th style="width: 120px">{{ __('Unit price') }}</th>
                                        <th style="width: 90px">{{ __('Discount %') }}</th>
                                        <th style="min-width: 170px">{{ __('Project') }}</th>
                                        <th style="min-width: 150px">{{ __('Shelf / location') }}</th>
                                        <th style="min-width: 190px">{{ __('Lot / expiry') }}</th>
                                        <th class="num">{{ __('Total') }}</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="lines-body"></tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="11" class="num">{{ __('Total') }}</th>
                                        <th class="num" id="grand-total">0.00</th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="d-flex gap-2 mt-2">
                            <button type="button" class="btn btn-sm btn-outline-primary" id="add-item-line">+ {{ __('Item line') }}</button>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="add-account-line">+ {{ __('Concept line') }}</button>
                        </div>
                    </div>
                </div>

                <div class="card-footer d-flex gap-2">
                    <button type="submit" class="btn btn-primary">{{ __('Save draft') }}</button>
                    <a href="{{ $isEdit ? route('purchases.invoices.show', $document) : route('purchases.invoices.index') }}" class="btn btn-outline-secondary">{{ __('Cancel') }}</a>
                </div>
            </form>
        </div>

        <template id="line-template">
            <tr class="inv-line">
                <td class="row-number"></td>
                <td>
                    <select class="form-select form-select-sm" name="lines[__i__][line_type]" data-f="line_type">
                        <option value="item">{{ __('Item') }}</option>
                        <option value="account">{{ __('Concept') }}</option>
                    </select>
                </td>
                <td>
                    <select class="form-select form-select-sm" name="lines[__i__][item_id]" data-f="item_id">
                        <option value="">—</option>
                        @foreach($items as $item)
                            <option value="{{ $item->id }}" data-unit="{{ $item->unit_code }}" data-name="{{ $item->name }}" data-item-type="{{ $item->item_type }}" data-tracking="{{ $item->tracking }}" data-requires-expiry="{{ (int) $item->requires_expiry }}">{{ $item->sku }} — {{ $item->name }}</option>
                        @endforeach
                    </select>
                    <select class="form-select form-select-sm" name="lines[__i__][purchase_concept_id]" data-f="purchase_concept_id" hidden disabled>
                        <option value="">{{ __('Choose a concept') }}</option>
                        @include('invoicing.supplier-invoices._concept-options')
                    </select>
                    <select class="form-select form-select-sm" name="lines[__i__][account_id]" data-f="account_id" hidden disabled>
                        <option value="">—</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}">{{ $account->code }} — {{ $account->name }}</option>
                        @endforeach
                    </select>
                </td>
                <td><input type="text" class="form-control form-control-sm" name="lines[__i__][description]" data-f="description" maxlength="255"></td>
                <td><input type="number" class="form-control form-control-sm text-end" name="lines[__i__][quantity]" data-f="quantity" step="0.000001" min="0.000001" value="1" required></td>
                <td data-f="unit" class="text-muted small"></td>
                <td><input type="number" class="form-control form-control-sm text-end" name="lines[__i__][unit_price]" data-f="unit_price" step="0.0001" min="0" value="0" required></td>
                <td><input type="number" class="form-control form-control-sm text-end" name="lines[__i__][discount_pct]" data-f="discount_pct" step="0.01" min="0" max="100" value="0"></td>
                <td>
                    <select class="form-select form-select-sm" name="lines[__i__][project_id]" data-f="project_id">
                        <option value="">—</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}">{{ $project->code }} — {{ $project->name }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <select class="form-select form-select-sm" name="lines[__i__][location_id]" data-f="location_id">
                        <option value="">—</option>
                        @foreach($locations as $location)
                            <option value="{{ $location->id }}" data-warehouse="{{ $location->warehouse_id }}">{{ $location->code }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm mb-1" name="lines[__i__][lot_number]" data-f="lot_number" maxlength="60" placeholder="{{ __('Lot number') }}" hidden disabled>
                    <input type="date" class="form-control form-control-sm" name="lines[__i__][expires_on]" data-f="expires_on" aria-label="{{ __('Expiration date') }}" hidden disabled>
                </td>
                <td class="num" data-f="line_total">0.00</td>
                <td><button type="button" class="btn btn-sm btn-outline-danger" data-remove title="{{ __('Remove line') }}">&times;</button></td>
            </tr>
        </template>

        <script>
            (function () {
                const body = document.getElementById('lines-body');
                const template = document.getElementById('line-template');
                const headerProject = document.getElementById('project_id');
                const headerWarehouse = document.getElementById('warehouse_id');
                const initialLines = @json($initialLines);
                const quickToggle = document.getElementById('quick-payment-toggle');
                const quickFields = document.getElementById('quick-payment-fields');
                const quickMode = document.getElementById('quick_payment_mode');
                const quickMethod = document.getElementById('quick_payment_method_id');
                const quickEmployee = document.getElementById('quick_paid_by_person_id');
                const inventoryWarning = document.getElementById('inventory-missing-data-warning');
                const inventoryWarningList = document.getElementById('inventory-missing-data-list');
                const showAllAccounts = document.getElementById('show-all-accounts');
                const bulkConcept = document.getElementById('bulk-concept');
                const bulkAccount = document.getElementById('bulk-account');
                let index = 0;

                const field = (row, name) => row.querySelector('[data-f="' + name + '"]');

                function syncQuickPaymentMode() {
                    const enabled = quickToggle.checked;
                    quickFields.hidden = !enabled;

                    if (!enabled) {
                        quickMode.value = '';
                    } else if (quickMode.value === '') {
                        quickMode.value = 'method';
                    }

                    const methodMode = enabled && quickMode.value === 'method';
                    const employeeMode = enabled && quickMode.value === 'employee';

                    document.querySelectorAll('.method-only').forEach((element) => {
                        element.hidden = !methodMode;
                    });
                    document.querySelectorAll('.employee-only').forEach((element) => {
                        element.hidden = !employeeMode;
                    });

                    quickMethod.disabled = !methodMode;
                    quickEmployee.disabled = !employeeMode;

                    if (!methodMode) {
                        quickMethod.value = '';
                    }

                    if (!employeeMode) {
                        quickEmployee.value = '';
                    }
                }

                function syncType(row) {
                    const isItem = field(row, 'line_type').value === 'item';
                    const showAll = isShowingAllAccounts();
                    const item = field(row, 'item_id');
                    const account = field(row, 'account_id');
                    const concept = field(row, 'purchase_concept_id');
                    const location = field(row, 'location_id');
                    const selected = item.options[item.selectedIndex];
                    const selectedConcept = concept.selectedOptions[0];
                    const isStockable = isItem && selected?.dataset.itemType === 'stockable';
                    const isLotTracked = isStockable && selected.dataset.tracking === 'lot';
                    item.hidden = !isItem;
                    item.disabled = !isItem;
                    concept.hidden = isItem || showAll;
                    concept.disabled = isItem || showAll;
                    account.hidden = isItem || !showAll;
                    account.disabled = isItem || !showAll;
                    location.hidden = !isStockable;
                    location.disabled = !isStockable || !headerWarehouse.value;
                    field(row, 'lot_number').hidden = !isLotTracked;
                    field(row, 'lot_number').disabled = !isLotTracked;
                    field(row, 'lot_number').required = isLotTracked;
                    field(row, 'expires_on').hidden = !isLotTracked;
                    field(row, 'expires_on').disabled = !isLotTracked;
                    field(row, 'expires_on').required = false;
                    field(row, 'unit').textContent = isItem && selected ? (selected.dataset.unit || '') : '';
                    field(row, 'description').placeholder = isItem
                        ? (selected && selected.dataset.name ? selected.dataset.name : '')
                        : (!showAll && selectedConcept && selectedConcept.value ? selectedConcept.textContent.trim() : '');
                }

                function isShowingAllAccounts() {
                    return showAllAccounts ? showAllAccounts.checked : false;
                }

                function conceptForAccount(accountId) {
                    if (!accountId) {
                        return '';
                    }

                    const match = Array.from(bulkConcept.options).find((option) => option.dataset.account === String(accountId));

                    return match ? match.value : '';
                }

                function syncAccountMode() {
                    const showAll = isShowingAllAccounts();
                    bulkConcept.hidden = showAll;
                    bulkAccount.hidden = !showAll;

                    body.querySelectorAll('.inv-line').forEach((row) => {
                        if (field(row, 'line_type').value === 'account') {
                            const concept = field(row, 'purchase_concept_id');
                            const account = field(row, 'account_id');

                            if (showAll && concept.value) {
                                account.value = concept.selectedOptions[0].dataset.account || '';
                            } else if (!showAll && !concept.value) {
                                concept.value = conceptForAccount(account.value);
                            }
                        }

                        syncType(row);
                    });
                }

                function syncLocations() {
                    body.querySelectorAll('.inv-line').forEach((row) => {
                        const location = field(row, 'location_id');
                        const item = field(row, 'item_id');
                        const selectedItem = item.selectedOptions[0];
                        const isStockable = field(row, 'line_type').value === 'item' && selectedItem?.dataset.itemType === 'stockable';
                        const isLotTracked = isStockable && selectedItem.dataset.tracking === 'lot';

                        Array.from(location.options).slice(1).forEach((option) => {
                            option.disabled = !headerWarehouse.value || option.dataset.warehouse !== headerWarehouse.value;
                        });

                        location.hidden = !isStockable;
                        location.disabled = !isStockable || !headerWarehouse.value;
                        field(row, 'lot_number').hidden = !isLotTracked;
                        field(row, 'lot_number').disabled = !isLotTracked;
                        field(row, 'lot_number').required = isLotTracked;
                        field(row, 'expires_on').hidden = !isLotTracked;
                        field(row, 'expires_on').disabled = !isLotTracked;
                        field(row, 'expires_on').required = false;

                        if (location.selectedOptions[0]?.disabled) {
                            location.value = '';
                        }
                    });
                    syncInventoryWarnings();
                }

                function syncInventoryWarnings() {
                    const messages = [];
                    const stockRows = Array.from(body.querySelectorAll('.inv-line')).filter((row) => {
                        const item = field(row, 'item_id').selectedOptions[0];

                        return field(row, 'line_type').value === 'item' && item?.dataset.itemType === 'stockable';
                    });

                    if (stockRows.length > 0 && !headerWarehouse.value) {
                        messages.push(@js(__('No warehouse selected for stock items.')));
                    }

                    if (stockRows.some((row) => !field(row, 'location_id').value)) {
                        messages.push(@js(__('Shelf or location is missing for one or more stock items.')));
                    }

                    if (stockRows.some((row) => {
                        const item = field(row, 'item_id').selectedOptions[0];

                        return item.dataset.tracking === 'lot'
                            && item.dataset.requiresExpiry === '1'
                            && !field(row, 'expires_on').value;
                    })) {
                        messages.push(@js(__('Expiration date is missing for one or more tracked items.')));
                    }

                    inventoryWarningList.replaceChildren();
                    messages.forEach((message) => {
                        const item = document.createElement('li');
                        item.textContent = message;
                        inventoryWarningList.append(item);
                    });
                    inventoryWarning.hidden = messages.length === 0;
                }

                function recalc() {
                    let total = 0;
                    body.querySelectorAll('.inv-line').forEach((row, position) => {
                        row.querySelector('.row-number').textContent = position + 1;
                        const qty = parseFloat(field(row, 'quantity').value) || 0;
                        const price = parseFloat(field(row, 'unit_price').value) || 0;
                        const discount = parseFloat(field(row, 'discount_pct').value) || 0;
                        const lineTotal = qty * price * (1 - discount / 100);
                        field(row, 'line_total').textContent = lineTotal.toFixed(2);
                        total += lineTotal;
                    });

                    document.getElementById('grand-total').textContent = total.toFixed(2);
                }

                function addLine(data) {
                    body.insertAdjacentHTML('beforeend', template.innerHTML.replaceAll('__i__', index++));
                    const row = body.lastElementChild;
                    const values = Object.assign({ line_type: 'item' }, data || {});

                    if (!data || !('project_id' in data)) {
                        values.project_id = headerProject.value;
                    }

                    Object.keys(values).forEach((name) => {
                        const input = field(row, name);
                        if (input && values[name] !== null && values[name] !== undefined) {
                            input.value = values[name];
                        }
                    });

                    syncType(row);
                    syncLocations();
                    recalc();

                    return row;
                }

                body.addEventListener('change', (event) => {
                    const row = event.target.closest('.inv-line');
                    if (row && ['line_type', 'item_id', 'purchase_concept_id'].includes(event.target.dataset.f)) {
                        syncType(row);
                        syncLocations();
                    } else if (row && ['location_id', 'expires_on'].includes(event.target.dataset.f)) {
                        syncInventoryWarnings();
                    }
                    if (event.target.id === 'warehouse_id') {
                        syncLocations();
                    }
                    recalc();
                });
                headerWarehouse.addEventListener('change', syncLocations);
                body.addEventListener('input', (event) => {
                    recalc();

                    if (['location_id', 'expires_on'].includes(event.target.dataset.f)) {
                        syncInventoryWarnings();
                    }
                });
                body.addEventListener('click', (event) => {
                    const remove = event.target.closest('[data-remove]');
                    if (remove) {
                        remove.closest('.inv-line').remove();
                        recalc();
                    }
                });

                document.getElementById('add-item-line').addEventListener('click', () => addLine({ line_type: 'item' }));
                document.getElementById('add-account-line').addEventListener('click', () => addLine({ line_type: 'account' }));

                document.getElementById('apply-project').addEventListener('click', () => {
                    body.querySelectorAll('.inv-line').forEach((row) => { field(row, 'project_id').value = headerProject.value; });
                });

                document.getElementById('apply-account').addEventListener('click', () => {
                    const showAll = isShowingAllAccounts();
                    const name = showAll ? 'account_id' : 'purchase_concept_id';
                    const value = (showAll ? bulkAccount : bulkConcept).value;
                    body.querySelectorAll('.inv-line').forEach((row) => {
                        if (field(row, 'line_type').value === 'account') {
                            field(row, name).value = value;
                            syncType(row);
                        }
                    });
                });

                if (showAllAccounts) {
                    showAllAccounts.addEventListener('change', syncAccountMode);
                }

                const documentDate = document.getElementById('document_date');
                const term = document.getElementById('payment_term_id');
                const dueDate = document.getElementById('due_date');

                function suggestDueDate() {
                    const selectedTerm = term.options[term.selectedIndex];
                    if (!selectedTerm || selectedTerm.dataset.days === undefined || !documentDate.value || dueDate.value !== '') {
                        return;
                    }

                    const due = new Date(documentDate.value + 'T00:00:00Z');
                    due.setUTCDate(due.getUTCDate() + parseInt(selectedTerm.dataset.days, 10));
                    dueDate.value = due.toISOString().slice(0, 10);
                }

                quickToggle.addEventListener('change', () => {
                    syncQuickPaymentMode();
                });
                quickMode.addEventListener('change', syncQuickPaymentMode);
                term.addEventListener('change', suggestDueDate);
                documentDate.addEventListener('change', suggestDueDate);

                (initialLines.length ? initialLines : [{ line_type: 'item' }]).forEach(addLine);
                syncAccountMode();
                syncInventoryWarnings();
                syncQuickPaymentMode();
            })();
        </script>
    </main>
</div>
@endsection