{% extends "base.html" %}

{% block title %}Panel de Control Docente & Administrativo | AVANZO SV{% endblock %}

{% block content %}
<div class="container py-4">

  <!-- HEADER -->
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
    <div>
      <span class="badge bg-primary text-uppercase px-2 py-1 small">Administración General</span>
      <h3 class="fw-bold text-dark mb-1">Panel de Control Docente y Gestión Total de Licencias</h3>
      <p class="text-muted mb-0">Monitoreo de licencias activas por docente/institución, licencias individuales e inventario oficial.</p>
    </div>
    <div class="d-flex flex-wrap gap-2">
      <a href="{{ url_for('admin_export_csv') }}" class="btn btn-success btn-sm fw-bold shadow-sm">
        <i class="bi bi-file-earmark-spreadsheet me-1"></i> Descargar Todo en CSV
      </a>
      <a href="{{ url_for('docentes_view') }}" class="btn btn-outline-primary btn-sm fw-semibold">
        <i class="bi bi-person-badge me-1"></i> Perfil Docente
      </a>
      <a href="{{ url_for('index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-house me-1"></i> Ir al Portal
      </a>
      <a href="{{ url_for('admin_logout') }}" class="btn btn-outline-danger btn-sm" title="Cerrar Sesión de Administrador">
        <i class="bi bi-box-arrow-right"></i>
      </a>
    </div>
  </div>

  <!-- TARJETAS DE ESTADÍSTICAS GLOBALES EN TIEMPO REAL -->
  <div class="row g-3 mb-4">
    <div class="col-6 col-md-4 col-lg-2">
      <div class="p-3 bg-white rounded-3 border shadow-sm text-center h-100">
        <span class="text-muted small d-block">Total Licencias</span>
        <h3 class="fw-bold text-dark mb-0">{{ stats.total_licenses }}</h3>
        <span class="badge bg-primary-subtle text-primary small mt-1">100% Oficial</span>
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
      <div class="p-3 bg-white rounded-3 border shadow-sm text-center h-100">
        <span class="text-muted small d-block">Docentes Guía</span>
        <h3 class="fw-bold text-warning text-dark mb-0">{{ stats.total_docentes }}</h3>
        <span class="badge bg-warning-subtle text-dark small mt-1">DOC-BECA</span>
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
      <div class="p-3 bg-white rounded-3 border shadow-sm text-center h-100">
        <span class="text-muted small d-block">Alumnos Registrados</span>
        <h3 class="fw-bold text-info text-dark mb-0">{{ stats.total_alumnos }}</h3>
        <span class="badge bg-info-subtle text-dark small mt-1">Secciones + Becas</span>
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
      <div class="p-3 bg-white rounded-3 border shadow-sm text-center h-100">
        <span class="text-muted small d-block">Disponibles</span>
        <h3 class="fw-bold text-success mb-0" id="stat-total-available">{{ stats.available_licenses }}</h3>
        <span class="badge bg-success-subtle text-success small mt-1">Para Entregar</span>
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
      <div class="p-3 bg-white rounded-3 border shadow-sm text-center h-100">
        <span class="text-muted small d-block">Equipos Vinculados</span>
        <h3 class="fw-bold text-secondary mb-0" id="stat-total-claimed">{{ stats.claimed_licenses }}</h3>
        <span class="badge bg-secondary-subtle text-secondary small mt-1">Activas en Uso</span>
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
      <div class="p-3 bg-white rounded-3 border shadow-sm text-center h-100">
        <span class="text-muted small d-block">Recaudado USD</span>
        <h3 class="fw-bold text-success mb-0">${{ "%.2f" | format(stats.total_revenue) }}</h3>
        <span class="text-muted small d-block" style="font-size: 0.72rem;">{{ stats.total_attempts }} simulacros</span>
      </div>
    </div>
  </div>

  <!-- GENERADORES DE LICENCIAS (SECCIÓN E INDIVIDUAL) -->
  <div class="row g-4 mb-4">

    <!-- GENERADOR DE PAQUETE DE SECCIÓN ($5 O BECA AULA) -->
    <div class="col-lg-6">
      <div class="card border-2 border-warning shadow-sm rounded-4 p-4 bg-white h-100">
        <div class="d-flex align-items-center gap-2 mb-3">
          <i class="bi bi-people-fill text-warning fs-4"></i>
          <div>
            <h5 class="fw-bold text-dark mb-0">Generar Paquete de Sección Completa</h5>
            <small class="text-muted">45 claves para alumnos + 1 clave de cortesía para el docente guía</small>
          </div>
        </div>

        <form id="section-batch-form" onsubmit="generateSectionBatchAdmin(event)">
          <div class="mb-3">
            <label class="form-label fw-semibold small text-muted">Institución / Complejo Educativo:</label>
            <input type="text" id="batch-school" class="form-control" placeholder="Ej. Instituto Nacional de Usulután" required>
          </div>

          <div class="row g-2 mb-3">
            <div class="col-sm-8">
              <label class="form-label fw-semibold small text-muted">Grado y Sección:</label>
              <input type="text" id="batch-section" class="form-control" placeholder="Ej. 2.° Bachillerato Técnico A" required>
            </div>
            <div class="col-sm-4">
              <label class="form-label fw-semibold small text-muted">Cant. Alumnos:</label>
              <input type="number" id="batch-count" class="form-control" value="45" min="5" max="50">
            </div>
          </div>

          <div class="form-check form-switch mb-3">
            <input class="form-check-input" type="checkbox" id="batch-is-beca" checked>
            <label class="form-check-label small fw-semibold text-success" for="batch-is-beca">
              <i class="bi bi-award-fill me-1"></i> Modalidad Beca Oficial (DOC-BECA y cuota sin costo $0.00)
            </label>
          </div>

          <button type="submit" class="btn btn-warning fw-bold w-100 py-2 text-dark shadow-sm">
            <i class="bi bi-lightning-charge-fill me-1"></i> Generar Paquete de Aula
          </button>
        </form>
      </div>
    </div>

    <!-- GENERADOR AVANZADO DE LICENCIAS INDIVIDUALES -->
    <div class="col-lg-6">
      <div class="card border-2 border-primary shadow-sm rounded-4 p-4 bg-white h-100">
        <div class="d-flex align-items-center gap-2 mb-3">
          <i class="bi bi-person-plus-fill text-primary fs-4"></i>
          <div>
            <h5 class="fw-bold text-dark mb-0">Generar Claves Individuales</h5>
            <small class="text-muted">Crear 1 o varias licencias por tipo (Estudiante Beca, Regular o Docente)</small>
          </div>
        </div>

        <form id="single-license-form" onsubmit="generateIndividualKeyAdmin(event)">
          <div class="row g-2 mb-2">
            <div class="col-sm-8">
              <label class="form-label fw-semibold small text-muted">Tipo de Licencia:</label>
              <select id="single-type" class="form-select fw-semibold" onchange="updateSingleFormUI()">
                <option value="estudiante_beca" selected>🏆 Estudiante - Pase Beca 100% Gratuito ($0.00)</option>
                <option value="estudiante_regular">💳 Estudiante - Licencia Regular Pago ($1.00)</option>
                <option value="docente_beca">👨‍🏫 Docente Guía - Licencia Beca ($0.00)</option>
                <option value="docente_regular">👨‍🏫 Docente Guía - Licencia Regular ($5.00)</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label class="form-label fw-semibold small text-muted">Cantidad:</label>
              <div class="input-group">
                <input type="number" id="single-count" class="form-control text-center fw-bold" value="1" min="1" max="50">
              </div>
            </div>
          </div>

          <!-- BOTONES RÁPIDOS DE CANTIDAD -->
          <div class="d-flex gap-1 mb-2">
            <span class="text-muted small me-1 align-self-center">Lotes:</span>
            <button type="button" onclick="setSingleCount(1)" class="btn btn-outline-secondary btn-xs py-0 px-2 small">1</button>
            <button type="button" onclick="setSingleCount(5)" class="btn btn-outline-secondary btn-xs py-0 px-2 small">5</button>
            <button type="button" onclick="setSingleCount(10)" class="btn btn-outline-secondary btn-xs py-0 px-2 small">10</button>
            <button type="button" onclick="setSingleCount(25)" class="btn btn-outline-secondary btn-xs py-0 px-2 small">25</button>
            <button type="button" onclick="setSingleCount(50)" class="btn btn-outline-secondary btn-xs py-0 px-2 small">50</button>
          </div>

          <div class="row g-2 mb-2">
            <div class="col-sm-6">
              <input type="text" id="single-school" class="form-control form-control-sm" placeholder="Sede / Institución (Opcional)">
            </div>
            <div class="col-sm-6">
              <input type="text" id="single-notes" class="form-control form-control-sm" placeholder="Motivo / Nota (Ej. Beca Alcaldía)">
            </div>
          </div>

          <div id="single-student-info" class="row g-2 mb-3">
            <div class="col-sm-7">
              <input type="text" id="single-name" class="form-control form-control-sm" placeholder="Nombre Alumno (Opcional si es 1)">
            </div>
            <div class="col-sm-5">
              <input type="text" id="single-nie" class="form-control form-control-sm font-monospace" placeholder="NIE (Opcional)">
            </div>
          </div>

          <button type="submit" class="btn btn-primary fw-bold w-100 py-2 shadow-sm mb-3">
            <i class="bi bi-plus-circle me-1"></i> Generar Licencias Ahora
          </button>
        </form>

        <!-- LIBERAR DISPOSITIVO -->
        <div class="border-top pt-2 mt-auto">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <span class="fw-bold text-danger small text-uppercase">
              <i class="bi bi-unlock-fill me-1"></i> Liberar Dispositivo (Reactivar)
            </span>
            <small class="text-muted" style="font-size: 0.75rem;">Para laptops formateadas</small>
          </div>
          <div class="input-group input-group-sm">
            <input type="text" id="release-key-input" class="form-control font-monospace text-uppercase" placeholder="AVZ-XXXX-XXXX">
            <button onclick="releaseDeviceAdmin()" class="btn btn-outline-danger fw-semibold">
              Liberar
            </button>
          </div>
        </div>

      </div>
    </div>

  </div>

  <!-- CAJA DE RESULTADOS DE GENERACIÓN (SECCIÓN O INDIVIDUAL) -->
  <div id="batch-results-box" class="card border-2 border-success shadow rounded-4 p-4 bg-white mb-4 d-none">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 border-bottom pb-3 mb-3">
      <div>
        <span class="badge bg-success text-uppercase">Lote Generado Exitosamente</span>
        <h5 id="batch-result-title" class="fw-bold text-dark mb-0 mt-1"></h5>
      </div>
      <div class="d-flex flex-wrap gap-2">
        <button onclick="copyBatchWhatsApp()" class="btn btn-success btn-sm fw-bold shadow-sm">
          <i class="bi bi-whatsapp me-1"></i> Copiar para WhatsApp
        </button>
        <button onclick="downloadBatchTxt()" class="btn btn-outline-primary btn-sm fw-bold">
          <i class="bi bi-file-earmark-text me-1"></i> Descargar TXT
        </button>
        <button onclick="downloadBatchCsv()" class="btn btn-outline-success btn-sm fw-bold">
          <i class="bi bi-file-earmark-spreadsheet me-1"></i> Descargar CSV
        </button>
        <button onclick="dismissBatchBox()" class="btn btn-outline-secondary btn-sm">
          <i class="bi bi-x-lg"></i>
        </button>
      </div>
    </div>

    <div class="table-responsive" style="max-height: 360px; overflow-y: auto;">
      <table class="table table-sm table-hover table-bordered align-middle mb-0" id="batch-table">
        <thead class="table-light sticky-top">
          <tr>
            <th style="width: 50px;">#</th>
            <th>Tipo</th>
            <th>Clave Única</th>
            <th>Asignación / Notas</th>
            <th style="width: 100px;" class="text-center">Copiar</th>
          </tr>
        </thead>
        <tbody id="batch-table-body">
          <!-- Renderizado dinámico -->
        </tbody>
      </table>
    </div>
  </div>

  <!-- ========================================== -->
  <!-- SELECTOR DE VISTAS PRINCIPALES DE AUDITORÍA -->
  <!-- ========================================== -->
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div>
      <h5 class="fw-bold text-dark mb-0"><i class="bi bi-shield-lock-fill text-primary me-2"></i>Gestión de Licencias del Sistema</h5>
      <small class="text-muted">Supervisa, crea claves de reemplazo o elimina licencias problemáticas en 1 clic.</small>
    </div>
    <div class="d-flex gap-2">
      <button type="button" onclick="openQuickCreateModal()" class="btn btn-warning fw-bold text-dark shadow-sm">
        <i class="bi bi-plus-circle-fill me-1"></i> + Crear Licencia Rápida
      </button>
    </div>
  </div>

  <div class="card border-0 shadow-sm rounded-4 p-2 bg-white mb-4">
    <ul class="nav nav-pills nav-fill gap-2" id="admin-view-tabs" role="tablist">
      <li class="nav-item">
        <button class="nav-link active fw-bold py-2 d-flex align-items-center justify-content-center gap-2" 
                id="btn-view-docentes" onclick="switchAdminMainTab('docentes')">
          <i class="bi bi-buildings-fill text-warning fs-5"></i>
          <span>1. Por Docente e Institución ({{ stats.sections_summary|length }} Secciones)</span>
        </button>
      </li>
      <li class="nav-item">
        <button class="nav-link fw-bold py-2 d-flex align-items-center justify-content-center gap-2" 
                id="btn-view-individuales" onclick="switchAdminMainTab('individuales')">
          <i class="bi bi-person-badge-fill text-primary fs-5"></i>
          <span>2. Licencias Individuales ({{ stats.individual_summary.total }})</span>
        </button>
      </li>
      <li class="nav-item">
        <button class="nav-link fw-bold py-2 d-flex align-items-center justify-content-center gap-2" 
                id="btn-view-general" onclick="switchAdminMainTab('general')">
          <i class="bi bi-list-check text-success fs-5"></i>
          <span>3. Inventario General Completo ({{ stats.total_licenses }})</span>
        </button>
      </li>
    </ul>
  </div>

  <!-- ========================================== -->
  <!-- VISTA 1: MONITOR POR DOCENTE E INSTITUCIÓN -->
  <!-- ========================================== -->
  <div id="view-panel-docentes" class="view-panel">
    <div class="card border-0 shadow-sm rounded-4 p-4 bg-white mb-4">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
          <span class="badge bg-warning text-dark text-uppercase px-2 py-1 small">Aulas Institucionales</span>
          <h5 class="fw-bold text-dark mb-0 mt-1">
            <i class="bi bi-mortarboard-fill text-warning me-2"></i> Monitoreo de Licencias Activas por Docente y Sección
          </h5>
          <p class="text-muted small mb-0">Auditoría en tiempo real de vinculación de dispositivos en cada aula de bachillerato.</p>
        </div>
        <div class="d-flex gap-2">
          <span class="badge bg-light text-dark border align-self-center px-3 py-2">
            Total Secciones: <strong>{{ stats.sections_summary|length }}</strong> | 
            Cupos Totales: <strong>{{ stats.total_alumnos }} alumnos</strong>
          </span>
        </div>
      </div>

      <!-- BUSCADOR Y FILTROS DE SECCIONES -->
      <div class="row g-2 align-items-center mb-3">
        <div class="col-md-7">
          <div class="input-group">
            <span class="input-group-text bg-light text-muted border-end-0">
              <i class="bi bi-search"></i>
            </span>
            <input type="text" id="sec-search" class="form-control border-start-0" 
                   placeholder="Buscar por sección (SEC-BECA-01), clave docente (DOC-BECA...), o institución..."
                   oninput="onSearchSections()">
            <button class="btn btn-outline-secondary" type="button" onclick="clearSearchSections()" title="Limpiar">
              <i class="bi bi-x-circle"></i>
            </button>
          </div>
        </div>
        <div class="col-md-5">
          <div class="d-flex gap-1 justify-content-md-end flex-wrap">
            <button onclick="filterSections('todas')" class="btn btn-sm btn-primary fw-semibold sec-filter-btn active" data-secfilter="todas">
              Todas ({{ stats.sections_summary|length }})
            </button>
            <button onclick="filterSections('con_activas')" class="btn btn-sm btn-outline-secondary fw-semibold sec-filter-btn" data-secfilter="con_activas">
              🟢 Con Alumnos Activos
            </button>
            <button onclick="filterSections('sin_activas')" class="btn btn-sm btn-outline-secondary fw-semibold sec-filter-btn" data-secfilter="sin_activas">
              ⚪ Disponibles (0%)
            </button>
          </div>
        </div>
      </div>

      <!-- TABLA DE SECCIONES Y DOCENTES -->
      <div class="table-responsive">
        <table class="table table-hover align-middle small" id="sections-table">
          <thead class="table-light">
            <tr>
              <th style="width: 45px;">#</th>
              <th>Sección</th>
              <th>Institución / Escuela</th>
              <th>Clave Docente Guía</th>
              <th style="min-width: 170px;">Progreso de Activación</th>
              <th class="text-center">Alumnos Activos</th>
              <th class="text-center">Plan / Pago</th>
              <th>Estado</th>
              <th class="text-center" style="width: 180px;">Acciones</th>
            </tr>
          </thead>
          <tbody id="sections-tbody">
            <!-- Inyectado por JS -->
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- ========================================== -->
  <!-- VISTA 2: MONITOR DE LICENCIAS INDIVIDUALES  -->
  <!-- ========================================== -->
  <div id="view-panel-individuales" class="view-panel d-none">
    <div class="card border-0 shadow-sm rounded-4 p-4 bg-white mb-4">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
          <span class="badge bg-primary text-uppercase px-2 py-1 small">Pases de Estudio</span>
          <h5 class="fw-bold text-dark mb-0 mt-1">
            <i class="bi bi-person-badge-fill text-primary me-2"></i> Monitoreo Exclusivo de Licencias Individuales
          </h5>
          <p class="text-muted small mb-0">Control directo de pases individuales otorgados (Becas $0.00 y Regulares $1.00).</p>
        </div>
        <div class="d-flex gap-2">
          <span class="badge bg-success-subtle text-success border px-3 py-2">
            Disponibles: <strong id="ind-kpi-available">{{ stats.individual_summary.available }}</strong>
          </span>
          <span class="badge bg-secondary-subtle text-dark border px-3 py-2">
            Activas en Uso: <strong id="ind-kpi-claimed">{{ stats.individual_summary.claimed }}</strong>
          </span>
        </div>
      </div>

      <!-- BUSCADOR Y FILTROS DE INDIVIDUALES -->
      <div class="row g-2 align-items-center mb-3">
        <div class="col-md-6">
          <div class="input-group">
            <span class="input-group-text bg-light text-muted border-end-0">
              <i class="bi bi-search"></i>
            </span>
            <input type="text" id="ind-search" class="form-control border-start-0" 
                   placeholder="Buscar clave (AVZ-), alumno, NIE, institución o nota..."
                   oninput="onSearchIndividual()">
            <button class="btn btn-outline-secondary" type="button" onclick="clearSearchIndividual()" title="Limpiar">
              <i class="bi bi-x-circle"></i>
            </button>
          </div>
        </div>
        <div class="col-md-6">
          <div class="d-flex gap-1 justify-content-md-end flex-wrap">
            <button onclick="filterIndividual('todas')" class="btn btn-sm btn-primary fw-semibold ind-filter-btn active" data-indfilter="todas">
              Todas ({{ stats.individual_summary.total }})
            </button>
            <button onclick="filterIndividual('activas')" class="btn btn-sm btn-outline-secondary fw-semibold ind-filter-btn" data-indfilter="activas">
              🟢 Solo Activas ({{ stats.individual_summary.claimed }})
            </button>
            <button onclick="filterIndividual('disponibles')" class="btn btn-sm btn-outline-secondary fw-semibold ind-filter-btn" data-indfilter="disponibles">
              ⚪ Solo Disponibles ({{ stats.individual_summary.available }})
            </button>
            <button onclick="filterIndividual('becas')" class="btn btn-sm btn-outline-secondary fw-semibold ind-filter-btn" data-indfilter="becas">
              🏆 Becas ($0)
            </button>
          </div>
        </div>
      </div>

      <!-- TABLA DE INDIVIDUALES -->
      <div class="table-responsive" style="min-height: 360px;">
        <table class="table table-hover align-middle small" id="individual-table">
          <thead class="table-light">
            <tr>
              <th style="width: 45px;">#</th>
              <th>Clave Única</th>
              <th>Tipo / Precio</th>
              <th>Estudiante Asignado</th>
              <th>Sede / Escuela</th>
              <th>Estado</th>
              <th>Dispositivo Vinculado</th>
              <th>Activación</th>
              <th>Notas / Motivo</th>
              <th class="text-center" style="width: 80px;">Acción</th>
            </tr>
          </thead>
          <tbody id="individual-tbody">
            <!-- Inyectado por JS -->
          </tbody>
        </table>
      </div>

      <!-- PAGINADOR INDIVIDUAL -->
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-3 pt-2 border-top">
        <div class="small text-muted" id="ind-pagination-summary">
          Mostrando licencias individuales
        </div>
        <nav>
          <ul class="pagination pagination-sm mb-0" id="ind-pagination-nav"></ul>
        </nav>
      </div>

    </div>
  </div>

  <!-- ========================================== -->
  <!-- VISTA 3: INVENTARIO GENERAL COMPLETO       -->
  <!-- ========================================== -->
  <div id="view-panel-general" class="view-panel d-none">
    <div class="card border-0 shadow-sm rounded-4 p-4 bg-white mb-4">
      
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
          <span class="badge bg-success text-uppercase px-2 py-1 small">Catálogo Central</span>
          <h5 class="fw-bold text-dark mb-0 mt-1">
            <i class="bi bi-journal-bookmark-fill text-primary me-2"></i> Inventario Completo de Licencias Registradas
          </h5>
          <p class="text-muted small mb-0">Total registrado: <strong id="inv-total-counter">{{ stats.total_licenses }}</strong> licencias en base de datos.</p>
        </div>
        <div class="d-flex gap-2">
          <a href="{{ url_for('admin_export_csv') }}" class="btn btn-outline-success btn-sm fw-bold">
            <i class="bi bi-download me-1"></i> Exportar Inventario Completo (CSV)
          </a>
        </div>
      </div>

      <!-- BARRA DE BÚSQUEDA Y FILTROS -->
      <div class="row g-2 align-items-center mb-3">
        <div class="col-md-6">
          <div class="input-group">
            <span class="input-group-text bg-light text-muted border-end-0">
              <i class="bi bi-search"></i>
            </span>
            <input type="text" id="lic-search" class="form-control border-start-0" 
                   placeholder="Buscar por clave (DOC-, AVZ-, S..), sección, escuela, alumno o NIE..."
                   oninput="onSearchInput()">
            <button class="btn btn-outline-secondary" type="button" onclick="clearSearch()" title="Limpiar búsqueda">
              <i class="bi bi-x-circle"></i>
            </button>
          </div>
        </div>
        <div class="col-md-3">
          <div class="d-flex align-items-center gap-2">
            <label class="form-label text-muted small mb-0 text-nowrap">Mostrar:</label>
            <select id="page-size-select" class="form-select form-select-sm" onchange="changePageSize()">
              <option value="25">25 filas</option>
              <option value="50" selected>50 filas</option>
              <option value="100">100 filas</option>
              <option value="250">250 filas</option>
              <option value="10000">Todas (1,430+)</option>
            </select>
          </div>
        </div>
        <div class="col-md-3 text-md-end text-muted small" id="filter-info-badge">
          Mostrando <span id="showing-range">0-0</span> de <span id="filtered-total">0</span> licencias
        </div>
      </div>

      <!-- PESTAÑAS / BOTONES DE FILTRO RÁPIDO -->
      <div class="d-flex flex-wrap gap-1 mb-3 pb-2 border-bottom">
        <button onclick="setFilter('todas')" class="btn btn-sm btn-primary fw-semibold filter-btn active" data-filter="todas">
          Todas <span class="badge bg-white text-primary ms-1" id="tab-count-todas">{{ stats.total_licenses }}</span>
        </button>
        <button onclick="setFilter('docentes')" class="btn btn-sm btn-outline-secondary fw-semibold filter-btn" data-filter="docentes">
          👨‍🏫 Docentes Guía <span class="badge bg-secondary ms-1" id="tab-count-docentes">{{ stats.total_docentes }}</span>
        </button>
        <button onclick="setFilter('alumnos')" class="btn btn-sm btn-outline-secondary fw-semibold filter-btn" data-filter="alumnos">
          🎓 Alumnos Sección <span class="badge bg-secondary ms-1" id="tab-count-alumnos">{{ stats.total_alumnos }}</span>
        </button>
        <button onclick="setFilter('becas_ind')" class="btn btn-sm btn-outline-secondary fw-semibold filter-btn" data-filter="becas_ind">
          🏆 Becas Individuales <span class="badge bg-secondary ms-1">{{ stats.individual_summary.total }}</span>
        </button>
        <button onclick="setFilter('disponibles')" class="btn btn-sm btn-outline-secondary fw-semibold filter-btn" data-filter="disponibles">
          🟢 Disponibles <span class="badge bg-success ms-1">{{ stats.available_licenses }}</span>
        </button>
        <button onclick="setFilter('activas')" class="btn btn-sm btn-outline-secondary fw-semibold filter-btn" data-filter="activas">
          🔒 Vinculadas / En Uso <span class="badge bg-dark ms-1">{{ stats.claimed_licenses }}</span>
        </button>
      </div>

      <!-- TABLA PRINCIPAL DE INVENTARIO -->
      <div class="table-responsive" style="min-height: 380px;">
        <table class="table table-hover align-middle small" id="inventory-table">
          <thead class="table-light">
            <tr>
              <th style="width: 50px;">#</th>
              <th>Clave Única</th>
              <th>Plan / Tipo</th>
              <th>Precio</th>
              <th>Estado</th>
              <th>Asignación / Sección / Escuela</th>
              <th>Dispositivo Vinculado</th>
              <th>Emisión</th>
              <th class="text-center" style="width: 90px;">Acción</th>
            </tr>
          </thead>
          <tbody id="inventory-tbody">
            <!-- Inyectado dinámicamente por JavaScript -->
          </tbody>
        </table>
      </div>

      <!-- CONTROLES DE PAGINACIÓN -->
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-3 pt-2 border-top">
        <div class="small text-muted" id="pagination-summary">
          Página <strong id="current-page-display">1</strong> de <strong id="total-pages-display">1</strong>
        </div>
        <nav>
          <ul class="pagination pagination-sm mb-0" id="pagination-nav">
            <!-- Inyectado por JS -->
          </ul>
        </nav>
      </div>

    </div>
  </div>

  <!-- SECCIÓN DE PROMOTORES Y LIQUIDACIÓN DE COMISIONES (20%) -->
  <div class="card border-0 shadow-sm rounded-4 p-4 bg-white mt-4">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
      <div>
        <h5 class="fw-bold text-dark mb-1">
          <i class="bi bi-wallet2 text-warning me-2"></i> Promotores Registrados y Comisiones (20%)
        </h5>
        <p class="text-muted small mb-0">Total pendiente de liquidar: <strong class="text-danger font-monospace fs-6">${{ "%.2f" | format(stats.total_commissions_pending) }} USD</strong></p>
      </div>
      <a href="{{ url_for('referidos_view') }}" target="_blank" class="btn btn-outline-primary btn-sm fw-semibold">
        <i class="bi bi-box-arrow-up-right me-1"></i> Ver Portal de Promotores
      </a>
    </div>

    <div class="table-responsive">
      <table class="table table-hover align-middle small">
        <thead class="table-light">
          <tr>
            <th>Código</th>
            <th>Promotor</th>
            <th>Contacto</th>
            <th>Destino de Pago</th>
            <th>Total Ganado</th>
            <th>Pendiente de Pago</th>
            <th>Acción</th>
          </tr>
        </thead>
        <tbody>
          {% if stats.promoters_list %}
            {% for p in stats.promoters_list %}
            <tr>
              <td class="font-monospace fw-bold text-primary">{{ p.code }}</td>
              <td><strong>{{ p.name }}</strong></td>
              <td>{{ p.phone }}</td>
              <td>
                <span class="badge bg-light text-dark border">
                  {{ p.payment_method | upper }}: {{ p.payment_account }}
                </span>
              </td>
              <td class="text-success fw-bold">${{ "%.2f" | format(p.total_earned_usd) }}</td>
              <td>
                {% if p.pending_payout_usd > 0 %}
                <span class="badge bg-danger fs-6">${{ "%.2f" | format(p.pending_payout_usd) }}</span>
                {% else %}
                <span class="badge bg-success">Al día ($0.00)</span>
                {% endif %}
              </td>
              <td>
                {% if p.pending_payout_usd > 0 %}
                <button onclick="payoutPromoter({{ p.id }}, {{ p.pending_payout_usd }}, '{{ p.name }}')" class="btn btn-sm btn-success fw-bold">
                  <i class="bi bi-check-lg me-1"></i> Liquidar Pago
                </button>
                {% else %}
                <button class="btn btn-sm btn-outline-secondary" disabled>Liquidado</button>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="7" class="text-center text-muted py-3">
                No hay promotores registrados aún. Comparte el enlace de <a href="/referidos">Gana 20%</a> con estudiantes y directivas.
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

