<?php
require_once __DIR__ . '/../../config/app.php';
require_once __DIR__ . '/../../config/onedrive.php';
require_once __DIR__ . '/../../includes/OneDriveStorage.php';
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../includes/functions.php';
require_once __DIR__ . '/../../includes/flash.php';
requireRol(ROL_SECRETARIA, ROL_ADMIN);

$db     = getDB();
$user   = currentUser();
$idInst = instId();
$iCond  = $idInst ? " AND id_instituto = $idInst" : '';

// ── MIGRAR ESTRUCTURA TABLA ───────────────────────────────────────────────────
// Hace id_estudiante nullable y agrega columnas de nombre/cédula/carrera libres
try {
    foreach ([
        "ALTER TABLE historico_ppp MODIFY COLUMN id_estudiante INT UNSIGNED DEFAULT NULL",
        "ALTER TABLE historico_ppp ADD COLUMN nombre_estudiante VARCHAR(255) DEFAULT NULL",
        "ALTER TABLE historico_ppp ADD COLUMN cedula_estudiante VARCHAR(20)  DEFAULT NULL",
        "ALTER TABLE historico_ppp ADD COLUMN carrera_estudiante VARCHAR(255) DEFAULT NULL",
    ] as $sql) { try{ $db->exec($sql); }catch(Throwable){} }
} catch(Throwable){}

