CambiosRevision

This commit is contained in:
2026-05-27 10:24:47 -03:00
30 changed files with 867 additions and 229 deletions
+75 -2
View File
@@ -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>
+74 -2
View File
@@ -23,10 +23,13 @@
<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>
@enderror
@@ -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>
+3 -7
View File
@@ -3,12 +3,8 @@
<x-section-header subtitle="Gestión de Clientes" title="Cartera de " highlight="Clientes" />
<!-- Mensajes de feedback -->
<x-ui.alert />
@if(session('success'))
<div class="bg-green-900/50 border border-green-500 text-green-300 px-4 py-3 rounded-lg mb-6 shadow-sm">
{{ session('success') }}
</div>
@endif
<div class="w-full flex flex-col md:flex-row justify-between items-center gap-4 mb-6">
@@ -70,7 +66,7 @@
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/>
</svg>
</a>
<form action="{{route('clients.destroy',$client)}}" method="post">
<form action="{{route('clients.destroy',$client)}}" method="post" class="delete-form">
@csrf
@method('DELETE')
<button title="Eliminar" type="submit" class="w-full sm:w-auto p-2 font-bold dark:font-medium text-red-600 dark:text-red-400 border-2 border-red-600 rounded-lg hover:bg-red-600 hover:text-white dark:hover:text-white transition-colors">