{% extends 'base.html' %}
{% block title %}Payment History — Avighna{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h4 style="font-weight:700;margin:0;">Payment History</h4>
    <p style="color:#888;font-size:.87rem;margin:0;">All transactions for {{ org.name }}</p>
  </div>
</div>

<div class="card">
  <div style="padding:20px;">
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Date</th>
            <th>Plan</th>
            <th>Original</th>
            <th>Discount</th>
            <th>GST</th>
            <th>Paid</th>
            <th>Method</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {% for p in payments %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td style="font-size:.83rem;white-space:nowrap;">{{ p.created_at|date:"d M Y H:i" }}</td>
            <td>
              <span style="font-weight:600;">{{ p.get_plan_display }}</span>
              {% if p.coupon %}
                <br><small style="color:#1a7a4a;font-size:.75rem;">Coupon: {{ p.coupon.code }}</small>
              {% endif %}
            </td>
            <td>₹{{ p.original_amount }}</td>
            <td style="color:#1a7a4a;">
              {% if p.discount_amount > 0 %}-₹{{ p.discount_amount }}{% else %}—{% endif %}
            </td>
            <td>₹{{ p.gst_amount }}</td>
            <td style="font-weight:700;">₹{{ p.final_amount }}</td>
            <td style="font-size:.83rem;">{{ p.payment_method|default:"—" }}</td>
            <td>
              <span style="
                padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700;
                background:{% if p.status == 'success' %}#e8f5ee{% elif p.status == 'failed' %}#fdecea{% else %}#fff8e1{% endif %};
                color:{% if p.status == 'success' %}#1a7a4a{% elif p.status == 'failed' %}#d62828{% else %}#5d4037{% endif %};
              ">{{ p.get_status_display }}</span>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="9" class="text-center text-muted py-4">No payments yet.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% endblock %}