117 lines
7.0 KiB
PHP
117 lines
7.0 KiB
PHP
<x-layout title="Lauck - Editar Cliente">
|
|
<x-section-header subtitle="Gestión de Clientes" title="Editar " highlight="Cliente" />
|
|
|
|
<div class="w-full max-w-4xl mx-auto bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-8 shadow-lg">
|
|
<form action="{{ route('clients.update', $client) }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
|
|
|
|
<!-- Nombre -->
|
|
<div class="md:col-span-4">
|
|
<x-forms.label for="name" value="Nombre Completo" />
|
|
<x-forms.input id="name" name="name" type="text" :value="old('name', $client->name)" required autofocus placeholder="Ej: Juan Pérez" :error="$errors->first('name')" />
|
|
</div>
|
|
<!-- Telefono -->
|
|
<div class="md:col-span-2">
|
|
<x-forms.label for="phone" value="Teléfono / WhatsApp" />
|
|
<x-forms.input id="phone" name="phone" type="text" :value="old('phone', $client->phone)" placeholder="Ej: 343 154..." :error="$errors->first('phone')" />
|
|
</div>
|
|
<!-- Correo -->
|
|
<div class="md:col-span-2">
|
|
<x-forms.label for="email" value="Correo Electrónico" />
|
|
<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 relative">
|
|
<x-forms.label for="address" value="Dirección / Domicilio" />
|
|
<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
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between md:justify-end space-x-4 border-t border-neutral-400 dark:border-neutral-700 pt-6">
|
|
<a href="{{ route('clients.index') }}" class="text-gray-800 dark:text-gray-400 hover:text-black hover:dark:text-white font-medium text-sm transition-colors">Cancelar</a>
|
|
<button type="submit" class="w-full xl:w-auto text-center px-5 py-3 text-sm font-bold text-neon-lime dark:text-neutral-900 bg-neutral-950 dark:bg-neon-lime rounded-lg hover:bg-neutral-900/80 hover:dark:bg-[#b3e600] transition-colors uppercase tracking-wide">
|
|
Actualizar Cliente
|
|
</button>
|
|
</div>
|
|
|
|
</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> |