Actualizar solicitar.html

solicitar.html

@@ -40,9 +40,20 @@
 
     <main class="flex-1 overflow-y-auto no-scrollbar p-5 relative z-10" id="mainArea">
         
-        <div id="searchContainer" class="hidden mb-6 relative">
+        <div id="searchContainer" class="hidden mb-6 flex gap-2">
+            <div class="relative flex-1">
                 <i data-lucide="search" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
-            <input type="text" id="searchInput" oninput="filterServices()" placeholder="Buscar por cliente, ref, zona, avería..." class="w-full bg-white border border-slate-200 pl-12 pr-4 py-3.5 rounded-2xl text-sm font-bold shadow-sm outline-none focus:ring-2 ring-primary-dynamic transition-all">
+                <input type="text" id="searchInput" oninput="filterServices()" placeholder="Buscar por cliente, zona..." class="w-full bg-white border border-slate-200 pl-12 pr-4 py-3.5 rounded-2xl text-sm font-bold shadow-sm outline-none focus:ring-2 ring-primary-dynamic transition-all">
+            </div>
+            <div class="relative shrink-0">
+                <select id="sortSelect" onchange="filterServices()" class="h-full bg-white border border-slate-200 rounded-2xl pl-4 pr-10 text-xs font-black text-slate-600 uppercase tracking-widest shadow-sm outline-none focus:ring-2 ring-primary-dynamic appearance-none cursor-pointer">
+                    <option value="recent">Nuevos</option>
+                    <option value="urgent">Urgentes</option>
+                    <option value="cp">Por C.P.</option>
+                    <option value="pop">Por Población</option>
+                </select>
+                <i data-lucide="arrow-up-down" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
+            </div>
         </div>
 
         <div id="loader" class="text-center py-10 opacity-50">
@@ -436,6 +447,62 @@
             }
         }
 
+        // 🔥 FUNCIÓN DE FILTRADO Y ORDENACIÓN 🔥
+        function filterServices() {
+            const query = document.getElementById('searchInput').value.toLowerCase().trim();
+            const sortBy = document.getElementById('sortSelect').value;
+            
+            // 1. Primero filtramos por texto
+            let filtered = availableServices;
+            if (query !== "") {
+                filtered = availableServices.filter(s => {
+                    const raw = s.raw_data || {};
+                    const searchString = `
+                        ${s.service_ref || ""} 
+                        ${raw["Nombre Cliente"] || raw["CLIENTE"] || ""} 
+                        ${raw["Dirección"] || raw["DOMICILIO"] || ""} 
+                        ${raw["Población"] || raw["POBLACION-PROVINCIA"] || ""} 
+                        ${raw["Código Postal"] || raw["C.P."] || ""} 
+                        ${raw["Descripción"] || raw["DESCRIPCION"] || raw["Averia"] || ""} 
+                        ${raw["Compañía"] || raw["Procedencia"] || ""}
+                    `.toLowerCase();
+                    return searchString.includes(query);
+                });
+            }
+
+            // 2. Luego ordenamos el resultado
+            filtered.sort((a, b) => {
+                const rawA = a.raw_data || {};
+                const rawB = b.raw_data || {};
+                
+                if (sortBy === 'urgent') {
+                    // Urgentes primero (1 vs 0)
+                    const urgA = a.is_urgent ? 1 : 0;
+                    const urgB = b.is_urgent ? 1 : 0;
+                    if (urgA !== urgB) return urgB - urgA;
+                    // Si ambos son o no urgentes, desempatamos por fecha
+                    return new Date(b.created_at || 0) - new Date(a.created_at || 0);
+                } 
+                else if (sortBy === 'cp') {
+                    const cpA = (rawA["Código Postal"] || rawA["C.P."] || "99999").toString();
+                    const cpB = (rawB["Código Postal"] || rawB["C.P."] || "99999").toString();
+                    return cpA.localeCompare(cpB);
+                }
+                else if (sortBy === 'pop') {
+                    const popA = (rawA["Población"] || rawA["POBLACION-PROVINCIA"] || "ZZZ").toString();
+                    const popB = (rawB["Población"] || rawB["POBLACION-PROVINCIA"] || "ZZZ").toString();
+                    return popA.localeCompare(popB);
+                }
+                else {
+                    // 'recent' (Por defecto): Los más nuevos arriba
+                    return new Date(b.created_at || 0) - new Date(a.created_at || 0);
+                }
+            });
+
+            // 3. Pintamos la pantalla
+            renderServices(filtered);
+        }
+
         function showToast(msg) {
             const t = document.getElementById('toast');
             document.getElementById('toastMsg').innerText = msg;