<?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_ADMIN);

$user      = currentUser();
$db        = getDB();
$pageTitle = 'Períodos Académicos';
$idInstituto = (int)($user['id_instituto'] ?? 0);

// ── CREAR / EDITAR ──────────────────────────────────────────
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $id     = (int)($_POST['id_periodo'] ?? 0);
    $nombre = strtoupper(trim($_POST['nombre'] ?? ''));
    $fi     = $_POST['fecha_inicio'] ?? '';
    $ff     = $_POST['fecha_fin']    ?? '';
    $activo = isset($_POST['activo']) ? 1 : 0;

    // Validaciones
    if (!$nombre || !$fi || !$ff) {
        flashSet('err', 'Nombre, fecha de inicio y fecha de fin son obligatorios.');
        header('Location: periodos.php'); exit;
    }
    if ($fi >= $ff) {
        flashSet('err', 'La fecha de inicio debe ser anterior a la fecha de fin.');
        header('Location: periodos.php'); exit;
    }

    // Verificar nombre único dentro del instituto
    $dupSql = "SELECT id_periodo FROM periodos_academicos WHERE nombre=:n AND id_periodo<>:id";
    $dupParams = [':n' => $nombre, ':id' => $id];
    if ($idInstituto) { $dupSql .= " AND id_instituto=:inst"; $dupParams[':inst'] = $idInstituto; }
    $dup = $db->prepare($dupSql);
    $dup->execute($dupParams);
    if ($dup->fetch()) {
        flashSet('err', 'Ya existe un período con el nombre "' . $nombre . '".');
        header('Location: periodos.php'); exit;
    }

    if ($activo) {
        // Solo puede haber UN período activo por instituto
        $deactiveSql = "UPDATE periodos_academicos SET activo=0" . ($idInstituto ? " WHERE id_instituto=:inst" : "");
        $deactiveParams = $idInstituto ? [':inst' => $idInstituto] : [];
        if ($id) {
            $deactiveSql .= $idInstituto ? " AND id_periodo<>:id" : " WHERE id_periodo<>:id";
            $deactiveParams[':id'] = $id;
        }
        $db->prepare($deactiveSql)->execute($deactiveParams);
    }

    if ($id) {
        $db->prepare("UPDATE periodos_academicos SET nombre=:n, fecha_inicio=:fi, fecha_fin=:ff, activo=:a WHERE id_periodo=:id")
           ->execute([':n'=>$nombre,':fi'=>$fi,':ff'=>$ff,':a'=>$activo,':id'=>$id]);
        flashSet('ok', 'Período "' . $nombre . '" actualizado.');
        registrarAudit($user['id'], 'editar_periodo', 'periodos_academicos', $id);
    } else {
        $db->prepare("INSERT INTO periodos_academicos (nombre, fecha_inicio, fecha_fin, activo, id_instituto) VALUES(:n,:fi,:ff,:a,:inst)")
           ->execute([':n'=>$nombre,':fi'=>$fi,':ff'=>$ff,':a'=>$activo,':inst'=>$idInstituto?:null]);
        flashSet('ok', 'Período "' . $nombre . '" creado correctamente.');
        registrarAudit($user['id'], 'crear_periodo', 'periodos_academicos');
    }
    header('Location: periodos.php'); exit;
}

// ── ACTIVAR PERÍODO ─────────────────────────────────────────
if (isset($_GET['activar']) && is_numeric($_GET['activar'])) {
    $pid = (int)$_GET['activar'];
    $deactiveSql = "UPDATE periodos_academicos SET activo=0" . ($idInstituto ? " WHERE id_instituto=:inst" : "");
    $db->prepare($deactiveSql)->execute($idInstituto ? [':inst'=>$idInstituto] : []);
    $db->prepare("UPDATE periodos_academicos SET activo=1 WHERE id_periodo=:id")->execute([':id'=>$pid]);
    $per = $db->prepare("SELECT nombre FROM periodos_academicos WHERE id_periodo=:id");
    $per->execute([':id'=>$pid]); $per = $per->fetch();
    flashSet('ok', 'Período "' . ($per['nombre'] ?? '') . '" activado. Los demás períodos fueron desactivados.');
    registrarAudit($user['id'], 'activar_periodo', 'periodos_academicos', $pid);
    header('Location: periodos.php'); exit;
}

