<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Generar licencia — ContaApp</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
  <style>
    body { background:#0f1623; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
    .card-wrap { background:#0f2744; border:2px solid #4f86f7; border-radius:16px; padding:2rem; max-width:560px; width:100%; }
    .form-label { font-size:.82rem; font-weight:600; color:#94a3b8; }
    .form-control, .form-select {
      background:#1e2d45; border-color:#2d4a6e; color:#e2e8f0;
      border-radius:9px; font-size:.9rem;
    }
    .form-control::placeholder { color:#4a6582; }
    .form-control:focus, .form-select:focus {
      background:#1e2d45; border-color:#4f86f7; color:#e2e8f0;
      box-shadow:0 0 0 3px rgba(79,134,247,.2);
    }
    .form-select option { background:#1e2d45; }
    .plan-badge { display:inline-block; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:20px; margin-left:6px; }
    .plan-starter  { background:rgba(148,163,184,.15); color:#94a3b8; }
    .plan-pro      { background:rgba(79,134,247,.15);  color:#60a5fa; }
    .plan-lifetime { background:rgba(251,191,36,.15);  color:#fbbf24; }
    .dias-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .dias-opt {
      border:2px solid #2d4a6e; background:#1e2d45; border-radius:9px;
      padding:10px 8px; text-align:center; cursor:pointer;
      transition:all .15s; font-size:.82rem; color:#94a3b8;
    }
    .dias-opt:hover { border-color:#4f86f7; color:#e2e8f0; }
    .dias-opt.active { border-color:#4f86f7; background:#1a3a6e; color:#93c5fd; }
    .dias-opt strong { display:block; font-size:1rem; color:inherit; }
  </style>
</head>
<body>
<div class="card-wrap">

  <div class="d-flex align-items-center gap-3 mb-4">
    <div style="background:#4f86f7;border-radius:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0">
      <i class="bi bi-key-fill" style="font-size:1.3rem;color:#fff"></i>
    </div>
    <div>
      <div style="color:#f8fafc;font-size:1.05rem;font-weight:700">Generar licencia</div>
      <div style="color:#64748b;font-size:.8rem">El archivo .lic se descargará automáticamente</div>
    </div>
  </div>

  {% with msgs = get_flashed_messages(with_categories=true) %}
    {% for cat, msg in msgs %}
    <div class="alert alert-{{ cat }} py-2 mb-3" style="font-size:.85rem">{{ msg }}</div>
    {% endfor %}
  {% endwith %}

  <form method="post" id="formLic">

    <div class="mb-3">
      <label class="form-label">Titular de la licencia *</label>
      <input type="text" name="holder" class="form-control"
             placeholder="Empresa ABC SL o Nombre Apellido" required>
    </div>

    <div class="mb-3">
      <label class="form-label">Email del comprador *</label>
      <input type="email" name="email" class="form-control"
             placeholder="cliente@empresa.com" required>
    </div>

    <div class="mb-3">
      <label class="form-label">Plan</label>
      <select name="plan" class="form-select" id="selPlan" onchange="actualizarDias()">
        {% for key, plan in planes.items() %}
        <option value="{{ key if key != 'vitalicio' else 'lifetime' }}">
          {{ plan.nombre }} — {{ '%.2f'|format(plan.precio) }} €
        </option>
        {% endfor %}
      </select>
    </div>

    <div class="mb-4">
      <label class="form-label">Validez</label>
      <div class="dias-grid mb-2">
        <div class="dias-opt active" onclick="setDias(365, this)">
          <strong>1 año</strong>365 días
        </div>
        <div class="dias-opt" onclick="setDias(730, this)">
          <strong>2 años</strong>730 días
        </div>
        <div class="dias-opt" id="opt-vitalicio" onclick="setDias(36500, this)">
          <strong>Vitalicio</strong>sin expiración
        </div>
      </div>
      <input type="hidden" name="dias" id="diasInput" value="365">
    </div>

    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-primary flex-grow-1">
        <i class="bi bi-download me-2"></i>Generar y descargar .lic
      </button>
      <a href="{{ url_for('soporte.empresas') }}" class="btn btn-outline-secondary">
        Volver
      </a>
    </div>

  </form>

  <div class="mt-4 pt-3" style="border-top:1px solid rgba(255,255,255,.07);text-align:center">
    <a href="{{ url_for('soporte.licencias_emitidas') }}" style="color:#60a5fa;font-size:.82rem">
      <i class="bi bi-clock-history me-1"></i>Ver historial de licencias emitidas
    </a>
  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
function setDias(dias, el) {
  document.getElementById('diasInput').value = dias;
  document.querySelectorAll('.dias-opt').forEach(e => e.classList.remove('active'));
  el.classList.add('active');
}

function actualizarDias() {
  const plan = document.getElementById('selPlan').value;
  if (plan === 'lifetime') {
    setDias(36500, document.getElementById('opt-vitalicio'));
  }
}
</script>
</body>
</html>
