Actualizar aceptar.html

aceptar.html

@@ -15,7 +15,7 @@
 
     <div class="max-w-md mx-auto min-h-screen flex flex-col p-4">
         
-        <div class="text-center py-6">
+        <div id="top-header" class="text-center py-6">
             <div class="bg-blue-600 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto shadow-lg shadow-blue-200 mb-4">
                 <i data-lucide="briefcase" class="text-white w-8 h-8"></i>
             </div>
@@ -71,10 +71,10 @@
         </div>
 
         <div id="error-screen" class="hidden text-center py-20 px-6">
-            <i data-lucide="clock-alert" class="w-16 h-16 text-slate-300 mx-auto mb-4"></i>
-            <h2 class="text-xl font-black text-slate-800 uppercase">¡Lo sentimos!</h2>
-            <p id="error-msg" class="text-slate-500 text-sm mt-2 font-medium">Este enlace ha caducado o el servicio ya ha sido asignado a otro compañero.</p>
-            <button onclick="window.close()" class="mt-8 text-blue-600 font-bold uppercase text-xs">Cerrar ventana</button>
+            <i data-lucide="clock-alert" class="w-20 h-20 text-slate-300 mx-auto mb-6"></i>
+            <h2 class="text-2xl font-black text-slate-800 uppercase">¡Lo sentimos!</h2>
+            <p id="error-msg" class="text-slate-500 text-base mt-3 font-medium">Este enlace ha caducado o el servicio ya ha sido asignado a otro compañero.</p>
+            <button onclick="window.close()" class="mt-10 text-blue-600 font-bold uppercase text-sm tracking-widest">Cerrar ventana</button>
         </div>
 
         <div id="loading" class="flex-1 flex items-center justify-center">
@@ -109,14 +109,13 @@
                     document.getElementById('location').innerText = `${raw["Población"] || 'Zona'} (CP: ${raw["Código Postal"] || '---'})`;
                     document.getElementById('desc').innerText = raw["Descripción"] || "Revisar en el lugar.";
                     
-                    // Mostrar debug si existe, si no, mensaje normal
                     if (data.debug) {
+                        const limitDate = new Date(data.debug.hora_limite_bd);
+                        const timeStr = limitDate.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
+                        
                         document.getElementById('timer').innerHTML = `
                             Responde antes de que caduque el turno<br>
-                            <span class="text-[10px] text-gray-500 font-mono font-normal mt-2 block">
-                                LÍMITE BD: ${new Date(data.debug.hora_limite_bd).toLocaleTimeString()}<br>
-                                ACTUAL BD: ${new Date(data.debug.hora_actual_bd).toLocaleTimeString()}
-                            </span>
+                            <span class="text-xs text-slate-500 font-medium mt-2 block">Límite hasta las: <strong class="text-slate-800">${timeStr}</strong></span>
                         `;
                     } else {
                         document.getElementById('timer').innerText = "Responde antes de que caduque el turno";
@@ -125,23 +124,25 @@
                     document.getElementById('loading').classList.add('hidden');
                     document.getElementById('content').classList.remove('hidden');
                 } else {
-                    showError(data.error, data.debug);
+                    showError(data.error);
                 }
             } catch (e) {
-                showError("Error al conectar con el servidor", null);
+                showError("Error al conectar con el servidor");
             }
         }
 
         async function respond(action) {
-            const btnText = action === 'accept' ? 'ACEPTANDO...' : 'RECHAZANDO...';
-            const originalContent = document.getElementById('content').innerHTML;
-            
             if(!confirm(`¿Seguro que quieres ${action === 'accept' ? 'ACEPTAR' : 'RECHAZAR'} este servicio?`)) return;
 
             try {
-                document.getElementById('loading').classList.remove('hidden');
+                // OCULTAMOS TODO PARA DEJAR LA PANTALLA LIMPIA
+                document.getElementById('top-header').classList.add('hidden');
                 document.getElementById('content').classList.add('hidden');
                 
+                document.getElementById('loading').innerHTML = `<i data-lucide="loader-2" class="w-8 h-8 animate-spin text-blue-600 mt-20"></i>`;
+                document.getElementById('loading').classList.remove('hidden');
+                lucide.createIcons();
+
                 const res = await fetch(`${API_URL}/public/assignment/respond`, {
                     method: 'POST',
                     headers: { "Content-Type": "application/json" },
@@ -151,10 +152,10 @@
 
                 if (data.ok) {
                     document.getElementById('loading').innerHTML = `
-                        <div class="text-center fade-in">
-                            <i data-lucide="check-circle-2" class="w-16 h-16 text-green-500 mx-auto mb-4"></i>
-                            <h2 class="text-xl font-black uppercase text-slate-800">${action === 'accept' ? '¡Asignado!' : 'Rechazado'}</h2>
-                            <p class="text-slate-500 text-sm mt-2">${action === 'accept' ? 'Ya puedes verlo en tu lista de servicios.' : 'Gracias por avisar.'}</p>
+                        <div class="text-center fade-in mt-20">
+                            <i data-lucide="check-circle-2" class="w-24 h-24 text-green-500 mx-auto mb-6"></i>
+                            <h2 class="text-3xl font-black uppercase text-slate-800 tracking-tight">${action === 'accept' ? '¡Asignado!' : 'Rechazado'}</h2>
+                            <p class="text-slate-500 text-base mt-4">${action === 'accept' ? 'Ya puedes verlo en tu lista de servicios.' : 'Gracias por avisar. Turno liberado.'}</p>
                         </div>
                     `;
                     lucide.createIcons();
@@ -166,27 +167,13 @@
             }
         }
 
-        function showError(msg, debugData = null) {
+        function showError(msg) {
+            // EN CASO DE ERROR TAMBIÉN OCULTAMOS LA CABECERA
+            document.getElementById('top-header').classList.add('hidden');
             document.getElementById('loading').classList.add('hidden');
             document.getElementById('content').classList.add('hidden');
             document.getElementById('error-screen').classList.remove('hidden');
             if(msg) document.getElementById('error-msg').innerText = msg;
-
-            // BLOQUE DE DIAGNÓSTICO EN LA PANTALLA DE ERROR
-            if(debugData && !document.getElementById('debug-box')) {
-                const debugDiv = document.createElement('div');
-                debugDiv.id = 'debug-box';
-                debugDiv.className = "mt-8 p-4 bg-slate-100 rounded-xl text-left text-[10px] font-mono text-slate-600 overflow-x-auto border border-slate-200";
-                debugDiv.innerHTML = `
-                    <strong class="text-slate-800 uppercase tracking-widest block mb-2">Modo Diagnóstico (Captura esto)</strong>
-                    ESTADO BD: <span class="text-blue-600 font-bold">${debugData.estado_en_bd}</span><br>
-                    HORA LÍMITE BD: <span class="text-red-500 font-bold">${new Date(debugData.hora_limite_bd).toLocaleString()}</span><br>
-                    HORA ACTUAL BD: <span class="text-emerald-600 font-bold">${new Date(debugData.hora_actual_bd).toLocaleString()}</span><br><br>
-                    * Si ESTADO BD es "expired", el reloj interno lo mató.<br>
-                    * Si HORA LÍMITE < HORA ACTUAL, es un desfase de zona horaria.
-                `;
-                document.getElementById('error-screen').appendChild(debugDiv);
-            }
         }
     </script>
 </body>