<?php
ob_start();
// modules/estudiante/mis_documentos.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_ESTUDIANTE);

// ── Validación segura de archivos (3 capas) ──────────────────
// Capa 1: extensión | Capa 2: MIME real con finfo | Capa 3: magic bytes
if (!function_exists('validarArchivoSeguro')) {
    function validarArchivoSeguro(array $file, array $extsOk, array $mimesOk, array $magicOk): string
    {
        $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
        if (!in_array($ext, $extsOk))
            return 'Solo se aceptan archivos PDF.';
        if (function_exists('finfo_open')) {
            $fi   = finfo_open(FILEINFO_MIME_TYPE);
            $mime = $fi ? finfo_file($fi, $file['tmp_name']) : '';
            if ($fi) finfo_close($fi);
            if ($mime && !in_array($mime, $mimesOk))
                return 'El contenido del archivo no es un PDF real (MIME inválido).';
        }
        $fh = fopen($file['tmp_name'], 'rb');
        if ($fh === false) return 'No se pudo leer el archivo.';
        $cab = fread($fh, max(array_column($magicOk, 'len')));
        fclose($fh);
        foreach ($magicOk as $f)
            if (substr($cab, 0, $f['len']) === $f['bytes']) return '';
        return 'El archivo no tiene la firma interna de un PDF real. Puede ser un archivo falso.';
    }
}
if (!defined('MAGIC_PERS')) {
    define('MAGIC_PERS', [
        'pdf' => ['bytes' => '%PDF-', 'len' => 5],
    ]);
}

$user      = currentUser();
$db        = getDB();
$pageTitle = 'Mi Expediente PPP';

