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

{% block stylesheets %}
<style>
.status-overdue  { background:#fff5f5; border-left:3px solid #dc3545; }
.status-due-soon { background:#fffbf0; border-left:3px solid #ffc107; }
.status-upcoming { background:#f6fff8; border-left:3px solid #28a745; }
.days-badge-danger  { background:#dc3545; color:#fff; border-radius:4px; padding:2px 7px; font-size:.75rem; font-weight:700; }
.days-badge-warn    { background:#ffc107; color:#333; border-radius:4px; padding:2px 7px; font-size:.75rem; font-weight:700; }
.days-badge-ok      { background:#28a745; color:#fff; border-radius:4px; padding:2px 7px; font-size:.75rem; font-weight:700; }
.search-bar { max-width:500px; }
.stat-card { border-radius:8px; padding:.8rem 1.2rem; }
</style>
{% 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"><i class="fa fa-money-bill-wave mr-2 text-success"></i> Payment Collection</h4>
      <small class="text-muted">Pending &amp; overdue installments — click Collect to receive payment</small>
    </div>
    <a href="{% url 'installments:deal_list' %}" class="btn btn-sm btn-outline-secondary">
      <i class="fa fa-list mr-1"></i> All Deals
    </a>
  </div>

  <!-- Search bar -->
  <div class="card shadow-sm mb-3">
    <div class="card-body py-2">
      <form method="get" class="d-flex align-items-center">
        <div class="input-group input-group-sm search-bar mr-3">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="fa fa-search"></i></span>
          </div>
          <input type="text" name="q" class="form-control"
                 placeholder="Search by customer name, CNIC, or mobile..."
                 value="{{ q }}" autofocus>
          {% if q %}
          <div class="input-group-append">
            <a href="{% url 'installments:payment_collection' %}" class="btn btn-outline-secondary">
              <i class="fa fa-times"></i>
            </a>
          </div>
          {% endif %}
        </div>
        <button type="submit" class="btn btn-sm btn-primary mr-3">
          <i class="fa fa-search mr-1"></i> Search
        </button>
        {% if not q %}
          <small class="text-muted"><i class="fa fa-info-circle mr-1"></i> Showing active deals with pending installments</small>
        {% else %}
          <small class="text-muted">Search results for: <strong>{{ q }}</strong> ({{ results|length }} found)</small>
        {% endif %}
      </form>
    </div>
  </div>

  <!-- Stats Summary -->
  {% if results %}
  {% with overdue_count=0 %}
  <div class="row mb-3">
    <div class="col-md-3 col-6 mb-2">
      <div class="stat-card bg-danger text-white">
        <div class="font-weight-bold h5 mb-0">
          {% for r in results %}{% if r.days_overdue > 0 %}✔{% endif %}{% endfor %}
        </div>
        <small>Overdue</small>
      </div>
    </div>
    <div class="col-md-3 col-6 mb-2">
      <div class="stat-card bg-info text-white">
        <div class="font-weight-bold h5 mb-0">{{ results|length }}</div>
        <small>Active Deals Shown</small>
      </div>
    </div>
  </div>
  {% endwith %}
  {% endif %}

  <!-- Results Table -->
  <div class="card shadow-sm">
    <div class="card-header py-2 d-flex justify-content-between align-items-center">
      <span class="font-weight-bold">
        <i class="fa fa-list mr-2"></i>
        {% if q %}Search Results{% else %}Pending Installments{% endif %}
        <span class="badge badge-secondary ml-1">{{ results|length }}</span>
      </span>
    </div>

    {% if results %}
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-hover mb-0">
          <thead class="thead-dark">
            <tr>
              <th>Customer</th>
              <th>Deal #</th>
              <th>Plan / Duration</th>
              <th class="text-right">Next Due</th>
              <th class="text-center">Due Date</th>
              <th class="text-center">Status</th>
              <th class="text-right">Total Pending</th>
              <th class="text-center">Action</th>
            </tr>
          </thead>
          <tbody>
          {% for r in results %}
          {% with deal=r.deal cust=r.customer slot=r.next_slot %}
          <tr class="
            {% if r.days_overdue > 0 %}status-overdue
            {% elif r.days_until <= 5 %}status-due-soon
            {% else %}status-upcoming
            {% endif %}
          ">
            <!-- Customer -->
            <td>
              <div class="font-weight-bold">{{ cust.name|default:"—" }}</div>
              <small class="text-muted">
                {% if cust.mobile %}{{ cust.mobile }}{% endif %}
              </small>
            </td>

            <!-- Deal # -->
            <td>
              <a href="{% url 'installments:deal_detail' deal.id %}" class="font-weight-bold text-primary">
                #{{ deal.installment_no }}
              </a>
            </td>

            <!-- Plan -->
            <td>
              <div>{% if deal.plan %}{{ deal.plan.plan_name }}{% else %}Custom{% endif %}</div>
              <small class="text-muted">{{ deal.duration_months }} months</small>
            </td>

            <!-- Next Due Amount -->
            <td class="text-right">
              {% if slot %}
                <strong>Rs. {{ slot.due_amount|floatformat:0 }}</strong>
              {% else %}
                <span class="text-muted">—</span>
              {% endif %}
            </td>

            <!-- Due Date + Days -->
            <td class="text-center">
              {% if slot %}
                <div>{{ slot.due_date }}</div>
                {% if r.days_overdue > 0 %}
                  <span class="days-badge-danger">{{ r.days_overdue }} days overdue</span>
                {% elif r.days_until == 0 %}
                  <span class="days-badge-warn">Due today</span>
                {% elif r.days_until <= 5 %}
                  <span class="days-badge-warn">{{ r.days_until }} days left</span>
                {% else %}
                  <span class="days-badge-ok">{{ r.days_until }} days left</span>
                {% endif %}
              {% else %}
                <span class="text-muted small">—</span>
              {% endif %}
            </td>

            <!-- Slot Status -->
            <td class="text-center">
              {% if slot %}
                <span class="badge badge-{% if slot.status == 'OVERDUE' %}danger{% elif slot.status == 'PARTIAL' %}warning{% else %}secondary{% endif %}">
                  {{ slot.status }}
                </span>
              {% endif %}
            </td>

            <!-- Total Pending -->
            <td class="text-right text-danger font-weight-bold">
              Rs. {{ r.summary.total_pending|floatformat:0 }}
            </td>

            <!-- Action -->
            <td class="text-center">
              <a href="{% url 'installments:payment_receive' deal.id %}"
                 class="btn btn-sm btn-{% if r.days_overdue > 0 %}danger{% else %}success{% endif %}">
                <i class="fa fa-hand-holding-usd mr-1"></i> Collect
              </a>
            </td>
          </tr>
          {% endwith %}
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    {% else %}
    <div class="card-body text-center py-5 text-muted">
      {% if q %}
        <i class="fa fa-search fa-3x mb-3 d-block text-muted"></i>
        <p>No active deals found for <strong>{{ q }}</strong>.</p>
        <a href="{% url 'installments:payment_collection' %}" class="btn btn-sm btn-outline-primary">Clear Search</a>
      {% else %}
        <i class="fa fa-check-circle fa-3x mb-3 d-block text-success"></i>
        <p class="font-weight-bold">All caught up! No pending installments at this time.</p>
      {% endif %}
    </div>
    {% endif %}

  </div><!-- /card -->

</div>
{% endblock %}