@extends('garage.layouts.app')

@section('title', 'New sale')

@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-customer i { opacity: 0.85; }
.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-shop-window',
    'title' => 'Counter sale',
    'subtitle' => 'Parts with available stock on the left. Customer sale bills a customer and vehicle; cash sale is walk-in with no customer on record.',
])
@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.store') }}" id="gsForm" novalidate>
        @csrf
        <input type="hidden" name="garage_package_ids" id="garagePackageIds" value="{{ old('garage_package_ids') }}">
        <input type="hidden" name="package_amount_total" id="garagePackageAmountTotal" value="{{ old('package_amount_total') }}">
        <input type="hidden" name="garage_repair_order_id" id="gsRepairOrderIdHidden" value="{{ old('garage_repair_order_id', $prefillRepairOrder->id ?? '') }}">

        <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" id="gsQuickTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-parts" data-bs-toggle="pill" data-bs-target="#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="tab-services" data-bs-toggle="pill" data-bs-target="#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="tab-packages" data-bs-toggle="pill" data-bs-target="#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="pane-parts" role="tabpanel" aria-labelledby="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="pane-services" role="tabpanel" aria-labelledby="tab-services">
                            <div class="gpo-inv-toolbar">
                                <input type="search" class="gpo-search" id="gsSvcSearch" placeholder="Search service name…" autocomplete="off">
                                <div class="gpo-inv-filter-line">
                                    <span id="gsSvcFilterLabel"><strong>Services</strong> · Press Enter to add first match</span>
                                    <span class="badge rounded-pill" id="gsSvcCountQuick">0</span>
                                </div>
                            </div>
                            <div class="gpo-inv-scroll" id="gsSvcList"></div>
                        </div>

                        <div class="tab-pane fade" id="pane-packages" role="tabpanel" aria-labelledby="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"><strong>Packages</strong> · Select a package to add its parts/services</span>
                                    <span class="badge rounded-pill" 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.',
                    'numberName' => 'sale_number',
                    'numberValue' => old('sale_number', $saleNumber),
                    'isCreate' => true,
                    'dateName' => 'sale_date',
                    'dateValue' => old('sale_date', date('Y-m-d')),
                    'historyUrl' => route('garage.sales.index'),
                    'closeUrl' => route('garage.dashboard'),
                    'saveLabel' => 'Complete sale',
                    'showCustomerVehicleQuickAdd' => true,
                ])
                <div class="gpo-panel-bd gs-ro-detail-bd">
                    <div class="gs-ro-detail-fields">
                    @if(session('error'))
                        <div class="alert alert-danger py-2 small mb-2">{{ session('error') }}</div>
                    @endif
                    @if($errors->any())
                        <div class="alert alert-danger py-2 small mb-2">
                            <ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                        </div>
                    @endif

                    @include('garage.sales.partials.detail-panel-fields', [
                        'customers' => $customers,
                        'repairOrders' => $repairOrders ?? [],
                        'warehouseCtx' => $warehouseCtx,
                        'warehouseFieldPrefix' => 'saleWh',
                        'showRepairOrderPick' => true,
                    ])

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

                    @include('garage.sales.partials.lines-panels')

                    <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 class="d-flex align-items-center gap-2">
                                        <div class="rounded-2 d-flex align-items-center justify-content-center" style="width:28px;height:28px;background:var(--bs-primary);color:#fff;"><i class="bi bi-box2-heart"></i></div>
                                        <div>
                                            <div class="small text-muted" style="font-weight:800;text-transform:uppercase;">Package</div>
                                            <div class="fw-bold text-dark small" id="pkgSelectedName">—</div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="small text-muted">Fixed: <strong id="pkgSelectedAmount">PKR 0.00</strong></span>
                                        <button type="button" class="btn btn-sm btn-outline-danger py-0 px-2" id="btnClearPackage">Clear</button>
                                    </div>
                                </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.meter-reading-script')
