@extends('garage.layouts.app')

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

@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-file-earmark-text',
    'title' => 'Estimate',
    'subtitle' => 'Create a quote with parts and services from quick add, then review totals on the right.',
])
@endsection

@section('content')
<div class="gpo-page gs-split-form-page gs-vf-page gs-est-page gs-ro-page container-fluid px-2 px-lg-3 py-2">
    <form method="POST" action="{{ route('garage.estimates.store') }}" id="estForm">
        @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', 0) }}">

        <div class="gpo-split">
            @include('garage.estimates.partials.quick-add-panel')

            <div class="gpo-panel gs-ro-detail-panel">
                @include('garage.partials.split-form-detail-header', [
                    'icon' => 'bi-file-earmark-text',
                    'title' => 'Estimate detail',
                    'numberLabel' => 'Estimate no.',
                    'numberName' => 'estimate_number',
                    'numberValue' => old('estimate_number', $estimateNumber),
                    'isCreate' => true,
                    'dateName' => 'estimate_date',
                    'dateValue' => old('estimate_date', date('Y-m-d')),
                    'historyUrl' => route('garage.estimates.index'),
                    'closeUrl' => route('garage.estimates.index'),
                    'saveLabel' => 'Save estimate',
                    'showCustomerVehicleQuickAdd' => true,
                ])
                <div class="gpo-panel-bd gs-ro-detail-bd">
                    <div class="gs-ro-detail-fields">
                    @if(session('error'))
                        <div class="alert alert-danger py-2 small mb-2">{{ session('error') }}</div>
                    @endif
                    @if($errors->any())
                        <div class="alert alert-danger py-2 small mb-2">
                            <ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                        </div>
                    @endif

                    @include('garage.estimates.partials.detail-panel-fields', [
                        'customers' => $customers,
                        'slots' => $slots ?? [],
                        'garageAdmin' => $garageAdmin,
                    ])

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

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

                    <div class="gs-ro-detail-footer">
                        <div class="mb-2 d-none" id="pkgSelectedCard">
                            <div class="p-2 rounded-3" style="border:1px solid rgba(var(--bs-primary-rgb), .18);background:#fff;">
                                <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="rounded-2 d-flex align-items-center justify-content-center" style="width:28px;height:28px;background:var(--bs-primary);color:#fff;"><i class="bi bi-box2-heart"></i></div>
                                        <div>
                                            <div class="small text-muted" style="font-weight:800;text-transform:uppercase;">Package</div>
                                            <div class="fw-bold text-dark small" id="pkgSelectedName">—</div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="small text-muted">Fixed: <strong id="pkgSelectedAmount">PKR 0.00</strong></span>
                                        <button type="button" class="btn btn-sm btn-outline-danger py-0 px-2" id="btnClearPackage">Clear</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="gpo-sum gs-ro-sum-h" id="gsSumBox">
                            <div class="gpo-sum-row"><span>Subtotal</span><span id="gsSumSub">PKR 0.00</span></div>
                            <div class="gpo-sum-row"><span>Tax</span><span id="gsSumTax">PKR 0.00</span></div>
                            <div class="gpo-sum-row"><span>Discount</span><span id="gsSumDisc">PKR 0.00</span></div>
                            <div class="gpo-sum-row"><span>Freight</span><span id="gsSumShip">PKR 0.00</span></div>
                            <div class="gpo-sum-row total"><span>Total</span><span id="gsSumTot">PKR 0.00</span></div>
                        </div>
                    </div>

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

