submit"]'); if (submitButton) { submitButton.style.display = 'none'; console.log('Submit button hidden on initialization'); } } function showSubmitButton() { var submitButton = document.querySelector('button[type="submit"]'); if (submitButton) { submitButton.style.display = ''; console.log('Submit button shown'); } } function checkIfFormIsComplete() { var addressField = document.getElementById('41747b6a-dda5-44a3-b2f5-1867a97dea54'); var technicianField = document.getElementById('4cedd810-f209-4ffe-8e1c-ffe20deb9b97'); var pmField = document.getElementById('761b3a6c-0560-47c7-b957-de1aad18ede8'); var isComplete = true; if (addressField && (!addressField.value || addressField.value.trim() === '')) { isComplete = false; console.log('Address not filled'); } if (technicianField && (!technicianField.value || technicianField.value.trim() === '')) { isComplete = false; console.log('Technicians not selected'); } if (pmField && (!pmField.value || pmField.value.trim() === '')) { isComplete = false; console.log('Project Manager not selected'); } if (isComplete) { showSubmitButton(); } else { hideSubmitButtonInitially(); } } // ========== GOOGLE MAPS AUTOCOMPLETE ========== function initAddressAutocomplete() { const input = document.getElementById('41747b6a-dda5-44a3-b2f5-1867a97dea54'); if (!input) { console.error('Address input not found'); return; } const autocomplete = new google.maps.places.Autocomplete(input, { types: ['address'], componentRestrictions: { country: ['ca'] }, fields: ['formatted_address', 'geometry', 'place_id', 'url'] }); autocomplete.addListener('place_changed', () => { const place = autocomplete.getPlace(); if (!place.geometry) { console.warn('No details available for selected place'); return; } input.value = place.formatted_address || ''; input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true })); console.log('Address selected and events dispatched:', place.formatted_address); checkIfFormIsComplete(); }); input.addEventListener('input', function() { setTimeout(checkIfFormIsComplete, 500); }); console.log('Google Maps Autocomplete initialized on input by ID'); } (function loadGoogleMaps() { if (window.google && window.google.maps && window.google.maps.places) { initAddressAutocomplete(); } else { window.initAddressAutocomplete = initAddressAutocomplete; const script = document.createElement('script'); script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDDVi1ju3sd5X6kCAxVQONxADax-srOERo&libraries=places&callback=initAddressAutocomplete'; script.async = true; script.defer = true; document.head.appendChild(script); } })(); // ========== TECHNICIAN CHECKBOX LIST WITH ADD NEW ========== function initTechnicianDropdown() { const textField = document.getElementById('4cedd810-f209-4ffe-8e1c-ffe20deb9b97'); if (!textField) { console.error('Technician text field not found'); return; } textField.style.display = 'none'; const fieldContainer = textField.closest('.relative') || textField.parentElement; const dropdownContainer = document.createElement('div'); dropdownContainer.style.cssText = 'margin-bottom: 16px;'; const label = document.createElement('label'); label.style.cssText = 'display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #374151;'; label.textContent = 'Technicians'; const checkboxContainer = document.createElement('div'); checkboxContainer.id = 'technician-checkboxes'; checkboxContainer.style.cssText = 'padding: 12px; border: 2px solid #e5e7eb; border-radius: 6px; background-color: white; max-height: 200px; overflow-y: auto;'; // Add New Technician Button const addNewButton = document.createElement('button'); addNewButton.type = 'button'; addNewButton.textContent = '+ Add New Technician'; addNewButton.style.cssText = 'width: 100%; margin-top: 8px; padding: 10px; background-color: #3b82f6; color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s;'; addNewButton.onmouseover = function() { this.style.backgroundColor = '#2563eb'; }; addNewButton.onmouseout = function() { this.style.backgroundColor = '#3b82f6'; }; // Add New Technician Form (hidden by default) const addNewForm = document.createElement('div'); addNewForm.id = 'add-technician-form'; addNewForm.style.cssText = 'display: none; margin-top: 12px; padding: 16px; border: 2px solid #3b82f6; border-radius: 6px; background-color: #eff6ff;'; addNewForm.innerHTML = `

Add New Technician

Name *

Phone Number