@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.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 OLD_VEHICLE_ID = @json(old('garage_vehicle_id'));
    const PREFILL_RO = @json($prefillRepairOrder);
    const PREFILL_ITEMS = @json($prefillItems);
    const SVC_CATS = @json($garageServiceCategories ?? []);
    const GARAGE_SERVICES = @json($garageServicesForJs ?? []);
    const PREFILL_SERVICES = @json($prefillServices ?? []);
    let lines = [];
    let services = [];
    let packageIds = [];
    let packageAmountTotal = 0;

    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 hasCents = Math.round(x * 100) % 100 !== 0;
        return x.toLocaleString('en-PK', hasCents
            ? { 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 { gross, disc, 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 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;
        const total = filtered.length;
        document.getElementById('gsInvCount').textContent = String(total);
        if (fl) {
            fl.innerHTML = q
                ? 'Showing <strong>' + filtered.length + '</strong> matches'
                : '<strong>' + filtered.length + '</strong> in-stock items · <em>Add</em> puts a line in the sale';
        }
        if (!filtered.length) {
            el.innerHTML = '<div class="gpo-inv-empty">' + (q ? 'No matches.' : 'Nothing available to sell right now.') + '</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 ' + moneyCompact(p.selling_price) + ' · 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" title="' + escapeHtml(String(code)) + '">' + escapeHtml(String(code)) + '</span>' +
                '<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" value="1" class="gpo-inv-qty gpo-line-qty" data-pid="' + p.id + '" aria-label="Quantity" title="' + avail + ' available in stock"' + disabled + '>' +
                '<button type="button" class="gpo-inv-add-btn" data-pid="' + p.id + '" title="Add line"' + 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 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);
        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, (parseInt(p.stock_quantity, 10) || 0) - used);
    }

    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 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);
            const next = lines[idx].quantity + want;
            lines[idx].quantity = Math.min(next, cap);
            if (next > cap) {
                alert('Only ' + cap + ' units available for this part (stock on hand).');
            }
        } 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();
        });
    }

    // ---- Quick add packages (fixed bundles) ----
    let pkgCache = [];
    let pkgLoading = false;

    async function fetchPackages(q) {
        const query = (q || '').trim();
        if (pkgLoading) return;
        pkgLoading = true;
        try {
            const url = new URL("{{ route('garage.api.packages.index') }}", window.location.origin);
            if (query) url.searchParams.set('q', query);
            url.searchParams.set('active', '1');
            const res = await fetch(url.toString(), { headers: { 'Accept': 'application/json' }});
            const j = await res.json();
            pkgCache = (j && j.ok && j.data) ? j.data : [];
        } catch (e) {
            pkgCache = [];
        } finally {
            pkgLoading = false;
            renderPackages();
        }
    }

    function renderPackages() {
        const q = (document.getElementById('gsPkgSearch')?.value || '').toLowerCase().trim();
        const listEl = document.getElementById('gsPkgList');
        const countEl = document.getElementById('gsPkgCount');
        if (!listEl) return;
        const filtered = (pkgCache || []).filter(function (p) {
            if (!q) return true;
            const blob = [p.name, p.code].filter(Boolean).join(' ').toLowerCase();
            return blob.includes(q);
        });
        if (countEl) countEl.textContent = String(filtered.length);
        if (!filtered.length) {
            listEl.innerHTML = '<div class="gpo-inv-empty">No packages.</div>';
            return;
        }
        listEl.innerHTML = filtered.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('');
    }

    function ensureFixedHeaderDiscount(extraFixedDiscount) {
        const v = Math.max(0, Number(extraFixedDiscount) || 0);
        if (v <= 0) return;
        const typeRad = document.querySelector('input[name="discount_type"][value="fixed"]');
        if (typeRad) typeRad.checked = true;
        const discInp = document.getElementById('gsHdrDiscVal');
        if (!discInp) return;
        const cur = Math.max(0, parseFloat(discInp.value) || 0);
        discInp.value = (cur + v).toFixed(2);
    }

    async function addPackage(pkgId) {
        if (!pkgId) return;
        try {
            const pkgNumId = Number(pkgId) || 0;
            if (!pkgNumId) return;
            if (packageIds.includes(pkgNumId)) 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, 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();
            refreshTotals();
        } catch (e) {
            // ignore
        }
    }

    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();
        refreshTotals();
    });

    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;
            const first = (pkgCache || [])[0];
            if (!first) return;
            e.preventDefault();
            addPackage(first.id);
            e.target.select();
        });
        fetchPackages('');
    }

    document.addEventListener('click', function (e) {
        const svcBtn = e.target.closest('[data-add-svc]');
        if (svcBtn) {
            const id = svcBtn.getAttribute('data-add-svc');
            const qtyEl = document.querySelector('input[data-sqty="' + id + '"]');
            const qty = Math.max(1, parseInt(qtyEl && qtyEl.value, 10) || 1);
            const svc = (GARAGE_SERVICES || []).find(function (x) { return String(x.id) === String(id); });
            if (svc) {
                services.push({ garage_service_id: Number(svc.id), garage_employee_id: null, hours: qty, rate: Number(svc.price) || 0, notes: '', title: null });
                if (svcToggle && svcWrap) { svcToggle.checked = true; svcWrap.classList.remove('d-none'); }
                renderServices();
                refreshTotals();
            }
            return;
        }

        const btn = e.target.closest('[data-pkgid]');
        if (!btn) return;
        const id = btn.getAttribute('data-pkgid');
        if (!id) return;
        addPackage(id);
    });

    function removeLine(i) {
        lines.splice(i, 1);
        renderLines();
    }

    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 renderServices() {
        const body = document.getElementById('gsSvcBody');
        if (!body) return;
        if (!services.length) {
            body.innerHTML = '<tr><td colspan="5" 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 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 totalCell = isInc ? '—' : money(c.total);
                return '<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) + '"></td>' +
                    '<td>' + rateCell + '</td>' +
                    '<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>';
            }).join('');
        }
        const badge = document.getElementById('gsSvcCount');
        if (badge) badge.textContent = String(services.length);
        syncRoTableScroll('gsSvcScroll', 'gsSvcBody');
        syncSaleKindUi();
        if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
        if (meterUi && meterUi.refresh) meterUi.refresh();
    }

    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 + '" data-pid="' + L.part_id + '">' +
                '<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 + '" 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');
        renderServices();
        refreshTotals();
        renderInventory();
        syncSaleKindUi();
    }

    function refreshTotals() {
        let partsSub = 0, servicesSub = 0, tax = 0;
        lines.forEach(function (L) {
            const c = lineCalc(L);
            partsSub += c.net;
            tax += c.tax;
        });
        services.forEach(function (S) {
            servicesSub += serviceCalc(S).total;
        });
        const sub = partsSub + servicesSub + (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;

        const partsEl = document.getElementById('gsPartsTotal');
        if (partsEl) partsEl.textContent = money(partsSub);
        const svcsEl = document.getElementById('gsServicesTotal');
        if (svcsEl) svcsEl.textContent = money(servicesSub);

        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);
    }

    var gsInvList = document.getElementById('gsInvList');
    gsInvList.addEventListener('click', function (e) {
        var btn = e.target.closest('.gpo-inv-add-btn');
        if (!btn || !gsInvList.contains(btn)) return;
        e.preventDefault();
        addPart(btn.getAttribute('data-pid'));
    });
    gsInvList.addEventListener('keydown', function (e) {
        if (e.key !== 'Enter') return;
        var inp = e.target.classList && e.target.classList.contains('gpo-inv-qty') ? e.target : null;
        if (!inp || !gsInvList.contains(inp)) return;
        e.preventDefault();
        e.stopPropagation();
        addPart(inp.getAttribute('data-pid'));
    });

    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;
            removeLine(parseInt(btn.getAttribute('data-i'), 10));
        });
    }

    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.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 (list only; add via left Quick add tab)
    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();
        syncSaleKindUi();
    }
    if (svcToggle && svcWrap) {
        svcToggle.addEventListener('change', function () {
            svcWrap.classList.toggle('d-none', !svcToggle.checked);
            syncSvcCartsLayout();
        });
        syncSvcCartsLayout();
    }

    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();
        });
    }

    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 card = document.getElementById('gsVehicleCard');
        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;
            custWrap.classList.remove('opacity-50');
            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;
            if (window.jQuery && window.jQuery(veh).data('chosen')) {
                window.jQuery(veh).chosen('destroy');
            }
            veh.innerHTML = '<option value="">— N/A for cash sale —</option>';
            veh.value = '';
            if (vehReq) vehReq.style.display = 'none';
            custWrap.classList.add('opacity-50');
            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 {
            var cvHdOn = document.getElementById('grgCvHdQuickAdd');
            if (cvHdOn) cvHdOn.classList.remove('d-none');
            cust.disabled = false;
            cust.required = true;
            veh.disabled = false;
            veh.required = false;
            if (vehReq) vehReq.style.display = 'none';
            custWrap.classList.remove('opacity-50');
            vehWrap.classList.remove('opacity-50');
            if (trackHint) trackHint.classList.add('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 && window.jQuery.fn.chosen) {
            window.jQuery(cust).trigger('chosen:updated');
            window.jQuery(veh).trigger('chosen:updated');
            window.jQuery(document.getElementById('gsSaleKind')).trigger('chosen:updated');
        }
    }

    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: {{ (empty($prefillRepairOrder) && !old('garage_vehicle_id')) ? 'true' : 'false' }},
            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();
            }
        });
    }

    document.getElementById('gsSaleKind').addEventListener('change', syncSaleKindUi);

    // Repair order picker: fetch lines + meter without full page reload
    const roPick = document.getElementById('gsRepairOrderPick');
    const roFetchBtn = document.getElementById('gsFetchRoBtn');
    const roHiddenId = document.getElementById('gsRepairOrderIdHidden');
    if (roFetchBtn && roPick) {
        roFetchBtn.addEventListener('click', async function () {
            const id = roPick.value;
            if (!id) {
                if (roHiddenId) roHiddenId.value = '';
                return;
            }
            roFetchBtn.disabled = true;
            try {
                const res = await fetch("{{ url('/garage/api/lookup/repair-order') }}/" + encodeURIComponent(id), { headers: { Accept: 'application/json' } });
                const data = await res.json();
                if (!res.ok) { alert(data.message || @json(($glOrder ?? 'Order').' not found')); return; }
                const ro = data.repair_order || {};
                if (roHiddenId) roHiddenId.value = String(ro.id || id);
                const kindSel = document.getElementById('gsSaleKind');
                if (kindSel) kindSel.value = 'customer_sale';
                if (document.getElementById('gsCustomer') && ro.customer_ledger_id) {
                    document.getElementById('gsCustomer').value = String(ro.customer_ledger_id);
                }
                setTimeout(function () {
                    if (customerVehicleLink && customerVehicleLink._setCustomerFromVehicle && ro.garage_vehicle_id) {
                        customerVehicleLink._setCustomerFromVehicle(ro.garage_vehicle_id);
                    } else if (customerVehicleLink && customerVehicleLink._rebuildVehicles) {
                        customerVehicleLink._rebuildVehicles(ro.garage_vehicle_id || '', ro.customer_ledger_id || null);
                    }
                    if (window.jQuery) {
                        jQuery('#gsSaleKind, #gsCustomer, #gsVehicle').trigger('chosen:updated');
                    }
                    window.GrgMeterReading.prefillAll({
                        currentInputId: 'gsMeterReading',
                        nextMeterInputId: 'gsNextMeterReading',
                        nextDateInputId: 'gsNextServiceDate',
                        current: ro.meter_reading,
                        next_meter_reading: ro.next_meter_reading,
                        next_service_date: ro.next_service_date
                    });
                    if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
                    if (meterUi && meterUi.refresh) meterUi.refresh();
                    updateVehicleCard();
                }, 0);
                const discType = ro.discount_type === 'percentage' || ro.discount_type === 'fixed' ? ro.discount_type : 'fixed';
                const r = document.querySelector('#gsHdrDiscType input[name="discount_type"][value="' + discType + '"]');
                if (r) r.checked = true;
                if (document.getElementById('gsHdrDiscVal')) document.getElementById('gsHdrDiscVal').value = String(ro.discount_amount || 0);
                if (document.getElementById('gsFreight')) document.getElementById('gsFreight').value = String(ro.freight_amount || 0);
                lines = (data.items || []).map(function (it) {
                    return {
                        part_id: it.part_id,
                        product_name: it.product_name || '',
                        description: it.description || '',
                        inventory_code_snapshot: it.inventory_code_snapshot || null,
                        quantity: it.quantity || 1,
                        unit_price: it.unit_price || 0,
                        discount_amount: it.discount_amount || 0,
                        discount_type: it.discount_type || 'percentage',
                        tax_rate: it.tax_rate || 0
                    };
                });
                if (Array.isArray(data.services) && data.services.length) {
                    services = data.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
                        };
                    });
                    if (svcToggle && svcWrap) {
                        svcToggle.checked = true;
                        svcWrap.classList.remove('d-none');
                        syncSvcCartsLayout();
                    }
                    renderServices();
                }
                renderLines();
                syncSaleKindUi();
                refreshTotals();
            } catch (e) {
                alert('Fetch failed');
            } finally {
                roFetchBtn.disabled = false;
            }
        });
    }

    // Prefill from repair order (server provided)
    if (PREFILL_RO) {
        // Force customer sale for repair orders
        const kindSel = document.getElementById('gsSaleKind');
        if (kindSel) kindSel.value = 'customer_sale';

        // Header discount + freight
        const discType = (PREFILL_RO.discount_type === 'percentage' || PREFILL_RO.discount_type === 'fixed') ? PREFILL_RO.discount_type : null;
        const discAmt = Number(PREFILL_RO.discount_amount);
        const freightAmt = Number(PREFILL_RO.freight_amount);
        if (discType) {
            const r = document.querySelector('#gsHdrDiscType input[name="discount_type"][value="' + discType + '"]');
            if (r) r.checked = true;
        }
        if (!Number.isNaN(discAmt) && document.getElementById('gsHdrDiscVal')) {
            document.getElementById('gsHdrDiscVal').value = String(discAmt);
        }
        if (!Number.isNaN(freightAmt) && document.getElementById('gsFreight')) {
            document.getElementById('gsFreight').value = String(freightAmt);
        }

        // Set customer + rebuild vehicles + set vehicle
        const custSel = document.getElementById('gsCustomer');
        const vehSel = document.getElementById('gsVehicle');
        if (custSel && PREFILL_RO.customer_ledger_id) custSel.value = String(PREFILL_RO.customer_ledger_id);

        setTimeout(function () {
            if (customerVehicleLink && customerVehicleLink._setCustomerFromVehicle && PREFILL_RO.garage_vehicle_id) {
                customerVehicleLink._setCustomerFromVehicle(PREFILL_RO.garage_vehicle_id);
            } else if (customerVehicleLink && customerVehicleLink._rebuildVehicles) {
                customerVehicleLink._rebuildVehicles(PREFILL_RO.garage_vehicle_id || '', PREFILL_RO.customer_ledger_id || null);
            }
            if (window.jQuery) {
                jQuery('#gsSaleKind').trigger('chosen:updated');
                jQuery('#gsCustomer').trigger('chosen:updated');
                jQuery('#gsVehicle').trigger('chosen:updated');
            }
            updateVehicleCard();
            window.GrgMeterReading.prefillAll({
                currentInputId: 'gsMeterReading',
                nextMeterInputId: 'gsNextMeterReading',
                nextDateInputId: 'gsNextServiceDate',
                current: PREFILL_RO.meter_reading,
                next_meter_reading: PREFILL_RO.next_meter_reading,
                next_service_date: PREFILL_RO.next_service_date
            });
            if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
            refreshTotals();
        }, 0);

        // Build lines from repair order items
        if (Array.isArray(PREFILL_ITEMS) && PREFILL_ITEMS.length) {
            lines = PREFILL_ITEMS.map(function (it) {
                return {
                    part_id: it.part_id,
                    product_name: it.product_name || '',
                    description: it.description || '',
                    inventory_code_snapshot: it.inventory_code_snapshot || null,
                    quantity: it.quantity,
                    unit_price: it.unit_price,
                    discount_amount: it.discount_amount || 0,
                    discount_type: it.discount_type || 'percentage',
                    tax_rate: it.tax_rate || 0
                };
            });
            renderLines();
        } else {
            // still refresh totals to reflect header discount/freight
            refreshTotals();
        }
    }

    if (Array.isArray(PREFILL_SERVICES) && PREFILL_SERVICES.length) {
        services = PREFILL_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; });

        if (svcToggle && svcWrap) {
            svcToggle.checked = true;
            svcWrap.classList.remove('d-none');
        }

        renderServices();
        refreshTotals();
    }
    if (window.jQuery) {
        window.jQuery('#gsSaleKind').on('change', function () {
            setTimeout(syncSaleKindUi, 0);
        });
    }

    syncSaleKindUi();

    document.getElementById('gsForm').addEventListener('submit', function (e) {
        if (!lines.length && !services.length) {
            e.preventDefault();
            alert('Add at least one part or service to the sale.');
            return;
        }
        if (lines.length && !validateLinesStockForSubmit()) {
            e.preventDefault();
            return;
        }
        var kind = document.getElementById('gsSaleKind').value;
        if (kind === 'customer_sale') {
            if (!document.getElementById('gsCustomer').value) {
                e.preventDefault();
                alert('Select a customer for a customer sale.');
                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
            };
        }));
    });

    renderInventory();
    renderLines();
    syncAllSaleTableScroll();
    renderServices();
    if (typeof syncSvcCartsLayout === 'function') syncSvcCartsLayout();

    // ---- Quick add services (left tab) ----
    let lastSvcFiltered = [];
    function renderQuickServicesList() {
        const q = (document.getElementById('gsSvcSearch')?.value || '').toLowerCase().trim();
        const el = document.getElementById('gsSvcList');
        const cnt = document.getElementById('gsSvcCountQuick');
        if (!el) return;
        const list = (GARAGE_SERVICES || []).filter(function (s) {
            if (!q) return true;
            return String(s.name || '').toLowerCase().includes(q);
        });
        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) {
            const nm = escapeHtml(s.name || 'Service');
            const meta = 'Unit ' + moneyCompact(s.price || 0);
            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('');
    }

    const gsSvcSearch = document.getElementById('gsSvcSearch');
    if (gsSvcSearch) {
        gsSvcSearch.addEventListener('input', renderQuickServicesList);
        gsSvcSearch.addEventListener('keydown', function (e) {
            if (e.key !== 'Enter') return;
            const q = (e.target.value || '').trim();
            if (!q) return;
            if (!lastSvcFiltered.length) return;
            e.preventDefault();
            const first = lastSvcFiltered[0];
            services.push({ garage_service_id: Number(first.id), garage_employee_id: null, hours: 1, rate: Number(first.price) || 0, notes: '', title: null });
            if (svcToggle && svcWrap) { svcToggle.checked = true; svcWrap.classList.remove('d-none'); }
            renderServices();
            refreshTotals();
            e.target.select();
        });
        renderQuickServicesList();
    }
});
</script>
@include('garage.repair-orders.partials.quick-add-height-sync')
@endpush
@endsection