<form id="momentForm" enctype="multipart/form-data">
<input type="text" id="business_name" name="business_name" placeholder="Business Name" required>
<input type="text" id="customer_name" name="customer_name" placeholder="Customer Name" required>
<input type="text" id="caption" name="caption" placeholder="Caption" required>
<!-- Google Maps modern autocomplete -->
<gmpx-place-autocomplete

    id="addressAutocomplete"

    style="width:100%; display:inline-block;"

    placeholder="Enter Address"
></gmpx-place-autocomplete>
<!-- Hidden input for selected address -->
<input type="hidden" id="address" name="address" required>
<input type="file" id="photo" name="photo" accept="image/*" required>
<button type="submit">Submit Moment</button>
</form>
<!-- Google Maps JS with Places API -->
<script async

  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDP7IydWh0LjI6HyVNyWOcVL7HTkcpOpLQ&libraries=places&v=weekly">
</script>
<script>

  // Extract selected place from new autocomplete UI

  customElements.whenDefined('gmpx-place-autocomplete').then(() => {

    const autocomplete = document.querySelector('#addressAutocomplete');

    const hiddenInput = document.getElementById('address');

    autocomplete.addEventListener('gmpx-placechange', () => {

      hiddenInput.value = autocomplete.value;

    });

  });
</script>
<script>

  document.getElementById('momentForm').addEventListener('submit', async function (e) {

    e.preventDefault();

    try {

      const form = e.target;

      const formData = new FormData(form);

      // Submit full form including binary to Make webhook

      const response = await fetch("https://hook.us1.make.com/fgd9cui3r5vtqgsindstroovilo4m9cv", {

        method: "POST",

        body: formData

      });

      if (!response.ok) {

        const error = await response.text();

        throw new Error("Submission failed: " + error);

      }

      alert("Moment submitted successfully!");

      form.reset();

    } catch (err) {

      console.error("Form submission error:", err);

      alert("Something went wrong: " + err.message);

    }

  });
</script>