{% extends "pos/base.html" %}
{% block title %}Ledger — {{ customer.name }}{% endblock %}

{% block stylesheets %}
<style>
  .deal-card { border-left: 4px solid #007bff; }
  .deal-card.completed { border-left-color: #28a745; }
  .deal-card.defaulted { border-left-color: #dc3545; }
  .info-label { font-size:.72rem; color:#6c757d; text-transform:uppercase; }
  .slot-paid    { background:#f6fff9; }
  .slot-overdue { background:#fff8f0; }
  .slot-partial { background:#fffbf0; }
  .grand-total-row { background:#f0f4ff; font-weight:700; }
  .deal-header { cursor:pointer; }
  .deal-header:hover { background:#f8f9fa; }
</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:customer_ledger_search' %}"
         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-book mr-2 text-primary"></i>
          {{ customer.name }}
        </h4>
        <small class="text-muted">
          Installment Ledger &mdash;
          {{ customer.mobile|default:"" }}
          &mdash; {{ ledger|length }} Deal(s)
        </small>
      </div>
    </div>
    <a href="{% url 'installments:deal_add' %}" class="btn btn-sm btn-primary">
      <i class="fa fa-plus mr-1"></i> New Deal
    </a>
  </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 %}

  <!-- Grand Summary -->
  <div class="row mb-4">
    <div class="col-6 col-md-3 mb-2">
      <div class="card border-0 bg-light text-center py-3">
        <div class="info-label">Total Business</div>
        <div class="h4 font-weight-bold mb-0">{{ grand_total_price|floatformat:0 }}</div>
      </div>
    </div>
    <div class="col-6 col-md-3 mb-2">
      <div class="card border-0 text-center py-3" style="background:#f0fff4;">
        <div class="info-label">Total Received</div>
        <div class="h4 font-weight-bold text-success mb-0">{{ grand_total_received|floatformat:0 }}</div>
      </div>
    </div>
    <div class="col-6 col-md-3 mb-2">
      <div class="card border-0 text-center py-3" style="background:#fff8f0;">
        <div class="info-label">Total Pending</div>
        <div class="h4 font-weight-bold text-warning mb-0">{{ grand_total_pending|floatformat:0 }}</div>
      </div>
    </div>
    <div class="col-6 col-md-3 mb-2">
      <div class="card border-0 text-center py-3"
           style="{% if grand_overdue > 0 %}background:#fff0f0;{% else %}background:#f0fff4;{% endif %}">
        <div class="info-label">Overdue</div>
        <div class="h4 font-weight-bold {% if grand_overdue > 0 %}text-danger{% else %}text-success{% endif %} mb-0">
          {{ grand_overdue|floatformat:0 }}
        </div>
      </div>
    </div>
  </div>

  <!-- Deals -->
  {% for row in ledger %}
  {% with deal=row.deal summary=row.summary %}
  <div class="card shadow-sm mb-4 deal-card {% if deal.status == 'COMPLETED' %}completed{% elif deal.status == 'DEFAULTED' %}defaulted{% endif %}">

    <!-- Deal Header (collapsible) -->
    <div class="card-header deal-header d-flex justify-content-between align-items-center py-2"
         data-toggle="collapse" data-target="#deal-{{ deal.id }}">
      <div>
        <span class="font-weight-bold mr-2">Deal #{{ deal.installment_no }}</span>
        <span class="text-muted small mr-2">
          {{ deal.plan.plan_name|default:"Custom" }} &mdash; {{ deal.duration_months }} months
        </span>
        <span class="text-muted small">{{ deal.sale_date }}</span>
      </div>
      <div class="d-flex align-items-center">
        <!-- Mini progress -->
        <small class="mr-3 text-muted">
          {{ summary.installments_done }}/{{ summary.installments_total }} paid
        </small>
        {% if deal.status == 'COMPLETED' %}
          <span class="badge badge-success mr-2">Completed</span>
        {% elif summary.overdue_amount > 0 %}
          <span class="badge badge-danger mr-2">Overdue</span>
        {% elif deal.status == 'ACTIVE' %}
          <span class="badge badge-primary mr-2">Active</span>
        {% else %}
          <span class="badge badge-secondary mr-2">{{ deal.status }}</span>
        {% endif %}
        <a href="{% url 'installments:deal_detail' deal.id %}"
           class="btn btn-xs btn-outline-primary mr-1"
           onclick="event.stopPropagation();">
          <i class="fa fa-eye"></i>
        </a>
        {% if deal.status == 'ACTIVE' %}
        <a href="{% url 'installments:payment_receive' deal.id %}"
           class="btn btn-xs btn-success"
           onclick="event.stopPropagation();">
          <i class="fa fa-money-bill"></i> Pay
        </a>
        {% endif %}
        <i class="fa fa-chevron-down ml-2 text-muted"></i>
      </div>
    </div>

    <!-- Collapsible body -->
    <div id="deal-{{ deal.id }}" class="collapse {% if forloop.first %}show{% endif %}">
      <div class="card-body p-0">

        <!-- Deal amounts row -->
        <div class="row border-bottom mx-0 py-2 bg-light">
          <div class="col-4 col-md-2 text-center border-right">
            <div class="info-label">Cash Price</div>
            <div class="font-weight-bold">{{ deal.cash_price|floatformat:0 }}</div>
          </div>
          <div class="col-4 col-md-2 text-center border-right">
            <div class="info-label">Markup</div>
            <div class="font-weight-bold text-warning">{{ deal.markup_amount|floatformat:0 }}</div>
          </div>
          <div class="col-4 col-md-2 text-center border-right">
            <div class="info-label">Total Price</div>
            <div class="font-weight-bold">{{ deal.total_price|floatformat:0 }}</div>
          </div>
          <div class="col-4 col-md-2 text-center border-right">
            <div class="info-label">Down Payment</div>
            <div class="font-weight-bold text-info">{{ deal.down_payment|floatformat:0 }}</div>
          </div>
          <div class="col-4 col-md-2 text-center border-right">
            <div class="info-label">Monthly</div>
            <div class="font-weight-bold text-primary">{{ deal.monthly_amount|floatformat:0 }}</div>
          </div>
          <div class="col-4 col-md-2 text-center">
            <div class="info-label">Remaining</div>
            <div class="font-weight-bold {% if summary.total_pending > 0 %}text-danger{% else %}text-success{% endif %}">
              {{ summary.total_pending|floatformat:0 }}
            </div>
          </div>
        </div>

        <!-- Schedule table -->
        <div class="table-responsive">
          <table class="table table-sm mb-0">
            <thead class="thead-light">
              <tr>
                <th style="width:50px;">#</th>
                <th>Due Date</th>
                <th class="text-right">Due</th>
                <th class="text-right">Paid</th>
                <th class="text-right">Balance</th>
                <th class="text-center">Status</th>
                <th>Last Paid</th>
              </tr>
            </thead>
            <tbody>
              {% for slot in row.schedule %}
              <tr class="
                {% if slot.status == 'PAID' %}slot-paid
                {% elif slot.status == 'OVERDUE' %}slot-overdue
                {% elif slot.status == 'PARTIAL' %}slot-partial{% endif %}">
                <td>
                  {% if slot.installment_number == 0 %}
                    <span class="badge badge-secondary">DP</span>
                  {% else %}
                    {{ slot.installment_number }}
                  {% endif %}
                </td>
                <td class="small">{{ slot.due_date }}</td>
                <td class="text-right small">{{ slot.due_amount|floatformat:0 }}</td>
                <td class="text-right small font-weight-bold">
                  {% if slot.paid_amount > 0 %}
                    <span class="text-success">{{ slot.paid_amount|floatformat:0 }}</span>
                  {% else %}—{% endif %}
                </td>
                <td class="text-right small">
                  {% if slot.status == 'PAID' %}
                    <span class="text-success">0</span>
                  {% else %}
                    {{ slot.due_amount|floatformat:0 }}
                  {% endif %}
                </td>
                <td class="text-center">
                  {% if slot.status == 'PAID' %}
                    <span class="badge badge-success badge-pill">Paid</span>
                  {% elif slot.status == 'PARTIAL' %}
                    <span class="badge badge-warning badge-pill">Partial</span>
                  {% elif slot.status == 'OVERDUE' %}
                    <span class="badge badge-danger badge-pill">Overdue</span>
                  {% else %}
                    <span class="badge badge-light text-dark badge-pill">Pending</span>
                  {% endif %}
                </td>
                <td class="small text-muted">{{ slot.last_payment_date|default:"—" }}</td>
              </tr>
              {% endfor %}
            </tbody>
            <!-- Running totals row -->
            <tfoot class="grand-total-row">
              <tr>
                <td colspan="2" class="text-right">Totals:</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-right {% if summary.total_pending > 0 %}text-danger{% else %}text-success{% endif %}">
                  {{ summary.total_pending|floatformat:0 }}
                </td>
                <td colspan="2"></td>
              </tr>
            </tfoot>
          </table>
        </div>

      </div>
    </div>

  </div>
  {% endwith %}
  {% empty %}
  <div class="alert alert-light text-center">
    <i class="fa fa-info-circle mr-2 text-muted"></i>
    No installment deals found for {{ customer.name }}.
    <a href="{% url 'installments:deal_add' %}" class="ml-2">Create first deal.</a>
  </div>
  {% endfor %}

</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
/* Collapse/expand all toggle */
$('.deal-header').on('click', function() {
  var icon = $(this).find('.fa-chevron-down, .fa-chevron-up');
  icon.toggleClass('fa-chevron-down fa-chevron-up');
});
</script>
{% endblock %}