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

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

{% block body %}
<div class="container d-flex flex-column align-items-center justify-content-center min-vh-100 py-5">
  <h2 class="mb-4 text-center">📌 Tu Código QR</h2>
  <img
    id="dynamic-qr"
    src="{% url 'qr_for_business' %}?_=0"
    alt="Código QR"
    class="img-fluid mx-auto"
    style="max-width: 300px; width: 100%; height: auto;"
  >
  <p class="mt-3">
    <a
      href="{% url 'qr_for_business' %}?_=0"
      download="qr_{{ user_id }}.png"
      class="btn btn-primary"
    >
      Descargar QR
    </a>
  </p>

  <!-- Botón WhatsApp -->
  <a id="whatsapp-share"
     class="btn btn-success mt-2"
     target="_blank"
     style="background-color: #25D366; border: none;"
  >
    Compartir por WhatsApp
  </a>
</div>
{% endblock %}

{% block scripts %}
<script>
  (() => {
    let expiry = 15 * 60;
    const qrEl = document.getElementById('dynamic-qr');
    function pad(n) { return n < 10 ? '0' + n : n; }
    setInterval(() => {
      const m = Math.floor(expiry / 60), s = expiry % 60;
      if (expiry-- <= 0) {
        const ts = Date.now();
        qrEl.src = `{% url 'qr_for_business' %}?_=${ts}`;
        expiry = 15 * 60;
      }
    }, 1000);

    // WhatsApp sharing logic
    const shareBtn = document.getElementById("whatsapp-share");
    const qrUrl = qrEl.src;
    const text = encodeURIComponent("¡Hola! Aquí tienes mi QR de NexID para compartirlo fácilmente: " + qrUrl);
    const whatsappUrl = `https://wa.me/?text=${text}`;
    shareBtn.href = whatsappUrl;
  })();
</script>
{% endblock %}