{% extends "base.html" %}
{% block title %}Plans | {{ brand_short_name }}{% endblock %}
{% block header_title %}Productos activos{% endblock %}
{% block content %}
<section class="space-y-4 rounded-none bg-white/90 px-4 py-4 sm:px-5 sm:py-5">
  <div class="space-y-1">
    <p class="text-sm font-semibold text-pink-700">Catalogo</p>
    <h2 class="text-2xl font-semibold text-neutral-900">Productos activos</h2>
    <p class="text-sm text-neutral-600">Cada plan se muestra en una fila limpia con sus datos principales y una separacion discreta.</p>
  </div>

  {% if plans %}
    <div class="divide-y divide-neutral-200">
      {% for plan in plans %}
        <article class="grid gap-4 py-5 lg:grid-cols-[180px_1fr] lg:items-center">
          <div class="relative overflow-hidden bg-neutral-50">
            <div class="aspect-[4/3] w-full">
              {% set plan_image = plan.image_path if plan.image_path else 'images/LV1.png' %}
              <img
                src="{{ url_for('static', filename=plan_image) }}?v=1"
                alt="{{ plan.name }}"
                class="h-full w-full object-contain object-center"
              >
            </div>
            {% if plan.is_featured %}
              <span class="absolute left-3 top-3 rounded-full bg-white/95 px-2 py-1 text-[10px] font-semibold text-pink-700 shadow-sm shadow-black/5">Destacado</span>
            {% endif %}
          </div>

          <div class="space-y-3">
            <div class="space-y-1">
              <h3 class="text-base font-semibold leading-5 text-neutral-900 sm:text-lg">{{ plan.name }}</h3>
              <p class="text-sm leading-6 text-neutral-600">{{ plan.description or "Paquete diario de inversion." }}</p>
            </div>

            <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm sm:grid-cols-4">
              <p class="text-neutral-600"><span class="font-medium text-neutral-900">Costo:</span> ${{ "%.2f"|format(plan.price or 0) }}</p>
              <p class="text-neutral-600"><span class="font-medium text-neutral-900">Diario:</span> ${{ "%.2f"|format(plan.daily_profit or 0) }}</p>
              <p class="text-neutral-600"><span class="font-medium text-neutral-900">Dias de duracion:</span> {{ plan.duration_days }}</p>
              <p class="text-neutral-600"><span class="font-medium text-pink-700">Total:</span> ${{ "%.2f"|format(plan.gross_return or 0) }}</p>
            </div>

            <div class="flex flex-wrap items-center gap-3">
              <p class="text-xs text-neutral-500">Neta: ${{ "%.2f"|format(plan.net_profit or 0) }}</p>
              <button
                type="button"
                class="inline-flex items-center justify-center rounded-full border border-pink-600 bg-pink-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-pink-500"
                data-plan='{{ {
                  "id": plan.id,
                  "name": plan.name,
                  "description": plan.description or "Paquete diario de inversion.",
                  "price": "%.2f"|format(plan.price or 0),
                  "daily_profit": "%.2f"|format(plan.daily_profit or 0),
                  "duration_days": plan.duration_days,
                  "gross_return": "%.2f"|format(plan.gross_return or 0),
                  "net_profit": "%.2f"|format(plan.net_profit or 0),
                  "image_url": url_for("static", filename=plan.image_path if plan.image_path else "images/LV1.png")
                } | tojson }}'
              >
                Comprar ahora
              </button>
            </div>
          </div>
        </article>
      {% endfor %}
    </div>
  {% else %}
    <div class="border border-dashed border-neutral-300 bg-white p-5 text-sm text-neutral-600">Aún no hay paquetes activos.</div>
  {% endif %}
</section>

<div id="plan-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-neutral-950/55 px-4 py-6 backdrop-blur-sm">
  <div class="w-full max-w-lg overflow-hidden border border-neutral-200 bg-white shadow-2xl">
    <div class="border-b border-neutral-200 px-5 py-4">
      <p class="text-sm font-semibold text-pink-700">Confirmar compra</p>
      <h3 id="plan-modal-title" class="mt-1 text-2xl font-semibold text-neutral-900"></h3>
    </div>
    <div class="grid gap-4 p-5 sm:grid-cols-[170px_1fr]">
      <div class="overflow-hidden bg-neutral-50">
        <img id="plan-modal-image" src="" alt="" class="h-full w-full object-contain object-center">
      </div>
      <div class="space-y-2 text-sm text-neutral-700">
        <p id="plan-modal-description" class="text-neutral-600"></p>
        <p><span class="font-medium text-neutral-900">Costo:</span> <span id="plan-modal-price"></span></p>
        <p><span class="font-medium text-neutral-900">Recibe diario:</span> <span id="plan-modal-daily"></span></p>
        <p><span class="font-medium text-neutral-900">Dias de duracion:</span> <span id="plan-modal-duration"></span></p>
        <p><span class="font-medium text-neutral-900">Total final:</span> <span id="plan-modal-total"></span></p>
        <p><span class="font-medium text-neutral-900">Pagos:</span> Cada 24 horas a partir de la hora de compra.</p>
        <p><span class="font-medium text-neutral-900">Seguro:</span> ¿Deseas confirmar la compra de este plan?</p>
      </div>
    </div>
    <div class="flex items-center justify-end gap-3 border-t border-neutral-200 px-5 py-4">
      <button type="button" id="plan-modal-cancel" class="rounded-full border border-neutral-200 bg-white px-4 py-2 text-sm font-semibold text-neutral-700 transition hover:bg-neutral-50">Cancelar</button>
      <form id="plan-buy-form" method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="rounded-full border border-pink-600 bg-pink-600 px-5 py-2 text-sm font-semibold text-white transition hover:bg-pink-500">
          Confirmar
        </button>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const modal = document.getElementById("plan-modal");
  const form = document.getElementById("plan-buy-form");
  const cancel = document.getElementById("plan-modal-cancel");
  const title = document.getElementById("plan-modal-title");
  const description = document.getElementById("plan-modal-description");
  const price = document.getElementById("plan-modal-price");
  const daily = document.getElementById("plan-modal-daily");
  const duration = document.getElementById("plan-modal-duration");
  const total = document.getElementById("plan-modal-total");
  const image = document.getElementById("plan-modal-image");

  function openModal(plan) {
    title.textContent = plan.name || "";
    description.textContent = plan.description || "";
    price.textContent = `$${plan.price}`;
    daily.textContent = `$${plan.daily_profit}`;
    duration.textContent = `${plan.duration_days} dias de duracion`;
    total.textContent = `$${plan.gross_return}`;
    image.src = plan.image_url || "";
    image.alt = plan.name || "";
    form.action = `/buy-plan/${plan.id}`;
    modal.classList.remove("hidden");
    modal.classList.add("flex");
  }

  function closeModal() {
    modal.classList.add("hidden");
    modal.classList.remove("flex");
  }

  document.querySelectorAll("[data-plan]").forEach((button) => {
    button.addEventListener("click", () => {
      const plan = JSON.parse(button.dataset.plan);
      openModal(plan);
    });
  });

  cancel?.addEventListener("click", closeModal);
  modal?.addEventListener("click", (event) => {
    if (event.target === modal) {
      closeModal();
    }
  });
</script>
{% endblock %}