<?php
// modules/facturacion/dashboard.php
require_once __DIR__ . '/../../config/app.php';
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../includes/functions.php';
require_once __DIR__ . '/../../includes/flash.php';
requireRol(ROL_FACTURACION);
$idInst = instId();

$user      = currentUser();
$db        = getDB();
$pageTitle = 'Dashboard Facturación';

// ── Datos del instituto ───────────────────────────────────────
$stInstFac = $db->prepare("SELECT nombre, logo FROM institutos WHERE id_instituto = :id LIMIT 1");
$stInstFac->execute([':id' => $idInst ?: 1]);
$instFac    = $stInstFac->fetch() ?: [];
$logoFac    = $instFac['logo'] ?? '';
$nombreFac  = $instFac['nombre'] ?? 'SIGVP';
$logoUrlFac = $logoFac ? BASE_URL . '/uploads/institutos/' . $logoFac : '';

// ── Periodos académicos ──────────────────────────────────────
// Tabla: periodos_academicos | campo activo: tinyint (1=activo, 0=inactivo)
$instCondPA = $idInst ? "AND id_instituto = $idInst" : '';
$periodos   = $db->query("
    SELECT id_periodo, nombre, fecha_inicio, fecha_fin, activo
    FROM   periodos_academicos
    WHERE  1=1 $instCondPA
    ORDER  BY activo DESC, id_periodo DESC
")->fetchAll();

$periodosActivos   = array_filter($periodos, fn($p) => (int)$p['activo'] === 1);
$periodosHistorial = array_filter($periodos, fn($p) => (int)$p['activo'] === 0);

// ── Carreras ─────────────────────────────────────────────────
$instCondC = $idInst ? "AND id_instituto = $idInst" : '';
$carreras  = $db->query("
    SELECT id_carrera, nombre FROM carreras
    WHERE activa = 1 $instCondC ORDER BY nombre ASC
")->fetchAll();

// ── Parámetros GET ────────────────────────────────────────────
$modo        = $_GET['modo']     ?? 'activo';
$filPeriodo  = (int)($_GET['periodo']  ?? 0);
$filCarrera  = (int)($_GET['carrera']  ?? 0);
$filEstado   = $_GET['estado']   ?? '';
$filBusqueda = trim($_GET['busqueda'] ?? '');
$ppRaw       = (int)($_GET['pp'] ?? 25);
$porPagina   = in_array($ppRaw, [25, 50, 100, 200]) ? $ppRaw : 25;
$pagina      = max(1, (int)($_GET['p'] ?? 1));

// ── Condición modo activo/historial ───────────────────────────
// titulaciones → estudiantes.id_periodo_ingreso → periodos_academicos
$instCond = $idInst ? "AND t.id_instituto = $idInst" : '';
$modoCond = $modo === 'activo' ? "AND pa.activo = 1" : "AND pa.activo = 0";

// ── Filtros dinámicos ─────────────────────────────────────────
$params     = [];
$extraConds = '';

if ($filPeriodo > 0) {
    $extraConds .= " AND e.id_periodo_ingreso = :periodo";
    $params[':periodo'] = $filPeriodo;
}
if ($filCarrera > 0) {
    $extraConds .= " AND e.id_carrera = :carrera";
    $params[':carrera'] = $filCarrera;
}
if ($filEstado !== '') {
    $extraConds .= " AND t.estado = :estado";
    $params[':estado'] = $filEstado;
}
if ($filBusqueda !== '') {
    $extraConds .= " AND (u.nombres LIKE :bus OR u.apellidos LIKE :bus2 OR u.email LIKE :bus3)";
    $params[':bus']  = "%$filBusqueda%";
    $params[':bus2'] = "%$filBusqueda%";
    $params[':bus3'] = "%$filBusqueda%";
}

$baseFrom = "
    FROM   titulaciones t
    JOIN   estudiantes          e   ON e.id_estudiante  = t.id_estudiante
    JOIN   usuarios             u   ON u.id_usuario     = e.id_usuario
    JOIN   carreras             c   ON c.id_carrera     = e.id_carrera
    LEFT JOIN periodos_academicos pa ON pa.id_periodo   = e.id_periodo_ingreso
    WHERE  1=1 $instCond $modoCond $extraConds
";

// ── Total paginación ──────────────────────────────────────────
$stTotal = $db->prepare("SELECT COUNT(*) $baseFrom");
$stTotal->execute($params);
$totalRegistros = (int)$stTotal->fetchColumn();
$totalPaginas   = max(1, ceil($totalRegistros / $porPagina));
$pagina         = min($pagina, $totalPaginas);
$offset         = ($pagina - 1) * $porPagina;

// ── Registros página actual ───────────────────────────────────
$stList = $db->prepare("
    SELECT
        t.id_titulacion, t.modalidad, t.estado, t.fecha_envio,
        CONCAT(u.nombres,' ',u.apellidos) AS estudiante_nombre,
        u.email,
        c.nombre  AS carrera,
        COALESCE(pa.nombre,'—') AS periodo
    $baseFrom
    ORDER BY t.fecha_envio DESC
    LIMIT $porPagina OFFSET $offset
");
$stList->execute($params);
$registros = $stList->fetchAll();

// ── KPIs globales — los 4 módulos de pago ────────────────────
$kpiInstCond  = $idInst ? "AND t.id_instituto = $idInst" : '';
$kpiInstCond2 = $idInst ? "AND id_instituto = $idInst" : '';
$kpiInstCondConv = $idInst ? "AND c.id_instituto = $idInst" : '';

// Titulación
$kpis = $db->query("
    SELECT
        COUNT(*)                    AS total,
        SUM(t.estado='enviada')     AS pendientes,
        SUM(t.estado='aprobado')    AS aprobados,
        SUM(t.estado='rechazado')   AS rechazados
    FROM titulaciones t
    JOIN estudiantes e ON e.id_estudiante = t.id_estudiante
    LEFT JOIN periodos_academicos pa ON pa.id_periodo = e.id_periodo_ingreso
    WHERE pa.activo = 1 $kpiInstCond
")->fetch();

// Prácticas
$kpisPract = $db->query("
    SELECT
        COUNT(*)                            AS total,
        SUM(estado_pago='enviada')          AS pendientes,
        SUM(estado_pago='aprobado')         AS aprobados,
        SUM(estado_pago='rechazado')        AS rechazados
    FROM practicas
    WHERE estado_pago != 'pendiente' $kpiInstCond2
")->fetch();

// Convalidación
$kpisConv = $db->query("
    SELECT
        COUNT(*)                            AS total,
        SUM(con.estado_pago='enviada')      AS pendientes,
        SUM(con.estado_pago='aprobado')     AS aprobados,
        SUM(con.estado_pago='rechazado')    AS rechazados
    FROM convalidaciones con
    JOIN practicas c ON c.id_practica = con.id_practica
    WHERE con.estado_pago != 'pendiente' $kpiInstCondConv
")->fetch();

// Vinculación
$kpisVinc = $db->query("
    SELECT
        COUNT(*)                            AS total,
        SUM(estado_pago='enviada')          AS pendientes,
        SUM(estado_pago='aprobado')         AS aprobados,
        SUM(estado_pago='rechazado')        AS rechazados
    FROM grupos_vinculacion
    WHERE estado_pago != 'pendiente' $kpiInstCond2
")->fetch();

// Totales globales para los KPI cards
$kpisGlobal = [
    'total'      => ($kpis['total']??0) + ($kpisPract['total']??0) + ($kpisConv['total']??0) + ($kpisVinc['total']??0),
    'pendientes' => ($kpis['pendientes']??0) + ($kpisPract['pendientes']??0) + ($kpisConv['pendientes']??0) + ($kpisVinc['pendientes']??0),
    'aprobados'  => ($kpis['aprobados']??0) + ($kpisPract['aprobados']??0) + ($kpisConv['aprobados']??0) + ($kpisVinc['aprobados']??0),
    'rechazados' => ($kpis['rechazados']??0) + ($kpisPract['rechazados']??0) + ($kpisConv['rechazados']??0) + ($kpisVinc['rechazados']??0),
];

function pageUrl(int $pag): string {
    $p = $_GET; $p['p'] = $pag;
    return '?' . http_build_query($p);
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<?php include __DIR__ . '/../../includes/head.php'; ?>
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/sidebar-facturacion.css">
<style>
.filter-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px 20px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.filter-card label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#94a3b8;display:block;margin-bottom:4px}
.filter-card select,.filter-card input[type="text"]{font-size:13px;border:1px solid #e2e8f0;border-radius:8px;padding:7px 12px;background:#f8fafc;color:#0f172a;transition:border-color .15s,box-shadow .15s;outline:none;min-width:150px}
.filter-card select:focus,.filter-card input[type="text"]:focus{border-color:#059669;box-shadow:0 0 0 3px rgba(5,150,105,.12);background:#fff}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.btn-filtrar{background:#059669;color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer}
.btn-filtrar:hover{background:#047857}
.btn-limpiar{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.btn-limpiar:hover{background:#e2e8f0}
.mode-tabs{display:flex;background:#f1f5f9;border-radius:10px;padding:4px;width:fit-content;margin-bottom:20px}
.mode-tabs a{padding:8px 22px;border-radius:7px;font-size:13px;font-weight:600;color:#64748b;text-decoration:none;transition:all .15s;display:flex;align-items:center;gap:6px}
.mode-tabs a.active{background:#fff;color:#059669;box-shadow:0 1px 4px rgba(0,0,0,.10)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 4px rgba(0,0,0,.05);transition:box-shadow .15s,transform .15s}
.kpi-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.09);transform:translateY(-2px)}
.kpi-num{font-size:32px;font-weight:900;line-height:1}
.kpi-lbl{font-size:11px;color:#64748b;margin-top:4px;font-weight:600}
.kpi-ico{font-size:28px;opacity:.18}
.tbl-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.tbl-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #f1f5f9;background:#f8fafc;flex-wrap:wrap;gap:10px}
.tbl-title{font-size:13px;font-weight:700;color:#0f172a;display:flex;align-items:center;gap:7px}
.tbl-count{font-size:11px;color:#94a3b8;font-weight:600;margin-top:2px}
.pp-sel{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pp-sel span{font-size:11px;color:#94a3b8;font-weight:600}
.pp-btn{border-radius:6px;padding:3px 10px;font-size:12px;font-weight:700;text-decoration:none;border:1px solid #e2e8f0;color:#475569;background:#f8fafc;transition:all .12s}
.pp-btn:hover,.pp-btn.on{background:#059669;color:#fff;border-color:#059669}
.tbl-inner{overflow-x:auto}
.tbl-inner table{width:100%;border-collapse:collapse}
.tbl-inner thead th{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#94a3b8;padding:10px 16px;background:#f8fafc;font-weight:700;white-space:nowrap;border-bottom:1px solid #f1f5f9}
.tbl-inner tbody tr{border-bottom:1px solid #f8fafc;transition:background .1s}
.tbl-inner tbody tr:hover{background:#f0fdf4}
.tbl-inner tbody td{padding:11px 16px;font-size:13px;color:#1e293b;vertical-align:middle}
.be{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.be-p{background:#f1f5f9;color:#475569}
.be-e{background:#fef3c7;color:#92400e}
.be-a{background:#d1fae5;color:#065f46}
.be-r{background:#fee2e2;color:#991b1b}
.paginacion{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid #f1f5f9;background:#f8fafc;flex-wrap:wrap;gap:10px}
.pag-info{font-size:12px;color:#64748b}
.pag-btns{display:flex;gap:4px;flex-wrap:wrap}
.pag-btns a,.pag-btns span{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;border-radius:7px;font-size:12px;font-weight:600;text-decoration:none;padding:0 8px;transition:background .12s,color .12s}
.pag-btns a{background:#fff;border:1px solid #e2e8f0;color:#475569}
.pag-btns a:hover{background:#059669;color:#fff;border-color:#059669}
.pag-btns .cur{background:#059669;color:#fff;border:1px solid #059669}
.pag-btns .dis{background:#f1f5f9;color:#cbd5e1;border:1px solid #f1f5f9;cursor:not-allowed}
.pag-btns .ell{background:transparent;border:none;color:#94a3b8;cursor:default}
.hcard{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px 24px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.empty-state{text-align:center;padding:3rem 1rem}
.empty-state .esi{font-size:2.5rem;display:block;margin-bottom:.75rem}
.empty-state .est{font-weight:700;color:#0f172a;font-size:15px}
.empty-state .ess{font-size:13px;color:#64748b;margin-top:4px}
</style>
</head>
<body>
<?php include __DIR__ . '/../../includes/navbar.php'; ?>
<div class="app-shell">

  <!-- SIDEBAR -->
  <?php $sbActivo = 'dashboard'; include __DIR__ . '/../../includes/sidebar_facturacion.php'; ?>

  <!-- MAIN -->
  <main class="main-area">
    <?= flashHtml() ?>

    <!-- ENCABEZADO -->
    <div class="hcard">
      <div style="flex-shrink:0;">
        <?php if (!empty($logoUrlFac)): ?>
          <img src="<?= htmlspecialchars($logoUrlFac) ?>" alt="Logo"
               style="height:68px;width:68px;object-fit:contain;border-radius:10px;
                      border:1px solid #e2e8f0;padding:4px;background:#f8fafc;">
        <?php else: ?>
          <div style="height:68px;width:68px;background:#1a3a6b;border-radius:10px;
                      display:flex;align-items:center;justify-content:center;font-size:28px;">🏫</div>
        <?php endif; ?>
      </div>
      <div style="flex:1;text-align:center;padding:0 20px;">
        <div style="font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#94a3b8;margin-bottom:3px;">Panel de Facturación</div>
        <div style="font-size:18px;font-weight:900;color:#0f172a;"><?= htmlspecialchars($nombreFac) ?></div>
        <div style="font-size:12px;color:#64748b;margin-top:3px;"><?= htmlspecialchars($user['nombre'] ?? '') ?></div>
      </div>
      <div style="flex-shrink:0;text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 20px;min-width:130px;">
        <div style="font-size:22px;font-weight:800;color:#0f172a;line-height:1;" id="fac-hora"><?= date('H:i:s') ?></div>
        <div style="font-size:11px;color:#94a3b8;margin-top:4px;font-weight:600;" id="fac-fecha"><?= date('d/m/Y') ?></div>
        <div style="font-size:10px;color:#cbd5e1;margin-top:2px;" id="fac-dia"><?= ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'][date('w')] ?></div>
      </div>
    </div>

    <!-- KPIs -->
    <div class="kpi-grid">
      <div class="kpi-card">
        <div><div class="kpi-num" style="color:#2563eb;"><?= $kpisGlobal['total'] ?></div><div class="kpi-lbl">Total solicitudes</div></div>
        <i class="fa fa-inbox kpi-ico" style="color:#2563eb;"></i>
      </div>
      <div class="kpi-card">
        <div><div class="kpi-num" style="color:#d97706;"><?= $kpisGlobal['pendientes'] ?></div><div class="kpi-lbl">Pendientes de validar</div></div>
        <i class="fa fa-hourglass-half kpi-ico" style="color:#d97706;"></i>
      </div>
      <div class="kpi-card">
        <div><div class="kpi-num" style="color:#059669;"><?= $kpisGlobal['aprobados'] ?></div><div class="kpi-lbl">Pagos validados</div></div>
        <i class="fa fa-circle-check kpi-ico" style="color:#059669;"></i>
      </div>
      <div class="kpi-card">
        <div><div class="kpi-num" style="color:#dc2626;"><?= $kpisGlobal['rechazados'] ?></div><div class="kpi-lbl">Rechazados</div></div>
        <i class="fa fa-circle-xmark kpi-ico" style="color:#dc2626;"></i>
      </div>
    </div>

    <!-- ── Accesos rápidos a los 4 módulos de pago ── -->
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;">

      <!-- Titulación -->
      <a href="pagos_titulacion.php" style="text-decoration:none;">
        <div style="background:#fff;border:1px solid #e2e8f0;border-left:4px solid #8b5cf6;border-radius:14px;padding:16px 18px;box-shadow:0 1px 4px rgba(0,0,0,.05);transition:all .15s;display:flex;align-items:center;justify-content:space-between;gap:10px;">
          <div>
            <div style="font-size:11px;font-weight:700;color:#7c3aed;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;">Titulación</div>
            <div style="font-size:22px;font-weight:800;color:#0f172a;"><?= $kpis['pendientes']??0 ?></div>
            <div style="font-size:11px;color:#94a3b8;margin-top:2px;">pendientes</div>
          </div>
          <i class="fa fa-graduation-cap" style="font-size:26px;color:#8b5cf633;"></i>
        </div>
      </a>

      <!-- Prácticas -->
      <a href="pagos_practicas.php" style="text-decoration:none;">
        <div style="background:#fff;border:1px solid #e2e8f0;border-left:4px solid #2563eb;border-radius:14px;padding:16px 18px;box-shadow:0 1px 4px rgba(0,0,0,.05);transition:all .15s;display:flex;align-items:center;justify-content:space-between;gap:10px;">
          <div>
            <div style="font-size:11px;font-weight:700;color:#1d4ed8;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;">Prácticas PPP</div>
            <div style="font-size:22px;font-weight:800;color:#0f172a;"><?= $kpisPract['pendientes']??0 ?></div>
            <div style="font-size:11px;color:#94a3b8;margin-top:2px;">pendientes</div>
          </div>
          <i class="fa fa-briefcase" style="font-size:26px;color:#2563eb33;"></i>
        </div>
      </a>

      <!-- Convalidación -->
      <a href="pagos_convalidacion.php" style="text-decoration:none;">
        <div style="background:#fff;border:1px solid #e2e8f0;border-left:4px solid #f97316;border-radius:14px;padding:16px 18px;box-shadow:0 1px 4px rgba(0,0,0,.05);transition:all .15s;display:flex;align-items:center;justify-content:space-between;gap:10px;">
          <div>
            <div style="font-size:11px;font-weight:700;color:#ea580c;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;">Convalidación</div>
            <div style="font-size:22px;font-weight:800;color:#0f172a;"><?= $kpisConv['pendientes']??0 ?></div>
            <div style="font-size:11px;color:#94a3b8;margin-top:2px;">pendientes</div>
          </div>
          <i class="fa fa-rotate" style="font-size:26px;color:#f9731633;"></i>
        </div>
      </a>

      <!-- Vinculación -->
      <a href="pagos_vinculacion.php" style="text-decoration:none;">
        <div style="background:#fff;border:1px solid #e2e8f0;border-left:4px solid #059669;border-radius:14px;padding:16px 18px;box-shadow:0 1px 4px rgba(0,0,0,.05);transition:all .15s;display:flex;align-items:center;justify-content:space-between;gap:10px;">
          <div>
            <div style="font-size:11px;font-weight:700;color:#047857;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;">Vinculación</div>
            <div style="font-size:22px;font-weight:800;color:#0f172a;"><?= $kpisVinc['pendientes']??0 ?></div>
            <div style="font-size:11px;color:#94a3b8;margin-top:2px;">pendientes</div>
          </div>
          <i class="fa fa-people-group" style="font-size:26px;color:#05966933;"></i>
        </div>
      </a>

    </div>

    <!-- TABS -->
    <div class="mode-tabs">
      <a href="?<?= http_build_query(['modo'=>'activo','pp'=>$porPagina,'p'=>1]) ?>"
         class="<?= $modo==='activo'?'active':'' ?>">
        <i class="fa fa-circle-check"></i> Períodos Activos
        <?php if(count($periodosActivos)): ?>
          <span style="background:#059669;color:#fff;border-radius:20px;font-size:10px;padding:1px 7px;font-weight:700;"><?= count($periodosActivos) ?></span>
        <?php endif; ?>
      </a>
      <a href="?<?= http_build_query(['modo'=>'historial','pp'=>$porPagina,'p'=>1]) ?>"
         class="<?= $modo==='historial'?'active':'' ?>">
        <i class="fa fa-clock-rotate-left"></i> Historial
        <?php if(count($periodosHistorial)): ?>
          <span style="background:#64748b;color:#fff;border-radius:20px;font-size:10px;padding:1px 7px;font-weight:700;"><?= count($periodosHistorial) ?></span>
        <?php endif; ?>
      </a>
    </div>

    <!-- FILTROS -->
    <div class="filter-card">
      <form method="GET" action="">
        <input type="hidden" name="modo" value="<?= htmlspecialchars($modo) ?>">
        <input type="hidden" name="pp"   value="<?= $porPagina ?>">
        <div class="filter-row">
          <div style="flex:1;min-width:180px;">
            <label><i class="fa fa-magnifying-glass me-1"></i>Buscar estudiante</label>
            <input type="text" name="busqueda" value="<?= htmlspecialchars($filBusqueda) ?>"
                   placeholder="Nombre, apellido o correo…" style="width:100%;">
          </div>
          <div>
            <label><i class="fa fa-calendar-days me-1"></i>Período académico</label>
            <select name="periodo">
              <option value="">— Todos —</option>
              <?php $listaPer = $modo==='activo' ? $periodosActivos : $periodosHistorial;
              foreach($listaPer as $per): ?>
                <option value="<?= $per['id_periodo'] ?>" <?= $filPeriodo==$per['id_periodo']?'selected':'' ?>>
                  <?= htmlspecialchars($per['nombre']) ?>
                  (<?= date('d/m/Y',strtotime($per['fecha_inicio'])) ?>–<?= date('d/m/Y',strtotime($per['fecha_fin'])) ?>)
                  <?= $per['activo'] ? '🟢' : '🔴' ?>
                </option>
              <?php endforeach; ?>
            </select>
          </div>
          <div>
            <label><i class="fa fa-graduation-cap me-1"></i>Carrera</label>
            <select name="carrera">
              <option value="">— Todas —</option>
              <?php foreach($carreras as $car): ?>
                <option value="<?= $car['id_carrera'] ?>" <?= $filCarrera==$car['id_carrera']?'selected':'' ?>>
                  <?= htmlspecialchars($car['nombre']) ?>
                </option>
              <?php endforeach; ?>
            </select>
          </div>
          <div>
            <label><i class="fa fa-filter me-1"></i>Estado</label>
            <select name="estado">
              <option value="">— Todos —</option>
              <option value="pendiente"  <?= $filEstado==='pendiente' ?'selected':'' ?>>⬜ Sin enviar</option>
              <option value="enviada"    <?= $filEstado==='enviada'   ?'selected':'' ?>>⏳ Pend. validar</option>
              <option value="aprobado"   <?= $filEstado==='aprobado'  ?'selected':'' ?>>✅ Aprobado</option>
              <option value="rechazado"  <?= $filEstado==='rechazado' ?'selected':'' ?>>❌ Rechazado</option>
            </select>
          </div>
          <div style="display:flex;gap:8px;align-items:flex-end;">
            <button type="submit" class="btn-filtrar"><i class="fa fa-search me-1"></i>Filtrar</button>
            <a href="?modo=<?= $modo ?>&pp=<?= $porPagina ?>" class="btn-limpiar"><i class="fa fa-xmark"></i>Limpiar</a>
          </div>
        </div>
      </form>
    </div>

    <!-- TABLA -->
    <div class="tbl-card">
      <div class="tbl-header">
        <div>
          <div class="tbl-title">
            <i class="fa fa-<?= $modo==='activo'?'file-invoice-dollar':'clock-rotate-left' ?>"
               style="color:<?= $modo==='activo'?'#059669':'#64748b' ?>;"></i>
            <?= $modo==='activo' ? 'Solicitudes — Períodos Activos' : 'Historial de Solicitudes' ?>
          </div>
          <div class="tbl-count">
            <?php if($totalRegistros>0): ?>
              Mostrando <?= $offset+1 ?>–<?= min($offset+$porPagina,$totalRegistros) ?> de <strong><?= number_format($totalRegistros) ?></strong> registros
            <?php else: ?>Sin resultados<?php endif; ?>
          </div>
        </div>
        <div class="pp-sel">
          <span>Mostrar:</span>
          <?php foreach([25,50,100,200] as $pp):
            $ppP = $_GET; $ppP['pp']=$pp; $ppP['p']=1; ?>
            <a href="?<?= http_build_query($ppP) ?>" class="pp-btn <?= $porPagina===$pp?'on':'' ?>"><?= $pp ?></a>
          <?php endforeach; ?>
          <span>por página</span>
        </div>
      </div>

      <?php if(!empty($registros)): ?>
      <div class="tbl-inner">
        <table>
          <thead>
            <tr>
              <th>#</th>
              <th>Estudiante</th>
              <th>Carrera</th>
              <th>Período</th>
              <th>Modalidad</th>
              <th>Estado</th>
              <th>Fecha envío</th>
              <th style="text-align:center;">Acción</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach($registros as $i=>$r): ?>
            <tr>
              <td style="color:#94a3b8;font-size:11px;font-weight:600;"><?= $offset+$i+1 ?></td>
              <td>
                <div style="font-weight:700;color:#0f172a;"><?= htmlspecialchars($r['estudiante_nombre']) ?></div>
                <div style="font-size:11px;color:#64748b;"><?= htmlspecialchars($r['email']) ?></div>
              </td>
              <td>
                <div style="font-size:12px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
                     title="<?= htmlspecialchars($r['carrera']) ?>">
                  <?= htmlspecialchars($r['carrera']) ?>
                </div>
              </td>
              <td><span style="font-size:12px;font-weight:600;white-space:nowrap;"><?= htmlspecialchars($r['periodo']) ?></span></td>
              <td>
                <?php if($r['modalidad']==='examen_complexivo'): ?>
                  <span style="font-size:12px;color:#2563eb;white-space:nowrap;"><i class="fa fa-file-pen me-1"></i>Examen Complexivo</span>
                <?php elseif($r['modalidad']==='trabajo_investigacion'): ?>
                  <span style="font-size:12px;color:#059669;white-space:nowrap;"><i class="fa fa-microscope me-1"></i>T. Investigación</span>
                <?php else: ?>
                  <span style="font-size:12px;color:#94a3b8;">—</span>
                <?php endif; ?>
              </td>
              <td>
                <?php
                  $bMap = [
                    'pendiente' =>['be be-p','⬜','Sin enviar'],
                    'enviada'   =>['be be-e','⏳','Pendiente'],
                    'aprobado'  =>['be be-a','✅','Aprobado'],
                    'rechazado' =>['be be-r','❌','Rechazado'],
                  ];
                  [$bc,$bi,$bl] = $bMap[$r['estado']] ?? ['be be-p','❓','—'];
                ?>
                <span class="<?= $bc ?>"><?= $bi ?> <?= $bl ?></span>
              </td>
              <td style="font-size:12px;color:#64748b;white-space:nowrap;">
                <?= $r['fecha_envio'] ? date('d/m/Y H:i',strtotime($r['fecha_envio'])) : '—' ?>
              </td>
              <td style="text-align:center;">
                <?php if($r['estado']==='pendiente'): ?>
                  <span style="font-size:11px;color:#94a3b8;font-style:italic;">Sin comprobante</span>
                <?php else: ?>
                  <a href="pagos_titulacion.php?id=<?= $r['id_titulacion'] ?>"
                     class="btn btn-sm btn-primary"
                     style="font-size:12px;padding:5px 12px;border-radius:7px;white-space:nowrap;">
                    <i class="fa fa-<?= $r['estado']==='enviada'?'eye':'magnifying-glass' ?> me-1"></i>
                    <?= $r['estado']==='enviada'?'Revisar':'Ver' ?>
                  </a>
                <?php endif; ?>
              </td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>

      <!-- PAGINACIÓN -->
      <?php if($totalPaginas>1): ?>
      <div class="paginacion">
        <div class="pag-info">
          Página <strong><?= $pagina ?></strong> de <strong><?= $totalPaginas ?></strong>
          &nbsp;·&nbsp; <?= number_format($totalRegistros) ?> registros en total
        </div>
        <div class="pag-btns">
          <?php if($pagina>1): ?>
            <a href="<?= pageUrl(1) ?>" title="Primera"><i class="fa fa-angles-left"></i></a>
            <a href="<?= pageUrl($pagina-1) ?>" title="Anterior"><i class="fa fa-angle-left"></i></a>
          <?php else: ?>
            <span class="dis"><i class="fa fa-angles-left"></i></span>
            <span class="dis"><i class="fa fa-angle-left"></i></span>
          <?php endif; ?>
          <?php
            $ini=max(1,$pagina-2); $fin=min($totalPaginas,$pagina+2);
            if($ini>1) echo '<span class="ell">…</span>';
            for($pg=$ini;$pg<=$fin;$pg++):
          ?>
            <?php if($pg===$pagina): ?>
              <span class="cur"><?= $pg ?></span>
            <?php else: ?>
              <a href="<?= pageUrl($pg) ?>"><?= $pg ?></a>
            <?php endif; ?>
          <?php endfor; ?>
          <?php if($fin<$totalPaginas) echo '<span class="ell">…</span>'; ?>
          <?php if($pagina<$totalPaginas): ?>
            <a href="<?= pageUrl($pagina+1) ?>" title="Siguiente"><i class="fa fa-angle-right"></i></a>
            <a href="<?= pageUrl($totalPaginas) ?>" title="Última"><i class="fa fa-angles-right"></i></a>
          <?php else: ?>
            <span class="dis"><i class="fa fa-angle-right"></i></span>
            <span class="dis"><i class="fa fa-angles-right"></i></span>
          <?php endif; ?>
        </div>
      </div>
      <?php endif; ?>

      <?php else: ?>
      <div class="empty-state">
        <?php if($modo==='activo' && !$filPeriodo && !$filCarrera && !$filEstado && !$filBusqueda): ?>
          <span class="esi">🎉</span>
          <div class="est">¡Sin solicitudes pendientes!</div>
          <div class="ess">Todas las solicitudes de períodos activos han sido procesadas.</div>
        <?php else: ?>
          <span class="esi">🔍</span>
          <div class="est">Sin resultados</div>
          <div class="ess">No se encontraron solicitudes con los filtros aplicados.</div>
          <a href="?modo=<?= $modo ?>&pp=<?= $porPagina ?>" class="btn btn-outline-secondary btn-sm mt-3">
            <i class="fa fa-xmark me-1"></i>Limpiar filtros
          </a>
        <?php endif; ?>
      </div>
      <?php endif; ?>
    </div>

  </main>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<script>var BASE_URL = '<?= BASE_URL ?>';</script>
<script src="<?= BASE_URL ?>/assets/js/sigvp.js"></script>
<script>
(function(){
  var dias=['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'];
  function tick(){
    var n=new Date(),h=String(n.getHours()).padStart(2,'0'),
        m=String(n.getMinutes()).padStart(2,'0'),s=String(n.getSeconds()).padStart(2,'0'),
        d=String(n.getDate()).padStart(2,'0'),mo=String(n.getMonth()+1).padStart(2,'0');
    document.getElementById('fac-hora').textContent=h+':'+m+':'+s;
    document.getElementById('fac-fecha').textContent=d+'/'+mo+'/'+n.getFullYear();
    document.getElementById('fac-dia').textContent=dias[n.getDay()];
  }
  setInterval(tick,1000);tick();
})();
</script>
</body>
</html>