{% extends "admin/layout.html" %}
{% block title %}Surprise Codes | {{ brand_short_name }}{% endblock %}
{% block admin_title %}Códigos sorpresa{% endblock %}
{% block admin_content %}
<section class="adm-section space-y-5">
  <div class="grid gap-5 xl:grid-cols-[380px_1fr]">
    <form method="post" class="border border-neutral-200 bg-white p-5 shadow-lg shadow-neutral-900/5">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <h2 class="text-xl font-semibold text-neutral-900">Crear código</h2>
      <p class="mt-2 text-sm text-neutral-600">Cada usuario puede canjearlo una vez mientras esté vigente.</p>

      <label class="mt-5 block text-sm font-medium text-neutral-700">Código
        <input class="mt-2 w-full border border-neutral-300 px-3 py-2 uppercase" name="code" maxlength="32" required placeholder="BN10">
      </label>
      <label class="mt-4 block text-sm font-medium text-neutral-700">Premio
        <select class="mt-2 w-full border border-neutral-300 px-3 py-2" name="reward_type" required>
          <option value="money">Dinero</option>
          <option value="discount">Descuento</option>
        </select>
      </label>
      <label class="mt-4 block text-sm font-medium text-neutral-700">Cantidad o porcentaje
        <input class="mt-2 w-full border border-neutral-300 px-3 py-2" type="number" name="value" min="0.01" step="0.01" required placeholder="10">
      </label>
      <label class="mt-4 block text-sm font-medium text-neutral-700">Vigencia para canjear (minutos)
        <input class="mt-2 w-full border border-neutral-300 px-3 py-2" type="number" name="duration_minutes" min="5" max="1440" required value="10">
      </label>
      <button class="mt-5 w-full border border-pink-600 bg-pink-600 px-4 py-3 text-sm font-semibold text-white" type="submit">Crear código</button>
    </form>

    <div class="overflow-hidden border border-neutral-200 bg-white shadow-lg shadow-neutral-900/5">
      <div class="border-b border-neutral-200 p-5">
        <h2 class="text-xl font-semibold text-neutral-900">Códigos creados</h2>
      </div>
      {% if codes %}
      <div class="overflow-x-auto">
        <table class="w-full text-left text-sm">
          <thead class="bg-neutral-50 text-neutral-600"><tr><th class="p-3">Código</th><th class="p-3">Premio</th><th class="p-3">Expira</th><th class="p-3">Canjes</th><th class="p-3">Estado</th></tr></thead>
          <tbody>
          {% for item in codes %}
            <tr class="border-t border-neutral-100">
              <td class="p-3 font-semibold text-neutral-900">{{ item.code }}</td>
              <td class="p-3">{% if item.reward_type == 'money' %}MX$ {{ "%.2f"|format(item.value) }}{% else %}{{ item.value|float|round(2) }}%{% endif %}</td>
              <td class="p-3">{{ localize_admin_datetime(item.expires_at).strftime('%d/%m/%Y %H:%M') }}</td>
              <td class="p-3">{{ item.redemptions|length }}</td>
              <td class="p-3">
                <form method="post" action="{{ url_for('admin.toggle_surprise_code', code_id=item.id) }}">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <button class="border border-neutral-200 px-3 py-2" type="submit">{% if not item.is_active %}Desactivado{% elif item.expires_at <= now_utc %}Expirado{% else %}Activo{% endif %}</button>
                </form>
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p class="p-5 text-sm text-neutral-600">Todavía no hay códigos.</p>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}