// ── CARGAR PERÍODOS CON ESTADÍSTICAS ───────────────────────
$wherePer = $idInstituto ? "WHERE p.id_instituto = $idInstituto" : "";
$periodos = $db->query("
    SELECT p.*,
           COUNT(DISTINCT pr.id_practica)             AS total_practicas,
           SUM(pr.estado = 'completado')               AS completadas,
           SUM(pr.estado = 'en_progreso')              AS en_progreso,
           SUM(pr.estado = 'postulado')                AS postuladas,
           ROUND(AVG(pr.horas_cumplidas), 1)           AS prom_horas,
           COUNT(DISTINCT est.id_carrera)              AS carreras_activas,
           COUNT(DISTINCT pr.id_empresa)               AS empresas_activas
    FROM periodos_academicos p
    LEFT JOIN practicas pr   ON pr.id_periodo    = p.id_periodo
    LEFT JOIN estudiantes est ON est.id_estudiante = pr.id_estudiante
    $wherePer
    GROUP BY p.id_periodo
    ORDER BY p.fecha_inicio DESC
")->fetchAll();

// Período a editar
$editar = null;
if (isset($_GET['editar']) && is_numeric($_GET['editar'])) {
    $stE = $db->prepare("SELECT * FROM periodos_academicos WHERE id_periodo=:id");
    $stE->execute([':id' => (int)$_GET['editar']]);
    $editar = $stE->fetch();
}

// ── Calcular estado de cada período ─────────────────────────
$hoy = date('Y-m-d');
function estadoPeriodo(array $p, string $hoy): array {
    if ($p['activo'])               return ['label'=>'Activo',    'color'=>'#10b981', 'st'=>'activo'];
    if ($p['fecha_fin'] < $hoy)     return ['label'=>'Finalizado','color'=>'#64748b', 'st'=>'fin'];
    if ($p['fecha_inicio'] > $hoy)  return ['label'=>'Futuro',    'color'=>'#8b5cf6', 'st'=>'futuro'];
    return                                 ['label'=>'Inactivo',  'color'=>'#f59e0b', 'st'=>'inact'];
}

// Generar nombre automático sugerido
$ultimoPer = $periodos[0] ?? null;
$sugerido  = '';
if ($ultimoPer) {
    preg_match('/^(\d{4})-([AB])$/', $ultimoPer['nombre'], $m);
    if ($m) {
        $sugerido = $m[2] === 'A' ? $m[1].'-B' : (((int)$m[1]+1).'-A');
    }
}
?>
<!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-admin.css">
<style>
/* ═══════════════════════════════════════════
   Períodos Académicos — 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 12px rgba(0,0,0,.07);
  --radius:     12px;
  --radius-sm:  8px;

  /* colores de estado — mismos que dashboard */
  --col-activo:  #10b981;
  --col-fin:     #64748b;
  --col-futuro:  #8b5cf6;
  --col-inact:   #f59e0b;
}

html, body { height:100%; margin:0; padding:0; overflow-x:hidden; }

.main-area {
  background: var(--bg-page);
  min-height: 100vh;
  padding: 24px 28px 32px;
}

/* Cabecera */
.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; }

/* ── Alerta período activo ── */
.alert-activo {
  background: rgba(16,185,129,.07);
  border: 1px solid rgba(16,185,129,.25);
  border-radius: var(--radius);
  padding: 12px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.alert-activo strong { color: #059669; }
.alert-activo .meta  { color: var(--text-sub); margin-left: 8px; }
.alert-activo .right { margin-left:auto; font-size:12px; color: var(--text-sub); }

.alert-warning {
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: var(--radius);
  padding: 12px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #b45309;
}

/* ── Sección label ── */
.sec-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 12px;
}

/* ── Línea de tiempo ── */
.timeline-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 24px;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}

