{% extends "admin/layout.html" %}
{% block title %}Plan Manager | {{ brand_short_name }}{% endblock %}
{% block admin_title %}Planes{% endblock %}
{% block admin_content %}
<section class="adm-section space-y-5">
  <div class="flex items-center justify-between gap-3">
    <div>
      <h2 class="text-2xl font-semibold text-neutral-900">Planes</h2>
      <p class="mt-2 text-sm text-neutral-600">Todos los productos permiten reclamar ganancias acumuladas cada 24 horas.</p>
    </div>
    <a href="{{ url_for('admin.create_plan') }}" class="border border-pink-600 bg-pink-600 px-4 py-3 text-sm font-semibold text-white shadow-lg shadow-pink-900/10">Crear plan</a>
  </div>

  {% if plans %}
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
      {% for plan in plans %}
        <article class="overflow-hidden border border-neutral-200 bg-white shadow-lg shadow-neutral-900/5">
          <div class="h-44 bg-neutral-100">
            {% 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-cover">
          </div>
          <div class="p-5">
            <div class="flex items-start justify-between gap-3">
              <div>
                <h3 class="text-lg font-semibold text-neutral-900">{{ plan.name }}</h3>
                <p class="mt-1 text-sm text-neutral-500">{{ plan.description or "-" }}</p>
              </div>
              <div class="flex flex-col items-end gap-1">
                <span class="rounded-full px-3 py-1 text-xs font-semibold {% if plan.is_active %}bg-pink-50 text-pink-700{% else %}bg-rose-50 text-rose-700{% endif %}">
                  {{ "Disponible" if plan.is_active else "No disponible" }}
                </span>
              </div>
            </div>

            <div class="mt-4 grid grid-cols-2 gap-2 text-sm">
              <div class="border border-neutral-200 bg-neutral-50 p-3">
                <p class="text-neutral-500">Costo</p>
                <p class="mt-1 font-semibold text-neutral-900">${{ "%.2f"|format(plan.price or 0) }}</p>
              </div>
              <div class="border border-neutral-200 bg-neutral-50 p-3">
                <p class="text-neutral-500">Ganancia diaria</p>
                <p class="mt-1 font-semibold text-neutral-900">${{ "%.2f"|format(plan.daily_profit or 0) }}</p>
              </div>
              <div class="border border-neutral-200 bg-neutral-50 p-3">
                <p class="text-neutral-500">Duración</p>
                <p class="mt-1 font-semibold text-neutral-900">{{ plan.duration_days }} días</p>
              </div>
              <div class="border border-neutral-200 bg-neutral-50 p-3">
                <p class="text-neutral-500">Total</p>
                <p class="mt-1 font-semibold text-neutral-900">${{ "%.2f"|format(plan.gross_return or 0) }}</p>
              </div>
            </div>

            <div class="mt-4 flex items-center justify-between gap-3">
              <span class="rounded-full bg-neutral-100 px-3 py-1 text-xs text-neutral-700">{{ "Destacado" if plan.is_featured else "Normal" }}</span>
              <div class="flex items-center gap-2">
                <form method="post" action="{{ url_for('admin.toggle_plan_active', plan_id=plan.id) }}">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <button type="submit" class="border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50">
                    {{ "No disponible" if plan.is_active else "Disponible" }}
                  </button>
                </form>
                <a class="border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50" href="{{ url_for('admin.edit_plan', plan_id=plan.id) }}">Editar</a>
              </div>
            </div>
          </div>
        </article>
      {% endfor %}
    </div>
  {% else %}
    <div class="border border-dashed border-neutral-300 bg-white p-5 text-sm text-neutral-600 shadow-lg shadow-neutral-900/5">Aún no hay planes.</div>
  {% endif %}
</section>
{% endblock %}