Actualizar servicios.html

servicios.html

@@ -808,7 +808,7 @@
             } else {
                 cancelEditing();
             }
-            
+            loadChat(id);
             lucide.createIcons();
         }
 
@@ -1157,6 +1157,89 @@
             } catch (e) { showToast("Error al guardar", "warning"); }
         }
 
+        // --- MOTOR DE CHAT TIPO iTRAMIT ---
+        async function loadChat(serviceId) {
+            const chatBox = document.getElementById('chatBox');
+            chatBox.innerHTML = '<div class="text-center text-xs font-bold text-slate-400 mt-10 uppercase tracking-widest"><i data-lucide="loader-2" class="w-4 h-4 animate-spin mx-auto mb-2"></i> Cargando historial...</div>';
+            lucide.createIcons();
+
+            try {
+                const res = await fetch(`${API_URL}/services/${serviceId}/chat`, {
+                    headers: { 'Authorization': `Bearer ${localStorage.getItem("token")}` }
+                });
+                const data = await res.json();
+                
+                if (data.ok) {
+                    chatBox.innerHTML = '';
+                    if (data.messages.length === 0) {
+                        chatBox.innerHTML = '<div class="text-center text-xs font-bold text-slate-400 mt-10 uppercase tracking-widest">No hay mensajes aún</div>';
+                        return;
+                    }
+
+                    data.messages.forEach(msg => {
+                        const isMe = msg.sender_role === 'admin' || msg.sender_role === 'superadmin';
+                        const time = new Date(msg.created_at).toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
+                        const date = new Date(msg.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' });
+                        
+                        let bubbleClass = isMe ? 'msg-me' : 'msg-other';
+                        let headerColor = isMe ? 'text-emerald-700' : 'text-slate-600';
+                        
+                        if (msg.is_internal) {
+                            bubbleClass = 'msg-internal';
+                            headerColor = 'text-amber-700';
+                        }
+
+                        const bubbleHtml = `
+                            <div class="flex flex-col p-3 shadow-sm ${bubbleClass} max-w-[85%]">
+                                <div class="flex justify-between items-center border-b ${msg.is_internal ? 'border-amber-200' : (isMe ? 'border-emerald-200' : 'border-slate-200')} pb-1 mb-1.5 gap-4">
+                                    <span class="text-[9px] font-black uppercase ${headerColor} truncate">${msg.sender_name} ${msg.is_internal ? '(OCULTO)' : ''}</span>
+                                    <span class="text-[8px] font-bold text-slate-400 shrink-0">${date} ${time}</span>
+                                </div>
+                                <p class="text-xs font-medium text-slate-700 whitespace-pre-wrap">${msg.message}</p>
+                            </div>
+                        `;
+                        chatBox.innerHTML += bubbleHtml;
+                    });
+                    
+                    // Hacer scroll hasta abajo automáticamente
+                    setTimeout(() => { chatBox.scrollTop = chatBox.scrollHeight; }, 100);
+                }
+            } catch (e) {
+                chatBox.innerHTML = '<div class="text-center text-xs font-bold text-red-400 mt-10 uppercase tracking-widest">Error al cargar el historial</div>';
+            }
+        }
+
+        async function sendChatMessage() {
+            const serviceId = document.getElementById('detId').value;
+            const input = document.getElementById('chatInput');
+            const isInternal = document.getElementById('chatInternal').checked;
+            const message = input.value.trim();
+
+            if (!message) return;
+
+            input.disabled = true;
+            try {
+                const res = await fetch(`${API_URL}/services/${serviceId}/chat`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem("token")}` },
+                    body: JSON.stringify({ message, is_internal: isInternal })
+                });
+
+                if (res.ok) {
+                    input.value = '';
+                    document.getElementById('chatInternal').checked = false;
+                    loadChat(serviceId); // Recargar el chat al enviar
+                } else {
+                    showToast("Error al enviar mensaje", "warning");
+                }
+            } catch (e) {
+                showToast("Error de conexión", "warning");
+            } finally {
+                input.disabled = false;
+                input.focus();
+            }
+        }
+
     </script>
 </body>
 </html>