{% extends "base.html" %}
{% block title %}Edit plan | {{ brand_short_name }}{% endblock %}
{% block header_title %}Editar plan{% endblock %}
{% block content %}
<section class="mx-auto max-w-3xl space-y-4">
  <div>
    <h2 class="text-2xl font-semibold text-neutral-900">Editar paquete</h2>
    <p class="mt-2 text-sm text-neutral-600">El usuario puede reclamar lo acumulado cada 24 horas.</p>
  </div>

  <form method="post" enctype="multipart/form-data" class="space-y-4 border border-neutral-200 bg-white p-6 shadow-lg shadow-neutral-900/5">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div class="grid gap-4 sm:grid-cols-2">
      <div class="sm:col-span-2">
        <label class="mb-2 block text-sm font-medium text-neutral-700">Nombre</label>
        <input name="name" value="{{ plan.name }}" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-pink-500" required>
      </div>
      <div>
        <label class="mb-2 block text-sm font-medium text-neutral-700">Costo (inversión)</label>
        <input name="price" type="number" step="0.01" min="0" value="{{ plan.price }}" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-pink-500" required>
      </div>
      <div>
        <label class="mb-2 block text-sm font-medium text-neutral-700">Duración (días)</label>
        <input name="duration_days" type="number" step="1" min="1" value="{{ plan.duration_days }}" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-pink-500" required>
      </div>
    </div>

    <div>
      <label class="mb-2 block text-sm font-medium text-neutral-700">Ganancia diaria</label>
      <input name="daily_profit" type="number" step="0.01" min="0" value="{{ plan.daily_profit }}" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-pink-500">
      <p class="mt-1 text-xs text-neutral-500">Lo que el usuario recibe cada 24 h.</p>
    </div>

    <div>
      <label class="mb-2 block text-sm font-medium text-neutral-700">Descripción</label>
      <textarea name="description" rows="3" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-pink-500">{{ plan.description or "" }}</textarea>
    </div>

    <div>
      <label class="mb-2 block text-sm font-medium text-neutral-700">Actualizar imagen</label>
      <input name="image_file" type="file" accept="image/*" class="w-full border border-dashed border-neutral-300 bg-neutral-50 px-4 py-3 text-sm text-neutral-700">
      <p class="mt-2 text-xs text-neutral-500">Si no subes una nueva, se conserva la actual.</p>
    </div>

    <div class="grid gap-3 sm:grid-cols-2">
      <label class="flex items-center gap-3 border border-neutral-200 bg-neutral-50 px-4 py-3">
        <input type="checkbox" name="is_featured" value="1" class="h-4 w-4" {% if plan.is_featured %}checked{% endif %}>
        <span class="text-sm font-medium text-neutral-700">Destacado</span>
      </label>
      <label class="flex items-center gap-3 border border-neutral-200 bg-neutral-50 px-4 py-3">
        <input type="checkbox" name="is_active" value="1" class="h-4 w-4" {% if plan.is_active %}checked{% endif %}>
        <span class="text-sm font-medium text-neutral-700">Disponible</span>
      </label>
    </div>

    {% if plan.image_path %}
      <div class="overflow-hidden border border-neutral-200">
        <img src="{{ url_for('static', filename=plan.image_path) }}" alt="Imagen actual" class="h-48 w-full object-cover">
      </div>
    {% endif %}

    <div class="flex justify-end">
      <button type="submit" class="border border-pink-600 bg-pink-600 px-5 py-3 font-semibold text-white transition hover:bg-pink-500">Guardar cambios</button>
    </div>
  </form>
</section>
{% endblock %}