{% extends "pos/base.html" %}
{% load static %}

{% block heading %}Compute Avg vs Business Worth — Item Comparison{% endblock heading %}

{% block content %}

<!-- ===== FILTERS FORM ===== -->
<form method="get" class="mb-2" id="worthCompareFilterForm">
  <div class="row align-items-end g-2">

    {% if is_master %}
    <div class="col-auto">
      <label class="mb-0 d-block">Branches</label>
      <select name="branches" multiple class="form-control form-control-sm" style="min-width:220px;">
        {% for b in branches %}
          <option value="{{ b.id }}" {% if b.id|stringformat:"s" in selected_branches %}selected{% endif %}>{{ b.label }}</option>
        {% endfor %}
      </select>
    </div>
    {% endif %}

    <div class="col-auto">
      <label class="mb-0 d-block" for="as_of">As-of</label>
      <input type="date" name="as_of" id="as_of" class="form-control form-control-sm"
             value="{{ as_of|date:'Y-m-d' }}" style="width:150px;">
    </div>

    <div class="col-auto">
      <button type="submit" class="btn btn-primary btn-sm">
        <i class="fas fa-search"></i> Apply
      </button>
    </div>

    <div class="col-auto">
      <a class="btn btn-success btn-sm" id="excelExportBtn" href="#">
        <i class="fas fa-file-excel mr-1"></i> Export Excel
      </a>
    </div>

  </div>

  <small class="text-muted d-block mt-2">
    Note: <strong>Compute Avg Investment</strong> column FIFO remaining layers (sub_products_list) se aata hai —
    yeh hamesha <strong>current</strong> snapshot hai, is liye "As-of" date sirf
    <strong>Business Worth Investment</strong> column ko affect karti hai.
  </small>
</form>

<!-- ===== TOTALS ===== -->
<div class="row mb-3 mt-2">
  <div class="col-auto">
    <div class="card"><div class="card-body py-2 px-3">
      <div class="text-muted small">Total Compute Avg Investment</div>
      <div class="font-weight-bold">{{ totals.avg_investment }}</div>
    </div></div>
  </div>
  <div class="col-auto">
    <div class="card"><div class="card-body py-2 px-3">
      <div class="text-muted small">Total Business Worth Investment</div>
      <div class="font-weight-bold">{{ totals.worth_investment }}</div>
    </div></div>
  </div>
  <div class="col-auto">
    <div class="card"><div class="card-body py-2 px-3">
      <div class="text-muted small">Total Difference</div>
      <div class="font-weight-bold {% if totals.difference < 0 %}text-danger{% elif totals.difference > 0 %}text-success{% endif %}">
        {{ totals.difference }}
      </div>
    </div></div>
  </div>
</div>

<!-- ===== MAIN TABLE ===== -->
<div class="table-responsive">
  <table id="worthCompareTable" class="table table-bordered table-hover table-sm">
    <thead class="thead-dark">
      <tr>
        <th>Prod ID</th>
        <th>Code</th>
        <th>Name</th>
        <th>Company</th>
        <th>Category</th>
        <th>Compute Avg Investment</th>
        <th>Business Worth Investment</th>
        <th>Difference</th>
        <th>% Diff</th>
      </tr>
    </thead>
    <tbody>
      {% for r in rows %}
      <tr>
        <td>{{ r.prod_id }}</td>
        <td>{{ r.product_code }}</td>
        <td>{{ r.name }}</td>
        <td>{{ r.prod_company }}</td>
        <td>{{ r.prod_category }}</td>
        <td class="text-right">{{ r.avg_investment }}</td>
        <td class="text-right">{{ r.worth_investment }}</td>
        <td class="text-right {% if r.difference < 0 %}text-danger{% elif r.difference > 0 %}text-success{% endif %}">
          {{ r.difference }}
        </td>
        <td class="text-right">{% if r.pct_diff is not None %}{{ r.pct_diff }}%{% else %}—{% endif %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
$(function () {
  $('#worthCompareTable').DataTable({
    pageLength: 50,
    lengthMenu: [25, 50, 100, 200],
    order: []   // ⚡ server ne pehle se sab se bare farak (abs difference) ke hisaab se sort kar diya hai
  });

  // ── Export Excel button: filter form ki current query string ke sath ──
  $('#excelExportBtn').on('click', function (e) {
    e.preventDefault();
    const params = new URLSearchParams();
    $('#worthCompareFilterForm').find('input, select').each(function () {
      const $el = $(this);
      const name = $el.attr('name');
      if (!name) return;
      if ($el.is('select[multiple]')) {
        ($el.val() || []).forEach(v => params.append(name, v));
      } else {
        params.set(name, $el.val());
      }
    });
    window.location.href = "{{ export_excel_url }}?" + params.toString();
  });
});
</script>

{% endblock %}