CAMBIOS:

- Agregado el autocompletado de direcciones.
- Validacion de numeros en el nombre.

app/Http/Controllers/ClientController.php

@@ -40,10 +40,12 @@ class ClientController extends Controller
     public function store(Request $request)
     {
         $validated = $request->validate([
-            'name'    => 'required|string|max:255',
+            'name'    => ['required', 'string', 'max:255', 'not_regex:/[0-9]/'],
             'phone'   => 'nullable|string|max:50',
             'email'   => 'nullable|email|max:255|unique:clients,email',
             'address' => 'nullable|string|max:255',
+        ], [
+            'name.not_regex' => 'El nombre del cliente no puede contener números.',
         ]);
 
         // 1. Guardamos el cliente en una variable para tener su ID
@@ -88,10 +90,12 @@ class ClientController extends Controller
     public function update(Request $request, Client $client)
     {
         $validated = $request->validate([
-            'name'    => 'required|string|max:255',
+            'name'    => ['required', 'string', 'max:255', 'not_regex:/[0-9]/'],
             'phone'   => 'nullable|string|max:50',
             'email'   => 'nullable|email|max:255|unique:clients,email,' . $client->id, // Ignorar email propio
             'address' => 'nullable|string|max:255',
+        ], [
+            'name.not_regex' => 'El nombre del cliente no puede contener números.',
         ]);
 
         $client->update($validated);

resources/views/clients/create.blade.php

@@ -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>

resources/views/clients/edit.blade.php

@@ -23,9 +23,12 @@
                     <x-forms.input id="email" name="email" type="email" :value="old('email', $client->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-gray-500" placeholder="Calle, número, piso...">{{ old('address', $client->address) }}</textarea>
+                    <input type="text" id="address" name="address" value="{{ old('address', $client->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> 
@@ -42,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.housenumber && !addressParts.includes(props.housenumber)) addressParts.push(props.housenumber);
+                                    // if (props.street && props.street !== props.name) addressParts.push(props.street);
+                                    // 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>