$stPrac = $db->prepare("
    SELECT p.id_practica, p.estado, p.horas_requeridas,
           u.cedula, u.nombres, u.apellidos, e.id_estudiante
    FROM   practicas p
    JOIN   estudiantes e ON e.id_estudiante = p.id_estudiante
    JOIN   usuarios u    ON u.id_usuario    = e.id_usuario
    JOIN   periodos_academicos pe ON pe.id_periodo = p.id_periodo
    WHERE  e.id_usuario = :uid
      AND  p.estado NOT IN ('borrador','rechazado')
      AND  pe.activo = 1
    ORDER BY p.created_at DESC LIMIT 1
");
$stPrac->execute([':uid' => $user['id']]);
$practica = $stPrac->fetch();

$DOCS = [
    '001'  => 'Solicitud para Oficializar las Prácticas',
    '002'  => 'Carta del Instituto a la Empresa',
    '003'  => 'Carta de la Empresa al Instituto',
    '004'  => 'Ficha de Designación del Tutor Académico',
    '002A' => 'Ficha General Estudiante-Empresa',
    '005'  => 'Orientaciones de Seguridad',
    '008'  => 'Ficha de Supervisión - Tutor Empresarial',
    '009'  => 'Ficha de Supervisión - Tutor Académico',
    '010'  => 'Ficha de Evaluación por la Empresa',
    '011'  => 'Certificado de Culminación - Empresa',
    '012'  => 'Certificado de Culminación - Instituto',
];

$estados = [];
if ($practica) {
    $stDocs = $db->prepare("SELECT codigo_doc,estado,observacion,subido_at,aprobado_at,nombre_archivo,ruta_archivo FROM documentos_ppp_gestion WHERE id_practica=:ip");
    $stDocs->execute([':ip' => $practica['id_practica']]);
    foreach ($stDocs->fetchAll() as $r) $estados[$r['codigo_doc']] = $r;
}

// ── Documentos personales: estado desde BD ───────────────────
$DOCS_PERS = [
    'hoja_vida'         => ['cod' => 'HV',  'titulo' => 'Hoja de Vida',          'ico' => 'fa-file-user'],
    'cedula'            => ['cod' => 'CI',  'titulo' => 'Cédula de Identidad',    'ico' => 'fa-id-card'],
    'papeleta_votacion' => ['cod' => 'PV',  'titulo' => 'Papeleta de Votación',   'ico' => 'fa-check-to-slot'],
];
$estadosPers = [];
if ($practica) {
    try {
        $stP = $db->prepare("SELECT tipo, nombre_archivo, estado, subido_at FROM documentos_personales_estudiante WHERE id_estudiante=:e");
        $stP->execute([':e' => $practica['id_estudiante']]);
        foreach ($stP->fetchAll() as $r) $estadosPers[$r['tipo']] = $r;
    } catch (Exception $ex) { $estadosPers = []; }
}

// ── POST: subir documento personal ───────────────────────────
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['accion_pers']) && $practica) {
    $tipo = $_POST['tipo_doc_pers'] ?? '';
    if (!array_key_exists($tipo, $DOCS_PERS)) {
        flashSet('err', 'Tipo de documento no válido.');
        header('Location: mis_documentos.php'); exit;
    }
    $file = $_FILES['archivo_pers'] ?? null;
    if (!$file || $file['error'] !== UPLOAD_ERR_OK) {
        flashSet('err', 'Error al recibir el archivo. Intenta de nuevo.');
        header('Location: mis_documentos.php'); exit;
    }
    if ($file['size'] > 5 * 1024 * 1024) {
        flashSet('err', 'El archivo no puede superar 5 MB.');
        header('Location: mis_documentos.php'); exit;
    }
    // Validación 3 capas: extensión + MIME real + magic bytes
    $errPers = validarArchivoSeguro(
        $file,
        ['pdf'],
        ['application/pdf'],
        [MAGIC_PERS['pdf']]
    );
    if ($errPers) {
        flashSet('err', $errPers);
        header('Location: mis_documentos.php'); exit;
    }
    $dirPers = UPLOAD_PATH . DIRECTORY_SEPARATOR . 'documentos_personales' . DIRECTORY_SEPARATOR . $practica['id_estudiante'];
    if (!is_dir($dirPers)) mkdir($dirPers, 0755, true);
    $cedula   = $practica['cedula'];
    $nomArch  = strtoupper($DOCS_PERS[$tipo]['cod']) . '-' . $cedula . '-' . time() . '.pdf';

    try {
        OneDriveStorage::upload($file['tmp_name'], 'documentos_personales', $nomArch, (string)$practica['id_estudiante'], instId());
        $db->prepare("
                INSERT INTO documentos_personales_estudiante (id_estudiante, tipo, nombre_archivo, estado, subido_at, updated_at)
                VALUES (:e, :t, :n, 'subido', NOW(), NOW())
                ON DUPLICATE KEY UPDATE nombre_archivo=:n2, estado='subido', subido_at=NOW(), updated_at=NOW()
            ")->execute([
                ':e'  => $practica['id_estudiante'],
                ':t'  => $tipo,
                ':n'  => $nomArch,
                ':n2' => $nomArch,
            ]);
        flashSet('ok', '✅ ' . $DOCS_PERS[$tipo]['titulo'] . ' subido correctamente.');
    } catch (Exception $ex) {
        flashSet('err', 'Error al subir a OneDrive: '.$ex->getMessage());
    }
    header('Location: mis_documentos.php'); exit;
}