`; const statusDiv = document.createElement('div'); statusDiv.id = 'technician-status'; statusDiv.style.cssText = 'margin-top: 8px; font-size: 13px; display: none;'; dropdownContainer.appendChild(label); dropdownContainer.appendChild(checkboxContainer); dropdownContainer.appendChild(addNewButton); dropdownContainer.appendChild(addNewForm); dropdownContainer.appendChild(statusDiv); if (fieldContainer) { fieldContainer.insertBefore(dropdownContainer, textField); } // Add New Button Click addNewButton.addEventListener('click', function() { addNewForm.style.display = 'block'; addNewButton.style.display = 'none'; document.getElementById('new-tech-name').value = ''; document.getElementById('new-tech-phone').value = ''; document.getElementById('new-tech-email').value = ''; }); // Cancel Button Click document.getElementById('cancel-new-tech').addEventListener('click', function() { addNewForm.style.display = 'none'; addNewButton.style.display = 'block'; }); // Phone Number Formatting (for display only) document.getElementById('new-tech-phone').addEventListener('input', function(e) { let value = e.target.value.replace(/\D/g, ''); // Remove non-digits // Format as (XXX) XXX-XXXX for display if (value.length > 0) { if (value.length <= 3) { value = '(' + value; } else if (value.length <= 6) { value = '(' + value.substring(0, 3) + ') ' + value.substring(3); } else { value = '(' + value.substring(0, 3) + ') ' + value.substring(3, 6) + '-' + value.substring(6, 10); } } e.target.value = value; }); // Save New Technician Button Click document.getElementById('save-new-tech').addEventListener('click', function() { const name = document.getElementById('new-tech-name').value.trim(); const phoneFormatted = document.getElementById('new-tech-phone').value.trim(); const email = document.getElementById('new-tech-email').value.trim(); if (!name) { showAddTechStatus('error', 'Name is required'); return; } // Remove all formatting and prepend +1 (digits only) const phoneDigitsOnly = phoneFormatted.replace(/\D/g, ''); // Remove all non-digits const fullPhone = phoneDigitsOnly ? '+1' + phoneDigitsOnly : ''; // Save to NocoDB with clean phone number saveNewTechnician(name, fullPhone, email); }); function saveNewTechnician(name, phone, email) { const apiUrl = 'https://nocodb.centrumconcierge.net/api/v2/tables/mgcfkct9cdfixcb/records'; const payload = { "Name": name, "Phone Number": phone, "Email": email, }; console.log('Saving technician with phone:', phone); // Debug log showAddTechStatus('info', 'Saving technician...'); fetch(apiUrl, { method: 'POST', headers: { 'xc-token': '9n2CUNslkJmK0NwvifQL4SiFDlEAMv_DmwhUm-hD', 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }) .then(function(response) { if (!response.ok) throw new Error('Failed to save technician'); return response.json(); }) .then(function(data) { showAddTechStatus('success', 'Technician added successfully!'); setTimeout(function() { addNewForm.style.display = 'none'; addNewButton.style.display = 'block'; fetchTechnicians(); setTimeout(function() { const checkboxes = checkboxContainer.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(function(cb) { if (cb.value === name) { cb.checked = true; } }); updateTextField(); }, 500); }, 1000); }) .catch(function(error) { console.error('Error saving technician:', error); showAddTechStatus('error', 'Failed to save technician. Please try again.'); }); } function showAddTechStatus(type, message) { const statusEl = document.getElementById('add-tech-status'); statusEl.textContent = message; statusEl.style.display = 'block'; if (type === 'success') { statusEl.style.color = '#10b981'; } else if (type === 'error') { statusEl.style.color = '#ef4444'; } else { statusEl.style.color = '#3b82f6'; } } fetchTechnicians(); function fetchTechnicians() { const apiUrl = 'https://nocodb.centrumconcierge.net/api/v2/tables/mgcfkct9cdfixcb/records?limit=100'; fetch(apiUrl, { method: 'GET', headers: { 'xc-token': '9n2CUNslkJmK0NwvifQL4SiFDlEAMv_DmwhUm-hD', 'Content-Type': 'application/json' } }) .then(function(response) { if (!response.ok) throw new Error('API error: ' + response.status); return response.json(); }) .then(function(data) { checkboxContainer.innerHTML = ''; if (data.list && data.list.length > 0) { const firstRecord = data.list[0]; const fieldNames = Object.keys(firstRecord).filter(function(key) { return key !== 'Id' && key !== 'CreatedAt' && key !== 'UpdatedAt'; }); const nameField = fieldNames[0]; data.list.forEach(function(technician, index) { const techName = technician[nameField]; const checkboxWrapper = document.createElement('div'); checkboxWrapper.style.cssText = 'padding: 8px; margin-bottom: 4px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s;'; checkboxWrapper.onmouseover = function() { this.style.backgroundColor = '#f3f4f6'; }; checkboxWrapper.onmouseout = function() { this.style.backgroundColor = 'transparent'; }; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.id = 'tech-' + index; checkbox.value = techName; checkbox.style.cssText = 'margin-right: 8px; cursor: pointer; width: 16px; height: 16px;'; const labelEl = document.createElement('label'); labelEl.htmlFor = 'tech-' + index; labelEl.textContent = techName; labelEl.style.cssText = 'cursor: pointer; font-size: 14px; color: #374151;'; checkboxWrapper.appendChild(checkbox); checkboxWrapper.appendChild(labelEl); checkboxContainer.appendChild(checkboxWrapper); checkbox.addEventListener('change', updateTextField); }); showStatus('success', 'Loaded ' + data.list.length + ' technicians'); } else { checkboxContainer.innerHTML = '

No technicians found

'; showStatus('error', 'No technicians found'); } }) .catch(function(error) { console.error('Failed to fetch technicians:', error); checkboxContainer.innerHTML = '

Failed to load technicians

'; showStatus('error', 'Failed to load technicians'); }); } function updateTextField() { const checkboxes = checkboxContainer.querySelectorAll('input[type="checkbox"]:checked'); const selectedValues = Array.from(checkboxes).map(cb => cb.value); textField.value = selectedValues.join(', '); textField.dispatchEvent(new Event('input', { bubbles: true })); textField.dispatchEvent(new Event('change', { bubbles: true })); if (selectedValues.length > 0) { showStatus('success', 'Selected ' + selectedValues.length + ' technician(s)'); } else { showStatus('success', 'No technicians selected'); } checkIfFormIsComplete(); } function showStatus(type, message) { statusDiv.textContent = message; statusDiv.style.display = 'block'; statusDiv.style.color = type === 'success' ? '#10b981' : '#ef4444'; setTimeout(function() { statusDiv.style.display = 'none'; }, 3000); } console.log('Technician checkbox list with Add New initialized'); } // ========== PROJECT MANAGER SINGLE-SELECT DROPDOWN ========== function initProjectManagerDropdown() { const textField = document.getElementById('761b3a6c-0560-47c7-b957-de1aad18ede8'); if (!textField) { console.error('Project Manager text field not found'); return; } textField.style.display = 'none'; const fieldContainer = textField.closest('.relative') || textField.parentElement; const dropdownContainer = document.createElement('div'); dropdownContainer.style.cssText = 'margin-bottom: 16px;'; const label = document.createElement('label'); label.style.cssText = 'display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #374151;'; label.textContent = 'Project Manager'; const dropdown = document.createElement('select'); dropdown.id = 'pm-dropdown'; dropdown.style.cssText = 'width: 100%; padding: 10px 12px; border: 2px solid #e5e7eb; border-radius: 6px; font-size: 14px; background-color: white; cursor: pointer;'; const defaultOption = document.createElement('option'); defaultOption.value = ''; defaultOption.textContent = 'Loading project managers...'; defaultOption.disabled = true; defaultOption.selected = true; dropdown.appendChild(defaultOption); const statusDiv = document.createElement('div'); statusDiv.id = 'pm-status'; statusDiv.style.cssText = 'margin-top: 8px; font-size: 13px; display: none;'; dropdownContainer.appendChild(label); dropdownContainer.appendChild(dropdown); dropdownContainer.appendChild(statusDiv); if (fieldContainer) { fieldContainer.insertBefore(dropdownContainer, textField); } fetchProjectManagers(); function fetchProjectManagers() { const apiUrl = 'https://nocodb.centrumconcierge.net/api/v2/tables/me2jxjc7ylmmif5/records?limit=100'; fetch(apiUrl, { method: 'GET', headers: { 'xc-token': '9n2CUNslkJmK0NwvifQL4SiFDlEAMv_DmwhUm-hD', 'Content-Type': 'application/json' } }) .then(function(response) { if (!response.ok) throw new Error('API error: ' + response.status); return response.json(); }) .then(function(data) { dropdown.innerHTML = ''; const selectOption = document.createElement('option'); selectOption.value = ''; selectOption.textContent = 'Select a project manager'; selectOption.disabled = true; selectOption.selected = true; dropdown.appendChild(selectOption); if (data.list && data.list.length > 0) { const firstRecord = data.list[0]; const fieldNames = Object.keys(firstRecord).filter(function(key) { return key !== 'Id' && key !== 'CreatedAt' && key !== 'UpdatedAt'; }); const nameField = fieldNames[0]; data.list.forEach(function(pm) { const option = document.createElement('option'); const pmName = pm[nameField]; option.value = pmName; option.textContent = pmName; dropdown.appendChild(option); }); showStatus('success', 'Loaded ' + data.list.length + ' project managers'); } else { showStatus('error', 'No project managers found'); } }) .catch(function(error) { console.error('Failed to fetch project managers:', error); showStatus('error', 'Failed to load project managers'); }); } dropdown.addEventListener('change', function(e) { const selectedValue = e.target.value; textField.value = selectedValue; textField.dispatchEvent(new Event('input', { bubbles: true })); textField.dispatchEvent(new Event('change', { bubbles: true })); if (selectedValue) { showStatus('success', 'Selected: ' + selectedValue); } checkIfFormIsComplete(); }); function showStatus(type, message) { statusDiv.textContent = message; statusDiv.style.display = 'block'; statusDiv.style.color = type === 'success' ? '#10b981' : '#ef4444'; setTimeout(function() { statusDiv.style.display = 'none'; }, 3000); } console.log('Project Manager dropdown initialized'); } // ========== INITIALIZE ALL ========== (function initAll() { hideForm(); if (!checkPassword()) { return; } showForm(); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { hideSubmitButtonInitially(); initTechnicianDropdown(); initProjectManagerDropdown(); console.log('✓ Form initialized with all features'); }, 1500); }); } else { setTimeout(function() { hideSubmitButtonInitially(); initTechnicianDropdown(); initProjectManagerDropdown(); console.log('✓ Form initialized with all features'); }, 1500); } })();

Job Generator