<?php
require_once 'config/auth.php';
require_once 'config/db.php';

$paginaActiva = 'servicios';
$paginaTitulo = 'Anticipo Revisión';

// ── AJAX validar ticket en tiempo real ────────────────────
if (isset($_GET['action'])) {
    header('Content-Type: application/json');

    if ($_GET['action'] === 'validar_ticket') {
        $folio = trim($_GET['folio'] ?? '');
        if (!$folio) { echo json_encode(['status'=>'vacio']); exit; }

        // ¿Ya existe en anticipo_revision?
        $r = $pdo->prepare("SELECT id_row, total_pagado, creado_por, fecha_registro FROM anticipo_revision WHERE folio_de_ticket=? LIMIT 1");
        $r->execute([$folio]); $ant = $r->fetch();
        if ($ant) {
            echo json_encode([
                'status'     => 'duplicado',
                'msg'        => "Ticket #$folio ya registrado por {$ant['creado_por']} el {$ant['fecha_registro']}",
                'total'      => $ant['total_pagado'],
                'creado_por' => $ant['creado_por'],
                'fecha'      => $ant['fecha_registro'],
            ]);
            exit;
        }
        echo json_encode(['status' => 'disponible']);
        exit;
    }

    exit;
}

// ── GUARDAR nuevo anticipo ────────────────────────────────
$msgOk = $msgErr = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST' && ($_POST['_action'] ?? '') === 'guardar_anticipo') {
    $folio  = trim($_POST['folio_de_ticket'] ?? '');
    $total  = trim($_POST['total_pagado']    ?? '');
    $imgB64 = $_POST['imagen_ticket']        ?? '';

    if (!$folio || !$total) {
        $msgErr = 'Folio y total son requeridos.';
    } else {
        // Revalidar duplicado
        $dup = $pdo->prepare("SELECT id_row FROM anticipo_revision WHERE folio_de_ticket=? LIMIT 1");
        $dup->execute([$folio]);
        if ($dup->fetch()) {
            $msgErr = "El ticket #$folio ya está registrado.";
        } else {
            try {
                // Comprimir imagen si viene en base64
                $imgGuardar = '';
                if ($imgB64 && strpos($imgB64, 'base64,') !== false) {
                    [, $b64data] = explode('base64,', $imgB64, 2);
                    $bin = base64_decode($b64data);
                    $img = @imagecreatefromstring($bin);
                    if ($img) {
                        $w = imagesx($img); $h = imagesy($img); $maxW = 600;
                        if ($w > $maxW) {
                            $nh = (int)($h * $maxW / $w);
                            $r2 = imagecreatetruecolor($maxW, $nh);
                            imagecopyresampled($r2, $img, 0,0,0,0, $maxW,$nh,$w,$h);
                            imagedestroy($img); $img = $r2;
                        }
                        ob_start(); imagejpeg($img, null, 60); $jpg = ob_get_clean();
                        imagedestroy($img);
                        $imgGuardar = 'data:image/jpeg;base64,' . base64_encode($jpg);
                    } else { $imgGuardar = $imgB64; }
                }

                // Insertar — columnas reales de anticipo_revision
                $cols = $pdo->query("SHOW COLUMNS FROM anticipo_revision")->fetchAll(PDO::FETCH_COLUMN);

                $data = [
                    'folio_de_ticket' => $folio,
                    'total_pagado'    => $total,
                    'imagen_ticket'   => $imgGuardar,
                    'creado_por'      => $sesion['nombre'],
                    'sucursal'        => $sesion['sucursal'],
                    'fecha_registro'  => date('Y-m-d H:i:s'),
                    'status'          => 'DISPONIBLE',
                    'orden_aplicada'  => '',
                ];
                // Filtrar solo columnas que existen en la tabla
                $data = array_filter($data, fn($k) => in_array($k, $cols), ARRAY_FILTER_USE_KEY);

                $fields  = implode(',', array_map(fn($k) => "`$k`", array_keys($data)));
                $holders = implode(',', array_fill(0, count($data), '?'));
                $pdo->prepare("INSERT INTO anticipo_revision ($fields) VALUES ($holders)")
                    ->execute(array_values($data));

                $msgOk = "Ticket <strong>#$folio</strong> registrado — Total: <strong>$$total</strong>";
            } catch (PDOException $e) {
                $msgErr = 'Error al guardar: ' . $e->getMessage();
            }
        }
    }
}

