{% extends "pos/base.html" %}
{% block title %}Installment Deals{% endblock %}

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

  <!-- Header -->
  <div class="d-flex align-items-center justify-content-between mb-3">
    <div>
      <h4 class="mb-0 font-weight-bold">Installment Deals</h4>
      <small class="text-muted">All installment sales — click a deal to view details</small>
    </div>
    <div class="d-flex align-items-center">
      <a href="{% url 'installments:plan_list' %}" class="btn btn-outline-secondary btn-sm mr-2">
        <i class="fa fa-list mr-1"></i> Plans
      </a>
      <a href="{% url 'installments:deal_add' %}" class="btn btn-primary btn-sm">
        <i class="fa fa-plus mr-1"></i> New Deal
      </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 %}

  <!-- Filters -->
  <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="{{ search }}"
               class="form-control form-control-sm mr-2"
               placeholder="Search customer or deal #" style="width:220px;">
        <select name="status" class="form-control form-control-sm mr-2">
          <option value="">All Statuses</option>
          <option value="ACTIVE"    {% if status_filter == 'ACTIVE' %}selected{% endif %}>Active</option>
          <option value="COMPLETED" {% if status_filter == 'COMPLETED' %}selected{% endif %}>Completed</option>
          <option value="DEFAULTED" {% if status_filter == 'DEFAULTED' %}selected{% endif %}>Defaulted</option>
          <option value="CANCELLED" {% if status_filter == 'CANCELLED' %}selected{% endif %}>Cancelled</option>
        </select>
        <button type="submit" class="btn btn-sm btn-outline-primary mr-2">
          <i class="fa fa-search"></i> Filter
        </button>
        <a href="{% url 'installments:deal_list' %}" class="btn btn-sm btn-outline-secondary">Clear</a>
      </form>
    </div>
  </div>

  <!-- Deals Table -->
  <div class="card shadow-sm">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover table-sm mb-0">
          <thead class="thead-light">
            <tr>
              <th>Deal #</th>
              <th>Customer</th>
              <th>Plan</th>
              <th class="text-right">Total Price</th>
              <th class="text-right">Down Payment</th>
              <th class="text-right">Total Paid</th>
              <th class="text-right">Remaining</th>
              <th class="text-center">Progress</th>
              <th class="text-center">Status</th>
              <th>Sale Date</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for row in deals_data %}
            {% with deal=row.deal summary=row.summary %}
            <tr class="{% if summary.overdue_amount > 0 %}table-warning{% endif %}">
              <td>
                <a href="{% url 'installments:deal_detail' deal.id %}" class="font-weight-bold text-primary">
                  #{{ deal.installment_no }}
                </a>
              </td>
              <td>{{ row.customer_name }}</td>
              <td class="text-muted small">{{ deal.plan.plan_name|default:"-" }}</td>
              <td class="text-right">{{ deal.total_price|floatformat:0 }}</td>
              <td class="text-right">{{ deal.down_payment|floatformat:0 }}</td>
              <td class="text-right text-success font-weight-bold">{{ summary.total_paid|floatformat:0 }}</td>
              <td class="text-right {% if summary.total_pending > 0 %}text-danger{% endif %}">
                {{ summary.total_pending|floatformat:0 }}
              </td>
              <td class="text-center" style="min-width:90px;">
                <small class="text-muted">{{ summary.installments_done }}/{{ summary.installments_total }}</small>
                <div class="progress mt-1" style="height:5px;">
                  {% with pct=summary.installments_done|default:0 %}
                  {% with total=summary.installments_total|default:1 %}
                  <div class="progress-bar bg-success" style="width:{% widthratio pct total 100 %}%"></div>
                  {% endwith %}
                  {% endwith %}
                </div>
              </td>
              <td class="text-center">
                {% if deal.status == 'ACTIVE' %}
                  {% if summary.overdue_amount > 0 %}
                    <span class="badge badge-warning">Overdue</span>
                  {% else %}
                    <span class="badge badge-primary">Active</span>
                  {% endif %}
                {% elif deal.status == 'COMPLETED' %}
                  <span class="badge badge-success">Completed</span>
                {% elif deal.status == 'DEFAULTED' %}
                  <span class="badge badge-danger">Defaulted</span>
                {% else %}
                  <span class="badge badge-secondary">{{ deal.status }}</span>
                {% endif %}
              </td>
              <td class="text-muted small">{{ deal.sale_date }}</td>
              <td>
                <a href="{% url 'installments:deal_detail' deal.id %}"
                   class="btn btn-xs btn-outline-primary">
                  <i class="fa fa-eye"></i> View
                </a>
              </td>
            </tr>
            {% endwith %}
            {% empty %}
            <tr>
              <td colspan="11" class="text-center text-muted py-4">
                No installment deals found.
                <a href="{% url 'installments:deal_add' %}">Create the first deal.</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}