$sem = [
    'pendiente' => ['c'=>'#e5a50a','bg'=>'#2a200080','bd'=>'#e5a50a44','lbl'=>'Sin subir',   'ico'=>'fa-clock'],
    'enviado'   => ['c'=>'#2ea8ff','bg'=>'#001a2e80','bd'=>'#2ea8ff44','lbl'=>'En revisión','ico'=>'fa-paper-plane'],
    'observado' => ['c'=>'#ff8888','bg'=>'#2a000080','bd'=>'#ff444444','lbl'=>'Con obs.',   'ico'=>'fa-triangle-exclamation'],
    'aprobado'  => ['c'=>'#3dffa0','bg'=>'#002a1680','bd'=>'#3dffa044','lbl'=>'Aprobado',   'ico'=>'fa-circle-check'],
];
?>
<?php $paginaActual = 'mis_documentos'; ?>
<!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-estudiante.css">
</head>
<style>
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;margin-bottom:28px;}
.doc-card{background:#161b22;border:2px solid #30363d;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s;}
.doc-card.est-enviado{border-color:#2ea8ff55;}
.doc-card.est-observado{border-color:#ff444455;}
.doc-card.est-aprobado{border-color:#3dffa055;}
.doc-head{padding:13px 15px;border-bottom:1px solid #30363d;display:flex;align-items:center;gap:10px;}
.doc-num{width:36px;height:36px;border-radius:8px;background:#2ea8ff15;color:#2ea8ff;border:1px solid #2ea8ff33;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;font-family:monospace;}
.doc-title{font-size:12px;font-weight:700;color:#e6edf3;line-height:1.35;}
.doc-body{padding:11px 15px;flex:1;}
.doc-foot{padding:10px 15px;border-top:1px solid #30363d;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid;}
.btn-sm{padding:7px 14px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .15s;}
.btn-gen{background:#2ea8ff15;color:#2ea8ff;border-color:#2ea8ff33;}
.btn-gen:hover{background:#2ea8ff28;color:#2ea8ff;}
.btn-enviar{background:#f59e0b;color:#0d1117;border-color:#f59e0b;font-weight:800;}
.btn-enviar:hover{background:#fbbf24;}
.btn-reenviar{background:#2ea8ff15;color:#2ea8ff;border-color:#2ea8ff33;}
.btn-corregir{background:#ef444415;color:#ff8888;border-color:#ef444433;}
.nombre-ref{font-family:monospace;font-size:10px;color:#8b949e;background:#0d1117;border:1px solid #30363d;border-radius:5px;padding:4px 9px;word-break:break-all;display:flex;align-items:center;gap:6px;cursor:pointer;transition:border-color .2s;}
.nombre-ref:hover{border-color:#2ea8ff55;color:#2ea8ff;}
.obs-box{background:#ff444412;border:1px solid #ff444433;border-radius:7px;padding:8px 11px;font-size:11px;color:#ff8888;margin-top:8px;line-height:1.5;}
.progress-wrap{height:7px;background:#21262d;border-radius:4px;overflow:hidden;margin-bottom:5px;}
.progress-bar{height:100%;border-radius:4px;transition:width .5s;}
.pasos{display:flex;gap:0;margin-bottom:16px;border:1px solid #30363d;border-radius:10px;overflow:hidden;}
.paso{flex:1;padding:10px 12px;border-right:1px solid #30363d;background:#161b22;}
.paso:last-child{border-right:none;background:#2a1e0080;}
.paso-n{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;margin-bottom:4px;}
.paso-t{font-size:10px;font-weight:700;color:#e6edf3;margin-bottom:1px;}
.paso-d{font-size:9px;color:#8b949e;line-height:1.3;}
input[type=file]{display:none;}
/* Modal */
.moverlay{position:fixed;inset:0;background:#000c;z-index:9998;display:none;align-items:center;justify-content:center;}
.moverlay.open{display:flex;}
.mbox{background:#161b22;border:1px solid #30363d;border-radius:14px;padding:26px;max-width:440px;width:90%;box-shadow:0 20px 60px #0008;}
.mbox h5{font-size:14px;font-weight:700;color:#e6edf3;margin-bottom:6px;}
.mbox p{font-size:12px;color:#8b949e;line-height:1.6;margin-bottom:12px;}
.mnom{font-family:monospace;font-size:11px;background:#0d1117;border:1px solid #2ea8ff44;border-radius:6px;padding:8px 12px;color:#2ea8ff;word-break:break-all;margin-bottom:14px;}
.mbtns{display:flex;gap:10px;}
.mbtn-ok{flex:1;padding:10px;border-radius:8px;font-size:12px;font-weight:800;cursor:pointer;border:none;background:#f59e0b;color:#0d1117;}
.mbtn-ok:hover{background:#fbbf24;}
.mbtn-cancel{flex:1;padding:10px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;background:transparent;border:1px solid #30363d;color:#8b949e;}
.mbtn-cancel:hover{background:#21262d;}
/* Toast */
#toast{position:fixed;bottom:24px;right:24px;z-index:9999;display:none;background:#161b22;border:1px solid #30363d;border-radius:10px;padding:14px 18px;font-size:12px;color:#e6edf3;max-width:360px;box-shadow:0 8px 24px #0008;}
</style>
</head>
<body>
<?php include __DIR__.'/../../includes/navbar.php'; ?>
<div class="app-shell">
  <?php include __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'sidebar-estudiante.php'; ?>
  <main class="main-area">
    <?= flashHtml() ?>

    <?php if (!$practica): ?>
    <div class="page-header"><h4><i class="fa fa-folder-open me-2" style="color:#f7b93e;"></i>Mi Expediente PPP</h4></div>
    <div class="p-4" style="background:#161b22;border:1px solid #30363d;border-radius:12px;text-align:center;color:#8b949e;">
      <i class="fa fa-circle-info fa-2x mb-3" style="color:#2ea8ff;"></i>
      <p>No tienes una práctica activa. Una vez aprobada tu postulación podrás gestionar tus documentos aquí.</p>
    </div>

    <?php else:
    $total=$count=count($DOCS);
    $aprobados=count(array_filter($estados,fn($e)=>$e['estado']==='aprobado'));
    $enviados =count(array_filter($estados,fn($e)=>$e['estado']==='enviado'));
    $observ   =count(array_filter($estados,fn($e)=>$e['estado']==='observado'));
    $pct=round(($aprobados/$total)*100);
    $cedula=$practica['cedula']; $idPrac=$practica['id_practica'];
    ?>

    <div class="page-header">
      <h4><i class="fa fa-folder-open me-2" style="color:#f7b93e;"></i>Mi Expediente PPP</h4>
      <p>Sigue los 4 pasos para cada documento. El botón <strong style="color:#f59e0b;">Enviar al Coordinador</strong> notifica automáticamente.</p>
    </div>

    <!-- Progreso -->
    <div class="p-4 mb-3" style="background:#161b22;border:1px solid #30363d;border-radius:12px;">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <span style="font-size:13px;font-weight:700;color:#e6edf3;">Progreso del expediente</span>
        <span style="font-size:14px;font-weight:800;color:<?=$pct==100?'#3dffa0':'#f59e0b'?>;"><?=$aprobados?>/<?=$total?> aprobados</span>
      </div>
      <div class="progress-wrap"><div class="progress-bar" style="width:<?=$pct?>%;background:<?=$pct==100?'#3dffa0':'#f59e0b'?>;"></div></div>
      <div class="d-flex gap-3 mt-2 flex-wrap" style="font-size:11px;">
        <span style="color:#3dffa0;"><i class="fa fa-circle-check me-1"></i><?=$aprobados?> aprobados</span>
        <span style="color:#2ea8ff;"><i class="fa fa-paper-plane me-1"></i><?=$enviados?> esperando revisión</span>
        <?php if($observ>0):?><span style="color:#ff8888;"><i class="fa fa-triangle-exclamation me-1"></i><?=$observ?> con observación</span><?php endif;?>
        <span style="color:#8b949e;"><i class="fa fa-clock me-1"></i><?=$total-$aprobados-$enviados-$observ?> sin subir</span>
      </div>
    </div>

    <!-- Pasos -->
    <div class="pasos mb-3">
      <div class="paso">
        <div class="paso-n" style="background:#2ea8ff22;color:#2ea8ff;">1</div>
        <div class="paso-t">Ver / Generar</div>
        <div class="paso-d">Abre el formulario pre-llenado</div>
      </div>
      <div class="paso">
        <div class="paso-n" style="background:#2ea8ff22;color:#2ea8ff;">2</div>
        <div class="paso-t">Guardar PDF</div>
        <div class="paso-d">Ctrl+P → Guardar como PDF</div>
      </div>
      <div class="paso">
        <div class="paso-n" style="background:#2ea8ff22;color:#2ea8ff;">3</div>
        <div class="paso-t">Imprimir y firmar</div>
        <div class="paso-d">Firma física en el documento</div>
      </div>
      <div class="paso">
        <div class="paso-n" style="background:#f59e0b22;color:#f59e0b;">4</div>
        <div class="paso-t" style="color:#f59e0b;">Enviar al Coordinador</div>
        <div class="paso-d">Sube el PDF firmado — el coordinador recibe notificación automática</div>
      </div>
    </div>

    <!-- Grid -->
    <div class="doc-grid">
    <?php foreach ($DOCS as $cod => $titulo):
      $e=$estados[$cod]??null; $est=$e['estado']??'pendiente'; $s=$sem[$est];
      $nom="PPP-{$cod}-{$cedula}-{$idPrac}.pdf";
    ?>
    <div class="doc-card est-<?=$est?>" id="card-<?=$cod?>">
      <div class="doc-head">
        <div class="doc-num"><?=htmlspecialchars($cod)?></div>
        <div class="flex-grow-1">
          <div class="doc-title"><?=htmlspecialchars($titulo)?></div>
          <div style="margin-top:5px;">
            <span class="chip" style="color:<?=$s['c']?>;background:<?=$s['bg']?>;border-color:<?=$s['bd']?>;">
              <i class="fa <?=$s['ico']?>" style="font-size:9px;"></i><?=$s['lbl']?>
            </span>
          </div>
        </div>
      </div>
      <div class="doc-body">
        <div style="font-size:10px;color:#8b949e;margin-bottom:4px;"><i class="fa fa-paperclip me-1" style="color:#f59e0b;"></i>Nombre de referencia del documento (clic para copiar):</div>
        <div class="nombre-ref" onclick="copiar('<?=htmlspecialchars($nom)?>', this)">
          <span><?=htmlspecialchars($nom)?></span>
          <i class="fa fa-copy" style="font-size:10px;opacity:.5;flex-shrink:0;"></i>
        </div>
        <?php if($est==='observado'&&!empty($e['observacion'])):?>
        <div class="obs-box">
          <strong><i class="fa fa-triangle-exclamation me-1"></i>Observación del coordinador:</strong><br>
          <?=htmlspecialchars($e['observacion'])?>
          <div style="margin-top:5px;font-size:10px;color:#ff6666;"><i class="fa fa-arrow-right me-1"></i>Corrige, firma y vuelve a enviar.</div>
        </div>
        <?php endif;?>
        <?php if($est==='aprobado'&&$e['aprobado_at']):?>
        <div style="font-size:10px;color:#3dffa0;margin-top:7px;"><i class="fa fa-circle-check me-1"></i>Aprobado el <?=date('d/m/Y H:i',strtotime($e['aprobado_at']))?></div>
        <?php elseif($est==='enviado'&&$e['subido_at']):?>
        <div style="font-size:10px;color:#2ea8ff;margin-top:7px;"><i class="fa fa-paper-plane me-1"></i>Enviado al coordinador el <?=date('d/m/Y H:i',strtotime($e['subido_at']))?><br><span style="color:#8b949e;">Esperando revisión...</span></div>
        <?php endif;?>
      </div>
      <div class="doc-foot">
        <?php if($est==='aprobado' && !empty($e['ruta_archivo'])):?>
          <a href="<?=BASE_URL?>/api/ver_doc_ppp.php?doc=<?=urlencode($cod)?>&practica=<?=$idPrac?>" target="_blank" class="btn-sm" style="background:#3dffa015;color:#3dffa0;border-color:#3dffa044;">
            <i class="fa fa-file-pdf"></i> Doc. Firmado
          </a>
        <?php else:?>
          <a href="certificado.php?doc=<?=urlencode($cod)?>" target="_blank" class="btn-sm btn-gen">
            <i class="fa fa-file-pdf"></i> Ver / Generar
          </a>
        <?php endif;?>
        <?php if($est==='aprobado'):?>
          <span class="btn-sm" style="background:#3dffa010;color:#3dffa0;border-color:#3dffa030;cursor:default;"><i class="fa fa-lock"></i> Aprobado</span>
        <?php elseif($est==='enviado'):?>
          <button class="btn-sm btn-reenviar" onclick="abrirModal('<?=$cod?>','<?=htmlspecialchars($nom)?>','<?=$idPrac?>','reenviar')">
            <i class="fa fa-rotate-right"></i> Reenviar versión corregida
          </button>
        <?php elseif($est==='observado'):?>
          <button class="btn-sm btn-corregir" onclick="abrirModal('<?=$cod?>','<?=htmlspecialchars($nom)?>','<?=$idPrac?>','corregir')">
            <i class="fa fa-paper-plane"></i> Corregir y enviar al coordinador
          </button>
        <?php else:?>
          <button class="btn-sm btn-enviar" onclick="abrirModal('<?=$cod?>','<?=htmlspecialchars($nom)?>','<?=$idPrac?>','enviar')">
            <i class="fa fa-paper-plane"></i> Enviar al Coordinador
          </button>
        <?php endif;?>
        <input type="file" id="file-<?=$cod?>" accept=".pdf"
               data-cod="<?=$cod?>" data-nombre="<?=htmlspecialchars($nom)?>" data-practica="<?=$idPrac?>"
               onchange="subir(this)">
      </div>
    </div>
    <?php endforeach;?>
    </div><!-- /doc-grid PPP -->

    <!-- ══ DOCUMENTOS PERSONALES ══════════════════════════════ -->
    <div style="margin-top:10px;">
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:14px 18px;background:#1a1060;border:1px solid #a78bfa33;border-radius:12px;">
        <i class="fa fa-id-card" style="font-size:20px;color:#a78bfa;"></i>
        <div>
          <div style="font-size:14px;font-weight:800;color:#a78bfa;">Documentos Personales</div>
          <div style="font-size:11px;color:#8b949e;margin-top:1px;">Solo PDF · Máx. 5 MB · Se verifica que el archivo sea auténtico (no se aceptan archivos con extensión cambiada)</div>
        </div>
      </div>

      <div class="doc-grid">
      <?php foreach ($DOCS_PERS as $tipo => $dp):
        $ep    = $estadosPers[$tipo] ?? null;
        $estP  = $ep['estado'] ?? 'pendiente';
        $sP    = $sem[$estP === 'subido' ? 'enviado' : 'pendiente'];
        $lblP  = $estP === 'subido' ? 'Subido' : 'Sin subir';
        $colP  = $estP === 'subido' ? '#3dffa0' : '#e5a50a';
        $bgP   = $estP === 'subido' ? '#002a1680' : '#2a200080';
        $bdP   = $estP === 'subido' ? '#3dffa044' : '#e5a50a44';
        $icoP  = $estP === 'subido' ? 'fa-circle-check' : 'fa-clock';
      ?>
      <div class="doc-card <?=$estP==='subido'?'est-aprobado':''?>" id="card-pers-<?=$tipo?>">
        <div class="doc-head">
          <div class="doc-num" style="background:#a78bfa15;color:#a78bfa;border-color:#a78bfa33;">
            <i class="fa <?=htmlspecialchars($dp['ico'])?>"></i>
          </div>
          <div class="flex-grow-1">
            <div class="doc-title"><?=htmlspecialchars($dp['titulo'])?></div>
            <div style="margin-top:5px;">
              <span class="chip" style="color:<?=$colP?>;background:<?=$bgP?>;border-color:<?=$bdP?>;">
                <i class="fa <?=$icoP?>" style="font-size:9px;"></i><?=$lblP?>
              </span>
            </div>
          </div>
        </div>

        <div class="doc-body">
          <?php if ($ep && !empty($ep['nombre_archivo'])): ?>
            <div style="font-size:10px;color:#8b949e;margin-bottom:5px;"><i class="fa fa-paperclip me-1" style="color:#a78bfa;"></i>Archivo actual:</div>
            <div class="nombre-ref" style="border-color:#a78bfa33;cursor:default;">
              <i class="fa fa-file-pdf" style="color:#a78bfa;font-size:11px;"></i>
              <span><?=htmlspecialchars($ep['nombre_archivo'])?></span>
            </div>
            <?php if (!empty($ep['subido_at'])): ?>
            <div style="font-size:10px;color:#3dffa0;margin-top:7px;">
              <i class="fa fa-circle-check me-1"></i>Subido el <?=date('d/m/Y H:i', strtotime($ep['subido_at']))?>
            </div>
            <?php endif; ?>
          <?php else: ?>
            <div style="font-size:11px;color:#8b949e;line-height:1.5;">
              <i class="fa fa-arrow-up-from-bracket me-1" style="color:#a78bfa;"></i>
              Sube tu <?=htmlspecialchars($dp['titulo'])?> escaneada o fotografiada en formato <strong style="color:#e6edf3;">PDF</strong>.
            </div>
          <?php endif; ?>
        </div>

        <div class="doc-foot">
          <form method="POST" enctype="multipart/form-data" style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;" id="form-pers-<?=$tipo?>">
            <input type="hidden" name="accion_pers"   value="1">
            <input type="hidden" name="tipo_doc_pers" value="<?=htmlspecialchars($tipo)?>">
            <input type="file"   name="archivo_pers"  id="file-pers-<?=$tipo?>" accept=".pdf"
                   onchange="submitFormPers('<?=$tipo?>')">
            <button type="button" class="btn-sm"
                    style="background:#a78bfa15;color:#a78bfa;border-color:#a78bfa33;font-weight:800;"
                    onclick="document.getElementById('file-pers-<?=$tipo?>').click()">
              <i class="fa fa-upload"></i>
              <?=$estP==='subido'?'Reemplazar PDF':'Subir PDF'?>
            </button>
            <?php if ($ep && !empty($ep['nombre_archivo'])): ?>
              <a href="<?=BASE_URL?>/uploads/documentos_personales/<?=$practica['id_estudiante']?>/<?=urlencode($ep['nombre_archivo'])?>"
                 target="_blank" class="btn-sm btn-gen">
                <i class="fa fa-eye"></i> Ver
              </a>
            <?php endif; ?>
          </form>
        </div>
      </div>
      <?php endforeach; ?>
      </div><!-- /doc-grid personales -->

      <div style="font-size:11px;color:#8b949e;margin-top:8px;padding:10px 14px;background:#0d111799;border:1px solid #21262d;border-radius:8px;">
        <i class="fa fa-shield-halved me-1" style="color:#a78bfa;"></i>
        <strong style="color:#e6edf3;">Verificación de seguridad:</strong>
        Cada archivo es verificado en 3 capas — extensión, tipo MIME real y firma interna del archivo — para garantizar que sea un PDF auténtico.
      </div>
    </div>
    <!-- fin documentos personales -->

    <?php endif;?>
  </main>
</div>

<!-- Modal confirmación -->
<div class="moverlay" id="mo" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="mbox">
    <h5 id="m-titulo">Enviar documento al Coordinador</h5>
    <p id="m-desc">Selecciona el PDF firmado — puede tener cualquier nombre:</p>
    <div class="mnom" id="m-nom"></div>
    <p style="font-size:11px;color:#8b949e;background:#2ea8ff0a;border:1px solid #2ea8ff22;border-radius:7px;padding:8px 10px;margin-bottom:14px;">
      <i class="fa fa-paper-plane me-1" style="color:#2ea8ff;"></i>
      <strong style="color:#e6edf3;">El coordinador recibirá una notificación automática</strong> y podrá revisar y aprobar tu documento desde su panel.
    </p>
    <div class="mbtns">
      <button class="mbtn-cancel" onclick="document.getElementById('mo').classList.remove('open')">Cancelar</button>
      <button class="mbtn-ok" onclick="seleccionarArchivo()">
        <i class="fa fa-folder-open me-2"></i>Seleccionar PDF firmado
      </button>
    </div>
  </div>
</div>

<div id="toast"><span id="tm"></span></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>
let _cod=null;
const TT={enviar:'Enviar documento al Coordinador',reenviar:'Reenviar versión corregida al Coordinador',corregir:'Corregir y enviar al Coordinador'};
const TD={enviar:'Selecciona el PDF firmado. Puede tener cualquier nombre — el sistema lo identificará automáticamente:',reenviar:'Selecciona la nueva versión firmada. Puede tener cualquier nombre:',corregir:'El coordinador observó este documento. Sube la versión corregida y firmada:'};

function abrirModal(cod,nom,prac,tipo){
  _cod=cod;
  document.getElementById('m-titulo').textContent=TT[tipo]||TT.enviar;
  document.getElementById('m-desc').textContent=TD[tipo]||TD.enviar;
  document.getElementById('m-nom').textContent=nom;
  document.getElementById('mo').classList.add('open');
}
function seleccionarArchivo(){
  document.getElementById('mo').classList.remove('open');
  if(_cod) document.getElementById('file-'+_cod).click();
}
function copiar(txt,el){
  navigator.clipboard.writeText(txt).then(()=>{
    const ic=el.querySelector('i');
    ic.className='fa fa-check'; ic.style.color='#3dffa0';
    el.style.borderColor='#3dffa055';
    toast('Nombre copiado — pégalo al guardar el PDF');
    setTimeout(()=>{ic.className='fa fa-copy';ic.style.color='';el.style.borderColor='';},2000);
  }).catch(()=>toast('Cópialo manualmente',false));
}
function subir(input){
  const file=input.files[0],cod=input.dataset.cod,esp=input.dataset.nombre,prac=input.dataset.practica;
  if(!file)return;

  const esPdf = file.type.includes('pdf') || file.name.toLowerCase().endsWith('.pdf');
  if(!esPdf){toast('Solo se aceptan archivos PDF.',false);input.value='';return;}
  if(file.size>10*1024*1024){toast('El archivo supera 10 MB.',false);input.value='';return;}
  const card=document.getElementById('card-'+cod);
  const btns=card.querySelectorAll('button.btn-sm');
  btns.forEach(b=>b.disabled=true);
  const bp=card.querySelector('.btn-enviar,.btn-corregir,.btn-reenviar');
  if(bp)bp.innerHTML='<i class="fa fa-spinner fa-spin me-1"></i> Enviando al coordinador...';
  const fd=new FormData();
  fd.append('archivo',file);fd.append('codigo_doc',cod);
  fd.append('id_practica',prac);fd.append('nombre_esperado',esp);
  fetch('<?=BASE_URL?>/api/subir_doc_ppp.php',{method:'POST',body:fd})
  .then(r=>r.json()).then(res=>{
    if(res.ok){
      toast(`<i class="fa fa-check-circle me-1"></i><strong>¡Enviado!</strong> El coordinador revisará el documento PPP-${cod} y te notificará su decisión.`);
      setTimeout(()=>location.reload(),2800);
    }else{
      toast(res.error||'Error al enviar.',false);
      btns.forEach(b=>b.disabled=false);
      if(bp)bp.innerHTML='<i class="fa fa-paper-plane"></i> Enviar al Coordinador';
    }
  }).catch(()=>{toast('Error de conexión.',false);btns.forEach(b=>b.disabled=false);});
  input.value='';
}
function toast(msg,ok=true,ms=4500){
  const t=document.getElementById('toast'),c=ok?'#3dffa0':'#ff8888',ic=ok?'circle-check':'triangle-exclamation';
  document.getElementById('tm').innerHTML=`<i class="fa fa-${ic} me-2" style="color:${c};"></i>${msg}`;
  t.style.display='block';clearTimeout(t._t);t._t=setTimeout(()=>t.style.display='none',ms);
}

// ── Documentos personales: validación previa + submit ────────
function submitFormPers(tipo) {
  const input = document.getElementById('file-pers-' + tipo);
  const file  = input.files[0];
  if (!file) return;
  const ext = file.name.split('.').pop().toLowerCase();
  if (ext !== 'pdf') {
    toast('Solo se aceptan archivos PDF.', false);
    input.value = ''; return;
  }
  if (file.size > 5 * 1024 * 1024) {
    toast('El archivo no puede superar 5 MB.', false);
    input.value = ''; return;
  }
  // El servidor aplicará las 3 capas de validación
  document.getElementById('form-pers-' + tipo).submit();
}
</script>
</body></html>