/* ── Cards de período ── */
.per-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  height: 100%;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s;
}
.per-card:hover { box-shadow: var(--shadow-md); }

.per-card-badge {
  position: absolute;
  top: -1px;
  right: 16px;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 0 0 6px 6px;
  letter-spacing: .5px;
}

.per-card-nombre  { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.per-card-fechas  { font-size: 11px; color: var(--text-sub); margin-top: 2px; }
.per-card-dias    { font-size: 10px; color: var(--text-light); margin-top: 2px; }

/* pill de estado */
.per-status {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid;
}

/* Barra de progreso */
.prog-bar-wrap { margin-bottom: 14px; }
.prog-bar-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-sub);
  margin-bottom: 4px;
}
.prog-track { background: #e9eef5; border-radius: 4px; }
.prog-fill  { border-radius: 4px; }

/* Stats 2x2 */
.stat-box {
  background: var(--bg-inner);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
}
.stat-box-n { font-size: 18px; font-weight: 700; line-height: 1; }
.stat-box-l { font-size: 9px; color: var(--text-sub); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }

/* Acciones footer card */
.per-card-footer {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

/* Botón "nuevo período" dashed */
.btn-nuevo-dashed {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: transparent;
  border: 2px dashed var(--border-med);
  border-radius: var(--radius);
  color: var(--text-light);
  cursor: pointer;
  transition: border-color .2s, color .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
}
.btn-nuevo-dashed:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

/* ── 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 {
  background: var(--bg-card);
  border: 1px solid var(--border-med);
  color: var(--text-main);
  border-radius: var(--radius-sm);
}
.form-control:focus {
  background: var(--bg-card);
  border-color: #3b82f6;
  color: var(--text-main);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.form-check-label { color: var(--text-main); }

/* Info de duración calculada */
.dur-info {
  font-size: 12px;
  color: var(--text-sub);
  background: var(--bg-inner);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: none;
}

/* Punto obligatorio en formulario */
.req { color: #ef4444; }
.form-hint { color: var(--text-light); font-weight: 400; }
</style>
</head>
<body>
<?php include __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'navbar.php'; ?>
<div class="app-shell">
  <?php $sbActivo = 'periodos'; include __DIR__ . '/../../includes/sidebar_admin.php'; ?>

  <main class="main-area">
    <div class="page-header d-flex justify-content-between align-items-start flex-wrap gap-2">
      <div>
        <h4>Períodos Académicos</h4>
        <p>Gestión de períodos para control de prácticas preprofesionales</p>
      </div>
      <button class="btn btn-primary btn-sm" id="btnNuevo">
        <i class="fa fa-plus me-1"></i>Nuevo período
      </button>
    </div>

    <?= flashHtml() ?>

    <!-- Alerta período activo -->
    <?php $activo = array_filter($periodos, fn($p) => $p['activo']); $activo = reset($activo); ?>
    <?php if ($activo): ?>
    <div class="alert-activo">
      <span style="font-size:20px;">📅</span>
      <div>
        <strong>Período activo: <?= htmlspecialchars($activo['nombre']) ?></strong>
        <span class="meta"><?= formatFecha($activo['fecha_inicio']) ?> — <?= formatFecha($activo['fecha_fin']) ?></span>
      </div>
      <div class="right"><?= $activo['total_practicas'] ?> prácticas · <?= $activo['en_progreso'] ?> en curso</div>
    </div>
    <?php else: ?>
    <div class="alert-warning">
      <span style="font-size:18px;">⚠️</span>
      <span>No hay ningún período activo. Los estudiantes no podrán postular prácticas.</span>
    </div>
    <?php endif; ?>

    <!-- Línea de tiempo -->
    <?php if (!empty($periodos)): ?>
    <div class="sec-label">Línea de tiempo de períodos</div>
    <div class="timeline-wrap">
      <div style="display:flex;gap:0;min-width:<?= max(500, count($periodos)*120) ?>px;">
        <?php
        $total = count($periodos);
        foreach (array_reverse($periodos) as $i => $p):
            $ep    = estadoPeriodo($p, $hoy);
            $pct   = $p['total_practicas'] > 0 ? round($p['completadas']/$p['total_practicas']*100) : 0;
            $isLast= $i === $total - 1;
        ?>
        <div style="flex:1;min-width:100px;position:relative;padding-bottom:20px;">
          <!-- Línea horizontal -->
          <div style="position:absolute;top:14px;left:50%;right:<?= $isLast?'50%':'-1px' ?>;
                      height:2px;background:<?= $ep['color'] ?>44;z-index:0;"></div>
          <!-- Punto -->
          <div style="position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;">
            <div style="width:28px;height:28px;border-radius:50%;
                        background:<?= $ep['color'] ?>22;border:2px solid <?= $ep['color'] ?>;
                        display:flex;align-items:center;justify-content:center;font-size:12px;">
              <?= $ep['st']==='activo'?'●':($ep['st']==='fin'?'✓':($ep['st']==='futuro'?'◇':'○')) ?>
            </div>
            <div style="text-align:center;">
              <div style="font-size:12px;font-weight:700;color:<?= $ep['color'] ?>;"><?= htmlspecialchars($p['nombre']) ?></div>
              <div style="font-size:9px;color:#8b949e;margin-top:2px;"><?= formatFecha($p['fecha_inicio'],'Y') ?></div>
              <div style="font-size:10px;color:#8b949e;"><?= $p['total_practicas'] ?> pr.</div>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
    <?php endif; ?>

    <!-- Cards de períodos -->
    <div class="sec-label">Todos los períodos</div>

    <div class="row g-3">
      <?php foreach ($periodos as $p):
        $ep   = estadoPeriodo($p, $hoy);
        $pct  = $p['total_practicas'] > 0 ? round($p['completadas']/$p['total_practicas']*100) : 0;
        $dias = (new DateTime($p['fecha_inicio']))->diff(new DateTime($p['fecha_fin']))->days;
        // Progreso del período en el tiempo
        if ($hoy >= $p['fecha_inicio'] && $hoy <= $p['fecha_fin']) {
            $transcurridos = (new DateTime($p['fecha_inicio']))->diff(new DateTime($hoy))->days;
            $pctTiempo = min(100, round($transcurridos / $dias * 100));
        } elseif ($hoy > $p['fecha_fin']) { $pctTiempo = 100; }
        else { $pctTiempo = 0; }
      ?>
      <div class="col-md-6 col-lg-4">
        <div class="per-card" style="border-color:<?= $p['activo'] ? $ep['color'] : 'var(--border)' ?>;">

          <?php if ($p['activo']): ?>
          <div class="per-card-badge" style="background:<?= $ep['color'] ?>;color:#fff;">ACTIVO</div>
          <?php endif; ?>

          <!-- Nombre y estado -->
          <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;">
            <div>
              <div class="per-card-nombre" style="color:<?= $ep['color'] ?>;"><?= htmlspecialchars($p['nombre']) ?></div>
              <div class="per-card-fechas"><?= formatFecha($p['fecha_inicio']) ?> &nbsp;→&nbsp; <?= formatFecha($p['fecha_fin']) ?></div>
              <div class="per-card-dias"><?= $dias ?> días de duración</div>
            </div>
            <span class="per-status" style="background:<?= $ep['color'] ?>15;color:<?= $ep['color'] ?>;border-color:<?= $ep['color'] ?>40;">
              <?= $ep['label'] ?>
            </span>
          </div>

          <!-- Progreso temporal -->
          <div class="prog-bar-wrap">
            <div class="prog-bar-head">
              <span>Progreso del período</span>
              <span><?= $pctTiempo ?>%</span>
            </div>
            <div class="prog-track" style="height:5px;">
              <div class="prog-fill" style="width:<?= $pctTiempo ?>%;height:5px;background:<?= $ep['color'] ?>;opacity:.8;"></div>
            </div>
          </div>

          <!-- Stats en grid 2x2 -->
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;">
            <div class="stat-box">
              <div class="stat-box-n" style="color:#3b82f6;"><?= $p['total_practicas'] ?></div>
              <div class="stat-box-l">Prácticas</div>
            </div>
            <div class="stat-box">
              <div class="stat-box-n" style="color:#f59e0b;"><?= $p['en_progreso'] ?></div>
              <div class="stat-box-l">En curso</div>
            </div>
            <div class="stat-box">
              <div class="stat-box-n" style="color:#10b981;"><?= $p['completadas'] ?></div>
              <div class="stat-box-l">Completadas</div>
            </div>
            <div class="stat-box">
              <div class="stat-box-n" style="color:#8b5cf6;"><?= $p['empresas_activas'] ?></div>
              <div class="stat-box-l">Empresas</div>
            </div>
          </div>

          <!-- Tasa de completitud -->
          <?php if ($p['total_practicas'] > 0): ?>
          <div class="prog-bar-wrap">
            <div class="prog-bar-head">
              <span>Tasa de completitud</span>
              <?php $colorPct = $pct>=80?'#10b981':($pct>=50?'#f59e0b':'#ef4444'); ?>
              <span style="color:<?= $colorPct ?>;font-weight:700;"><?= $pct ?>%</span>
            </div>
            <div class="prog-track" style="height:6px;">
              <div class="prog-fill" style="width:<?= $pct ?>%;height:6px;background:<?= $colorPct ?>;"></div>
            </div>
          </div>
          <?php endif; ?>

          <!-- Acciones -->
          <div class="per-card-footer">
            <?php if (!$p['activo']): ?>
            <a href="?activar=<?= $p['id_periodo'] ?>"
               class="btn btn-sm btn-success flex-fill"
               data-confirm="¿Activar el período «<?= htmlspecialchars($p['nombre']) ?>»? El período activo actual será desactivado.">
              <i class="fa fa-play me-1"></i>Activar
            </a>
            <?php else: ?>
            <button class="btn btn-sm flex-fill"
                    style="background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#059669;cursor:default;">
              <i class="fa fa-circle-check me-1"></i>Período activo
            </button>
            <?php endif; ?>
            <a href="?editar=<?= $p['id_periodo'] ?>"
               class="btn btn-sm btn-outline-secondary" title="Editar">
              <i class="fa fa-pen-to-square"></i>
            </a>
          </div>

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

      <!-- Card para crear nuevo -->
      <div class="col-md-6 col-lg-4">
        <button id="btnNuevo2" class="btn-nuevo-dashed">
          <span style="font-size:32px;opacity:.4;">+</span>
          <span>Nuevo período</span>
        </button>
      </div>
    </div>

  </main>
</div>

<!-- ── MODAL CREAR / EDITAR ── -->
<div class="modal fade" id="modalPeriodo" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="m-titulo">Nuevo período académico</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" id="formPeriodo">
        <input type="hidden" name="id_periodo" id="f-id" value="0">
        <div class="modal-body">

          <!-- Nombre -->
          <div class="mb-3">
            <label class="form-label">
              Nombre del período <span class="req">*</span>
              <small class="form-hint">(formato recomendado: 2026-A, 2026-B)</small>
            </label>
            <input type="text" name="nombre" id="f-nom" class="form-control"
                   required maxlength="30"
                   placeholder="ej: 2026-A"
                   style="font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:16px;">
            <!-- Sugerencias rápidas -->
            <?php if ($sugerido): ?>
            <div style="margin-top:6px;">
              <span style="font-size:11px;color:#8b949e;">Sugerido:</span>
              <button type="button" class="btn btn-sm btn-outline-secondary ms-2"
                      style="font-size:11px;padding:1px 10px;font-family:'JetBrains Mono',monospace;"
                      onclick="$('#f-nom').val('<?= $sugerido ?>');">
                <?= $sugerido ?>
              </button>
            </div>
            <?php endif; ?>
          </div>

          <!-- Fechas -->
          <div class="row g-3 mb-3">
            <div class="col-sm-6">
              <label class="form-label">Fecha de inicio <span class="req">*</span></label>
              <input type="date" name="fecha_inicio" id="f-fi" class="form-control" required>
            </div>
            <div class="col-sm-6">
              <label class="form-label">Fecha de fin <span class="req">*</span></label>
              <input type="date" name="fecha_fin" id="f-ff" class="form-control" required>
            </div>
            <!-- Duración calculada -->
            <div class="col-12">
              <div id="dur-info" class="dur-info">
                <i class="fa fa-calendar-days me-1"></i><span id="dur-texto"></span>
              </div>
            </div>
          </div>

          <!-- Activar -->
          <div class="mb-2">
            <div class="form-check">
              <input type="checkbox" name="activo" id="f-activo" class="form-check-input" value="1">
              <label class="form-check-label" for="f-activo">
                Activar este período inmediatamente
              </label>
            </div>
            <div style="font-size:11px;color:#b45309;margin-top:4px;margin-left:24px;" id="warn-activo" style="display:none;">
              <i class="fa fa-triangle-exclamation me-1"></i>
              Al activar este período, el período activo actual será desactivado automáticamente.
            </div>
          </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-floppy-disk me-1"></i>Guardar período
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<script>
var modal;
$(function () {
  modal = new bootstrap.Modal('#modalPeriodo');
  var hayActivo = <?= $activo ? 'true' : 'false' ?>;

  // Mayúsculas en nombre
  $('#f-nom').on('input', function () {
    var p = this.selectionStart;
    this.value = this.value.toUpperCase();
    this.setSelectionRange(p, p);
  });

  // Calcular duración al cambiar fechas
  function calcDuracion() {
    var fi = new Date($('#f-fi').val());
    var ff = new Date($('#f-ff').val());
    if (!isNaN(fi) && !isNaN(ff) && ff > fi) {
      var dias  = Math.round((ff - fi) / 86400000);
      var meses = (dias / 30).toFixed(1);
      $('#dur-texto').text('Duración: ' + dias + ' días (' + meses + ' meses aprox.)');
      $('#dur-info').show();
    } else {
      $('#dur-info').hide();
    }
  }
  $('#f-fi, #f-ff').on('change', calcDuracion);

  // Advertencia al activar
  $('#f-activo').on('change', function () {
    $('#warn-activo').toggle(this.checked && hayActivo);
  });

  // Botones abrir modal
  $('#btnNuevo, #btnNuevo2').on('click', function () { resetForm(); modal.show(); });

  $(document).on('click', '[data-confirm]', function (e) {
    if (!confirm($(this).data('confirm'))) e.preventDefault();
  });

  function resetForm() {
    $('#m-titulo').text('Nuevo período académico');
    $('#f-id').val(0); $('#f-nom').val(''); $('#f-fi').val(''); $('#f-ff').val('');
    $('#f-activo').prop('checked', false); $('#dur-info').hide(); $('#warn-activo').hide();
  }

  // Si hay ?editar= → modal prellenado
  <?php if ($editar): ?>
  $('#m-titulo').text('Editar período');
  $('#f-id').val(<?= $editar['id_periodo'] ?>);
  $('#f-nom').val(<?= json_encode($editar['nombre']) ?>);
  $('#f-fi').val(<?= json_encode($editar['fecha_inicio']) ?>);
  $('#f-ff').val(<?= json_encode($editar['fecha_fin']) ?>);
  $('#f-activo').prop('checked', <?= $editar['activo'] ? 'true':'false' ?>);
  calcDuracion();
  modal.show();
  <?php endif; ?>
});
</script>
</body>
</html>