// ── AJAX: buscar estudiantes del sistema ──────────────────────────────────────
if(isset($_GET['buscar_est'])){
    $q='%'.trim($_GET['buscar_est']).'%';
    $st=$db->prepare("SELECT e.id_estudiante,
        CONCAT(u.apellidos,' ',u.nombres) AS nombre,
        u.cedula, c.nombre AS carrera
        FROM estudiantes e
        JOIN usuarios u ON u.id_usuario=e.id_usuario
        JOIN carreras  c ON c.id_carrera=e.id_carrera
        WHERE (u.nombres LIKE :q OR u.apellidos LIKE :q OR u.cedula LIKE :q)
        ".($idInst?" AND e.id_instituto=$idInst":'')."
        ORDER BY u.apellidos,u.nombres LIMIT 15");
    $st->execute([':q'=>$q]);
    header('Content-Type: application/json'); echo json_encode($st->fetchAll()); exit;
}

// ── POST: GUARDAR ─────────────────────────────────────────────────────────────
if($_SERVER['REQUEST_METHOD']==='POST' && ($_POST['accion']??'')==='migrar'){
    // Estudiante — puede ser del sistema (id) o ingresado manualmente (texto)
    $idEst   = (int)($_POST['id_estudiante'] ?? 0) ?: null;
    $nomEst  = trim($_POST['nombre_estudiante']  ?? '');
    $cedEst  = trim($_POST['cedula_estudiante']   ?? '');
    $carEst  = trim($_POST['carrera_estudiante']  ?? '');

    // Si seleccionó del sistema, tomar sus datos
    if($idEst && !$nomEst){
        $row = $db->query("SELECT CONCAT(u.apellidos,' ',u.nombres) AS n, u.cedula, c.nombre AS car
            FROM estudiantes e JOIN usuarios u ON u.id_usuario=e.id_usuario
            JOIN carreras c ON c.id_carrera=e.id_carrera
            WHERE e.id_estudiante=$idEst LIMIT 1")->fetch();
        if($row){ $nomEst=$row['n']; $cedEst=$row['cedula']; $carEst=$row['car']; }
    }

    $empresa = trim($_POST['empresa']          ?? '');
    $rep     = trim($_POST['representante']    ?? '');
    $area    = trim($_POST['area']             ?? '');
    $cargo   = trim($_POST['cargo']            ?? '');
    $fIni    = $_POST['fecha_inicio']          ?? '';
    $fFin    = $_POST['fecha_fin']             ?? '';
    $horas   = (int)($_POST['horas']           ?? 0) ?: null;
    $nota    = $_POST['nota_final']!=='' ? (float)$_POST['nota_final'] : null;
    $periodo = trim($_POST['periodo']          ?? '');
    $anio    = (int)($_POST['anio_documento']  ?? 0) ?: null;
    $ciclo   = trim($_POST['ciclo']            ?? '');
    $respaldo= isset($_POST['tiene_respaldo_fisico']) ? 1 : 0;
    $obs     = trim($_POST['observaciones']    ?? '');
    $nomReg  = trim(($user['apellidos']??'').' '.($user['nombres']??''));

    $notaAud = "Documento historico migrado al sistema SIGVP. "
             . "El documento original fue generado antes de la implementacion del sistema"
             . ($anio  ? " en el año {$anio}" : '')
             . ($ciclo ? ", ciclo {$ciclo}" : '') . ". "
             . ($respaldo ? "Original en papel conservado en archivo institucional."
                          : "Documento fisico no disponible en archivo.")
             . " Estudiante: {$nomEst}".($cedEst?" ({$cedEst})":"")."."
             . " Registrado por: {$nomReg} — ".date('d/m/Y H:i').".";

    if(!$nomEst || !$empresa){
        flashSet('err','❌ Ingresa el nombre del estudiante y la empresa.');
        header('Location: migrar_ppp.php'); exit;
    }

    // ── PDF (opcional — no bloquea el guardado) ──────────────────────────────
    $archivoBD = null; $warnPdf = '';
    if(isset($_FILES['archivo_pdf']) && $_FILES['archivo_pdf']['error']===0){
        $ext = strtolower(pathinfo($_FILES['archivo_pdf']['name'],PATHINFO_EXTENSION));
        if(!in_array($ext,['pdf','jpg','jpeg','png'])){
            flashSet('err','❌ Solo PDF, JPG o PNG.'); header('Location: migrar_ppp.php'); exit;
        }
        if($_FILES['archivo_pdf']['size'] > 20*1024*1024){
            flashSet('err','❌ El archivo supera 20 MB.'); header('Location: migrar_ppp.php'); exit;
        }
        try{
            $archivoBD = OneDriveStorage::upload(
                $_FILES['archivo_pdf']['tmp_name'],
                'historico_ppp','hist_ppp_'.($idEst??'ext').'_'.time().'.'.$ext, null, $idInst);
        }catch(Throwable $ePdf){
            $warnPdf = ' ⚠️ PDF no subió a OneDrive: '.$ePdf->getMessage();
        }
    }

    // ── INSERT ────────────────────────────────────────────────────────────────
    try{
        $db->prepare("INSERT INTO historico_ppp
            (id_estudiante, nombre_estudiante, cedula_estudiante, carrera_estudiante,
             id_instituto, empresa, representante, area, cargo,
             fecha_inicio, fecha_fin, horas, nota_final, periodo,
             anio_documento, ciclo, tiene_respaldo_fisico,
             observaciones, nota_auditoria, archivo_pdf, registrado_por)
            VALUES
            (:est, :nom, :ced, :car,
             :inst, :emp, :rep, :area, :cargo,
             :fi, :ff, :h, :nota, :per,
             :anio, :ciclo, :resp,
             :obs, :naud, :pdf, :usr)")
        ->execute([
            ':est'  => $idEst,
            ':nom'  => $nomEst,
            ':ced'  => $cedEst  ?: null,
            ':car'  => $carEst  ?: null,
            ':inst' => $idInst  ?: null,
            ':emp'  => $empresa,
            ':rep'  => $rep     ?: null,
            ':area' => $area    ?: null,
            ':cargo'=> $cargo   ?: null,
            ':fi'   => $fIni    ?: null,
            ':ff'   => $fFin    ?: null,
            ':h'    => $horas,
            ':nota' => $nota,
            ':per'  => $periodo ?: null,
            ':anio' => $anio,
            ':ciclo'=> $ciclo   ?: null,
            ':resp' => $respaldo,
            ':obs'  => $obs     ?: null,
            ':naud' => $notaAud,
            ':pdf'  => $archivoBD,
            ':usr'  => $user['id'],
        ]);
        registrarAudit($user['id'],'migrar_historico_ppp','historico_ppp',(int)$db->lastInsertId());
        flashSet($warnPdf?'warn':'ok','✅ Registro PPP guardado.'.$warnPdf);
    }catch(Throwable $eDB){
        flashSet('err','❌ Error BD: '.$eDB->getMessage());
    }
    header('Location: migrar_ppp.php'); exit;
}

// ── POST: ELIMINAR ────────────────────────────────────────────────────────────
if($_SERVER['REQUEST_METHOD']==='POST' && ($_POST['accion']??'')==='eliminar'){
    $id=(int)($_POST['id_hist']??0);
    if($id){
        $row=$db->query("SELECT archivo_pdf FROM historico_ppp WHERE id=$id")->fetch();
        if($row && $row['archivo_pdf']){ try{OneDriveStorage::delete($row['archivo_pdf']);}catch(Throwable){} }
        $db->prepare("DELETE FROM historico_ppp WHERE id=:id")->execute([':id'=>$id]);
        flashSet('ok','Registro eliminado.');
    }
    header('Location: migrar_ppp.php'); exit;
}

// ── FILTROS Y LISTADO ─────────────────────────────────────────────────────────
$filtroQ      = trim($_GET['q']       ?? '');
$filtroCedula = trim($_GET['cedula']  ?? '');
$filtroPeriodo= trim($_GET['periodo'] ?? '');
$filtroAnio   = trim($_GET['anio']    ?? '');
$filtroCiclo  = trim($_GET['ciclo']   ?? '');

$wH=["1=1"]; $pH=[];
if($idInst) $wH[]="h.id_instituto=$idInst";
if($filtroQ){
    $wH[]="(h.nombre_estudiante LIKE :q OR h.empresa LIKE :q2 OR h.cedula_estudiante LIKE :q3)";
    $pH[':q']=$pH[':q2']=$pH[':q3']="%$filtroQ%";
}
if($filtroCedula) { $wH[]="h.cedula_estudiante LIKE :ced";  $pH[':ced'] ="%$filtroCedula%"; }
if($filtroPeriodo){ $wH[]="h.periodo LIKE :per2";            $pH[':per2']="%$filtroPeriodo%"; }
if($filtroAnio)   { $wH[]="h.anio_documento=:anio";          $pH[':anio']=$filtroAnio; }
if($filtroCiclo)  { $wH[]="h.ciclo=:ciclo";                  $pH[':ciclo']=$filtroCiclo; }

// ── Paginado ──────────────────────────────────────────────
$porPagina  = 10;
$paginaNum  = max(1,(int)($_GET['pagina']??1));

// Total sin paginar (para stats globales)
$stTotal=$db->prepare("SELECT COUNT(*) FROM historico_ppp h WHERE ".implode(' AND ',$wH));
$stTotal->execute($pH);
$totalReg=(int)$stTotal->fetchColumn();

// Total con PDF (global, sin filtro de página)
$stPdf=$db->prepare("SELECT COUNT(*) FROM historico_ppp h WHERE ".implode(' AND ',$wH)." AND h.archivo_pdf IS NOT NULL AND h.archivo_pdf<>''");
$stPdf->execute($pH);
$conPdf=(int)$stPdf->fetchColumn();
$sinPdf=$totalReg-$conPdf;

$totalPags  = max(1,(int)ceil($totalReg/$porPagina));
$paginaNum  = min($paginaNum,$totalPags);
$offset     = ($paginaNum-1)*$porPagina;

$stH=$db->prepare("SELECT h.*,
    COALESCE(h.nombre_estudiante,'—') AS nombre_est,
    COALESCE(h.cedula_estudiante,'—') AS cedula_est,
    COALESCE(h.carrera_estudiante,'—') AS carrera_est,
    CONCAT(ur.apellidos,' ',ur.nombres) AS reg_nombre
    FROM historico_ppp h
    LEFT JOIN usuarios ur ON ur.id_usuario=h.registrado_por
    WHERE ".implode(' AND ',$wH)."
    ORDER BY h.anio_documento DESC, h.ciclo DESC, h.created_at DESC
    LIMIT $porPagina OFFSET $offset");
$stH->execute($pH);
$historico=$stH->fetchAll();
$aniosDisp= $db->query("SELECT DISTINCT anio_documento FROM historico_ppp WHERE anio_documento IS NOT NULL".($idInst?" AND id_instituto=$idInst":'')." ORDER BY anio_documento DESC")->fetchAll(PDO::FETCH_COLUMN);
?>
<?php $paginaActual='migrar_ppp'; ?>
<!DOCTYPE html><html lang="es"><head>
<?php include __DIR__.'/../../includes/head.php'; ?>
<link rel="stylesheet" href="<?=BASE_URL?>/assets/css/sidebar.css">
<link rel="stylesheet" href="<?=BASE_URL?>/assets/css/sidebar-secretaria.css">
<style>
:root{--ac:#8b5cf6;--ac-dim:rgba(139,92,246,.12);--ac-bdr:rgba(139,92,246,.3);
      --cb:#111827;--cbdr:#1f2937;--inp:#0a0d14;--tm:#6b7280;--tx:#e5e7eb;}
.hw{max-width:1400px;margin:0 auto;padding:24px;}
.phero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.phero h2{font-size:22px;font-weight:800;color:var(--ac);margin:0 0 5px;display:flex;align-items:center;gap:10px;}
.phero p{color:var(--tm);font-size:13px;margin:0;}
.hbadge{background:var(--ac-dim);color:var(--ac);border:1px solid var(--ac-bdr);border-radius:20px;padding:4px 14px;font-size:11px;font-weight:700;}
.srow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.sc{background:var(--cb);border:1px solid var(--cbdr);border-radius:12px;padding:16px 18px;position:relative;overflow:hidden;}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--scc,var(--ac));}
.sc-v{font-size:28px;font-weight:800;color:var(--scc,var(--ac));line-height:1;}
.sc-l{font-size:10.5px;color:var(--tm);margin-top:4px;text-transform:uppercase;letter-spacing:.05em;}
.fc{background:var(--cb);border:1px solid var(--cbdr);border-radius:16px;padding:26px;margin-bottom:22px;}
.fch{display:flex;align-items:center;gap:10px;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--cbdr);}
.fch h4{font-size:14px;font-weight:700;color:var(--ac);margin:0;text-transform:uppercase;letter-spacing:.05em;}
.fsl{font-size:10px;font-weight:700;color:var(--ac);text-transform:uppercase;letter-spacing:.08em;margin:16px 0 10px;display:flex;align-items:center;gap:8px;}
.fsl::after{content:'';flex:1;height:1px;background:var(--ac-bdr);}
.fl{font-size:11.5px;font-weight:600;color:var(--tm);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;display:block;}
.fc-in,.fc-sel{background:var(--inp);border:1px solid var(--cbdr);color:var(--tx);border-radius:8px;font-size:13px;padding:8px 12px;width:100%;}
.fc-in:focus,.fc-sel:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-dim);background:var(--inp);color:var(--tx);outline:none;}
.fc-in::placeholder{color:#2d3748;}
/* Búsqueda estudiante */
.ewrap{position:relative;}
.edrop{position:absolute;z-index:999;background:#1a2235;border:1px solid var(--ac-bdr);border-radius:10px;width:100%;max-height:220px;overflow-y:auto;display:none;top:calc(100% + 4px);box-shadow:0 8px 24px rgba(0,0,0,.5);}
.ei{padding:10px 14px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--cbdr);}
.ei:last-child{border-bottom:none;}
.ei:hover{background:var(--ac-dim);}
.ei strong{color:var(--tx);}
.ei small{color:var(--tm);font-size:11px;}
/* Tabs estudiante */
.etabs{display:flex;gap:0;margin-bottom:10px;border-radius:8px;overflow:hidden;border:1px solid var(--cbdr);}
.etab{flex:1;padding:8px 12px;background:var(--inp);color:var(--tm);font-size:12px;font-weight:600;cursor:pointer;border:none;text-align:center;transition:.2s;}
.etab.active{background:var(--ac);color:#fff;}
.epanel{display:none;}
.epanel.active{display:block;}
/* Tag estudiante seleccionado */
.eseltag{display:none;margin-top:8px;padding:10px 14px;background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.25);border-radius:8px;}
.eseltag-row{display:flex;align-items:center;gap:10px;}
.eseltag-ic{width:36px;height:36px;background:rgba(52,211,153,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.eseltag-name{font-weight:700;color:#34d399;font-size:13px;}
.eseltag-sub{font-size:11px;color:#6b7280;margin-top:2px;}
/* Dropzone */
.dz{border:2px dashed var(--cbdr);border-radius:12px;padding:24px 20px;text-align:center;cursor:pointer;transition:.2s;color:var(--tm);}
.dz:hover,.dz.ov{border-color:var(--ac);color:var(--ac);background:var(--ac-dim);}
.dz-ic{font-size:26px;margin-bottom:8px;}
.dz-tx{font-size:13px;}
.dz-sb{font-size:11px;margin-top:4px;color:#374151;}
/* Checkbox */
.cwrap{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(52,211,153,.05);border:1px solid rgba(52,211,153,.2);border-radius:10px;cursor:pointer;}
.cwrap input[type=checkbox]{width:18px;height:18px;accent-color:#34d399;cursor:pointer;flex-shrink:0;}
.cwrap .ct{font-size:13px;color:#34d399;font-weight:600;}
.cwrap .cs{font-size:11px;color:var(--tm);}
.nab{background:#060b14;border:1px solid var(--ac-bdr);border-radius:8px;padding:12px 14px;font-size:11.5px;color:#64748b;font-style:italic;line-height:1.65;margin-top:10px;}
.bsub{background:linear-gradient(135deg,var(--ac),#7c3aed);color:#fff;border:none;border-radius:10px;padding:12px 32px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 4px 16px rgba(139,92,246,.35);transition:.2s;}
.bsub:hover{transform:translateY(-1px);}
/* Tabla */
.tc{background:var(--cb);border:1px solid var(--cbdr);border-radius:16px;overflow:hidden;margin-bottom:24px;}
.tch{padding:16px 22px;border-bottom:1px solid var(--cbdr);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tch h4{font-size:13px;font-weight:700;color:var(--ac);margin:0;text-transform:uppercase;letter-spacing:.05em;}
.fr{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto;}
.ht{width:100%;border-collapse:collapse;}
.ht th{background:#080d18;color:#374151;font-size:10px;text-transform:uppercase;padding:10px 14px;font-weight:700;letter-spacing:.06em;white-space:nowrap;}
.ht td{padding:11px 14px;border-bottom:1px solid #0d1520;color:var(--tx);vertical-align:middle;font-size:13px;}
.ht tr:last-child td{border-bottom:none;}
.ht tr:hover td{background:rgba(255,255,255,.015);}
.banio{background:rgba(139,92,246,.15);color:#a78bfa;border:1px solid rgba(139,92,246,.25);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700;}
.bciclo{background:rgba(56,189,248,.1);color:#38bdf8;border:1px solid rgba(56,189,248,.2);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600;}
.bresp{background:rgba(52,211,153,.1);color:#34d399;border:1px solid rgba(52,211,153,.2);border-radius:20px;padding:2px 8px;font-size:10px;}
.bnoresp{background:rgba(248,113,113,.1);color:#f87171;border:1px solid rgba(248,113,113,.2);border-radius:20px;padding:2px 8px;font-size:10px;}
.nok{color:#34d399;font-weight:800;}
.nbad{color:#fbbf24;font-weight:800;}
.nnd{color:#374151;font-style:italic;font-size:12px;}
.bpdf{background:rgba(220,38,38,.12);color:#f87171;border:1px solid rgba(220,38,38,.2);border-radius:6px;padding:5px 10px;font-size:11px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.bpdf:hover{background:rgba(220,38,38,.25);}
.bdel{background:transparent;color:#374151;border:1px solid #1f2937;border-radius:6px;padding:5px 8px;cursor:pointer;}
.bdel:hover{border-color:#f87171;color:#f87171;}
.baud{background:rgba(139,92,246,.1);color:#a78bfa;border:1px solid rgba(139,92,246,.2);border-radius:6px;padding:5px 8px;font-size:11px;cursor:pointer;}
.empty{text-align:center;padding:60px 20px;color:var(--tm);}
.empty i{font-size:40px;margin-bottom:12px;display:block;color:#1f2937;}
.maud .modal-content{background:#111827;border:1px solid var(--ac-bdr);border-radius:14px;}
.maud .modal-header{border-bottom:1px solid var(--cbdr);}
.maud .modal-title{color:var(--ac);font-weight:700;font-size:14px;}
.maud .modal-body{font-size:13px;color:#94a3b8;line-height:1.7;}
@media(max-width:900px){.srow{grid-template-columns:repeat(2,1fr);}.fr{width:100%;}}
/* Paginado */
.pag-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:14px 4px 4px;}
.pag-info{font-size:12px;color:#6b7280;}
.pag-btns{display:flex;gap:4px;flex-wrap:wrap;}
.pag-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:6px;background:#1f2937;color:#9ca3af;font-size:13px;font-weight:600;text-decoration:none;border:1px solid #374151;transition:background .15s,color .15s;}
.pag-btn:hover{background:#374151;color:#e5e7eb;}
.pag-act{background:var(--ac)!important;color:#fff!important;border-color:var(--ac)!important;}
</style>
</head><body>
<?php include __DIR__.'/../../includes/navbar.php'; ?>
<div class="app-shell">
<?php include __DIR__.'/../../includes/sidebar-secretaria.php'; ?>
<main class="main-area"><div class="hw">

<?=flashHtml()?>

<div class="phero">
  <div>
    <h2><i class="fa fa-clock-rotate-left"></i>PPP Histórico</h2>
    <p>Prácticas pre profesionales anteriores al sistema SIGVP.<br>
       Válido para auditorías <strong style="color:#a78bfa;">CES / CACES</strong>.</p>
  </div>
  <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
    <a href="migrar_vinculacion.php" class="btn btn-sm btn-outline-secondary">
      <i class="fa fa-people-arrows me-1"></i>Vinculación Histórica
    </a>
  </div>
</div>

<div class="srow">
  <div class="sc" style="--scc:#8b5cf6;"><div class="sc-v"><?=$totalReg?></div><div class="sc-l">Total registros</div></div>
  <div class="sc" style="--scc:#34d399;"><div class="sc-v"><?=$conPdf?></div><div class="sc-l">Con PDF en OneDrive</div></div>
  <div class="sc" style="--scc:#fbbf24;"><div class="sc-v"><?=$sinPdf?></div><div class="sc-l">Sin PDF aún</div></div>
  <div class="sc" style="--scc:#38bdf8;"><div class="sc-v"><?=count($aniosDisp)?></div><div class="sc-l">Años registrados</div></div>
</div>

<!-- FORMULARIO -->
<div class="fc">
  <div class="fch">
    <div style="width:34px;height:34px;background:var(--ac-dim);border-radius:8px;display:flex;align-items:center;justify-content:center;">
      <i class="fa fa-plus" style="color:var(--ac);"></i>
    </div>
    <h4>Nuevo Registro Histórico PPP</h4>
  </div>
  <form method="POST" enctype="multipart/form-data" autocomplete="off" id="frmPPP">
    <input type="hidden" name="accion" value="migrar">
    <input type="hidden" name="id_estudiante"      id="hidIdEst">
    <input type="hidden" name="nombre_estudiante"  id="hidNomEst">
    <input type="hidden" name="cedula_estudiante"  id="hidCedEst">
    <input type="hidden" name="carrera_estudiante" id="hidCarEst">

    <div class="fsl"><i class="fa fa-user-graduate"></i>Datos del Estudiante</div>
    <div class="row g-3">
      <div class="col-md-8">
        <label class="fl">Estudiante <span style="color:#f87171;">*</span></label>
        <!-- TABS: buscar en sistema / ingresar manual -->
        <div class="etabs">
          <button type="button" class="etab active" onclick="setTab('buscar')">
            <i class="fa fa-magnifying-glass me-1"></i>Buscar en el sistema
          </button>
          <button type="button" class="etab" onclick="setTab('manual')">
            <i class="fa fa-keyboard me-1"></i>Ingresar manualmente
          </button>
        </div>
        <!-- Tab buscar -->
        <div id="panelBuscar" class="epanel active">
          <div class="ewrap">
            <input type="text" id="buscarEst" class="fc-in" placeholder="Escribe nombre o cédula..." autocomplete="off">
            <div class="edrop" id="estResults"></div>
          </div>
          <div class="eseltag" id="estSelTag">
            <div class="eseltag-row">
              <div class="eseltag-ic"><i class="fa fa-user-graduate" style="color:#34d399;"></i></div>
              <div style="flex:1;">
                <div class="eseltag-name" id="tagNombre"></div>
                <div class="eseltag-sub"><span id="tagCedula"></span> · <span id="tagCarrera"></span></div>
              </div>
              <button type="button" onclick="limpiarEst()" style="background:transparent;border:1px solid rgba(248,113,113,.3);color:#f87171;border-radius:6px;padding:3px 9px;font-size:11px;cursor:pointer;">
                <i class="fa fa-xmark"></i> Cambiar
              </button>
            </div>
          </div>
        </div>
        <!-- Tab manual -->
        <div id="panelManual" class="epanel">
          <input type="text" id="manNombre" class="fc-in" placeholder="Apellidos y Nombres completos *" oninput="syncManual()">
          <div class="row g-2 mt-1">
            <div class="col-md-5">
              <input type="text" id="manCedula"  class="fc-in" placeholder="Cédula" oninput="syncManual()">
            </div>
            <div class="col-md-7">
              <input type="text" id="manCarrera" class="fc-in" placeholder="Carrera" oninput="syncManual()">
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <label class="fl">Año del documento</label>
        <select name="anio_documento" id="selAnio" class="fc-sel">
          <option value="">— Año —</option>
          <?php for($y=date('Y');$y>=2000;$y--): ?><option value="<?=$y?>"><?=$y?></option><?php endfor; ?>
        </select>
      </div>
      <div class="col-md-2">
        <label class="fl">Ciclo</label>
        <select name="ciclo" id="selCiclo" class="fc-sel">
          <option value="">— Ciclo —</option>
          <?php for($ci=1;$ci<=6;$ci++): ?><option value="<?=$ci?>">Ciclo <?=$ci?></option><?php endfor; ?>
        </select>
      </div>
      <div class="col-md-4">
        <label class="fl">Período académico <small style="color:#374151;">(auto)</small></label>
        <input type="text" name="periodo" id="campoPeriodo" class="fc-in" placeholder="Ej: 2022-C2" readonly>
      </div>
      <div class="col-md-4">
        <label class="fl">Nota Final <small style="color:#374151;">(0–100)</small></label>
        <input type="number" name="nota_final" class="fc-in" step="0.01" min="0" max="100" placeholder="Ej: 85.00">
      </div>
      <div class="col-md-4">
        <label class="fl">Horas cumplidas</label>
        <input type="number" name="horas" class="fc-in" min="0" placeholder="Ej: 240">
      </div>
    </div>

    <div class="fsl"><i class="fa fa-building"></i>Datos de la Empresa</div>
    <div class="row g-3">
      <div class="col-md-6">
        <label class="fl">Empresa <span style="color:#f87171;">*</span></label>
        <input type="text" name="empresa" class="fc-in" placeholder="Razón social" required>
      </div>
      <div class="col-md-6">
        <label class="fl">Representante / Tutor empresa</label>
        <input type="text" name="representante" class="fc-in" placeholder="Nombre del representante">
      </div>
      <div class="col-md-4">
        <label class="fl">Área de prácticas</label>
        <input type="text" name="area" class="fc-in" placeholder="Ej: Contabilidad, TI...">
      </div>
      <div class="col-md-3">
        <label class="fl">Cargo / Rol</label>
        <input type="text" name="cargo" class="fc-in" placeholder="Ej: Practicante">
      </div>
      <div class="col-md-2">
        <label class="fl">Fecha inicio</label>
        <input type="date" name="fecha_inicio" class="fc-in">
      </div>
      <div class="col-md-3">
        <label class="fl">Fecha fin</label>
        <input type="date" name="fecha_fin" class="fc-in">
      </div>
      <div class="col-12">
        <label class="fl">Observaciones adicionales</label>
        <input type="text" name="observaciones" class="fc-in" placeholder="Cualquier dato relevante...">
      </div>
    </div>

    <div class="fsl"><i class="fa fa-file-shield"></i>Respaldo y Documento Escaneado</div>
    <div class="row g-3">
      <div class="col-md-5">
        <label class="cwrap" for="chkResp">
          <input type="checkbox" name="tiene_respaldo_fisico" id="chkResp" value="1" checked>
          <div>
            <div class="ct"><i class="fa fa-box-archive me-1"></i>Original en papel en archivo institucional</div>
            <div class="cs">Marcar si el documento físico está guardado en secretaría</div>
          </div>
        </label>
      </div>
      <div class="col-md-7">
        <label class="fl">Documento escaneado <small style="color:#374151;">(PDF, JPG, PNG — máx 20MB)</small></label>
        <div class="dz" id="dz" onclick="document.getElementById('fPdf').click()">
          <div class="dz-ic"><i class="fa fa-file-arrow-up"></i></div>
          <div class="dz-tx" id="dzLabel">📎 Arrastra el documento escaneado o haz clic para buscarlo</div>
          <div class="dz-sb"><i class="fa fa-cloud me-1"></i>Se guardará automáticamente en OneDrive</div>
        </div>
        <input type="file" name="archivo_pdf" id="fPdf" accept=".pdf,.jpg,.jpeg,.png" style="display:none;">
      </div>
    </div>

    <div style="margin-top:18px;">
      <label class="fl"><i class="fa fa-stamp me-1" style="color:var(--ac);"></i>Nota de auditoría — generada automáticamente</label>
      <div class="nab" id="notaAudPrev">Completa los campos para ver la nota de auditoría...</div>
    </div>

    <div style="display:flex;justify-content:flex-end;margin-top:22px;">
      <button type="submit" class="bsub" onclick="return validarForm()">
        <i class="fa fa-floppy-disk me-2"></i>Guardar
      </button>
    </div>
  </form>
</div>

<!-- TABLA LISTADO -->
<div class="tc">
  <div class="tch">
    <i class="fa fa-list-check" style="color:var(--ac);font-size:16px;"></i>
    <h4>Registros Históricos (<?=$totalReg?>)</h4>
    <form method="GET" class="fr">
      <input type="text" name="q"       value="<?=htmlspecialchars($filtroQ)?>"       class="fc-in" style="width:170px;" placeholder="🔍 Nombre o empresa...">
      <input type="text" name="cedula"  value="<?=htmlspecialchars($filtroCedula)?>"  class="fc-in" style="width:120px;" placeholder="🪪 Cédula...">
      <input type="text" name="periodo" value="<?=htmlspecialchars($filtroPeriodo)?>" class="fc-in" style="width:110px;" placeholder="📅 Período...">
      <select name="anio" class="fc-sel" style="width:95px;">
        <option value="">Año</option>
        <?php foreach($aniosDisp as $a): ?>
          <option value="<?=$a?>" <?=$filtroAnio==$a?'selected':''?>><?=$a?></option>
        <?php endforeach; ?>
      </select>
      <select name="ciclo" class="fc-sel" style="width:100px;">
        <option value="">Ciclo</option>
        <?php for($ci=1;$ci<=6;$ci++): ?>
          <option value="<?=$ci?>" <?=$filtroCiclo==$ci?'selected':''?>>Ciclo <?=$ci?></option>
        <?php endfor; ?>
      </select>
      <button type="submit" style="background:var(--ac);color:#fff;border:none;border-radius:8px;padding:7px 14px;cursor:pointer;"><i class="fa fa-filter"></i></button>
      <a href="migrar_ppp.php" class="btn btn-sm btn-outline-secondary"><i class="fa fa-xmark"></i></a>
    </form>
  </div>
  <?php if(empty($historico)): ?>
    <div class="empty"><i class="fa fa-inbox"></i>
      <div style="font-size:15px;font-weight:600;margin-bottom:4px;">Sin registros aún</div>
      <div style="font-size:13px;">Usa el formulario de arriba para agregar el primero.</div>
    </div>
  <?php else: ?>
  <div style="overflow-x:auto;">
    <table class="ht">
      <thead><tr>
        <th>#</th><th>Estudiante</th><th>Año / Ciclo</th><th>Empresa</th>
        <th style="text-align:center;">Horas</th><th style="text-align:center;">Nota/100</th>
        <th style="text-align:center;">Respaldo</th>
        <th style="text-align:center;">PDF</th>
        <th style="text-align:center;">Auditoría</th>
        <th style="text-align:center;">—</th>
      </tr></thead>
      <tbody>
      <?php foreach($historico as $i=>$h):
        $pdfUrl='';
        if($h['archivo_pdf']){
            if(OneDriveStorage::esOneDrive($h['archivo_pdf'])){
                try{$pdfUrl=OneDriveStorage::getDownloadUrl($h['archivo_pdf']);}catch(Throwable){}
            } else { $pdfUrl=BASE_URL.'/assets/uploads/'.ltrim($h['archivo_pdf'],'/'); }
        }
        $nc=$h['nota_final']===null?'nnd':($h['nota_final']>=70?'nok':'nbad');
      ?>
        <tr>
          <td style="color:#374151;"><?=$i+1?></td>
          <td>
            <div style="font-weight:600;"><?=htmlspecialchars($h['nombre_est'])?></div>
            <div style="font-size:11px;color:#4b5563;"><?=htmlspecialchars($h['cedula_est'])?></div>
            <div style="font-size:11px;color:#4b5563;"><?=htmlspecialchars($h['carrera_est'])?></div>
          </td>
          <td>
            <?php if($h['anio_documento']): ?><span class="banio"><?=$h['anio_documento']?></span><?php endif; ?>
            <?php if($h['ciclo']): ?><br><span class="bciclo">Ciclo <?=htmlspecialchars($h['ciclo'])?></span><?php endif; ?>
            <?php if($h['periodo']): ?><br><span style="font-size:10px;color:#374151;"><?=htmlspecialchars($h['periodo'])?></span><?php endif; ?>
          </td>
          <td><?=htmlspecialchars($h['empresa'])?><?php if($h['area']): ?><br><small style="color:#4b5563;"><?=htmlspecialchars($h['area'])?></small><?php endif; ?></td>
          <td style="text-align:center;"><?=$h['horas']?'<span style="color:#38bdf8;font-weight:700;">'.$h['horas'].'h</span>':'<span class="nnd">—</span>'?></td>
          <td style="text-align:center;"><span class="<?=$nc?>"><?=$h['nota_final']!==null?number_format($h['nota_final'],2):'—'?></span></td>
          <td style="text-align:center;"><span class="<?=$h['tiene_respaldo_fisico']?'bresp':'bnoresp'?>"><?=$h['tiene_respaldo_fisico']?'✓ En archivo':'✗ No disponible'?></span></td>
          <td style="text-align:center;">
            <?php if($pdfUrl): ?><a href="<?=htmlspecialchars($pdfUrl)?>" target="_blank" class="bpdf"><i class="fa fa-file-pdf"></i>Ver PDF</a>
            <?php else: ?><span class="nnd">Sin PDF</span><?php endif; ?>
          </td>
          <td style="text-align:center;">
            <?php if($h['nota_auditoria']): ?>
              <button class="baud" onclick="verAud(<?=htmlspecialchars(json_encode($h['nota_auditoria']))?>)"><i class="fa fa-stamp me-1"></i>Ver</button>
            <?php else: ?><span class="nnd">—</span><?php endif; ?>
          </td>
          <td style="text-align:center;">
            <form method="POST" onsubmit="return confirm('¿Eliminar este registro?');" style="display:inline;">
              <input type="hidden" name="accion" value="eliminar">
              <input type="hidden" name="id_hist" value="<?=$h['id']?>">
              <button type="submit" class="bdel"><i class="fa fa-trash"></i></button>
            </form>
          </td>
        </tr>
      <?php endforeach; ?>
      </tbody>
    </table>
  </div>

  <?php if($totalPags>1): ?>
  <?php
    // Construir URL base conservando filtros
    $qBase=array_filter(['q'=>$filtroQ,'cedula'=>$filtroCedula,'periodo'=>$filtroPeriodo,'anio'=>$filtroAnio,'ciclo'=>$filtroCiclo]);
  ?>
  <div class="pag-wrap">
    <span class="pag-info">Página <?=$paginaNum?> de <?=$totalPags?> &nbsp;·&nbsp; <?=$totalReg?> registros</span>
    <div class="pag-btns">
      <?php if($paginaNum>1): ?>
        <a href="?<?=http_build_query(array_merge($qBase,['pagina'=>1]))?>" class="pag-btn" title="Primera">«</a>
        <a href="?<?=http_build_query(array_merge($qBase,['pagina'=>$paginaNum-1]))?>" class="pag-btn">‹</a>
      <?php endif; ?>
      <?php
        $rng=2;
        for($p=max(1,$paginaNum-$rng);$p<=min($totalPags,$paginaNum+$rng);$p++):
      ?>
        <a href="?<?=http_build_query(array_merge($qBase,['pagina'=>$p]))?>"
           class="pag-btn<?=$p===$paginaNum?' pag-act':''?>"><?=$p?></a>
      <?php endfor; ?>
      <?php if($paginaNum<$totalPags): ?>
        <a href="?<?=http_build_query(array_merge($qBase,['pagina'=>$paginaNum+1]))?>" class="pag-btn">›</a>
        <a href="?<?=http_build_query(array_merge($qBase,['pagina'=>$totalPags]))?>" class="pag-btn" title="Última">»</a>
      <?php endif; ?>
    </div>
  </div>
  <?php endif; ?>

  <?php endif; ?>
</div>

</div></main></div>

<!-- Modal auditoría -->
<div class="modal fade maud" id="mAud" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fa fa-stamp me-2"></i>Nota de Auditoría CES/CACES</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" id="mAudBody"></div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<script>
var tabActual = 'buscar';

function setTab(t){
  tabActual = t;
  document.querySelectorAll('.etab').forEach((b,i)=>b.classList.toggle('active', (i===0&&t==='buscar')||(i===1&&t==='manual')));
  document.getElementById('panelBuscar').classList.toggle('active', t==='buscar');
  document.getElementById('panelManual').classList.toggle('active', t==='manual');
  limpiarEst();
}

// ── Sync campos ocultos desde modo manual ────────────────
function syncManual(){
  document.getElementById('hidNomEst').value = document.getElementById('manNombre').value.trim();
  document.getElementById('hidCedEst').value = document.getElementById('manCedula').value.trim();
  document.getElementById('hidCarEst').value = document.getElementById('manCarrera').value.trim();
  document.getElementById('hidIdEst').value  = '';
  updNota();
}

// ── Seleccionar desde búsqueda ───────────────────────────
var bt;
$('#buscarEst').on('input',function(){
  clearTimeout(bt);
  var q=$(this).val().trim();
  if(q.length<2){$('#estResults').hide();return;}
  bt=setTimeout(function(){
    $.getJSON('migrar_ppp.php?buscar_est='+encodeURIComponent(q),function(data){
      var h='';
      if(!data.length) h='<div class="ei" style="color:#4b5563;cursor:default;">Sin resultados en el sistema</div>';
      else $.each(data,function(i,e){
        h+='<div class="ei" data-id="'+e.id_estudiante+'" data-nom="'+e.nombre+'" data-ced="'+e.cedula+'" data-car="'+e.carrera+'">'
          +'<strong>'+e.nombre+'</strong><br><small>'+e.cedula+' · '+e.carrera+'</small></div>';
      });
      $('#estResults').html(h).show();
    });
  },300);
});

$(document).on('click','.ei[data-id]',function(){
  var $t=$(this);
  $('#hidIdEst').val($t.data('id'));
  $('#hidNomEst').val($t.data('nom'));
  $('#hidCedEst').val($t.data('ced'));
  $('#hidCarEst').val($t.data('car'));
  $('#tagNombre').text($t.data('nom'));
  $('#tagCedula').text($t.data('ced'));
  $('#tagCarrera').text($t.data('car'));
  $('#buscarEst').val('').hide();
  $('#estSelTag').show();
  $('#estResults').hide();
  updNota();
});

function limpiarEst(){
  $('#hidIdEst,#hidNomEst,#hidCedEst,#hidCarEst').val('');
  $('#buscarEst').val('').show().focus();
  $('#estSelTag').hide();
  // limpiar manual
  $('#manNombre,#manCedula,#manCarrera').val('');
}

$(document).on('click',function(e){
  if(!$(e.target).closest('#buscarEst,#estResults').length) $('#estResults').hide();
});

// ── Período automático ───────────────────────────────────
function updPeriodo(){
  var a=$('#selAnio').val(), c=$('#selCiclo').val();
  $('#campoPeriodo').val(a&&c ? a+'-C'+c : (a||''));
  updNota();
}
$('#selAnio,#selCiclo').on('change', updPeriodo);

// ── Nota de auditoría ────────────────────────────────────
function updNota(){
  var nom = $('#hidNomEst').val() || $('#manNombre').val() || '(estudiante)';
  var a=$('#selAnio').val(), c=$('#selCiclo').val(), r=$('#chkResp').is(':checked');
  var t='Documento histórico migrado al sistema SIGVP. '
      +'El documento original fue generado antes de la implementación del sistema'
      +(a?' en el año <strong>'+a+'</strong>':'')
      +(c?', ciclo <strong>'+c+'</strong>':'')+'. '
      +(r?'Original en papel <strong>conservado en el archivo institucional</strong>.'
         :'<strong>Documento físico no disponible en archivo.</strong>')
      +' Estudiante: <strong>'+nom+'</strong>.'
      +' Registrado en SIGVP: '+new Date().toLocaleDateString('es-EC')+'.';
  $('#notaAudPrev').html(t);
}
$('#chkResp').on('change', updNota);
updNota();

// ── Validación antes de submit ───────────────────────────
function validarForm(){
  var nom = document.getElementById('hidNomEst').value.trim();
  if(!nom){
    if(tabActual==='buscar'){
      alert('⚠️ Debes seleccionar un estudiante de la lista o usar la pestaña "Ingresar manualmente".');
    } else {
      alert('⚠️ Ingresa el nombre del estudiante.');
      document.getElementById('manNombre').focus();
    }
    return false;
  }
  return true;
}

// ── Dropzone ─────────────────────────────────────────────
var dzel=document.getElementById('dz'), fi=document.getElementById('fPdf');
fi.addEventListener('change',function(){ if(fi.files[0]) document.getElementById('dzLabel').textContent='📄 '+fi.files[0].name; });
dzel.addEventListener('dragover',function(e){e.preventDefault();dzel.classList.add('ov');});
dzel.addEventListener('dragleave',function(){dzel.classList.remove('ov');});
dzel.addEventListener('drop',function(e){
  e.preventDefault();dzel.classList.remove('ov');
  fi.files=e.dataTransfer.files;
  if(fi.files[0]) document.getElementById('dzLabel').textContent='📄 '+fi.files[0].name;
});

function verAud(txt){
  document.getElementById('mAudBody').textContent=txt;
  new bootstrap.Modal(document.getElementById('mAud')).show();
}
</script>

</body></html>