@extends('garage.layouts.app')

@section('title', 'Edit sale '.$sale->sale_number)

@push('styles')
@include('shared.garage-purchase-order-ui-styles')
@include('shared.garage-split-form-ui-styles')
<style>
.gs-vehicle-card {
    border-radius: 12px;
    border: 1px solid #c5f0e8;
    background: #fff;
    box-shadow: 0 4px 18px rgba(13, 148, 136, 0.08);
    padding: 0.5rem 0.75rem;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.68rem;
}
.gs-vehicle-card .gs-vc-customer {
    font-weight: 700;
    color: var(--bs-primary);
    font-size: 0.7rem;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.gs-vehicle-card .gs-vc-reg {
    font-family: ui-monospace, monospace;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #0f172a;
    font-size: 0.74rem;
}
.gs-vehicle-card .gs-vc-meta { color: #64748b; margin-top: 0.25rem; line-height: 1.35; }
.gs-vehicle-card .gs-vc-pill {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.12rem 0.4rem;
    border-radius: 6px;
    background: #ecfdf5;
    color: #047857;
    margin-right: 0.35rem;
}
</style>
@endpush

@section('navbar_lead')
@include('garage.partials.split-form-navbar-lead', [
    'icon' => 'bi-pencil-square',
    'title' => 'Edit sale',
    'subtitle' => 'Draft or held sales only. Completed sales should be deleted and recreated to keep stock accurate.',
])
@endsection

@section('content')
<div class="gpo-page gs-split-form-page gs-vf-page gs-sale-page gs-ro-page container-fluid px-2 px-lg-3 py-2">

    <form method="POST" action="{{ route('garage.sales.update', $sale->id) }}" id="gsForm" novalidate>
        @csrf
        @method('PUT')

        <input type="hidden" name="sale_number" value="{{ $sale->sale_number }}">
        <input type="hidden" name="garage_package_ids" id="garagePackageIds" value="{{ old('garage_package_ids', $sale->garage_package_ids ?? '') }}">
        <input type="hidden" name="package_amount_total" id="garagePackageAmountTotal" value="{{ old('package_amount_total', $sale->package_amount_total ?? 0) }}">

        <div class="gpo-split">
            <div class="gpo-panel gpo-panel-inv gs-ro-quick-panel">
                <div class="gpo-panel-hd teal gpo-inv-panel-hd">
                    <span class="gpo-inv-hd-title"><i class="bi bi-lightning-charge"></i> Quick add</span>
                </div>
                <div class="gpo-panel-bd">
                    <ul class="nav nav-pills mb-2 gs-quick-tabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="ro-tab-parts" data-bs-toggle="pill" data-bs-target="#ro-pane-parts" type="button" role="tab"><i class="bi bi-box-seam me-1"></i>Parts</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="ro-tab-services" data-bs-toggle="pill" data-bs-target="#ro-pane-services" type="button" role="tab"><i class="bi bi-wrench-adjustable me-1"></i>Services</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="ro-tab-packages" data-bs-toggle="pill" data-bs-target="#ro-pane-packages" type="button" role="tab"><i class="bi bi-box2-heart me-1"></i>Packages</button>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="ro-pane-parts" role="tabpanel" aria-labelledby="ro-tab-parts">
                            <div class="gpo-inv-toolbar">
                                <input type="search" class="gpo-search" id="gsInvSearch" placeholder="Search SKU, product name…" autocomplete="off">
                                <div class="gpo-inv-filter-line">
                                    <span id="gsInvFilterLabel">Loading…</span>
                                    <span class="badge rounded-pill" id="gsInvCount">0</span>
                                </div>
                            </div>
                            <div class="gpo-inv-scroll" id="gsInvList"></div>
                        </div>

                        <div class="tab-pane fade" id="ro-pane-services" role="tabpanel" aria-labelledby="ro-tab-services">
                            <div class="gpo-inv-toolbar">
                                <input type="search" class="gpo-search" id="roSvcSearch" placeholder="Search service name…" autocomplete="off">
                                <div class="gpo-inv-filter-line">
                                    <span id="roSvcFilterLabel"><strong>Services</strong> · Press Enter to add first match</span>
                                    <span class="badge rounded-pill" id="roSvcCountQuick">0</span>
                                </div>
                            </div>
                            <div class="gpo-inv-scroll" id="roSvcList"></div>
                        </div>

                        <div class="tab-pane fade" id="ro-pane-packages" role="tabpanel" aria-labelledby="ro-tab-packages">
                            <div class="gpo-inv-toolbar">
                                <input type="search" class="gpo-search" id="gsPkgSearch" placeholder="Search package name / code…" autocomplete="off">
                                <div class="gpo-inv-filter-line">
                                    <span id="gsPkgFilterLabel" class="text-muted">Type to search packages.</span>
                                    <span class="badge rounded-pill bg-light text-dark" id="gsPkgCount">0</span>
                                </div>
                            </div>
                            <div class="gpo-inv-scroll" id="gsPkgList"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="gpo-panel gs-ro-detail-panel">
                @include('garage.partials.split-form-detail-header', [
                    'icon' => 'bi-receipt-cutoff',
                    'title' => 'Sale detail',
                    'numberLabel' => 'Sale no.',
                    'numberValue' => $sale->sale_number,
                    'dateName' => 'sale_date',
                    'dateValue' => old('sale_date', $sale->sale_date),
                    'closeUrl' => route('garage.sales.show', $sale->id),
                    'saveLabel' => 'Save changes',
                    'showCustomerVehicleQuickAdd' => true,
                ])
                <div class="gpo-panel-bd gs-ro-detail-bd">
                    <div class="gs-ro-detail-fields">
                    @include('garage.sales.partials.detail-panel-fields', [
                        'sale' => $sale,
                        'customers' => $customers,
                        'warehouseCtx' => $warehouseCtx ?? [],
                        'warehouseFieldPrefix' => 'saleWhEdit',
                        'showRepairOrderPick' => false,
                    ])

                    </div>{{-- gs-ro-detail-fields --}}

                    @include('garage.sales.partials.lines-panels', ['serviceTimeColumn' => true])

                    <div class="gs-ro-detail-footer">
                        <div class="mb-2 d-none" id="pkgSelectedCard">
                            <div class="p-2 rounded-3" style="border:1px solid rgba(var(--bs-primary-rgb), .18);background:#fff;">
                                <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap">
                                    <div>
                                        <div class="small text-muted fw-bold">PACKAGE</div>
                                        <div class="fw-bold small" id="pkgSelectedName">—</div>
                                        <div class="small text-muted">Fixed: <span id="pkgSelectedAmount">PKR 0.00</span></div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-danger" id="btnClearPackage">Clear</button>
                                </div>
                            </div>
                        </div>
                        <div class="gpo-sum gs-ro-sum-h" id="gsSumBox">
                            <div class="gpo-sum-row"><span>Subtotal</span><span id="gsSumSub">PKR 0.00</span></div>
                            <div class="gpo-sum-row"><span>Tax</span><span id="gsSumTax">PKR 0.00</span></div>
                            <div class="gpo-sum-row"><span>Sale discount</span><span id="gsSumDisc">PKR 0.00</span></div>
                            <div class="gpo-sum-row"><span>Freight</span><span id="gsSumShip">PKR 0.00</span></div>
                            <div class="gpo-sum-row total"><span>Total</span><span id="gsSumTot">PKR 0.00</span></div>
                        </div>
                    </div>

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

@push('scripts')
@include('garage.partials.customer-vehicle-link-script')
@include('garage.partials.customer-vehicle-quick-add-script')
@include('garage.partials.vehicle-history-modal-script')
@include('garage.partials.ledger-label-helpers')
@include('garage.partials.meter-reading-script')
@include('garage.partials.parts-catalog-remote-script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    function getPart(id) {
        return window.GaragePartsCatalog.getSync(id);
    }
    const VEHICLES = @json($vehiclesForJs);
    const CUSTOMERS_BY_ID = @json($customersById ?? []);
    const INITIAL = @json($initialItemsJson);
    const INITIAL_SERVICES = @json($initialServicesJson ?? []);
    const OLD_VEHICLE_ID = @json(old('garage_vehicle_id', $sale->garage_vehicle_id));
    const SVC_CATS = @json($garageServiceCategories ?? []);
    const GARAGE_SERVICES = @json($garageServicesForJs ?? []);
    const SALE_HDR_DISC_TYPE = @json($sale->discount_type ?? 'fixed');
    // For legacy sales, discount_amount might be stored as applied PKR.
    // For new sales, discount_amount stores user input (percent/fixed).
    const SALE_HDR_DISC_APPLIED = @json((float) ($sale->discount_applied_amount ?? $sale->discount_amount ?? 0));
    const OLD_HDR_DISC_INPUT = @json(old('discount_amount', null));

    let lines = (Array.isArray(INITIAL) ? INITIAL : []).map(function (r) {
        return {
            item_type: 'part',
            part_id: r.part_id != null ? parseInt(r.part_id, 10) : null,
            product_name: r.product_name || r.description || '',
            description: r.description || '',
            quantity: parseInt(r.quantity, 10) || 1,
            unit_price: parseFloat(r.unit_price) || 0,
            discount_amount: parseFloat(r.discount_amount) || 0,
            discount_type: r.discount_type || 'percentage',
            tax_rate: parseFloat(r.tax_rate) || 0,
            inventory_code_snapshot: r.inventory_code_snapshot || null
        };
    }).filter(function (x) { return x.part_id != null; });

    let services = (Array.isArray(INITIAL_SERVICES) ? INITIAL_SERVICES : []).map(function (S) {
        return {
            garage_service_id: S.garage_service_id,
            garage_employee_id: null,
            hours: Number(S.hours) || 1,
            rate: Number(S.rate) || 0,
            notes: S.notes || '',
            title: S.title || null
        };
    }).filter(function (x) { return x.garage_service_id; });

    var hidPkgEl = document.getElementById('garagePackageIds');
    let packageIds = String((hidPkgEl && hidPkgEl.value) ? hidPkgEl.value : '')
        .split(',')
        .map(function (x) { return Number(String(x).trim()) || 0; })
        .filter(function (x) { return x > 0; });
    var hidPkgAmtEl = document.getElementById('garagePackageAmountTotal');
    let packageAmountTotal = Math.max(0, Number((hidPkgAmtEl && hidPkgAmtEl.value) ? hidPkgAmtEl.value : 0) || 0);
    let lastPkgFiltered = [];

    function inferLegacyHeaderDiscountPercent() {
        if (OLD_HDR_DISC_INPUT !== null) return; // user already typed something (validation failed etc.)
        if (SALE_HDR_DISC_TYPE !== 'percentage') return;

        // If discount input already looks like a percent (0..100), keep it.
        const inp = document.getElementById('gsHdrDiscVal');
        const curVal = inp ? (Number(inp.value) || 0) : 0;
        if (curVal > 0 && curVal <= 100) return;

        let partsSub = 0;
        let svcsSub = 0;
        lines.forEach(function (L) { partsSub += lineCalc(L).net; });
        services.forEach(function (S) { svcsSub += serviceCalc(S).total; });
        const sub = partsSub + svcsSub;

        const applied = Number(SALE_HDR_DISC_APPLIED) || 0;
        const pct = sub > 0 ? (applied / sub) * 100 : 0;
        const pctClamped = Math.max(0, Math.min(100, pct));

        if (inp) inp.value = String(Math.round(pctClamped * 100) / 100);
    }

    function money(n) {
        const x = Number(n) || 0;
        return 'PKR ' + x.toLocaleString('en-PK', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
    function moneyCompact(n) {
        const x = Number(n) || 0;
        const has = Math.round(x * 100) % 100 !== 0;
        return x.toLocaleString('en-PK', has ? { minimumFractionDigits: 2, maximumFractionDigits: 2 } : { maximumFractionDigits: 0 });
    }
    function escapeHtml(s) {
        if (!s) return '';
        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\"/g,'&quot;');
    }

    const custSel = document.getElementById('gsCustomer');
    const vehSel = document.getElementById('gsVehicle');

    function lineCalc(L) {
        const qty = Math.max(1, parseInt(L.quantity, 10) || 1);
        const unit = Math.max(0, parseFloat(L.unit_price) || 0);
        const gross = qty * unit;
        let disc = Math.max(0, parseFloat(L.discount_amount) || 0);
        if (L.discount_type === 'percentage') disc = gross * (disc / 100);
        const net = Math.max(0, gross - disc);
        const tr = Math.max(0, parseFloat(L.tax_rate) || 0);
        const tax = net * (tr / 100);
        return { net, tax, total: net + tax };
    }

    function serviceCalc(S) {
        const qty = Math.max(0, parseFloat(S.hours) || 0);
        const rate = Math.max(0, parseFloat(S.rate) || 0);
        return { total: qty * rate };
    }
    function availableQtyForLine(partId, lineIdx) {
        const curQty = Math.max(1, parseInt(lines[lineIdx] && lines[lineIdx].quantity, 10) || 1);
        const p = getPart(partId);
        if (!p) return Math.max(curQty, 99999);
        const base = parseInt(p.stock_quantity, 10) || 0;
        let used = 0;
        lines.forEach(function (L, i) { if (Number(L.part_id) === Number(partId) && i !== lineIdx) used += (parseInt(L.quantity, 10) || 0); });
        return Math.max(1, base - used + curQty);
    }

    function maxQtyForLine(partId, lineIdx) {
        return availableQtyForLine(partId, lineIdx);
    }

    function normalizeLineQuantities() {
        lines.forEach(function (L, i) {
            const cap = availableQtyForLine(L.part_id, i);
            const q = Math.max(1, parseInt(L.quantity, 10) || 1);
            if (q > cap) L.quantity = cap;
        });
    }

    function validateLinesStockForSubmit() {
        var ok = true;
        lines.forEach(function (L, i) {
            const cap = availableQtyForLine(L.part_id, i);
            const q = Math.max(1, parseInt(L.quantity, 10) || 1);
            if (q > cap) {
                alert((L.product_name || 'Part') + ': only ' + cap + ' unit(s) in stock (you entered ' + q + ').');
                ok = false;
            }
        });
        return ok;
    }

    function stockBadge(p) {
        const q = p.stock_quantity;
        if (q <= 0) return { cls: 'gpo-inv-stk-none', txt: 'Out of stock' };
        if (q < 5) return { cls: 'gpo-inv-stk-low', txt: 'Low · ' + q };
        return { cls: 'gpo-inv-stk-ok', txt: q + ' in stock' };
    }
    let lastInvFiltered = [];
    function renderInventoryRows(filtered) {
        const el = document.getElementById('gsInvList');
        const fl = document.getElementById('gsInvFilterLabel');
        const q = (document.getElementById('gsInvSearch').value || '').trim();
        lastInvFiltered = filtered;
        document.getElementById('gsInvCount').textContent = String(filtered.length);
        if (fl) fl.innerHTML = q ? 'Showing <strong>' + filtered.length + '</strong> matches' : '<strong>' + filtered.length + '</strong> items';
        if (!filtered.length) {
            el.innerHTML = '<div class="gpo-inv-empty">' + (q ? 'No matches.' : 'Search parts above.') + '</div>';
            return;
        }
        el.innerHTML = filtered.map(function (p) {
            const code = p.inventory_code || p.code || '—';
            const nm = escapeHtml(p.name);
            let used = 0;
            lines.forEach(function (L) { if (Number(L.part_id) === Number(p.id)) used += (parseInt(L.quantity, 10) || 0); });
            const avail = Math.max(0, (parseInt(p.stock_quantity, 10) || 0) - used);
            const sb = stockBadge({ stock_quantity: avail });
            const meta = '<span class="gpo-inv-stk-inline ' + sb.cls + '">' + escapeHtml(sb.txt) + '</span>' +
                ' · Price ' + (Number(p.selling_price) || 0).toLocaleString('en-PK') + ' · Tax ' + (Number(p.tax_rate) || 0) + '%';
            const disabled = avail <= 0 ? ' disabled' : '';
            return '<div class="gpo-inv-row" data-pid="' + p.id + '">' +
                '<div class="gpo-inv-row-detail"><div class="gpo-inv-row-top">' +
                '<span class="gpo-inv-sku">' + escapeHtml(String(code)) + '</span>' +
                '<span class="gpo-inv-name">' + nm + '</span></div>' +
                '<div class="gpo-inv-inline-meta">' + meta + '</div></div>' +
                '<div class="gpo-inv-row-actions">' +
                '<input type="number" min="1" value="1" class="gpo-inv-qty" data-pid="' + p.id + '" title="' + avail + ' available in stock"' + disabled + '>' +
                '<button type="button" class="gpo-inv-add-btn" data-pid="' + p.id + '"' + disabled + '><span class="gpo-inv-add-lbl"><i class="bi bi-plus-lg"></i> Add</span></button>' +
                '</div></div>';
        }).join('');
    }

    function renderInventory() {
        const q = (document.getElementById('gsInvSearch').value || '').trim();
        const el = document.getElementById('gsInvList');
        const fl = document.getElementById('gsInvFilterLabel');
        if (q.length > 0 && q.length < 2) {
            if (fl) fl.innerHTML = 'Type at least <strong>2 characters</strong> to search parts.';
            el.innerHTML = '<div class="gpo-inv-empty">Keep typing to search the catalog…</div>';
            return;
        }
        window.GaragePartsCatalog.debouncedSearch(q, renderInventoryRows);
    }

    function addPart(partId) {
        const pid = parseInt(partId, 10);
        if (Number.isNaN(pid)) return;
        window.GaragePartsCatalog.ensure(pid).then(function (p) {
        if (!p || p.stock_quantity < 1) return;
        const qtyEl = document.querySelector('#gsInvList .gpo-inv-qty[data-pid="' + pid + '"]');
        let want = Math.max(1, parseInt(qtyEl && qtyEl.value, 10) || 1);
        const idx = lines.findIndex(function (L) { return Number(L.part_id) === pid; });
        if (idx >= 0) {
            const cap = maxQtyForLine(pid, idx);
            lines[idx].quantity = Math.min(lines[idx].quantity + want, cap);
        } else {
            want = Math.min(want, p.stock_quantity);
            lines.push({
                item_type: 'part',
                part_id: pid,
                product_name: p.name,
                description: '',
                quantity: want,
                unit_price: Number(p.selling_price) || 0,
                discount_amount: 0,
                discount_type: 'percentage',
                tax_rate: Number(p.tax_rate) || 0,
                inventory_code_snapshot: p.inventory_code || p.code || null
            });
        }
        renderLines();
        renderInventory();
        });
    }

    async function fetchPackages(q) {
        try {
            const res = await fetch("{{ url('/garage/api/packages') }}" + '?q=' + encodeURIComponent(String(q || '')), { headers: { 'Accept': 'application/json' } });
            const j = await res.json();
            if (!j || !j.ok) return;
            const list = j.data || [];
            lastPkgFiltered = list;
            const count = document.getElementById('gsPkgCount');
            if (count) count.textContent = String(list.length);
            const fl = document.getElementById('gsPkgFilterLabel');
            if (fl) fl.innerHTML = q ? ('Showing <strong>' + list.length + '</strong> match(es)') : 'All active packages';
            const el = document.getElementById('gsPkgList');
            if (!el) return;
            if (!list.length) {
                el.innerHTML = '<div class="gpo-inv-empty">No packages found.</div>';
                return;
            }
            el.innerHTML = list.map(function (p) {
                const code = p.code ? ('<span class="gpo-inv-sku" title="' + escapeHtml(p.code) + '">' + escapeHtml(p.code) + '</span>') : '';
                const nm = escapeHtml(p.name || 'Package');
                const meta = 'Offer ' + moneyCompact(p.package_price || 0);
                return '<div class="gpo-inv-row" data-pkgid="' + p.id + '">' +
                    '<div class="gpo-inv-row-detail">' +
                        '<div class="gpo-inv-row-top">' + code +
                            '<span class="gpo-inv-name" title="' + nm + '">' + nm + '</span>' +
                        '</div>' +
                        '<div class="gpo-inv-inline-meta">' + meta + '</div>' +
                    '</div>' +
                    '<div class="gpo-inv-row-actions">' +
                        '<button type="button" class="gpo-inv-add-btn" data-pkgid="' + p.id + '" title="Add package"><span class="gpo-inv-add-lbl"><i class="bi bi-plus-lg"></i> Add</span></button>' +
                    '</div>' +
                '</div>';
            }).join('');
        } catch (e) {
            // ignore
        }
    }

    async function addPackage(pkgId) {
        if (!pkgId) return;
        try {
            const pkgNumId = Number(pkgId) || 0;
            if (!pkgNumId) return;
            if (packageIds.indexOf(pkgNumId) !== -1) return;

            const res = await fetch("{{ url('/garage/api/packages') }}/" + encodeURIComponent(String(pkgId)), { headers: { 'Accept': 'application/json' }});
            const j = await res.json();
            if (!j || !j.ok || !j.data) return;
            const pkg = j.data.package || {};
            const items = j.data.items || [];

            items.forEach(function (it) {
                const t = String(it.item_type || '');
                const qty = Math.max(0.01, parseFloat(it.quantity) || 1);
                if (t === 'part' && it.garage_part_id) {
                    addPart(it.garage_part_id);
                    const last = lines.find(function (L) { return Number(L.part_id) === Number(it.garage_part_id); });
                    if (last) {
                        last.quantity = Math.max(1, (parseInt(last.quantity, 10) || 1) + Math.round(qty) - 1);
                        last.unit_price = 0;
                        last.discount_amount = 0;
                        last.discount_type = 'fixed';
                        last.tax_rate = 0;
                        last.source = 'package_included';
                    }
                }
                if (t === 'service' && it.garage_service_id) {
                    const svc = (GARAGE_SERVICES || []).find(function (x) { return String(x.id) === String(it.garage_service_id); });
                    if (!svc) return;
                    services.push({
                        garage_service_id: svc.id,
                        hours: qty,
                        rate: 0,
                        estimated_minutes: (svc.required_minutes !== null && svc.required_minutes !== undefined) ? (parseInt(svc.required_minutes, 10) || 0) : 0,
                        source: 'package_included',
                        title: null
                    });
                }
            });

            packageIds.push(pkgNumId);
            packageAmountTotal = Math.max(0, Number(packageAmountTotal) || 0) + Math.max(0, parseFloat(pkg.package_price) || 0);
            const hidPkg = document.getElementById('garagePackageIds');
            const hidAmt = document.getElementById('garagePackageAmountTotal');
            if (hidPkg) hidPkg.value = packageIds.join(',');
            if (hidAmt) hidAmt.value = packageAmountTotal ? String(packageAmountTotal.toFixed(2)) : '';

            const card = document.getElementById('pkgSelectedCard');
            if (card) card.classList.remove('d-none');
            const nmEl = document.getElementById('pkgSelectedName');
            const amtEl = document.getElementById('pkgSelectedAmount');
            if (nmEl) nmEl.textContent = 'Selected: ' + packageIds.length + ' package(s)';
            if (amtEl) amtEl.textContent = money(packageAmountTotal);

            renderLines();
            renderServices();
            refreshTotals();
        } catch (e) {
            // ignore
        }
    }

    var SALE_SVC_COLS = 6;
    var invRenderTimer = null;
    function scheduleRenderInventory() {
        clearTimeout(invRenderTimer);
        invRenderTimer = setTimeout(renderInventory, 120);
    }

    function updateLineFromInput(inp) {
        const tr = inp.closest('tr');
        if (!tr) return;
        const idx = parseInt(tr.getAttribute('data-idx'), 10);
        if (Number.isNaN(idx) || !lines[idx]) return;
        const L = lines[idx];
        const f = inp.getAttribute('data-f');
        const v = inp.value;
        let refreshInv = false;
        if (f === 'quantity') {
            const cap = maxQtyForLine(L.part_id, idx);
            const q = Math.min(cap, Math.max(1, parseInt(v, 10) || 1));
            if (L.quantity !== q) refreshInv = true;
            L.quantity = q;
            if (String(inp.value) !== String(q)) inp.value = String(q);
        } else if (f) {
            L[f] = Math.max(0, parseFloat(v) || 0);
        }
        const totalCell = tr.querySelector('.js-line-total');
        if (totalCell) {
            totalCell.textContent = String(L.source || '') === 'package_included' ? '—' : money(lineCalc(L).total);
        }
        refreshTotals();
        if (refreshInv) scheduleRenderInventory();
    }

    var SALE_TABLE_SCROLL_MIN_ROWS = 4;
    function syncRoTableScroll(scrollWrapId, bodyId) {
        var wrap = document.getElementById(scrollWrapId);
        var body = document.getElementById(bodyId);
        if (!wrap || !body) return;
        var empty = body.querySelector('.gs-ro-empty-cell');
        var rows = body.querySelectorAll('tr').length;
        wrap.classList.toggle('is-scrollable', !empty && rows >= SALE_TABLE_SCROLL_MIN_ROWS);
    }
    function syncAllSaleTableScroll() {
        syncRoTableScroll('gsPartsScroll', 'gsLinesBody');
        syncRoTableScroll('gsSvcScroll', 'gsSvcBody');
    }

    function renderLines() {
        const tb = document.getElementById('gsLinesBody');
        const cartBadge = document.getElementById('gsCartCount');
        if (cartBadge) cartBadge.textContent = String(lines.length);
        if (!lines.length) {
            tb.innerHTML = '<tr><td colspan="7" class="text-center text-muted gs-ro-empty-cell">No parts yet. Add from inventory.</td></tr>';
            syncRoTableScroll('gsPartsScroll', 'gsLinesBody');
            refreshTotals();
            renderInventory();
            return;
        }
        normalizeLineQuantities();
        tb.innerHTML = lines.map(function (L, i) {
            const c = lineCalc(L);
            const meta = '<div class="small text-muted">' + escapeHtml(L.inventory_code_snapshot || '') + '</div>';
            const qmax = availableQtyForLine(L.part_id, i);
            const isInc = String(L.source || '') === 'package_included';
            const unitCell = isInc
                ? '<input type="text" class="form-control form-control-sm" value="—" readonly>'
                : '<input type="number" step="0.01" min="0" class="form-control form-control-sm js-price" data-f="unit_price" value="' + L.unit_price + '">';
            const discCell = isInc
                ? '<input type="text" class="form-control form-control-sm" value="—" readonly>'
                : '<input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm js-disc" data-f="discount_amount" value="' + L.discount_amount + '">';
            const taxCell = isInc
                ? '<input type="text" class="form-control form-control-sm" value="—" readonly>'
                : '<input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm js-tax" data-f="tax_rate" value="' + (L.tax_rate || 0) + '">';
            const totCell = isInc ? '—' : money(c.total);
            return '<tr data-idx="' + i + '">' +
                '<td><div class="fw-semibold">' + escapeHtml(L.product_name || '') + '</div>' + meta + '</td>' +
                '<td><input type="number" min="1" class="form-control form-control-sm js-qty" data-f="quantity" value="' + L.quantity + '"' + (isInc ? ' readonly' : '') + ' title="' + qmax + ' available in stock"></td>' +
                '<td>' + unitCell + '</td>' +
                '<td>' + discCell + '</td>' +
                '<td>' + taxCell + '</td>' +
                '<td class="text-end fw-semibold js-line-total">' + totCell + '</td>' +
                '<td class="text-end"><button type="button" class="btn btn-sm btn-outline-danger gpo-rm" data-i="' + i + '"><i class="bi bi-x-lg"></i></button></td></tr>';
        }).join('');

        syncRoTableScroll('gsPartsScroll', 'gsLinesBody');
        refreshTotals();
        renderInventory();
        syncSaleKindUi();
        if (meterUi && meterUi.refresh) meterUi.refresh();
    }

    function renderServices() {
        const body = document.getElementById('gsSvcBody');
        if (!body) return;
        if (!services.length) {
            body.innerHTML = '<tr><td colspan="' + SALE_SVC_COLS + '" class="text-center text-muted gs-ro-empty-cell">No services yet.</td></tr>';
        } else {
            body.innerHTML = services.map(function (S, i) {
                const svc = (GARAGE_SERVICES || []).find(function (x) { return String(x.id) === String(S.garage_service_id); });
                const nm = (svc ? svc.name : (S.title || 'Service'));
                const c = serviceCalc(S);
                const isInc = String(S.source || '') === 'package_included';
                const mins = (S.estimated_minutes !== null && S.estimated_minutes !== undefined)
                    ? (parseInt(S.estimated_minutes, 10) || 0)
                    : (svc && svc.required_minutes !== null && svc.required_minutes !== undefined ? (parseInt(svc.required_minutes, 10) || 0) : 0);
                const rateCell = isInc
                    ? '<input type="text" class="form-control form-control-sm" value="—" readonly>'
                    : '<input type="number" min="0" step="0.01" class="form-control form-control-sm js-svc-rate" value="' + (Number(S.rate) || 0) + '" readonly>';
                const timeCell = '<span class="small text-muted">' + (mins ? (escapeHtml(String(mins)) + ' min') : '—') + '</span>';
                const totalCell = isInc ? '—' : money(c.total);
                var row = '<tr data-sidx="' + i + '">' +
                    '<td><div class="fw-semibold">' + escapeHtml(nm) + '</div></td>' +
                    '<td><input type="number" min="1" step="1" class="form-control form-control-sm js-svc-hours" value="' + (Number(S.hours) || 1) + '"' + (isInc ? ' readonly' : '') + '></td>' +
                    '<td>' + rateCell + '</td>';
                if (SALE_SVC_COLS === 6) row += '<td>' + timeCell + '</td>';
                row += '<td class="text-end fw-semibold">' + totalCell + '</td>' +
                    '<td class="text-end"><button type="button" class="btn btn-sm btn-outline-danger js-svc-del"><i class="bi bi-x-lg"></i></button></td></tr>';
                return row;
            }).join('');
        }
        const badge = document.getElementById('gsSvcCount');
        if (badge) badge.textContent = String(services.length);
        syncRoTableScroll('gsSvcScroll', 'gsSvcBody');
        if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
        if (meterUi && meterUi.refresh) meterUi.refresh();
    }

    function refreshTotals() {
        let sub = 0, tax = 0;
        lines.forEach(function (L) {
            const c = lineCalc(L);
            sub += c.net; tax += c.tax;
        });
        services.forEach(function (S) {
            sub += serviceCalc(S).total;
        });
        sub += (Number(packageAmountTotal) || 0);
        const dt = document.querySelector('#gsHdrDiscType input[name="discount_type"]:checked');
        const dtype = dt ? dt.value : 'fixed';
        let hdrDisc = parseFloat(document.getElementById('gsHdrDiscVal').value) || 0;
        if (dtype === 'percentage') hdrDisc = sub * (hdrDisc / 100);
        const ship = parseFloat(document.getElementById('gsFreight').value) || 0;
        const afterDisc = Math.max(0, sub - hdrDisc);
        const grand = afterDisc + tax + ship;
        document.getElementById('gsSumSub').textContent = money(sub);
        document.getElementById('gsSumTax').textContent = money(tax);
        document.getElementById('gsSumDisc').textContent = money(hdrDisc);
        document.getElementById('gsSumShip').textContent = money(ship);
        document.getElementById('gsSumTot').textContent = money(grand);
    }

    function getSelectedCustomerName() {
        var sel = document.getElementById('gsCustomer');
        var opt = sel.options[sel.selectedIndex];
        if (!sel.value || !opt) return '';
        return opt.textContent.replace(/\s+/g, ' ').trim();
    }
    function formatFuel(ft) {
        if (!ft) return '';
        return String(ft).replace(/_/g, ' ').replace(/\b\w/g, function (c) { return c.toUpperCase(); });
    }
    function updateVehicleCard() {
        var cardRow = document.getElementById('gsVehicleCardRow');
        var kind = document.getElementById('gsSaleKind').value;
        var vid = document.getElementById('gsVehicle').value;
        if (kind !== 'customer_sale' || !vid) { if (cardRow) cardRow.classList.add('d-none'); return; }
        var v = VEHICLES.find(function (x) { return String(x.id) === String(vid); });
        if (!v) { if (cardRow) cardRow.classList.add('d-none'); return; }
        document.getElementById('gsVcCustomerName').textContent = getSelectedCustomerName() || '—';
        document.getElementById('gsVcReg').textContent = v.registration_number || '—';
        var bits = [];
        if (v.make || v.model) bits.push([v.make, v.model].filter(Boolean).join(' ').trim());
        if (v.year) bits.push('Year ' + v.year);
        if (v.color) bits.push(v.color);
        if (v.vin) bits.push('VIN ' + v.vin);
        var ft = formatFuel(v.fuel_type);
        if (ft) bits.push(ft);
        document.getElementById('gsVcMeta').textContent = bits.length ? bits.join(' · ') : '—';
        if (cardRow) cardRow.classList.remove('d-none');
    }
    var customerVehicleLink = null;
    var meterUi = null;

    function cashSaleMileageTrack() {
        var kind = document.getElementById('gsSaleKind').value;
        if (kind !== 'cash_sale') return false;
        var svcOn = svcToggle && svcWrap && svcToggle.checked && !svcWrap.classList.contains('d-none');
        return svcOn && lines.length > 0;
    }

    function needsMeterReadingVisible() {
        var vid = document.getElementById('gsVehicle').value;
        if (!vid) return false;
        var kind = document.getElementById('gsSaleKind').value;
        if (kind === 'customer_sale') return true;
        return cashSaleMileageTrack();
    }

    function syncSaleKindUi() {
        var kind = document.getElementById('gsSaleKind').value;
        var cust = document.getElementById('gsCustomer');
        var veh = document.getElementById('gsVehicle');
        var vehReq = document.getElementById('gsVehicleRequired');
        var custWrap = document.getElementById('gsCustomerWrap');
        var vehWrap = document.getElementById('gsVehicleWrap');
        var trackHint = document.getElementById('gsVehicleTrackHint');
        var trackMileage = cashSaleMileageTrack();

        if (kind === 'cash_sale' && trackMileage) {
            cust.disabled = false;
            cust.required = true;
            veh.disabled = false;
            veh.required = true;
            if (custWrap) custWrap.classList.remove('opacity-50');
            if (vehWrap) vehWrap.classList.remove('opacity-50');
            if (trackHint) trackHint.classList.remove('d-none');
            var cvHdTm = document.getElementById('grgCvHdQuickAdd');
            if (cvHdTm) cvHdTm.classList.remove('d-none');
            if (customerVehicleLink && customerVehicleLink._rebuildVehicles) {
                customerVehicleLink._rebuildVehicles(veh.value || '', cust.value || null);
            }
        } else if (kind === 'cash_sale') {
            cust.disabled = true;
            cust.required = false;
            cust.value = '';
            veh.disabled = true;
            veh.required = false;
            veh.innerHTML = '<option value="">— N/A for cash sale —</option>';
            veh.value = '';
            if (vehReq) vehReq.style.display = 'none';
            if (custWrap) custWrap.classList.add('opacity-50');
            if (vehWrap) vehWrap.classList.add('opacity-50');
            if (trackHint) trackHint.classList.add('d-none');
            document.getElementById('gsVehicleWarn').classList.add('d-none');
            var cvHd = document.getElementById('grgCvHdQuickAdd');
            if (cvHd) cvHd.classList.add('d-none');
        } else {
            cust.disabled = false;
            cust.required = true;
            veh.disabled = false;
            veh.required = false;
            if (vehReq) vehReq.style.display = 'none';
            if (custWrap) custWrap.classList.remove('opacity-50');
            if (vehWrap) vehWrap.classList.remove('opacity-50');
            if (trackHint) trackHint.classList.add('d-none');
            var cvHdOn = document.getElementById('grgCvHdQuickAdd');
            if (cvHdOn) cvHdOn.classList.remove('d-none');
            if (customerVehicleLink && customerVehicleLink._rebuildVehicles) {
                customerVehicleLink._rebuildVehicles(veh.value || '', cust.value || null);
            }
        }
        updateVehicleCard();
        if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
        if (window.jQuery && window.jQuery.fn.chosen) {
            window.jQuery(cust).trigger('chosen:updated');
            window.jQuery(veh).trigger('chosen:updated');
            window.jQuery(document.getElementById('gsSaleKind')).trigger('chosen:updated');
        }
    }

    const gsLinesBodyEl = document.getElementById('gsLinesBody');
    if (gsLinesBodyEl) {
        gsLinesBodyEl.addEventListener('input', function (e) {
            const inp = e.target.closest('[data-f]');
            if (!inp || !gsLinesBodyEl.contains(inp)) return;
            updateLineFromInput(inp);
        });
        gsLinesBodyEl.addEventListener('click', function (e) {
            const btn = e.target.closest('.gpo-rm');
            if (!btn || !gsLinesBodyEl.contains(btn)) return;
            lines.splice(parseInt(btn.getAttribute('data-i'), 10), 1);
            renderLines();
        });
    }

    document.getElementById('gsInvSearch').addEventListener('input', renderInventory);
    document.getElementById('gsInvSearch').addEventListener('keydown', function (e) {
        if (e.key !== 'Enter') return;
        const q = (e.target.value || '').trim();
        if (!q) return;
        if (!lastInvFiltered.length) return;
        e.preventDefault();
        addPart(lastInvFiltered[0].id);
        e.target.select();
        renderInventory();
    });

    document.getElementById('gsInvList').addEventListener('click', function (e) {
        var btn = e.target.closest('.gpo-inv-add-btn');
        if (!btn) return;
        e.preventDefault();
        addPart(btn.getAttribute('data-pid'));
    });

    const gsPkgSearch = document.getElementById('gsPkgSearch');
    if (gsPkgSearch) {
        let t = null;
        gsPkgSearch.addEventListener('input', function () {
            clearTimeout(t);
            t = setTimeout(function () { fetchPackages(gsPkgSearch.value || ''); }, 200);
        });
        gsPkgSearch.addEventListener('keydown', function (e) {
            if (e.key !== 'Enter') return;
            const q = (e.target.value || '').trim();
            if (!q) return;
            if (!lastPkgFiltered.length) return;
            e.preventDefault();
            addPackage(lastPkgFiltered[0].id);
            e.target.select();
        });
        fetchPackages('');
    }

    // ---- Quick add services (left tab: search + list) ----
    var lastSvcFiltered = [];
    function renderQuickServicesList() {
        var roSvcSearchEl = document.getElementById('roSvcSearch');
        var q = (roSvcSearchEl && roSvcSearchEl.value ? roSvcSearchEl.value : '').toLowerCase().trim();
        var el = document.getElementById('roSvcList');
        var cnt = document.getElementById('roSvcCountQuick');
        if (!el) return;

        var list = (GARAGE_SERVICES || []).filter(function (s) {
            if (!q) return true;
            return String(s.name || '').toLowerCase().indexOf(q) !== -1;
        });
        lastSvcFiltered = list;
        if (cnt) cnt.textContent = String(list.length);
        if (!list.length) { el.innerHTML = '<div class="gpo-inv-empty">No matches.</div>'; return; }

        el.innerHTML = list.map(function (s) {
            var nm = escapeHtml(s.name || 'Service');
            var meta = 'Unit ' + moneyCompact(s.price || 0);
            var mins = (s.required_minutes !== null && s.required_minutes !== undefined && String(s.required_minutes) !== '')
                ? (parseInt(s.required_minutes, 10) || 0)
                : 0;
            if (mins) meta += ' · ' + mins + ' min';
            return '<div class="gpo-inv-row">' +
                '<div class="gpo-inv-row-detail">' +
                    '<div class="gpo-inv-row-top">' +
                        '<span class="gpo-inv-name" title="' + nm + '">' + nm + '</span>' +
                    '</div>' +
                    '<div class="gpo-inv-inline-meta">' + meta + '</div>' +
                '</div>' +
                '<div class="gpo-inv-row-actions">' +
                    '<input type="number" min="1" step="1" value="1" class="gpo-inv-qty" data-sqty="' + s.id + '">' +
                    '<button type="button" class="gpo-inv-add-btn" data-add-svc="' + s.id + '"><span class="gpo-inv-add-lbl"><i class="bi bi-plus-lg"></i> Add</span></button>' +
                '</div>' +
            '</div>';
        }).join('');
    }

    var roSvcSearch = document.getElementById('roSvcSearch');
    if (roSvcSearch) {
        roSvcSearch.addEventListener('input', renderQuickServicesList);
        roSvcSearch.addEventListener('keydown', function (e) {
            if (e.key !== 'Enter') return;
            var q = (e.target.value || '').trim();
            if (!q) return;
            if (!lastSvcFiltered.length) return;
            e.preventDefault();
            var first = lastSvcFiltered[0];
            services.push({
                garage_service_id: Number(first.id),
                garage_employee_id: null,
                hours: 1,
                rate: Number(first.price) || 0,
                estimated_minutes: (first.required_minutes !== null && first.required_minutes !== undefined) ? (parseInt(first.required_minutes, 10) || 0) : 0,
                notes: '',
                title: null
            });
            renderServices();
            refreshTotals();
            e.target.select();
        });
        renderQuickServicesList();
    }

    const clearBtn = document.getElementById('btnClearPackage');
    if (clearBtn) clearBtn.addEventListener('click', function () {
        packageIds = [];
        packageAmountTotal = 0;
        const hidPkg = document.getElementById('garagePackageIds');
        const hidAmt = document.getElementById('garagePackageAmountTotal');
        if (hidPkg) hidPkg.value = '';
        if (hidAmt) hidAmt.value = '';
        const card = document.getElementById('pkgSelectedCard');
        if (card) card.classList.add('d-none');
        lines = (lines || []).filter(function (L) { return String(L.source || '') !== 'package_included'; });
        services = (services || []).filter(function (S) { return String(S.source || '') !== 'package_included'; });
        renderLines();
        renderServices();
        refreshTotals();
    });

    document.addEventListener('click', function (e) {
        const pkgBtn = e.target.closest('[data-pkgid]');
        if (pkgBtn) {
            const id = pkgBtn.getAttribute('data-pkgid');
            if (id) addPackage(id);
            return;
        }

        const svcBtn = e.target.closest('[data-add-svc]');
        if (svcBtn) {
            const id = svcBtn.getAttribute('data-add-svc');
            if (!id) return;
            const svc = (GARAGE_SERVICES || []).find(function (x) { return String(x.id) === String(id); });
            if (!svc) return;
            const qtyEl = document.querySelector('.gpo-inv-qty[data-sqty="' + id + '"]');
            const hours = Math.max(1, parseFloat(qtyEl && qtyEl.value ? qtyEl.value : '1') || 1);
            services.push({
                garage_service_id: Number(svc.id),
                garage_employee_id: null,
                hours: hours,
                rate: Number(svc.price) || 0,
                estimated_minutes: (svc.required_minutes !== null && svc.required_minutes !== undefined) ? (parseInt(svc.required_minutes, 10) || 0) : 0,
                notes: '',
                title: null
            });
            renderServices();
            refreshTotals();
        }
    });
    document.getElementById('gsSaleKind').addEventListener('change', syncSaleKindUi);

    // header discount listeners (update summary instantly)
    document.querySelectorAll('#gsHdrDiscType input[name="discount_type"]').forEach(function (r) {
        r.addEventListener('change', refreshTotals);
    });
    document.getElementById('gsHdrDiscVal').addEventListener('input', refreshTotals);
    document.getElementById('gsFreight').addEventListener('input', refreshTotals);

    // services UI
    const svcToggle = document.getElementById('gsSvcToggle');
    const svcWrap = document.getElementById('gsSvcWrap');
    function syncSvcCartsLayout() {
        var stack = document.querySelector('.gs-ro-carts-stack');
        if (!stack) return;
        var showSvc = svcToggle && svcWrap && svcToggle.checked && !svcWrap.classList.contains('d-none');
        stack.classList.toggle('gs-split-lines-only', !showSvc);
        syncAllSaleTableScroll();
    }
    if (svcToggle && svcWrap) {
        svcToggle.addEventListener('change', function () {
            svcWrap.classList.toggle('d-none', !svcToggle.checked);
            syncSvcCartsLayout();
            syncSaleKindUi();
            if (meterUi && meterUi.refresh) meterUi.refresh();
        });
        syncSvcCartsLayout();
    }
    // services adding is via left Quick add tab (not via this panel)
    const svcBody = document.getElementById('gsSvcBody');
    if (svcBody) {
        svcBody.addEventListener('input', function (e) {
            const tr = e.target.closest('tr'); if (!tr) return;
            const idx = parseInt(tr.getAttribute('data-sidx'), 10);
            const S = services[idx]; if (!S) return;
            if (e.target.classList.contains('js-svc-hours')) S.hours = Math.max(1, parseFloat(e.target.value) || 1);
            refreshTotals();
        });
        svcBody.addEventListener('click', function (e) {
            const del = e.target.closest('.js-svc-del');
            if (!del) return;
            const tr = del.closest('tr');
            const idx = parseInt(tr.getAttribute('data-sidx'), 10);
            services.splice(idx, 1);
            renderServices();
            refreshTotals();
        });
    }

    document.getElementById('gsForm').addEventListener('submit', function (e) {
        if (!lines.length && !services.length) { e.preventDefault(); alert('Add at least one part or service.'); return; }
        if (lines.length && !validateLinesStockForSubmit()) { e.preventDefault(); return; }
        var payload = lines.map(function (L) {
            return {
                item_type: 'part',
                part_id: L.part_id,
                product_name: L.product_name,
                description: L.description || '',
                quantity: L.quantity,
                unit_price: L.unit_price,
                discount_amount: L.discount_amount,
                discount_type: L.discount_type,
                tax_rate: L.tax_rate,
                inventory_code_snapshot: L.inventory_code_snapshot
            };
        });
        var hid = document.getElementById('gsItemsPayload');
        if (!hid) { hid = document.createElement('input'); hid.type = 'hidden'; hid.name = 'items'; hid.id = 'gsItemsPayload'; this.appendChild(hid); }
        hid.value = JSON.stringify(payload);

        var hid2 = document.getElementById('gsServicesPayload');
        if (!hid2) { hid2 = document.createElement('input'); hid2.type = 'hidden'; hid2.name = 'services'; hid2.id = 'gsServicesPayload'; this.appendChild(hid2); }
        hid2.value = JSON.stringify((services || []).map(function (S) {
            return {
                garage_service_id: S.garage_service_id,
                garage_employee_id: null,
                hours: Number(S.hours) || 0,
                rate: Number(S.rate) || 0,
                notes: S.notes || '',
                title: S.title || null
            };
        }));
    });

    if (window.jQuery && window.jQuery.fn && typeof window.jQuery.fn.chosen === 'function') {
        window.jQuery('.js-chosen-compact').not('#gsVehicle').not('#gsCustomer').chosen({ width: '100%', search_contains: true, allow_single_deselect: true });
        window.jQuery('#gsCustomer').chosen({
            width: '100%',
            search_contains: true,
            allow_single_deselect: true,
            placeholder_text_single: 'Select customer…'
        });
    }

    meterUi = window.GrgMeterReading.init({
        vehicleSelectId: 'gsVehicle',
        inputId: 'gsMeterReading',
        nextMeterInputId: 'gsNextMeterReading',
        nextDateInputId: 'gsNextServiceDate',
        hintId: 'gsMeterHint',
        hasServices: function () {
            return (services || []).some(function (s) { return Number(s.garage_service_id) > 0; });
        },
        isVisible: needsMeterReadingVisible,
        getServiceIds: function () {
            return (services || []).map(function (s) { return Number(s.garage_service_id) || 0; }).filter(function (id) { return id > 0; });
        }
    });

    function applyVehicleHistoryDoc(doc) {
        if (!doc) return;
        window.GrgMeterReading.prefillAll({
            currentInputId: 'gsMeterReading',
            nextMeterInputId: 'gsNextMeterReading',
            nextDateInputId: 'gsNextServiceDate',
            current: doc.meter_reading,
            next_meter_reading: doc.next_meter_reading,
            next_service_date: doc.next_service_date
        });
        var discR = document.querySelector('#gsHdrDiscType input[name="discount_type"][value="' + (doc.discount_type || 'fixed') + '"]');
        if (discR) discR.checked = true;
        if (document.getElementById('gsHdrDiscVal')) document.getElementById('gsHdrDiscVal').value = String(doc.discount_amount || 0);
        if (document.getElementById('gsFreight')) document.getElementById('gsFreight').value = String(doc.freight_amount || 0);
        lines = (doc.parts || []).map(function (p) {
            return {
                part_id: p.part_id,
                product_name: p.product_name || '',
                description: p.description || '',
                inventory_code_snapshot: p.inventory_code_snapshot || null,
                quantity: p.quantity || 1,
                unit_price: p.unit_price || 0,
                discount_amount: p.discount_amount || 0,
                discount_type: p.discount_type || 'percentage',
                tax_rate: p.tax_rate || 0
            };
        });
        services = (doc.services || []).map(function (s) {
            return {
                garage_service_id: s.garage_service_id,
                garage_employee_id: s.garage_employee_id || null,
                hours: Number(s.hours) || 1,
                rate: Number(s.rate) || 0,
                notes: s.notes || '',
                title: s.title || null,
                estimated_minutes: s.estimated_minutes != null ? (parseInt(s.estimated_minutes, 10) || 0) : 0
            };
        });
        if (svcToggle && svcWrap && services.length) {
            svcToggle.checked = true;
            svcWrap.classList.remove('d-none');
        }
        lines.forEach(function (L) {
            if (L.part_id) window.GaragePartsCatalog.ensure(L.part_id);
        });
        normalizeLineQuantities();
        renderLines();
        updateVehicleCard();
        if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
        if (meterUi && meterUi.refresh) meterUi.refresh();
    }

    if (window.GrgVehicleHistoryModal) {
        window.GrgVehicleHistoryModal.watch({
            vehicleSelectId: 'gsVehicle',
            onApply: applyVehicleHistoryDoc,
            skipInitialPopup: true,
            onVehicleChange: function () {
                updateVehicleCard();
                if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
                if (meterUi && meterUi.refresh) meterUi.refresh();
            }
        });
    }

    customerVehicleLink = window.GarageCustomerVehicleLink.init({
        vehicles: VEHICLES,
        customersById: CUSTOMERS_BY_ID,
        initialVehicleId: OLD_VEHICLE_ID || '',
        vehicleWarnId: 'gsVehicleWarn',
        onVehicleChange: function () {
            updateVehicleCard();
            if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
            if (meterUi && meterUi.refresh) meterUi.refresh();
        },
        isEnabled: function () {
            var kind = document.getElementById('gsSaleKind').value;
            return kind === 'customer_sale' || cashSaleMileageTrack();
        }
    });

    if (window.GrgCustomerVehicleQuickAdd) {
        window.GrgCustomerVehicleQuickAdd.init({
            customerVehicleLink: customerVehicleLink,
            isEnabled: function () {
                var kind = document.getElementById('gsSaleKind').value;
                return kind === 'customer_sale' || cashSaleMileageTrack();
            },
            onRegistered: function () {
                updateVehicleCard();
                if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
                if (meterUi && meterUi.refresh) meterUi.refresh();
            }
        });
    }

    renderInventory();
    renderLines();
    syncAllSaleTableScroll();
    if (svcToggle && svcWrap && services.length) { svcToggle.checked = true; svcWrap.classList.remove('d-none'); }
    renderServices();
    syncSvcCartsLayout();
    inferLegacyHeaderDiscountPercent();
    refreshTotals();
    syncSaleKindUi();

    // show card if already has packages
    if (packageIds.length || packageAmountTotal > 0) {
        const card = document.getElementById('pkgSelectedCard');
        if (card) card.classList.remove('d-none');
        const nmEl = document.getElementById('pkgSelectedName');
        const amtEl = document.getElementById('pkgSelectedAmount');
        if (nmEl) nmEl.textContent = 'Selected: ' + packageIds.length + ' package(s)';
        if (amtEl) amtEl.textContent = money(packageAmountTotal);
    }
});
</script>
@include('garage.repair-orders.partials.quick-add-height-sync')
@endpush
@endsection