From 75aac68d65fc79955a5bf07eb6717980c607f3ea Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Wed, 25 Mar 2026 11:18:48 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20im=C3=A1genes=20de=20=C3=B3rdenes=20en?=
 =?UTF-8?q?=20lab=5Fdomicilios=20=E2=80=94=20corregir=20URL=20(encodeURICo?=
 =?UTF-8?q?mponent=20romp=C3=ADa=20subdirectorios),=20agregar=20modal=20vi?=
 =?UTF-8?q?sor=20y=20botones=20Ver/Descargar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lab_domicilios.php | 74 +++++++++++++++++++++++++++++++++++++---------
 1 file changed, 60 insertions(+), 14 deletions(-)

diff --git a/lab_domicilios.php b/lab_domicilios.php
index 9f18f51..64c97b5 100644
--- a/lab_domicilios.php
+++ b/lab_domicilios.php
@@ -975,10 +975,22 @@ const esc = s => String(s||'').replace(/[<>&"]/g, c => ({'<':'&lt;','>':'&gt;','
 /**
  * Renderiza el bloque de órdenes médicas (multi-archivo) en el detalle de domicilio.
  */
+/**
+ * Resuelve la URL directa para mostrar un archivo de orden médica.
+ * Equivalente al _resolveImg de lab_ordenes.php — NO usa encodeURIComponent
+ * para no romper las / del subdirectorio (ej. 2026/02/archivo.jpg).
+ */
+function _resolveOrdenUrl(f) {
+    if (!f) return '';
+    if (/^https?:\/\//i.test(f)) return f;
+    if (f.startsWith('uploads/')) return f;
+    return `uploads/media/${f}`;
+}
+
 function renderOrdenesDetail(dom) {
     const archivos = dom.archivos_ordenes || [];
     if (!archivos.length && !dom.orden_id) return '';
-    // Si no hay archivos cargados pero sí hay orden_id, mostramos solo el link
+    // Sin archivos adjuntos pero sí orden_id — solo link a la ficha
     if (!archivos.length) {
         return `<div class="mb-3">
             <label class="form-label small text-muted text-uppercase">Órdenes médicas</label>
@@ -988,30 +1000,43 @@ function renderOrdenesDetail(dom) {
         </div>`;
     }
     const items = archivos.map(a => {
-        const lf    = a.local_file || '';
-        const isImg = /\.(jpe?g|png|gif|webp)$/i.test(lf);
-        const url   = lf ? ('uploads/media/' + encodeURIComponent(lf)) : '';
-        const ficha = `<a href="lab_ordenes.php?id=${a.orden_id}" class="d-block small text-muted mt-1">
-                           <i class="fas fa-external-link-alt me-1"></i>Orden #${a.orden_id}
-                       </a>`;
+        const lf      = a.local_file || '';
+        const isImg   = /\.(jpe?g|png|gif|webp)$/i.test(lf);
+        const imgUrl  = _resolveOrdenUrl(lf);                              // URL directa para <img>
+        const descUrl = lf ? `api/lab/descargar_orden.php?file=${encodeURIComponent(lf)}` : ''; // descarga
+        const ficha   = a.orden_id
+            ? `<a href="lab_ordenes.php?id=${a.orden_id}" class="d-block small text-muted mt-1">
+                   <i class="fas fa-external-link-alt me-1"></i>Ficha orden #${a.orden_id}
+               </a>`
+            : '';
         if (lf && isImg) return `
             <div class="mb-2">
-                <a href="${url}" target="_blank" title="Ver imagen completa">
-                    <img src="${url}" alt="Orden médica"
-                         style="max-width:100%;max-height:180px;object-fit:contain;border-radius:6px;border:1px solid #dee2e6;display:block;cursor:zoom-in">
-                </a>${ficha}
+                <img src="${imgUrl}" alt="Orden médica"
+                     style="max-width:100%;max-height:200px;object-fit:contain;border-radius:6px;border:1px solid #dee2e6;display:block;cursor:zoom-in"
+                     onclick="verImagenDom('${imgUrl}')"
+                     onerror="this.style.display='none'">
+                <div class="d-flex gap-2 mt-1">
+                    <a href="${imgUrl}" target="_blank" class="btn btn-sm btn-outline-secondary flex-fill">
+                        <i class="fas fa-expand me-1"></i>Ver completa
+                    </a>
+                    <a href="${descUrl}" target="_blank" class="btn btn-sm btn-outline-secondary flex-fill">
+                        <i class="fas fa-download me-1"></i>Descargar
+                    </a>
+                </div>
+                ${ficha}
             </div>`;
         if (lf) return `
             <div class="mb-2">
-                <a href="api/lab/descargar_orden.php?file=${encodeURIComponent(lf)}" target="_blank"
+                <a href="${descUrl}" target="_blank"
                    class="btn btn-sm btn-outline-secondary w-100 mb-1">
                     <i class="fas fa-file-download me-1"></i>Abrir / Descargar archivo
-                </a>${ficha}
+                </a>
+                ${ficha}
             </div>`;
         return `<div class="mb-2">${ficha}</div>`;
     }).join('');
     return `<div class="mb-3">
-        <label class="form-label small text-muted text-uppercase">Órdenes médicas (${archivos.length})</label>
+        <label class="form-label small text-muted text-uppercase">Órdenes médicas${archivos.length > 1 ? ` (${archivos.length})` : ''}</label>
         ${items}
     </div>`;
 }
@@ -1173,5 +1198,26 @@ function verRespuestaFF(envioId) {
 }
 </script>
 <script src="assets/js/lab-sidebar.js"></script>
+
+<!-- Modal visor de imagen -->
+<div class="modal fade" id="modalImagenDom" tabindex="-1">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content bg-dark">
+            <div class="modal-header border-0 py-2">
+                <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body text-center p-0">
+                <img id="img-visor-dom" src="" class="img-fluid" style="max-height:80vh;object-fit:contain">
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+const _modalImgDom = new bootstrap.Modal('#modalImagenDom');
+function verImagenDom(src) {
+    document.getElementById('img-visor-dom').src = src;
+    _modalImgDom.show();
+}
+</script>
 </body>
 </html>