{% extends 'dashboard/base.html' %}
{% block title %}Coupons{% endblock %}
{% block page_title %}Coupon Management{% endblock %}

{% block content %}
<div class="page-header">
  <div class="breadcrumb"><a href="{% url 'dashboard:home' %}">Dashboard</a> <span>/</span> Coupons</div>
  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px">
    <div><h1 class="page-title">Coupons & Promo Codes</h1><p class="page-subtitle">Create and manage discount codes</p></div>
    <a href="{% url 'dashboard:coupon_add' %}" class="btn btn-accent"><i class="fas fa-plus"></i> New Coupon</a>
  </div>
</div>

<div class="card">
  <div class="card-body" style="padding:0">
    <div class="table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>Code</th>
            <th>Type</th>
            <th>Discount</th>
            <th>Min Order</th>
            <th>Uses</th>
            <th>Valid Until</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for coupon in coupons %}
          <tr>
            <td><code style="background:var(--bg);padding:3px 8px;border-radius:4px;font-weight:600;font-size:13px">{{ coupon.code }}</code></td>
            <td>{{ coupon.get_discount_type_display }}</td>
            <td>
              {% if coupon.discount_type == 'percent' %}
                <span style="color:var(--success);font-weight:600">{{ coupon.discount_value }}% off</span>
              {% else %}
                <span style="color:var(--success);font-weight:600">₦{{ coupon.discount_value }} off</span>
              {% endif %}
            </td>
            <td>{% if coupon.minimum_order > 0 %}₦{{ coupon.minimum_order }}{% else %}<span style="color:var(--muted)">None</span>{% endif %}</td>
            <td>
              {{ coupon.used_count }}{% if coupon.max_uses > 0 %} / {{ coupon.max_uses }}{% else %} / ∞{% endif %}
            </td>
            <td style="font-size:12px">{{ coupon.valid_until|date:"M d, Y" }}</td>
            <td>
              {% if coupon.is_valid %}
                <span class="badge badge-success"><i class="fas fa-circle" style="font-size:7px"></i> Active</span>
              {% else %}
                <span class="badge badge-danger">Expired</span>
              {% endif %}
            </td>
            <td>
              <div style="display:flex;gap:6px">
                <a href="{% url 'dashboard:coupon_edit' coupon.pk %}" class="btn btn-outline btn-sm btn-icon" title="Edit"><i class="fas fa-edit"></i></a>
                <form id="del-coupon-{{ coupon.pk }}" action="{% url 'dashboard:coupon_delete' coupon.pk %}" method="POST" style="display:inline">
                  {% csrf_token %}
                  <button type="button" class="btn btn-danger btn-sm btn-icon" title="Delete"
                          onclick="confirmDelete('del-coupon-{{ coupon.pk }}','Delete coupon {{ coupon.code }}?')">
                    <i class="fas fa-trash"></i>
                  </button>
                </form>
              </div>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="8">
            <div class="empty-state"><i class="fas fa-ticket-alt"></i><h3>No coupons yet</h3><p>Create your first promo code to offer discounts.</p></div>
          </td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}