#48 - Autocomplete Address Inputs v0.1

<!-- 💙 MEMBERSCRIPT #48 v0.2 💙 AUTOFILL ADDRESS INPUTS -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&libraries=places&loading=async" async defer></script>
<style>
.pac-logo::after {
  display: none;
}
.pac-container {
  border-radius: 5px;
  border: 1px solid #ccc;
}
.pac-item {
  padding: 0 10px;
}
.api-key-error {
  background-color: #fee;
  border: 1px solid #fcc;
  border-radius: 5px;
  padding: 15px;
  margin: 10px 0;
  color: #c33;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
.api-key-error strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}
.api-key-error ol {
  margin: 8px 0 0 20px;
}
.api-key-error li {
  margin: 4px 0;
}
</style>

<!-- MEMBERSCRIPT #48 v0.2 💙 AUTOFILL ADDRESS INPUTS -->
<script>
function initAutocomplete() {
  // Check if API key is still the placeholder
  const scriptTag = document.querySelector('script[src*="maps.googleapis.com"]');
  if (scriptTag && scriptTag.src.includes('YOUR-API-KEY')) {
    showApiKeyError();
    return;
  }

  const addressInput = document.querySelector('input[ms-code-input="address"]');
  
  if (!addressInput) {
    console.log('No address input found with ms-code-input="address"');
    return;
  }

  const autocomplete = new google.maps.places.Autocomplete(addressInput, {
    fields: ['address_components'],
    types: ['address']
  });

  autocomplete.addListener('place_changed', function() {
    const place = autocomplete.getPlace();

    if (place && place.address_components) {
      const addressInput = document.querySelector('input[ms-code-input="address"]');
      const cityInput = document.querySelector('input[ms-code-input="city"]');
      const regionInput = document.querySelector('input[ms-code-input="region"]');
      const countryInput = document.querySelector('input[ms-code-input="country"]');
      const postalCodeInput = document.querySelector('input[ms-code-input="postal-code"]');

      if (addressInput) addressInput.value = extractAddress(place);
      if (cityInput) cityInput.value = extractCity(place);
      if (regionInput) regionInput.value = extractRegion(place);
      if (countryInput) countryInput.value = extractCountry(place);
      if (postalCodeInput) postalCodeInput.value = extractPostalCode(place);
    }
  });
}

function showApiKeyError() {
  const errorDiv = document.createElement('div');
  errorDiv.className = 'api-key-error';
  errorDiv.innerHTML = `
    <strong>⚠️ Google Maps API Key Required</strong>
    To use address autocomplete, you need to add your Google Maps API key:
    <ol>
      <li>Go to <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a></li>
      <li>Create a project or select existing one</li>
      <li>Enable "Places API" and "Maps JavaScript API"</li>
      <li>Create an API key in "APIs & Services" → "Credentials"</li>
      <li>Replace "YOUR-API-KEY" in the script with your actual API key</li>
    </ol>
  `;
  
  // Insert the error message before the first form or at the top of the page
  const form = document.querySelector('form');
  if (form) {
    form.parentNode.insertBefore(errorDiv, form);
  } else {
    document.body.insertBefore(errorDiv, document.body.firstChild);
  }
}

function extractAddress(place) {
  let address = '';
  const streetNumber = extractComponent(place, 'street_number');
  const route = extractComponent(place, 'route');

  if (streetNumber) {
    address += streetNumber + ' ';
  }
  if (route) {
    address += route;
  }

  return address.trim();
}

function extractComponent(place, componentType) {
  for (const component of place.address_components) {
    if (component.types.includes(componentType)) {
      return component.long_name;
    }
  }
  return '';
}

function extractCity(place) {
  for (const component of place.address_components) {
    if (component.types.includes('locality')) {
      return component.long_name;
    }
  }
  return '';
}

function extractRegion(place) {
  for (const component of place.address_components) {
    if (component.types.includes('administrative_area_level_1')) {
      return component.long_name;
    }
  }
  return '';
}

function extractCountry(place) {
  for (const component of place.address_components) {
    if (component.types.includes('country')) {
      return component.long_name;
    }
  }
  return '';
}

function extractPostalCode(place) {
  for (const component of place.address_components) {
    if (component.types.includes('postal_code')) {
      return component.long_name;
    }
  }
  return '';
}

// Initialize when Google Maps is ready
document.addEventListener('DOMContentLoaded', function() {
  if (typeof google !== 'undefined' && google.maps && google.maps.places) {
    initAutocomplete();
  } else {
    window.addEventListener('load', function() {
      if (typeof google !== 'undefined' && google.maps && google.maps.places) {
        initAutocomplete();
      }
    });
  }
});
</script>