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

{% block stylesheets %}
<style>
  .status-badge-lg { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
  .info-label { font-size: 0.75rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.05em; }
  .info-value { font-size: 0.95rem; font-weight: 600; }
  .summary-box { border-radius: 8px; padding: 1rem; text-align: center; }
  .summary-box .amount { font-size: 1.4rem; font-weight: 700; }
  .summary-box .label  { font-size: 0.75rem; text-transform: uppercase; color: #6c757d; }
  .schedule-row-paid    { background: #f0fff4; }
  .schedule-row-overdue { background: #fff8f0; }
  .schedule-row-partial { background: #fffbf0; }
  .witness-card { border-left: 4px solid #6c757d; }
</style>
{% endblock %}

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

  <!-- Page 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">
          Installment Deal #{{ deal.installment_no }}
        </h4>
        <small class="text-muted">
          {{ deal.plan.plan_name|default:"Custom Plan" }} &mdash;
          {{ deal.duration_months }} months &mdash;
          {{ deal.sale_date }}
        </small>
      </div>
    </div>
    <!-- Action buttons -->
    <div class="d-flex align-items-center">
      {% if deal.status == 'ACTIVE' %}
        <a href="{% url 'installments:deal_edit' deal.id %}"
           class="btn btn-sm btn-outline-primary mr-2">
          <i class="fa fa-edit mr-1"></i> Edit Deal
        </a>
      {% endif %}
      <a href="{% url 'installments:deal_delete' deal.id %}"
         class="btn btn-sm btn-outline-danger mr-2">
        <i class="fa fa-trash mr-1"></i> Delete
      </a>
      {% if deal.status == 'ACTIVE' %}
        <span class="badge badge-primary status-badge-lg">Active</span>
      {% elif deal.status == 'COMPLETED' %}
        <span class="badge badge-success status-badge-lg">Completed</span>
      {% elif deal.status == 'DEFAULTED' %}
        <span class="badge badge-danger status-badge-lg">Defaulted</span>
      {% else %}
        <span class="badge badge-secondary status-badge-lg">{{ deal.status }}</span>
      {% endif %}
    </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 %}

  <!-- Summary Boxes -->
  <div class="row mb-3">
    <div class="col-6 col-md-2 mb-2">
      <div class="summary-box bg-light border">
        <div class="amount text-dark">{{ deal.total_price|floatformat:0 }}</div>
        <div class="label">Total Price</div>
      </div>
    </div>
    <div class="col-6 col-md-2 mb-2">
      <div class="summary-box" style="background:#e8f4fd; border:1px solid #bee3f8;">
        <div class="amount text-info">{{ deal.down_payment|floatformat:0 }}</div>
        <div class="label">Down Payment</div>
      </div>
    </div>
    <div class="col-6 col-md-2 mb-2">
      <div class="summary-box" style="background:#f0fff4; border:1px solid #c3e6cb;">
        <div class="amount text-success">{{ summary.total_paid|floatformat:0 }}</div>
        <div class="label">Total Received</div>
      </div>
    </div>
    <div class="col-6 col-md-2 mb-2">
      <div class="summary-box" style="background:#fff8f0; border:1px solid #ffeeba;">
        <div class="amount {% if summary.total_pending > 0 %}text-warning{% else %}text-success{% endif %}">
          {{ summary.total_pending|floatformat:0 }}
        </div>
        <div class="label">Remaining</div>
      </div>
    </div>
    <div class="col-6 col-md-2 mb-2">
      <div class="summary-box {% if summary.overdue_amount > 0 %}bg-danger text-white{% else %}bg-light border{% endif %}">
        <div class="amount">{{ summary.overdue_amount|floatformat:0 }}</div>
        <div class="label">Overdue Amount</div>
        {% if summary.overdue_days > 0 %}
          <small>{{ summary.overdue_days }} days late</small>
        {% endif %}
      </div>
    </div>
    <div class="col-6 col-md-2 mb-2">
      <div class="summary-box bg-light border">
        <div class="amount text-secondary">{{ summary.installments_done }}/{{ summary.installments_total }}</div>
        <div class="label">Installments Done</div>
      </div>
    </div>
  </div>

  <div class="row">

    <!-- LEFT: Schedule + Products -->
    <div class="col-lg-8">

      <!-- Repayment Schedule -->
      <div class="card shadow-sm mb-3">
        <div class="card-header font-weight-bold d-flex align-items-center justify-content-between">
          <span><i class="fa fa-calendar-alt mr-2 text-primary"></i> Repayment Schedule</span>
          {% if deal.status == 'ACTIVE' %}
            <span class="badge badge-secondary">Payment Receive — Phase C</span>
          {% endif %}
        </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>Due Date</th>
                  <th class="text-right">Due Amount</th>
                  <th class="text-right">Paid Amount</th>
                  <th class="text-right">Balance</th>
                  <th class="text-center">Status</th>
                  <th>Last Paid</th>
                </tr>
              </thead>
              <tbody>
                {% for slot in schedule %}
                <tr class="
                  {% if slot.status == 'PAID' %}schedule-row-paid
                  {% elif slot.status == 'OVERDUE' %}schedule-row-overdue
                  {% elif slot.status == 'PARTIAL' %}schedule-row-partial
                  {% endif %}">
                  <td>
                    {% if slot.installment_number == 0 %}
                      <span class="badge badge-secondary">DP</span>
                    {% else %}
                      {{ slot.installment_number }}
                    {% endif %}
                  </td>
                  <td>{{ slot.due_date }}</td>
                  <td class="text-right">{{ slot.due_amount|floatformat:0 }}</td>
                  <td class="text-right 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">
                    {% 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">Paid</span>
                    {% elif slot.status == 'PARTIAL' %}
                      <span class="badge badge-warning">Partial</span>
                    {% elif slot.status == 'OVERDUE' %}
                      <span class="badge badge-danger">Overdue</span>
                    {% elif slot.status == 'WAIVED' %}
                      <span class="badge badge-secondary">Waived</span>
                    {% else %}
                      <span class="badge badge-light text-dark">Pending</span>
                    {% endif %}
                  </td>
                  <td class="text-muted small">
                    {{ slot.last_payment_date|default:"—" }}
                  </td>
                </tr>
                {% empty %}
                <tr>
                  <td colspan="7" class="text-center text-muted py-3">No schedule generated.</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Products -->
      <div class="card shadow-sm mb-3">
        <div class="card-header font-weight-bold">
          <i class="fa fa-boxes mr-2 text-primary"></i> Products in This Deal
        </div>
        <div class="card-body p-0">
          <table class="table table-sm mb-0">
            <thead class="thead-light">
              <tr>
                <th>Product</th>
                <th class="text-center">Qty</th>
                <th class="text-right">Purchase Price</th>
                <th class="text-right">Sale Price/Unit</th>
                <th class="text-right">Total Cost</th>
                <th class="text-right">Total Sale</th>
              </tr>
            </thead>
            <tbody>
              {% for item in products %}
              <tr>
                <td class="font-weight-bold">{{ item.product_name }}</td>
                <td class="text-center">{{ item.quantity }}</td>
                <td class="text-right text-muted">{{ item.purchase_price|floatformat:0 }}</td>
                <td class="text-right">{{ item.cash_price_per_unit|floatformat:0 }}</td>
                <td class="text-right text-danger">{{ item.total_cost|floatformat:0 }}</td>
                <td class="text-right font-weight-bold">{{ item.total_sale_price|floatformat:0 }}</td>
              </tr>
              {% empty %}
              <tr><td colspan="6" class="text-center text-muted">No products.</td></tr>
              {% endfor %}
            </tbody>
            <tfoot class="table-light font-weight-bold">
              <tr>
                <td colspan="4" class="text-right">Totals:</td>
                <td class="text-right text-danger">{{ total_cost|floatformat:0 }}</td>
                <td class="text-right">{{ deal.cash_price|floatformat:0 }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

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

    <!-- RIGHT: Deal Info + Buyer + Witnesses -->
    <div class="col-lg-4">

      <!-- Deal Info -->
      <div class="card shadow-sm mb-3">
        <div class="card-header font-weight-bold d-flex justify-content-between align-items-center">
          <span><i class="fa fa-info-circle mr-2 text-primary"></i> Deal Details</span>
          {% if deal.status == 'ACTIVE' %}
            <a href="{% url 'installments:deal_edit' deal.id %}"
               class="btn btn-xs btn-outline-primary">
              <i class="fa fa-edit"></i> Edit
            </a>
          {% endif %}
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-6 mb-3">
              <div class="info-label">Invoice Ref</div>
              <div class="info-value">#{{ deal.payments_invoice_no }}</div>
            </div>
            <div class="col-6 mb-3">
              <div class="info-label">Sale Date</div>
              <div class="info-value">{{ deal.sale_date }}</div>
            </div>
            <div class="col-6 mb-3">
              <div class="info-label">First Installment</div>
              <div class="info-value">{{ deal.start_date }}</div>
            </div>
            <div class="col-6 mb-3">
              <div class="info-label">Duration</div>
              <div class="info-value">{{ deal.duration_months }} months</div>
            </div>
            <div class="col-6 mb-3">
              <div class="info-label">Cash Price</div>
              <div class="info-value">{{ deal.cash_price|floatformat:0 }}</div>
            </div>
            <div class="col-6 mb-3">
              <div class="info-label">Markup</div>
              <div class="info-value text-warning">{{ deal.markup_amount|floatformat:0 }}</div>
            </div>
            <div class="col-6 mb-3">
              <div class="info-label">Total Price</div>
              <div class="info-value font-weight-bold">{{ deal.total_price|floatformat:0 }}</div>
            </div>
            <div class="col-6 mb-3">
              <div class="info-label">Monthly Installment</div>
              <div class="info-value text-primary">{{ deal.monthly_amount|floatformat:0 }}</div>
            </div>
          </div>
          {% if deal.notes %}
          <div class="border-top pt-2 mt-1">
            <div class="info-label">Notes</div>
            <div class="small text-muted">{{ deal.notes }}</div>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- Buyer Details -->
      <div class="card shadow-sm mb-3">
        <div class="card-header font-weight-bold">
          <i class="fa fa-user mr-2 text-primary"></i> Buyer Details
        </div>
        <div class="card-body">
          {% if customer %}
          <div class="row">
            <div class="col-12 mb-2">
              <div class="info-label">Name</div>
              <div class="info-value">{{ customer.name }}</div>
            </div>
            <div class="col-6 mb-2">
              <div class="info-label">Mobile</div>
              <div class="info-value small">{{ customer.mobile|default:"—" }}</div>
            </div>
            <div class="col-6 mb-2">
              <div class="info-label">CNIC</div>
              <div class="info-value small">{{ customer.cnic|default:"—" }}</div>
            </div>
            {% if deal.buyer_father_name %}
            <div class="col-6 mb-2">
              <div class="info-label">Father's Name</div>
              <div class="info-value small">{{ deal.buyer_father_name }}</div>
            </div>
            {% endif %}
            {% if deal.buyer_occupation %}
            <div class="col-6 mb-2">
              <div class="info-label">Occupation</div>
              <div class="info-value small">{{ deal.buyer_occupation }}</div>
            </div>
            {% endif %}
            {% if deal.buyer_employer %}
            <div class="col-6 mb-2">
              <div class="info-label">Employer</div>
              <div class="info-value small">{{ deal.buyer_employer }}</div>
            </div>
            {% endif %}
            {% if deal.buyer_monthly_income %}
            <div class="col-6 mb-2">
              <div class="info-label">Monthly Income</div>
              <div class="info-value small">{{ deal.buyer_monthly_income|floatformat:0 }}</div>
            </div>
            {% endif %}
            <div class="col-12 mt-1">
              <div class="info-label">Address</div>
              <div class="info-value small">{{ customer.address|default:"—" }}</div>
            </div>
          </div>
          {% else %}
          <p class="text-muted small">Customer not found.</p>
          {% endif %}
        </div>
      </div>

      <!-- Witnesses -->
      <div class="card shadow-sm mb-3">
        <div class="card-header font-weight-bold d-flex justify-content-between align-items-center">
          <span><i class="fa fa-users mr-2 text-secondary"></i> Witnesses</span>
          {% if witnesses|length < 2 %}
            <a href="{% url 'installments:witness_add' deal.id %}"
               class="btn btn-xs btn-outline-secondary">
              <i class="fa fa-plus"></i> Add
            </a>
          {% endif %}
        </div>
        <div class="card-body p-0">
          {% for witness in witnesses %}
          <div class="p-3 {% if not forloop.last %}border-bottom{% endif %}">
            <div class="d-flex justify-content-between align-items-start">
              <div>
                <span class="badge badge-secondary badge-pill mr-1">W{{ witness.witness_number }}</span>
                <strong>{{ witness.name }}</strong>
              </div>
              <div class="d-flex">
                <a href="{% url 'installments:witness_edit' deal.id witness.id %}"
                   class="btn btn-xs btn-outline-secondary mr-1">
                  <i class="fa fa-edit"></i>
                </a>
                <form method="post"
                      action="{% url 'installments:witness_delete' deal.id witness.id %}"
                      onsubmit="return confirm('Remove Witness {{ witness.witness_number }}?');"
                      style="display:inline;">
                  {% csrf_token %}
                  <button type="submit" class="btn btn-xs btn-outline-danger">
                    <i class="fa fa-times"></i>
                  </button>
                </form>
              </div>
            </div>
            <div class="small text-muted mt-1">
              {% if witness.father_name %}Father: {{ witness.father_name }}<br>{% endif %}
              {% if witness.cnic %}CNIC: {{ witness.cnic }}<br>{% endif %}
              {% if witness.mobile %}Mobile: {{ witness.mobile }}<br>{% endif %}
              {% if witness.relationship %}Relationship: {{ witness.relationship }}{% endif %}
            </div>
          </div>
          {% empty %}
          <div class="p-3 text-muted small text-center">
            No witnesses added.
            <a href="{% url 'installments:witness_add' deal.id %}">Add first witness.</a>
          </div>
          {% endfor %}
        </div>
      </div>

    </div><!-- /RIGHT -->
  </div><!-- /row -->

</div>
{% endblock %}