@extends('admin.admin_dashboard')
@section('admin')

@php
    use App\Support\PlanningPermissions;

    $isEdit = $requisition->exists;
    $action = $isEdit ? route('planning.requisitions.update', $requisition) : route('planning.requisitions.store');
    $existingLines = old('lines', $requisition->exists
        ? $requisition->lines->map(fn ($l) => [
            'budget_item_id' => $l->budget_item_id,
            'quantity_requested' => $l->quantity_requested,
            'amount_requested' => $l->amount_requested,
            'attachment' => $l->attachment,
            'attachment_name' => $l->attachmentBasename(),
        ])->toArray()
        : []);
@endphp

<div class="page-content">
    <x-chm.layout.page :title="$isEdit ? 'Edit requisition' : 'New funds requisition'" icon="bx bx-receipt">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('planning.requisitions.index')">Requisitions</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">{{ $isEdit ? $requisition->reference : 'Create' }}</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <div class="chm-req-steps" id="req-steps">
            <div class="chm-req-step is-active" data-step="1">1. Workplan & purpose</div>
            <div class="chm-req-step" data-step="2">2. Budget lines & quotations</div>
            <div class="chm-req-step" data-step="3">3. Review & submit</div>
        </div>

        @if($errors->any())
            <div class="alert alert-danger border-0 shadow-sm mb-4">
                <strong>Could not save the requisition:</strong>
                <ul class="mb-0 mt-2 small">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
            </div>
        @endif

        <form method="post" action="{{ $action }}" id="requisition-form" enctype="multipart/form-data" data-autosave-url="{{ $isEdit ? route('planning.requisitions.autosave.update', $requisition) : route('planning.requisitions.autosave') }}">
            @csrf
            @if($isEdit) @method('PUT') @endif
            <input type="hidden" name="form_action" id="form_action" value="draft">

            <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                @if($requisition->isDraft())
                    <span class="badge bg-secondary">Draft — auto-saves while you work</span>
                @endif
                <span class="text-muted small ms-auto" id="autosave-status" aria-live="polite"></span>
            </div>

            <div class="row g-4">
                <div class="col-lg-8">
                    {{-- Step 1 --}}
                    <div class="req-panel" data-panel="1">
                        <x-chm.card title="Workplan & purpose">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Workplan *</label>
                                    <select name="workplan_id" id="workplan_id" class="form-select chm-select" required>
                                        <option value="">— Select workplan —</option>
                                        @foreach($workplans as $wp)
                                            <option value="{{ $wp->id }}" data-dept="{{ $wp->department->name ?? '' }}" @selected(old('workplan_id', $workplanId ?? '') == $wp->id)>
                                                FY {{ $wp->financial_year }} — {{ $wp->title }} ({{ $wp->department->name ?? '' }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @if($workplans->isEmpty())
                                        <div class="form-text text-warning">
                                            No approved workplans are assigned to you yet. Ask your department planner to assign you to activities on the workplan.
                                        </div>
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Requisition date</label>
                                    <input type="date" name="requisition_date" class="form-control" value="{{ old('requisition_date', optional($requisition->requisition_date)->format('Y-m-d') ?? now()->format('Y-m-d')) }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Justification / purpose *</label>
                                    <textarea name="justification" id="justification" class="form-control" rows="5" required placeholder="Explain what these funds will be used for…">{{ old('justification', $requisition->justification) }}</textarea>
                                </div>
                            </div>
                            <div class="mt-3 d-flex justify-content-between flex-wrap gap-2">
                                <button type="button" class="btn btn-outline-secondary btn-save-draft">Save draft</button>
                                <button type="button" class="btn btn-primary btn-next" data-next="2">Continue to budget lines</button>
                            </div>
                        </x-chm.card>
                    </div>

                    {{-- Step 2 --}}
                    <div class="req-panel d-none" data-panel="2">
                        <x-chm.card title="Budget lines & quotations">
                            <p class="text-muted small mb-3">
                                Select budget items, enter amounts carefully, and attach a PDF quotation for each line.
                            </p>

                            <div class="row g-2 mb-3">
                                <div class="col-md-6">
                                    <input type="search" id="budget-search" class="form-control" placeholder="Search items, activities, KRAs…">
                                </div>
                                <div class="col-md-6 text-md-end">
                                    <span class="text-muted small" id="budget-count">{{ count($budgetItemsJson) }} items available</span>
                                </div>
                            </div>

                            @if(empty($workplanId))
                                <div class="alert alert-info" id="workplan-pick-alert">Select a workplan in step 1 to load budget items.</div>
                            @endif

                            <div id="budget-empty-alert" class="alert alert-warning @if(empty($budgetEmptyMessage)) d-none @endif">
                                {{ $budgetEmptyMessage ?? '' }}
                            </div>

                            <div id="budget-picker" class="row g-2 mb-4" style="max-height:280px;overflow-y:auto"></div>

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Selected lines</h6>
                                <span class="chm-req-lines-count badge bg-light text-dark" id="lines-count">0 lines</span>
                            </div>

                            <div id="lines-container" class="chm-req-lines-stack"></div>
                            <p class="text-muted small mb-0" id="lines-empty">Click budget items above to add lines.</p>

                            <div class="chm-req-total-bar chm-req-total-bar--live mt-4">
                                <div class="chm-req-total-bar__label">Total requested</div>
                                <div class="chm-req-total-bar__value">UGX <span id="live-total">0.00</span></div>
                            </div>

                            <div class="mt-3 d-flex justify-content-between flex-wrap gap-2">
                                <button type="button" class="btn btn-light btn-prev" data-prev="1">Back</button>
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-outline-secondary btn-save-draft">Save draft</button>
                                    <button type="button" class="btn btn-primary btn-next" data-next="3">Review</button>
                                </div>
                            </div>
                        </x-chm.card>
                    </div>

                    {{-- Step 3 --}}
                    <div class="req-panel d-none" data-panel="3">
                        <x-chm.card title="Review before submit">
                            <div id="review-summary" class="mb-3"></div>
                            <div class="chm-req-total-bar mb-3">
                                Total requested: UGX <span id="review-total">0.00</span>
                            </div>

                            @if(auth()->user()->isSuperAdmin() && ($notifyCandidates ?? collect())->isNotEmpty())
                                <div class="chm-req-notify-box mb-3">
                                    <label class="form-label fw-semibold">Notify on submit <span class="badge bg-light text-dark">Super Admin</span></label>
                                    <p class="small text-muted mb-2">Choose who receives the first approval email. Leave blank to use the normal route (line manager → HOD → senior).</p>
                                    <select name="notify_user_ids[]" class="form-select chm-select" multiple size="5">
                                        @foreach($notifyCandidates as $candidate)
                                            <option value="{{ $candidate->id }}" @selected(collect(old('notify_user_ids', []))->contains($candidate->id))>
                                                {{ $candidate->name }} — {{ $candidate->email }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @else
                                <div class="alert alert-light border small mb-3">
                                    <strong>Approval route:</strong> Line manager → Head of department → Senior approval.
                                    Approvers are notified by email at each stage.
                                </div>
                            @endif

                            <div class="d-flex justify-content-between flex-wrap gap-2">
                                <button type="button" class="btn btn-light btn-prev" data-prev="2">Back</button>
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-outline-secondary btn-save-draft">Save draft</button>
                                    <button type="submit" class="btn btn-success btn-submit-requisition">
                                        <i class="bx bx-send"></i> Submit for approval
                                    </button>
                                </div>
                            </div>
                        </x-chm.card>
                    </div>
                </div>

                <div class="col-lg-4">
                    <x-chm.card title="Approval route">
                        <p class="text-muted small">Based on your reporting line and department.</p>
                        <div class="chm-approval-chain">
                            @foreach($approvalChain as $stage)
                                <div class="chm-approval-stage">
                                    <div class="flex-grow-1">
                                        <div class="chm-approval-stage-label">{{ $stage['label'] }}</div>
                                        @if(!empty($stage['subtitle']))
                                            <div class="small text-muted">{{ $stage['subtitle'] }}</div>
                                        @endif
                                        @forelse($stage['users'] as $approver)
                                            <div class="d-flex align-items-center gap-2 mt-1">
                                                <img src="{{ $approver->avatarUrl() }}" alt="" class="chm-org-avatar chm-org-avatar-sm">
                                                <div>
                                                    <div class="small fw-semibold">{{ $approver->name }}</div>
                                                    <div class="small text-muted">{{ $approver->email }}</div>
                                                </div>
                                            </div>
                                        @empty
                                            <div class="small text-warning">Not assigned — set up in org chart</div>
                                        @endforelse
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </x-chm.card>

                    @if($workplan ?? null)
                        <x-chm.card title="Workplan" class="mt-3">
                            <div class="small">
                                <strong>{{ $workplan->title }}</strong><br>
                                {{ $workplan->department->name ?? '' }} · FY {{ $workplan->financial_year }}
                            </div>
                        </x-chm.card>
                    @endif

                    @can('role_permissions.view')
                        <x-chm.card title="Staff access" class="mt-3">
                            <p class="small text-muted mb-2">
                                Users need these permissions under the <strong>Planning</strong> group to submit requisitions:
                            </p>
                            <ul class="small mb-2 ps-3">
                                @foreach(PlanningPermissions::requisitionStaffBundle() as $perm)
                                    <li>{{ PlanningPermissions::labelFor($perm) }}</li>
                                @endforeach
                            </ul>
                            <a href="{{ route('all.roles.permission') }}" class="btn btn-sm btn-outline-primary w-100">
                                <i class="bx bx-shield-quarter"></i> Manage role permissions
                            </a>
                        </x-chm.card>
                    @endcan
                </div>
            </div>
        </form>
    </x-chm.layout.page>
</div>

<script>
(function () {
    let budgetItems = @json($budgetItemsJson);
    const budgetUrl = @json(route('planning.requisitions.budget-items'));
    const maxQuotationMb = @json($maxQuotationMb);
    let lineIndex = 0;
    const selected = new Map();

    const fmt = n => Number(n || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });

    function parseAmount(val) {
        return parseFloat(String(val || '').replace(/,/g, '')) || 0;
    }

    function formatWhileTyping(input) {
        let val = input.value.replace(/[^\d.]/g, '');
        const parts = val.split('.');
        let intPart = parts[0].replace(/^0+(?=\d)/, '');
        intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        const decPart = parts.length > 1 ? '.' + parts[1].slice(0, 2) : '';
        input.value = intPart + decPart;
    }

    function bindAmountInput(input, card) {
        input.addEventListener('input', () => {
            formatWhileTyping(input);
            updateLineCard(card);
            updateLiveTotal();
        });
        input.addEventListener('blur', () => {
            const raw = parseAmount(input.value);
            if (raw > 0) input.value = fmt(raw);
            updateLineCard(card);
            updateLiveTotal();
        });
    }

    function updateLineCard(card) {
        const max = parseFloat(card.dataset.available || 0);
        const amount = parseAmount(card.querySelector('.line-amount')?.value || 0);
        const remaining = max - amount;
        const status = card.querySelector('.chm-req-line-status');
        const remainingEl = card.querySelector('.chm-req-line-remaining');

        if (remainingEl) {
            remainingEl.textContent = fmt(Math.max(0, remaining));
        }

        if (!status) return;

        card.classList.remove('is-over', 'is-ok');
        if (amount <= 0) {
            status.textContent = 'Enter amount';
            status.className = 'chm-req-line-status text-muted';
        } else if (amount > max + 0.01) {
            status.textContent = 'Exceeds available balance';
            status.className = 'chm-req-line-status text-danger fw-semibold';
            card.classList.add('is-over');
        } else {
            status.textContent = 'Within budget';
            status.className = 'chm-req-line-status text-success fw-semibold';
            card.classList.add('is-ok');
        }
    }

    function updateLiveTotal() {
        let total = 0;
        document.querySelectorAll('.line-amount').forEach(input => {
            total += parseAmount(input.value);
        });
        document.getElementById('live-total').textContent = fmt(total);
    }

    function updateLineFileLabel(input) {
        const label = input.closest('.chm-req-line-upload')?.querySelector('.chm-req-line-file-name');
        if (!label) return;
        const file = input.files?.[0];
        label.textContent = file ? file.name : (input.dataset.existing || 'No file chosen');
        label.classList.toggle('text-success', !!file);
    }

    function setStep(step) {
        document.querySelectorAll('.req-panel').forEach(p => p.classList.toggle('d-none', p.dataset.panel !== String(step)));
        document.querySelectorAll('.chm-req-step').forEach(s => {
            const n = Number(s.dataset.step);
            s.classList.toggle('is-active', n === step);
            s.classList.toggle('is-done', n < step);
        });
    }

    function chmAlert(icon, title, text) {
        if (window.ChmNotify) {
            return window.ChmNotify.fire({ icon: icon, title: title, text: text });
        }
        if (window.Swal) {
            return Swal.fire({ icon, title, text, confirmButtonColor: '#15803d' });
        }
        window.alert(text || title);
        return Promise.resolve();
    }

    document.querySelectorAll('.btn-next').forEach(btn => btn.addEventListener('click', async () => {
        const next = btn.dataset.next;
        if (next === '2' && !document.getElementById('workplan_id').value) {
            chmAlert('warning', 'Workplan required', 'Please select a workplan.');
            return;
        }
        if (next === '2') {
            await loadBudgetItems(document.getElementById('workplan_id').value);
        }
        if (next === '3') {
            if (selected.size === 0) {
                chmAlert('warning', 'Budget lines required', 'Add at least one budget line.');
                return;
            }
            let over = false;
            document.querySelectorAll('.chm-req-line-card').forEach(card => {
                const max = parseFloat(card.dataset.available || 0);
                const amount = parseAmount(card.querySelector('.line-amount')?.value || 0);
                if (amount > max + 0.01) over = true;
            });
            if (over) {
                chmAlert('warning', 'Over budget', 'One or more lines exceed the available budget. Adjust amounts before continuing.');
                return;
            }
            buildReview();
        }
        setStep(next);
    }));
    document.querySelectorAll('.btn-prev').forEach(btn => btn.addEventListener('click', () => setStep(btn.dataset.prev)));

    function renderPicker(items) {
        const q = (document.getElementById('budget-search').value || '').toLowerCase();
        const box = document.getElementById('budget-picker');
        box.innerHTML = '';
        const filtered = items.filter(i =>
            !q || [i.name, i.activity, i.strategy, i.kra].join(' ').toLowerCase().includes(q)
        );
        document.getElementById('budget-count').textContent = filtered.length + ' items';
        filtered.forEach(item => {
            const col = document.createElement('div');
            col.className = 'col-md-6';
            col.innerHTML = `
                <div class="chm-budget-picker-item border rounded p-2 h-100 ${selected.has(item.id) ? 'is-selected' : ''}" data-id="${item.id}">
                    <div class="fw-semibold small">${item.name}</div>
                    <div class="text-muted" style="font-size:0.75rem">${item.activity || '—'} · ${item.kra || ''}</div>
                    <div class="small mt-1">Available: <strong class="text-success">${fmt(item.available)}</strong></div>
                </div>`;
            col.querySelector('.chm-budget-picker-item').addEventListener('click', () => toggleLine(item));
            box.appendChild(col);
        });
    }

    function toggleLine(item) {
        if (selected.has(item.id)) {
            selected.delete(item.id);
        } else {
            selected.set(item.id, {
                budget_item_id: item.id,
                quantity_requested: 1,
                amount_requested: '',
                attachment: null,
                attachment_name: null,
            });
        }
        renderPicker(budgetItems);
        renderLines();
    }

    function renderLines() {
        const container = document.getElementById('lines-container');
        container.innerHTML = '';
        document.getElementById('lines-empty').classList.toggle('d-none', selected.size > 0);
        document.getElementById('lines-count').textContent = selected.size + ' line' + (selected.size === 1 ? '' : 's');
        lineIndex = 0;

        selected.forEach((line, id) => {
            const item = budgetItems.find(i => i.id === Number(id));
            if (!item) return;

            const card = document.createElement('div');
            card.className = 'chm-req-line-card';
            card.dataset.available = item.available;
            card.innerHTML = `
                <div class="chm-req-line-card__header">
                    <div>
                        <input type="hidden" name="lines[${lineIndex}][budget_item_id]" value="${id}">
                        <div class="chm-req-line-card__title">${item.name}</div>
                        <div class="chm-req-line-card__meta">${item.activity || '—'} · ${item.kra || ''}</div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-danger line-remove" title="Remove line">&times;</button>
                </div>
                <div class="chm-req-line-card__balance">
                    <div class="chm-req-line-card__balance-label">Available balance</div>
                    <div class="chm-req-line-card__balance-value">UGX ${fmt(item.available)}</div>
                </div>
                <div class="row g-3 align-items-end">
                    <div class="col-sm-3">
                        <label class="form-label small mb-1">Quantity</label>
                        <input type="number" step="0.01" min="0" name="lines[${lineIndex}][quantity_requested]" class="form-control" value="${line.quantity_requested || 1}">
                    </div>
                    <div class="col-sm-5">
                        <label class="form-label small mb-1">Amount requested (UGX) *</label>
                        <input type="text" inputmode="decimal" name="lines[${lineIndex}][amount_requested]" class="form-control form-control-lg line-amount chm-req-amount-input chm-req-amount-input--large" value="${line.amount_requested ? fmt(parseAmount(line.amount_requested)) : ''}" placeholder="0.00" required autocomplete="off">
                    </div>
                    <div class="col-sm-4">
                        <div class="chm-req-line-card__remaining">
                            <span class="small text-muted">Remaining after request</span>
                            <strong class="chm-req-line-remaining d-block">${fmt(item.available)}</strong>
                        </div>
                    </div>
                </div>
                <div class="chm-req-line-status text-muted small mt-2">Enter amount</div>
                <div class="chm-req-line-upload mt-3">
                    <label class="form-label small mb-1">Quotation PDF <span class="text-muted">(per line)</span></label>
                    <div class="chm-req-upload-zone chm-req-upload-zone--compact">
                        <input type="file" name="lines[${lineIndex}][quotation]" class="form-control form-control-sm line-quotation" accept="application/pdf,.pdf" data-existing="${line.attachment_name || ''}">
                        <div class="form-text">PDF only, max ${maxQuotationMb} MB</div>
                        <div class="chm-req-line-file-name small mt-1 ${line.attachment_name ? 'text-success' : 'text-muted'}">${line.attachment_name || 'No file chosen'}</div>
                        ${line.attachment ? `<div class="small mt-1"><i class="bx bx-link"></i> Current file on record</div>` : ''}
                    </div>
                </div>`;

            card.querySelector('.line-remove').addEventListener('click', () => {
                selected.delete(Number(id));
                renderPicker(budgetItems);
                renderLines();
                updateLiveTotal();
            });

            bindAmountInput(card.querySelector('.line-amount'), card);
            const fileInput = card.querySelector('.line-quotation');
            fileInput.addEventListener('change', () => updateLineFileLabel(fileInput));
            updateLineCard(card);
            container.appendChild(card);
            lineIndex++;
        });

        updateLiveTotal();
    }

    function buildReview() {
        const wp = document.getElementById('workplan_id');
        const wpText = wp.options[wp.selectedIndex]?.text || '—';
        let total = 0;
        let rows = '';
        document.querySelectorAll('.chm-req-line-card').forEach(card => {
            const name = card.querySelector('.chm-req-line-card__title')?.textContent || '';
            const amt = parseAmount(card.querySelector('.line-amount')?.value || 0);
            const fileInput = card.querySelector('.line-quotation');
            const hasFile = (fileInput?.files?.length > 0) || fileInput?.dataset.existing;
            total += amt;
            rows += `<tr>
                <td>${name}</td>
                <td class="text-end font-monospace">${fmt(amt)}</td>
                <td class="text-center">${hasFile ? '<span class="badge bg-light text-success border">PDF attached</span>' : '<span class="badge bg-light text-muted border">No PDF</span>'}</td>
            </tr>`;
        });
        document.getElementById('review-summary').innerHTML = `
            <p><strong>Workplan:</strong> ${wpText}</p>
            <p><strong>Purpose:</strong></p>
            <p class="text-muted">${(document.getElementById('justification').value || '').replace(/\n/g, '<br>')}</p>
            <table class="table table-sm chm-req-review-table">
                <thead><tr><th>Line</th><th class="text-end">Amount (UGX)</th><th class="text-center">Quotation</th></tr></thead>
                <tbody>${rows}</tbody>
            </table>`;
        document.getElementById('review-total').textContent = fmt(total);
    }

    document.getElementById('budget-search')?.addEventListener('input', () => renderPicker(budgetItems));

    async function loadBudgetItems(workplanId) {
        const emptyAlert = document.getElementById('budget-empty-alert');
        const pickAlert = document.getElementById('workplan-pick-alert');
        if (pickAlert) pickAlert.classList.add('d-none');

        if (!workplanId) {
            budgetItems = [];
            selected.clear();
            renderPicker(budgetItems);
            renderLines();
            if (emptyAlert) {
                emptyAlert.classList.add('d-none');
            }
            return;
        }

        try {
            const res = await fetch(budgetUrl + '?workplan_id=' + encodeURIComponent(workplanId), {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                credentials: 'same-origin',
            });

            let data = {};
            const text = await res.text();
            if (text) {
                try {
                    data = JSON.parse(text);
                } catch (error) {
                    throw new Error('Could not load budget items. Refresh the page and try again.');
                }
            }

            if (!res.ok) {
                const message = data.message || data.error || ('Could not load budget items (HTTP ' + res.status + ').');
                throw new Error(message);
            }

            budgetItems = data.items || [];
            selected.clear();

            if (emptyAlert) {
                if (data.empty_message && budgetItems.length === 0) {
                    emptyAlert.textContent = data.empty_message;
                    emptyAlert.classList.remove('d-none');
                } else {
                    emptyAlert.classList.add('d-none');
                }
            }

            renderPicker(budgetItems);
            renderLines();
        } catch (error) {
            budgetItems = [];
            selected.clear();
            renderPicker(budgetItems);
            renderLines();
            if (emptyAlert) {
                emptyAlert.textContent = error.message || 'Could not load budget items.';
                emptyAlert.classList.remove('d-none');
            }
        }
    }

    const workplanSelect = document.getElementById('workplan_id');
    workplanSelect?.addEventListener('change', function () {
        loadBudgetItems(this.value);
    });

    if (window.jQuery && workplanSelect) {
        window.jQuery(workplanSelect).on('change select2:select', function () {
            loadBudgetItems(this.value);
        });
    }

    @foreach($existingLines as $line)
        @if(!empty($line['budget_item_id']))
            selected.set({{ (int) $line['budget_item_id'] }}, @json($line));
        @endif
    @endforeach

    document.getElementById('requisition-form')?.addEventListener('submit', function () {
        document.getElementById('form_action').value = 'submit';
        document.querySelectorAll('.line-amount').forEach(input => {
            input.value = String(parseAmount(input.value));
        });
    });

    document.querySelectorAll('.btn-save-draft').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('form_action').value = 'draft';
            document.getElementById('requisition-form').requestSubmit();
        });
    });

    document.querySelector('.btn-submit-requisition')?.addEventListener('click', () => {
        document.getElementById('form_action').value = 'submit';
    });

    const formEl = document.getElementById('requisition-form');
    const autosaveStatus = document.getElementById('autosave-status');
    let autosaveTimer = null;
    let autosaveBusy = false;
    let formDirty = false;

    formEl?.addEventListener('input', () => { formDirty = true; });
    formEl?.addEventListener('change', () => { formDirty = true; });

    async function runAutosave() {
        if (!formEl || autosaveBusy || !formDirty) return;
        autosaveBusy = true;
        autosaveStatus.textContent = 'Saving draft…';

        const formData = new FormData(formEl);
        formData.set('form_action', 'draft');
        formData.delete('_method');

        try {
            const res = await fetch(formEl.dataset.autosaveUrl, {
                method: 'POST',
                body: formData,
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
            });
            const data = await res.json();
            if (data.ok) {
                formDirty = false;
                if (data.update_url && formEl.method.toLowerCase() === 'post' && !formEl.querySelector('input[name="_method"]')) {
                    formEl.action = data.update_url;
                    formEl.dataset.autosaveUrl = data.autosave_url;
                    const method = document.createElement('input');
                    method.type = 'hidden';
                    method.name = '_method';
                    method.value = 'PUT';
                    formEl.appendChild(method);
                } else if (data.autosave_url) {
                    formEl.dataset.autosaveUrl = data.autosave_url;
                }
                autosaveStatus.textContent = 'Draft saved · ' + new Date(data.saved_at).toLocaleTimeString();
            } else {
                autosaveStatus.textContent = 'Auto-save skipped';
            }
        } catch (e) {
            autosaveStatus.textContent = 'Auto-save failed';
        } finally {
            autosaveBusy = false;
        }
    }

    autosaveTimer = setInterval(runAutosave, 30000);

    renderPicker(budgetItems);
    renderLines();

    if (workplanSelect?.value && budgetItems.length === 0) {
        loadBudgetItems(workplanSelect.value);
    }

    if (window.ChmForms?.init) {
        window.ChmForms.init();
    }
})();
</script>

@endsection