{% extends "pos/base.html" %}
{% block title %}Down Payment Collection{% endblock %}

{% block content %}
<div class="container-fluid py-2">

  <div class="d-flex align-items-center justify-content-between mb-3">
    <div class="d-flex align-items-center">
      <a href="{% url 'installments:deal_list' %}" class="btn btn-sm btn-outline-secondary mr-2">
        <i class="fa fa-arrow-left"></i>
      </a>
      <h4 class="mb-0 font-weight-bold"><i class="fa fa-hand-holding-usd mr-2 text-success"></i> Down Payment Collection</h4>
    </div>
    <a href="{% url 'installments:payment_collection' %}" class="btn btn-sm btn-outline-primary">
      <i class="fa fa-money-bill-wave mr-1"></i> Regular Installment Collection
    </a>
  </div>

  {% if messages %}
    {% for msg in messages %}
      <div class="alert alert-{{ msg.tags }} alert-dismissible fade show py-2">
        {{ msg }}<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
      </div>
    {% endfor %}
  {% endif %}

  <div class="card shadow-sm mb-3">
    <div class="card-body py-2">
      <form method="get" class="form-inline">
        <input type="text" name="q" value="{{ q }}" class="form-control form-control-sm mr-2" style="min-width:280px;"
               placeholder="Search by customer name, CNIC, or mobile...">
        <button type="submit" class="btn btn-sm btn-primary mr-2"><i class="fa fa-search mr-1"></i> Search</button>
        {% if q %}
          <a href="{% url 'installments:downpayment_collection' %}" class="btn btn-sm btn-outline-secondary">Clear</a>
        {% endif %}
      </form>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-hover mb-0">
          <thead class="thead-light">
            <tr>
              <th>Deal #</th>
              <th>Customer</th>
              <th>Sale Date</th>
              <th class="text-right">Down Payment Due</th>
              <th class="text-right">Received</th>
              <th class="text-right">Remaining</th>
              <th>Status</th>
              <th style="width:120px;"></th>
            </tr>
          </thead>
          <tbody>
            {% for row in results %}
            <tr>
              <td class="font-weight-bold">#{{ row.deal.installment_no }}</td>
              <td>{{ row.customer.name|default:"—" }}</td>
              <td>{{ row.deal.sale_date }}</td>
              <td class="text-right">Rs. {{ row.dp_slot.due_amount|floatformat:0 }}</td>
              <td class="text-right">Rs. {{ row.dp_slot.paid_amount|floatformat:0 }}</td>
              <td class="text-right font-weight-bold {% if row.remaining > 0 %}text-danger{% else %}text-success{% endif %}">
                Rs. {{ row.remaining|floatformat:0 }}
              </td>
              <td>
                {% if row.dp_slot.status == 'PAID' %}
                  <span class="badge badge-success">PAID</span>
                {% elif row.dp_slot.status == 'PARTIAL' %}
                  <span class="badge badge-warning">PARTIAL</span>
                {% else %}
                  <span class="badge badge-secondary">PENDING</span>
                {% endif %}
              </td>
              <td>
                <a href="{% url 'installments:downpayment_receive' deal_id=row.deal.id %}"
                   class="btn btn-xs btn-{% if row.dp_slot.status == 'PAID' %}outline-secondary{% else %}success{% endif %}">
                  <i class="fa fa-hand-holding-usd mr-1"></i>
                  {% if row.dp_slot.status == 'PAID' %}View{% else %}Receive{% endif %}
                </a>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="8" class="text-center text-muted py-4">
                {% if q %}No matching deals found.{% else %}No deals with pending down payment.{% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}