{% extends "base.html" %}
{% from "user/_plan_card.html" import plan_card %}
{% block title %}Home | BancaNet{% endblock %}
{% block content %}
<div class="home-projects">
  <nav class="home-actions" aria-label="Accesos rápidos">
    <a class="home-actions__recargar" href="{{ url_for('user.recharge') }}">
      <span class="home-actions__icon" aria-hidden="true">
        <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="24" cy="24" r="18"/><text x="24" y="27.5" text-anchor="middle" font-size="10.5" font-weight="800" fill="currentColor" stroke="none">MXN</text><path d="M33 14a16 16 0 0 1 0 8M36 15l-3-1 1 3M15 34a16 16 0 0 1 0-8M12 33l3 1-1-3"/></svg>
      </span>
      <span>{{ t('home.recharge') }}</span>
    </a>
    <a href="{{ url_for('user.withdraw') }}">
      <span class="home-actions__icon" aria-hidden="true">
        <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="24" cy="24" r="18"/><text x="24" y="27.5" text-anchor="middle" font-size="10.5" font-weight="800" fill="currentColor" stroke="none">MXN</text><path d="M33 14a16 16 0 0 1 0 8M36 15l-3-1 1 3M15 34a16 16 0 0 1 0-8M12 33l3 1-1-3"/></svg>
      </span>
      <span>{{ t('home.withdraw') }}</span>
    </a>
    <a href="{{ url_for('user.products') }}">
      <span class="home-actions__icon" aria-hidden="true">
        <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.9" stroke-linecap="round" stroke-linejoin="round">
          <path d="M8 34h32v4a3 3 0 0 1-3 3H11a3 3 0 0 1-3-3v-4z"/>
          <path d="M10 34l4-16 10 10 10-10 4 16"/>
          <circle cx="14" cy="14" r="2.4" fill="currentColor" stroke="none"/>
          <circle cx="24" cy="10" r="2.4" fill="currentColor" stroke="none"/>
          <circle cx="34" cy="14" r="2.4" fill="currentColor" stroke="none"/>
        </svg>
      </span>
      <span>{{ t('home.vip') }}</span>
    </a>
    <a href="{{ url_for('user.contact') }}">
      <span class="home-actions__icon" aria-hidden="true">
        <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 26v-3a12 12 0 0 1 24 0v3"/><rect x="8" y="23" width="8" height="13" rx="3.5"/><rect x="32" y="23" width="8" height="13" rx="3.5"/><path d="M36 36c0 5-4 8-12 8"/></svg>
      </span>
      <span>Lisa</span>
    </a>
  </nav>

  <section class="home-contact" aria-label="Canales de atención">
    <article class="home-contact__card home-contact__card--whatsapp">
      <div>
        <strong>WhatsApp</strong>
        <small>Servicio al cliente</small>
        {% if whatsapp_support_url %}
        <a href="{{ whatsapp_support_url }}">Ver ahora</a>
        {% else %}
        <button type="button" class="home-contact__pending" data-contact-unavailable="WhatsApp no disponible por ahora.">Ver ahora</button>
        {% endif %}
      </div>
      <span class="home-contact__icon-wrap">
        <img class="home-contact__icon home-contact__icon--whatsapp" src="{{ url_for('static', filename='images/whatsapp.png') }}" alt="WhatsApp" width="44" height="44">
      </span>
    </article>
    <article class="home-contact__card home-contact__card--telegram">
      <div>
        <strong>Canal de Telegram</strong>
        <small>Noticias y soporte</small>
        {% if telegram_support_url %}
        <a href="{{ telegram_support_url }}" target="_blank" rel="noopener noreferrer">Ver ahora</a>
        {% else %}
        <button type="button" class="home-contact__pending" data-contact-unavailable="Telegram no disponible por ahora.">Ver ahora</button>
        {% endif %}
      </div>
      <span class="home-contact__icon-wrap">
        <img class="home-contact__icon home-contact__icon--telegram" src="{{ url_for('static', filename='images/telegram.png') }}" alt="Telegram" width="44" height="44">
      </span>
    </article>
  </section>

  <header class="home-projects__heading">
    <span class="home-projects__heading-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M12 8v4.4l2.8 1.7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M7 4.5 5.2 2.8M17 4.5l1.8-1.7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
    </span>
    <h1>Lista de Proyectos</h1>
  </header>

  <div class="product-list">
    {% for plan in home_plans %}
      {{ plan_card(plan, owned=(plan.id in owned_plan_ids), discount_percent=(active_discount.surprise_code.value if active_discount else 0)) }}
    {% else %}
      <section class="product-empty"><h2>Próximamente</h2><p>Los productos disponibles aparecerán aquí.</p></section>
    {% endfor %}
  </div>
