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

{% block stylesheets %}
<style>
.slot-overdue  { background:#fff0f0; }
.slot-pending  { background:#fffef0; }
.slot-partial  { background:#fff8e0; }
.slot-paid     { background:#f0fff4; color:#777; }
.deal-info-label { font-size:.72rem; color:#888; text-transform:uppercase; font-weight:600; }
.deal-info-val   { font-weight:700; font-size:1rem; }
.amount-box { background:linear-gradient(135deg,#1a7a3a,#28a745); color:#fff; border-radius:10px; padding:1.2rem; text-align:center; }
.amount-box .big-num { font-size:2rem; font-weight:800; }
</style>
{% endblock %}

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

  <!-- Header -->
  <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>
    <div>
      <h4 class="mb-0 font-weight-bold">
        <i class="fa fa-hand-holding-usd mr-2 text-success"></i>
        Receive Payment — Deal #{{ deal.installment_no }}
      </h4>
      <small class="text-muted">
        {{ customer.name|default:"—" }}
        {% if customer.mobile %} · {{ customer.mobile }}{% endif %}
      </small>
    </div>
    <div class="ml-auto">
      <a href="{% url 'installments:payment_collection' %}" class="btn btn-sm btn-outline-primary">
        <i class="fa fa-list mr-1"></i> Payment Collection
      </a>
    </div>
  </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">

    <!-- LEFT: Deal Overview + Payment Form -->
    <div class="col-lg-7">

      <!-- Deal Summary Boxes -->
      <div class="row mb-3">
        <div class="col-md-3 col-6 mb-2">
          <div class="card text-center border-0 shadow-sm h-100">
            <div class="card-body py-2 px-1">
              <div class="deal-info-label">Total Price</div>
              <div class="deal-info-val text-dark">Rs. {{ deal.total_price|floatformat:0 }}</div>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-6 mb-2">
          <div class="card text-center border-0 shadow-sm h-100">
            <div class="card-body py-2 px-1">
              <div class="deal-info-label">Total Paid</div>
              <div class="deal-info-val text-success">Rs. {{ summary.total_paid|floatformat:0 }}</div>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-6 mb-2">
          <div class="card text-center border-0 shadow-sm h-100">
            <div class="card-body py-2 px-1">
              <div class="deal-info-label">Remaining</div>
              <div class="deal-info-val text-danger">Rs. {{ summary.total_pending|floatformat:0 }}</div>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-6 mb-2">
          <div class="card text-center border-0 shadow-sm h-100">
            <div class="card-body py-2 px-1">
              <div class="deal-info-label">Done / Total</div>
              <div class="deal-info-val text-info">{{ summary.installments_done }}/{{ summary.installments_total }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Overdue Alert -->
      {% if summary.overdue_amount > 0 %}
      <div class="alert alert-danger py-2 mb-3">
        <i class="fa fa-exclamation-triangle mr-2"></i>
        <strong>Overdue: Rs. {{ summary.overdue_amount|floatformat:0 }}</strong>
        — {{ summary.overdue_days }} day(s) overdue.
      </div>
      {% endif %}

      <!-- Payment Form -->
      <div class="card shadow-sm mb-3">
        <div class="card-header py-2">
          <i class="fa fa-plus-circle mr-2 text-success"></i>
          <strong>Receive New Payment</strong>
          <small class="text-muted ml-2">— can pay multiple installments at once</small>
        </div>
        <div class="card-body">
          <form method="post" id="payment-form">
            {% csrf_token %}
            <div class="row">

              <!-- Amount -->
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">
                    Amount Received <span class="text-danger">*</span>
                  </label>
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text font-weight-bold">Rs.</span>
                    </div>
                    <input type="number" name="amount_received" id="amount-received"
                           class="form-control form-control-lg font-weight-bold"
                           step="0.01" min="0.01"
                           max="{{ summary.total_pending|floatformat:2 }}"
                           value="{{ form_data.amount_received|default:summary.next_due_amount|floatformat:2 }}"
                           autofocus required>
                  </div>
                  <small class="text-muted">
                    Next installment: <strong>Rs. {{ summary.next_due_amount|floatformat:0 }}</strong>
                    &nbsp;|&nbsp;
                    Max (all remaining): <strong>Rs. {{ summary.total_pending|floatformat:0 }}</strong>
                  </small>
                  <!-- Quick amount buttons -->
                  <div class="mt-2">
                    <button type="button" class="btn btn-xs btn-outline-primary mr-1"
                            onclick="$('#amount-received').val('{{ summary.next_due_amount|floatformat:2 }}')">
                      Next Slot
                    </button>
                    {% if summary.overdue_amount > 0 %}
                    <button type="button" class="btn btn-xs btn-outline-warning mr-1"
                            onclick="$('#amount-received').val('{{ summary.overdue_amount|floatformat:2 }}')">
                      All Overdue
                    </button>
                    {% endif %}
                    <button type="button" class="btn btn-xs btn-outline-danger"
                            onclick="$('#amount-received').val('{{ summary.total_pending|floatformat:2 }}')">
                      Full Remaining
                    </button>
                  </div>
                </div>
              </div>

              <!-- Payment Date -->
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Payment Date <span class="text-danger">*</span></label>
                  <input type="date" name="payment_date" class="form-control"
                         value="{{ form_data.payment_date|default:today }}" required>
                </div>
              </div>

              <!-- Bank -->
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Bank / Cash Account <span class="text-danger">*</span></label>
                  <select name="bank_id" class="form-control" required>
                    <option value="">— Select —</option>
                    {% for b in bank_accounts %}
                    <option value="{{ b.t_id }}"
                      {% if form_data.bank_id == b.t_id|stringformat:"s" %}selected{% endif %}>
                      {{ b.name }}
                    </option>
                    {% endfor %}
                  </select>
                </div>
              </div>

              <!-- Received By -->
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Received By</label>
                  <input type="text" name="received_by" class="form-control"
                         placeholder="Staff name"
                         value="{{ form_data.received_by|default:'' }}">
                </div>
              </div>

              <!-- Remarks -->
              <div class="col-12">
                <div class="form-group mb-2">
                  <label class="font-weight-bold">Remarks</label>
                  <input type="text" name="remarks" class="form-control"
                         placeholder="Optional notes"
                         value="{{ form_data.remarks|default:'' }}">
                </div>
              </div>

            </div>

            <hr class="my-2">
            <div class="d-flex justify-content-between align-items-center">
              <a href="{% url 'installments:deal_detail' deal.id %}" class="btn btn-outline-secondary">
                <i class="fa fa-times mr-1"></i> Cancel
              </a>
              <button type="submit" class="btn btn-success btn-lg">
                <i class="fa fa-check mr-2"></i> Confirm & Save Payment
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- Payment History -->
      {% if payment_history %}
      <div class="card shadow-sm mb-3">
        <div class="card-header py-2 d-flex justify-content-between">
          <strong><i class="fa fa-history mr-2"></i> Payment History</strong>
          <span class="badge badge-secondary">{{ payment_history|length }} payments</span>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-sm mb-0">
              <thead class="thead-light">
                <tr>
                  <th>#</th>
                  <th>Date</th>
                  <th class="text-right">Amount</th>
                  <th>Bank</th>
                  <th>Remarks</th>
                  <th class="text-center">Receipt</th>
                  <th class="text-center">Reverse</th>
                </tr>
              </thead>
              <tbody>
              {% for pmt in payment_history %}
              <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ pmt.payment_date }}</td>
                <td class="text-right font-weight-bold text-success">Rs. {{ pmt.amount_received|floatformat:0 }}</td>
                <td><small>{{ pmt.bank_name|default:"—" }}</small></td>
                <td><small>{{ pmt.remarks|default:"—" }}</small></td>
                <td class="text-center">
                  <a href="{% url 'installments:payment_receipt_pdf' pmt.id %}"
                     target="_blank"
                     class="btn btn-xs btn-outline-info"
                     title="Print Receipt">
                    <i class="fa fa-print"></i>
                  </a>
                </td>
                <td class="text-center">
                  <a href="{% url 'installments:payment_delete' deal.id pmt.id %}"
                     class="btn btn-xs btn-outline-danger"
                     title="Reverse Payment">
                    <i class="fa fa-undo"></i>
                  </a>
                </td>
              </tr>
              {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {% endif %}

    </div><!-- /LEFT -->

    <!-- RIGHT: Full Schedule -->
    <div class="col-lg-5">
      <div class="card shadow-sm">
        <div class="card-header py-2 d-flex justify-content-between align-items-center">
          <strong><i class="fa fa-calendar-alt mr-2 text-primary"></i> Installment Schedule</strong>
          <a href="{% url 'installments:deal_print_pdf' deal.id %}"
             target="_blank" class="btn btn-xs btn-outline-secondary">
            <i class="fa fa-print mr-1"></i> Print Deal
          </a>
        </div>
        <div class="card-body p-0" style="max-height:70vh; overflow-y:auto;">
          <table class="table table-sm mb-0">
            <thead class="thead-dark">
              <tr>
                <th>#</th>
                <th>Due Date</th>
                <th class="text-right">Amount</th>
                <th class="text-right">Paid</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
            {% for slot in schedule %}
            <tr class="
              {% if slot.status == 'OVERDUE' %}slot-overdue
              {% elif slot.status == 'PENDING' %}slot-pending
              {% elif slot.status == 'PARTIAL' %}slot-partial
              {% elif slot.status == 'PAID' %}slot-paid
              {% endif %}
              {% if next_slot and slot.id == next_slot.id %}font-weight-bold{% endif %}
            ">
              <td>{% if slot.installment_number == 0 %}DP{% else %}{{ slot.installment_number }}{% endif %}</td>
              <td class="small">{{ slot.due_date }}</td>
              <td class="text-right">{{ slot.due_amount|floatformat:0 }}</td>
              <td class="text-right text-success">
                {% if slot.paid_amount > 0 %}{{ slot.paid_amount|floatformat:0 }}{% else %}—{% endif %}
              </td>
              <td>
                <span class="badge badge-sm badge-
                  {% if slot.status == 'PAID' %}success
                  {% elif slot.status == 'OVERDUE' %}danger
                  {% elif slot.status == 'PARTIAL' %}warning
                  {% else %}secondary{% endif %}">
                  {{ slot.status }}
                </span>
                {% if next_slot and slot.id == next_slot.id %}
                  <span class="badge badge-primary ml-1" title="Next due">→</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
            </tbody>
            <tfoot class="font-weight-bold bg-light">
              <tr>
                <td colspan="2" class="text-right">Total:</td>
                <td class="text-right">{{ deal.total_price|floatformat:0 }}</td>
                <td class="text-right text-success">{{ summary.total_paid|floatformat:0 }}</td>
                <td class="text-muted small">{{ summary.total_pending|floatformat:0 }} left</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div><!-- /RIGHT -->

  </div><!-- /row -->
</div>
{% endblock %}