Actualizar calendario.html

calendario.html

@@ -57,9 +57,9 @@
             <a href="menu.html" class="w-10 h-10 shrink-0 bg-slate-50 rounded-full flex items-center justify-center text-slate-600 border border-slate-200 active:scale-95 transition-transform">
                 <i data-lucide="arrow-left" class="w-5 h-5"></i>
             </a>
-            <div class="flex-1 min-w-0 text-left">
+           <div class="flex-1 min-w-0 text-left">
                 <p class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-0.5 truncate" id="monthYearDisplay">Cargando...</p>
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-2" onclick="if(lastUnreadCount > 0) showNotifList()">
                     <h1 class="text-xl font-black tracking-tight text-slate-900 leading-none truncate">Mi Agenda</h1>
                     <div id="topNotificationBadge" class="hidden bg-red-500 text-white text-[10px] font-black px-1.5 py-0.5 rounded-full animate-bounce shadow-sm border border-white">!</div>
                 </div>
@@ -71,6 +71,16 @@
         </div>
         <div class="overflow-x-auto no-scrollbar py-2 -mx-5 px-5 flex gap-3" id="weekStrip"></div>
     </header>
+    <div id="notifPanel" class="hidden absolute top-32 left-5 right-5 bg-white rounded-3xl shadow-2xl z-50 border border-blue-100 fade-in overflow-hidden">
+        <div class="p-4 bg-blue-600 text-white flex justify-between items-center">
+            <span class="text-xs font-black uppercase tracking-widest">Mensajes Pendientes</span>
+            <button onclick="document.getElementById('notifPanel').classList.add('hidden')"><i data-lucide="x" class="w-4 h-4"></i></button>
+        </div>
+        <div id="notifList" class="max-h-60 overflow-y-auto p-2 space-y-2 bg-slate-50">
+            </div>
+    </div>
+
+    <audio id="notifSound" src="https://assets.mixkit.co/active_storage/sfx/2358/2358-preview.mp3" preload="auto"></audio>
 
     <main class="flex-1 overflow-y-auto no-scrollbar p-5 main-content relative z-10" id="mainArea">
         <div id="loader" class="text-center py-10 opacity-50">
@@ -331,26 +341,66 @@
             setInterval(checkNotifications, 30000);
         });
 
+    let lastUnreadCount = 0; // Para saber si el número ha subido y sonar
+
         async function checkNotifications() {
             try {
                 const res = await fetch(`${API_URL}/worker/notifications`, {
                     headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
                 });
                 const data = await res.json();
+                
                 if (data.ok) {
                     activeNotifications = data.serviceIds;
                     const badge = document.getElementById('topNotificationBadge');
+                    const panel = document.getElementById('topNotificationBadge').parentElement; // El contenedor para el click
+                    
                     if (data.unreadCount > 0) {
                         badge.classList.remove('hidden');
                         badge.innerText = data.unreadCount;
+                        
+                        // Si hay más mensajes que antes, ¡SUENA!
+                        if (data.unreadCount > lastUnreadCount) {
+                            document.getElementById('notifSound').play().catch(e => console.warn("Audio bloqueado por el navegador"));
+                        }
+                        
+                        // Hacer que el globo sea clicable
+                        badge.style.cursor = 'pointer';
+                        badge.onclick = (e) => { e.stopPropagation(); showNotifList(); };
                     } else {
                         badge.classList.add('hidden');
                     }
-                    renderServices(); // Refrescamos para pintar los iconos en las tarjetas
+                    
+                    lastUnreadCount = data.unreadCount;
+                    renderServices(); // Refrescamos iconos en tarjetas
                 }
             } catch (e) {}
         }
 
+        async function showNotifList() {
+            const panel = document.getElementById('notifPanel');
+            const list = document.getElementById('notifList');
+            panel.classList.remove('hidden');
+            list.innerHTML = '<p class="text-center p-4 text-xs font-bold text-slate-400">Cargando...</p>';
+
+            // Obtenemos los nombres de los siniestros con mensajes
+            list.innerHTML = activeNotifications.map(id => {
+                const s = localServices.find(x => x.id === id);
+                const name = s ? (s.raw_data["Nombre Cliente"] || "Expediente") : "Nuevo Mensaje";
+                const ref = s ? s.service_ref : id;
+                return `
+                    <div onclick="openService(${id}); document.getElementById('notifPanel').classList.add('hidden')" class="bg-white p-3 rounded-xl border border-slate-200 flex items-center justify-between active:scale-95 transition-all">
+                        <div class="flex flex-col">
+                            <span class="text-[10px] font-black text-blue-600 uppercase">#${ref}</span>
+                            <span class="text-xs font-bold text-slate-700">${name}</span>
+                        </div>
+                        <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
+                    </div>
+                `;
+            }).join('');
+            safeLoadIcons();
+        }
+
         async function loadGuilds() {
             try {
                 const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });