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

{% block stylesheets %}
<style>
  .deal-profit-card  { border-left: 4px solid #28a745; }
  .info-label        { font-size:.72rem; color:#6c757d; text-transform:uppercase; }
  .profit-row        { background:#f6fff9; }
  .loss-row          { background:#fff5f5; }
  .grand-row         { background:#f0f4ff; font-weight:700; font-size:1rem; }
  .payment-tbl td    { font-size:.82rem; }
  .filter-card       { border-top: 3px solid #6c757d; }
</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-chart-line mr-2 text-success"></i>
          Installment Profit Report
        </h4>
        <small class="text-muted">
          Cash-basis profit recognition per payment &mdash; {{ 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>

  <!-- Filters -->
  <div class="card filter-card shadow-sm mb-4">
    <div class="card-body py-2">
      <form method="get" class="form-inline flex-wrap">
        <label class="mr-2 small font-weight-bold">From:</label>
        <input type="date" name="date_from" value="{{ date_from }}"
               class="form-control form-control-sm mr-3">

        <label class="mr-2 small font-weight-bold">To:</label>
        <input type="date" name="date_to" value="{{ date_to }}"
               class="form-control form-control-sm mr-3">

        <label class="mr-2 small font-weight-bold">Status:</label>
        <select name="status" class="form-control form-control-sm mr-3">
          <option value="">All</option>
          <option value="ACTIVE"    {% if status_filter == 'ACTIVE' %}selected{% endif %}>Active</option>
          <option value="COMPLETED" {% if status_filter == 'COMPLETED' %}selected{% endif %}>Completed</option>
        </select>

        <label class="mr-2 small font-weight-bold">Customer:</label>
        <select name="customer_t_id" class="form-control form-control-sm mr-3" style="width:180px;">
          <option value="">All</option>
          {% for c in customers %}
          <option value="{{ c.id }}"
            {% if customer_t_id_filter == c.id %}selected{% endif %}>
            {{ c.name }}
          </option>
          {% endfor %}
        </select>

        <button type="submit" class="btn btn-sm btn-primary mr-2">
          <i class="fa fa-filter"></i> Apply
        </button>
        <a href="{% url 'installments:report_profit' %}"
           class="btn btn-sm btn-outline-secondary">Clear</a>
      </form>
    </div>
  </div>

  <!-- Grand Totals -->
  <div class="row mb-4">
    <div class="col-6 col-md mb-2">
      <div class="card border-0 bg-light text-center py-2">
        <div class="info-label">Total Cost</div>
        <div class="h5 font-weight-bold text-danger mb-0">{{ grand_total_cost|floatformat:0 }}</div>
      </div>
    </div>
    <div class="col-6 col-md mb-2">
      <div class="card border-0 bg-light text-center py-2">
        <div class="info-label">Cash Price</div>
        <div class="h5 font-weight-bold mb-0">{{ grand_cash_price|floatformat:0 }}</div>
      </div>
    </div>
    <div class="col-6 col-md mb-2">
      <div class="card border-0 bg-light text-center py-2">
        <div class="info-label">Markup</div>
        <div class="h5 font-weight-bold text-warning mb-0">{{ grand_markup|floatformat:0 }}</div>
      </div>
    </div>
    <div class="col-6 col-md mb-2">
      <div class="card border-0 text-center py-2" style="background:#f0fff4;">
        <div class="info-label">Gross Profit (Expected)</div>
        <div class="h5 font-weight-bold text-success mb-0">{{ grand_gross_profit|floatformat:0 }}</div>
      </div>
    </div>
    <div class="col-6 col-md mb-2">
      <div class="card border-0 text-center py-2" style="background:#e8f4fd;">
        <div class="info-label">Profit Recognized</div>
        <div class="h5 font-weight-bold text-info mb-0">{{ grand_profit_recognized|floatformat:0 }}</div>
      </div>
    </div>
    <div class="col-6 col-md mb-2">
      <div class="card border-0 bg-light text-center py-2">
        <div class="info-label">Unrealized Profit</div>
        <div class="h5 font-weight-bold text-muted mb-0">{{ grand_unrealized|floatformat:0 }}</div>
      </div>
    </div>
  </div>

  <!-- Per-deal rows -->
  {% for row in report %}
  <div class="card shadow-sm mb-4 deal-profit-card">
    <div class="card-header d-flex justify-content-between align-items-center py-2">
      <div>
        <a href="{% url 'installments:deal_detail' row.deal.id %}"
           class="font-weight-bold text-dark mr-2">
          Deal #{{ row.deal.installment_no }}
        </a>
        <span class="text-muted small mr-2">{{ row.customer_name }}</span>
        <span class="text-muted small mr-2">{{ row.deal.sale_date }}</span>
        {% if row.deal.status == 'COMPLETED' %}
          <span class="badge badge-success">Completed</span>
        {% elif row.deal.status == 'ACTIVE' %}
          <span class="badge badge-primary">Active</span>
        {% endif %}
      </div>
      <div class="text-right">
        <span class="small text-muted mr-3">
          Recognized:
          <strong class="text-info">{{ row.total_profit_recognized|floatformat:0 }}</strong>
        </span>
        <span class="small text-muted">
          Unrealized:
          <strong class="text-secondary">{{ row.unrealized_profit|floatformat:0 }}</strong>
        </span>
      </div>
    </div>

    <div class="card-body p-0">

      <!-- Deal summary row -->
      <div class="row mx-0 border-bottom py-2 bg-light">
        <div class="col-4 col-md-2 text-center border-right">
          <div class="info-label">Total Cost</div>
          <div class="font-weight-bold text-danger">{{ row.total_cost|floatformat:0 }}</div>
        </div>
        <div class="col-4 col-md-2 text-center border-right">
          <div class="info-label">Cash Price</div>
          <div class="font-weight-bold">{{ row.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">{{ row.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">{{ row.total_price|floatformat:0 }}</div>
        </div>
        <div class="col-4 col-md-2 text-center border-right">
          <div class="info-label">Gross Profit</div>
          <div class="font-weight-bold text-success">{{ row.gross_profit|floatformat:0 }}</div>
        </div>
        <div class="col-4 col-md-2 text-center">
          <div class="info-label">Total Received</div>
          <div class="font-weight-bold text-info">{{ row.total_received|floatformat:0 }}</div>
        </div>
      </div>

      <!-- Per-payment breakdown -->
      {% if row.payments %}
      <div class="table-responsive">
        <table class="table table-sm mb-0 payment-tbl">
          <thead class="thead-light">
            <tr>
              <th>#</th>
              <th>Payment Date</th>
              <th class="text-right">Amount Received</th>
              <th class="text-right">Cost Recovered</th>
              <th class="text-right">Profit This Payment</th>
              <th class="text-right">Cumulative Received</th>
              <th class="text-right">Running Profit</th>
            </tr>
          </thead>
          <tbody>
            {% for p in row.payments %}
            <tr class="{% if p.profit_recognized >= 0 %}profit-row{% else %}loss-row{% endif %}">
              <td class="text-muted">{{ forloop.counter }}</td>
              <td>{{ p.payment.payment_date }}</td>
              <td class="text-right font-weight-bold">{{ p.payment.amount_received|floatformat:0 }}</td>
              <td class="text-right text-muted">{{ p.cost_recovered|floatformat:0 }}</td>
              <td class="text-right font-weight-bold {% if p.profit_recognized >= 0 %}text-success{% else %}text-danger{% endif %}">
                {% if p.profit_recognized < 0 %}({% endif %}{{ p.profit_recognized|floatformat:0 }}{% if p.profit_recognized < 0 %}){% endif %}
              </td>
              <td class="text-right text-muted">{{ p.cumulative_received|floatformat:0 }}</td>
              <td class="text-right font-weight-bold text-info">{{ p.running_profit|floatformat:0 }}</td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot class="grand-row">
            <tr>
              <td colspan="2" class="text-right">Totals:</td>
              <td class="text-right">{{ row.total_received|floatformat:0 }}</td>
              <td class="text-right">{{ row.total_cost_recovered|floatformat:0 }}</td>
              <td class="text-right text-success">{{ row.total_profit_recognized|floatformat:0 }}</td>
              <td class="text-right"></td>
              <td class="text-right text-info">{{ row.total_profit_recognized|floatformat:0 }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
      {% else %}
      <div class="text-center text-muted small py-3">
        No payments received yet for this deal.
      </div>
      {% endif %}

    </div>
  </div>
  {% empty %}
  <div class="alert alert-light text-center">
    No deals found for the selected filters.
  </div>
  {% endfor %}

</div>
{% endblock %}