@push('scripts')
@include('garage.partials.customer-vehicle-link-script')
@include('garage.partials.customer-vehicle-quick-add-script')
@include('garage.partials.vehicle-history-modal-script')
@include('garage.partials.ledger-label-helpers')
@include('garage.partials.meter-reading-script')
@include('garage.partials.parts-catalog-remote-script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    function getPart(id) {
        return window.GaragePartsCatalog.getSync(id);
    }
    const VEHICLES = @json($vehiclesForJs);
    const CUSTOMERS_BY_ID = @json($customersById ?? []);
    const SVC_CATS = @json($garageServiceCategories ?? []);
    const GARAGE_SERVICES = @json($garageServicesForJs ?? []);
    const LABORS = @json($laborsForJs ?? []);
    const SERVICE_GROUPS = @json($serviceGroupsForJs ?? []);
    const HAS_SLOTS = @json(!empty($slots) && count($slots) > 0);
    let lines = [];
    let services = [];
    let packageIds = [];
    let packageAmountTotal = 0;
    let lastInvFiltered = [];
    let lastPkgFiltered = [];

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

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

    // ---- Slot availability (date-wise, shared with repair orders) ----
    function fetchSlotAvailability(dateStr) {
        if (!HAS_SLOTS) return;
        var slotSel = document.getElementById('estSlotId');
        if (!slotSel) return;
        var curVal = String(slotSel.value || '');
        var url = '/garage/api/slots/availability?date=' + encodeURIComponent(String(dateStr || '')) + '&exclude_type=estimate';
        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 (window.jQuery) jQuery('#estSlotId').trigger('chosen:updated');
            })
            .catch(function () {});
    }

    var estDateInp = document.querySelector('input[name="estimate_date"]');
    if (estDateInp && HAS_SLOTS) {
        estDateInp.addEventListener('change', function () { fetchSlotAvailability(estDateInp.value); });
        fetchSlotAvailability(estDateInp.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 on this estimate';
        }
        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 stock = parseInt(p.stock_quantity, 10) || 0;
            const sb = stockBadge({ stock_quantity: stock });
            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) + '%';
            return '<div class="gpo-inv-row" data-pid="' + p.id + '">' +
                '<div class="gpo-inv-row-detail">' +
                '<div class="gpo-inv-row-top">' +
                '<span class="gpo-inv-sku" title="' + escapeHtml(String(code)) + '">' + escapeHtml(String(code)) + '</span>' +
                '<span class="gpo-inv-name" title="' + nm + '">' + nm + '</span></div>' +
                '<div class="gpo-inv-inline-meta">' + meta + '</div></div>' +
                '<div class="gpo-inv-row-actions">' +
                '<input type="number" min="1" value="1" class="gpo-inv-qty gpo-line-qty" data-pid="' + p.id + '" aria-label="Quantity">' +
                '<button type="button" class="gpo-inv-add-btn" data-pid="' + p.id + '" title="Add line"><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 q = Math.max(1, 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();
        });
    }

    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;
        const isInc = String(L.source || '') === 'package_included';
        cell.textContent = isInc ? '—' : money(lineCalc(L).total);
    }

    function renderLines() {
        const body = document.getElementById('gsLinesBody');
        if (!body) return;
        const cartBadge = document.getElementById('gsCartCount');
        if (cartBadge) cartBadge.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';
            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 + '"' + (isInc ? ' readonly' : '') + '></td>' +
                (isInc
                    ? '<td><input type="text" class="form-control form-control-sm" value="—" readonly></td>'
                    : '<td><input type="number" min="0" step="0.01" class="form-control form-control-sm js-price" value="' + L.unit_price + '"></td>') +
                (isInc
                    ? '<td><input type="text" class="form-control form-control-sm" value="—" readonly></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>') +
                (isInc
                    ? '<td><input type="text" class="form-control form-control-sm" value="—" readonly></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">' + (isInc ? '—' : 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 serviceName(S) {
        const svc = (GARAGE_SERVICES || []).find(function (x) { return String(x.id) === String(S.garage_service_id); });
        if (svc) return svc.name;
        if (S.legacy_type === 'labor') {
            const lab = (LABORS || []).find(function (x) { return String(x.id) === String(S.labor_id); });
            return lab ? lab.name : (S.title || 'Labor');
        }
        if (S.legacy_type === 'service_group') {
            const sg = (SERVICE_GROUPS || []).find(function (x) { return String(x.id) === String(S.service_group_id); });
            return sg ? sg.name : (S.title || 'Bundle');
        }
        return S.title || 'Service';
    }

    function renderServices() {
        const body = document.getElementById('roSvcBody');
        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 nm = serviceName(S);
                const c = serviceCalc(S);
                const isInc = String(S.source || '') === 'package_included';
                const rateRo = S.garage_service_id ? ' readonly' : '';
                const stepH = S.garage_service_id ? '1' : '0.25';
                const minH = S.garage_service_id ? '1' : '0.25';
                return '<tr data-sidx="' + i + '">' +
                    '<td><div class="fw-semibold">' + escapeHtml(nm) + '</div></td>' +
                    '<td><input type="number" min="' + minH + '" step="' + stepH + '" class="form-control form-control-sm js-svc-hours" value="' + (Number(S.hours)||1) + '"' + (isInc ? ' readonly' : '') + '></td>' +
                    (isInc
                        ? '<td><input type="text" class="form-control form-control-sm" value="—" readonly></td>'
                        : '<td><input type="number" min="0" step="0.01" class="form-control form-control-sm js-svc-rate" value="' + (Number(S.rate)||0) + '"' + rateRo + '></td>') +
                    '<td class="text-end fw-semibold">' + (isInc ? '—' : money(c.total)) + '</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');
        if (typeof meterUi !== 'undefined' && meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
    }

    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 discType = (document.querySelector('input[name="discount_type"]:checked')?.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);
    }

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

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

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

            items.forEach(function (it) {
                const t = String(it.item_type || '');
                const qty = Math.max(0.01, parseFloat(it.quantity) || 1);
                if (t === 'part' && it.garage_part_id) {
                    addPart(it.garage_part_id, 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
        }
    }

    var gsInvSearchEl = document.getElementById('gsInvSearch');
    if (gsInvSearchEl) {
        gsInvSearchEl.addEventListener('input', renderInventory);
        gsInvSearchEl.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.addEventListener('click', function (e) {
        const svcBtn = e.target.closest('[data-add-svc]');
        if (svcBtn) {
            const id = svcBtn.getAttribute('data-add-svc');
            const qtyEl = document.querySelector('input[data-sqty="' + id + '"]');
            const qty = Math.max(1, parseInt(qtyEl && qtyEl.value, 10) || 1);
            const svc = (GARAGE_SERVICES || []).find(function (x) { return String(x.id) === String(id); });
            if (svc) {
                services.push({ garage_service_id: Number(svc.id), legacy_type: null, labor_id: null, service_group_id: null, hours: qty, rate: Number(svc.price) || 0, notes: '', title: null });
                renderServices();
                updateSummary();
            }
            return;
        }
        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 btn = e.target.closest('.gpo-inv-add-btn[data-pid]');
        if (btn) {
            const pid = btn.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();
        }
    });
    var gsLinesBodyEl = document.getElementById('gsLinesBody');
    if (gsLinesBodyEl) gsLinesBodyEl.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 = document.getElementById('roSvcBody');
    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();
        });
    }
    var gsHdrDiscVal = document.getElementById('gsHdrDiscVal');
    var gsFreightEl = document.getElementById('gsFreight');
    var gsHdrDiscType = document.getElementById('gsHdrDiscType');
    if (gsHdrDiscVal) gsHdrDiscVal.addEventListener('input', updateSummary);
    if (gsFreightEl) gsFreightEl.addEventListener('input', updateSummary);
    if (gsHdrDiscType) gsHdrDiscType.addEventListener('change', updateSummary);

    // ---- Quick add services (left tab) ----
    let lastSvcFiltered = [];
    function renderQuickServicesList() {
        const q = (document.getElementById('roSvcSearch')?.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().includes(q);
        });
        lastSvcFiltered = list;
        if (cnt) cnt.textContent = String(list.length);
        if (!list.length) { el.innerHTML = '<div class="gpo-inv-empty">No matches.</div>'; return; }
        el.innerHTML = list.map(function (s) {
            const nm = escapeHtml(s.name || 'Service');
            const meta = 'Unit ' + moneyCompact(s.price || 0);
            return '<div class="gpo-inv-row">' +
                '<div class="gpo-inv-row-detail">' +
                    '<div class="gpo-inv-row-top">' +
                        '<span class="gpo-inv-name" title="' + nm + '">' + nm + '</span>' +
                    '</div>' +
                    '<div class="gpo-inv-inline-meta">' + meta + '</div>' +
                '</div>' +
                '<div class="gpo-inv-row-actions">' +
                    '<input type="number" min="1" step="1" value="1" class="gpo-inv-qty" data-sqty="' + s.id + '">' +
                    '<button type="button" class="gpo-inv-add-btn" data-add-svc="' + s.id + '"><span class="gpo-inv-add-lbl"><i class="bi bi-plus-lg"></i> Add</span></button>' +
                '</div>' +
            '</div>';
        }).join('');
    }

    const 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];
            services.push({ garage_service_id: Number(first.id), legacy_type: null, labor_id: null, service_group_id: null, hours: 1, rate: Number(first.price) || 0, notes: '', title: null });
            renderServices();
            updateSummary();
            e.target.select();
        });
        renderQuickServicesList();
    }

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

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

    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('estForm').addEventListener('submit', function (e) {
        if (!lines.length && !services.length) { e.preventDefault(); alert('Add at least one part or service.'); 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,
                legacy_type: S.legacy_type || null,
                labor_id: S.labor_id || null,
                service_group_id: S.service_group_id || null,
                hours: Number(S.hours) || 0,
                rate: Number(S.rate) || 0,
                notes: S.notes || '',
                title: S.title || null
            };
        }));
    });

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

    var meterUi = window.GrgMeterReading.init({
        vehicleSelectId: 'gsVehicle',
        inputId: 'estMeterReading',
        nextMeterInputId: 'estNextMeterReading',
        nextDateInputId: 'estNextServiceDate',
        hintId: 'estMeterHint',
        hasServices: function () {
            return (services || []).some(function (s) { return Number(s.garage_service_id) > 0; });
        },
        isVisible: function () { return !!document.getElementById('gsVehicle').value; },
        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: 'estMeterReading',
            nextMeterInputId: 'estNextMeterReading',
            nextDateInputId: 'estNextServiceDate',
            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,
                legacy_type: s.legacy_type || null,
                labor_id: null,
                service_group_id: null,
                garage_employee_id: s.garage_employee_id || null,
                hours: Number(s.hours) || 1,
                rate: Number(s.rate) || 0,
                notes: s.notes || '',
                title: s.title || null
            };
        });
        renderLines();
        if (meterUi && meterUi.syncVisibility) meterUi.syncVisibility();
        if (meterUi && meterUi.refresh) meterUi.refresh();
    }

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

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

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

    renderInventory();
    renderLines();
    renderServices();
});
</script>
@include('garage.repair-orders.partials.quick-add-height-sync')
@endpush
@endsection