From 8e62c29ca98ebd5e95aa118f3930793d4320ea09 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Tue, 17 Mar 2026 15:55:56 -0500
Subject: [PATCH] firma_profesional: canvas en ver_formulario_enviado +
 endpoint firmar_profesional

---
 api/lab/firmar_profesional.php |  84 +++++++++++++++++++++++
 ver_formulario_enviado.php     | 117 ++++++++++++++++++++++++++++++++-
 2 files changed, 198 insertions(+), 3 deletions(-)
 create mode 100644 api/lab/firmar_profesional.php

diff --git a/api/lab/firmar_profesional.php b/api/lab/firmar_profesional.php
new file mode 100644
index 0000000..3deacd8
--- /dev/null
+++ b/api/lab/firmar_profesional.php
@@ -0,0 +1,84 @@
+<?php
+/**
+ * firmar_profesional.php — Guarda la firma del profesional en un envío ya completado.
+ * Requiere: sesión activa (admin o enfermero).
+ * POST { envio_id: int, campo_id: string, svg: string }
+ */
+require_once __DIR__ . '/../../config/config.php';
+require_once __DIR__ . '/../../classes/Database.php';
+
+header('Content-Type: application/json');
+
+// ── Helpers ─────────────────────────────────────────────────────────
+function ok(array $data = []): void {
+    echo json_encode(['ok' => true] + $data);
+    exit;
+}
+function err(string $msg, int $code = 400): void {
+    http_response_code($code);
+    echo json_encode(['ok' => false, 'error' => $msg]);
+    exit;
+}
+
+// ── Auth ─────────────────────────────────────────────────────────────
+if (!isUserLoggedIn()) {
+    err('No autenticado', 401);
+}
+
+// ── Input ────────────────────────────────────────────────────────────
+$body = json_decode(file_get_contents('php://input'), true);
+if (!$body) $body = $_POST;
+
+$envioId = (int)($body['envio_id'] ?? 0);
+$campoId = trim($body['campo_id'] ?? '');
+$svg     = $body['svg'] ?? '';
+
+if (!$envioId) err('envio_id requerido');
+if ($campoId === '') err('campo_id requerido');
+if ($svg === '') err('svg requerido');
+
+// Validar que el SVG sea data URI de imagen (evita inyección de contenido)
+if (!preg_match('/^data:image\/(svg\+xml|png|jpeg|webp);base64,/i', $svg)) {
+    err('Formato de firma no válido');
+}
+
+// ── Cargar envío ─────────────────────────────────────────────────────
+$db    = Database::getInstance();
+$envio = $db->fetch('SELECT id, datos_cliente, estado, formulario_id FROM lab_form_envios WHERE id = ?', [$envioId]);
+
+if (!$envio) err('Envío no encontrado', 404);
+
+// Enfermero: solo puede firmar sus propios envíos
+if (isEnfermero()) {
+    $uid    = (int)($_SESSION['admin_user']['id'] ?? 0);
+    $propio = $db->fetch('SELECT id FROM lab_form_envios WHERE id = ? AND enviado_por = ?', [$envioId, $uid]);
+    if (!$propio) err('Sin acceso', 403);
+}
+
+// ── Validar que campo_id corresponde a una firma_profesional ─────────
+$form = $db->fetch('SELECT esquema FROM lab_formularios WHERE id = ?', [$envio['formulario_id']]);
+if (!$form) err('Formulario no encontrado', 404);
+
+$esquema = json_decode($form['esquema'], true) ?? [];
+$campoDef = null;
+foreach ($esquema as $c) {
+    if (($c['id'] ?? '') === $campoId) { $campoDef = $c; break; }
+}
+
+if (!$campoDef || ($campoDef['tipo'] ?? '') !== 'firma_profesional') {
+    err('El campo no es una firma_profesional');
+}
+
+// ── Actualizar datos_cliente ─────────────────────────────────────────
+$datos = json_decode($envio['datos_cliente'] ?? '{}', true) ?? [];
+$datos[$campoId . '_svg'] = $svg;
+
+$nuevosDatos = json_encode($datos, JSON_UNESCAPED_UNICODE);
+$nuevoEstado = $envio['estado'] === 'firmado' ? 'firmado' : 'firmado';
+
+$db->query(
+    'UPDATE lab_form_envios SET datos_cliente = ?, estado = ?, completado_en = COALESCE(completado_en, NOW()) WHERE id = ?',
+    [$nuevosDatos, $nuevoEstado, $envioId]
+);
+
+ok(['mensaje' => 'Firma del profesional guardada correctamente']);
diff --git a/ver_formulario_enviado.php b/ver_formulario_enviado.php
index 72d1e06..4c8171c 100644
--- a/ver_formulario_enviado.php
+++ b/ver_formulario_enviado.php
@@ -166,6 +166,11 @@ function esc2(mixed $v): string {
             .hash-seal-header { background: #000 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
         }
 
+        /* ── Canvas firma profesional ───────────────────── */
+        .firma-pro-widget { max-width: 520px; margin-top: 8px; }
+        .fpw-canvas { border: 2px solid #198754; border-radius: 8px; background: #f8fff9;
+                      cursor: crosshair; display: block; max-width: 100%; touch-action: none; }
+
         /* ═══════ ESTILOS DE IMPRESIÓN ═══════════════════ */
         @media print {
             body { background: #fff !important; font-size: 12px; }
@@ -283,11 +288,12 @@ function esc2(mixed $v): string {
                 if (!$cid) continue;
                 $fSvg  = $datosCliente[$cid . '_svg']  ?? null;
                 $fFoto = $datosCliente[$cid . '_foto'] ?? null;
-                if (!$fSvg && !$fFoto) continue;
                 $isPro    = ($tipo === 'firma_profesional');
                 $fIcon    = $isPro ? 'fa-user-md' : 'fa-signature';
                 $fColor   = $isPro ? '#198754' : '#1565c0';
                 $fLabel   = htmlspecialchars($campo['label'] ?? ($isPro ? 'Firma profesional' : 'Firma paciente'));
+                // Firma paciente sin contenido: omitir
+                if (!$isPro && !$fSvg && !$fFoto) continue;
         ?>
         <div class="section-title mt-3" style="color:<?= $fColor ?>">
             <i class="fas <?= $fIcon ?> me-1"></i><?= $fLabel ?>
@@ -296,11 +302,22 @@ function esc2(mixed $v): string {
         <div class="firma-box" style="border-color:<?= $fColor ?>">
             <img src="<?= htmlspecialchars($fSvg) ?>" alt="<?= $fLabel ?>">
         </div>
-        <?php endif; ?>
-        <?php if ($fFoto): ?>
+        <?php elseif ($fFoto): ?>
         <div class="firma-box mt-2" style="border-color:<?= $fColor ?>">
             <img src="<?= htmlspecialchars($fFoto) ?>" alt="Foto - <?= $fLabel ?>">
         </div>
+        <?php elseif ($isPro): ?>
+        <!-- Canvas para que el profesional firme ahora -->
+        <div class="firma-pro-widget no-print" id="fpw-<?= htmlspecialchars($cid) ?>"
+             data-envio="<?= (int)$envio['id'] ?>" data-campo="<?= htmlspecialchars($cid) ?>">
+            <p class="text-muted small mb-2"><i class="fas fa-pen me-1"></i>Dibuje su firma en el recuadro:</p>
+            <canvas class="fpw-canvas" width="500" height="150"></canvas>
+            <div class="mt-2 d-flex gap-2">
+                <button class="btn btn-outline-secondary btn-sm fpw-clear"><i class="fas fa-eraser me-1"></i>Limpiar</button>
+                <button class="btn btn-success btn-sm fpw-save"><i class="fas fa-check me-1"></i>Guardar firma</button>
+            </div>
+            <div class="fpw-msg mt-2 small"></div>
+        </div>
         <?php endif; ?>
         <?php   continue; endif;
 
@@ -422,5 +439,99 @@ function esc2(mixed $v): string {
 
 </div><!-- /doc-wrap -->
 
+<script>
+/* ── Canvas firma del profesional ───────────────────────────────── */
+(function () {
+    document.querySelectorAll('.firma-pro-widget').forEach(function (widget) {
+        const canvas  = widget.querySelector('.fpw-canvas');
+        const ctx     = canvas.getContext('2d');
+        const btnClear = widget.querySelector('.fpw-clear');
+        const btnSave  = widget.querySelector('.fpw-save');
+        const msg      = widget.querySelector('.fpw-msg');
+        const envioId  = parseInt(widget.dataset.envio, 10);
+        const campoId  = widget.dataset.campo;
+        let drawing = false;
+
+        // Ajustar resolución para HiDPI
+        (function scaleCanvas() {
+            const ratio = window.devicePixelRatio || 1;
+            const w = canvas.offsetWidth  || canvas.width;
+            const h = canvas.offsetHeight || canvas.height;
+            canvas.width  = w * ratio;
+            canvas.height = h * ratio;
+            canvas.style.width  = w + 'px';
+            canvas.style.height = h + 'px';
+            ctx.scale(ratio, ratio);
+            ctx.strokeStyle = '#000';
+            ctx.lineWidth   = 2;
+            ctx.lineCap     = 'round';
+            ctx.lineJoin    = 'round';
+        })();
+
+        function getPos(e) {
+            const r = canvas.getBoundingClientRect();
+            const src = e.touches ? e.touches[0] : e;
+            return { x: src.clientX - r.left, y: src.clientY - r.top };
+        }
+
+        canvas.addEventListener('mousedown',  function(e){ drawing=true; ctx.beginPath(); const p=getPos(e); ctx.moveTo(p.x,p.y); });
+        canvas.addEventListener('mousemove',  function(e){ if(!drawing) return; const p=getPos(e); ctx.lineTo(p.x,p.y); ctx.stroke(); });
+        canvas.addEventListener('mouseup',    function(){ drawing=false; });
+        canvas.addEventListener('mouseleave', function(){ drawing=false; });
+        canvas.addEventListener('touchstart', function(e){ e.preventDefault(); drawing=true; ctx.beginPath(); const p=getPos(e); ctx.moveTo(p.x,p.y); }, {passive:false});
+        canvas.addEventListener('touchmove',  function(e){ e.preventDefault(); if(!drawing) return; const p=getPos(e); ctx.lineTo(p.x,p.y); ctx.stroke(); }, {passive:false});
+        canvas.addEventListener('touchend',   function(){ drawing=false; });
+
+        btnClear.addEventListener('click', function() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            msg.textContent = '';
+        });
+
+        btnSave.addEventListener('click', function() {
+            const svg = canvas.toDataURL('image/png');
+            // Verificar que no esté vacío (al menos 1000 bytes de data)
+            if (svg.length < 1000) {
+                msg.innerHTML = '<span class="text-danger"><i class="fas fa-exclamation-triangle me-1"></i>Por favor dibuje su firma antes de guardar.</span>';
+                return;
+            }
+            btnSave.disabled = true;
+            btnSave.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Guardando...';
+            msg.textContent = '';
+
+            fetch('api/lab/firmar_profesional.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ envio_id: envioId, campo_id: campoId, svg: svg })
+            })
+            .then(function(r){ return r.json(); })
+            .then(function(data) {
+                if (data.ok) {
+                    // Reemplazar el canvas con la imagen firmada
+                    const img = document.createElement('img');
+                    img.src = svg;
+                    img.alt = 'Firma profesional';
+                    img.style.maxHeight = '140px';
+                    img.style.maxWidth  = '340px';
+                    img.style.display   = 'block';
+                    const box = document.createElement('div');
+                    box.className = 'firma-box';
+                    box.style.borderColor = '#198754';
+                    box.appendChild(img);
+                    widget.replaceWith(box);
+                } else {
+                    msg.innerHTML = '<span class="text-danger"><i class="fas fa-times me-1"></i>' + (data.error||'Error al guardar') + '</span>';
+                    btnSave.disabled = false;
+                    btnSave.innerHTML = '<i class="fas fa-check me-1"></i>Guardar firma';
+                }
+            })
+            .catch(function() {
+                msg.innerHTML = '<span class="text-danger"><i class="fas fa-times me-1"></i>Error de conexión.</span>';
+                btnSave.disabled = false;
+                btnSave.innerHTML = '<i class="fas fa-check me-1"></i>Guardar firma';
+            });
+        });
+    });
+})();
+</script>
 </body>
 </html>