@extends('garage.layouts.app')

@section('title', 'Edit '.strtolower($glOrder ?? 'order'))

@push('styles')
@include('shared.garage-purchase-order-ui-styles')
@include('shared.garage-split-form-ui-styles')
@endpush

@section('navbar_lead')
@include('garage.partials.split-form-navbar-lead', [
    'icon' => 'bi-pencil-square',
    'title' => 'Edit '.($glOrder ?? 'Order'),
    'subtitle' => 'You can keep changing parts during repair. When completed, create final sale invoice from this '.strtolower($glOrder ?? 'order').'.',
])
@endsection

@section('content')
<div class="gpo-page gs-split-form-page gs-vf-page gs-order-page gs-ro-page container-fluid px-2 px-lg-3 py-2">
    <form method="POST" action="{{ route('garage.repair-orders.update', $repairOrder->id) }}" id="gsForm" novalidate>
        @csrf
        @method('PUT')
        <input type="hidden" name="garage_package_ids" id="garagePackageIds" value="{{ old('garage_package_ids', $repairOrder->garage_package_ids ?? '') }}">
        <input type="hidden" name="package_amount_total" id="garagePackageAmountTotal" value="{{ old('package_amount_total', $repairOrder->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="roPkgSearch" placeholder="Search package name/code…" autocomplete="off">
                                <div class="gpo-inv-filter-line">
                                    <span id="roPkgFilterLabel"><strong>Packages</strong> · Select a package to add its parts/services</span>
                                    <span class="badge rounded-pill" id="roPkgCount">0</span>
                                </div>
                            </div>
                            <div class="gpo-inv-scroll" id="roPkgList"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="gpo-panel gs-ro-detail-panel">
                @include('garage.repair-orders.partials.detail-panel-header', [
                    'repairOrderNumber' => $repairOrder->repair_order_number,
                    'repairOrderDate' => old('repair_order_date', $repairOrder->repair_order_date),
                    'closeUrl' => route('garage.repair-orders.show', $repairOrder->id),
                ])
                <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(session('warning'))
                        <div class="alert alert-warning py-2 small mb-2">{{ session('warning') }}</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.repair-orders.partials.detail-panel-fields', [
                        'repairOrder' => $repairOrder,
                        'showLeadField' => $showLeadField ?? false,
                        'employeesForLead' => $employeesForLead ?? collect(),
                        'showWarehousePicker' => $showWarehousePicker ?? false,
                        'warehouseCtx' => $warehouseCtx ?? [],
                        'warehouseDefaults' => $warehouseDefaults ?? [],
                        'selectedCustomerId' => old('customer_ledger_id', $repairOrder->customer_ledger_id),
                        'selectedSlotId' => old('slot_id', $repairOrder->slot_id),
                        'selectedLeadId' => old('lead_garage_employee_id', data_get($repairOrder, 'lead_garage_employee_id')),
                        'selectedStatus' => old('status', $repairOrder->status),
                        'warehouseFieldPrefix' => 'roWhEdit',
                    ])

                    <div class="row g-2 mb-3 gs-ro-fields-row">
                        <div class="col-12 col-md-8 col-lg-9">
                            <div class="gpo-lbl mb-1">Discount</div>
                            <div class="d-flex flex-wrap align-items-center gap-2">
                                <div class="gpo-disc-toggle" id="gsHdrDiscType">
                                    <label class="gpo-disc-pill"><input type="radio" name="discount_type" value="fixed" @checked(old('discount_type', $repairOrder->discount_type ?? 'fixed')==='fixed')><span>Fixed PKR</span></label>
                                    <label class="gpo-disc-pill"><input type="radio" name="discount_type" value="percentage" @checked(old('discount_type', $repairOrder->discount_type ?? 'fixed')==='percentage')><span>Percent %</span></label>
                                </div>
                                <input type="number" step="0.01" min="0" class="gpo-inp" style="max-width:7rem;" name="discount_amount" id="gsHdrDiscVal" value="{{ old('discount_amount', $repairOrder->discount_amount ?? 0) }}">
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-3">
                            <div class="gpo-lbl">Freight</div>
                            <input type="number" step="0.01" min="0" class="gpo-inp" name="freight_amount" id="gsFreight" value="{{ old('freight_amount', $repairOrder->freight_amount ?? 0) }}">
                        </div>
                    </div>

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

                    <div class="row g-2 gs-ro-carts-row gs-ro-carts-stack">
                        <div class="col-12">
                            <div class="gpo-panel gpo-panel-cart gs-ro-cart-panel">
                                <div class="gpo-panel-hd">
                                    <span><i class="bi bi-cart3 me-1"></i>Parts used</span>
                                    <span class="badge rounded-pill" id="gsCartCount">0</span>
                                </div>
                                <div class="gpo-panel-bd gs-ro-cart-bd">
                                    <div class="gs-ro-table-scroll" id="gsPartsScroll">
                                        <table class="table table-sm gpo-lines gs-ro-lines--7 mb-0" id="gsLinesTbl">
                                            <thead>
                                                <tr>
                                                    <th>Part</th>
                                                    <th>Qty</th>
                                                    <th>Price</th>
                                                    <th>Disc</th>
                                                    <th>Tax%</th>
                                                    <th class="text-end">Total</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="gsLinesBody"></tbody>
                                        </table>
                                    </div>
                                    <div class="gs-ro-panel-ft">
                                        <div class="d-flex justify-content-end small text-muted">
                                            Parts total:
                                            <span class="fw-bold text-dark ms-1" id="gsPartsTotal">PKR 0.00</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="gpo-panel gs-ro-svc-panel">
                                <div class="gpo-panel-hd">
                                    <span><i class="bi bi-tools me-1"></i>Services / labour</span>
                                    <span class="badge rounded-pill" id="roSvcCount">0</span>
                                </div>
                                <div class="gpo-panel-bd gs-ro-cart-bd">
                                    <div class="small text-muted gs-ro-svc-hint">
                                        Add services from the left <strong>Quick add → Services</strong> tab.
                                    </div>
                                    <div class="gs-ro-table-scroll" id="roSvcScroll">
                                        <table class="table table-sm gpo-lines gs-svc-lines gs-svc-lines--ro6 mb-0" id="roSvcTbl">
                                            <thead>
                                                <tr>
                                                    <th>Service</th>
                                                    <th>Hours</th>
                                                    <th>ETA (Min)</th>
                                                    <th>Rate</th>
                                                    <th class="text-end">Total</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="roSvcBody"></tbody>
                                        </table>
                                    </div>
                                    <div class="gs-ro-panel-ft">
                                        <div class="d-flex justify-content-end small text-muted">
                                            Services total:
                                            <span class="fw-bold text-dark ms-1" id="gsServicesTotal">PKR 0.00</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <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;box-shadow:0 4px 12px rgba(var(--bs-primary-rgb), .06);">
                                <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;letter-spacing:.06em;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 class="text-dark" 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>
                        @include('garage.repair-orders.partials.order-footer-totals', ['repairOrder' => $repairOrder])
                    </div>{{-- gs-ro-detail-footer --}}

                </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.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 SVC_CATS = @json($garageServiceCategories ?? []);
    const GARAGE_SERVICES = @json($garageServicesForJs ?? []);
    const HAS_SLOTS = @json(!empty($slots) && count($slots) > 0);
    let lines = INITIAL.map(function (L) { return Object.assign({ discount_type: L.discount_type || 'percentage' }, L); });
    let services = (INITIAL_SERVICES || []).map(function (S) { return Object.assign({}, S); });
    var hidPkgEl = document.getElementById('garagePackageIds');
    let packageIds = String((hidPkgEl && hidPkgEl.value) ? hidPkgEl.value : '')
        .split(',')
        .map(function (x) { return parseInt(String(x).trim(), 10); })
        .filter(function (x) { return x > 0; });
    var hidPkgAmtEl = document.getElementById('garagePackageAmountTotal');
    let packageAmountTotal = Math.max(0, parseFloat((hidPkgAmtEl && hidPkgAmtEl.value) ? hidPkgAmtEl.value : '0') || 0);
    let lastInvFiltered = [];

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

    // ---- Slot availability (date-wise, shared with estimates) ----
    function fetchSlotAvailability(dateStr) {
        if (!HAS_SLOTS) return;
        var slotSel = document.getElementById('roSlotId');
        var hint = document.getElementById('roSlotHint');
        if (!slotSel) return;
        var curVal = String(slotSel.value || '');
        var url = '/garage/api/slots/availability?date=' + encodeURIComponent(String(dateStr || '')) + '&exclude_type=repair_order&exclude_id=' + encodeURIComponent(String(@json((int)($repairOrder->id ?? 0))));
        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(function (r) { return r.json(); })
            .then(function (j) {
                if (!j || !j.ok) return;
                var occ = Array.isArray(j.occupied_ids) ? j.occupied_ids.map(String) : [];
                var slots = Array.isArray(j.slots) ? j.slots : [];
                slotSel.innerHTML = '';
                var opt0 = document.createElement('option');
                opt0.value = '';
                opt0.textContent = 'Select slot';
                slotSel.appendChild(opt0);
                for (var i = 0; i < slots.length; i++) {
                    var s = slots[i];
                    if (!s || s.id === undefined || s.id === null) continue;
                    var sid = String(s.id);
                    if (occ.indexOf(sid) !== -1) continue;
                    var opt = document.createElement('option');
                    opt.value = sid;
                    opt.textContent = String(s.name || ('Slot #' + sid));
                    slotSel.appendChild(opt);
                }
                if (curVal && slotSel.querySelector('option[value="' + curVal.replace(/"/g, '\\"') + '"]')) {
                    slotSel.value = curVal;
                } else {
                    slotSel.value = '';
                }
                if (hint) {
                    hint.textContent = j.free_slots <= 0
                        ? ('All slots are full for ' + j.date + '. Change date or wait.')
                        : ('Free slots: ' + j.free_slots + ' of ' + j.total_slots + ' for ' + j.date);
                    hint.classList.toggle('text-danger', j.free_slots <= 0);
                }
                if (window.jQuery) jQuery('#roSlotId').trigger('chosen:updated');
            })
            .catch(function () {});
    }

    var roDateInp = document.querySelector('input[name="repair_order_date"]');
    if (roDateInp && HAS_SLOTS) {
        roDateInp.addEventListener('change', function () { fetchSlotAvailability(roDateInp.value); });
        fetchSlotAvailability(roDateInp.value);
    }
    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')==='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 hours=Math.max(0,parseFloat(S.hours)||0);
        const rate=Math.max(0,parseFloat(S.rate)||0);
        return {total:hours*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'}; }

    function usedQtyForPart(partId) {
        let used = 0;
        lines.forEach(function (L) {
            if (Number(L.part_id) === Number(partId)) used += (parseInt(L.quantity, 10) || 0);
        });
        return used;
    }

    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 · <em>Add</em> puts a line in the {{ strtolower($glOrder ?? 'order') }}'; }
        if(!filtered.length){ el.innerHTML='<div class="gpo-inv-empty">'+(q?'No matches.':'Type 2+ characters to search parts.')+'</div>'; return; }
        el.innerHTML = filtered.map(function(p){
            const code=p.inventory_code||p.code||'—';
            const nm=escapeHtml(p.name);
            const used = usedQtyForPart(p.id);
            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" max="' + avail + '" value="1" class="gpo-inv-qty gpo-line-qty" data-pid="'+p.id+'" aria-label="Quantity"' + 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);
    }

    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, 1);
        e.target.select();
        renderInventory();
    });

    function addPart(partId, qty){
        window.GaragePartsCatalog.ensure(partId).then(function (p) {
        if(!p) return;
        const avail = Math.max(0, (parseInt(p.stock_quantity, 10) || 0) - usedQtyForPart(p.id));
        if (avail <= 0) return;
        const q=Math.max(1, Math.min(avail, parseInt(qty,10)||1));
        const existing = lines.find(function (L) { return Number(L.part_id) === Number(p.id); });
        if (existing) { existing.quantity = Math.max(1, (parseInt(existing.quantity,10)||1) + q); renderLines(); renderInventory(); return; }
        lines.push({part_id:p.id,product_name:p.name,description:'',inventory_code_snapshot:p.inventory_code||p.code||null,quantity:q,unit_price:p.selling_price,discount_amount:0,discount_type:'percentage',tax_rate:p.tax_rate});
        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() {
        var roPkgSearchEl = document.getElementById('roPkgSearch');
        const q = (roPkgSearchEl && roPkgSearchEl.value ? roPkgSearchEl.value : '').toLowerCase().trim();
        const listEl = document.getElementById('roPkgList');
        const countEl = document.getElementById('roPkgCount');
        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.indexOf(q) !== -1;
        });
        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('');
    }

    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 || [];

            // Add parts/services from package as INCLUDED (no line amount).
            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, qty);
                    const L = lines.find(function (x) { return Number(x.part_id) === Number(it.garage_part_id); });
                    if (L) {
                        L.unit_price = 0;
                        L.discount_amount = 0;
                        L.discount_type = 'fixed';
                        L.tax_rate = 0;
                        L.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' });
                }
            });

            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();
            updateSummary();
        } catch (e) {
            // ignore
        }
    }

    function updateSummary(){
        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('input[name="discount_type"]:checked');
        const discType = (dt && dt.value) ? dt.value : 'fixed';
        const discVal=parseFloat(document.getElementById('gsHdrDiscVal').value)||0;
        const freight=parseFloat(document.getElementById('gsFreight').value)||0;
        const hdrDisc=discType==='percentage' ? (sub*(discVal/100)) : discVal;
        const after=Math.max(0,sub-hdrDisc);
        const total=after+tax+freight;
        const partsEl=document.getElementById('gsPartsTotal'); if(partsEl) partsEl.textContent=money(partsSub);
        const servicesEl=document.getElementById('gsServicesTotal'); if(servicesEl) servicesEl.textContent=money(servicesSub);

        // Subtotal should NOT change when header discount changes.
        document.getElementById('gsSumSub').textContent=money(sub);
        document.getElementById('gsSumTax').textContent=money(tax);
        document.getElementById('gsSumDisc').textContent=money(hdrDisc);
        document.getElementById('gsSumShip').textContent=money(freight);
        document.getElementById('gsSumTot').textContent=money(total);
        const advanceEl = document.getElementById('gsAdvance');
        const advance = advanceEl ? (parseFloat(advanceEl.value) || 0) : 0;
        const balance = Math.max(0, total - advance);
        const elAdv = document.getElementById('gsSumAdvance');
        const elBal = document.getElementById('gsSumBalance');
        if (elAdv) elAdv.textContent = money(advance);
        if (elBal) elBal.textContent = money(balance);
    }

    var RO_SCROLL_MIN_ROWS = 4;
    function syncRoTableScroll(scrollWrapId, bodyId) {
        var wrap = document.getElementById(scrollWrapId);
        var body = bodyId === 'roSvcBody' ? roSvcBodyEl() : 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 >= RO_SCROLL_MIN_ROWS);
    }
    function syncAllOrderTableScroll() {
        syncRoTableScroll('gsPartsScroll', 'gsLinesBody');
        syncRoTableScroll('roSvcScroll', 'roSvcBody');
    }

    var invRenderTimer = null;
    function scheduleRenderInventory() {
        clearTimeout(invRenderTimer);
        invRenderTimer = setTimeout(renderInventory, 120);
    }
    function syncLineTotalInRow(tr, L) {
        const cell = tr.querySelector('.js-line-total');
        if (!cell) return;
        cell.textContent = money(lineCalc(L).total);
    }

    function renderLines(){
        const body=document.getElementById('gsLinesBody');
        document.getElementById('gsCartCount').textContent=String(lines.length);
        if(!lines.length){
            body.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');
            renderServices();
            updateSummary();
            return;
        }
        body.innerHTML=lines.map(function(L,i){
            const c=lineCalc(L);
            return '<tr data-idx="'+i+'">'+
                '<td><div class="fw-semibold">'+escapeHtml(L.product_name||'')+'</div><div class="small text-muted">'+escapeHtml(L.inventory_code_snapshot||'')+'</div></td>'+
                '<td><input type="number" min="1" class="form-control form-control-sm js-qty" value="'+L.quantity+'"></td>'+
                '<td><input type="number" min="0" step="0.01" class="form-control form-control-sm js-price" value="'+L.unit_price+'"></td>'+
                '<td><div class="d-flex gap-1">'+
                    '<select class="form-select form-select-sm js-disc-type" style="max-width:6.5rem">'+
                        '<option value="percentage"'+(L.discount_type==='percentage'?' selected':'')+'>%</option>'+
                        '<option value="fixed"'+(L.discount_type==='fixed'?' selected':'')+'>PKR</option>'+
                    '</select>'+
                    '<input type="number" min="0" step="0.01" class="form-control form-control-sm js-disc" value="'+L.discount_amount+'">'+
                '</div></td>'+
                '<td><input type="number" min="0" step="0.01" class="form-control form-control-sm js-tax" value="'+(L.tax_rate||0)+'"></td>'+
                '<td class="text-end fw-semibold js-line-total">'+money(c.total)+'</td>'+
                '<td class="text-end"><button type="button" class="btn btn-sm btn-outline-danger js-del"><i class="bi bi-x-lg"></i></button></td>'+
                '</tr>';
        }).join('');
        syncRoTableScroll('gsPartsScroll', 'gsLinesBody');
        renderServices();
        updateSummary();
    }

    function roSvcBodyEl() {
        const form = document.getElementById('gsForm');
        return form ? form.querySelector('#roSvcBody') : document.getElementById('roSvcBody');
    }

    function renderServices(){
        const body = roSvcBodyEl();
        if(!body) return;
        if(!services.length){
            body.innerHTML='<tr><td colspan="6" 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 js-svc-rate" 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);
                const mins = (S.estimated_minutes !== null && S.estimated_minutes !== undefined && String(S.estimated_minutes) !== '')
                    ? (parseInt(S.estimated_minutes, 10) || 0)
                    : (svc && svc.required_minutes !== null && svc.required_minutes !== undefined ? (parseInt(svc.required_minutes, 10) || 0) : 0);
                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><input type="number" min="0" step="1" class="form-control form-control-sm js-svc-estmin" value="'+mins+'"></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('roSvcCount');
        if(badge) badge.textContent=String(services.length);
        syncRoTableScroll('roSvcScroll', 'roSvcBody');
        const svcPanel = document.querySelector('#gsForm .gs-ro-svc-panel');
        if (svcPanel && services.length) {
            svcPanel.classList.remove('d-none');
        }
        if (typeof meterUi !== 'undefined' && meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
    }

    function addQuickService(serviceId, qty) {
        const sid = parseInt(String(serviceId || '').trim(), 10);
        if (!sid) return false;
        const svc = (GARAGE_SERVICES || []).find(function (x) { return Number(x.id) === sid; });
        const hours = Math.max(1, parseInt(qty, 10) || 1);
        const existing = services.find(function (S) {
            return Number(S.garage_service_id) === sid && String(S.source || '') !== 'package_included';
        });
        if (existing) {
            existing.hours = Math.max(0, (Number(existing.hours) || 0) + hours);
            renderServices();
            updateSummary();
            if (window.syncRoQuickAddHeight) window.syncRoQuickAddHeight();
            try {
                if (typeof meterUi !== 'undefined' && meterUi && meterUi.refresh) meterUi.refresh();
            } catch (err) { /* ignore */ }
            return true;
        }
        services.push({
            garage_service_id: sid,
            garage_employee_id: null,
            hours: hours,
            rate: svc ? (Number(svc.price) || 0) : 0,
            estimated_minutes: (svc && svc.required_minutes !== null && svc.required_minutes !== undefined)
                ? (parseInt(svc.required_minutes, 10) || 0) : 0,
            notes: '',
            started_at: null,
            completed_at: null,
            title: svc ? null : ('Service #' + sid)
        });
        renderServices();
        updateSummary();
        if (window.syncRoQuickAddHeight) window.syncRoQuickAddHeight();
        try {
            if (typeof meterUi !== 'undefined' && meterUi && meterUi.refresh) meterUi.refresh();
        } catch (err) { /* ignore */ }
        const scroll = document.getElementById('roSvcScroll');
        if (scroll && scroll.scrollIntoView) scroll.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
        return true;
    }

    function wireRoQuickServiceClicks() {
        const listEl = document.getElementById('roSvcList');
        if (!listEl || listEl.dataset.roSvcWired === '1') return;
        listEl.dataset.roSvcWired = '1';
        listEl.addEventListener('click', function (e) {
            const btn = e.target.closest('[data-add-svc]');
            if (!btn || !listEl.contains(btn)) return;
            e.preventDefault();
            e.stopPropagation();
            const id = btn.getAttribute('data-add-svc');
            const row = btn.closest('.gpo-inv-row');
            const qtyEl = row ? row.querySelector('input[data-sqty]') : null;
            const qty = Math.max(1, parseInt(qtyEl && qtyEl.value, 10) || 1);
            addQuickService(id, qty);
        });
    }

    document.getElementById('gsInvSearch').addEventListener('input', renderInventory);
    document.addEventListener('click', function (e) {
        const pkgBtn = e.target.closest('.gpo-inv-add-btn[data-pkgid]');
        if (pkgBtn) {
            const id = pkgBtn.getAttribute('data-pkgid');
            if (id) addPackage(id);
            return;
        }
        const partBtn = e.target.closest('.gpo-inv-add-btn[data-pid]');
        if (partBtn) {
            const pid = partBtn.getAttribute('data-pid');
            const qtyEl = document.querySelector('.gpo-line-qty[data-pid="' + pid + '"]');
            addPart(pid, qtyEl ? qtyEl.value : 1);
            renderInventory();
            return;
        }
        const del = e.target.closest('.js-del');
        if (del) {
            const tr = del.closest('tr');
            const idx = parseInt(tr.getAttribute('data-idx'), 10);
            lines.splice(idx, 1);
            renderLines();
            renderInventory();
            return;
        }
        const sdel = e.target.closest('.js-svc-del');
        if (sdel) {
            const tr = sdel.closest('tr');
            const idx = parseInt(tr.getAttribute('data-sidx'), 10);
            services.splice(idx, 1);
            renderServices();
            updateSummary();
            if (window.syncRoQuickAddHeight) window.syncRoQuickAddHeight();
            return;
        }
    });
    document.getElementById('gsLinesBody').addEventListener('input', function(e){
        const tr=e.target.closest('tr'); if(!tr) return;
        const idx=parseInt(tr.getAttribute('data-idx'),10); const L=lines[idx]; if(!L) return;
        var refreshInv = false;
        if(e.target.classList.contains('js-qty')) { L.quantity=Math.max(1,parseInt(e.target.value,10)||1); refreshInv = true; }
        if(e.target.classList.contains('js-price')) L.unit_price=Math.max(0,parseFloat(e.target.value)||0);
        if(e.target.classList.contains('js-disc')) L.discount_amount=Math.max(0,parseFloat(e.target.value)||0);
        if(e.target.classList.contains('js-disc-type')) L.discount_type=e.target.value;
        if(e.target.classList.contains('js-tax')) L.tax_rate=Math.max(0,parseFloat(e.target.value)||0);
        syncLineTotalInRow(tr, L);
        updateSummary();
        if (refreshInv) scheduleRenderInventory();
    });

    const svcBody = roSvcBodyEl();
    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(0,parseFloat(e.target.value)||0);
            if(e.target.classList.contains('js-svc-rate')) S.rate=Math.max(0,parseFloat(e.target.value)||0);
            if(e.target.classList.contains('js-svc-estmin')) S.estimated_minutes=Math.max(0,parseInt(e.target.value,10)||0);
            updateSummary();
        });
    }
    document.getElementById('gsHdrDiscVal').addEventListener('input', updateSummary);
    document.getElementById('gsFreight').addEventListener('input', updateSummary);
    document.getElementById('gsHdrDiscType').addEventListener('change', updateSummary);
    const gsAdvanceEl = document.getElementById('gsAdvance');
    if (gsAdvanceEl) gsAdvanceEl.addEventListener('input', updateSummary);

    // ---- Quick add services (left tab) ----
    let lastSvcFiltered = [];
    function renderQuickServicesList() {
        var roSvcSearchEl = document.getElementById('roSvcSearch');
        const q = (roSvcSearchEl && roSvcSearchEl.value ? roSvcSearchEl.value : '').toLowerCase().trim();
        const el = document.getElementById('roSvcList');
        const cnt = document.getElementById('roSvcCountQuick');
        if (!el) return;
        const 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) {
            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('');
        wireRoQuickServiceClicks();
    }

    const roSvcSearch = document.getElementById('roSvcSearch');
    if (roSvcSearch) {
        roSvcSearch.addEventListener('input', renderQuickServicesList);
        roSvcSearch.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];
            addQuickService(first.id, 1);
            e.target.select();
        });
        renderQuickServicesList();
    }

    const roPkgSearch = document.getElementById('roPkgSearch');
    if (roPkgSearch) {
        let t = null;
        roPkgSearch.addEventListener('input', function () {
            clearTimeout(t);
            t = setTimeout(function () { fetchPackages(roPkgSearch.value || ''); }, 200);
        });
        roPkgSearch.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('');
    }

    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();
        updateSummary();
    });
    document.getElementById('gsForm').addEventListener('submit', function(e){
        if(!lines.length && !services.length){ e.preventDefault(); alert('Add at least one part or service.'); return; }
        if(!document.getElementById('gsCustomer').value){ e.preventDefault(); alert('Select customer.'); return; }
        if(!document.getElementById('gsVehicle').value){ e.preventDefault(); alert('Select vehicle.'); return; }
        var leadEl = document.getElementById('roLeadEmployee');
        if (leadEl && leadEl.required && !leadEl.value) { e.preventDefault(); alert('Select assigned employee.'); return; }
        if (meterUi && !meterUi.validateForSubmit()) { e.preventDefault(); return; }
        const payload = lines.map(function (L) {
            return {
                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
            };
        });
        let 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);

        let 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 || null,
                garage_employee_id: S.garage_employee_id || null,
                garage_labor_category_id: S.garage_labor_category_id || null,
                hours: Number(S.hours) || 0,
                rate: Number(S.rate) || 0,
                estimated_minutes: (S.estimated_minutes !== null && S.estimated_minutes !== undefined) ? (parseInt(S.estimated_minutes, 10) || 0) : 0,
                notes: S.notes || '',
                started_at: S.started_at || null,
                completed_at: S.completed_at || null,
                title: S.title || null
            };
        }));
    });

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

    var meterUi = window.GrgMeterReading.init({
        vehicleSelectId: 'gsVehicle',
        inputId: 'roMeterReading',
        nextMeterInputId: 'roNextMeterReading',
        nextDateInputId: 'roNextServiceDate',
        hintId: 'roMeterHint',
        showWhenVehicleSelected: true,
        requireWhenVisible: true,
        autoFillFromHistory: true,
        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;
        if (!window.confirm('Replace current parts and services with data from the selected visit?')) return;
        window.GrgMeterReading.prefillAll({
            currentInputId: 'roMeterReading',
            nextMeterInputId: 'roNextMeterReading',
            nextDateInputId: 'roNextServiceDate',
            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,
                estimated_minutes: s.estimated_minutes != null ? (parseInt(s.estimated_minutes, 10) || 0) : 0,
                notes: s.notes || '',
                started_at: null,
                completed_at: null,
                title: s.title || null
            };
        });
        renderLines();
        renderServices();
        if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
        if (meterUi && meterUi.refresh) meterUi.refresh();
    }

    if (window.GrgVehicleHistoryModal) {
        window.GrgVehicleHistoryModal.watch({
            vehicleSelectId: 'gsVehicle',
            onApply: applyVehicleHistoryDoc,
            skipInitialPopup: true
        });
    }

    var customerVehicleLink = window.GarageCustomerVehicleLink.init({
        vehicles: VEHICLES,
        customersById: CUSTOMERS_BY_ID,
        initialVehicleId: @json(old('garage_vehicle_id', $repairOrder->garage_vehicle_id)),
        onVehicleChange: function () {
            if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
            if (meterUi && meterUi.refresh) meterUi.refresh();
        }
    });

    if (window.GrgCustomerVehicleQuickAdd) {
        window.GrgCustomerVehicleQuickAdd.init({ customerVehicleLink: customerVehicleLink });
    }

    wireRoQuickServiceClicks();
    renderInventory();
    renderLines();
    renderServices();
    syncAllOrderTableScroll();
    if (packageIds.length > 0 || 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);
    }

    // Fetch estimate by number and fill RO
    const estBtn = document.getElementById('roFetchEstBtn');
    if (estBtn) {
        estBtn.addEventListener('click', async function () {
            const no = (document.getElementById('roFetchEstNo').value || '').trim();
            if (!no) { alert('Enter estimate number'); return; }
            estBtn.disabled = true;
            try {
                const res = await fetch("{{ route('garage.api.lookup.estimate') }}?number=" + encodeURIComponent(no), { headers: { 'Accept': 'application/json' }});
                const data = await res.json();
                if (!res.ok) { alert(data.message || 'Not found'); return; }
                const est = data.estimate || {};
                const parts = data.parts || [];
                const svcs = data.services || [];

                if (est.customer_ledger_id) document.getElementById('gsCustomer').value = String(est.customer_ledger_id);
                setTimeout(function () {
                    if (customerVehicleLink && customerVehicleLink._setCustomerFromVehicle && est.garage_vehicle_id) {
                        customerVehicleLink._setCustomerFromVehicle(est.garage_vehicle_id);
                    } else if (customerVehicleLink && customerVehicleLink._rebuildVehicles) {
                        customerVehicleLink._rebuildVehicles(est.garage_vehicle_id || '', est.customer_ledger_id || null);
                    }
                    if (window.jQuery) {
                        jQuery('#gsCustomer').trigger('chosen:updated');
                        jQuery('#gsVehicle').trigger('chosen:updated');
                    }
                    window.GrgMeterReading.prefillAll({
                        currentInputId: 'roMeterReading',
                        nextMeterInputId: 'roNextMeterReading',
                        nextDateInputId: 'roNextServiceDate',
                        current: est.meter_reading,
                        next_meter_reading: est.next_meter_reading,
                        next_service_date: est.next_service_date
                    });
                    if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
                    if (meterUi && meterUi.refresh) meterUi.refresh();
                }, 0);

                const r = document.querySelector('#gsHdrDiscType input[name="discount_type"][value="' + (est.discount_type || 'fixed') + '"]');
                if (r) r.checked = true;
                document.getElementById('gsHdrDiscVal').value = String(est.discount_amount || 0);

                lines = parts.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
                    };
                });

                services = svcs.map(function (S) {
                    var svc = (GARAGE_SERVICES || []).find(function (x) { return String(x.id) === String(S.garage_service_id); });
                    var 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);
                    return {
                        garage_service_id: S.garage_service_id || null,
                        garage_employee_id: S.garage_employee_id || null,
                        hours: Number(S.hours) || 1,
                        rate: Number(S.rate) || 0,
                        estimated_minutes: mins,
                        notes: S.notes || '',
                        started_at: null,
                        completed_at: null,
                        title: S.title || null
                    };
                });

                renderLines();
            } catch (e) {
                alert('Fetch failed');
            } finally {
                estBtn.disabled = false;
            }
        });
    }
});
</script>
@include('garage.repair-orders.partials.quick-add-height-sync')
@endpush
@endsection