{{-- Bidirectional customer ↔ vehicle Chosen dropdowns (search by plate or customer name). --}}
@php
    $customerSelectId = $customerSelectId ?? 'gsCustomer';
    $vehicleSelectId = $vehicleSelectId ?? 'gsVehicle';
    $vehicleWarnId = $vehicleWarnId ?? null;
    $initialVehicleId = $initialVehicleId ?? null;
    $vehiclesVar = $vehiclesVar ?? 'VEHICLES';
    $customersByIdVar = $customersByIdVar ?? 'CUSTOMERS_BY_ID';
@endphp
<script>
(function () {
    window.GarageCustomerVehicleLink = {
        init: function (opts) {
            opts = opts || {};
            var vehicles = opts.vehicles || (typeof window[opts.vehiclesVar || 'VEHICLES'] !== 'undefined' ? window[opts.vehiclesVar || 'VEHICLES'] : []);
            var customersById = opts.customersById || (typeof window[opts.customersByIdVar || 'CUSTOMERS_BY_ID'] !== 'undefined' ? window[opts.customersByIdVar || 'CUSTOMERS_BY_ID'] : {});
            var custSel = document.getElementById(opts.customerSelectId || 'gsCustomer');
            var vehSel = document.getElementById(opts.vehicleSelectId || 'gsVehicle');
            if (!custSel || !vehSel) return opts;
            if (!Array.isArray(vehicles)) vehicles = [];

            var warnEl = opts.vehicleWarnId ? document.getElementById(opts.vehicleWarnId) : null;
            var linking = false;
            var bootstrapping = true;
            var initialVehicleId = opts.initialVehicleId != null ? String(opts.initialVehicleId) : '';

            function isEnabled() {
                if (typeof opts.isEnabled === 'function') return !!opts.isEnabled();
                return !custSel.disabled && !vehSel.disabled;
            }

            function chosenRefresh(el) {
                if (!window.jQuery || !window.jQuery.fn || !window.jQuery.fn.chosen) return;
                var $el = window.jQuery(el);
                if ($el.data('chosen')) {
                    $el.trigger('chosen:updated');
                }
            }

            function notifyVehicleChanged() {
                if (bootstrapping) return;
                var vid = String(vehSel.value || '').trim();
                try {
                    vehSel.dispatchEvent(new CustomEvent('garage-vehicle-changed', {
                        bubbles: true,
                        detail: { vehicleId: vid },
                    }));
                } catch (e) { /* ignore */ }
            }

            function vehicleOptionLabel(v) {
                return v.dropdown_label || v.label || ('Vehicle #' + v.id);
            }

            function appendVehicleOption(sel, v, selectedId) {
                var o = document.createElement('option');
                o.value = String(v.id);
                o.setAttribute('data-customer', String(v.customer_ledger_id));
                o.textContent = vehicleOptionLabel(v);
                if (selectedId && String(v.id) === String(selectedId)) o.selected = true;
                sel.appendChild(o);
            }

            function rebuildVehicleOptions(selectedId, filterCustomerId, listOverride) {
                if (!isEnabled()) return;
                var prev = selectedId != null ? String(selectedId) : String(vehSel.value || '');
                var custId = filterCustomerId != null ? String(filterCustomerId) : String(custSel.value || '');
                var list = Array.isArray(listOverride) ? listOverride.slice() : vehicles.slice();
                if (!Array.isArray(listOverride) && custId) {
                    list = list.filter(function (v) { return String(v.customer_ledger_id) === custId; });
                }

                var placeholder = custId
                    ? (list.length === 1 ? '— Vehicle —' : '— Select vehicle (' + list.length + ') —')
                    : '— Plate, model, or customer —';
                vehSel.innerHTML = '<option value="">' + placeholder + '</option>';
                list.forEach(function (v) {
                    var autoSingle = !prev && list.length === 1;
                    var isSelected = (prev && String(v.id) === prev) || (autoSingle && String(v.id) === String(list[0].id));
                    appendVehicleOption(vehSel, v, isSelected ? String(v.id) : '');
                });

                if (prev && list.some(function (v) { return String(v.id) === prev; })) {
                    vehSel.value = prev;
                } else if (!prev && list.length === 1) {
                    vehSel.value = String(list[0].id);
                } else if (!list.some(function (v) { return String(v.id) === String(vehSel.value); })) {
                    vehSel.value = '';
                }

                if (warnEl) {
                    if (custId && list.length === 0) warnEl.classList.remove('d-none');
                    else warnEl.classList.add('d-none');
                }

                chosenRefresh(vehSel);
                notifyVehicleChanged();
                if (typeof opts.onVehicleChange === 'function') opts.onVehicleChange();
            }

            function setCustomerFromVehicle(vehicleId) {
                var v = vehicles.find(function (x) { return String(x.id) === String(vehicleId); });
                if (!v) return;
                linking = true;
                custSel.value = String(v.customer_ledger_id);
                chosenRefresh(custSel);
                rebuildVehicleOptions(vehicleId, v.customer_ledger_id);
                linking = false;
            }

            function onCustomerChange() {
                if (linking || !isEnabled()) return;
                var custId = custSel.value;
                var keep = vehSel.value && vehicles.some(function (v) {
                    return String(v.id) === String(vehSel.value) && (!custId || String(v.customer_ledger_id) === String(custId));
                }) ? vehSel.value : '';
                if (!custId) {
                    rebuildVehicleOptions(keep, null);
                    return;
                }
                var list = vehicles.filter(function (v) { return String(v.customer_ledger_id) === String(custId); });
                if (list.length === 1) keep = String(list[0].id);
                rebuildVehicleOptions(keep, custId);
            }

            function onVehicleChange() {
                if (linking || !isEnabled()) return;
                var vid = vehSel.value;
                if (!vid) {
                    notifyVehicleChanged();
                    if (typeof opts.onVehicleChange === 'function') opts.onVehicleChange();
                    return;
                }
                setCustomerFromVehicle(vid);
            }

            custSel.addEventListener('change', function () {
                setTimeout(onCustomerChange, 0);
            });
            vehSel.addEventListener('change', function () {
                setTimeout(onVehicleChange, 0);
            });
            if (window.jQuery) {
                window.jQuery(custSel).off('change.grgCv').on('change.grgCv', function () { setTimeout(onCustomerChange, 0); });
                window.jQuery(vehSel).off('change.grgCv').on('change.grgCv', function () { setTimeout(onVehicleChange, 0); });
            }

            opts._rebuildVehicles = rebuildVehicleOptions;
            opts._setCustomerFromVehicle = setCustomerFromVehicle;

            function registerCustomer(customer) {
                if (!customer || !customer.id) return;
                var id = String(customer.id);
                var label = customer.label || customer.short_label || customer.name || ('Customer #' + id);
                var exists = Array.prototype.some.call(custSel.options, function (o) { return o.value === id; });
                if (!exists) {
                    var o = document.createElement('option');
                    o.value = id;
                    o.textContent = label;
                    custSel.appendChild(o);
                }
                customersById[parseInt(id, 10)] = {
                    id: parseInt(id, 10),
                    name: customer.name || label,
                    label: label,
                    short_label: customer.short_label || customer.name || label,
                };
                if (typeof window[opts.customersByIdVar || 'CUSTOMERS_BY_ID'] !== 'undefined') {
                    window[opts.customersByIdVar || 'CUSTOMERS_BY_ID'] = customersById;
                }
                linking = true;
                custSel.value = id;
                chosenRefresh(custSel);
                onCustomerChange();
                linking = false;
            }

            function registerVehicle(vehicle, regOpts) {
                regOpts = regOpts || {};
                if (!vehicle || !vehicle.id) return;
                var vid = String(vehicle.id);
                var existsIdx = vehicles.findIndex(function (v) { return String(v.id) === vid; });
                if (existsIdx >= 0) {
                    vehicles[existsIdx] = Object.assign({}, vehicles[existsIdx], vehicle);
                } else {
                    vehicles.push(vehicle);
                }
                if (typeof window[opts.vehiclesVar || 'VEHICLES'] !== 'undefined') {
                    window[opts.vehiclesVar || 'VEHICLES'] = vehicles;
                }
                var custId = vehicle.customer_ledger_id ? String(vehicle.customer_ledger_id) : String(custSel.value || '');
                if (custId && custSel.value !== custId) {
                    registerCustomer({
                        id: parseInt(custId, 10),
                        name: vehicle.customer_label || '',
                        label: vehicle.customer_label || '',
                        short_label: vehicle.customer_label || '',
                    });
                }
                linking = true;
                rebuildVehicleOptions(regOpts.select ? vid : (vehSel.value || ''), custId || null);
                if (regOpts.select) {
                    vehSel.value = vid;
                    chosenRefresh(vehSel);
                    notifyVehicleChanged();
                }
                linking = false;
                if (typeof opts.onVehicleChange === 'function') opts.onVehicleChange();
            }

            opts.registerCustomer = registerCustomer;
            opts.registerVehicle = registerVehicle;

            if (initialVehicleId) {
                setCustomerFromVehicle(initialVehicleId);
            } else {
                rebuildVehicleOptions(vehSel.value || '', custSel.value || null);
            }
            bootstrapping = false;

            if (window.jQuery && window.jQuery.fn && window.jQuery.fn.chosen) {
                var $veh = window.jQuery(vehSel);
                var chosenOpts = {
                    width: '100%',
                    search_contains: true,
                    allow_single_deselect: true,
                    placeholder_text_single: vehSel.getAttribute('data-placeholder') || 'Plate, model, or customer…',
                };
                if (!$veh.data('chosen')) {
                    $veh.chosen(chosenOpts);
                } else {
                    $veh.trigger('chosen:updated');
                }
            }

            return opts;
        }
    };
})();
</script>