{% extends "base.html" %}

{% block title %}Galería de Vouchers y Claves de Beca - Simulador AVANZO{% endblock %}

{% block content %}
<div class="container py-4">
  <!-- BANNER PRINCIPAL -->
  <div class="card border-0 shadow-lg mb-4 text-white" style="background: linear-gradient(135deg, #07162c 0%, #0d233e 100%); border-radius: 16px; border-top: 5px solid #f59e0b !important;">
    <div class="card-body p-4 p-md-5">
      <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-warning bg-opacity-20 border border-warning border-opacity-40 mb-3 text-warning">
        <i class="bi bi-gift-fill"></i>
        <span class="small fw-bold">MATERIAL DE DIFUSIÓN OFICIAL • EL SALVADOR 2026</span>
      </div>
      <h1 class="display-6 fw-bold mb-2">Galería de Vouchers y Tarjetas de Beca</h1>
      <p class="lead text-light mb-3" style="max-width: 800px;">
        Descarga y comparte las tarjetas gráficas en PNG de alta resolución por WhatsApp, grupos estudiantiles y redes sociales.
      </p>

      <div class="d-flex flex-wrap gap-3 align-items-center">
        <a href="{{ url_for('download_promos_zip') }}" class="btn btn-warning fw-bold text-dark px-4 py-2 shadow-sm rounded-pill">
          <i class="bi bi-file-earmark-zip-fill me-2"></i> Descargar Todo el Paquete (ZIP 2.7 MB)
        </a>
        <div class="bg-black bg-opacity-40 px-3 py-2 rounded-pill border border-secondary border-opacity-50 text-light small">
          <i class="bi bi-globe me-1 text-info"></i> Enlace Web: <strong class="text-warning">https://simulador-avanzo-sv.vercel.app</strong>
        </div>
      </div>
    </div>
  </div>

  <!-- NAVEGACIÓN DE PESTAÑAS -->
  <ul class="nav nav-pills nav-fill mb-4 bg-white p-2 rounded-4 shadow-sm" id="promosTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active fw-bold py-2 rounded-3" id="docentes-tab" data-bs-toggle="pill" data-bs-target="#docentes-pane" type="button" role="tab">
        <i class="bi bi-person-workspace me-2 text-warning"></i> 15 Vouchers Docentes (45 Alumnos c/u)
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link fw-bold py-2 rounded-3" id="estudiantes-tab" data-bs-toggle="pill" data-bs-target="#estudiantes-pane" type="button" role="tab">
        <i class="bi bi-mortarboard-fill me-2 text-info"></i> 30 Vouchers Estudiantes (Beca Individual)
      </button>
    </li>
  </ul>

  <div class="tab-content" id="promosTabContent">
    <!-- PESTAÑA 1: DOCENTES -->
    <div class="tab-pane fade show active" id="docentes-pane" role="tabpanel">
      <div class="alert alert-info border-0 shadow-sm rounded-3 mb-4 d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
          <i class="bi bi-info-circle-fill me-2 fs-5"></i>
          <strong>Paquetes de Aula para Docentes:</strong> Cada tarjeta incluye 1 clave maestra de docente y la asignación de 45 claves para sus alumnos.
        </div>
        <a href="{{ url_for('download_promos_zip') }}" class="btn btn-sm btn-dark rounded-pill fw-bold">
          <i class="bi bi-download me-1"></i> Descargar Listados en TXT
        </a>
      </div>

      <div class="row g-4">
        {% for sec in teacher_vouchers %}
        <div class="col-md-6 col-lg-4">
          <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden bg-white">
            <img src="{{ url_for('static', filename='promos/' ~ sec.filename) }}" class="card-img-top" alt="Voucher Docente {{ sec.num }}" loading="lazy">
            <div class="card-body p-3 d-flex flex-column">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="badge bg-primary px-2 py-1">Sección #{{ sec.num }}</span>
                <span class="badge bg-warning text-dark px-2 py-1">45 Alumnos</span>
              </div>
              <div class="p-2 rounded bg-light border text-center font-monospace fw-bold text-primary mb-3" style="font-size: 0.95rem;">
                {{ sec.key }}
              </div>
              <div class="mt-auto d-flex gap-2">
                <a href="{{ url_for('static', filename='promos/' ~ sec.filename) }}" download class="btn btn-sm btn-primary flex-grow-1 fw-semibold">
                  <i class="bi bi-download me-1"></i> Guardar PNG
                </a>
                <button onclick="navigator.clipboard.writeText('{{ sec.key }}'); alert('¡Clave {{ sec.key }} copiada al portapapeles!');" class="btn btn-sm btn-outline-secondary" title="Copiar Clave">
                  <i class="bi bi-clipboard"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- PESTAÑA 2: ESTUDIANTES -->
    <div class="tab-pane fade" id="estudiantes-pane" role="tabpanel">
      <div class="alert alert-success border-0 shadow-sm rounded-3 mb-4 d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
          <i class="bi bi-check-circle-fill me-2 fs-5"></i>
          <strong>Becas Individuales para Estudiantes:</strong> 30 tarjetas con claves de cortesía inmediata para compartir por WhatsApp.
        </div>
        <a href="{{ url_for('download_promos_zip') }}" class="btn btn-sm btn-success rounded-pill fw-bold">
          <i class="bi bi-download me-1"></i> Descargar Todo en ZIP
        </a>
      </div>

      <div class="row g-4">
        {% for std in student_vouchers %}
        <div class="col-md-6 col-lg-4">
          <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden bg-white">
            <img src="{{ url_for('static', filename='promos/' ~ std.filename) }}" class="card-img-top" alt="Voucher Estudiante {{ std.num }}" loading="lazy">
            <div class="card-body p-3 d-flex flex-column">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="badge bg-success px-2 py-1">Beca #{{ std.num }}</span>
                <span class="badge bg-info text-dark px-2 py-1">Pase 100% Gratis</span>
              </div>
              <div class="p-2 rounded bg-light border text-center font-monospace fw-bold text-success mb-3" style="font-size: 0.95rem;">
                {{ std.key }}
              </div>
              <div class="mt-auto d-flex gap-2">
                <a href="{{ url_for('static', filename='promos/' ~ std.filename) }}" download class="btn btn-sm btn-success flex-grow-1 fw-semibold">
                  <i class="bi bi-download me-1"></i> Guardar PNG
                </a>
                <button onclick="navigator.clipboard.writeText('{{ std.key }}'); alert('¡Clave {{ std.key }} copiada al portapapeles!');" class="btn btn-sm btn-outline-secondary" title="Copiar Clave">
                  <i class="bi bi-clipboard"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}