// ── Cargar anticipos recientes ────────────────────────────
try {
    $anticipos = $pdo->query("
        SELECT folio_de_ticket, total_pagado, creado_por, sucursal,
               fecha_registro, status, orden_aplicada, imagen_ticket
        FROM anticipo_revision
        ORDER BY id_row DESC
        LIMIT 50
    ")->fetchAll();
} catch (PDOException $e) { $anticipos = []; }
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<title>Anticipo Revisión — Vantecc</title>
<link rel="stylesheet" href="css/tema.css">
<style>
/* ── Upload zone ── */
.upload-zone{border:3px dashed var(--border2);border-radius:16px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .25s;background:#fafcff;position:relative;}
.upload-zone:hover,.upload-zone.over{border-color:var(--azul);background:var(--azul-claro);}
.upload-zone svg{width:48px;height:48px;stroke:var(--muted);fill:none;stroke-width:1.5;margin-bottom:12px;transition:stroke .2s;}
.upload-zone:hover svg{stroke:var(--azul);}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-zone.has-img{border-color:var(--green);background:#f0fdf4;}
/* Preview ticket */
.ticket-preview{display:none;margin-top:16px;border-radius:12px;overflow:hidden;border:2px solid var(--border);background:#fff;box-shadow:var(--shadow);}
.ticket-preview img{width:100%;max-height:260px;object-fit:contain;background:#f8fafc;display:block;}
.ticket-preview-ctrl{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:#fafcff;}
/* OCR progress */
.ocr-bar-wrap{display:none;margin-top:14px;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:14px 16px;}
.ocr-bar-track{height:6px;background:#fde68a;border-radius:3px;overflow:hidden;margin-bottom:8px;}
.ocr-bar-fill{height:100%;background:#f59e0b;border-radius:3px;width:0%;transition:width .3s;}
.ocr-step{font-size:12px;color:#92400e;font-weight:600;}
/* OCR resultado */
.ocr-result{display:none;margin-top:14px;background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:2px solid #a7f3d0;border-radius:12px;padding:16px;}
.ocr-warn{display:none;margin-top:10px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:12px;font-size:12px;color:#c2410c;}
/* Ticket status */
.tk-status{display:none;margin-top:8px;padding:10px 14px;border-radius:10px;font-size:13px;align-items:center;gap:8px;}
.tk-status.show{display:flex;}
.tk-ok{background:#d1fae5;border:1px solid #a7f3d0;color:#065f46;}
.tk-err{background:#fee2e2;border:1px solid #fecaca;color:#991b1b;}
.tk-chk{background:#fffbeb;border:1px solid #fde68a;color:#92400e;}
/* Input grande folio */
.inp-folio{font-size:28px!important;font-weight:800!important;text-align:center!important;letter-spacing:4px!important;color:var(--azul)!important;}
/* Tabla anticipos */
.tbl-img{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:pointer;}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite;}
@media(max-width:768px){.inp-folio{font-size:22px!important;}}
</style>
</head>
<body>
<?php require_once 'config/layout.php'; ?>
<main class="main"><div class="content">

  <!-- HEADER -->
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px;">
    <div>
      <h1 style="font-size:20px;font-weight:800">Anticipo <span style="color:var(--azul)">Revisión</span></h1>
      <p style="font-size:12px;color:var(--muted);margin-top:2px"><?= count($anticipos) ?> registros recientes</p>
    </div>
    <button onclick="abrirModal()" class="btn btn-primary btn-lg">
      <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      Agregar Anticipo
    </button>
  </div>

  <?php if($msgOk): ?>
  <div class="alert alert-success">
    <svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
    <?= $msgOk ?>
    <button onclick="abrirModal()" style="margin-left:12px;background:none;border:1px solid var(--green);border-radius:6px;padding:3px 10px;font-size:12px;color:var(--green);cursor:pointer;font-weight:700">+ Otro</button>
  </div>
  <?php endif; ?>
  <?php if($msgErr): ?>
  <div class="alert alert-error">❌ <?= htmlspecialchars($msgErr) ?></div>
  <?php endif; ?>

  <!-- TABLA -->
  <div class="card">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>Folio Ticket</th>
            <th>Total Pagado</th>
            <th>Estado</th>
            <th>Orden Aplicada</th>
            <th>Registrado por</th>
            <th>Sucursal</th>
            <th>Fecha</th>
          </tr>
        </thead>
        <tbody>
        <?php if(empty($anticipos)): ?>
          <tr><td colspan="8">
            <div class="empty-state">
              <svg viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
              <p>Sin anticipos registrados</p>
            </div>
          </td></tr>
        <?php else: foreach($anticipos as $a): ?>
          <tr>
            <td>
              <?php if(!empty($a['imagen_ticket'])): ?>
              <img src="<?= htmlspecialchars($a['imagen_ticket']) ?>"
                   class="tbl-img"
                   onclick="verImagen('<?= htmlspecialchars($a['imagen_ticket']) ?>')"
                   alt="Ticket" onerror="this.style.opacity='.2'">
              <?php else: ?>
              <div style="width:44px;height:44px;border-radius:6px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:18px">🎫</div>
              <?php endif; ?>
            </td>
            <td><span style="font-size:18px;font-weight:800;color:var(--azul);letter-spacing:2px">#<?= htmlspecialchars($a['folio_de_ticket']??'—') ?></span></td>
            <td><span style="font-size:16px;font-weight:700;color:var(--green)">$<?= number_format((float)($a['total_pagado']??0)) ?></span></td>
            <td>
              <?php
              $st = strtoupper($a['status']??'');
              $cls = $st==='DISPONIBLE' ? 'badge-green' : 'badge-gray';
              ?>
              <span class="badge <?= $cls ?>"><?= htmlspecialchars($st?:'—') ?></span>
            </td>
            <td style="font-size:12px">
              <?php if(!empty($a['orden_aplicada'])): ?>
              <a href="ver_orden.php?id=<?= urlencode($a['orden_aplicada']) ?>"
                 style="color:var(--azul);font-weight:700"><?= htmlspecialchars($a['orden_aplicada']) ?></a>
              <?php else: ?>
              <span style="color:var(--muted)">Sin orden</span>
              <?php endif; ?>
            </td>
            <td style="font-size:12px;color:var(--text2)"><?= htmlspecialchars($a['creado_por']??'—') ?></td>
            <td style="font-size:12px;color:var(--muted)"><?= htmlspecialchars($a['sucursal']??'—') ?></td>
            <td style="font-size:11px;color:var(--muted);white-space:nowrap"><?= htmlspecialchars(substr($a['fecha_registro']??'',0,16)) ?></td>
          </tr>
        <?php endforeach; endif; ?>
        </tbody>
      </table>
    </div>
  </div>

</div></main>

<!-- ══ LIGHTBOX ══ -->
<div class="lightbox" id="lb" onclick="this.classList.remove('open')">
  <button class="lightbox-close" onclick="document.getElementById('lb').classList.remove('open')">✕</button>
  <img id="lbImg" src="" alt="">
</div>

<!-- ══ MODAL AGREGAR ANTICIPO ══ -->
<div class="modal-overlay" id="modalAnticipo">
<div class="modal" style="width:580px;max-width:98vw">
  <div class="modal-title">
    <svg viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
    Registrar Anticipo de Revisión
  </div>

  <form method="POST" id="fAnticipo">
    <input type="hidden" name="_action"       value="guardar_anticipo">
    <input type="hidden" name="imagen_ticket" id="hImgTicket">
    <input type="hidden" name="folio_de_ticket" id="hFolio">
    <input type="hidden" name="total_pagado"    id="hTotal">

    <!-- ZONA DE CARGA DE IMAGEN -->
    <div class="form-group">
      <label class="form-label">Imagen del Ticket <span style="color:var(--red)">*</span></label>
      <div class="upload-zone" id="uploadZone" ondragover="ev(event)" ondragleave="unev()" ondrop="drop(event)">
        <svg viewBox="0 0 24 24" id="uzIco">
          <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/>
          <circle cx="12" cy="13" r="4"/>
        </svg>
        <p id="uzTxt" style="font-size:14px;font-weight:600;color:var(--text2)">
          📷 Toque aquí para <b style="color:var(--azul)">tomar foto o seleccionar</b>
        </p>
        <p style="font-size:11px;color:var(--muted);margin-top:4px">Cámara trasera · JPG · PNG · WEBP</p>
        <input type="file" id="fileInput" accept="image/*" capture="environment" onchange="cargarImagen(this)">
      </div>

      <!-- Preview imagen -->
      <div class="ticket-preview" id="ticketPreview">
        <img id="prevImg" src="" alt="Ticket">
        <div class="ticket-preview-ctrl">
          <button type="button" onclick="document.getElementById('fileInput').click()" class="btn btn-outline btn-sm">
            📷 Cambiar imagen
          </button>
          <button type="button" onclick="quitarImagen()" class="btn btn-danger btn-sm">
            🗑 Quitar
          </button>
          <button type="button" onclick="reintentarOCR()" class="btn btn-outline btn-sm" id="btnReOCR" style="display:none">
            🔄 Reintentar OCR
          </button>
        </div>
      </div>

      <!-- OCR progreso -->
      <div class="ocr-bar-wrap" id="ocrProgress">
        <div class="ocr-bar-track"><div class="ocr-bar-fill" id="ocrFill"></div></div>
        <div class="ocr-step" id="ocrStep">Iniciando reconocimiento...</div>
      </div>

      <!-- OCR resultado -->
      <div class="ocr-result" id="ocrResult">
        <div style="font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px">
          🤖 Datos detectados automáticamente
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
          <div style="text-align:center;padding:12px;background:#fff;border-radius:8px;border:1px solid #a7f3d0">
            <div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px">🎫 Folio</div>
            <div style="font-size:28px;font-weight:800;color:var(--green);letter-spacing:3px" id="ocrFolioVal">—</div>
          </div>
          <div style="text-align:center;padding:12px;background:#fff;border-radius:8px;border:1px solid #bfdbfe">
            <div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px">💰 Total Pagado</div>
            <div style="font-size:28px;font-weight:800;color:var(--azul)" id="ocrTotalVal">—</div>
          </div>
        </div>
        <p style="font-size:11px;color:var(--muted);margin-top:8px;text-align:center">
          ✏️ Si algún dato es incorrecto, corrija abajo manualmente
        </p>
      </div>

      <div class="ocr-warn" id="ocrWarn">⚠️ <span id="ocrWarnMsg"></span></div>
    </div>

    <!-- FOLIO (editable / corregible) -->
    <div class="form-group">
      <label class="form-label">Folio del Ticket <span style="color:var(--red)">*</span></label>
      <input type="text" id="inFolio" class="form-input inp-folio"
             placeholder="000000" maxlength="10"
             oninput="validarTicket(this.value)"
             autocomplete="off">
      <div class="tk-status" id="tkStatus">
        <svg id="tkIco" viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0"></svg>
        <span id="tkMsg"></span>
      </div>
    </div>

    <!-- TOTAL (editable / corregible) -->
    <div class="form-group">
      <label class="form-label">Total Pagado ($) <span style="color:var(--red)">*</span></label>
      <input type="number" id="inTotal" class="form-input"
             placeholder="0" min="0" step="1"
             style="font-size:22px;font-weight:800;text-align:center;color:var(--green)"
             oninput="document.getElementById('hTotal').value=this.value">
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-outline" onclick="cerrarModal()">Cancelar</button>
      <button type="submit" class="btn btn-primary btn-lg" id="btnGuardar" disabled>
        <svg viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/></svg>
        Guardar Anticipo
      </button>
    </div>
  </form>
</div>
</div>

<!-- Tesseract.js desde CDN -->
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
<script>
let ticketValido = false;
let imagenLista  = false;
let debTk;
let ultimaImagen = null; // guardamos el file para reintentar OCR

// ── Modal ─────────────────────────────────────────────────
function abrirModal(){
    document.getElementById('modalAnticipo').classList.add('open');
    resetModal();
}
function cerrarModal(){
    document.getElementById('modalAnticipo').classList.remove('open');
}
document.getElementById('modalAnticipo').addEventListener('click',function(e){
    if(e.target===this) cerrarModal();
});
function resetModal(){
    ticketValido=false; imagenLista=false;
    document.getElementById('fileInput').value='';
    document.getElementById('hImgTicket').value='';
    document.getElementById('hFolio').value='';
    document.getElementById('hTotal').value='';
    document.getElementById('inFolio').value='';
    document.getElementById('inTotal').value='';
    document.getElementById('uploadZone').className='upload-zone';
    document.getElementById('ticketPreview').style.display='none';
    document.getElementById('ocrProgress').style.display='none';
    document.getElementById('ocrResult').style.display='none';
    document.getElementById('ocrWarn').style.display='none';
    document.getElementById('tkStatus').className='tk-status';
    document.getElementById('btnGuardar').disabled=true;
    ultimaImagen=null;
}

// ── Drag & Drop ───────────────────────────────────────────
function ev(e){e.preventDefault();document.getElementById('uploadZone').classList.add('over');}
function unev(){document.getElementById('uploadZone').classList.remove('over');}
function drop(e){
    e.preventDefault(); unev();
    const f=e.dataTransfer.files[0];
    if(f){ const dt=new DataTransfer(); dt.items.add(f); document.getElementById('fileInput').files=dt.files; cargarImagen({files:[f]}); }
}

// ── Cargar imagen y lanzar OCR ────────────────────────────
function cargarImagen(input){
    const file=input.files?.[0]||input; if(!file) return;
    ultimaImagen=file;
    const reader=new FileReader();
    reader.onload=e=>{
        // Mostrar preview
        document.getElementById('prevImg').src=e.target.result;
        document.getElementById('hImgTicket').value=e.target.result;
        document.getElementById('ticketPreview').style.display='block';
        document.getElementById('uploadZone').className='upload-zone has-img';
        document.getElementById('uzTxt').textContent='✅ Imagen cargada';
        document.getElementById('ocrResult').style.display='none';
        document.getElementById('ocrWarn').style.display='none';
        imagenLista=true;
        lanzarOCR(file);
    };
    reader.readAsDataURL(file);
}
function quitarImagen(){
    imagenLista=false; ticketValido=false;
    document.getElementById('fileInput').value='';
    document.getElementById('hImgTicket').value='';
    document.getElementById('ticketPreview').style.display='none';
    document.getElementById('uploadZone').className='upload-zone';
    document.getElementById('uzTxt').textContent='📷 Toque aquí para tomar foto o seleccionar';
    document.getElementById('ocrProgress').style.display='none';
    document.getElementById('ocrResult').style.display='none';
    document.getElementById('ocrWarn').style.display='none';
    document.getElementById('inFolio').value='';
    document.getElementById('inTotal').value='';
    document.getElementById('tkStatus').className='tk-status';
    document.getElementById('btnGuardar').disabled=true;
    ultimaImagen=null;
}
function reintentarOCR(){ if(ultimaImagen) lanzarOCR(ultimaImagen); }

// ── OCR con Tesseract.js ──────────────────────────────────
function lanzarOCR(file){
    document.getElementById('ocrProgress').style.display='block';
    document.getElementById('ocrResult').style.display='none';
    document.getElementById('ocrWarn').style.display='none';
    setBar(5); setStep('Cargando motor OCR...');

    Tesseract.recognize(file, 'spa+eng', {
        logger: m => {
            if(m.status==='loading tesseract core')   { setBar(10); setStep('Cargando Tesseract...'); }
            if(m.status==='loading language traineddata') { setBar(30); setStep('Cargando idioma...'); }
            if(m.status==='recognizing text') { setBar(30+Math.round(m.progress*65)); setStep('Reconociendo... '+Math.round(m.progress*100)+'%'); }
        }
    }).then(({data:{text}})=>{
        document.getElementById('ocrProgress').style.display='none';
        console.log('📄 OCR texto completo:\n', text); // debug
        procesarOCR(text);
    }).catch(err=>{
        document.getElementById('ocrProgress').style.display='none';
        mostrarWarn('Error en OCR: '+err.message+'. Ingrese los datos manualmente.');
        document.getElementById('btnReOCR').style.display='block';
    });
}

function setBar(p){ document.getElementById('ocrFill').style.width=p+'%'; }
function setStep(t){ document.getElementById('ocrStep').textContent=t; }

// ── Procesar texto OCR ────────────────────────────────────
function procesarOCR(texto){
    let folio='', total='';

    // ── FOLIO: buscar "Ticket: #XXXXXX" o "Ticket #XXXXXX" ──
    // Patrón principal
    let m=texto.match(/[Tt]icket\s*[:#]\s*#?\s*(\d{4,9})/);
    if(m){ const n=m[1]; folio=n.length>6?n.slice(-6):n; }

    // Fallback: "# seguido de 6 dígitos"
    if(!folio){ m=texto.match(/#\s*(\d{6})\b/); if(m) folio=m[1]; }

    // Fallback extra: número de 6 dígitos que empiece con dígito después de espacios
    if(!folio){ m=texto.match(/\b(\d{6})\b/); if(m) folio=m[1]; }

    // ── TOTAL: buscar "PAGADO: $XXX" o "PAGADO: XXX MXN" ──
    let mT=texto.match(/PAGADO\s*[:\s]*\$?\s*([\d,]+(?:\.\d{0,2})?)\s*(?:MXN|M\.?X\.?N\.?)?/i);
    if(mT){ total=Math.floor(parseFloat(mT[1].replace(/,/g,''))).toString(); }

    // Fallback TOTAL
    if(!total){ mT=texto.match(/TOTAL\s*[:\s]*\$?\s*([\d,]+(?:\.\d{0,2})?)/i); if(mT) total=Math.floor(parseFloat(mT[1].replace(/,/g,''))).toString(); }

    // Mostrar resultado
    if(folio || total){
        document.getElementById('ocrResult').style.display='block';
        document.getElementById('ocrFolioVal').textContent=folio||'No detectado';
        document.getElementById('ocrTotalVal').textContent=total?'$'+total:'No detectado';

        if(folio){ document.getElementById('inFolio').value=folio; validarTicket(folio); }
        if(total){ document.getElementById('inTotal').value=total; document.getElementById('hTotal').value=total; }

        if(!folio||!total) mostrarWarn('Algunos datos no se detectaron. Puede corregirlos manualmente en los campos.');
        document.getElementById('btnReOCR').style.display='inline-flex';
    } else {
        mostrarWarn('No se detectaron datos del ticket. Ingrese folio y total manualmente.');
        document.getElementById('btnReOCR').style.display='block';
    }
}

function mostrarWarn(msg){
    document.getElementById('ocrWarn').style.display='block';
    document.getElementById('ocrWarnMsg').textContent=msg;
}

// ── Validar ticket en servidor ────────────────────────────
function validarTicket(val){
    clearTimeout(debTk); val=val.trim();
    const ts=document.getElementById('tkStatus');
    const ico=document.getElementById('tkIco');
    const msg=document.getElementById('tkMsg');
    const inp=document.getElementById('inFolio');

    if(!val){ ts.className='tk-status'; inp.style.borderColor=''; ticketValido=false; actualizarBtn(); return; }

    ts.className='tk-status show tk-chk';
    ico.innerHTML='<polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/>';
    ico.style.animation='spin 1s linear infinite';
    msg.textContent='Verificando...';
    ticketValido=false; actualizarBtn();

    document.getElementById('hFolio').value=val;

    debTk=setTimeout(()=>{
        fetch('anticipo_revision.php?action=validar_ticket&folio='+encodeURIComponent(val))
            .then(r=>r.json()).then(d=>{
                ico.style.animation='';
                if(d.status==='disponible'){
                    ts.className='tk-status show tk-ok';
                    ico.innerHTML='<polyline points="20 6 9 17 4 12"/>';
                    msg.textContent='Ticket disponible ✓';
                    inp.style.borderColor='var(--green)';
                    ticketValido=true;
                } else if(d.status==='duplicado'){
                    ts.className='tk-status show tk-err';
                    ico.innerHTML='<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>';
                    msg.textContent='⚠️ '+d.msg;
                    inp.style.borderColor='var(--red)';
                    ticketValido=false;
                }
                actualizarBtn();
            }).catch(()=>{ ico.style.animation=''; });
    }, 450);
}

function actualizarBtn(){
    const folio = document.getElementById('inFolio').value.trim();
    const total = document.getElementById('inTotal').value.trim();
    const img   = document.getElementById('hImgTicket').value;
    document.getElementById('btnGuardar').disabled = !(ticketValido && folio && total && img);
}

// Vigilar cambios manuales en total
document.getElementById('inTotal').addEventListener('input',function(){
    document.getElementById('hTotal').value=this.value;
    actualizarBtn();
});
// Vigilar cambios manuales en folio
document.getElementById('inFolio').addEventListener('input',function(){
    document.getElementById('hFolio').value=this.value;
});

// Validar submit
document.getElementById('fAnticipo').addEventListener('submit',function(e){
    if(!document.getElementById('hImgTicket').value){ e.preventDefault(); alert('Suba la imagen del ticket.'); return; }
    if(!ticketValido){ e.preventDefault(); alert('El folio del ticket no es válido o ya está registrado.'); return; }
    if(!document.getElementById('inTotal').value){ e.preventDefault(); alert('Ingrese el total pagado.'); return; }
});

// Lightbox
function verImagen(src){ document.getElementById('lbImg').src=src; document.getElementById('lb').classList.add('open'); }
</script>
</body>
</html>
