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

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

  <div class="d-flex align-items-center mb-3">
    <a href="{% url 'installments:downpayment_collection' %}" 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>
      Receive Down Payment — Deal #{{ deal.installment_no }}
    </h4>
  </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="row">
    <div class="col-lg-5">
      <div class="card shadow-sm mb-3">
        <div class="card-header font-weight-bold">Deal Summary</div>
        <div class="card-body py-2">
          <table class="table table-sm mb-0">
            <tr><th style="width:45%;">Customer</th><td>{{ customer.name|default:"—" }}</td></tr>
            <tr><th>Mobile</th><td>{{ customer.mobile|default:"—" }}</td></tr>
            <tr><th>Sale Date</th><td>{{ deal.sale_date }}</td></tr>
            <tr><th>Total Price</th><td>Rs. {{ deal.total_price|floatformat:0 }}</td></tr>
            <tr><th>Down Payment Due</th><td>Rs. {{ dp_slot.due_amount|floatformat:0 }}</td></tr>
            <tr><th>Already Received</th><td>Rs. {{ dp_slot.paid_amount|floatformat:0 }}</td></tr>
            <tr class="font-weight-bold">
              <th>Remaining</th>
              <td class="{% if remaining > 0 %}text-danger{% else %}text-success{% endif %}">
                Rs. {{ remaining|floatformat:0 }}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div class="col-lg-7">
      <div class="card shadow-sm mb-3">
        <div class="card-header font-weight-bold">Down Payment Receipt</div>
        <div class="card-body py-2">

          {% if already_paid %}
            <div class="alert alert-success mb-0">
              <i class="fa fa-check-circle mr-1"></i>
              Down payment for this deal has already been received in full.
              Receiving it again from here is not allowed. If this needs a
              correction, use the deal's payment history / delete option
              instead.
            </div>
          {% else %}
            <form method="post">
              {% csrf_token %}

              <div class="form-group row mb-2">
                <label class="col-sm-4 col-form-label small font-weight-bold">Amount Received *</label>
                <div class="col-sm-8">
                  <input type="number" name="amount_received" id="amount-received"
                         class="form-control form-control-sm" step="0.01" min="0.01"
                         max="{{ remaining }}"
                         value="{{ form_data.amount_received|default:remaining }}" required>
                  <small class="text-muted">Maximum: Rs. {{ remaining|floatformat:0 }}</small>
                </div>
              </div>

              <div class="form-group row mb-2">
                <label class="col-sm-4 col-form-label small font-weight-bold">Bank / Cash Account *</label>
                <div class="col-sm-8">
                  <select name="bank_id" id="bank-id" class="form-control form-control-sm" required>
                    <option value="">— Select —</option>
                    {% for b in bank_accounts %}
                      <option value="{{ b.t_id }}" {% if form_data.bank_id|stringformat:"s" == b.t_id|stringformat:"s" %}selected{% endif %}>
                        {{ b.name }}
                      </option>
                    {% endfor %}
                  </select>
                </div>
              </div>

              <div class="form-group row mb-2">
                <label class="col-sm-4 col-form-label small font-weight-bold">Payment Date *</label>
                <div class="col-sm-8">
                  <input type="date" name="payment_date" id="payment-date"
                         class="form-control form-control-sm"
                         value="{{ form_data.payment_date|default:today }}" required>
                </div>
              </div>

              <div class="form-group row mb-2">
                <label class="col-sm-4 col-form-label small font-weight-bold">Received By</label>
                <div class="col-sm-8">
                  <input type="text" name="received_by" id="received-by"
                         class="form-control form-control-sm"
                         value="{{ form_data.received_by|default:'' }}">
                </div>
              </div>

              <div class="form-group row mb-3">
                <label class="col-sm-4 col-form-label small font-weight-bold">Remarks</label>
                <div class="col-sm-8">
                  <input type="text" name="remarks" id="remarks"
                         class="form-control form-control-sm"
                         value="{{ form_data.remarks|default:'' }}">
                </div>
              </div>

              <div class="text-right">
                <button type="submit" class="btn btn-success btn-sm">
                  <i class="fa fa-check mr-1"></i> Receive Down Payment
                </button>
              </div>
            </form>
          {% endif %}

        </div>
      </div>
    </div>
  </div>

</div>

<script>
"use strict";
// Enter key → next field (same convention as the deal form)
(function() {
  var order = ['#amount-received', '#bank-id', '#payment-date', '#received-by', '#remarks'];
  order.forEach(function(sel, idx) {
    document.addEventListener('keydown', function(e) {}, false);
  });
  document.querySelectorAll(order.join(',')).forEach(function(el, idx) {
    el.addEventListener('keydown', function(e) {
      if (e.key !== 'Enter') return;
      e.preventDefault();
      var next = document.querySelector(order[idx + 1]);
      if (next) { next.focus(); if (next.select) next.select(); }
    });
  });
})();
</script>
{% endblock %}