</div>

<div class="plan-buy-modal" id="plan-buy-modal" hidden>
  <div class="plan-buy-modal__backdrop" data-plan-buy-close></div>
  <div class="plan-buy-modal__panel" role="dialog" aria-modal="true" aria-labelledby="plan-buy-title">
    <button type="button" class="plan-buy-modal__close" data-plan-buy-close aria-label="Cerrar">&times;</button>
    <p class="plan-buy-modal__kicker">Confirmar compra</p>
    <h2 class="plan-buy-modal__title" id="plan-buy-title"></h2>
    <p class="plan-buy-modal__desc" id="plan-buy-desc"></p>
    <ul class="plan-buy-modal__stats">
      <li><span>Precio</span><strong id="plan-buy-price"></strong></li>
      <li><span>Ganas al día</span><strong id="plan-buy-daily"></strong></li>
      <li><span>Total a ganar</span><strong id="plan-buy-total"></strong></li>
      <li><span>Duración</span><strong id="plan-buy-days"></strong></li>
    </ul>
    <p class="plan-buy-modal__note" id="plan-buy-note"></p>
    <div class="plan-buy-modal__actions">
      <button type="button" class="plan-buy-modal__cancel" data-plan-buy-close>Cancelar</button>
      <button type="button" class="plan-buy-modal__confirm" id="plan-buy-confirm">Comprar</button>
    </div>
    <p class="plan-buy-modal__error" id="plan-buy-error" hidden></p>
  </div>
</div>
{% if show_welcome_modal|default(false) %}
<div class="welcome-announce" id="welcome-announce" role="dialog" aria-modal="true" aria-label="Bienvenida">
  <div class="welcome-announce__backdrop" data-welcome-close></div>
  <div class="welcome-announce__panel">
    <button type="button" class="welcome-announce__close" data-welcome-close aria-label="Cerrar">&times;</button>
    <img
      src="{{ url_for('static', filename='images/9832893298.png') }}?v=1"
      alt="Bienvenido a BancaNet"
      width="1411"
      height="2508"
      decoding="async"
    >
    <a class="welcome-announce__cta" href="{{ url_for('user.fortuna') }}">Abrir mi sobre</a>
  </div>
