<?php
/**
 * modules/secretaria/vinculacion_grupos.php
 * Vista de grupos de vinculación con sus equipos — solo lectura para Secretaria.
 */
require_once __DIR__ . '/../../config/app.php';
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../includes/functions.php';
requireRol(ROL_SECRETARIA);

$idInst    = instId();
$db        = getDB();
$pageTitle = 'Vinculación — Grupos y equipos';

// ── Catálogos ──────────────────────────────────────────────
$periodos = $db->query(
    "SELECT id_periodo,nombre,activo FROM periodos_academicos WHERE 1=1" . instCond() . " ORDER BY id_periodo DESC"
)->fetchAll();
$carreras = $db->query(
    "SELECT id_carrera,nombre FROM carreras WHERE activa=1" . instCond() . " ORDER BY nombre"
)->fetchAll();

$pa = $db->query("SELECT id_periodo FROM periodos_academicos WHERE activo=1" . ($idInst ? " AND id_instituto=$idInst" : "") . " LIMIT 1")->fetch();
$idPerActivo = $pa ? (int)$pa['id_periodo'] : ($periodos[0]['id_periodo'] ?? 0);

// ── Filtros ────────────────────────────────────────────────
$idPer   = (int)($_GET['periodo']  ?? $idPerActivo);
$idCar   = (int)($_GET['carrera']  ?? 0);
$filtEst = $_GET['estado']         ?? '';
$buscar  = trim($_GET['q']         ?? '');

$perNom = ''; foreach ($periodos as $p) { if ($p['id_periodo']==$idPer) { $perNom=$p['nombre']; break; } }

// ── Consulta principal de grupos ───────────────────────────
$where  = ['1=1'];
$params = [];
if ($idInst) { $where[] = "g.id_instituto = $idInst"; }
if ($idPer)  { $where[] = 'g.id_periodo = :per';    $params[':per']  = $idPer; }
if ($filtEst){ $where[] = 'g.estado = :est';         $params[':est']  = $filtEst; }
if ($idCar)  { $where[] = 'car.id_carrera = :car';   $params[':car']  = $idCar; }
if ($buscar) { $where[] = "(g.nombre_proyecto LIKE :q OR CONCAT(ul.apellidos,' ',ul.nombres) LIKE :q)";
               $params[':q'] = '%'.$buscar.'%'; }

