From 39c5fc8bfbdfbc3ec3d8e1588dbf28319f6dac6b Mon Sep 17 00:00:00 2001
From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com>
Date: Mon, 11 Mar 2024 17:39:19 +0000
Subject: [PATCH] feat: Add Livewire component for address autofill

---
 .../views/checkout/address_autofill.blade.php | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 resources/views/checkout/address_autofill.blade.php

diff --git a/resources/views/checkout/address_autofill.blade.php b/resources/views/checkout/address_autofill.blade.php
new file mode 100644
index 0000000..37fc902
--- /dev/null
+++ b/resources/views/checkout/address_autofill.blade.php
@@ -0,0 +1,37 @@
+&lt;div>
+    &lt;input type="text" id="address-input" wire:model="address" placeholder="Enter your address" autocomplete="off">
+    &lt;div id="address-suggestions" style="display: none;">
+        &lt;ul>
+            &lt;template x-for="address in addresses" :key="address">
+                &lt;li @click="selectAddress(address)">&lt;x-text x-text="address">&lt;/li>
+            &lt;/template>
+        &lt;/ul>
+    &lt;/div>
+&lt;/div>
+
+&lt;script>
+    document.addEventListener('livewire:load', function () {
+        const input = document.getElementById('address-input');
+        let autocomplete;
+
+        function initAutocomplete() {
+            autocomplete = new google.maps.places.Autocomplete(input, {types: ['geocode']});
+            autocomplete.addListener('place_changed', fillInAddress);
+        }
+
+        function fillInAddress() {
+            const place = autocomplete.getPlace();
+            Livewire.emit('setAddress', place.formatted_address);
+        }
+
+        initAutocomplete();
+
+        Livewire.on('setAddress', address => {
+            input.value = address;
+            document.getElementById('address-suggestions').style.display = 'none';
+        });
+    });
+&lt;/script>
+
+@livewireStyles
+@livewireScripts