Actualizar calendario.html

calendario.html

@@ -197,7 +197,7 @@
                <div class="grid grid-cols-2 gap-3 text-left">
                     <div>
                         <label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1 ml-1">Fecha</label>
-                        <input type="date" id="dateInput" class="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 shadow-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all">
+                        <input type="date" id="dateInput" onchange="renderModalAgenda()" class="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 shadow-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all">
                     </div>
                     <div>
                         <label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1 ml-1">Hora Inicio</label>
@@ -205,6 +205,11 @@
                     </div>
                 </div>
 
+                <div id="modalAgendaContainer" class="hidden mt-3 text-left bg-slate-50 border border-slate-200 rounded-xl p-3">
+                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2 flex items-center gap-1.5"><i data-lucide="eye" class="w-3 h-3"></i> Ocupación del día seleccionado</p>
+                    <div id="modalAgendaList" class="flex flex-wrap gap-2"></div>
+                </div>
+                
                 <div>
                     <label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1 ml-1 text-left">Duración Estimada</label>
                     <div class="relative text-left">
@@ -582,6 +587,69 @@
 
         let currentServiceId = null;
 
+
+        // --- NUEVA FUNCIÓN: Mostrar la agenda de un día en el Modal ---
+        function renderModalAgenda() {
+            const dateInput = document.getElementById('dateInput').value;
+            const agendaContainer = document.getElementById('modalAgendaContainer');
+            const agendaList = document.getElementById('modalAgendaList');
+            const currentId = document.getElementById('detId').value; // Para no mostrarse a sí mismo
+
+            if (!dateInput) {
+                agendaContainer.classList.add('hidden');
+                return;
+            }
+
+            // Filtrar servicios agendados en la fecha seleccionada que no sean el actual
+            const dayServices = localServices.filter(s => {
+                const date = String(s.raw_data.scheduled_date || "").trim();
+                return date === dateInput && String(s.id) !== String(currentId);
+            });
+
+            // Ordenar cronológicamente
+            dayServices.sort((a, b) => {
+                const tA = String(a.raw_data.scheduled_time || "23:59");
+                const tB = String(b.raw_data.scheduled_time || "23:59");
+                return tA.localeCompare(tB);
+            });
+
+            if (dayServices.length === 0) {
+                agendaList.innerHTML = `<span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-3 py-1 rounded-lg border border-emerald-100 w-full text-center">¡Día totalmente libre!</span>`;
+            } else {
+                agendaList.innerHTML = dayServices.map(s => {
+                    const time = s.raw_data.scheduled_time || "--:--";
+                    const dur = parseInt(s.raw_data.duration_minutes || 60);
+                    
+                    // Calculamos la hora de fin
+                    let endTime = "--:--";
+                    if (time.includes(':')) {
+                        let [h, m] = time.split(':').map(Number);
+                        m += dur;
+                        h += Math.floor(m / 60);
+                        m = m % 60;
+                        endTime = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+                    }
+
+                    const city = s.raw_data["Población"] || "Sin Zona";
+                    
+                    return `
+                        <div class="bg-white border border-slate-200 rounded-lg p-2 text-xs w-full flex justify-between items-center shadow-sm">
+                            <div class="flex items-center gap-2">
+                                <div class="bg-red-50 text-red-600 font-black px-2 py-1 rounded-md text-[10px]">
+                                    ${time} - ${endTime}
+                                </div>
+                                <span class="font-bold text-slate-700 truncate max-w-[120px]">${city}</span>
+                            </div>
+                            ${s.provider === 'SYSTEM_BLOCK' ? '<i data-lucide="lock" class="w-3.5 h-3.5 text-slate-400"></i>' : ''}
+                        </div>
+                    `;
+                }).join('');
+            }
+            
+            agendaContainer.classList.remove('hidden');
+            safeLoadIcons();
+        }
+
         function openService(id) {
             const s = localServices.find(x => x.id === id);
             if (!s || s.provider === 'SYSTEM_BLOCK') return;
@@ -626,6 +694,8 @@
             const dbStat = raw.status_operativo;
             if(dbStat) document.getElementById('detStatusMap').value = dbStat;
 
+            renderModalAgenda();
+
             const modal = document.getElementById('serviceModal');
             modal.style.display = 'flex';
             setTimeout(() => modal.classList.remove('translate-y-full'), 10);