{% extends "pos/base.html" %}
{% block title %}Reverse Payment — Deal #{{ deal.installment_no }}{% endblock %}

{% block content %}
<div class="container-fluid py-3">
  <div class="row justify-content-center">
    <div class="col-lg-6">

      <div class="d-flex align-items-center mb-3">
        <a href="{% url 'installments:deal_detail' deal.id %}"
           class="btn btn-sm btn-outline-secondary mr-2">
          <i class="fa fa-arrow-left"></i>
        </a>
        <h4 class="mb-0 font-weight-bold text-danger">
          <i class="fa fa-undo mr-2"></i> Reverse Payment
        </h4>
      </div>

      <div class="card border-warning shadow-sm">
        <div class="card-header bg-warning font-weight-bold">
          Confirm Reversal — Payment of {{ payment.amount_received|floatformat:0 }}
        </div>
        <div class="card-body">

          <!-- Payment details -->
          <div class="row mb-3">
            <div class="col-6">
              <div class="small text-muted">Payment Date</div>
              <div class="font-weight-bold">{{ payment.payment_date }}</div>
            </div>
            <div class="col-6">
              <div class="small text-muted">Amount Received</div>
              <div class="font-weight-bold text-success">{{ payment.amount_received|floatformat:0 }}</div>
            </div>
            <div class="col-6 mt-2">
              <div class="small text-muted">Profit Recognized</div>
              <div class="font-weight-bold text-info">{{ payment.profit_recognized|floatformat:0 }}</div>
            </div>
            <div class="col-6 mt-2">
              <div class="small text-muted">Remarks</div>
              <div class="small">{{ payment.remarks|default:"—" }}</div>
            </div>
          </div>

          <!-- Impact on schedule -->
          {% if allocs %}
          <div class="alert alert-light border mb-3">
            <strong class="small">Schedule slots that will be re-opened:</strong>
            <ul class="mb-0 mt-1">
              {% for alloc in allocs %}
              <li class="small">
                Installment #{{ alloc.schedule.installment_number }}
                — {{ alloc.allocated_amount|floatformat:0 }} will be reversed
                → status back to
                <strong>
                  {% if alloc.schedule.due_date < today %}Overdue{% else %}Pending{% endif %}
                </strong>
              </li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}

          <p class="text-danger font-weight-bold mb-1">
            <i class="fa fa-exclamation-triangle mr-1"></i>
            This will also recalculate profit recognition for all later payments.
          </p>
          <p class="text-muted small mb-3">
            Customer balance and bank balance will be automatically corrected.
          </p>

          <div class="d-flex">
            <a href="{% url 'installments:deal_detail' deal.id %}"
               class="btn btn-secondary mr-2">
              <i class="fa fa-times mr-1"></i> Cancel
            </a>
            <form method="post">
              {% csrf_token %}
              <button type="submit" class="btn btn-danger">
                <i class="fa fa-undo mr-1"></i> Yes, Reverse This Payment
              </button>
            </form>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>
{% endblock %}