</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
{% if show_welcome_modal|default(false) %}
(function () {
  var modal = document.getElementById("welcome-announce");
  if (!modal) return;
  var csrf = document.querySelector('meta[name="csrf-token"]');
  var token = csrf ? csrf.content : "";
  function dismissWelcome(goFortuna) {
    fetch("{{ url_for('user.welcome_dismiss') }}", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Requested-With": "XMLHttpRequest"
      },
      body: "csrf_token=" + encodeURIComponent(token),
      credentials: "same-origin"
    }).finally(function () {
      modal.hidden = true;
      document.body.classList.remove("welcome-announce-open");
      if (goFortuna) window.location.href = "{{ url_for('user.fortuna') }}";
    });
  }
  document.body.classList.add("welcome-announce-open");
  modal.querySelectorAll("[data-welcome-close]").forEach(function (el) {
    el.addEventListener("click", function () { dismissWelcome(false); });
  });
  var cta = modal.querySelector(".welcome-announce__cta");
  if (cta) {
    cta.addEventListener("click", function (event) {
      event.preventDefault();
      dismissWelcome(true);
    });
  }
})();
{% endif %}
(function () {
  var stack = document.querySelector(".flash-stack");
  document.querySelectorAll("[data-contact-unavailable]").forEach(function (btn) {
    btn.addEventListener("click", function () {
      if (!stack) return;
      var msg = btn.getAttribute("data-contact-unavailable") || "No disponible por ahora.";
      var el = document.createElement("div");
      el.className = "flash-message error";
      el.textContent = msg;
      stack.appendChild(el);
      setTimeout(function () { el.remove(); }, 3200);
    });
  });

  var modal = document.getElementById("plan-buy-modal");
  if (!modal) return;
  var titleEl = document.getElementById("plan-buy-title");
  var descEl = document.getElementById("plan-buy-desc");
  var priceEl = document.getElementById("plan-buy-price");
  var dailyEl = document.getElementById("plan-buy-daily");
  var totalEl = document.getElementById("plan-buy-total");
  var daysEl = document.getElementById("plan-buy-days");
  var noteEl = document.getElementById("plan-buy-note");
  var errorEl = document.getElementById("plan-buy-error");
  var confirmBtn = document.getElementById("plan-buy-confirm");
  var activePlan = null;
  var csrf = document.querySelector('meta[name="csrf-token"]');
  var csrfToken = csrf ? csrf.getAttribute("content") : "";

  function openModal(plan) {
    activePlan = plan;
    titleEl.textContent = plan.name || "";
    descEl.textContent = plan.description || "";
    priceEl.textContent = "MX$ " + (plan.price || "0");
    dailyEl.textContent = "MX$ " + (plan.daily_profit || "0");
    totalEl.textContent = "MX$ " + (plan.total_earnings || "0");
    daysEl.textContent = (plan.duration_days || 0) + " días";
    noteEl.textContent = plan.note || "";
    errorEl.hidden = true;
    errorEl.textContent = "";
    confirmBtn.disabled = false;
    confirmBtn.textContent = "Comprar";
    modal.hidden = false;
    document.body.classList.add("plan-buy-open");
  }

  function closeModal() {
    modal.hidden = true;
    document.body.classList.remove("plan-buy-open");
    activePlan = null;
  }

  document.querySelectorAll("[data-plan-buy]").forEach(function (btn) {
    btn.addEventListener("click", function () {
      try {
        openModal(JSON.parse(btn.getAttribute("data-plan") || "{}"));
      } catch (e) {}
    });
  });

  modal.querySelectorAll("[data-plan-buy-close]").forEach(function (el) {
    el.addEventListener("click", closeModal);
  });

  confirmBtn.addEventListener("click", function () {
    if (!activePlan || !activePlan.id) return;
    confirmBtn.disabled = true;
    confirmBtn.textContent = "Comprando…";
    errorEl.hidden = true;

    fetch("/buy-plan/" + activePlan.id, {
      method: "POST",
      headers: {
        "X-Requested-With": "XMLHttpRequest",
        "X-CSRFToken": csrfToken,
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body: "csrf_token=" + encodeURIComponent(csrfToken),
      credentials: "same-origin"
    })
      .then(function (res) { return res.json().then(function (data) { return { ok: res.ok, data: data }; }); })
      .then(function (result) {
        if (result.data && result.data.ok) {
          window.location.href = result.data.redirect || "/my-products";
          return;
        }
        errorEl.textContent = (result.data && result.data.message) || "No se pudo completar la compra.";
        errorEl.hidden = false;
        confirmBtn.disabled = false;
        confirmBtn.textContent = "Comprar";
      })
      .catch(function () {
        errorEl.textContent = "Error de conexión. Intenta de nuevo.";
        errorEl.hidden = false;
        confirmBtn.disabled = false;
        confirmBtn.textContent = "Comprar";
      });
  });
})();
</script>
{% endblock %}