document.addEventListener('DOMContentLoaded', function () { let allModels = []; // store data globally for both dropdowns async function fetchAndPopulateModelDropdown() { try { const response = await fetch('https://zohoapi.mgmotor.com.au/get_models_for_book_a_test_drive.php?file_name=all_models.json'); // const response = await fetch('https://demoaspire.com/curl_example1/get_models_for_book_a_test_drive.php?file_name=all_models.json'); if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`); const data = await response.json(); allModels = data.result.Model_List || []; const dropdown = document.getElementById('modelDropdown'); dropdown.innerHTML = '-Select Model-'; // Get product title from URL if exists const urlParams = new URLSearchParams(window.location.search); let productTitle = urlParams.get('product'); let selectedFound = false; const normalize = str => str?.toLowerCase().replace(/^mg\s+/i, '').trim(); allModels.forEach(model => { const decodedDescription = model.Model_Generation_Description.replace(/ /g, ' ').trim(); const option = document.createElement('option'); option.value = decodedDescription; option.textContent = decodedDescription; if (productTitle && !selectedFound) { const normProduct = normalize(productTitle); const normModel = normalize(decodedDescription); if (normProduct === normModel) { option.selected = true; selectedFound = true; } } dropdown.appendChild(option); }); // Trigger Powertrain dropdown if model was auto-selected if (selectedFound) { populatePowertrainDropdown(dropdown.value); } } catch (error) { console.error('Error fetching model list:', error.message); } } function populatePowertrainDropdown(selectedModel) { const powertrainDropdown = document.getElementById('modelDropdown_powertain'); powertrainDropdown.innerHTML = '-Select Powertrain-'; if (!selectedModel) return; const normalize = str => str?.toLowerCase().replace(/^mg\s+/i, '').trim(); const modelMatch = allModels.find(model => normalize(model.Model_Generation_Description) === normalize(selectedModel) ); if (!modelMatch || !Array.isArray(modelMatch.Model_BATD_List)) return; const powertrains = modelMatch.Model_BATD_List; if (powertrains.length === 0) { powertrainDropdown.innerHTML += 'No Powertrain Available'; } else { powertrains.forEach(pt => { const option = document.createElement('option'); option.value = pt; option.textContent = pt; powertrainDropdown.appendChild(option); }); // ✅ Auto-select if only one powertrain exists if (powertrains.length === 1) { powertrainDropdown.value = powertrains[0]; } } } // Attach change listener to modelDropdown document.getElementById('modelDropdown').addEventListener('change', function () { populatePowertrainDropdown(this.value); }); // Fetch and populate model dropdown fetchAndPopulateModelDropdown(); });