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

{% block content %}
<div class="page-header">
  <div class="breadcrumb">
    <a href="{% url 'dashboard:home' %}">Dashboard</a> <span>/</span>
    <a href="{% url 'dashboard:coupon_list' %}">Coupons</a> <span>/</span> {{ action }}
  </div>
  <h1 class="page-title">{{ action }} Coupon</h1>
</div>

<div style="max-width:680px">
<form method="POST">
{% csrf_token %}
<div class="card" style="margin-bottom:20px">
  <div class="card-header"><div class="card-title"><i class="fas fa-ticket-alt" style="color:var(--accent);margin-right:8px"></i>Coupon Details</div></div>
  <div class="card-body">

    <div class="form-row">
      <div class="form-group">
        <label class="form-label">Coupon Code *</label>
        <input type="text" name="code" class="form-control" required
               value="{{ coupon.code|default:'' }}"
               placeholder="e.g. SAVE20" style="text-transform:uppercase">
        <div class="form-hint">Customers will enter this at checkout</div>
      </div>
      <div class="form-group">
        <label class="form-label">Discount Type *</label>
        <select name="discount_type" class="form-control" id="discountType" onchange="updateLabel()">
          <option value="percent" {% if coupon.discount_type == 'percent' %}selected{% endif %}>Percentage (%)</option>
          <option value="fixed" {% if coupon.discount_type == 'fixed' %}selected{% endif %}>Fixed Amount (₦)</option>
        </select>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label class="form-label" id="discountLabel">Discount Value *</label>
        <input type="number" name="discount_value" class="form-control" required step="0.01" min="0"
               value="{{ coupon.discount_value|default:'' }}" placeholder="e.g. 10">
      </div>
      <div class="form-group">
        <label class="form-label">Minimum Order Amount (₦)</label>
        <input type="number" name="minimum_order" class="form-control" step="0.01" min="0"
               value="{{ coupon.minimum_order|default:'0' }}" placeholder="0 = no minimum">
      </div>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label class="form-label">Max Uses</label>
        <input type="number" name="max_uses" class="form-control" min="0"
               value="{{ coupon.max_uses|default:'0' }}" placeholder="0 = unlimited">
        <div class="form-hint">0 means unlimited uses</div>
      </div>
      <div class="form-group">
        <label class="form-label">Status</label>
        <label class="toggle-switch" style="margin-top:10px">
          <input type="checkbox" name="is_active" {% if not coupon or coupon.is_active %}checked{% endif %}>
          <div class="toggle-track"></div>
          <span class="toggle-label">Active</span>
        </label>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label class="form-label">Valid From *</label>
        <input type="datetime-local" name="valid_from" class="form-control" required
               value="{% if coupon %}{{ coupon.valid_from|date:'Y-m-d' }}T{{ coupon.valid_from|time:'H:i' }}{% endif %}">
      </div>
      <div class="form-group">
        <label class="form-label">Valid Until *</label>
        <input type="datetime-local" name="valid_until" class="form-control" required
               value="{% if coupon %}{{ coupon.valid_until|date:'Y-m-d' }}T{{ coupon.valid_until|time:'H:i' }}{% endif %}">
      </div>
    </div>

  </div>
</div>

<div style="display:flex;gap:12px">
  <button type="submit" class="btn btn-accent"><i class="fas fa-save"></i> Save Coupon</button>
  <a href="{% url 'dashboard:coupon_list' %}" class="btn btn-outline">Cancel</a>
</div>
</form>
</div>
{% endblock %}

{% block extra_js %}
<script>
function updateLabel() {
  const type = document.getElementById('discountType').value;
  document.getElementById('discountLabel').textContent = type === 'percent' ? 'Discount % *' : 'Discount Amount (₦) *';
}
updateLabel();
</script>
{% endblock %}