{% extends "base.html" %}
{% block title %}Create plan | {{ brand_short_name }}{% endblock %}
{% block header_title %}Crear plan{% endblock %}
{% block content %}
<section class="mx-auto max-w-3xl space-y-4">
  <div>
    <h2 class="text-2xl font-semibold text-neutral-900">Nuevo 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" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-pink-500" placeholder="Procesador Core 3" 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" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-pink-500" placeholder="300" 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" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-pink-500" placeholder="80" 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" class="w-full border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-pink-500" placeholder="50">
      <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" placeholder="Pagos automáticos cada 24 h."></textarea>
    </div>

    <div>
      <label class="mb-2 block text-sm font-medium text-neutral-700">Imagen del paquete</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">
    </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">
        <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" checked class="h-4 w-4">
        <span class="text-sm font-medium text-neutral-700">Disponible</span>
      </label>
    </div>

    <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 paquete</button>
    </div>
  </form>
</section>
{% endblock %}