$stGrupos = $db->prepare("
    SELECT g.id_grupo, g.nombre_proyecto, g.estado, g.area,
           g.horas_requeridas, g.horas_cumplidas, g.nota_final,
           g.fecha_inicio, g.fecha_fin,
           COALESCE(ob.nombre, g.org_nueva_nombre)  AS organizacion,
           pa.nombre                                AS periodo,
           pa.activo                                AS periodo_activo,
           COUNT(DISTINCT m.id_estudiante)          AS total_miembros,
           CONCAT(ut.apellidos,' ',ut.nombres)      AS tutor_nombre,
           tut.titulo_academico                     AS tutor_titulo,
           CONCAT(ul.apellidos,' ',ul.nombres)      AS lider_nombre,
           lest.codigo_estudiante                   AS lider_codigo,
           lcar.nombre                              AS carrera_lider
    FROM grupos_vinculacion g
    LEFT JOIN periodos_academicos pa      ON pa.id_periodo     = g.id_periodo
    LEFT JOIN organizaciones_beneficiarias ob ON ob.id_organizacion = g.id_organizacion
    LEFT JOIN miembros_grupo_vinculacion m ON m.id_grupo = g.id_grupo AND m.estado = 'activo'
    LEFT JOIN estudiantes lest ON lest.id_estudiante = g.id_lider
    LEFT JOIN usuarios ul      ON ul.id_usuario      = lest.id_usuario
    LEFT JOIN carreras lcar    ON lcar.id_carrera    = lest.id_carrera
    LEFT JOIN carreras car     ON car.id_carrera     = lest.id_carrera
    LEFT JOIN tutores tut      ON tut.id_tutor       = g.id_tutor
    LEFT JOIN usuarios ut      ON ut.id_usuario      = tut.id_usuario
    WHERE " . implode(' AND ', $where) . "
    GROUP BY g.id_grupo
    ORDER BY g.updated_at DESC
");
$stGrupos->execute($params);
$grupos = $stGrupos->fetchAll();

// ── KPIs ───────────────────────────────────────────────────
$instC = $idInst ? "AND g.id_instituto=$idInst" : '';
$perC  = $idPer  ? "AND g.id_periodo=$idPer"    : '';
$kpi = $db->query("
    SELECT
        COUNT(*)                          AS total,
        SUM(g.estado='completado')        AS completados,
        SUM(g.estado IN ('aprobado','en_progreso')) AS activos,
        SUM(g.estado='pendiente')         AS pendientes,
        COUNT(DISTINCT m.id_estudiante)   AS estudiantes
    FROM grupos_vinculacion g
    LEFT JOIN miembros_grupo_vinculacion m ON m.id_grupo=g.id_grupo AND m.estado='activo'
    WHERE 1=1 $instC $perC
")->fetch();

$estadoColors = [
    'pendiente'   => ['#94a3b8','Pendiente'],
    'aprobado'    => ['#3b82f6','Aprobado'],
    'en_progreso' => ['#f59e0b','En progreso'],
    'completado'  => ['#16a34a','Completado'],
];

$paginaActual   = 'vinc_grupos';
$sidebarBaseUrl = '.';
?>
<!doctype html>
<html lang="es">
<head>
<?php include __DIR__ . '/../../includes/head.php'; ?>
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/sidebar.css">
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/sidebar-secretaria.css">
<style>
.kpi-card { background:#fff;border:1px solid #e2e8f0;border-radius:12px;
            padding:14px 18px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.05);
            border-top:3px solid var(--kc,#10b981); }
.kpi-val  { font-size:28px;font-weight:800;line-height:1; }
.kpi-lbl  { font-size:11px;color:#64748b;margin-top:4px;font-weight:600;
            text-transform:uppercase;letter-spacing:.5px; }
.grupo-card { background:#fff;border:1px solid #e2e8f0;border-radius:12px;
              padding:0;margin-bottom:12px;overflow:hidden;
              box-shadow:0 1px 3px rgba(0,0,0,.04);transition:box-shadow .2s; }
.grupo-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.08); }
.gc-head  { padding:14px 18px;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap; }
.gc-body  { padding:0 18px 14px; }
.gc-title { font-weight:700;font-size:14px;color:#0f172a;margin-bottom:2px; }
.gc-meta  { font-size:11px;color:#64748b;display:flex;flex-wrap:wrap;gap:8px; }
.prog-bar { height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;margin:8px 0 3px; }
.prog-fill{ height:100%;border-radius:2px; }
.chip-tutor { display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;
              font-size:11px;font-weight:600;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe; }
.chip-lider { display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;
              font-size:11px;font-weight:600;background:#fffbeb;color:#92400e;border:1px solid #fde68a; }
.med-tbl  { border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin-top:10px; }
.med-tbl table { font-size:12px;margin:0; }
.med-tbl th { background:#f8fafc;font-size:10.5px;text-transform:uppercase;color:#64748b;
              font-weight:700;padding:7px 12px;border-bottom:1px solid #e2e8f0; }
.med-tbl td { padding:7px 12px;vertical-align:middle;border-bottom:1px solid #f1f5f9; }
.med-tbl tr:last-child td { border-bottom:none; }
.filter-bar { background:#fff;border:1px solid #e2e8f0;border-radius:12px;
              padding:14px 18px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04); }
.sec-hdr { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
           color:#64748b;margin:20px 0 12px;display:flex;align-items:center;gap:8px; }
.sec-hdr span { flex:1;height:1px;background:#e2e8f0; }
</style>
</head>
<body>
<?php include __DIR__ . '/../../includes/navbar.php'; ?>
<div class="app-shell">
<?php include __DIR__ . '/../../includes/sidebar-secretaria.php'; ?>

<main class="main-area">
  <!-- Cabecera -->
  <div class="page-header d-flex justify-content-between align-items-start flex-wrap gap-2">
    <div>
      <h4><i class="fa fa-people-group me-2" style="color:#10b981;"></i>Vinculación — Grupos y equipos</h4>
      <p>Vista de grupos de vinculación con la sociedad · Solo lectura</p>
    </div>
    <div style="display:flex;gap:6px;">
      <span style="font-size:10px;padding:3px 10px;border-radius:20px;font-weight:700;background:#d1fae522;color:#065f46;border:1px solid #a7f3d0;">CES</span>
      <span style="font-size:10px;padding:3px 10px;border-radius:20px;font-weight:700;background:#ede9fe22;color:#5b21b6;border:1px solid #ddd6fe;">CACES</span>
    </div>
  </div>

  <!-- KPIs -->
  <div class="row g-3 mb-3">
    <div class="col-6 col-lg-3">
      <div class="kpi-card" style="--kc:#10b981;">
        <div class="kpi-val" style="color:#10b981;"><?= $kpi['total'] ?? 0 ?></div>
        <div class="kpi-lbl">Total grupos</div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="kpi-card" style="--kc:#16a34a;">
        <div class="kpi-val" style="color:#16a34a;"><?= $kpi['completados'] ?? 0 ?></div>
        <div class="kpi-lbl">Completados</div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="kpi-card" style="--kc:#f59e0b;">
        <div class="kpi-val" style="color:#f59e0b;"><?= $kpi['activos'] ?? 0 ?></div>
        <div class="kpi-lbl">Activos</div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="kpi-card" style="--kc:#3b82f6;">
        <div class="kpi-val" style="color:#3b82f6;"><?= $kpi['estudiantes'] ?? 0 ?></div>
        <div class="kpi-lbl">Total estudiantes</div>
      </div>
    </div>
  </div>

  <!-- Filtros -->
  <div class="filter-bar">
    <form method="GET" class="row g-2 align-items-end">
      <div class="col-12 col-md-3">
        <label style="font-size:11px;font-weight:700;text-transform:uppercase;color:#64748b;display:block;margin-bottom:4px;">Buscar proyecto</label>
        <input type="text" name="q" class="form-control form-control-sm"
               placeholder="Nombre o líder..." value="<?= htmlspecialchars($buscar) ?>">
      </div>
      <div class="col-6 col-md-3">
        <label style="font-size:11px;font-weight:700;text-transform:uppercase;color:#64748b;display:block;margin-bottom:4px;">Período</label>
        <select name="periodo" class="form-select form-select-sm">
          <option value="0">Todos</option>
          <?php foreach ($periodos as $p): ?>
            <option value="<?= $p['id_periodo'] ?>" <?= $idPer==$p['id_periodo']?'selected':'' ?>>
              <?= htmlspecialchars($p['nombre']) ?><?= $p['activo']?' ★':'' ?>
            </option>
          <?php endforeach; ?>
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label style="font-size:11px;font-weight:700;text-transform:uppercase;color:#64748b;display:block;margin-bottom:4px;">Estado</label>
        <select name="estado" class="form-select form-select-sm">
          <option value="">Todos</option>
          <option value="pendiente"   <?= $filtEst==='pendiente'  ?'selected':'' ?>>Pendiente</option>
          <option value="aprobado"    <?= $filtEst==='aprobado'   ?'selected':'' ?>>Aprobado</option>
          <option value="en_progreso" <?= $filtEst==='en_progreso'?'selected':'' ?>>En progreso</option>
          <option value="completado"  <?= $filtEst==='completado' ?'selected':'' ?>>Completado</option>
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label style="font-size:11px;font-weight:700;text-transform:uppercase;color:#64748b;display:block;margin-bottom:4px;">Carrera</label>
        <select name="carrera" class="form-select form-select-sm">
          <option value="0">Todas</option>
          <?php foreach ($carreras as $c): ?>
            <option value="<?= $c['id_carrera'] ?>" <?= $idCar==$c['id_carrera']?'selected':'' ?>>
              <?= htmlspecialchars($c['nombre']) ?>
            </option>
          <?php endforeach; ?>
        </select>
      </div>
      <div class="col-6 col-md-2 d-flex gap-2">
        <button type="submit" class="btn btn-primary btn-sm flex-fill">
          <i class="fa fa-filter me-1"></i>Filtrar
        </button>
        <a href="vinculacion_grupos.php" class="btn btn-sm btn-outline-secondary">
          <i class="fa fa-xmark"></i>
        </a>
      </div>
    </form>
    <div style="margin-top:8px;padding-top:8px;border-top:1px solid #f1f5f9;font-size:12px;color:#64748b;">
      <i class="fa fa-list me-1"></i><strong><?= count($grupos) ?></strong> grupo(s) · período: <strong><?= $perNom ?: 'Todos' ?></strong>
    </div>
  </div>

  <!-- Lista de grupos -->
  <div class="sec-hdr">
    <i class="fa fa-people-group" style="color:#10b981;"></i>
    Grupos de vinculación
    <span></span>
  </div>

  <?php if (empty($grupos)): ?>
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:40px;text-align:center;color:#94a3b8;">
      <i class="fa fa-people-group fa-2x d-block mb-2" style="color:#cbd5e1;"></i>
      No hay grupos para los filtros seleccionados.
    </div>
  <?php endif; ?>

  <?php foreach ($grupos as $g):
    $ec  = $estadoColors[$g['estado']] ?? ['#94a3b8', $g['estado']];
    $pct = $g['horas_requeridas'] > 0 ? min(100, round($g['horas_cumplidas']/$g['horas_requeridas']*100)) : 0;
    $colorPct = $pct >= 100 ? '#16a34a' : ($pct >= 60 ? '#f59e0b' : '#3b82f6');
  ?>
  <div class="grupo-card">
    <div class="gc-head">
      <!-- Estado badge -->
      <span style="font-size:10px;padding:3px 10px;border-radius:20px;font-weight:700;white-space:nowrap;
                   background:<?= $ec[0] ?>18;color:<?= $ec[0] ?>;border:1px solid <?= $ec[0] ?>33;margin-top:2px;">
        <?= $ec[1] ?>
      </span>
      <div style="flex:1;">
        <div class="gc-title"><?= htmlspecialchars($g['nombre_proyecto']) ?></div>
        <div class="gc-meta">
          <span><i class="fa fa-building me-1"></i><?= htmlspecialchars($g['organizacion'] ?? '—') ?></span>
          <span><i class="fa fa-calendar me-1"></i><?= htmlspecialchars($g['periodo'] ?? '—') ?><?= $g['periodo_activo'] ? ' <span style="background:#f0fdf4;color:#16a34a;font-size:9px;padding:0 5px;border-radius:8px;border:1px solid #bbf7d0;">★ activo</span>' : '' ?></span>
          <?php if ($g['area']): ?>
            <span><i class="fa fa-tag me-1"></i><?= htmlspecialchars($g['area']) ?></span>
          <?php endif; ?>
          <?php if ($g['fecha_inicio']): ?>
            <span><i class="fa fa-clock me-1"></i><?= date('d/m/Y', strtotime($g['fecha_inicio'])) ?> — <?= $g['fecha_fin'] ? date('d/m/Y', strtotime($g['fecha_fin'])) : 'En curso' ?></span>
          <?php endif; ?>
        </div>
      </div>
      <!-- Nota final si aplica -->
      <?php if ($g['nota_final'] !== null): ?>
      <div style="text-align:center;padding:8px 14px;background:<?= $g['nota_final']>=70?'#f0fdf4':'#fff1f0' ?>;
                  border-radius:10px;border:1px solid <?= $g['nota_final']>=70?'#bbf7d0':'#fecaca' ?>;">
        <div style="font-size:20px;font-weight:800;color:<?= $g['nota_final']>=70?'#16a34a':'#ef4444' ?>;">
          <?= number_format($g['nota_final'],2) ?>
        </div>
        <div style="font-size:9px;color:#94a3b8;margin-top:1px;">/ 100</div>
      </div>
      <?php endif; ?>
    </div>

    <div class="gc-body">
      <!-- Progreso horas -->
      <div class="prog-bar">
        <div class="prog-fill" style="width:<?= $pct ?>%;background:<?= $colorPct ?>;"></div>
      </div>
      <div style="font-size:11px;color:#64748b;margin-bottom:10px;">
        <strong><?= $g['horas_cumplidas'] ?></strong>/<?= $g['horas_requeridas'] ?> horas (<?= $pct ?>%)
      </div>

      <!-- Equipo -->
      <div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;">
        <?php if ($g['lider_nombre']): ?>
          <span class="chip-lider">
            <i class="fa fa-crown" style="font-size:9px;"></i>
            Líder: <?= htmlspecialchars($g['lider_nombre']) ?>
            <?php if ($g['carrera_lider']): ?>
              <span style="opacity:.7;">· <?= htmlspecialchars($g['carrera_lider']) ?></span>
            <?php endif; ?>
          </span>
        <?php endif; ?>
        <?php if ($g['tutor_nombre']): ?>
          <span class="chip-tutor">
            <i class="fa fa-user-tie" style="font-size:9px;"></i>
            Tutor: <?= htmlspecialchars($g['tutor_nombre']) ?>
            <?php if ($g['tutor_titulo']): ?>
              <span style="opacity:.7;">· <?= htmlspecialchars($g['tutor_titulo']) ?></span>
            <?php endif; ?>
          </span>
        <?php endif; ?>
        <span style="font-size:11px;color:#64748b;padding:2px 8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:20px;">
          <i class="fa fa-users me-1"></i><?= $g['total_miembros'] ?> miembro(s)
        </span>
      </div>

      <!-- Botón ver miembros -->
      <button class="btn btn-sm btn-outline-secondary btn-ver-miembros" data-grupo="<?= $g['id_grupo'] ?>"
              style="font-size:11px;">
        <i class="fa fa-chevron-down me-1" id="ic-<?= $g['id_grupo'] ?>"></i>Ver todos los miembros
      </button>

      <!-- Tabla miembros (colapsable) -->
      <div id="miembros-<?= $g['id_grupo'] ?>" style="display:none;">
        <?php
          $stM = $db->prepare("
              SELECT m.rol,
                     CONCAT(u.apellidos,' ',u.nombres) AS nombre,
                     u.cedula, est.codigo_estudiante,
                     car.nombre AS carrera,
                     cv.nota_promedio, cv.nota_informe_pdf AS n1, cv.nota_trabajo_individual AS n2
              FROM miembros_grupo_vinculacion m
              JOIN estudiantes est ON est.id_estudiante = m.id_estudiante
              JOIN usuarios u      ON u.id_usuario      = est.id_usuario
              JOIN carreras car    ON car.id_carrera     = est.id_carrera
              LEFT JOIN calificaciones_vinculacion cv
                     ON cv.id_grupo = m.id_grupo AND cv.id_estudiante = m.id_estudiante
              WHERE m.id_grupo = :g AND m.estado = 'activo'
              ORDER BY m.rol DESC, u.apellidos
          ");
          $stM->execute([':g' => $g['id_grupo']]);
          $miembros = $stM->fetchAll();
        ?>
        <div class="med-tbl">
          <table class="table table-borderless mb-0">
            <thead>
              <tr>
                <th>Estudiante</th>
                <th>Carrera</th>
                <th class="text-center">Rol</th>
                <th class="text-center">N1 Informe</th>
                <th class="text-center">N2 Trabajo</th>
                <th class="text-center">Promedio</th>
              </tr>
            </thead>
            <tbody>
            <?php foreach ($miembros as $m): ?>
              <tr>
                <td>
                  <div style="font-weight:600;color:#0f172a;"><?= htmlspecialchars($m['nombre']) ?></div>
                  <div style="font-size:10px;color:#94a3b8;font-family:monospace;">
                    <?= htmlspecialchars($m['cedula']) ?> · <?= htmlspecialchars($m['codigo_estudiante']) ?>
                  </div>
                </td>
                <td style="font-size:11px;color:#64748b;"><?= htmlspecialchars($m['carrera']) ?></td>
                <td class="text-center">
                  <?php if ($m['rol']==='lider'): ?>
                    <span style="font-size:9px;padding:1px 7px;border-radius:20px;background:#fffbeb;color:#92400e;border:1px solid #fde68a;font-weight:700;">
                      <i class="fa fa-crown" style="font-size:8px;"></i> Líder
                    </span>
                  <?php else: ?>
                    <span style="font-size:10px;color:#64748b;">Miembro</span>
                  <?php endif; ?>
                </td>
                <td class="text-center" style="font-size:12px;font-weight:700;color:<?= $m['n1']!==null?($m['n1']>=70?'#16a34a':'#ef4444'):'#94a3b8' ?>;">
                  <?= $m['n1'] !== null ? number_format($m['n1'],1) : '—' ?>
                </td>
                <td class="text-center" style="font-size:12px;font-weight:700;color:<?= $m['n2']!==null?($m['n2']>=70?'#16a34a':'#ef4444'):'#94a3b8' ?>;">
                  <?= $m['n2'] !== null ? number_format($m['n2'],1) : '—' ?>
                </td>
                <td class="text-center">
                  <?php if ($m['nota_promedio'] !== null): ?>
                    <span style="font-size:15px;font-weight:800;color:<?= $m['nota_promedio']>=70?'#16a34a':'#ef4444' ?>;">
                      <?= number_format($m['nota_promedio'],1) ?>
                    </span>
                    <span style="font-size:9px;color:#94a3b8;">/100</span>
                  <?php else: ?>
                    <span style="color:#94a3b8;font-size:11px;">Sin nota</span>
                  <?php endif; ?>
                </td>
              </tr>
            <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <?php endforeach; ?>

</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>
$(function(){
  $('.btn-ver-miembros').on('click', function(){
    var id = $(this).data('grupo');
    $('#miembros-'+id).slideToggle(200);
    var ic = $('#ic-'+id);
    ic.toggleClass('fa-chevron-down fa-chevron-up');
  });
});
</script>
</body>
</html>