{% extends "base.html" %}

{% block title %}Video Tutoriales Oficiales: Estudiantes y Docentes - AVANZO 2026{% endblock %}

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

  <!-- ENCABEZADO PRINCIPAL -->
  <div class="text-center mb-4" style="max-width: 850px; margin: 0 auto;">
    <span class="badge bg-primary text-white fw-bold px-3 py-2 text-uppercase rounded-pill mb-2 shadow-sm">
      <i class="bi bi-play-circle-fill me-1 text-warning"></i> Guía Audiovisual Oficial • Voz de Lorena (El Salvador)
    </span>
    <h1 class="fw-bold text-dark display-6">Centro de Video Tutoriales AVANZO 2026</h1>
    <p class="text-muted lead fs-6">
      Aprende en menos de 2 minutos a utilizar el simulador, rendir evaluaciones, consultar el diagnóstico pedagógico y gestionar tu aula.
    </p>
  </div>

  <!-- SELECTOR DE VIDEO TUTORIAL (PESTAÑAS ESTUDIANTE / DOCENTE) -->
  <ul class="nav nav-pills nav-fill bg-white p-2 rounded-4 shadow-sm border mb-4" id="videoTutorialTabs" role="tablist" style="max-width: 750px; margin: 0 auto 2rem auto;">
    <li class="nav-item" role="presentation">
      <button class="nav-link active fw-bold py-2 rounded-3" id="student-video-tab" data-bs-toggle="tab" data-bs-target="#tab-video-estudiante" type="button" role="tab">
        <i class="bi bi-mortarboard-fill me-2 fs-5 text-primary"></i> 1. Tutorial para Estudiantes
        <span class="badge bg-primary ms-1">1:14 min</span>
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link fw-bold py-2 rounded-3" id="docente-video-tab" data-bs-toggle="tab" data-bs-target="#tab-video-docente" type="button" role="tab">
        <i class="bi bi-person-workspace me-2 fs-5 text-warning"></i> 2. Tutorial para Docentes Guías
        <span class="badge bg-warning text-dark ms-1">1:38 min</span>
      </button>
    </li>
  </ul>

  <!-- CONTENIDO DE LOS VIDEOS -->
  <div class="tab-content" id="videoTutorialTabsContent">

    <!-- ============================================================= -->
    <!-- VIDEO 1: TUTORIAL ESTUDIANTES -->
    <!-- ============================================================= -->
    <div class="tab-pane fade show active" id="tab-video-estudiante" role="tabpanel">
      <!-- REPRODUCTOR -->
      <div class="row justify-content-center mb-5">
        <div class="col-lg-10">
          <div class="card border-0 shadow-lg rounded-4 overflow-hidden" style="background: #040e1c;">
            <div class="ratio ratio-16x9">
              <video controls playsinline preload="metadata" class="w-100 h-100 rounded-top-4">
                <source src="{{ url_for('static', filename='videos/Video_Tutorial_Uso_AVANZO_2026.mp4') }}" type="video/mp4">
                Tu navegador no soporta la reproducción de video HTML5.
              </video>
            </div>
            <div class="card-body p-4 bg-dark text-white border-top border-secondary">
              <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div>
                  <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="badge bg-success text-white fw-bold"><i class="bi bi-mic-fill me-1"></i> Audio Lorena (El Salvador)</span>
                    <span class="badge bg-primary text-white fw-bold">HD 720p / 30 FPS</span>
                    <span class="badge bg-secondary text-white">Duración: 1:14 min</span>
                  </div>
                  <h5 class="fw-bold mb-0 text-white">Video Tutorial para Estudiantes: Registro, Auto-avance y Boleta NIE</h5>
                </div>
                <div class="d-flex gap-2">
                  <a href="{{ url_for('download_tutorial_video') }}" class="btn btn-warning fw-bold text-dark rounded-pill px-4 shadow-sm">
                    <i class="bi bi-download me-1"></i> Descargar MP4 (2.1 MB)
                  </a>
                  <a href="https://wa.me/50372659216?text=Hola%2C%20vi%20el%20video%20tutorial%20del%20Simulador%20AVANZO%20y%20deseo%20activar%20mi%20cuenta" target="_blank" class="btn btn-outline-light rounded-pill px-3">
                    <i class="bi bi-whatsapp text-success me-1"></i> WhatsApp
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- DESGLOSE ESTUDIANTES -->
      <div class="mb-5">
        <div class="text-center mb-4">
          <h3 class="fw-bold text-dark">Pasos Explicados en el Tutorial de Estudiantes</h3>
          <p class="text-muted">Conoce las funciones destacadas diseñadas para tu preparación:</p>
        </div>

        <div class="row g-4">
          <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white">
              <div class="d-flex align-items-center gap-3 mb-3">
                <div class="rounded-circle bg-primary text-white fw-bold d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; font-size: 1.2rem;">1</div>
                <div>
                  <span class="badge bg-primary-subtle text-primary fw-bold text-uppercase">Inicio</span>
                  <h5 class="fw-bold text-dark mb-0">Registro y NIE</h5>
                </div>
              </div>
              <p class="text-muted small mb-0">Ingresa tu nombre completo y número de NIE para que queden vinculados formalmente a tu Boleta Oficial.</p>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white">
              <div class="d-flex align-items-center gap-3 mb-3">
                <div class="rounded-circle bg-danger text-white fw-bold d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; font-size: 1.2rem;">2</div>
                <div>
                  <span class="badge bg-danger-subtle text-danger fw-bold text-uppercase">Examen</span>
                  <h5 class="fw-bold text-dark mb-0">Simulacro Real</h5>
                </div>
              </div>
              <p class="text-muted small mb-0">Cronómetro oficial, avance automático al seleccionar tu respuesta y matriz interactiva de dudas.</p>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white">
              <div class="d-flex align-items-center gap-3 mb-3">
                <div class="rounded-circle bg-success text-white fw-bold d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; font-size: 1.2rem;">3</div>
                <div>
                  <span class="badge bg-success-subtle text-success fw-bold text-uppercase">Didáctica</span>
                  <h5 class="fw-bold text-dark mb-0">Práctica y Flashcards</h5>
                </div>
              </div>
              <p class="text-muted small mb-0">Retroalimentación pedagógica que explica la razón de cada error y fichas de memorización activa.</p>
            </div>
          </div>

          <div class="col-md-6 col-lg-6">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white">
              <div class="d-flex align-items-center gap-3 mb-3">
                <div class="rounded-circle bg-info text-dark fw-bold d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; font-size: 1.2rem;">4</div>
                <div>
                  <span class="badge bg-info-subtle text-info-emphasis fw-bold text-uppercase">Acreditación</span>
                  <h5 class="fw-bold text-dark mb-0">Boleta con Firma Criptográfica</h5>
                </div>
              </div>
              <p class="text-muted small mb-0">Descarga tu Boleta en PDF con calificación sobre 10, semáforo por materia, nivel de logro y código SHA-256.</p>
            </div>
          </div>

          <div class="col-md-12 col-lg-6">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white border-start border-4 border-warning">
              <div class="d-flex align-items-center gap-3 mb-3">
                <div class="rounded-circle bg-warning text-dark fw-bold d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; font-size: 1.2rem;">5</div>
                <div>
                  <span class="badge bg-warning text-dark fw-bold text-uppercase">Acceso Solidario</span>
                  <h5 class="fw-bold text-dark mb-0">Planes Accesibles y Activación Rápida</h5>
                </div>
              </div>
              <p class="text-muted small mb-0">
                Plan Individual por $1.00 USD (vitalicio) y Combo Aula por $5.00 USD para 45 estudiantes ($0.11 c/u). Pagos por Chivo Wallet, Strike/Blink y Banco Agrícola.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ============================================================= -->
    <!-- VIDEO 2: TUTORIAL DOCENTES GUÍAS -->
    <!-- ============================================================= -->
    <div class="tab-pane fade" id="tab-video-docente" role="tabpanel">
      <!-- REPRODUCTOR -->
      <div class="row justify-content-center mb-5">
        <div class="col-lg-10">
          <div class="card border-0 shadow-lg rounded-4 overflow-hidden" style="background: #040e1c;">
            <div class="ratio ratio-16x9">
              <video controls playsinline preload="metadata" class="w-100 h-100 rounded-top-4">
                <source src="{{ url_for('static', filename='videos/Video_Tutorial_Docentes_AVANZO_2026.mp4') }}" type="video/mp4">
                Tu navegador no soporta la reproducción de video HTML5.
              </video>
            </div>
            <div class="card-body p-4 bg-dark text-white border-top border-secondary">
              <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div>
                  <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="badge bg-warning text-dark fw-bold"><i class="bi bi-mic-fill me-1"></i> Audio Lorena (El Salvador)</span>
                    <span class="badge bg-primary text-white fw-bold">HD 720p / 30 FPS</span>
                    <span class="badge bg-success text-white">Duración: 1:38 min</span>
                  </div>
                  <h5 class="fw-bold mb-0 text-white">Video Tutorial para Docentes Guías: Nómina, Calificaciones en Excel y Comisiones</h5>
                </div>
                <div class="d-flex gap-2">
                  <a href="{{ url_for('download_teacher_tutorial_video') }}" class="btn btn-warning fw-bold text-dark rounded-pill px-4 shadow-sm">
                    <i class="bi bi-download me-1"></i> Descargar MP4 (2.9 MB)
                  </a>
                  <a href="https://wa.me/?text=Estimados%20colegas%20docentes%2C%20les%20comparto%20el%20video%20tutorial%20oficial%20del%20Perfil%20Docente%20AVANZO%202026%3A%20https%3A%2F%2Fsimuladoravanzosv.vercel.app%2Fdocentes" target="_blank" class="btn btn-outline-light rounded-pill px-3">
                    <i class="bi bi-whatsapp text-success me-1"></i> Compartir
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- DESGLOSE DOCENTES -->
      <div class="mb-5">
        <div class="text-center mb-4">
          <h3 class="fw-bold text-dark">Pasos Explicados en el Tutorial de Docentes</h3>
          <p class="text-muted">Aprende a coordinar tu sección y monetizar tu labor pedagógica:</p>
        </div>

        <div class="row g-4">
          <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white">
              <div class="d-flex align-items-center gap-3 mb-3">
                <div class="rounded-circle bg-primary text-white fw-bold d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; font-size: 1.2rem;">1</div>
                <div>
                  <span class="badge bg-primary-subtle text-primary fw-bold text-uppercase">Acceso</span>
                  <h5 class="fw-bold text-dark mb-0">Clave Maestra Docente</h5>
                </div>
              </div>
              <p class="text-muted small mb-0">Ingresa a la pestaña "Perfil Docente" con tu código DOC para desbloquear y administrar las 45 claves de tus alumnos sin formularios.</p>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white">
              <div class="d-flex align-items-center gap-3 mb-3">
                <div class="rounded-circle bg-success text-white fw-bold d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; font-size: 1.2rem;">2</div>
                <div>
                  <span class="badge bg-success-subtle text-success fw-bold text-uppercase">WhatsApp</span>
                  <h5 class="fw-bold text-dark mb-0">Nómina y Envío de Claves</h5>
                </div>
              </div>
              <p class="text-muted small mb-0">Copia claves de forma individual con 1 clic para WhatsApp privado, o pulsa "Copiar Todo para WhatsApp" para compartir el listado en el grupo de aula.</p>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white">
              <div class="d-flex align-items-center gap-3 mb-3">
                <div class="rounded-circle bg-info text-dark fw-bold d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; font-size: 1.2rem;">3</div>
                <div>
                  <span class="badge bg-info-subtle text-info-emphasis fw-bold text-uppercase">Diagnóstico</span>
                  <h5 class="fw-bold text-dark mb-0">Calificaciones y Semáforo</h5>
                </div>
              </div>
              <p class="text-muted small mb-0">Monitorea el promedio de tu sección en tiempo real en Matemática, Lenguaje, Ciencias y Sociales, detectando qué temas reforzar en la pizarra.</p>
            </div>
          </div>

          <div class="col-md-6 col-lg-6">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white">
              <div class="d-flex align-items-center gap-3 mb-3">
                <div class="rounded-circle bg-warning text-dark fw-bold d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; font-size: 1.2rem;">4</div>
                <div>
                  <span class="badge bg-warning text-dark fw-bold text-uppercase">Automatización</span>
                  <h5 class="fw-bold text-dark mb-0">Exportar Excel (CSV) y PDF</h5>
                </div>
              </div>
              <p class="text-muted small mb-0">Descarga la nómina con notas en formato Excel CSV para tu libro de clases o el Informe Diagnóstico Oficial en PDF vertical listo para Dirección.</p>
            </div>
          </div>

          <div class="col-md-12 col-lg-6">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white border-start border-4 border-success">
              <div class="d-flex align-items-center gap-3 mb-3">
                <div class="rounded-circle bg-success text-white fw-bold d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; font-size: 1.2rem;">5</div>
                <div>
                  <span class="badge bg-success text-white fw-bold text-uppercase">Ingresos Docentes</span>
                  <h5 class="fw-bold text-dark mb-0">Mis Comisiones del 20%</h5>
                </div>
              </div>
              <p class="text-muted small mb-0">
                Gana el 20% en efectivo por cada licencia recomendada. Consulta tu saldo acumulado y solicita tu liquidación inmediata por Chivo Wallet, Strike o transferencia bancaria por WhatsApp.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- LLAMADA A LA ACCIÓN -->
  <div class="p-4 p-md-5 rounded-4 text-center text-white shadow-sm" style="background: linear-gradient(135deg, #07162c 0%, #1e3a8a 100%);">
    <h3 class="fw-bold mb-2">Comienza a preparar a tu grupo hoy mismo</h3>
    <p class="text-light opacity-90 mb-4" style="max-width: 600px; margin: 0 auto;">
      Prueba AVANZO 2026: Plataforma interactiva diseñada para fortalecer las competencias de nuestros estudiantes en todo El Salvador.
    </p>
    <div class="d-flex justify-content-center flex-wrap gap-3">
      <a href="{{ url_for('docentes_view') }}" class="btn btn-warning btn-lg fw-bold text-dark rounded-pill px-4 shadow">
        <i class="bi bi-person-workspace me-1"></i> Ir al Perfil Docente
      </a>
      <a href="{{ url_for('exam_view') }}" class="btn btn-outline-light btn-lg fw-semibold rounded-pill px-4">
        <i class="bi bi-stopwatch me-1"></i> Probar Simulacro
      </a>
    </div>
  </div>

</div>
{% endblock %}