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

$user      = currentUser();
$db        = getDB();
$pageTitle = 'Postulaciones';
$idInst    = (int)($user['id_instituto'] ?? 0);

// ── Obtener id_coordinador ──────────────────────────────────
$stCoord = $db->prepare("SELECT id_coordinador FROM coordinadores WHERE id_usuario=:u");
$stCoord->execute([':u' => $user['id']]);
$coord = $stCoord->fetch();
$idCoord = $coord['id_coordinador'] ?? null;

// ── ACCIÓN: Aprobar / Rechazar / Asignar tutor ──────────────
if ($_SERVER['REQUEST_METHOD'] === 'POST' && $idCoord) {
    $idPr    = (int)($_POST['id_practica']   ?? 0);
    $accion  = $_POST['accion']              ?? '';
    $obs     = trim($_POST['observaciones']  ?? '');
    $motivo  = trim($_POST['motivo_rechazo'] ?? '');
    $idTutor = (int)($_POST['id_tutor']      ?? 0);
    $fIni    = $_POST['fecha_inicio']        ?? '';
    $fFin    = $_POST['fecha_fin']           ?? '';
    $regEmp  = isset($_POST['registrar_empresa']) && $_POST['registrar_empresa'] === '1';
    $crearSup = isset($_POST['crear_supervisor']) && $_POST['crear_supervisor'] === '1';

    if ($idPr) {
        if ($accion === 'aprobar') {
            // Si la práctica tiene empresa nueva y se pidió registrarla
            $newEmpId = null;
            if ($regEmp) {
                $prData = $db->prepare("SELECT * FROM practicas WHERE id_practica=:id")->execute([':id'=>$idPr]);
                $prData = $db->prepare("SELECT * FROM practicas WHERE id_practica=:id");
                $prData->execute([':id'=>$idPr]);
                $pr = $prData->fetch();
                if ($pr && $pr['empresa_nueva'] && !$pr['emp_nueva_registrada_id']) {
                    $rucNuevo = $pr['emp_nueva_ruc'] ?? '';

                    // Verificar si ya existe una empresa con ese RUC
                    $stExiste = $db->prepare("SELECT id_empresa FROM empresas WHERE ruc = :ruc LIMIT 1");
                    $stExiste->execute([':ruc' => $rucNuevo]);
                    $empExistente = $stExiste->fetch();

                    if ($empExistente) {
                        // La empresa ya existe — reutilizar su id
                        $newEmpId = $empExistente['id_empresa'];
                        registrarAudit($user['id'], 'vincular_empresa_existente', 'empresas', $newEmpId);
                    } else {
                        // Registrar como empresa nueva
                        $insEmp = $db->prepare("
                            INSERT INTO empresas
                              (ruc, razon_social, sector, actividad_economica,
                               direccion, canton, provincia, telefono, email_contacto,
                               nombre_representante, cargo_representante, activa)
                            VALUES (:ruc,:nombre,:sector,:act,:dir,:canton,:prov,:tel,:email,:rep,:carrep,1)
                        ");
                        $insEmp->execute([
                            ':ruc'    => $rucNuevo,
                            ':nombre' => $pr['emp_nueva_nombre']        ?? '',
                            ':sector' => $pr['emp_nueva_sector']        ?? 'privado',
                            ':act'    => $pr['emp_nueva_actividad']     ?? null,
                            ':dir'    => $pr['emp_nueva_direccion']     ?? null,
                            ':canton' => $pr['emp_nueva_canton']        ?? null,
                            ':prov'   => $pr['emp_nueva_provincia']     ?? null,
                            ':tel'    => $pr['emp_nueva_telefono']      ?? null,
                            ':email'  => $pr['emp_nueva_email']         ?? null,
                            ':rep'    => $pr['emp_nueva_representante'] ?? null,
                            ':carrep' => $pr['emp_nueva_cargo_rep']     ?? null,
                        ]);
                        $newEmpId = $db->lastInsertId();
                        registrarAudit($user['id'], 'registrar_empresa_desde_practica', 'empresas', $newEmpId);
                    }
                }
            }

            // ── Crear cuenta de supervisor de empresa ──────────────
            $idTutorEmpresa = null;
            if ($crearSup) {
                $prSup = $db->prepare("SELECT nombre_tutor_empresa, email_tutor_empresa, cedula_tutor_empresa, telefono_tutor_empresa, id_empresa, emp_nueva_registrada_id, cargo_practica FROM practicas WHERE id_practica=:id");
                $prSup->execute([':id' => $idPr]);
                $supData = $prSup->fetch();

                $supCedula = trim($supData['cedula_tutor_empresa'] ?? '');
                $supNombre = trim($supData['nombre_tutor_empresa'] ?? '');
                $supEmail  = trim($supData['email_tutor_empresa']  ?? '');
                $supTel    = trim($supData['telefono_tutor_empresa'] ?? '');
                $supCargo  = trim($supData['cargo_practica'] ?? '');
                $supEmpId  = $newEmpId ?: ($supData['emp_nueva_registrada_id'] ?: $supData['id_empresa']);

                if ($supCedula) {
                    $partes     = preg_split('/\s+/', $supNombre, 2);
                    $supNombres = strtoupper($partes[0] ?? $supNombre);
                    $supApells  = strtoupper($partes[1] ?? $supCedula);

                    // Calcular emailSup antes de la verificación para poder incluirlo en el WHERE
                    $emailSup = $supEmail ?: ($supCedula . '@supervisor.sigvp.ec');

                    // ¿Ya existe usuario con esa cédula O con ese email en el mismo instituto?
                    // (evita violar el constraint uq_email_inst al hacer el INSERT)
                    $stExUsr = $db->prepare("
                        SELECT id_usuario FROM usuarios
                        WHERE cedula = :c
                           OR (email = :e AND id_instituto = :inst)
                        LIMIT 1
                    ");
                    $stExUsr->execute([':c' => $supCedula, ':e' => $emailSup, ':inst' => $idInst]);
                    $usrExistente = $stExUsr->fetch();

                    if ($usrExistente) {
                        $idUsuarioSup = $usrExistente['id_usuario'];
                        $db->prepare("UPDATE usuarios SET id_rol=:rol, id_instituto=:inst, activo=1 WHERE id_usuario=:id")
                           ->execute([':rol' => ROL_TUTOR_EMPRESA, ':inst' => $idInst, ':id' => $idUsuarioSup]);
                    } else {
                        $passHash = password_hash($supCedula, PASSWORD_BCRYPT);
                        $db->prepare("
                            INSERT INTO usuarios (cedula, nombres, apellidos, email, telefono, password_hash, id_rol, id_instituto, activo, cambiar_password)
                            VALUES (:ced, :nom, :ape, :email, :tel, :pass, :rol, :inst, 1, 0)
                        ")->execute([
                            ':ced'   => $supCedula,
                            ':nom'   => $supNombres,
                            ':ape'   => $supApells,
                            ':email' => $emailSup,
                            ':tel'   => $supTel ?: null,
                            ':pass'  => $passHash,
                            ':rol'   => ROL_TUTOR_EMPRESA,
                            ':inst'  => $idInst,
                        ]);
                        $idUsuarioSup = $db->lastInsertId();
                        registrarAudit($user['id'], 'crear_supervisor_empresa', 'usuarios', $idUsuarioSup);
                    }

                    if ($supEmpId) {
                        $stExTe = $db->prepare("SELECT id FROM tutores_empresa WHERE id_usuario=:u AND id_empresa=:e LIMIT 1");
                        $stExTe->execute([':u' => $idUsuarioSup, ':e' => $supEmpId]);
                        $teExistente = $stExTe->fetch();
                        if (!$teExistente) {
                            $db->prepare("INSERT INTO tutores_empresa (id_usuario, id_empresa, cargo, activo) VALUES (:u,:e,:c,1)")
                               ->execute([':u' => $idUsuarioSup, ':e' => $supEmpId, ':c' => $supCargo ?: null]);
                            $idTutorEmpresa = $db->lastInsertId();
                        } else {
                            $idTutorEmpresa = $teExistente['id'];
                        }
                    }
                }
            }

            $extrasSQL = '';
            if ($newEmpId)       $extrasSQL .= ", id_empresa = $newEmpId, emp_nueva_registrada_id = $newEmpId";
            if ($idTutorEmpresa) $extrasSQL .= ", id_tutor_empresa = $idTutorEmpresa";

            $db->prepare("
                UPDATE practicas
                SET estado = 'aprobado',
                    id_coordinador = :cid,
                    id_tutor       = :tid,
                    fecha_inicio   = :fi,
                    fecha_fin      = :ff,
                    observaciones  = :obs,
                    motivo_rechazo = NULL
                    $extrasSQL
                WHERE id_practica = :id AND estado = 'postulado'
            ")->execute([
                ':cid' => $idCoord,
                ':tid' => $idTutor ?: null,
                ':fi'  => $fIni    ?: null,
                ':ff'  => $fFin    ?: null,
                ':obs' => $obs,
                ':id'  => $idPr,
            ]);
            registrarAudit($user['id'], 'aprobar_postulacion', 'practicas', $idPr);
            $msg = 'Postulación aprobada correctamente.';
            if ($newEmpId)       $msg .= ' La empresa fue registrada en el catálogo.';
            if ($idTutorEmpresa) $msg .= ' Se creó la cuenta del supervisor de empresa.';
            flashSet('ok', $msg);

        } elseif ($accion === 'rechazar') {
            if (!$motivo) { flashSet('err', 'Debes indicar el motivo de rechazo.'); header('Location: postulaciones.php'); exit; }
            $db->prepare("
                UPDATE practicas
                SET estado = 'rechazado', motivo_rechazo = :m, observaciones = :obs
                WHERE id_practica = :id AND estado = 'postulado'
            ")->execute([':m' => $motivo, ':obs' => $obs, ':id' => $idPr]);
            registrarAudit($user['id'], 'rechazar_postulacion', 'practicas', $idPr);
            flashSet('ok', 'Postulación rechazada. El estudiante será notificado.');

        } elseif ($accion === 'asignar_tutor') {
            if (!$idTutor) {
                flashSet('err', 'Selecciona un tutor.');
            } else {
                // Activar tutor si estaba inactivo
                $db->prepare("
                    UPDATE usuarios u JOIN tutores t ON t.id_usuario = u.id_usuario
                    SET u.activo = 1 WHERE t.id_tutor = :tid
                ")->execute([':tid' => $idTutor]);

                // Actualizar siempre tutor; fechas y obs solo si vienen con valor
                $sets   = ['id_tutor = :tid'];
                $params = [':tid' => $idTutor, ':id' => $idPr];
                if ($fIni !== '') { $sets[] = 'fecha_inicio = :fi';  $params[':fi']  = $fIni; }
                if ($fFin !== '') { $sets[] = 'fecha_fin    = :ff';  $params[':ff']  = $fFin; }
                if ($obs  !== '') { $sets[] = 'observaciones = :obs'; $params[':obs'] = $obs;  }

                $db->prepare("UPDATE practicas SET " . implode(', ', $sets) . " WHERE id_practica = :id")
                   ->execute($params);

                registrarAudit($user['id'], 'asignar_tutor_postulacion', 'practicas', $idPr);
                flashSet('ok', 'Tutor asignado correctamente.');
            }
            header('Location: postulaciones.php?estado=aprobado'); exit;
        }
    }
    header('Location: postulaciones.php'); exit;
}

// Bloque asignar_tutor standalone (ya manejado arriba — solo por compatibilidad)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['accion']) && $_POST['accion'] === 'asignar_tutor' && !$idCoord) {
    flashSet('err', 'No tienes permisos para asignar tutor.');
    header('Location: postulaciones.php'); exit;
}

// ── Filtros ─────────────────────────────────────────────────
$filtro = $_GET['estado'] ?? 'postulado';
$q      = trim($_GET['q'] ?? '');
$estados_validos = ['postulado','aprobado','rechazado','todas'];
if (!in_array($filtro, $estados_validos)) $filtro = 'postulado';

// ── Período y carrera ────────────────────────────────────────
$filtPeriodo = (int)($_GET['periodo'] ?? 0);
$filtCarrera = (int)($_GET['carrera'] ?? 0);

// Período activo por defecto (solo si no viene explícito en URL)
if ($filtPeriodo === 0 && !isset($_GET['periodo'])) {
    $stAct = $db->prepare("
        SELECT id_periodo FROM periodos_academicos
        WHERE  activo = 1 AND id_instituto = :inst
        ORDER  BY fecha_inicio DESC LIMIT 1
    ");
    $stAct->execute([':inst' => $idInst]);
    $pa = $stAct->fetchColumn();
    if ($pa) $filtPeriodo = (int)$pa;
}

// Listas para selects — solo del instituto
$stPer = $db->prepare("
    SELECT id_periodo, nombre, activo FROM periodos_academicos
    WHERE  id_instituto = :inst
    ORDER  BY activo DESC, fecha_inicio DESC
");
$stPer->execute([':inst' => $idInst]);
$listaPeriodos = $stPer->fetchAll();

$stCar = $db->prepare("
    SELECT id_carrera, nombre FROM carreras
    WHERE  id_instituto = :inst AND activa = 1
    ORDER  BY nombre
");
$stCar->execute([':inst' => $idInst]);
$listaCarreras = $stCar->fetchAll();

// ── Paginación ───────────────────────────────────────────────
$perPageOpts = [25, 50, 100, 200];
$perPage     = in_array((int)($_GET['per_page'] ?? 0), $perPageOpts) ? (int)$_GET['per_page'] : 25;
$page        = max(1, (int)($_GET['page'] ?? 1));

$where  = ['1=1']; $params = [];
if ($idInst) { $where[] = 'car.id_instituto = :inst'; $params[':inst'] = $idInst; }
if ($filtro !== 'todas') { $where[] = 'pr.estado = :est'; $params[':est'] = $filtro; }
else { $where[] = "pr.estado IN ('postulado','aprobado','rechazado')"; }
if ($filtPeriodo) { $where[] = 'pr.id_periodo = :per'; $params[':per'] = $filtPeriodo; }
if ($filtCarrera) { $where[] = 'e.id_carrera  = :car'; $params[':car'] = $filtCarrera; }
if ($q) {
    $where[] = "(CONCAT(u.nombres,' ',u.apellidos) LIKE :q OR em.razon_social LIKE :q OR u.cedula LIKE :q)";
    $params[':q'] = '%'.$q.'%';
}
$wStr = implode(' AND ', $where);

// Contar total para paginación
$stTotal = $db->prepare("
    SELECT COUNT(*) FROM practicas pr
    JOIN   estudiantes e   ON e.id_estudiante  = pr.id_estudiante
    JOIN   usuarios u      ON u.id_usuario     = e.id_usuario
    JOIN   carreras car    ON car.id_carrera   = e.id_carrera
    LEFT JOIN empresas em  ON em.id_empresa    = pr.id_empresa
    WHERE  $wStr
");
$stTotal->execute($params);
$totalRows  = (int)$stTotal->fetchColumn();
$totalPages = max(1, (int)ceil($totalRows / $perPage));
$page       = min($page, $totalPages);
$offset     = ($page - 1) * $perPage;

// ── Cargar postulaciones ────────────────────────────────────
$stPost = $db->prepare("
    SELECT pr.*,
           CONCAT(u.nombres,' ',u.apellidos)                  AS estudiante,
           u.cedula, u.email                                   AS email_est,
           car.nombre                                          AS carrera,
           COALESCE(em.razon_social, pr.emp_nueva_nombre)      AS empresa,
           COALESCE(em.canton,  pr.emp_nueva_canton)           AS canton,
           COALESCE(em.provincia, pr.emp_nueva_provincia)      AS provincia,
           pe.nombre                                           AS periodo,
           CONCAT(ut.nombres,' ',ut.apellidos)                 AS tutor_asignado,
           usup.id_usuario                                     AS sup_id_usuario,
           usup.activo                                         AS sup_activo
    FROM   practicas pr
    JOIN   estudiantes e   ON e.id_estudiante  = pr.id_estudiante
    JOIN   usuarios u      ON u.id_usuario     = e.id_usuario
    JOIN   carreras car    ON car.id_carrera   = e.id_carrera
    LEFT JOIN empresas em  ON em.id_empresa    = pr.id_empresa
    JOIN   periodos_academicos pe ON pe.id_periodo = pr.id_periodo
    LEFT JOIN tutores t    ON t.id_tutor       = pr.id_tutor
    LEFT JOIN usuarios ut  ON ut.id_usuario    = t.id_usuario
    LEFT JOIN usuarios usup ON usup.cedula = pr.cedula_tutor_empresa AND usup.id_rol = 7
    WHERE  $wStr
    ORDER  BY pr.estado = 'postulado' DESC, pr.created_at DESC
    LIMIT  :lim OFFSET :off
");
foreach ($params as $k => &$v) $stPost->bindValue($k, $v);
$stPost->bindValue(':lim', $perPage, PDO::PARAM_INT);
$stPost->bindValue(':off', $offset,  PDO::PARAM_INT);
$stPost->execute();
$postulaciones = $stPost->fetchAll();

// ── Contadores por estado ───────────────────────────────────
$stCnt = $db->prepare("SELECT pr.estado, COUNT(*) AS total FROM practicas pr JOIN estudiantes e2 ON e2.id_estudiante=pr.id_estudiante JOIN carreras car2 ON car2.id_carrera=e2.id_carrera WHERE pr.estado IN ('postulado','aprobado','rechazado')" . ($idInst ? " AND car2.id_instituto=$idInst" : '') . " GROUP BY pr.estado");
$stCnt->execute();
$cnts = array_column($stCnt->fetchAll(), 'total', 'estado');

// ── Tutores disponibles para asignar (solo del instituto del coordinador) ──
// LEFT JOIN tutores: cualquier usuario con id_rol=ROL_TUTOR aparece aunque no
// tenga fila en tutores aún. Si no tiene fila, se usa id_tutor=NULL,
// especialidad/max_estudiantes con defaults, y asignados=0.
$stTutores = $db->prepare("
    SELECT
        t.id_tutor,
        CONCAT(u.nombres,' ',u.apellidos)  AS nombre,
        u.id_usuario,
        COALESCE(t.especialidad, '—')      AS especialidad,
        COALESCE(t.max_estudiantes, 10)    AS max_estudiantes,
        COALESCE(
            (SELECT COUNT(*) FROM practicas p
             WHERE p.id_tutor = t.id_tutor
               AND p.estado IN ('aprobado','en_progreso')),
            0
        )                                  AS asignados
    FROM   usuarios u
    LEFT JOIN tutores t ON t.id_usuario = u.id_usuario
    WHERE  u.activo       = 1
      AND  u.id_rol       = :rol
      AND  u.id_instituto = :inst
    ORDER BY u.apellidos, u.nombres
");
$stTutores->execute([':inst' => $idInst, ':rol' => ROL_TUTOR]);
$tutores = $stTutores->fetchAll();

// Auto-crear fila en tutores para usuarios con rol tutor que aún no la tienen
foreach ($tutores as &$t) {
    if (is_null($t['id_tutor'])) {
        $db->prepare("
            INSERT IGNORE INTO tutores (id_usuario, max_estudiantes)
            VALUES (:uid, 10)
        ")->execute([':uid' => $t['id_usuario']]);
        $t['id_tutor'] = $db->lastInsertId();
    }
}
unset($t);
?>
<?php $paginaActual = 'postulaciones'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
<?php include __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'head.php'; ?>
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/sidebar.css">
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/sidebar-coordinador.css">
<style>
/* ═══════════════════════════════════════════════
   Postulaciones — Tema Claro SIGVP
   ═══════════════════════════════════════════════ */
:root {
  --bg-page:   #f0f4f8;
  --bg-card:   #ffffff;
  --bg-inner:  #f8fafc;
  --border:    #e2e8f0;
  --border-med:#cbd5e1;
  --text-main: #1e293b;
  --text-sub:  #64748b;
  --text-light:#94a3b8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --radius:    12px;
  --radius-sm: 8px;
}

/* ─── Fechas propuestas por el estudiante (tarjeta) ─── */
.fechas-propuestas-box {
  margin-top: 10px;
  background: linear-gradient(135deg, #f0fdf4 0%, #fff7ed 100%);
  border: 1.5px solid #86efac;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
}
.fechas-prop-titulo {
  font-size: 10px;
  font-weight: 700;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 5px;
}
.fechas-prop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.fechas-prop-label {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
}
.fechas-prop-val {
  font-weight: 700;
  font-size: 12px;
}
.fechas-prop-val.verde   { color: #16a34a; }
.fechas-prop-val.naranja { color: #ea580c; }
.fechas-prop-jornada {
  margin-top: 5px;
  font-size: 10px;
  color: #374151;
  background: #dcfce7;
  padding: 3px 8px;
  border-radius: 20px;
  word-break: break-word;
}

html, body { height:100%; margin:0; padding:0; overflow-x:hidden; }
.main-area  { background:var(--bg-page); min-height:100vh; padding:24px 28px 32px; }

.page-header h4 { color:var(--text-main); font-weight:700; font-size:20px; letter-spacing:-.3px; }
.page-header p  { color:var(--text-light); font-size:12px; }

/* ── Conteo ── */
.count-label { font-size:12px; color:var(--text-sub); margin-bottom:10px; }

/* ── Estado vacío ── */
.empty-state {
  background: var(--bg-card);
  border: 2px dashed var(--border-med);
  border-radius: var(--radius);
  padding: 48px;
  text-align: center;
  color: var(--text-light);
}
.empty-state-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state-msg  { font-size: 14px; }

/* ── Cards de postulaciones ── */
.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s;
}
.post-card.pendiente {
  border-color: rgba(245,158,11,.4);
  box-shadow: 0 0 0 1px rgba(245,158,11,.1), var(--shadow-md);
}
.post-card:hover { box-shadow: var(--shadow-md); }

/* Etiquetas de columna */
.col-label {
  font-size: 10px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 4px;
  font-weight: 600;
}

/* Textos de datos */
.col-nombre   { font-size:14px; font-weight:700; color:var(--text-main); }
.col-cedula   { font-family:monospace; font-size:11px; color:#3b82f6; margin-top:2px; }
.col-carrera  { font-size:11px; color:#8b5cf6; margin-top:4px; }
.col-periodo  { font-size:11px; color:var(--text-sub); margin-top:2px; }
.col-empresa  { font-size:13px; font-weight:700; color:var(--text-main); }
.col-location { font-size:11px; color:#3b82f6; margin-top:3px; }
.col-area     { font-size:11px; color:#0891b2; margin-top:4px; font-weight:600; }
.col-cargo    { font-size:11px; color:var(--text-sub); margin-top:2px; }
.col-tutor-emp{ font-size:12px; font-weight:700; color:var(--text-main); }
.col-email-sup{ font-size:10px; color:var(--text-sub); word-break:break-all; margin-top:2px; }
.col-cedula-sup{ font-size:11px; color:#10b981; font-family:monospace; margin-top:2px; }
.col-sin-asignar{ font-size:12px; color:var(--text-light); font-style:italic; }
.col-horas-n  { font-size:20px; font-weight:800; color:#0891b2; line-height:1; }
.col-horas-u  { font-size:11px; color:var(--text-sub); font-weight:400; }
.col-tutor-ac { font-size:12px; color:#10b981; font-weight:600; }
.col-fechas   { font-size:11px; color:var(--text-sub); margin-top:8px; }
.col-posted   { font-size:10px; color:var(--text-light); margin-top:6px; }

/* Acceso supervisor badge */
.sup-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; margin-top:8px; font-weight:600;
}

/* Box observaciones/rechazo al pie de la card */
.obs-note {
  margin-top:12px; padding:8px 12px;
  border-radius:var(--radius-sm);
  font-size:12px;
}
.obs-note-info   { background:rgba(59,130,246,.06); border:1px solid rgba(59,130,246,.2); color:#1d4ed8; }
.obs-note-danger { background:rgba(239,68,68,.06);  border:1px solid rgba(239,68,68,.2);  color:#b91c1c; }

/* Badge de documento */
.doc-btn-link {
  display:flex; align-items:center; justify-content:center; gap:6px;
  background: rgba(59,130,246,.07);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: var(--radius-sm);
  padding:5px 10px; font-size:12px; color:#2563eb;
  text-decoration:none; transition:background .15s;
}
.doc-btn-link:hover { background:rgba(59,130,246,.14); }
.doc-btn-none {
  display:flex; align-items:center; gap:6px; font-size:12px;
  color:var(--text-light); padding:5px 10px;
  border:1px dashed var(--border-med); border-radius:var(--radius-sm);
}

/* ── Badges de estado ── */
.badge-estado {
  display:inline-block; font-size:10px; font-weight:700;
  padding:3px 10px; border-radius:20px; text-transform:uppercase;
  letter-spacing:.4px; border:1px solid;
}
.st-postulado { background:rgba(245,158,11,.1); color:#b45309; border-color:rgba(245,158,11,.3); }
.st-aprobado  { background:rgba(16,185,129,.1); color:#047857; border-color:rgba(16,185,129,.3); }
.st-rechazado { background:rgba(239,68,68,.1);  color:#b91c1c; border-color:rgba(239,68,68,.3); }
.st-calificado{ background:rgba(239,68,68,.1);  color:#b91c1c; border-color:rgba(239,68,68,.3); }

/* Badge en sidebar */
.badge-sidebar { background:#f59e0b; color:#fff; font-size:10px; }

/* ── Filtros bar ── */
.filtros-bar { background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:14px; }
.filtros-bar label { font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-light); display:block; margin-bottom:3px; }

/* ── Paginación ── */
.pag-wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:16px; }
.pag-info { font-size:12px; color:var(--text-sub); }
.pag-info strong { color:var(--text-main); }
.pag-btns { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.pag-btn { padding:5px 10px; border-radius:6px; border:1px solid var(--border); background:#fff; font-size:12px; font-weight:600; color:var(--text-main); text-decoration:none; display:inline-flex; align-items:center; gap:4px; transition:.15s; }
.pag-btn:hover { background:#f1f5f9; }
.pag-btn.active { background:#2563eb; color:#fff; border-color:#2563eb; }
.pag-btn.disabled { opacity:.4; pointer-events:none; }

/* ── Modal claro ── */
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-main);
}
.modal-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-inner);
  border-radius: var(--radius) var(--radius) 0 0;
}
.modal-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-inner);
}
.modal-title  { font-weight:700; color:var(--text-main); font-size:16px; }
.form-label   { color:var(--text-main); font-size:13px; font-weight:500; }
.form-control, .form-select {
  background: var(--bg-card);
  border: 1px solid var(--border-med);
  color: var(--text-main);
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-card);
  border-color: #3b82f6;
  color: var(--text-main);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* Resumen modal aprobar */
.modal-resumen {
  background: rgba(59,130,246,.06);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: var(--radius-sm);
  padding:14px 16px; margin-bottom:20px;
}
.modal-resumen-label { font-size:11px; color:#64748b; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px; }
.modal-resumen-nombre{ font-size:16px; font-weight:700; color:var(--text-main); }
.modal-resumen-emp   { font-size:13px; color:#2563eb; margin-top:2px; font-weight:600; }
.modal-resumen-area  { font-size:12px; color:var(--text-sub); margin-top:2px; }

/* Bloque doc solicitud */
.modal-doc-label { font-size:11px; color:var(--text-sub); font-weight:700; letter-spacing:.5px; margin-bottom:6px; }
.modal-doc-link {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.25);
  border-radius:var(--radius-sm); padding:6px 14px; font-size:13px; color:#2563eb; text-decoration:none;
}

/* Bloque empresa nueva */
.modal-emp-nueva {
  background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.3);
  border-radius:var(--radius-sm); padding:14px; margin-bottom:16px;
}
.modal-emp-nueva-title { font-size:12px; color:#b45309; font-weight:700; margin-bottom:10px; }
.modal-emp-field-label { font-size:11px; color:#92400e; }
.modal-emp-field-val   { font-weight:600; color:var(--text-main); }

/* Bloque supervisor */
.modal-sup {
  background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.25);
  border-radius:var(--radius-sm); padding:14px; margin-bottom:16px;
}
.modal-sup-title      { font-size:12px; color:#047857; font-weight:700; margin-bottom:12px; }
.modal-sup-field-label{ font-size:10px; color:#6ee7b7; text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px; }
.modal-sup-field-val  { font-weight:600; color:var(--text-main); }
.modal-sup-cedula     { font-weight:700; font-family:monospace; color:#059669; font-size:15px; }
.modal-sup-small      { font-size:12px; color:var(--text-sub); }
.modal-sup-sep        { border-top:1px solid rgba(16,185,129,.2); margin-top:12px; padding-top:12px; }
.modal-sup-login-key  {
  font-size:11px; color:var(--text-sub); margin-top:6px; padding-left:24px;
}
.modal-sup-key-val    {
  color:#059669; background:rgba(16,185,129,.1); padding:1px 6px; border-radius:4px; font-weight:700;
}

/* Bloque aviso sin cédula */
.modal-aviso-cedula {
  display:none; font-size:12px; color:#b45309; margin-top:10px;
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25);
  border-radius:var(--radius-sm); padding:8px 12px;
}

/* Alert info en modal */
.alert-dark-info {
  background: rgba(59,130,246,.06);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: var(--radius-sm);
  color: #1d4ed8;
  font-size: 12px;
}

/* Modal detalle field label */
.detail-label { font-size:10px; color:var(--text-sub); text-transform:uppercase; letter-spacing:.6px; }
.detail-obs   { color:#2563eb; font-size:12px; margin-top:2px; }
.detail-mot-label { font-size:10px; color:#b91c1c; text-transform:uppercase; letter-spacing:.6px; }
.detail-mot   { color:#b91c1c; font-size:12px; margin-top:2px; }

/* Modal rechazar resumen */
.modal-rch-resumen {
  background: var(--bg-inner); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:16px;
}
.modal-rch-label { font-size:11px; color:var(--text-sub); margin-bottom:2px; }
.req { color:#ef4444; }
</style>

<body>
<?php include __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'navbar.php'; ?>

<div class="app-shell">
  <?php include __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'sidebar-coordinador.php'; ?>

  <main class="main-area">
    <div class="page-header">
      <h4>Postulaciones de Prácticas</h4>
      <p>Revisa, aprueba o rechaza las solicitudes de prácticas preprofesionales</p>
    </div>

    <?= flashHtml() ?>

    <!-- ── TABS de estado ── -->
    <div class="d-flex gap-2 mb-3 flex-wrap align-items-center">
      <?php
      $tabDef = [
        'postulado' => ['label'=>'Pendientes',  'color'=>'#f59e0b'],
        'aprobado'  => ['label'=>'Aprobadas',   'color'=>'#10b981'],
        'rechazado' => ['label'=>'Rechazadas',  'color'=>'#ef4444'],
        'todas'     => ['label'=>'Todas',       'color'=>'#64748b'],
      ];
      foreach ($tabDef as $k => $t):
        $cnt = $k === 'todas' ? array_sum($cnts) : ($cnts[$k] ?? 0);
        $href = http_build_query(array_filter([
            'estado'   => $k,
            'q'        => $q,
            'periodo'  => $filtPeriodo ?: null,
            'carrera'  => $filtCarrera ?: null,
            'per_page' => $perPage !== 25 ? $perPage : null,
        ]));
      ?>
      <a href="?<?= $href ?>"
         class="btn btn-sm <?= $filtro===$k ? 'btn-primary' : 'btn-outline-secondary' ?>">
        <?= $t['label'] ?>
        <?php if ($cnt > 0): ?>
          <span class="badge rounded-pill ms-1"
                style="background:<?= $filtro===$k?'rgba(255,255,255,.25)':$t['color'] ?>;
                       color:#fff;font-size:9px;opacity:<?= $filtro===$k?'1':'.85' ?>;">
            <?= $cnt ?>
          </span>
        <?php endif; ?>
      </a>
      <?php endforeach; ?>
    </div>

    <!-- ── BARRA DE FILTROS ── -->
    <form method="GET" id="form-filtros">
      <div class="filtros-bar">
        <div class="row g-2 align-items-end">
          <input type="hidden" name="estado"   value="<?= htmlspecialchars($filtro) ?>">
          <input type="hidden" name="page"     value="1">

          <!-- Búsqueda -->
          <div class="col-md-3">
            <label><i class="fa fa-search me-1"></i>Buscar</label>
            <input type="text" name="q" class="form-control form-control-sm"
                   placeholder="Nombre, cédula, empresa..."
                   value="<?= htmlspecialchars($q) ?>">
          </div>

          <!-- Período -->
          <div class="col-md-3">
            <label><i class="fa fa-calendar me-1"></i>Período / Ciclo</label>
            <select name="periodo" class="form-select form-select-sm" onchange="this.form.submit()">
              <option value="0">— Todos los períodos —</option>
              <?php foreach ($listaPeriodos as $lp): ?>
                <option value="<?= $lp['id_periodo'] ?>" <?= $filtPeriodo===$lp['id_periodo']?'selected':'' ?>>
                  <?= !empty($lp['activo'])?'🟢 ':'' ?><?= htmlspecialchars($lp['nombre']) ?><?= !empty($lp['activo'])?' (activo)':'' ?>
                </option>
              <?php endforeach; ?>
            </select>
          </div>

          <!-- Carrera -->
          <div class="col-md-3">
            <label><i class="fa fa-graduation-cap me-1"></i>Carrera</label>
            <select name="carrera" class="form-select form-select-sm" onchange="this.form.submit()">
              <option value="0">— Todas las carreras —</option>
              <?php foreach ($listaCarreras as $lc): ?>
                <option value="<?= $lc['id_carrera'] ?>" <?= $filtCarrera===$lc['id_carrera']?'selected':'' ?>>
                  <?= htmlspecialchars($lc['nombre']) ?>
                </option>
              <?php endforeach; ?>
            </select>
          </div>

          <!-- Por página + botones -->
          <div class="col-md-3">
            <label><i class="fa fa-list me-1"></i>Mostrar por página</label>
            <div class="d-flex gap-1">
              <select name="per_page" class="form-select form-select-sm" onchange="this.form.submit()">
                <?php foreach ($perPageOpts as $opt): ?>
                  <option value="<?= $opt ?>" <?= $perPage===$opt?'selected':'' ?>><?= $opt ?></option>
                <?php endforeach; ?>
              </select>
              <button type="submit" class="btn btn-primary btn-sm px-3">
                <i class="fa fa-search"></i>
              </button>
              <?php if ($q || $filtPeriodo || $filtCarrera): ?>
                <a href="?estado=<?= $filtro ?>" class="btn btn-outline-secondary btn-sm" title="Limpiar">
                  <i class="fa fa-xmark"></i>
                </a>
              <?php endif; ?>
            </div>
          </div>
        </div>

        <!-- Chips de filtros activos -->
        <?php if ($q || $filtPeriodo || $filtCarrera): ?>
        <div class="d-flex align-items-center gap-2 mt-2 flex-wrap" style="font-size:11px;">
          <span style="color:var(--text-light);">Filtros activos:</span>
          <?php if ($q): ?>
            <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle">🔍 "<?= htmlspecialchars($q) ?>"</span>
          <?php endif; ?>
          <?php if ($filtPeriodo): $pN='';$pA=false;foreach($listaPeriodos as $lp) if($lp['id_periodo']==$filtPeriodo){$pN=$lp['nombre'];$pA=!empty($lp['activo']);} ?>
            <span class="badge bg-success-subtle text-success-emphasis border border-success-subtle"><?= $pA?'🟢':'📅' ?> <?= htmlspecialchars($pN) ?></span>
          <?php endif; ?>
          <?php if ($filtCarrera): $cN='';foreach($listaCarreras as $lc) if($lc['id_carrera']==$filtCarrera) $cN=$lc['nombre']; ?>
            <span class="badge bg-primary-subtle text-primary-emphasis border border-primary-subtle">🎓 <?= htmlspecialchars($cN) ?></span>
          <?php endif; ?>
        </div>
        <?php endif; ?>
      </div>
    </form>

    <!-- Conteo -->
    <div class="count-label">
      <?php if ($totalRows > 0): ?>
        Mostrando <strong><?= number_format($offset + 1) ?></strong>–<strong><?= number_format(min($offset + $perPage, $totalRows)) ?></strong>
        de <strong><?= number_format($totalRows) ?></strong> postulacion(es)
        · Página <strong><?= $page ?></strong> de <strong><?= $totalPages ?></strong>
      <?php else: ?>
        0 postulaciones encontradas
      <?php endif; ?>
    </div>

    <?php if (empty($postulaciones)): ?>
    <div class="empty-state">
      <div class="empty-state-icon">📭</div>
      <div class="empty-state-msg">
        <?= $filtro === 'postulado' ? 'No hay postulaciones pendientes. ¡Todo al día!' : 'Sin registros para este filtro.' ?>
      </div>
    </div>
    <?php else: ?>

    <!-- Cards de postulaciones -->
    <div class="row g-3">
      <?php foreach ($postulaciones as $p):
        $esPendiente = $p['estado'] === 'postulado';
        $stColor = match($p['estado']) {
            'postulado' => '#f59e0b', 'aprobado' => '#10b981',
            'rechazado' => '#ef4444', default => '#64748b'
        };
      ?>
      <div class="col-12">
        <div class="post-card <?= $esPendiente ? 'pendiente' : '' ?>">

          <div class="row g-3 align-items-start">

            <!-- Columna 1: Estudiante + carrera -->
            <div class="col-sm-3">
              <div class="col-label">Estudiante</div>
              <div class="col-nombre"><?= htmlspecialchars($p['estudiante']) ?></div>
              <div class="col-cedula"><?= htmlspecialchars($p['cedula']) ?></div>
              <div class="col-carrera"><i class="fa fa-graduation-cap me-1"></i><?= htmlspecialchars($p['carrera']) ?></div>
              <div class="col-periodo"><i class="fa fa-calendar me-1"></i><?= htmlspecialchars($p['periodo']) ?></div>
            </div>

            <!-- Columna 2: Empresa + área -->
            <div class="col-sm-3">
              <div class="col-label">Empresa</div>
              <div class="col-empresa"><?= htmlspecialchars($p['empresa']) ?></div>
              <?php if ($p['canton']): ?>
              <div class="col-location">
                <i class="fa fa-location-dot me-1"></i>
                <?= htmlspecialchars(implode(', ', array_filter([$p['canton'],$p['provincia']]))) ?>
              </div>
              <?php endif; ?>
              <?php if ($p['area_practica']): ?>
              <div class="col-area"><i class="fa fa-briefcase me-1"></i><?= htmlspecialchars($p['area_practica']) ?></div>
              <?php endif; ?>
              <?php if ($p['cargo_practica']): ?>
              <div class="col-cargo"><i class="fa fa-id-badge me-1"></i><?= htmlspecialchars($p['cargo_practica']) ?></div>
              <?php endif; ?>
            </div>

            <!-- Columna 3: Tutor empresa + horas -->
            <div class="col-sm-2">
              <div class="col-label">Tutor empresa</div>
              <?php if ($p['nombre_tutor_empresa']): ?>
              <div class="col-tutor-emp"><?= htmlspecialchars($p['nombre_tutor_empresa']) ?></div>
              <?php if ($p['email_tutor_empresa']): ?>
              <div class="col-email-sup"><?= htmlspecialchars($p['email_tutor_empresa']) ?></div>
              <?php endif; ?>
              <?php if ($p['cedula_tutor_empresa']): ?>
              <div class="col-cedula-sup"><i class="fa fa-id-card fa-xs me-1"></i><?= htmlspecialchars($p['cedula_tutor_empresa']) ?></div>
              <?php endif; ?>
              <?php else: ?>
              <div class="col-sin-asignar">Sin asignar</div>
              <?php endif; ?>

              <?php if ($p['cedula_tutor_empresa']): ?>
              <div>
                <?php if (!$p['sup_id_usuario']): ?>
                  <span class="sup-badge" style="color:var(--text-light);"><i class="fa fa-clock fa-xs me-1"></i>Sin cuenta aún</span>
                <?php elseif ($p['sup_activo']): ?>
                  <span class="sup-badge" style="color:#10b981;"><i class="fa fa-circle fa-xs me-1"></i>Acceso activo</span>
                <?php else: ?>
                  <span class="sup-badge" style="color:#ef4444;"><i class="fa fa-circle fa-xs me-1"></i>Sin prácticas activas</span>
                <?php endif; ?>
              </div>
              <?php endif; ?>

              <div style="margin-top:10px;">
                <div class="col-label">Horas req.</div>
                <div class="col-horas-n"><?= $p['horas_requeridas'] ?><span class="col-horas-u">h</span></div>
              </div>
            </div>

            <!-- Columna 4: Estado + tutor asignado + fechas -->
            <div class="col-sm-2">
              <div class="col-label">Estado</div>
              <?= badgeEstado($p['estado']) ?>

              <?php if ($p['tutor_asignado']): ?>
              <div style="margin-top:10px;">
                <div class="col-label">Tutor académico</div>
                <div class="col-tutor-ac"><i class="fa fa-user-tie me-1"></i><?= htmlspecialchars($p['tutor_asignado']) ?></div>
              </div>
              <?php endif; ?>

              <?php if ($p['fecha_inicio']): ?>
              <div class="col-fechas"><?= formatFecha($p['fecha_inicio']) ?> — <?= formatFecha($p['fecha_fin']) ?></div>
              <?php endif; ?>

              <?php if ($esPendiente && ($p['fecha_inicio'] || $p['jornada_horario'])): ?>
              <div class="fechas-propuestas-box">
                <div class="fechas-prop-titulo"><i class="fa fa-calendar-check me-1"></i>Propuesto por estudiante</div>
                <?php if ($p['fecha_inicio']): ?>
                <div class="fechas-prop-row">
                  <span class="fechas-prop-label">Inicio</span>
                  <span class="fechas-prop-val verde"><?= date('d/m/Y', strtotime($p['fecha_inicio'])) ?></span>
                </div>
                <div class="fechas-prop-row">
                  <span class="fechas-prop-label">Fin</span>
                  <span class="fechas-prop-val naranja"><?= $p['fecha_fin'] ? date('d/m/Y', strtotime($p['fecha_fin'])) : '—' ?></span>
                </div>
                <?php endif; ?>
                <?php if ($p['jornada_horario']): ?>
                <div class="fechas-prop-jornada"><?= htmlspecialchars($p['jornada_horario']) ?></div>
                <?php endif; ?>
              </div>
              <?php endif; ?>

              <div class="col-posted">Postulado: <?= formatFecha($p['created_at'], 'd/m/Y') ?></div>
            </div>

            <!-- Columna 5: Acciones -->
            <div class="col-sm-2 d-flex flex-column gap-2 justify-content-start">
              <?php if ($esPendiente): ?>
              <button class="btn btn-sm btn-success btn-aprobar"
                data-id="<?= $p['id_practica'] ?>"
                data-estudiante="<?= htmlspecialchars($p['estudiante']) ?>"
                data-empresa="<?= htmlspecialchars($p['empresa']) ?>"
                data-area="<?= htmlspecialchars($p['area_practica'] ?? '') ?>"
                data-horas="<?= $p['horas_requeridas'] ?>"
                data-doc="<?= htmlspecialchars($p['documento_solicitud'] ?? '') ?>"
                data-nueva="<?= $p['empresa_nueva'] ?? 0 ?>"
                data-emp-nombre="<?= htmlspecialchars($p['emp_nueva_nombre'] ?? '') ?>"
                data-emp-ruc="<?= htmlspecialchars($p['emp_nueva_ruc'] ?? '') ?>"
                data-emp-canton="<?= htmlspecialchars(($p['emp_nueva_canton'] ?? '').' '.($p['emp_nueva_provincia'] ?? '')) ?>"
                data-emp-rep="<?= htmlspecialchars($p['emp_nueva_representante'] ?? '') ?>"
                data-emp-registrada="<?= $p['emp_nueva_registrada_id'] ?? 0 ?>"
                data-sup-nombre="<?= htmlspecialchars($p['nombre_tutor_empresa'] ?? '') ?>"
                data-sup-cedula="<?= htmlspecialchars($p['cedula_tutor_empresa'] ?? '') ?>"
                data-sup-email="<?= htmlspecialchars($p['email_tutor_empresa'] ?? '') ?>"
                data-sup-tel="<?= htmlspecialchars($p['telefono_tutor_empresa'] ?? '') ?>"
                data-fecha-inicio="<?= htmlspecialchars($p['fecha_inicio'] ?? '') ?>"
                data-fecha-fin="<?= htmlspecialchars($p['fecha_fin'] ?? '') ?>"
                data-jornada="<?= htmlspecialchars($p['jornada_horario'] ?? '') ?>">
                <i class="fa fa-circle-check me-1"></i>Aprobar
              </button>
              <button class="btn btn-sm btn-outline-danger btn-rechazar"
                data-id="<?= $p['id_practica'] ?>"
                data-estudiante="<?= htmlspecialchars($p['estudiante']) ?>">
                <i class="fa fa-circle-xmark me-1"></i>Rechazar
              </button>
              <?php else: ?>
              <button class="btn btn-sm btn-outline-secondary btn-ver-detalle"
                data-id="<?= $p['id_practica'] ?>"
                data-estudiante="<?= htmlspecialchars($p['estudiante']) ?>"
                data-empresa="<?= htmlspecialchars($p['empresa']) ?>"
                data-estado="<?= $p['estado'] ?>"
                data-obs="<?= htmlspecialchars($p['observaciones'] ?? '') ?>"
                data-motivo="<?= htmlspecialchars($p['motivo_rechazo'] ?? '') ?>">
                <i class="fa fa-eye me-1"></i>Ver detalle
              </button>
              <?php if ($p['estado'] === 'aprobado'): ?>
              <button class="btn btn-sm btn-outline-primary btn-asignar-tutor"
                data-id="<?= $p['id_practica'] ?>"
                data-estudiante="<?= htmlspecialchars($p['estudiante']) ?>"
                data-empresa="<?= htmlspecialchars($p['empresa']) ?>"
                data-area="<?= htmlspecialchars($p['area_practica'] ?? '') ?>"
                data-cargo="<?= htmlspecialchars($p['cargo_practica'] ?? '') ?>"
                data-tutor-actual="<?= (int)($p['id_tutor'] ?? 0) ?>"
                data-tutor-nombre="<?= htmlspecialchars($p['tutor_asignado'] ?? '') ?>"
                data-fecha-inicio="<?= htmlspecialchars($p['fecha_inicio'] ?? '') ?>"
                data-fecha-fin="<?= htmlspecialchars($p['fecha_fin'] ?? '') ?>"
                data-obs="<?= htmlspecialchars($p['observaciones'] ?? '') ?>"
                data-sup-nombre="<?= htmlspecialchars($p['nombre_tutor_empresa'] ?? '') ?>"
                data-sup-email="<?= htmlspecialchars($p['email_tutor_empresa'] ?? '') ?>"
                data-sup-tel="<?= htmlspecialchars($p['telefono_tutor_empresa'] ?? '') ?>"
                data-horas="<?= (int)($p['horas_requeridas'] ?? 0) ?>">
                <i class="fa fa-user-tie me-1"></i><?= $p['tutor_asignado'] ? 'Cambiar tutor' : 'Asignar tutor' ?>
              </button>
              <?php endif; ?>
              <?php endif; ?>
              <!-- Botón Ver Documento -->
              <?php if (!empty($p['documento_solicitud'])): ?>
              <a href="<?= UPLOAD_URL ?>/<?= htmlspecialchars($p['documento_solicitud']) ?>"
                 target="_blank" class="doc-btn-link">
                <i class="fa fa-file-pdf"></i> Ver documento
              </a>
              <?php else: ?>
              <span class="doc-btn-none">
                <i class="fa fa-file-slash"></i> Sin documento
              </span>
              <?php endif; ?>
            </div>

          </div>

          <!-- Observaciones / Rechazo -->
          <?php if ($p['observaciones'] && $p['estado'] !== 'postulado'): ?>
          <div class="obs-note obs-note-info">
            <i class="fa fa-comment me-1"></i><?= htmlspecialchars($p['observaciones']) ?>
          </div>
          <?php endif; ?>
          <?php if ($p['motivo_rechazo']): ?>
          <div class="obs-note obs-note-danger">
            <i class="fa fa-circle-exclamation me-1"></i><strong>Motivo de rechazo:</strong> <?= htmlspecialchars($p['motivo_rechazo']) ?>
          </div>
          <?php endif; ?>

        </div>
      </div>
      <?php endforeach; ?>
    </div>

    <!-- ══ PAGINACIÓN ══ -->
    <?php if ($totalPages > 1 || $totalRows > 0): ?>
    <?php
      $baseUrl = 'postulaciones.php?' . http_build_query(array_filter([
          'estado'   => $filtro,
          'q'        => $q,
          'periodo'  => $filtPeriodo ?: null,
          'carrera'  => $filtCarrera ?: null,
          'per_page' => $perPage !== 25 ? $perPage : null,
      ]));
    ?>
    <div class="pag-wrap">
      <div class="pag-info">
        Mostrando <strong><?= $totalRows===0 ? 0 : $offset+1 ?></strong>–<strong><?= min($offset+$perPage,$totalRows) ?></strong>
        de <strong><?= number_format($totalRows) ?></strong>
        · Página <strong><?= $page ?></strong> de <strong><?= $totalPages ?></strong>
        &nbsp;|&nbsp;
        Mostrar:
        <?php foreach ($perPageOpts as $opt): ?>
          <a href="<?= $baseUrl ?>&per_page=<?= $opt ?>&page=1"
             class="pag-btn <?= $perPage===$opt?'active':'' ?>" style="padding:3px 8px;"><?= $opt ?></a>
        <?php endforeach; ?>
      </div>
      <?php if ($totalPages > 1): ?>
      <div class="pag-btns">
        <!-- Primera -->
        <a href="<?= $baseUrl ?>&page=1" class="pag-btn <?= $page<=1?'disabled':'' ?>" title="Primera">
          <i class="fa fa-angles-left fa-xs"></i>
        </a>
        <!-- Anterior -->
        <a href="<?= $baseUrl ?>&page=<?= max(1,$page-1) ?>" class="pag-btn <?= $page<=1?'disabled':'' ?>">
          <i class="fa fa-chevron-left fa-xs"></i> Anterior
        </a>
        <!-- Páginas numéricas -->
        <?php
          $ini = max(1,$page-2); $fin = min($totalPages,$page+2);
          if($ini>1){ echo '<a href="'.$baseUrl.'&page=1" class="pag-btn">1</a>';
            if($ini>2) echo '<span class="pag-btn disabled" style="border:none;background:none;">…</span>';
          }
          for($i=$ini;$i<=$fin;$i++):
        ?>
          <a href="<?= $baseUrl ?>&page=<?= $i ?>" class="pag-btn <?= $i===$page?'active':'' ?>"><?= $i ?></a>
        <?php endfor;
          if($fin<$totalPages){
            if($fin<$totalPages-1) echo '<span class="pag-btn disabled" style="border:none;background:none;">…</span>';
            echo '<a href="'.$baseUrl.'&page='.$totalPages.'" class="pag-btn">'.$totalPages.'</a>';
          }
        ?>
        <!-- Siguiente -->
        <a href="<?= $baseUrl ?>&page=<?= min($totalPages,$page+1) ?>" class="pag-btn <?= $page>=$totalPages?'disabled':'' ?>">
          Siguiente <i class="fa fa-chevron-right fa-xs"></i>
        </a>
        <!-- Última -->
        <a href="<?= $baseUrl ?>&page=<?= $totalPages ?>" class="pag-btn <?= $page>=$totalPages?'disabled':'' ?>" title="Última">
          <i class="fa fa-angles-right fa-xs"></i>
        </a>
      </div>
      <?php endif; ?>
    </div>
    <?php endif; ?>

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

<!-- ══ MODAL APROBAR ══ -->
<div class="modal fade" id="modalAprobar" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="fa fa-circle-check me-2" style="color:#10b981;"></i>Aprobar postulación
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST">
        <input type="hidden" name="accion"      value="aprobar">
        <input type="hidden" name="id_practica" id="ap-id">
        <div class="modal-body">

          <!-- Resumen -->
          <div class="modal-resumen">
            <div class="modal-resumen-label">Aprobando práctica de:</div>
            <div id="ap-est" class="modal-resumen-nombre"></div>
            <div id="ap-emp" class="modal-resumen-emp"></div>
            <div id="ap-area" class="modal-resumen-area"></div>
          </div>

          <!-- Documento subido por el estudiante -->
          <div id="blk-doc" style="display:none;margin-bottom:16px;">
            <div class="modal-doc-label">DOCUMENTO DE SOLICITUD</div>
            <a id="ap-doc-link" href="#" target="_blank" class="modal-doc-link">
              <i class="fa fa-file-pdf"></i> Ver documento del estudiante
            </a>
          </div>

          <!-- Empresa propuesta (nueva, no registrada) -->
          <div id="blk-emp-nueva" style="display:none;" class="modal-emp-nueva">
            <div class="modal-emp-nueva-title">
              <i class="fa fa-building-circle-arrow-right me-2"></i>EMPRESA PROPUESTA (no registrada en el catálogo)
            </div>
            <div class="row g-2" style="font-size:13px;">
              <div class="col-sm-6">
                <span class="modal-emp-field-label">RUC</span>
                <div id="ap-emp-ruc" class="modal-emp-field-val"></div>
              </div>
              <div class="col-sm-6">
                <span class="modal-emp-field-label">Cantón</span>
                <div id="ap-emp-canton" class="modal-emp-field-val"></div>
              </div>
              <div class="col-sm-6">
                <span class="modal-emp-field-label">Representante</span>
                <div id="ap-emp-rep" class="modal-emp-field-val"></div>
              </div>
            </div>
            <div class="form-check mt-3">
              <input class="form-check-input" type="checkbox" name="registrar_empresa" value="1" id="chkRegEmp" checked>
              <label class="form-check-label" for="chkRegEmp" style="font-size:13px;color:#b45309;">
                Registrar esta empresa en el catálogo al aprobar
              </label>
            </div>
          </div>

          <!-- ── Supervisor de empresa ── -->
          <div id="blk-supervisor" style="display:none;" class="modal-sup">
            <div class="modal-sup-title">
              <i class="fa fa-user-tie me-2"></i>SUPERVISOR DE EMPRESA REGISTRADO
            </div>
            <div class="row g-2" style="font-size:13px;">
              <div class="col-sm-6">
                <div class="modal-sup-field-label">Nombre</div>
                <div id="ap-sup-nombre" class="modal-sup-field-val"></div>
              </div>
              <div class="col-sm-6">
                <div class="modal-sup-field-label">Cédula</div>
                <div id="ap-sup-cedula" class="modal-sup-cedula"></div>
              </div>
              <div class="col-sm-6">
                <div class="modal-sup-field-label">Email</div>
                <div id="ap-sup-email" class="modal-sup-small"></div>
              </div>
              <div class="col-sm-6">
                <div class="modal-sup-field-label">Teléfono</div>
                <div id="ap-sup-tel" class="modal-sup-small"></div>
              </div>
            </div>
            <div class="modal-sup-sep">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="crear_supervisor" value="1" id="chkCrearSup" checked>
                <label class="form-check-label" for="chkCrearSup" style="font-size:13px;color:#059669;font-weight:600;">
                  Crear cuenta de acceso al supervisor
                </label>
              </div>
              <div class="modal-sup-login-key">
                <i class="fa fa-key me-1" style="color:#059669;"></i>
                Usuario: <strong id="lbl-cedula-login" class="modal-sup-key-val"></strong>
                &nbsp;·&nbsp; Contraseña: <strong class="modal-sup-key-val">su cédula</strong>
                &nbsp;·&nbsp; Rol: <strong style="color:#059669;">Tutor Empresa</strong>
              </div>
            </div>
            <div id="aviso-sin-cedula" class="modal-aviso-cedula">
              <i class="fa fa-triangle-exclamation me-1"></i>
              El estudiante no ingresó cédula del supervisor. No se puede crear cuenta automáticamente.
            </div>
          </div>

          <div class="row g-3">
            <!-- Asignar tutor académico -->
            <div class="col-12">
              <label class="form-label">
                Asignar tutor académico
                <small style="color:var(--text-light);font-weight:400;">(opcional — se puede asignar después)</small>
              </label>
              <select name="id_tutor" id="ap-tutor" class="form-select">
                <option value="">— Sin asignar por ahora —</option>
                <?php foreach ($tutores as $t):
                  $disponibles = $t['max_estudiantes'] - $t['asignados'];
                  $lleno = $disponibles <= 0;
                ?>
                <option value="<?= $t['id_tutor'] ?>"
                        <?= $lleno ? 'style="color:#ff9d93;"' : '' ?>>
                  <?= htmlspecialchars($t['nombre']) ?>
                  — <?= $t['asignados'] ?>/<?= $t['max_estudiantes'] ?> asignados
                  <?= $lleno ? ' (LLENO)' : '(' . $disponibles . ' disponibles)' ?>
                  <?= $t['especialidad'] ? ' · '.$t['especialidad'] : '' ?>
                </option>
                <?php endforeach; ?>
              </select>
            </div>

            <!-- Fechas propuestas por el estudiante -->
            <div class="col-12" id="blk-fechas-prop" style="display:none;">
              <div style="background:#f0fdf4;border:1.5px solid #86efac;border-radius:10px;padding:12px 16px;">
                <div style="font-size:11px;font-weight:700;color:#166534;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;">
                  <i class="fa fa-calendar-check me-1"></i>Fechas propuestas por el estudiante
                </div>
                <div class="row g-2">
                  <div class="col-sm-6">
                    <div style="font-size:10px;color:#6b7280;text-transform:uppercase;margin-bottom:2px;">Inicio propuesto</div>
                    <div id="ap-prop-inicio" style="font-weight:700;font-size:15px;color:#15803d;"></div>
                  </div>
                  <div class="col-sm-6">
                    <div style="font-size:10px;color:#6b7280;text-transform:uppercase;margin-bottom:2px;">Fin propuesto</div>
                    <div id="ap-prop-fin" style="font-weight:700;font-size:15px;color:#f97316;"></div>
                  </div>
                  <div class="col-12" id="blk-jornada-prop" style="display:none;">
                    <div style="font-size:10px;color:#6b7280;text-transform:uppercase;margin-bottom:2px;">Jornada / días</div>
                    <div id="ap-prop-jornada" style="font-size:12px;color:#374151;background:#e9faf0;padding:4px 10px;border-radius:6px;display:inline-block;"></div>
                  </div>
                </div>
                <div style="font-size:11px;color:#6b7280;margin-top:8px;">
                  <i class="fa fa-circle-info me-1"></i>Puedes confirmar o cambiar estas fechas abajo.
                </div>
              </div>
            </div>

            <!-- Fechas -->
            <div class="col-sm-6">
              <label class="form-label" style="font-weight:600;color:#065f46;">
                <i class="fa fa-calendar-day me-1" style="color:#10b981;"></i>Fecha de inicio de prácticas
              </label>
              <input type="date" name="fecha_inicio" id="ap-fi" class="form-control"
                     style="border:2px solid #86efac;font-weight:600;"
                     value="<?= date('Y-m-d') ?>">
            </div>
            <div class="col-sm-6">
              <label class="form-label" style="font-weight:600;color:#c2410c;">
                <i class="fa fa-calendar-xmark me-1" style="color:#f97316;"></i>Fecha de fin prevista
              </label>
              <input type="date" name="fecha_fin" id="ap-ff" class="form-control"
                     style="border:2px solid #fdba74;font-weight:600;">
            </div>

            <!-- Observaciones -->
            <div class="col-12">
              <label class="form-label">Observaciones al estudiante <small style="color:var(--text-light);">(opcional)</small></label>
              <textarea name="observaciones" class="form-control" rows="2"
                        placeholder="Indicaciones, requisitos adicionales, etc."></textarea>
            </div>
          </div>

          <div class="alert-dark-info p-3 mt-3" style="font-size:12px;">
            <i class="fa fa-info-circle me-2"></i>
            Al aprobar, el estado cambiará a <strong>Aprobado</strong>.
            El estudiante podrá empezar sus prácticas a partir de la fecha de inicio indicada.
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-success">
            <i class="fa fa-circle-check me-2"></i>Confirmar aprobación
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- ══ MODAL ASIGNAR / CAMBIAR TUTOR ══ -->
<div class="modal fade" id="modalAsignarTutor" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="fa fa-user-tie me-2" style="color:#3b82f6;"></i>
          <span id="at-titulo">Asignar tutor académico</span>
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST">
        <input type="hidden" name="accion"      value="asignar_tutor">
        <input type="hidden" name="id_practica" id="at-id">
        <div class="modal-body">

          <!-- Resumen estudiante / empresa -->
          <div class="modal-resumen mb-3">
            <div class="modal-resumen-label">Práctica de:</div>
            <div id="at-estudiante" class="modal-resumen-nombre"></div>
            <div id="at-empresa"    class="modal-resumen-emp"></div>
            <div id="at-area"       class="modal-resumen-area"></div>
          </div>

          <!-- Info supervisor de empresa -->
          <div id="at-blk-sup" style="display:none;background:#f0fdf4;border:1px solid #bbf7d0;
                border-radius:8px;padding:12px 14px;margin-bottom:14px;font-size:13px;">
            <div style="font-size:11px;font-weight:700;color:#065f46;text-transform:uppercase;
                        letter-spacing:.5px;margin-bottom:8px;">
              <i class="fa fa-user-tie me-1"></i>Supervisor de empresa
            </div>
            <div class="row g-2">
              <div class="col-sm-5">
                <span style="font-size:10px;color:#6ee7b7;text-transform:uppercase;">Nombre</span>
                <div id="at-sup-nombre" style="font-weight:600;color:#0f172a;"></div>
              </div>
              <div class="col-sm-4">
                <span style="font-size:10px;color:#6ee7b7;text-transform:uppercase;">Email</span>
                <div id="at-sup-email" style="font-size:12px;color:#334155;"></div>
              </div>
              <div class="col-sm-3">
                <span style="font-size:10px;color:#6ee7b7;text-transform:uppercase;">Teléfono</span>
                <div id="at-sup-tel" style="font-size:12px;color:#334155;"></div>
              </div>
            </div>
          </div>

          <div class="row g-3">
            <!-- Tutor académico -->
            <div class="col-12">
              <label class="form-label fw-bold">
                Tutor académico <span style="color:#ef4444;">*</span>
              </label>
              <select name="id_tutor" id="at-tutor" class="form-select" required>
                <option value="">— Selecciona un tutor —</option>
                <?php foreach ($tutores as $t):
                  $disp  = $t['max_estudiantes'] - $t['asignados'];
                  $lleno = $disp <= 0;
                ?>
                <option value="<?= $t['id_tutor'] ?>" <?= $lleno ? 'style="color:#ef4444;"' : '' ?>>
                  <?= htmlspecialchars($t['nombre']) ?>
                  — <?= $t['asignados'] ?>/<?= $t['max_estudiantes'] ?> asignados
                  <?= $lleno ? ' (LLENO)' : ' (' . $disp . ' disponibles)' ?>
                  <?= $t['especialidad'] ? ' · ' . $t['especialidad'] : '' ?>
                </option>
                <?php endforeach; ?>
              </select>
              <div class="form-text">
                <i class="fa fa-info-circle me-1"></i>Solo tutores del instituto. Obligatorio para continuar el proceso.
              </div>
            </div>

            <!-- Fecha inicio -->
            <div class="col-sm-6">
              <label class="form-label">Fecha de inicio de prácticas</label>
              <input type="date" name="fecha_inicio" id="at-fi" class="form-control">
            </div>

            <!-- Fecha fin -->
            <div class="col-sm-6">
              <label class="form-label">Fecha de fin prevista</label>
              <input type="date" name="fecha_fin" id="at-ff" class="form-control">
            </div>

            <!-- Horas requeridas (solo lectura) -->
            <div class="col-sm-4">
              <label class="form-label">Horas requeridas</label>
              <div id="at-horas" style="font-size:20px;font-weight:800;color:#3b82f6;padding-top:4px;">—</div>
            </div>

            <!-- Observaciones -->
            <div class="col-12">
              <label class="form-label">Observaciones al estudiante <small style="color:var(--text-light);">(opcional)</small></label>
              <textarea name="observaciones" id="at-obs" class="form-control" rows="2"
                        placeholder="Indicaciones adicionales..."></textarea>
            </div>
          </div>

          <div style="background:#fffbeb;border:1px solid #fde68a;border-radius:8px;
                      padding:10px 14px;margin-top:14px;font-size:12px;color:#92400e;">
            <i class="fa fa-triangle-exclamation me-1"></i>
            <strong>Obligatorio:</strong> Toda práctica aprobada debe tener un tutor académico para continuar el proceso. Las fechas se actualizarán solo si las modificas.
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary">
            <i class="fa fa-user-check me-2"></i>Guardar cambios
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
// Modal asignar / cambiar tutor
document.querySelectorAll('.btn-asignar-tutor').forEach(function(btn){
  btn.addEventListener('click', function(){
    var d = this.dataset;

    document.getElementById('at-id').value        = d.id;
    document.getElementById('at-titulo').textContent =
      d.tutorActual && parseInt(d.tutorActual) > 0 ? 'Cambiar tutor académico' : 'Asignar tutor académico';

    // Resumen
    document.getElementById('at-estudiante').textContent = d.estudiante || '';
    document.getElementById('at-empresa').textContent    = d.empresa    || '';
    document.getElementById('at-area').textContent       = d.area ? (d.area + (d.cargo ? ' · ' + d.cargo : '')) : '';

    // Supervisor empresa
    var blkSup = document.getElementById('at-blk-sup');
    if (d.supNombre) {
      document.getElementById('at-sup-nombre').textContent = d.supNombre;
      document.getElementById('at-sup-email').textContent  = d.supEmail || '—';
      document.getElementById('at-sup-tel').textContent    = d.supTel   || '—';
      blkSup.style.display = 'block';
    } else {
      blkSup.style.display = 'none';
    }

    // Tutor actual preseleccionado
    var sel = document.getElementById('at-tutor');
    sel.value = (d.tutorActual && parseInt(d.tutorActual) > 0) ? d.tutorActual : '';

    // Fechas existentes
    document.getElementById('at-fi').value = d.fechaInicio || '';
    document.getElementById('at-ff').value = d.fechaFin    || '';

    // Horas
    document.getElementById('at-horas').textContent = d.horas ? d.horas + 'h' : '—';

    // Observaciones
    document.getElementById('at-obs').value = d.obs || '';

    new bootstrap.Modal('#modalAsignarTutor').show();
  });
});
</script>
<div class="modal fade" id="modalRechazar" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="fa fa-circle-xmark me-2" style="color:#ef4444;"></i>Rechazar postulación
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST">
        <input type="hidden" name="accion"      value="rechazar">
        <input type="hidden" name="id_practica" id="rch-id">
        <div class="modal-body">
          <div class="modal-rch-resumen">
            <div class="modal-rch-label">Rechazando práctica de:</div>
            <div id="rch-est" style="font-size:15px;font-weight:700;color:var(--text-main);"></div>
          </div>
          <div class="mb-3">
            <label class="form-label">Motivo de rechazo <span class="req">*</span></label>
            <textarea name="motivo_rechazo" class="form-control" rows="3" required
                      placeholder="Explica al estudiante por qué se rechaza su postulación..."></textarea>
          </div>
          <div class="mb-0">
            <label class="form-label">Observaciones adicionales <small style="color:var(--text-light);">(opcional)</small></label>
            <textarea name="observaciones" class="form-control" rows="2"
                      placeholder="Recomendaciones para corregir y volver a postular..."></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-danger">
            <i class="fa fa-circle-xmark me-2"></i>Confirmar rechazo
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- ══ MODAL VER DETALLE ══ -->
<div class="modal fade" id="modalDetalle" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Detalle de postulación</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3" style="font-size:13px;">
          <div class="col-6">
            <div class="detail-label">Estudiante</div>
            <div id="d-est" style="font-weight:700;"></div>
          </div>
          <div class="col-6">
            <div class="detail-label">Estado</div>
            <div id="d-est-badge"></div>
          </div>
          <div class="col-12">
            <div class="detail-label">Empresa</div>
            <div id="d-emp" style="font-weight:600;"></div>
          </div>
          <div id="blk-obs" style="display:none;" class="col-12">
            <div class="detail-label">Observaciones</div>
            <div id="d-obs" class="detail-obs"></div>
          </div>
          <div id="blk-mot" style="display:none;" class="col-12">
            <div class="detail-mot-label">Motivo de rechazo</div>
            <div id="d-mot" class="detail-mot"></div>
          </div>
        </div>
      </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>
$(function () {

  // Abrir modal aprobar
  $(document).on('click', '.btn-aprobar', function () {
    var d = $(this).data();
    $('#ap-id').val(d.id);
    $('#ap-est').text(d.estudiante);
    $('#ap-emp').text(d.empresa);
    $('#ap-area').text(d.area || '');

    // Documento
    if (d.doc) {
      $('#ap-doc-link').attr('href', '<?=UPLOAD_URL?>/' + d.doc);
      $('#blk-doc').show();
    } else {
      $('#blk-doc').hide();
    }

    // Empresa nueva
    if (d.nueva == 1 && !d.empRegistrada) {
      $('#ap-emp-ruc').text(d.empRuc || '—');
      $('#ap-emp-canton').text(d.empCanton || '—');
      $('#ap-emp-rep').text(d.empRep || '—');
      $('#blk-emp-nueva').show();
    } else {
      $('#blk-emp-nueva').hide();
    }

    // Supervisor de empresa
    if (d.supNombre || d.supCedula) {
      $('#ap-sup-nombre').text(d.supNombre || '—');
      $('#ap-sup-email').text(d.supEmail   || '—');
      $('#ap-sup-tel').text(d.supTel       || '—');
      if (d.supCedula) {
        $('#ap-sup-cedula').text(d.supCedula);
        $('#lbl-cedula-login').text(d.supCedula);
        $('#chkCrearSup').prop('disabled', false);
        $('#aviso-sin-cedula').hide();
      } else {
        $('#ap-sup-cedula').text('No ingresada');
        $('#lbl-cedula-login').text('—');
        $('#chkCrearSup').prop('checked', false).prop('disabled', true);
        $('#aviso-sin-cedula').show();
      }
      $('#blk-supervisor').show();
    } else {
      $('#blk-supervisor').hide();
    }

    // ── Fechas propuestas por el estudiante ──────────────────
    if (d.fechaInicio) {
      // Mostrar caja informativa con fechas propuestas
      var fIniParts = d.fechaInicio.split('-');
      var fFinParts = d.fechaFin ? d.fechaFin.split('-') : null;
      $('#ap-prop-inicio').text(fIniParts[2]+'/'+fIniParts[1]+'/'+fIniParts[0]);
      $('#ap-prop-fin').text(fFinParts ? fFinParts[2]+'/'+fFinParts[1]+'/'+fFinParts[0] : '—');
      $('#blk-fechas-prop').show();

      // Pre-llenar los inputs con las fechas del estudiante
      $('#ap-fi').val(d.fechaInicio);
      $('#ap-ff').val(d.fechaFin || '');
    } else {
      $('#blk-fechas-prop').hide();
      // Calcular fecha fin sugerida (+6 meses) si no hay fechas del estudiante
      var hoy = new Date();
      var fin  = new Date(hoy);
      fin.setMonth(fin.getMonth() + 6);
      $('#ap-fi').val(hoy.toISOString().split('T')[0]);
      $('#ap-ff').val(fin.toISOString().split('T')[0]);
    }

    // Jornada / días laborables
    if (d.jornada) {
      $('#ap-prop-jornada').text(d.jornada);
      $('#blk-jornada-prop').show();
    } else {
      $('#blk-jornada-prop').hide();
    }

    new bootstrap.Modal('#modalAprobar').show();
  });

  // Abrir modal rechazar
  $(document).on('click', '.btn-rechazar', function () {
    var d = $(this).data();
    $('#rch-id').val(d.id);
    $('#rch-est').text(d.estudiante);
    new bootstrap.Modal('#modalRechazar').show();
  });

  // Modal ver detalle
  $(document).on('click', '.btn-ver-detalle', function () {
    var d = $(this).data();
    $('#d-est').text(d.estudiante);
    $('#d-emp').text(d.empresa);
    var badges = {
      aprobado:'<span class="badge-estado st-aprobado">Aprobado</span>',
      rechazado:'<span class="badge-estado st-calificado">Rechazado</span>'
    };
    $('#d-est-badge').html(badges[d.estado] || d.estado);
    if (d.obs) { $('#d-obs').text(d.obs); $('#blk-obs').show(); } else { $('#blk-obs').hide(); }
    if (d.motivo) { $('#d-mot').text(d.motivo); $('#blk-mot').show(); } else { $('#blk-mot').hide(); }
    new bootstrap.Modal('#modalDetalle').show();
  });

});
</script>
</body>
</html>