{% extends "pos/base.html" %}
{% block title %}Customer Payment Requests{% endblock %}
{% block heading %}Customer Payment Requests{% endblock %}

{% block content %}
<form method="get" class="form-inline mb-3">
  <label class="mr-2">Status:</label>
  <select name="status" class="form-control mr-2" onchange="this.form.submit()">
    {% for val, label in status_choices %}
      <option value="{{ val }}" {% if val == status_filter %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
</form>

<table class="table table-bordered table-hover">
  <thead class="thead-light">
    <tr><th>Submitted</th><th>Party</th><th>Claimed Amount</th><th>Screenshot</th><th>Note</th><th>Status</th><th>Action</th></tr>
  </thead>
  <tbody>
    {% for r in requests %}
    <tr>
      <td>{{ r.submitted_at }}</td>
      <td>{{ r.party.name }}</td>
      <td>{{ r.claimed_amount|floatformat:2 }}</td>
      <td><a href="{{ r.screenshot.url }}" target="_blank"><i class="fas fa-image"></i> View</a></td>
      <td>{{ r.customer_note }}</td>
      <td>
        {% if r.status == "PENDING" %}<span class="badge badge-warning">Pending</span>
        {% elif r.status == "APPROVED" %}<span class="badge badge-success">Approved</span>
        {% else %}<span class="badge badge-secondary">Rejected</span>{% endif %}
      </td>
      <td>
        {% if r.status == "PENDING" %}
          <a href="{% url 'customer_portal:review_payment_request' r.pk %}" class="btn btn-sm btn-primary">Review</a>
        {% else %}—{% endif %}
      </td>
    </tr>
    {% empty %}
    <tr><td colspan="7" class="text-center text-muted">No requests found.</td></tr>
    {% endfor %}
  </tbody>
</table>
{% endblock %}