{% extends "base.html" %}
{% load erp_tags %}

{% block title %}{{ object.code }} — Discount Code{% endblock %}

{% block content %}
{# Header Card #}
<div class="row">
  <div class="col-12 mb-4">
    <div class="card">
      <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-start">
          <div>
            <h5 class="font-weight-bolder mb-1">{{ object.code }}</h5>
            <p class="text-sm text-secondary mb-0">
              {{ object.get_discount_type_display }}
              · {% if object.discount_type == 'percent' %}{{ object.value }}% off{% else %}{{ object.value|money }} off{% endif %}
              {% if object.valid_from %} · From {{ object.valid_from }}{% endif %}
              {% if object.valid_to %} to {{ object.valid_to }}{% endif %}
            </p>
          </div>
          <div class="d-flex align-items-center gap-2">
            {% if object.is_active and not object.is_exhausted %}
            <span class="badge bg-gradient-success">Active</span>
            {% elif object.is_exhausted %}
            <span class="badge bg-gradient-warning">Exhausted</span>
            {% else %}
            <span class="badge bg-gradient-secondary">Inactive</span>
            {% endif %}
          </div>
        </div>
        <div class="mt-3">
          <a href="{% url 'erp-discount-edit' object.pk %}" class="btn bg-gradient-dark btn-sm me-2">
            <i class="fas fa-edit me-1"></i> Edit
          </a>
          <a href="{% url 'erp-discount-list' %}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i> Back to List
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

{% if object.description %}
<div class="card mb-4">
  <div class="card-body p-4">
    <p class="text-sm mb-0">{{ object.description }}</p>
  </div>
</div>
{% endif %}

{# Stats Row #}
<div class="row mb-4">
  <div class="col-md-3">
    <div class="card">
      <div class="card-body p-3 text-center">
        <p class="text-xs text-uppercase text-secondary font-weight-bolder mb-0">Uses</p>
        <p class="text-lg font-weight-bolder mb-0">{{ object.times_used }} / {{ object.max_uses }}</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card">
      <div class="card-body p-3 text-center">
        <p class="text-xs text-uppercase text-secondary font-weight-bolder mb-0">Applies To</p>
        <p class="text-lg font-weight-bolder mb-0">{{ object.get_applies_to_display }}</p>
      </div>
    </div>
  </div>
  {% if object.minimum_order %}
  <div class="col-md-3">
    <div class="card">
      <div class="card-body p-3 text-center">
        <p class="text-xs text-uppercase text-secondary font-weight-bolder mb-0">Min. Order</p>
        <p class="text-lg font-weight-bolder mb-0">{{ object.minimum_order|money }}</p>
      </div>
    </div>
  </div>
  {% endif %}
</div>

{% if object.applies_to == 'specific_skus' and object.allowed_skus %}
<div class="card mb-4">
  <div class="card-header pb-0">
    <h6>Allowed SKUs</h6>
  </div>
  <div class="card-body pt-2">
    {% for sku in object.allowed_skus %}
    <span class="badge bg-gradient-dark me-1 mb-1">{{ sku }}</span>
    {% endfor %}
  </div>
</div>
{% endif %}

{# Usage History #}
<div class="card">
  <div class="card-header pb-0">
    <h6>Usage History</h6>
  </div>
  <div class="card-body px-0 pt-0 pb-2">
    {% if usages %}
    <div class="table-responsive p-0">
      <table class="table align-items-center mb-0">
        <thead>
          <tr>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Order</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Customer</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">Discount</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Date</th>
          </tr>
        </thead>
        <tbody>
          {% for usage in usages %}
          <tr>
            <td class="ps-4"><span class="text-xs font-weight-bold">{{ usage.order_number }}</span></td>
            <td><span class="text-xs">{{ usage.customer_email|default:"—" }}</span></td>
            <td class="text-end"><span class="text-xs font-weight-bold text-success">{{ usage.discount_applied|money }}</span></td>
            <td><span class="text-xs text-secondary">{{ usage.used_at|date:"M d, Y H:i" }}</span></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="text-center py-4">
      <p class="text-sm text-secondary mb-0">No usage recorded yet.</p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}