Actualizar servicios.html

servicios.html

@@ -158,9 +158,16 @@
                         <div>
                             <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Asegurado / Cliente</p>
                             <p id="detName" class="font-black text-slate-800 text-lg uppercase mt-0.5 leading-tight"></p>
-                            <a href="#" id="detPhoneLink" class="text-sm text-blue-600 font-black flex items-center gap-1.5 mt-1.5 hover:underline w-max">
+                            
+                            <div class="flex items-center gap-4 mt-1.5">
+                                <a href="#" id="detPhoneLink" class="text-sm text-blue-600 font-black flex items-center gap-1.5 hover:underline w-max">
                                     <i data-lucide="phone" class="w-3.5 h-3.5"></i> <span id="detPhone"></span>
                                 </a>
+                                <button onclick="copyClientPortalLink()" id="btnPortalLink" class="text-[10px] font-black bg-blue-50 border border-blue-100 hover:bg-blue-600 hover:text-white text-blue-600 px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-all shadow-sm active:scale-95">
+                                    <i data-lucide="link" class="w-3 h-3"></i>
+                                    Copiar Portal Cliente
+                                </button>
+                            </div>
                         </div>
                         <hr class="border-slate-200">
                         <div>
@@ -621,6 +628,54 @@
             const data = await res.json();
             if(data.ok) sel.innerHTML = '<option value="">Seleccionar operario...</option>' + data.operators.map(o => `<option value="${o.id}">${o.full_name}</option>`).join('');
         }
+
+        async function copyClientPortalLink() {
+            const phone = document.getElementById('detPhone').innerText;
+            if (!phone || phone === "Sin Teléfono") {
+                showToast("No hay un teléfono válido para este cliente.", "warning");
+                return;
+            }
+
+            const btn = document.getElementById('btnPortalLink');
+            const originalHtml = btn.innerHTML;
+            
+            // Animación de carga en el botón
+            btn.innerHTML = '<i data-lucide="loader-2" class="w-3 h-3 animate-spin"></i> Generando...';
+            lucide.createIcons();
+
+            try {
+                const res = await fetch(`${API_URL}/clients/search?phone=${encodeURIComponent(phone)}`, {
+                    headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
+                });
+                const data = await res.json();
+                
+                if (data.ok && data.client && data.client.portal_token) {
+                    const portalLink = `https://portal.integrarepara.es/?token=${data.client.portal_token}`;
+                    await navigator.clipboard.writeText(portalLink);
+                    
+                    btn.innerHTML = '<i data-lucide="check-circle" class="w-3 h-3"></i> ¡Copiado!';
+                    btn.classList.replace('text-blue-600', 'text-emerald-600');
+                    btn.classList.replace('bg-blue-50', 'bg-emerald-50');
+                    btn.classList.replace('border-blue-100', 'border-emerald-200');
+                    showToast("Enlace copiado. ¡Listo para pegar en WhatsApp!");
+                    
+                    setTimeout(() => {
+                        btn.innerHTML = originalHtml;
+                        btn.className = "text-[10px] font-black bg-blue-50 border border-blue-100 hover:bg-blue-600 hover:text-white text-blue-600 px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-all shadow-sm active:scale-95";
+                        lucide.createIcons();
+                    }, 3000);
+                } else {
+                    showToast("El cliente aún no está registrado en la base de datos oficial.", "warning");
+                    btn.innerHTML = originalHtml;
+                    lucide.createIcons();
+                }
+            } catch (error) {
+                console.error("Error obteniendo token:", error);
+                showToast("Error al conectar con el servidor", "warning");
+                btn.innerHTML = originalHtml;
+                lucide.createIcons();
+            }
+        }
     </script>
 </body>
 </html>