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

{% block stylesheets %}
<style>
  .section-badge { font-size:.85rem; padding:.35rem .7rem; }
  .overdue-row  { background:#fff5f5; }
  .today-row    { background:#fffbf0; }
  .week-row     { background:#f5fff8; }
  .days-badge   { font-size:.75rem; min-width:60px; }
</style>
{% endblock %}

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

  <!-- Header -->
  <div class="d-flex align-items-center justify-content-between mb-3">
    <div class="d-flex align-items-center">
      <a href="{% url 'installments:deal_list' %}" 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-bell mr-2 text-warning"></i>
          Daily Installment Reminder
        </h4>
        <small class="text-muted">Report Date: {{ report_date }}</small>
      </div>
    </div>
    <button onclick="window.print()" class="btn btn-sm btn-outline-secondary">
      <i class="fa fa-print mr-1"></i> Print
    </button>
  </div>

  <!-- Summary boxes -->
  <div class="row mb-4">
    <div class="col-md-4 mb-2">
      <div class="card border-danger shadow-sm">
        <div class="card-body text-center py-3">
          <div class="text-danger h2 font-weight-bold mb-0">
            {{ summary.overdue_count }}
          </div>
          <div class="text-muted small text-uppercase">Overdue Installments</div>
          <div class="text-danger font-weight-bold mt-1">
            Rs. {{ summary.total_overdue_amount|floatformat:0 }}
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-2">
      <div class="card border-warning shadow-sm">
        <div class="card-body text-center py-3">
          <div class="text-warning h2 font-weight-bold mb-0">
            {{ summary.due_today_count }}
          </div>
          <div class="text-muted small text-uppercase">Due Today</div>
          <div class="text-warning font-weight-bold mt-1">
            Rs. {{ summary.total_due_today|floatformat:0 }}
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-2">
      <div class="card border-success shadow-sm">
        <div class="card-body text-center py-3">
          <div class="text-success h2 font-weight-bold mb-0">
            {{ summary.due_week_count }}
          </div>
          <div class="text-muted small text-uppercase">Due This Week</div>
          <div class="text-success font-weight-bold mt-1">
            Rs. {{ summary.total_due_week|floatformat:0 }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- OVERDUE -->
  {% if overdue %}
  <div class="card shadow-sm mb-4">
    <div class="card-header font-weight-bold d-flex align-items-center">
      <span class="badge badge-danger section-badge mr-2">
        🔴 OVERDUE — {{ overdue|length }} customers
      </span>
      <span class="text-muted small">Total: Rs. {{ summary.total_overdue_amount|floatformat:0 }}</span>
    </div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0">
        <thead class="thead-light">
          <tr>
            <th>Deal #</th>
            <th>Customer</th>
            <th class="text-center">Installment #</th>
            <th>Due Date</th>
            <th class="text-center">Days Late</th>
            <th class="text-right">Overdue Amount</th>
            <th class="text-center">Action</th>
          </tr>
        </thead>
        <tbody>
          {% for row in overdue %}
          <tr class="overdue-row">
            <td>
              <a href="{% url 'installments:deal_detail' row.deal.id %}"
                 class="font-weight-bold text-danger">
                #{{ row.deal.installment_no }}
              </a>
            </td>
            <td class="font-weight-bold">{{ row.customer_name }}</td>
            <td class="text-center">{{ row.slot.installment_number }}</td>
            <td class="small">{{ row.slot.due_date }}</td>
            <td class="text-center">
              <span class="badge badge-danger days-badge">
                {{ row.days_late }} days
              </span>
            </td>
            <td class="text-right font-weight-bold text-danger">
              Rs. {{ row.remaining|floatformat:0 }}
            </td>
            <td class="text-center">
              <a href="{% url 'installments:payment_receive' row.deal.id %}"
                 class="btn btn-xs btn-success">
                <i class="fa fa-money-bill"></i> Receive
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  <!-- DUE TODAY -->
  {% if due_today %}
  <div class="card shadow-sm mb-4">
    <div class="card-header font-weight-bold d-flex align-items-center">
      <span class="badge badge-warning section-badge mr-2">
        🟡 DUE TODAY — {{ due_today|length }} customers
      </span>
      <span class="text-muted small">Total: Rs. {{ summary.total_due_today|floatformat:0 }}</span>
    </div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0">
        <thead class="thead-light">
          <tr>
            <th>Deal #</th>
            <th>Customer</th>
            <th class="text-center">Installment #</th>
            <th class="text-right">Due Amount</th>
            <th class="text-center">Action</th>
          </tr>
        </thead>
        <tbody>
          {% for row in due_today %}
          <tr class="today-row">
            <td>
              <a href="{% url 'installments:deal_detail' row.deal.id %}"
                 class="font-weight-bold">
                #{{ row.deal.installment_no }}
              </a>
            </td>
            <td class="font-weight-bold">{{ row.customer_name }}</td>
            <td class="text-center">{{ row.slot.installment_number }}</td>
            <td class="text-right font-weight-bold text-warning">
              Rs. {{ row.remaining|floatformat:0 }}
            </td>
            <td class="text-center">
              <a href="{% url 'installments:payment_receive' row.deal.id %}"
                 class="btn btn-xs btn-success">
                <i class="fa fa-money-bill"></i> Receive
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  <!-- DUE THIS WEEK -->
  {% if due_week %}
  <div class="card shadow-sm mb-4">
    <div class="card-header font-weight-bold d-flex align-items-center">
      <span class="badge badge-success section-badge mr-2">
        🟢 DUE THIS WEEK — {{ due_week|length }} upcoming
      </span>
      <span class="text-muted small">Total: Rs. {{ summary.total_due_week|floatformat:0 }}</span>
    </div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0">
        <thead class="thead-light">
          <tr>
            <th>Deal #</th>
            <th>Customer</th>
            <th class="text-center">Installment #</th>
            <th>Due Date</th>
            <th class="text-center">Days Until Due</th>
            <th class="text-right">Amount</th>
            <th class="text-center">Action</th>
          </tr>
        </thead>
        <tbody>
          {% for row in due_week %}
          <tr class="week-row">
            <td>
              <a href="{% url 'installments:deal_detail' row.deal.id %}"
                 class="font-weight-bold">
                #{{ row.deal.installment_no }}
              </a>
            </td>
            <td class="font-weight-bold">{{ row.customer_name }}</td>
            <td class="text-center">{{ row.slot.installment_number }}</td>
            <td class="small">{{ row.slot.due_date }}</td>
            <td class="text-center">
              <span class="badge badge-success days-badge">
                {{ row.days_until }} day(s)
              </span>
            </td>
            <td class="text-right font-weight-bold text-success">
              Rs. {{ row.remaining|floatformat:0 }}
            </td>
            <td class="text-center">
              <a href="{% url 'installments:payment_receive' row.deal.id %}"
                 class="btn btn-xs btn-outline-success">
                <i class="fa fa-money-bill"></i> Receive
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  {% if not overdue and not due_today and not due_week %}
  <div class="alert alert-success text-center py-4">
    <i class="fa fa-check-circle fa-2x mb-2 d-block"></i>
    <strong>All clear!</strong> No overdue or upcoming installments for today.
  </div>
  {% endif %}

</div>
{% endblock %}