CAMBIOS:

- Agregado el autocompletado de direcciones. - Validacion de numeros en el nombre.
2026-05-27 08:57:20 -03:00
parent 330b9460e6
commit f03890b348
3 changed files with 155 additions and 6 deletions
@@ -23,9 +23,13 @@
                    <x-forms.input id="email" name="email" type="email" :value="old('email')" placeholder="cliente@ejemplo.com" :error="$errors->first('email')" />
                </div>
                <!-- Direccion -->
-                <div class="md:col-span-4">
+                <div class="md:col-span-4 relative">
                    <x-forms.label for="address" value="Dirección / Domicilio" />
-                    <textarea id="address" name="address" rows="3" class="bg-gray-300 dark:bg-neutral-800 border border-neutral-400 dark:border-neutral-700 dark:text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 placeholder-neutral-600 dark:placeholder-gray-400" placeholder="Calle, número, piso...">{{ old('address') }}</textarea>
+                    <input type="text" id="address" name="address" value="{{ old('address') }}" class="bg-gray-300 dark:bg-neutral-800 border border-neutral-400 dark:border-neutral-700 dark:text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 placeholder-neutral-600 dark:placeholder-gray-400" placeholder="Calle, número, piso..." autocomplete="off">
+                    
+                    <!-- Sugerencias -->
+                    <div id="address-suggestions" class="absolute z-50 w-full bg-white dark:bg-neutral-800 border border-gray-300 dark:border-neutral-700 rounded-b-lg shadow-xl max-h-60 overflow-y-auto hidden mt-1"></div>
+
                    @error('address') 
                        <span class="text-red-500 text-xs mt-1">{{ $message }}</span> 
                    @enderror
@@ -41,4 +45,73 @@

        </form>
    </div>
+
+    @push('scripts')
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const addressInput = document.getElementById('address');
+            const suggestionsBox = document.getElementById('address-suggestions');
+            let timeout = null;
+
+            addressInput.addEventListener('input', function() {
+                clearTimeout(timeout);
+                const query = this.value.trim();
+
+                if (query.length < 3) {
+                    suggestionsBox.classList.add('hidden');
+                    suggestionsBox.innerHTML = '';
+                    return;
+                }
+
+                // Esperar 500ms de inactividad antes de buscar (debounce)
+                timeout = setTimeout(() => {
+                    // Coordenadas Centro de Paraná: -31.73197, -60.52897
+                    const url = `https://photon.komoot.io/api/?q=${encodeURIComponent(query)}&limit=5&lat=-31.73197&lon=-60.52897`;
+                    
+                    fetch(url)
+                        .then(response => response.json())
+                        .then(data => {
+                            suggestionsBox.innerHTML = '';
+                            if (data.features && data.features.length > 0) {
+                                data.features.forEach(feature => {
+                                    const props = feature.properties;
+                                    
+                                    // Construir dirección legible
+                                    // let addressParts = [];
+                                    // if (props.name) addressParts.push(props.name);
+                                    // if (props.street && props.street !== props.name) addressParts.push(props.street);
+                                    // if (props.housenumber && !addressParts.includes(props.housenumber)) addressParts.push(props.housenumber);
+                                    // if (props.city || props.town) addressParts.push(props.city || props.town);
+                                    
+                                    const fullAddress = `${props.street || props.name} ${props.housenumber??''}${(props.city || props.town) ? ', '+(props.city || props.town) :''}`;
+
+                                    const div = document.createElement('div');
+                                    div.className = 'p-3 hover:bg-gray-100 dark:hover:bg-neutral-700 cursor-pointer text-sm text-gray-900 dark:text-white border-b border-gray-200 dark:border-neutral-700 last:border-0 transition-colors';
+                                    div.textContent = fullAddress;
+                                    
+                                    div.addEventListener('click', function() {
+                                        addressInput.value = fullAddress;
+                                        suggestionsBox.classList.add('hidden');
+                                    });
+
+                                    suggestionsBox.appendChild(div);
+                                });
+                                suggestionsBox.classList.remove('hidden');
+                            } else {
+                                suggestionsBox.classList.add('hidden');
+                            }
+                        })
+                        .catch(err => console.error('Error fetching address:', err));
+                }, 500); 
+            });
+
+            // Ocultar si se hace clic fuera del input y de las sugerencias
+            document.addEventListener('click', function(e) {
+                if (!addressInput.contains(e.target) && !suggestionsBox.contains(e.target)) {
+                    suggestionsBox.classList.add('hidden');
+                }
+            });
+        });
+    </script>
+    @endpush
 </x-layout>