From c666aa9fa43a3db6f1097620410ca67abbb32d9e Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sun, 8 Feb 2026 23:07:14 +0000
Subject: [PATCH] Actualizar servicios.html

---
 servicios.html | 48 ++++++++++++++++++++++--------------------------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/servicios.html b/servicios.html
index 4279859..90be752 100644
--- a/servicios.html
+++ b/servicios.html
@@ -6,6 +6,7 @@
     <title>Servicios - IntegraRepara</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY_AQUI&libraries=places&callback=initAutocomplete" async defer></script>
     <style>
         .fade-in { animation: fadeIn 0.3s ease-in-out; } 
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@@ -94,7 +95,7 @@
                                     </select>
                                 </div>
                                 <div>
-                                    <label class="block text-xs font-bold text-gray-600 mb-1">Población</label>
+                                    <label class="block text-xs font-bold text-gray-600 mb-1">Población / Municipio *</label>
                                     <select id="sTown" class="w-full px-3 py-2 border rounded-lg bg-gray-50 outline-none focus:border-blue-500" disabled onchange="checkAutoAssign(this.value)">
                                         <option value="">-- Elige provincia primero --</option>
                                     </select>
@@ -126,13 +127,13 @@
                                     <select id="sGuild" class="w-full px-3 py-2 border border-blue-200 rounded-lg bg-white outline-none focus:border-blue-500" onchange="loadOperators(this.value)">
                                         <option value="">-- Seleccionar Gremio --</option>
                                     </select>
+                                    <p id="zoneInfo" class="text-[10px] text-blue-600 mt-2 italic hidden"></p>
                                 </div>
                                 <div>
                                     <label class="block text-xs font-bold text-blue-800 mb-1">Asignar Operario</label>
                                     <select id="sOperator" class="w-full px-3 py-2 border border-blue-200 rounded-lg bg-white outline-none focus:border-blue-500">
                                         <option value="">-- Primero elige gremio --</option>
                                     </select>
-                                    <p id="zoneInfo" class="text-[10px] text-blue-600 mt-1 italic hidden"></p>
                                 </div>
                             </div>
 
@@ -262,7 +263,7 @@
         </div>
     </div>
 
-    <div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl hidden"><span id="toastMsg"></span></div>
+    <div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3"><span id="toastMsg">Msg</span></div>
 
     <script src="js/layout.js"></script>
     <script>
@@ -277,14 +278,13 @@
             fetchServices();
             loadCompanies();
             loadGuilds();
-            loadProvinces(); // Cargar provincias al inicio
+            loadProvinces(); // NUEVO: Cargar provincias
         });
 
-        // 1. FUNCIÓN GLOBAL PARA GOOGLE MAPS (Solución al error "initAutocomplete is not a function")
+        // 1. FUNCIÓN GLOBAL PARA GOOGLE MAPS
         window.initAutocomplete = function() {
             const input = document.getElementById("sAddress");
             if(input) {
-                // Solo cargamos si el script de Google se cargó bien
                 try {
                     autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
                     input.addEventListener('keydown', function(e) { if (e.key === "Enter") e.preventDefault(); });
@@ -305,7 +305,7 @@
             }
         }
 
-        // --- LÓGICA GEOGRÁFICA ---
+        // --- LÓGICA GEOGRÁFICA (NUEVO) ---
         async function loadProvinces() {
             try {
                 const res = await fetch(`${API_URL}/provinces`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
@@ -332,21 +332,17 @@
             } catch(e) {}
         }
 
-        // --- AUTO ASIGNACIÓN ---
+        // --- AUTO ASIGNACIÓN (NUEVO) ---
         async function checkAutoAssign(townId) {
             if(!townId) return;
             
-            // Buscar zona y operarios para este pueblo
             const res = await fetch(`${API_URL}/towns/${townId}/auto-assign`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
             const data = await res.json();
 
-            const zoneInput = document.getElementById('sZoneName');
             const opSelect = document.getElementById('sOperator');
             const info = document.getElementById('zoneInfo');
 
             if(data.found) {
-                zoneInput.value = data.zone_name;
-                
                 info.innerHTML = `Detectada zona: <b>${data.zone_name}</b>`;
                 info.classList.remove('hidden');
 
@@ -355,18 +351,12 @@
                     opSelect.innerHTML += `<option value="${op.id}" class="font-bold text-blue-600">⭐ ${op.full_name}</option>`;
                 });
                 
-                // Opción para cargar el resto si no está el que queremos
                 opSelect.innerHTML += '<option disabled>──────────</option><option value="load_all">Ver todos los operarios...</option>';
-                
-                // Listener para cargar todos
-                opSelect.onchange = function() {
-                    if(this.value === 'load_all') loadAllOperators();
-                };
+                opSelect.onchange = function() { if(this.value === 'load_all') loadAllOperators(); };
 
             } else {
-                zoneInput.value = "(Sin zona asignada)";
                 info.classList.add('hidden');
-                loadOperators(document.getElementById('sGuild').value); // Volver a lógica normal
+                loadOperators(document.getElementById('sGuild').value); 
             }
         }
 
@@ -380,10 +370,10 @@
             data.operators.forEach(op => sel.innerHTML += `<option value="${op.id}">${op.full_name}</option>`);
             
             sel.value = currentVal !== 'load_all' ? currentVal : "";
-            sel.onchange = null; // Quitar listener especial
+            sel.onchange = null; 
         }
 
-        // --- FUNCIONES ORIGINALES RESTAURADAS ---
+        // --- FUNCIONES ORIGINALES ---
         async function fetchStatuses() {
             try {
                 const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
@@ -597,9 +587,8 @@
             document.getElementById('sPhone').value = s.contact_phone;
             document.getElementById('sName').value = s.contact_name;
             
-            // Dirección: Intentar limpiar la población si está concatenada
             let addr = s.address;
-            if(addr.includes(", ")) addr = addr.split(", ")[0]; // Simple split
+            if(addr.includes(", ")) addr = addr.split(", ")[0];
             document.getElementById('sAddress').value = addr;
 
             document.getElementById('sEmail').value = s.email || '';
@@ -643,7 +632,6 @@
             const editId = document.getElementById('editServiceId').value;
             const isEdit = !!editId;
 
-            // Concatenar dirección + población
             let fullAddress = document.getElementById('sAddress').value;
             const townSelect = document.getElementById('sTown');
             if(townSelect.value) {
@@ -653,7 +641,7 @@
             const data = {
                 phone: document.getElementById('sPhone').value,
                 name: document.getElementById('sName').value,
-                address: fullAddress, // Dirección completa
+                address: fullAddress, 
                 email: document.getElementById('sEmail').value,
                 description: document.getElementById('sDesc').value,
                 scheduled_date: document.getElementById('sDate').value,
@@ -712,6 +700,14 @@
             m.innerText = msg; t.classList.remove('translate-y-20', 'opacity-0');
             setTimeout(() => t.classList.add('translate-y-20', 'opacity-0'), 3000);
         }
+
+        function resetForm() {
+            document.querySelector('form').reset();
+            document.getElementById('editServiceId').value = "";
+            document.getElementById('sTown').innerHTML = '<option value="">-- Elige provincia primero --</option>';
+            document.getElementById('sTown').disabled = true;
+            document.getElementById('zoneInfo').classList.add('hidden');
+        }
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY_AQUI&libraries=places&callback=initAutocomplete" async defer></script>
 </body>