</div>

<!-- ========================================== -->
<!-- MODAL DE NÓMINA Y ACTIVACIONES DE SECCIÓN  -->
<!-- ========================================== -->
<div class="modal fade" id="sectionDetailModal" tabindex="-1" aria-labelledby="sectionModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content rounded-4 border-0 shadow">
      
      <div class="modal-header bg-dark text-white border-0 py-3">
        <div>
          <div class="d-flex align-items-center gap-2 mb-1">
            <span class="badge bg-warning text-dark text-uppercase small">Nómina del Aula</span>
            <span id="modal-plan-badge"></span>
          </div>
          <h5 class="modal-title fw-bold mb-0" id="sectionModalLabel">Detalle de Sección</h5>
          <small class="text-white-50" id="sectionModalSubtitle"></small>
        </div>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body p-4 bg-light">
        <!-- KPIS RÁPIDOS DEL MODAL -->
        <div class="row g-2 mb-3">
          <div class="col-sm-3">
            <div class="p-2 bg-white rounded-3 border text-center">
              <small class="text-muted d-block">Clave Docente Guía</small>
              <span id="modal-doc-key" class="font-monospace fw-bold text-primary"></span>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="p-2 bg-white rounded-3 border text-center">
              <small class="text-muted d-block">Total Cupos</small>
              <strong id="modal-total-keys" class="fs-6 text-dark">45</strong>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="p-2 bg-white rounded-3 border text-center">
              <small class="text-muted d-block">Licencias Activas</small>
              <strong id="modal-claimed-keys" class="fs-6 text-success">0</strong>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="p-2 bg-white rounded-3 border text-center">
              <small class="text-muted d-block">Licencias Disponibles</small>
              <strong id="modal-available-keys" class="fs-6 text-secondary">45</strong>
            </div>
          </div>
        </div>

        <!-- BARRA DE ACCIÓN Y BUSCADOR INTERNO DEL MODAL -->
        <div class="d-flex justify-content-between align-items-center gap-2 mb-3 flex-wrap">
          <div class="input-group input-group-sm flex-grow-1" style="max-width: 480px;">
            <span class="input-group-text bg-white border-end-0"><i class="bi bi-search"></i></span>
            <input type="text" id="modal-table-search" class="form-control border-start-0" 
                   placeholder="Filtrar por clave, NIE, alumno o estado dentro de esta sección..."
                   oninput="onModalSearchInput()">
          </div>
          <button type="button" onclick="addNewStudentToSection()" class="btn btn-primary btn-sm fw-bold shadow-sm">
            <i class="bi bi-person-plus-fill me-1"></i> + Añadir Clave a esta Aula
          </button>
        </div>

        <!-- TABLA DE ALUMNOS DE LA SECCIÓN -->
        <div class="table-responsive bg-white rounded-3 border">
          <table class="table table-sm table-hover align-middle mb-0" id="modal-table">
            <thead class="table-light">
              <tr>
                <th style="width: 45px;">#</th>
                <th>Rol / Tipo</th>
                <th>Clave Única</th>
                <th>Estado de Activación</th>
                <th>Estudiante Asignado</th>
                <th>Equipo Vinculado</th>
                <th>Fecha Activación</th>
                <th class="text-center" style="width: 120px;">Acción</th>
              </tr>
            </thead>
            <tbody id="modal-tbody">
              <!-- Renderizado dinámico -->
            </tbody>
          </table>
        </div>
      </div>

      <div class="modal-footer bg-white border-0 py-2 d-flex justify-content-between flex-wrap gap-2">
        <div class="d-flex gap-2 flex-wrap">
          <a id="modal-view-docente-btn" href="/docentes" target="_blank" class="btn btn-outline-success btn-sm fw-bold">
            <i class="bi bi-person-badge-fill me-1"></i> Abrir Perfil Docente
          </a>
          <button type="button" onclick="copyModalSectionWhatsApp()" class="btn btn-success btn-sm fw-bold">
            <i class="bi bi-whatsapp me-1"></i> Copiar Nómina para WhatsApp
          </button>
          <button type="button" onclick="downloadModalSectionCsv()" class="btn btn-outline-primary btn-sm fw-bold">
            <i class="bi bi-download me-1"></i> Descargar CSV del Aula
          </button>
          <button type="button" id="modal-upgrade-paid-btn" onclick="upgradeCurrentModalSectionPaid()" class="btn btn-warning btn-sm fw-bold shadow-sm d-none text-dark">
            <i class="bi bi-currency-dollar me-1"></i> Registrar Pago Sección ($5.00)
          </button>
        </div>
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cerrar</button>
      </div>

    </div>
  </div>
