{% extends 'menu/menu.html' %}
{% load static %}

{% block head %}
  {{ block.super }}
  <!-- viewport para móviles -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %}

{% block title %}Mi NexID – QR{% endblock %}

{% block body %}
<div class="container d-flex flex-column align-items-center justify-content-start pt-2 pb-5">
  <!-- Título escalable -->
  <h1 class="fw-bold text-center mb-4" style="font-size: clamp(1.5rem, 6vw, 2rem);">
    Tu Código QR
  </h1>

  <!-- QR responsive -->
  <img
    id="dynamic-qr"
    src="{% url 'qr_for_business' %}?_=0"
    alt="Código QR"
    class="img-fluid"
    style="max-width: 300px; width: 100%; height: auto;"
  >

  <!-- Botones en columna, ancho completo dentro de un max-width -->
  <div class="d-grid gap-2 mt-4" style="max-width: 300px; width: 100%;">
    <a
      href="{% url 'qr_for_business' %}?_=0"
      download="qr_{{ user_id }}.png"
      class="btn btn-primary btn-lg"
    >
      Descargar QR
    </a>
    <a
      id="whatsapp-share"
      class="btn btn-success btn-lg"
      target="_blank"
      style="background-color: #25D366; border: none;"
    >
      Compartir por WhatsApp
    </a>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  (function(){
    const qrEl = document.getElementById('dynamic-qr');
    let expiry = 15 * 60; // 15 min

    // Cada segundo chequea si expiró
    setInterval(() => {
      if (expiry-- <= 0) {
        const ts = Date.now();
        qrEl.src = `{% url 'qr_for_business' %}?_=${ts}`;
        expiry = 15 * 60;
        updateWhatsAppLink();
      }
    }, 1000);

    // Actualiza el enlace de WhatsApp con la URL actual del QR
    function updateWhatsAppLink(){
      const shareBtn = document.getElementById('whatsapp-share');
      const text = encodeURIComponent(
        "¡Hola! Aquí tienes mi QR de NexID 👉 " + qrEl.src
      );
      shareBtn.href = `https://wa.me/?text=${text}`;
    }

    // Inicializa el link la primera vez
    updateWhatsAppLink();
  })();
</script>
{% endblock %}