@extends('garage.layouts.app')

@section('title', 'New '.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-wrench-adjustable',
    'title' => $glOrder ?? 'Order',
    'subtitle' => 'Create a work-in-progress '.strtolower($glOrder ?? 'order').'. You can keep editing it during repair, then create final sale invoice from it.',
])
@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.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') }}">

        <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', [
                    'isCreate' => true,
                    'repairOrderNumber' => old('repair_order_number', $repairOrderNumber),
                    'repairOrderDate' => old('repair_order_date', date('Y-m-d')),
                    'closeUrl' => route('garage.repair-orders.index'),
                ])
                <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', [
                        'isCreate' => true,
                        'showLeadField' => $showLeadField ?? false,
                        'employeesForLead' => $employeesForLead ?? collect(),
                        'showWarehousePicker' => $showWarehousePicker ?? false,
                        'warehouseCtx' => $warehouseCtx ?? [],
                        'warehouseDefaults' => $warehouseDefaults ?? [],
                        'selectedCustomerId' => old('customer_ledger_id'),
                        'selectedSlotId' => old('slot_id'),
                        'selectedLeadId' => old('lead_garage_employee_id'),
                        'selectedStatus' => old('status', 'in_progress'),
                        'warehouseFieldPrefix' => 'roWh',
                    ])

                    <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','fixed')==='fixed')><span>Fixed PKR</span></label>
                                    <label class="gpo-disc-pill"><input type="radio" name="discount_type" value="percentage" @checked(old('discount_type')==='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', 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', 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--5 mb-0" id="roSvcTbl">
                                            <thead>
                                                <tr>
                                                    <th>Service</th>
                                                    <th>Hours</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')
                    </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 SVC_CATS = @json($garageServiceCategories ?? []);
    const GARAGE_SERVICES = @json($garageServicesForJs ?? []);
    const HAS_SLOTS = @json(!empty($slots) && count($slots) > 0);
    let lines = [];
    let services = [];
    let packageIds = [];
    let packageAmountTotal = 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 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;');
    }

    // ---- 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';
        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 : [];
                // rebuild options: show only free 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);
                }
                // restore selection if still available
                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') 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 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);
    }

    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 pkgLastQuery = '';
    let pkgLoading = false;

    async function fetchPackages(q) {
        const query = (q || '').trim();
        pkgLastQuery = query;
        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('');
    }

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

            const beforeParts = lines.reduce(function (sum, L) { return sum + (lineCalc(L).net || 0); }, 0);
            const beforeServices = services.reduce(function (sum, S) { return sum + (serviceCalc(S).total || 0); }, 0);

            // 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
        }
    }

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

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

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

    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 = String(L.source || '') === 'package_included' ? '—' : 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);
            const meta = ('<div class="small text-muted">' + escapeHtml(L.inventory_code_snapshot || '') + '</div>');
            const isInc = String(L.source || '') === 'package_included';
            const priceCell = 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-price" value="' + L.unit_price + '">';
            const discCell = isInc
                ? '<input type="text" class="form-control form-control-sm" value="—" readonly>'
                : '<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>';
            const taxCell = 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-tax" value="' + (L.tax_rate||0) + '">';
            const totalCell = isInc ? '—' : money(c.total);
            return '<tr data-idx="' + i + '">' +
                '<td><div class="fw-semibold">' + escapeHtml(L.product_name) + '</div>' + meta + '</td>' +
                '<td><input type="number" min="1" class="form-control form-control-sm js-qty" value="' + L.quantity + '"></td>' +
                '<td>' + priceCell + '</td>' +
                '<td>' + discCell + '</td>' +
                '<td>' + taxCell + '</td>' +
                '<td class="text-end fw-semibold js-line-total">' + totalCell + '</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="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 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);
                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('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);
        });
    }

    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.
        const elSub = document.getElementById('gsSumSub');
        const elTax = document.getElementById('gsSumTax');
        const elDisc = document.getElementById('gsSumDisc');
        const elShip = document.getElementById('gsSumShip');
        const elTot = document.getElementById('gsSumTot');
        if (elSub) elSub.textContent = money(sub);
        if (elTax) elTax.textContent = money(tax);
        if (elDisc) elDisc.textContent = money(hdrDisc);
        if (elShip) elShip.textContent = money(freight);
        if (elTot) elTot.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);
    }

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

    // service add UI moved to left Quick add tab (roQuickSvc*)

    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,
                garage_labor_category_id: S.garage_labor_category_id || null,
                hours: Number(S.hours) || 0,
                rate: Number(S.rate) || 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;
        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();
        if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
        if (meterUi && meterUi.refresh) meterUi.refresh();
    }

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

    var customerVehicleLink = window.GarageCustomerVehicleLink.init({
        vehicles: VEHICLES,
        customersById: CUSTOMERS_BY_ID,
        initialVehicleId: @json(old('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();

    // 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