</div>

<!-- ========================================== -->
<!-- MODAL: CREAR LICENCIA RÁPIDA / REEMPLAZO   -->
<!-- ========================================== -->
<div class="modal fade" id="quickCreateModal" tabindex="-1" aria-labelledby="quickCreateModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-4 border-0 shadow">
      
      <div class="modal-header bg-primary text-white border-0 py-3 rounded-top-4">
        <div>
          <span class="badge bg-warning text-dark text-uppercase small mb-1">Emisión Express</span>
          <h5 class="modal-title fw-bold mb-0" id="quickCreateModalLabel">
            <i class="bi bi-plus-circle-fill me-2"></i> Crear Licencia Inmediata
          </h5>
          <small class="text-white-50">Genera una clave individual o añade un cupo a cualquier sección</small>
        </div>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body p-4 bg-white">
        <form id="quick-license-form" onsubmit="submitQuickCreate(event)">
          
          <div class="mb-3">
            <label class="form-label fw-semibold small text-muted">Destino / Tipo de Licencia:</label>
            <select id="quick-type" class="form-select fw-semibold" onchange="onQuickTypeChange()">
              <option value="estudiante_beca" selected>🏆 Estudiante - Beca Oficial 100% Gratuita ($0.00)</option>
              <option value="estudiante_regular">💳 Estudiante - Licencia Individual Regular ($1.00)</option>
              <option value="seccion_add">🏫 Añadir Clave Adicional / Reemplazo a un Aula</option>
              <option value="docente_beca">👨‍🏫 Clave Docente Guía - Modalidad Beca ($0.00)</option>
            </select>
          </div>

          <!-- SELECTOR DE SECCIÓN -->
          <div id="quick-section-group" class="mb-3 d-none">
            <label class="form-label fw-semibold small text-muted">Selecciona el Aula / Sección:</label>
            <select id="quick-section-select" class="form-select font-monospace fw-bold">
              {% for sec in stats.sections_summary %}
              <option value="{{ sec.section_code }}">{{ sec.section_code }} - {{ sec.school_name }}</option>
              {% endfor %}
            </select>
            <small class="text-muted">La nueva clave adoptará el código de esta sección (ej. S01-A46-...).</small>
          </div>

          <div class="row g-2 mb-3">
            <div class="col-7">
              <label class="form-label fw-semibold small text-muted">Nombre Estudiante (Opcional):</label>
              <input type="text" id="quick-name" class="form-control" placeholder="Ej. Juan Pérez">
            </div>
            <div class="col-5">
              <label class="form-label fw-semibold small text-muted">NIE (Opcional):</label>
              <input type="text" id="quick-nie" class="form-control font-monospace" placeholder="Ej. 12345678">
            </div>
          </div>

          <div class="mb-3" id="quick-school-group">
            <label class="form-label fw-semibold small text-muted">Institución / Escuela (Opcional):</label>
            <input type="text" id="quick-school" class="form-control" placeholder="Ej. Instituto Nacional General Francisco Menéndez">
          </div>

          <div class="mb-4">
            <label class="form-label fw-semibold small text-muted">Nota / Motivo de Entrega:</label>
            <input type="text" id="quick-notes" class="form-control" placeholder="Ej. Reemplazo por clave con problema / Alumno nuevo">
          </div>

          <button type="submit" id="btn-submit-quick" class="btn btn-primary fw-bold w-100 py-2 shadow-sm">
            <i class="bi bi-lightning-charge-fill me-1"></i> Generar Clave Ahora
          </button>
        </form>

        <!-- TARJETA DE RESULTADO TRAS GENERAR -->
        <div id="quick-result-card" class="d-none mt-3 p-3 rounded-4 bg-success bg-opacity-10 border border-success">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Clave Creada Exitosamente</span>
            <small class="text-success fw-bold">Lista para usar</small>
          </div>
          <div class="p-3 bg-white rounded-3 border text-center mb-2">
            <span class="small text-muted d-block mb-1">Clave de Acceso Generada:</span>
            <code id="quick-result-key" class="fs-4 fw-bold text-primary font-monospace user-select-all"></code>
          </div>
          <div class="d-flex gap-2">
            <button type="button" class="btn btn-primary btn-sm flex-grow-1 fw-bold" onclick="copyQuickResultKey()">
              <i class="bi bi-clipboard me-1"></i> Copiar Clave
            </button>
            <a id="quick-result-wa" href="#" target="_blank" class="btn btn-success btn-sm fw-bold">
              <i class="bi bi-whatsapp me-1"></i> WhatsApp
            </a>
          </div>
        </div>

      </div>

    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
  // ==========================================
  // ESTADOS GLOBALES
  // ==========================================
  let allLicenses = {{ stats.licenses_list | tojson | safe }};
  let sectionsSummary = {{ stats.sections_summary | tojson | safe }};
  let individualSummary = {{ stats.individual_summary | tojson | safe }};

  let filteredLicenses = [];
  let filteredSections = [];
  let filteredIndividual = [];

  let currentMainTab = 'docentes';
  let currentFilter = 'todas';
  let currentSecFilter = 'todas';
  let currentIndFilter = 'todas';

  let currentPage = 1;
  let pageSize = 50;

  let currentModalKeys = [];
  let currentModalSection = "";
  let currentModalSchool = "";
  let currentModalTeacherKey = "";

  let lastBatchKeys = [];
  let lastBatchSchool = "";
  let lastBatchSection = "";
  let lastBatchType = "";

  document.addEventListener("DOMContentLoaded", function() {
    renderSectionsTable();
    renderIndividualTable();
    applyFiltersAndRender();
  });

  // ==========================================
  // CONMUTADOR DE VISTAS PRINCIPALES
  // ==========================================
  function switchAdminMainTab(tabName) {
    currentMainTab = tabName;
    ['docentes', 'individuales', 'general'].forEach(t => {
      const panel = document.getElementById(`view-panel-${t}`);
      const btn = document.getElementById(`btn-view-${t}`);
      if (t === tabName) {
        panel.classList.remove('d-none');
        btn.classList.add('active');
      } else {
        panel.classList.add('d-none');
        btn.classList.remove('active');
      }
    });

    if (tabName === 'docentes') {
      renderSectionsTable();
    } else if (tabName === 'individuales') {
      renderIndividualTable();
    } else if (tabName === 'general') {
      applyFiltersAndRender();
    }
  }

  // ==========================================
  // VISTA 1: POR DOCENTE E INSTITUCIÓN
  // ==========================================
  function filterSections(filterType) {
    currentSecFilter = filterType;
    document.querySelectorAll(".sec-filter-btn").forEach(btn => {
      if (btn.getAttribute("data-secfilter") === filterType) {
        btn.classList.remove("btn-outline-secondary");
        btn.classList.add("btn-primary");
      } else {
        btn.classList.remove("btn-primary");
        btn.classList.add("btn-outline-secondary");
      }
    });
    renderSectionsTable();
  }

  function onSearchSections() {
    renderSectionsTable();
  }

  function clearSearchSections() {
    document.getElementById("sec-search").value = "";
    renderSectionsTable();
  }

  function renderSectionsTable() {
    const query = (document.getElementById("sec-search").value || "").trim().toLowerCase();
    const tbody = document.getElementById("sections-tbody");
    tbody.innerHTML = "";

    filteredSections = sectionsSummary.filter(sec => {
      if (currentSecFilter === 'con_activas' && sec.claimed_keys === 0) return false;
      if (currentSecFilter === 'sin_activas' && sec.claimed_keys > 0) return false;

      if (query) {
        const c = (sec.section_code || "").toLowerCase();
        const s = (sec.school_name || "").toLowerCase();
        const t = (sec.teacher_key || "").toLowerCase();
        return c.includes(query) || s.includes(query) || t.includes(query);
      }
      return true;
    });

    if (filteredSections.length === 0) {
      tbody.innerHTML = `
        <tr>
          <td colspan="9" class="text-center py-4 text-muted">
            <i class="bi bi-search fs-3 d-block mb-2 text-secondary"></i>
            No se encontraron secciones con el criterio de búsqueda.
          </td>
        </tr>
      `;
      return;
    }

    filteredSections.forEach((sec, idx) => {
      const studentTotal = sec.student_count || 45;
      const claimed = sec.claimed_keys;
      const pct = studentTotal > 0 ? Math.round((claimed / studentTotal) * 100) : 0;

      let statusBadge = "";
      let progressColor = "bg-secondary";
      if (claimed === 0) {
        statusBadge = `<span class="badge bg-light text-secondary border">⚪ Sin Activar (0%)</span>`;
        progressColor = "bg-secondary";
      } else if (claimed < studentTotal) {
        statusBadge = `<span class="badge bg-warning text-dark"><i class="bi bi-clock-history me-1"></i>En Progreso (${pct}%)</span>`;
        progressColor = "bg-warning";
      } else {
        statusBadge = `<span class="badge bg-success"><i class="bi bi-check-all me-1"></i>Aula Completa (100%)</span>`;
        progressColor = "bg-success";
      }

      let planBadge = "";
      let payActionBtn = "";
      if (sec.is_paid) {
        planBadge = `<span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1"><i class="bi bi-check-circle-fill me-1"></i>Pagada ($5)</span>`;
        payActionBtn = `<span class="badge bg-light text-success border border-success py-1 px-2 small" title="Comisión del 20% ($1.00 USD) acreditada al Docente Guía"><i class="bi bi-wallet2 me-1"></i>$1 Docente OK</span>`;
      } else {
        planBadge = `<span class="badge bg-warning-subtle text-dark border border-warning-subtle px-2 py-1"><i class="bi bi-gift-fill me-1"></i>Beca Aula ($0)</span>`;
        payActionBtn = `<button onclick="upgradeSectionToPaidAdmin('${sec.section_code}', '${(sec.school_name || '').replace(/'/g, "\\'")}')" class="btn btn-warning btn-xs fw-bold py-1 px-2 text-dark shadow-sm" title="Registrar pago de $5.00 USD (Acredita $1.00 al docente y conserva vinculaciones de los alumnos)"><i class="bi bi-currency-dollar me-1"></i>Pagar $5</button>`;
      }

      tbody.innerHTML += `
        <tr>
          <td class="text-muted">${idx + 1}</td>
          <td><span class="badge bg-dark font-monospace">${sec.section_code}</span></td>
          <td><strong>${sec.school_name || 'Instituto Nacional'}</strong></td>
          <td>
            <div class="d-flex align-items-center gap-1">
              <span class="font-monospace fw-bold text-primary user-select-all">${sec.teacher_key}</span>
              <button onclick="copySingleKey('${sec.teacher_key}', this)" class="btn btn-outline-secondary btn-xs py-0 px-1" title="Copiar Clave Docente">
                <i class="bi bi-clipboard"></i>
              </button>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center gap-2">
              <div class="progress flex-grow-1" style="height: 8px;">
                <div class="progress-bar ${progressColor}" role="progressbar" style="width: ${pct}%;"></div>
              </div>
              <span class="small fw-bold text-muted">${pct}%</span>
            </div>
            <small class="text-muted" style="font-size: 0.72rem;">${claimed} de ${studentTotal} estudiantes vinculados</small>
          </td>
          <td class="text-center">
            ${claimed > 0 ? `<span class="badge bg-success fs-6">${claimed}</span>` : `<span class="text-muted">0</span>`}
          </td>
          <td class="text-center">${planBadge}</td>
          <td>${statusBadge}</td>
          <td class="text-center">
            <div class="d-flex justify-content-center align-items-center gap-1 flex-wrap">
              ${payActionBtn}
              <div class="btn-group btn-group-sm">
                <button onclick="openSectionModal('${sec.section_code}')" class="btn btn-outline-primary btn-xs fw-semibold py-1 px-2" title="Ver lista de alumnos y claves">
                  <i class="bi bi-eye-fill me-1"></i> Nómina
                </button>
                <a href="/docentes?seccion=${sec.section_code}" target="_blank" class="btn btn-outline-success btn-xs fw-semibold py-1 px-2" title="Abrir Perfil Docente de esta aula en vivo">
                  <i class="bi bi-person-badge me-1"></i> Perfil
                </a>
                <a href="/docentes/exportar-csv?seccion=${sec.section_code}" class="btn btn-outline-secondary btn-xs py-1 px-2" title="Descargar CSV del aula">
                  <i class="bi bi-download"></i>
                </a>
              </div>
            </div>
          </td>
        </tr>
      `;
    });
  }

  // ==========================================
  // MODAL DE NÓMINA DE SECCIÓN (API)
  // ==========================================
  function openSectionModal(sectionCode) {
    currentModalSection = sectionCode;
    document.getElementById("sectionModalLabel").innerText = `Cargando sección ${sectionCode}...`;
    document.getElementById("modal-tbody").innerHTML = `<tr><td colspan="8" class="text-center py-3 text-muted">Cargando nómina oficial...</td></tr>`;

    const modalElem = new bootstrap.Modal(document.getElementById('sectionDetailModal'));
    modalElem.show();

    fetch(`/api/admin/section-licenses/${sectionCode}`)
      .then(r => r.json())
      .then(data => {
        if (data.success) {
          currentModalKeys = data.keys;
          currentModalSchool = data.school_name;
          currentModalTeacherKey = data.teacher_key;

          document.getElementById("sectionModalLabel").innerText = `Sección: ${data.section_code}`;
          document.getElementById("sectionModalSubtitle").innerText = `${data.school_name || 'Institución Educativa'} • Total Claves: ${data.total_keys}`;
          document.getElementById("modal-doc-key").innerText = data.teacher_key || 'No asignada';
          document.getElementById("modal-total-keys").innerText = data.total_keys - 1; // excluir docente del conteo alumno
          document.getElementById("modal-claimed-keys").innerText = data.claimed_count;
          document.getElementById("modal-available-keys").innerText = data.available_count;
          const docBtn = document.getElementById("modal-view-docente-btn");
          if (docBtn) {
            docBtn.href = `/docentes?seccion=${encodeURIComponent(data.section_code)}`;
          }

          const planBadgeElem = document.getElementById("modal-plan-badge");
          const upgradeBtnElem = document.getElementById("modal-upgrade-paid-btn");
          if (data.is_paid) {
            if (planBadgeElem) planBadgeElem.innerHTML = `<span class="badge bg-success"><i class="bi bi-check-circle-fill me-1"></i>Oficial Pagada ($5.00)</span>`;
            if (upgradeBtnElem) upgradeBtnElem.classList.add("d-none");
          } else {
            if (planBadgeElem) planBadgeElem.innerHTML = `<span class="badge bg-warning text-dark"><i class="bi bi-gift-fill me-1"></i>Beca Aula ($0.00)</span>`;
            if (upgradeBtnElem) upgradeBtnElem.classList.remove("d-none");
          }

          renderModalTable(data.keys);
        }
      });
  }

  async function upgradeSectionToPaidAdmin(sectionCode, schoolName) {
    const confirmMsg = `¿Registrar Pago Oficial de $5.00 USD para la sección ${sectionCode}?\n\n` +
      `Institución: ${schoolName || 'Instituto Nacional'}\n\n` +
      `• Se generará orden oficial de $5.00 USD en caja.\n` +
      `• Se acreditará automáticamente $1.00 USD (20%) de comisión al Docente Guía.\n` +
      `• Los 45 alumnos conservarán sus claves, celulares vinculados y notas de exámenes sin interrupción.\n\n` +
      `¿Desea continuar?`;

    if (!confirm(confirmMsg)) return;

    try {
      const resp = await fetch("/api/admin/upgrade-section-paid", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          section_code: sectionCode,
          payment_method: "chivo",
          payment_reference: `CHIVO-SEC-${sectionCode}`
        })
      });
      const data = await resp.json();
      if (!resp.ok || !data.success) {
        alert("Error al actualizar la sección: " + (data.error || data.msg || "Error de servidor"));
        return;
      }

      alert(`✅ ¡Sección ${sectionCode} actualizada a Pagada exitosamente!\n\n` +
            `• Orden: ${data.order_id}\n` +
            `• Monto en caja: $${data.amount_usd.toFixed(2)} USD\n` +
            `• Comisión Docente Guía: $${data.commission_usd.toFixed(2)} USD (20%)\n\n` +
            `El panel se actualizará.`);
      window.location.reload();
    } catch (err) {
      alert("Error de conexión al procesar el pago: " + err.message);
    }
  }

  function upgradeCurrentModalSectionPaid() {
    if (!currentModalSection) return;
    upgradeSectionToPaidAdmin(currentModalSection, currentModalSchool);
  }

  function onModalSearchInput() {
    const q = (document.getElementById("modal-table-search").value || "").trim().toLowerCase();
    if (!currentModalKeys) return;
    const filtered = currentModalKeys.filter(k => {
      return (k.license_key || "").toLowerCase().includes(q) ||
             (k.student_name || "").toLowerCase().includes(q) ||
             (k.student_nie || "").toLowerCase().includes(q) ||
             (k.device_id || "").toLowerCase().includes(q);
    });
    renderModalTable(filtered);
  }

  function renderModalTable(keys) {
    const tbody = document.getElementById("modal-tbody");
    tbody.innerHTML = "";

    if (!keys || keys.length === 0) {
      tbody.innerHTML = `<tr><td colspan="8" class="text-center py-3 text-muted">No se encontraron registros.</td></tr>`;
      return;
    }

    keys.forEach((k, idx) => {
      const isDoc = k.license_key.startsWith("DOC-");
      const isClaimed = k.is_claimed === 1;

      const roleBadge = isDoc 
        ? `<span class="badge bg-warning text-dark">Docente Guía</span>`
        : `<span class="badge bg-light text-dark border">Alumno #${idx}</span>`;

      const estadoBadge = isClaimed
        ? `<span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Activa en Dispositivo</span>`
        : `<span class="badge bg-secondary-subtle text-secondary border">Disponible para Entregar</span>`;

      let alumnoTxt = `<span class="text-muted">-</span>`;
      if (k.student_name) {
        alumnoTxt = `<strong>${k.student_name}</strong>`;
        if (k.student_nie) alumnoTxt += ` <span class="text-muted font-monospace">(${k.student_nie})</span>`;
      }

      const deviceTxt = isClaimed 
        ? `<span class="font-monospace text-dark">${k.device_id || 'Equipo'}</span>`
        : `<span class="text-muted fst-italic">Sin vincular</span>`;

      const claimedDate = k.claimed_at ? k.claimed_at.substring(0, 16) : '-';

      tbody.innerHTML += `
        <tr class="${isClaimed ? 'table-success-subtle' : ''}">
          <td class="text-muted">${idx + 1}</td>
          <td>${roleBadge}</td>
          <td class="font-monospace fw-bold text-primary user-select-all">${k.license_key}</td>
          <td>${estadoBadge}</td>
          <td>${alumnoTxt}</td>
          <td style="font-size: 0.75rem;">${deviceTxt}</td>
          <td class="text-muted" style="font-size: 0.75rem;">${claimedDate}</td>
          <td class="text-center">
            <div class="d-flex justify-content-center gap-1">
              <button onclick="copySingleKey('${k.license_key}', this)" class="btn btn-outline-secondary btn-xs py-0 px-2" title="Copiar clave">
                <i class="bi bi-clipboard"></i>
              </button>
              ${isClaimed ? `
                <button onclick="releaseSpecificKey('${k.license_key}')" class="btn btn-outline-warning btn-xs py-0 px-2" title="Liberar equipo">
                  <i class="bi bi-unlock"></i>
                </button>
              ` : ''}
              <button onclick="deleteSpecificKey('${k.license_key}')" class="btn btn-outline-danger btn-xs py-0 px-2" title="Eliminar clave">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          </td>
        </tr>
      `;
    });
  }

  function copyModalSectionWhatsApp() {
    if (!currentModalKeys || currentModalKeys.length === 0) return;
    let msg = `*SIMULADOR AVANZO 2026 - LISTADO DE AULA*\n`;
    msg += `🏫 Institución: ${currentModalSchool}\n`;
    msg += `📚 Sección: ${currentModalSection}\n`;
    msg += `👨‍🏫 Clave Docente Guía: \`${currentModalTeacherKey}\`\n\n`;
    msg += `*CLAVES INDIVIDUALES PARA ALUMNOS (1 por alumno):*\n`;

    let studentNum = 1;
    currentModalKeys.forEach(k => {
      if (!k.license_key.startsWith("DOC-")) {
        const estado = k.is_claimed ? " [ACTIVADA]" : "";
        msg += `*Alumno #${studentNum}:* \`${k.license_key}\`${estado}\n`;
        studentNum++;
      }
    });

    msg += `\n*Instrucciones de uso:* Abre https://simuladoravanzosv.vercel.app en tu laptop o celular, ingresa tu clave y practica con cronómetro oficial.`;

    navigator.clipboard.writeText(msg);
    alert("¡Nómina completa copiada al portapapeles en formato WhatsApp!");
  }

  function downloadModalSectionCsv() {
    window.location.href = `/docentes/exportar-csv?seccion=${currentModalSection}`;
  }

  function releaseSpecificKey(key) {
    if (confirm(`¿Deseas desvincular el dispositivo de la clave ${key}? El estudiante podrá activarla nuevamente.`)) {
      fetch("/api/admin/release-device", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ license_key: key })
      })
      .then(r => r.json())
      .then(data => {
        if (data.success) {
          alert("¡Dispositivo liberado exitosamente!");
          openSectionModal(currentModalSection);
        }
      });
    }
  }

  function deleteSpecificKey(key) {
    if (!confirm(`⚠️ ¿Deseas ELIMINAR permanentemente la clave:\n\n${key}\n\nEsta acción quitará la licencia del sistema. Podrás crear una nueva en cualquier momento si la necesitas.`)) {
      return;
    }

    fetch("/api/admin/delete-license", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ license_key: key })
    })
    .then(r => r.json())
    .then(data => {
      if (data.success) {
        alert(`Clave ${key} eliminada correctamente.`);
        // 1. Quitar de allLicenses
        allLicenses = allLicenses.filter(l => l.license_key !== key);
        // 2. Si está en el modal de sección, refrescar
        if (window.currentModalKeys) {
          window.currentModalKeys = window.currentModalKeys.filter(l => l.license_key !== key);
          renderModalTable(window.currentModalKeys);
          const totalKeysElem = document.getElementById("modal-total-keys");
          if (totalKeysElem) {
            totalKeysElem.innerText = window.currentModalKeys.filter(k => !k.license_key.startsWith("DOC-")).length;
          }
        }
        // 3. Si está en individualSummary, refrescar
        if (window.individualSummary && window.individualSummary.items) {
          window.individualSummary.items = window.individualSummary.items.filter(l => l.license_key !== key);
          window.individualSummary.total = window.individualSummary.items.length;
          window.individualSummary.available = window.individualSummary.items.filter(l => !l.is_claimed).length;
          renderIndividualTable();
        }
        // 4. Refrescar inventario general
        renderInventoryTable();
      } else {
        alert("Error al eliminar la clave: " + (data.error || "Intente de nuevo"));
      }
    })
    .catch(err => {
      alert("Error de conexión al intentar eliminar la clave.");
    });
  }

  function addNewStudentToSection() {
    if (!currentModalSection) return;
    const name = prompt(`Añadir nueva clave de estudiante al aula ${currentModalSection}:\n\nNombre del estudiante (o dejar en blanco):`) || "";
    const nie = prompt("NIE del estudiante (opcional):") || "";
    
    fetch("/api/admin/add-section-license", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        section_code: currentModalSection,
        student_name: name.trim(),
        student_nie: nie.trim()
      })
    })
    .then(r => r.json())
    .then(data => {
      if (data.success && data.license) {
        alert(`¡Clave creada exitosamente!\n\nNueva Clave: ${data.license.license_key}\nAsignada a: ${name || 'Alumno adicional'}`);
        openSectionModal(currentModalSection);
        const newLic = {
          id: data.license.id,
          license_key: data.license.license_key,
          plan_type: 'seccion',
          section_code: currentModalSection,
          school_name: data.license.school_name,
          price_paid: 0.0,
          created_at: data.license.created_at,
          is_active: 1,
          is_claimed: 0,
          claimed_at: null,
          device_id: null,
          student_name: name.trim(),
          student_nie: nie.trim(),
          notes: data.license.notes
        };
        allLicenses.unshift(newLic);
        renderInventoryTable();
      } else {
        alert("Error al crear la clave: " + (data.error || "Intente de nuevo"));
      }
    })
    .catch(err => {
      alert("Error de conexión al crear la clave.");
    });
  }

  // ==========================================
  // VISTA 2: MONITOR DE LICENCIAS INDIVIDUALES
  // ==========================================
  function filterIndividual(filterType) {
    currentIndFilter = filterType;
    document.querySelectorAll(".ind-filter-btn").forEach(btn => {
      if (btn.getAttribute("data-indfilter") === filterType) {
        btn.classList.remove("btn-outline-secondary");
        btn.classList.add("btn-primary");
      } else {
        btn.classList.remove("btn-primary");
        btn.classList.add("btn-outline-secondary");
      }
    });
    renderIndividualTable();
  }

  function onSearchIndividual() {
    renderIndividualTable();
  }

  function clearSearchIndividual() {
    document.getElementById("ind-search").value = "";
    renderIndividualTable();
  }

  function renderIndividualTable() {
    const query = (document.getElementById("ind-search").value || "").trim().toLowerCase();
    const tbody = document.getElementById("individual-tbody");
    tbody.innerHTML = "";

    const items = individualSummary.items || [];

    filteredIndividual = items.filter(lic => {
      if (currentIndFilter === 'activas' && !lic.is_claimed) return false;
      if (currentIndFilter === 'disponibles' && lic.is_claimed) return false;
      if (currentIndFilter === 'becas' && !(lic.price_paid === 0.0 || lic.license_key.includes("BECA"))) return false;

      if (query) {
        const k = (lic.license_key || "").toLowerCase();
        const stu = (lic.student_name || "").toLowerCase();
        const nie = (lic.student_nie || "").toLowerCase();
        const sch = (lic.school_name || "").toLowerCase();
        const not = (lic.notes || "").toLowerCase();
        const dev = (lic.device_id || "").toLowerCase();
        return k.includes(query) || stu.includes(query) || nie.includes(query) ||
               sch.includes(query) || not.includes(query) || dev.includes(query);
      }
      return true;
    });

    document.getElementById("ind-pagination-summary").innerText = `Mostrando ${filteredIndividual.length} de ${items.length} licencias individuales`;

    if (filteredIndividual.length === 0) {
      tbody.innerHTML = `
        <tr>
          <td colspan="10" class="text-center py-4 text-muted">
            <i class="bi bi-search fs-3 d-block mb-2 text-secondary"></i>
            No se encontraron licencias individuales con los criterios seleccionados.
          </td>
        </tr>
      `;
      return;
    }

    filteredIndividual.forEach((lic, idx) => {
      const isBeca = (lic.price_paid === 0.0 || (lic.license_key || "").includes("BECA"));
      const isClaimed = lic.is_claimed === 1;

      const typeBadge = isBeca
        ? `<span class="badge bg-success-subtle text-success border"><i class="bi bi-award me-1"></i>Beca Oficial ($0.00)</span>`
        : `<span class="badge bg-primary">Regular ($1.00)</span>`;

      const estadoBadge = isClaimed
        ? `<span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Activa en Dispositivo</span>`
        : `<span class="badge bg-secondary-subtle text-secondary border">Disponible</span>`;

      let alumnoTxt = `<span class="text-muted">-</span>`;
      if (lic.student_name) {
        alumnoTxt = `<strong>${lic.student_name}</strong>`;
        if (lic.student_nie) alumnoTxt += ` <span class="text-muted font-monospace">(${lic.student_nie})</span>`;
      }

      const deviceTxt = isClaimed
        ? `<span class="font-monospace text-dark">${lic.device_id || 'Equipo'}</span>`
        : `<span class="text-muted fst-italic">Sin vincular</span>`;

      const actDate = lic.claimed_at ? lic.claimed_at.substring(0, 16) : '-';

      tbody.innerHTML += `
        <tr class="${isClaimed ? 'table-success-subtle' : ''}">
          <td class="text-muted">${idx + 1}</td>
          <td class="font-monospace fw-bold text-primary user-select-all">${lic.license_key}</td>
          <td>${typeBadge}</td>
          <td>${alumnoTxt}</td>
          <td>${lic.school_name || '<span class="text-muted">-</span>'}</td>
          <td>${estadoBadge}</td>
          <td style="font-size: 0.75rem;">${deviceTxt}</td>
          <td class="text-muted" style="font-size: 0.75rem;">${actDate}</td>
          <td class="small text-muted">${lic.notes || '-'}</td>
          <td class="text-center">
            <div class="d-flex justify-content-center gap-1">
              <button onclick="copySingleKey('${lic.license_key}', this)" class="btn btn-outline-secondary btn-xs py-0 px-2" title="Copiar clave">
                <i class="bi bi-clipboard"></i>
              </button>
              ${isClaimed ? `
                <button onclick="releaseSpecificKey('${lic.license_key}')" class="btn btn-outline-warning btn-xs py-0 px-2" title="Liberar equipo">
                  <i class="bi bi-unlock"></i>
                </button>
              ` : ''}
              <button onclick="deleteSpecificKey('${lic.license_key}')" class="btn btn-outline-danger btn-xs py-0 px-2" title="Eliminar licencia">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          </td>
        </tr>
      `;
    });
  }

  // ==========================================
  // VISTA 3: INVENTARIO GENERAL COMPLETO
  // ==========================================
  function setFilter(filterType) {
    currentFilter = filterType;
    document.querySelectorAll(".filter-btn").forEach(btn => {
      if (btn.getAttribute("data-filter") === filterType) {
        btn.classList.remove("btn-outline-secondary");
        btn.classList.add("btn-primary");
      } else {
        btn.classList.remove("btn-primary");
        btn.classList.add("btn-outline-secondary");
      }
    });
    currentPage = 1;
    applyFiltersAndRender();
  }

  function onSearchInput() {
    currentPage = 1;
    applyFiltersAndRender();
  }

  function clearSearch() {
    document.getElementById("lic-search").value = "";
    currentPage = 1;
    applyFiltersAndRender();
  }

  function changePageSize() {
    pageSize = parseInt(document.getElementById("page-size-select").value) || 50;
    currentPage = 1;
    applyFiltersAndRender();
  }

  function applyFiltersAndRender() {
    const query = (document.getElementById("lic-search").value || "").trim().toLowerCase();

    filteredLicenses = allLicenses.filter(lic => {
      if (currentFilter === 'docentes') {
        if (!lic.license_key.startsWith('DOC-')) return false;
      } else if (currentFilter === 'alumnos') {
        if (lic.license_key.startsWith('DOC-') || lic.license_key.startsWith('AVZ-BECA')) return false;
      } else if (currentFilter === 'becas_ind') {
        if (!lic.license_key.startsWith('AVZ-BECA')) return false;
      } else if (currentFilter === 'disponibles') {
        if (lic.is_claimed) return false;
      } else if (currentFilter === 'activas') {
        if (!lic.is_claimed) return false;
      }

      if (query) {
        const k = (lic.license_key || "").toLowerCase();
        const sec = (lic.section_code || "").toLowerCase();
        const sch = (lic.school_name || "").toLowerCase();
        const stu = (lic.student_name || "").toLowerCase();
        const nie = (lic.student_nie || "").toLowerCase();
        const notes = (lic.notes || "").toLowerCase();
        const dev = (lic.device_id || "").toLowerCase();

        return k.includes(query) || sec.includes(query) || sch.includes(query) ||
               stu.includes(query) || nie.includes(query) || notes.includes(query) || dev.includes(query);
      }
      return true;
    });

    renderTablePage();
    renderPagination();
  }

  function renderTablePage() {
    const tbody = document.getElementById("inventory-tbody");
    tbody.innerHTML = "";

    const total = filteredLicenses.length;
    document.getElementById("filtered-total").innerText = total;

    if (total === 0) {
      tbody.innerHTML = `
        <tr>
          <td colspan="9" class="text-center py-4 text-muted">
            <i class="bi bi-search fs-3 d-block mb-2 text-secondary"></i>
            No se encontraron licencias con los criterios de búsqueda seleccionados.
          </td>
        </tr>
      `;
      document.getElementById("showing-range").innerText = "0-0";
      return;
    }

    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize, total);
    document.getElementById("showing-range").innerText = `${startIndex + 1}-${endIndex}`;

    const pageItems = filteredLicenses.slice(startIndex, endIndex);

    pageItems.forEach((lic, idx) => {
      const rowNum = startIndex + idx + 1;
      const isDoc = lic.license_key.startsWith("DOC-");
      const isBecaInd = lic.license_key.startsWith("AVZ-BECA");

      let badgePlan = "";
      if (isDoc) {
        badgePlan = `<span class="badge bg-warning text-dark"><i class="bi bi-mortarboard-fill me-1"></i>Docente Guía</span>`;
      } else if (isBecaInd) {
        badgePlan = `<span class="badge bg-success"><i class="bi bi-award me-1"></i>Beca Individual</span>`;
      } else if (lic.plan_type === 'seccion') {
        badgePlan = `<span class="badge bg-info-subtle text-dark border">Alumno Aula</span>`;
      } else {
        badgePlan = `<span class="badge bg-primary">Individual ($1)</span>`;
      }

      const estadoBadge = lic.is_claimed
        ? `<span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Activa</span>`
        : `<span class="badge bg-secondary-subtle text-secondary border">Disponible</span>`;

      let asignacionTxt = "";
      if (lic.student_name) {
        asignacionTxt = `<strong>${lic.student_name}</strong>`;
        if (lic.student_nie) asignacionTxt += ` <span class="text-muted font-monospace">(${lic.student_nie})</span>`;
      } else if (lic.section_code) {
        asignacionTxt = `<span class="badge bg-light text-dark border">${lic.section_code}</span>`;
        if (lic.school_name) asignacionTxt += ` <span class="text-muted small">${lic.school_name}</span>`;
      } else if (lic.notes) {
        asignacionTxt = `<span class="text-muted">${lic.notes}</span>`;
      } else {
        asignacionTxt = `<span class="text-muted">-</span>`;
      }

      const deviceTxt = lic.is_claimed
        ? `<span class="font-monospace text-dark">${lic.device_id || 'Equipo'}</span>`
        : `<span class="text-muted fst-italic">Sin vincular</span>`;

      const dateTxt = lic.created_at ? lic.created_at.substring(0, 16) : '-';

      tbody.innerHTML += `
        <tr>
          <td class="text-muted">${rowNum}</td>
          <td class="font-monospace fw-bold text-primary">
            <span class="user-select-all">${lic.license_key}</span>
          </td>
          <td>${badgePlan}</td>
          <td class="fw-semibold text-dark">$${parseFloat(lic.price_paid || 0).toFixed(2)}</td>
          <td>${estadoBadge}</td>
          <td>${asignacionTxt}</td>
          <td style="font-size: 0.78rem;">${deviceTxt}</td>
          <td class="text-muted" style="font-size: 0.75rem;">${dateTxt}</td>
          <td class="text-center">
            <div class="d-flex justify-content-center gap-1">
              <button onclick="copySingleKey('${lic.license_key}', this)" class="btn btn-outline-primary btn-xs py-0 px-2" title="Copiar clave">
                <i class="bi bi-clipboard"></i>
              </button>
              ${lic.is_claimed ? `
                <button onclick="releaseSpecificKey('${lic.license_key}')" class="btn btn-outline-warning btn-xs py-0 px-2" title="Liberar equipo">
                  <i class="bi bi-unlock"></i>
                </button>
              ` : ''}
              <button onclick="deleteSpecificKey('${lic.license_key}')" class="btn btn-outline-danger btn-xs py-0 px-2" title="Eliminar licencia">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          </td>
        </tr>
      `;
    });
  }

  function renderPagination() {
    const total = filteredLicenses.length;
    const totalPages = Math.max(1, Math.ceil(total / pageSize));
    document.getElementById("current-page-display").innerText = currentPage;
    document.getElementById("total-pages-display").innerText = totalPages;

    const nav = document.getElementById("pagination-nav");
    nav.innerHTML = "";

    if (totalPages <= 1) return;

    nav.innerHTML += `
      <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
        <a class="page-link" href="javascript:void(0)" onclick="goToPage(${currentPage - 1})">«</a>
      </li>
    `;

    let startP = Math.max(1, currentPage - 2);
    let endP = Math.min(totalPages, startP + 4);
    if (endP - startP < 4) startP = Math.max(1, endP - 4);

    if (startP > 1) {
      nav.innerHTML += `<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="goToPage(1)">1</a></li>`;
      if (startP > 2) nav.innerHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
    }

    for (let p = startP; p <= endP; p++) {
      nav.innerHTML += `
        <li class="page-item ${p === currentPage ? 'active' : ''}">
          <a class="page-link" href="javascript:void(0)" onclick="goToPage(${p})">${p}</a>
        </li>
      `;
    }

    if (endP < totalPages) {
      if (endP < totalPages - 1) nav.innerHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
      nav.innerHTML += `<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="goToPage(${totalPages})">${totalPages}</a></li>`;
    }

    nav.innerHTML += `
      <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
        <a class="page-link" href="javascript:void(0)" onclick="goToPage(${currentPage + 1})">»</a>
      </li>
    `;
  }

  function goToPage(page) {
    const totalPages = Math.max(1, Math.ceil(filteredLicenses.length / pageSize));
    if (page < 1 || page > totalPages) return;
    currentPage = page;
    renderTablePage();
    renderPagination();
  }

  function copySingleKey(key, btnElem) {
    navigator.clipboard.writeText(key).then(() => {
      if (btnElem) {
        const orig = btnElem.innerHTML;
        btnElem.innerHTML = `<i class="bi bi-check-lg text-success"></i>`;
        setTimeout(() => { btnElem.innerHTML = orig; }, 1200);
      }
    });
  }

  // ==========================================
  // GENERADORES (INDIVIDUAL & SECCIÓN)
  // ==========================================
  function updateSingleFormUI() {
    const type = document.getElementById("single-type").value;
    const isDocente = type.startsWith("docente_");
    const count = parseInt(document.getElementById("single-count").value) || 1;
    const studentInfo = document.getElementById("single-student-info");
    if (isDocente || count > 1) {
      studentInfo.style.opacity = "0.5";
    } else {
      studentInfo.style.opacity = "1.0";
    }
  }

  function setSingleCount(val) {
    document.getElementById("single-count").value = val;
    updateSingleFormUI();
  }

  function generateIndividualKeyAdmin(e) {
    if (e) e.preventDefault();
    const type = document.getElementById("single-type").value;
    const count = parseInt(document.getElementById("single-count").value) || 1;
    const school = document.getElementById("single-school").value.trim();
    const notes = document.getElementById("single-notes").value.trim();
    const name = document.getElementById("single-name").value.trim();
    const nie = document.getElementById("single-nie").value.trim();

    fetch("/api/admin/generate-keys", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        mode: "individual",
        license_type: type,
        count: count,
        school_name: school,
        custom_notes: notes,
        student_name: name,
        student_nie: nie
      })
    })
    .then(r => r.json())
    .then(data => {
      if (data.success && data.keys && data.keys.length > 0) {
        lastBatchKeys = data.keys;
        lastBatchSchool = school || "El Salvador";
        lastBatchSection = data.type_label || "Licencia Individual";
        lastBatchType = type;

        document.getElementById("batch-result-title").innerText = `${data.count} Clave(s) Generada(s) - ${data.type_label}`;
        const tbody = document.getElementById("batch-table-body");
        tbody.innerHTML = "";

        data.keys.forEach(k => {
          tbody.innerHTML += `
            <tr>
              <td>${k.number}</td>
              <td><span class="badge ${k.type.includes('Docente') ? 'bg-warning text-dark' : 'bg-primary'}">${k.type}</span></td>
              <td class="font-monospace fw-bold text-primary">${k.key}</td>
              <td class="text-muted small">${k.notes}</td>
              <td class="text-center">
                <button onclick="copySingleKey('${k.key}', this)" class="btn btn-outline-secondary btn-xs py-0 px-2" title="Copiar">
                  <i class="bi bi-clipboard"></i>
                </button>
              </td>
            </tr>
          `;
          const newLic = {
            id: Date.now(),
            license_key: k.key,
            plan_type: k.plan_type,
            section_code: "",
            school_name: school,
            price_paid: k.price,
            created_at: new Date().toISOString().replace("T", " ").substring(0, 19),
            is_active: 1,
            is_claimed: 0,
            claimed_at: null,
            device_id: null,
            student_name: name,
            student_nie: nie,
            notes: k.notes
          };
          allLicenses.unshift(newLic);
          if (individualSummary.items) {
            individualSummary.items.unshift(newLic);
            individualSummary.total++;
            individualSummary.available++;
          }
        });

        document.getElementById("inv-total-counter").innerText = allLicenses.length;
        document.getElementById("tab-count-todas").innerText = allLicenses.length;
        document.getElementById("stat-total-available").innerText = parseInt(document.getElementById("stat-total-available").innerText) + data.count;

        document.getElementById("batch-results-box").classList.remove("d-none");
        document.getElementById("batch-results-box").scrollIntoView({ behavior: 'smooth' });

        renderIndividualTable();
        applyFiltersAndRender();

        if (count === 1) {
          copyBatchWhatsApp();
        }
      } else {
        alert("Error al generar las licencias: " + (data.error || "Verifique los datos."));
      }
    });
  }

  function generateSectionBatchAdmin(e) {
    if (e) e.preventDefault();
    const school = document.getElementById("batch-school").value.trim();
    const section = document.getElementById("batch-section").value.trim();
    const count = document.getElementById("batch-count").value;
    const isBeca = document.getElementById("batch-is-beca").checked;

    fetch("/api/admin/generate-keys", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        mode: "seccion",
        school_name: school,
        section_name: section,
        count: count,
        is_beca: isBeca
      })
    })
    .then(r => r.json())
    .then(data => {
      if (data.success && data.keys) {
        lastBatchKeys = data.keys;
        lastBatchSchool = school;
        lastBatchSection = section;
        lastBatchType = isBeca ? "Beca de Aula" : "Paquete de Aula ($5)";

        document.getElementById("batch-result-title").innerText = `Lote para ${section} (${school}) - ${data.count} Claves`;
        const tbody = document.getElementById("batch-table-body");
        tbody.innerHTML = "";

        data.keys.forEach(k => {
          tbody.innerHTML += `
            <tr>
              <td>${k.number}</td>
              <td><span class="badge ${k.type === 'Docente Guía' ? 'bg-warning text-dark' : 'bg-secondary'}">${k.type}</span></td>
              <td class="font-monospace fw-bold text-primary">${k.key}</td>
              <td class="text-muted small">${k.notes}</td>
              <td class="text-center">
                <button onclick="copySingleKey('${k.key}', this)" class="btn btn-outline-secondary btn-xs py-0 px-2" title="Copiar">
                  <i class="bi bi-clipboard"></i>
                </button>
              </td>
            </tr>
          `;
          allLicenses.unshift({
            id: Date.now(),
            license_key: k.key,
            plan_type: 'seccion',
            section_code: section,
            school_name: school,
            price_paid: isBeca ? 0.0 : (5.0 / data.count),
            created_at: new Date().toISOString().replace("T", " ").substring(0, 19),
            is_active: 1,
            is_claimed: 0,
            claimed_at: null,
            device_id: null,
            student_name: "",
            student_nie: "",
            notes: k.notes
          });
        });

        document.getElementById("inv-total-counter").innerText = allLicenses.length;
        document.getElementById("tab-count-todas").innerText = allLicenses.length;

        document.getElementById("batch-results-box").classList.remove("d-none");
        document.getElementById("batch-results-box").scrollIntoView({ behavior: 'smooth' });

        applyFiltersAndRender();
      }
    });
  }

  function dismissBatchBox() {
    document.getElementById("batch-results-box").classList.add("d-none");
  }

  // ==========================================
  // EXPORTACIÓN Y COPIA PARA WHATSAPP
  // ==========================================
  function copyBatchWhatsApp() {
    if (!lastBatchKeys || lastBatchKeys.length === 0) return;
    let msg = `*SIMULADOR AVANZO 2026 - LISTADO DE CLAVES*\n`;
    if (lastBatchSchool) msg += `🏫 Sede / Escuela: ${lastBatchSchool}\n`;
    if (lastBatchSection) msg += `📚 Asignación: ${lastBatchSection}\n\n`;
    msg += `Cada clave es única e intransferible (se vincula al primer dispositivo que la active):\n\n`;

    lastBatchKeys.forEach(k => {
      msg += `*${k.number}.* [${k.type}] \`${k.key}\`\n`;
    });

    msg += `\n*Pasos para estudiar:* Abre https://simuladoravanzosv.vercel.app en tu teléfono o PC, ingresa tu clave y comienza tu preparación con ítems oficiales. ¡Muchos éxitos!`;

    navigator.clipboard.writeText(msg);
    alert("¡Listado formateado y copiado exitosamente al portapapeles para enviar por WhatsApp!");
  }

  function downloadBatchTxt() {
    if (!lastBatchKeys || lastBatchKeys.length === 0) return;
    let content = `==========================================================\n`;
    content += `   SIMULADOR AVANZO EL SALVADOR 2026 - LISTADO DE CLAVES\n`;
    content += `==========================================================\n\n`;
    content += `Institución:  ${lastBatchSchool}\n`;
    content += `Asignación:   ${lastBatchSection}\n`;
    content += `Total Claves: ${lastBatchKeys.length}\n`;
    content += `Plataforma:   https://simuladoravanzosv.vercel.app\n\n`;
    content += `----------------------------------------------------------\n`;
    content += `CLAVES ASIGNADAS:\n`;
    content += `----------------------------------------------------------\n`;
    lastBatchKeys.forEach(k => {
      content += `${k.number}. [${k.type}] ${k.key} (${k.notes})\n`;
    });
    content += `\n----------------------------------------------------------\n`;
    content += `INSTRUCCIONES DE ACTIVACIÓN:\n`;
    content += `1. Ingresar a https://simuladoravanzosv.vercel.app\n`;
    content += `2. Hacer clic en "Activar ($1)" o "Mi Perfil".\n`;
    content += `3. Ingresar la clave asignada y comenzar a practicar.\n`;
    content += `==========================================================\n`;

    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    const cleanSection = (lastBatchSection || "Lote").replace(/[^a-zA-Z0-9_-]/g, "_");
    a.download = `Claves_AVANZO_${cleanSection}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }

  function downloadBatchCsv() {
    if (!lastBatchKeys || lastBatchKeys.length === 0) return;
    let csv = "\ufeffNumero,Tipo,Clave_Unica,Notas,Precio_USD\n";
    lastBatchKeys.forEach(k => {
      csv += `"${k.number}","${k.type}","${k.key}","${k.notes || ''}","${k.price || 0.0}"\n`;
    });
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    const cleanSection = (lastBatchSection || "Lote").replace(/[^a-zA-Z0-9_-]/g, "_");
    a.download = `Claves_AVANZO_${cleanSection}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }

  // ==========================================
  // LIBERAR DISPOSITIVO Y LIQUIDAR COMISIONES
  // ==========================================
  function releaseDeviceAdmin() {
    const key = document.getElementById("release-key-input").value.trim();
    if (!key) {
      alert("Ingresa la clave que deseas liberar.");
      return;
    }

    if (confirm(`¿Estás seguro de desvincular el dispositivo de la clave ${key}? El estudiante podrá reactivarla en un nuevo equipo.`)) {
      fetch("/api/admin/release-device", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ license_key: key })
      })
      .then(r => r.json())
      .then(data => {
        if (data.success) {
          alert("¡Dispositivo desvinculado con éxito! La clave vuelve a estar disponible para vincularse.");
          const lic = allLicenses.find(l => l.license_key === key);
          if (lic) {
            lic.is_claimed = 0;
            lic.device_id = null;
            applyFiltersAndRender();
          } else {
            window.location.reload();
          }
        } else {
          alert("No se encontró la clave o ya estaba liberada.");
        }
      });
    }
  }

  function payoutPromoter(promoterId, amount, name) {
    if (confirm(`¿Confirmas que has transferido $${amount.toFixed(2)} USD a ${name} vía Chivo/Strike/Blink y deseas marcar su saldo como liquidado?`)) {
      fetch("/api/admin/payout-promoter", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ promoter_id: promoterId, amount: amount })
      })
      .then(r => r.json())
      .then(data => {
        if (data.success) {
          alert("¡Comisión liquidada y registrada exitosamente!");
          window.location.reload();
        } else {
          alert("Error: " + data.msg);
        }
      });
    }
  }

  // ==========================================
  // MODAL CREACIÓN RÁPIDA / EXPRESS DE CLAVES
  // ==========================================
  let quickCreatedKey = "";

  function openQuickCreateModal() {
    document.getElementById("quick-license-form").reset();
    document.getElementById("quick-result-card").classList.add("d-none");
    document.getElementById("btn-submit-quick").disabled = false;
    document.getElementById("btn-submit-quick").innerHTML = `<i class="bi bi-lightning-charge-fill me-1"></i> Generar Clave Ahora`;
    onQuickTypeChange();
    const modal = new bootstrap.Modal(document.getElementById('quickCreateModal'));
    modal.show();
  }

  function onQuickTypeChange() {
    const type = document.getElementById("quick-type").value;
    const secGroup = document.getElementById("quick-section-group");
    const schoolGroup = document.getElementById("quick-school-group");

    if (type === "seccion_add") {
      secGroup.classList.remove("d-none");
      schoolGroup.classList.add("d-none");
    } else {
      secGroup.classList.add("d-none");
      schoolGroup.classList.remove("d-none");
    }
  }

  function submitQuickCreate(e) {
    if (e) e.preventDefault();
    const type = document.getElementById("quick-type").value;
    const name = document.getElementById("quick-name").value.trim();
    const nie = document.getElementById("quick-nie").value.trim();
    const school = document.getElementById("quick-school").value.trim();
    const notes = document.getElementById("quick-notes").value.trim();
    const submitBtn = document.getElementById("btn-submit-quick");

    submitBtn.disabled = true;
    submitBtn.innerHTML = `<span class="spinner-border spinner-border-sm me-1"></span> Generando...`;

    if (type === "seccion_add") {
      const sectionCode = document.getElementById("quick-section-select").value;
      fetch("/api/admin/add-section-license", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          section_code: sectionCode,
          student_name: name,
          student_nie: nie,
          notes: notes
        })
      })
      .then(r => r.json())
      .then(data => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = `<i class="bi bi-lightning-charge-fill me-1"></i> Generar Otra Clave`;
        if (data.success && data.license) {
          showQuickResult(data.license.license_key, name, sectionCode);
          const newLic = {
            id: data.license.id,
            license_key: data.license.license_key,
            plan_type: 'seccion',
            section_code: sectionCode,
            school_name: data.license.school_name,
            price_paid: 0.0,
            created_at: data.license.created_at,
            is_active: 1,
            is_claimed: 0,
            claimed_at: null,
            device_id: null,
            student_name: name,
            student_nie: nie,
            notes: data.license.notes
          };
          allLicenses.unshift(newLic);
          renderInventoryTable();
        } else {
          alert("Error: " + (data.error || "No se pudo generar la clave."));
        }
      })
      .catch(err => {
        submitBtn.disabled = false;
        alert("Error de conexión.");
      });
    } else {
      fetch("/api/admin/generate-keys", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          mode: "individual",
          license_type: type,
          count: 1,
          school_name: school,
          custom_notes: notes,
          student_name: name,
          student_nie: nie
        })
      })
      .then(r => r.json())
      .then(data => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = `<i class="bi bi-lightning-charge-fill me-1"></i> Generar Otra Clave`;
        if (data.success && data.keys && data.keys.length > 0) {
          const k = data.keys[0];
          showQuickResult(k.key, name, school || k.type);
          const newLic = {
            id: Date.now(),
            license_key: k.key,
            plan_type: k.plan_type,
            section_code: "",
            school_name: school,
            price_paid: k.price,
            created_at: new Date().toISOString().replace("T", " ").substring(0, 19),
            is_active: 1,
            is_claimed: 0,
            claimed_at: null,
            device_id: null,
            student_name: name,
            student_nie: nie,
            notes: k.notes
          };
          allLicenses.unshift(newLic);
          if (window.individualSummary && window.individualSummary.items) {
            window.individualSummary.items.unshift(newLic);
            window.individualSummary.total++;
            window.individualSummary.available++;
            renderIndividualTable();
          }
          renderInventoryTable();
        } else {
          alert("Error al generar la clave: " + (data.error || "Intente de nuevo"));
        }
      })
      .catch(err => {
        submitBtn.disabled = false;
        alert("Error de conexión.");
      });
    }
  }

  function showQuickResult(key, studentName, extraInfo) {
    quickCreatedKey = key;
    document.getElementById("quick-result-card").classList.remove("d-none");
    document.getElementById("quick-result-key").innerText = key;

    const waText = encodeURIComponent(
      `Hola ${studentName ? studentName : 'estudiante'}, aquí tienes tu clave personal para el Simulador AVANZO 2026: ${key} - Ingresa en: https://simuladoravanzosv.vercel.app`
    );
    document.getElementById("quick-result-wa").href = `https://wa.me/?text=${waText}`;
  }

  function copyQuickResultKey() {
    if (!quickCreatedKey) return;
    navigator.clipboard.writeText(quickCreatedKey);
    alert(`¡Clave ${quickCreatedKey} copiada exitosamente al portapapeles!`);
  }
</script>
{% endblock %}