Actualizar servicios.html

servicios.html

@@ -91,9 +91,11 @@
     </div>
 
     <div id="detailModal" class="fixed inset-0 bg-slate-900/90 hidden z-[120] flex items-center justify-center backdrop-blur-sm p-4 text-left">
-        <div class="bg-white rounded-[2rem] shadow-2xl w-full max-w-4xl overflow-hidden flex flex-col fade-in">
+        <div class="bg-white rounded-[2rem] shadow-2xl w-full max-w-4xl overflow-hidden flex flex-col fade-in relative">
             
-            <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
+            <button onclick="closeDetailModal()" class="absolute top-6 right-6 text-slate-400 hover:text-red-500 bg-white shadow-sm border border-slate-200 p-2.5 rounded-full transition-all hover:bg-red-50 hover:border-red-100 z-10"><i data-lucide="x" class="w-5 h-5"></i></button>
+
+            <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50/50 pr-24">
                 <div class="flex items-center gap-3">
                     <div class="bg-blue-100 p-2.5 rounded-xl text-blue-600 shadow-inner"><i data-lucide="folder-open" class="w-5 h-5"></i></div>
                     <div>
@@ -101,7 +103,11 @@
                         <h3 class="font-black text-slate-800 text-xl leading-none tracking-tight">#<span id="detRef"></span></h3>
                     </div>
                 </div>
-                <button onclick="closeDetailModal()" class="text-slate-400 hover:text-red-500 bg-white shadow-sm border border-slate-200 p-2.5 rounded-full transition-all hover:bg-red-50 hover:border-red-100"><i data-lucide="x" class="w-5 h-5"></i></button>
+                
+                <div class="flex flex-col items-end text-right">
+                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Compañía Aseguradora</p>
+                    <span id="detCompany" class="bg-white border border-slate-200 px-3 py-1 rounded-lg text-xs font-black text-slate-700 mt-1 uppercase shadow-sm"></span>
+                </div>
             </div>
             
             <div class="p-6 grid grid-cols-1 md:grid-cols-5 gap-6 bg-white overflow-y-auto max-h-[80vh] no-scrollbar">
@@ -175,6 +181,10 @@
         </div>
     </div>
 
+    <div id="toastAppt" class="fixed bottom-8 right-8 bg-emerald-600 text-white px-6 py-4 rounded-2xl shadow-2xl hidden z-[200] font-bold text-sm flex items-center gap-2">
+        <i data-lucide="check-circle" class="w-5 h-5"></i> Guardado correctamente
+    </div>
+
     <script src="js/layout.js"></script>
     <script>
         let localData = [];
@@ -216,7 +226,6 @@
             const addr = raw["Dirección"] || raw["DOMICILIO"] || "---";
             const cita = raw.scheduled_date ? `${raw.scheduled_date} | ${raw.scheduled_time}` : 'Pendiente Cita';
 
-            // Buscar si tiene un estado especial para mostrarlo en la tarjeta
             const estadoActual = raw.status_operativo || 'citado';
             let iconEstado = 'calendar';
             if(estadoActual === 'de_camino') iconEstado = 'car';
@@ -245,25 +254,26 @@
             const raw = s.raw_data;
             document.getElementById('detId').value = s.id;
             document.getElementById('detRef').innerText = s.service_ref;
+            
+            // --- NUEVO: ASIGNAR COMPAÑÍA ---
+            const companyName = raw['Compañía'] || raw['COMPAÑIA'] || raw['Procedencia'] || "Particular";
+            document.getElementById('detCompany').innerText = companyName;
+
             document.getElementById('detName').innerText = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado Sin Nombre";
             
             const phone = raw["Teléfono"] || raw["TELEFONO"] || "Sin Teléfono";
             document.getElementById('detPhone').innerText = phone;
-            // Extraer solo números para el enlace de llamada
             const cleanPhone = phone.replace(/\D/g,'');
             document.getElementById('detPhoneLink').href = cleanPhone ? `tel:${cleanPhone}` : "#";
             
             document.getElementById('detAddrText').innerText = `${raw["Dirección"] || "Dirección no especificada"} ${raw["Población"] || ""}`;
             document.getElementById('detWorker').innerText = s.assigned_name || "Pendiente";
             
-            // Mostrar la descripción completa
             document.getElementById('detDesc').innerHTML = (raw["Descripción"] || raw["DESCRIPCION"] || "No hay notas adicionales del siniestro.")
                 .replace(/\n/g, '<br>');
 
             document.getElementById('dateInput').value = raw.scheduled_date || "";
             document.getElementById('timeInput').value = raw.scheduled_time || "";
-            
-            // Cargar mapa de estados guardado
             document.getElementById('detStatusMap').value = raw.status_operativo || 'citado';
 
             document.getElementById('detailModal').classList.remove('hidden');
@@ -276,8 +286,6 @@
             const time = document.getElementById('timeInput').value;
             const statusMap = document.getElementById('detStatusMap').value;
 
-            // BUG SOLUCIONADO: Ya no bloquea obligando a poner la fecha
-            // Solo avisa si no hay fecha porque sin fecha la tarjeta se queda a la izquierda.
             if(!date && statusMap !== 'incidencia' && statusMap !== 'terminado') {
                 if(!confirm("No has asignado una Fecha de Visita.\n\nEl estado se guardará, pero el expediente seguirá en la columna izquierda hasta que le pongas fecha. ¿Deseas continuar?")) return;
             }
@@ -285,7 +293,6 @@
             const btn = document.getElementById('btnSaveAppt');
             const originalContent = btn.innerHTML;
             
-            // Efecto visual de guardando
             btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...`;
             btn.disabled = true;
             lucide.createIcons();
@@ -299,14 +306,15 @@
                 
                 if(res.ok) { 
                     closeDetailModal(); 
+                    document.getElementById('toastAppt').classList.remove('hidden');
+                    setTimeout(() => { document.getElementById('toastAppt').classList.add('hidden'); }, 3000);
                     refreshPanel(); 
                 } else {
-                    alert("Error al guardar en el servidor");
+                    alert("Error en el servidor al guardar.");
                 }
             } catch (e) {
                 alert("Error de conexión");
             } finally {
-                // Restaurar botón por si acaso
                 btn.innerHTML = originalContent;
                 btn.disabled = false;
                 lucide.createIcons();