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

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-3">
  <h3 class="mb-0">
    <i class="fa fa-bar-chart mr-2 text-primary"></i>
    Product / Stock Utilization Report
    <small class="text-muted d-block" style="font-size:.6em;">
      Sale vs BOM Expected vs Actual Production — Variance Analysis
    </small>
  </h3>
</div>

{# ─── Filter Form ──────────────────────────────────────────────────────────── #}
<div class="card shadow-sm mb-4">
  <div class="card-header bg-primary text-white py-2">
    <strong><i class="fa fa-filter mr-1"></i> Filters</strong>
  </div>
  <div class="card-body">
    <form method="get" id="filter-form">
      <div class="form-row">

        {# Date From #}
        <div class="form-group col-md-2">
          <label class="font-weight-bold small">Date From</label>
          <input type="date" name="date_from" class="form-control form-control-sm"
                 value="{{ date_from }}">
        </div>

        {# Date To #}
        <div class="form-group col-md-2">
          <label class="font-weight-bold small">Date To</label>
          <input type="date" name="date_to" class="form-control form-control-sm"
                 value="{{ date_to }}">
        </div>

        {# Company #}
        <div class="form-group col-md-2">
          <label class="font-weight-bold small">Company</label>
          <select name="company" class="form-control form-control-sm">
            <option value="">— All —</option>
            {% for c in companies %}
              <option value="{{ c }}"
                {% if c == company_filter %}selected{% endif %}>{{ c }}</option>
            {% endfor %}
          </select>
        </div>

        {# Department #}
        <div class="form-group col-md-2">
          <label class="font-weight-bold small">Department</label>
          <select name="department_id" class="form-control form-control-sm">
            <option value="">— All —</option>
            {% for d in departments %}
              <option value="{{ d.id }}"
                {% if d.id|stringformat:"s" == dept_id_filter %}selected{% endif %}>
                {{ d.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        {# Finished Products (Select2 multi) #}
        <div class="form-group col-md-6">
          <label class="font-weight-bold small">Finished Products
            <span class="text-muted font-weight-normal">(optional — blank = all)</span>
          </label>
          <select id="sel-fin" name="fin_product_ids" multiple="multiple"
                  class="form-control form-control-sm" style="width:100%">
            {% for p in selected_fin %}
              <option value="{{ p.id }}" selected>{{ p.text }}</option>
            {% endfor %}
          </select>
        </div>

        {# Raw Materials (Select2 multi) #}
        <div class="form-group col-md-6">
          <label class="font-weight-bold small">Raw Materials
            <span class="text-muted font-weight-normal">(optional — blank = all)</span>
          </label>
          <select id="sel-raw" name="raw_product_ids" multiple="multiple"
                  class="form-control form-control-sm" style="width:100%">
            {% for p in selected_raw %}
              <option value="{{ p.id }}" selected>{{ p.text }}</option>
            {% endfor %}
          </select>
        </div>

      </div>{# /form-row #}

      <div class="d-flex align-items-center">
        <button type="submit" class="btn btn-primary btn-sm mr-2">
          <i class="fa fa-search mr-1"></i> Generate Report
        </button>
        <a href="?" class="btn btn-outline-secondary btn-sm">
          <i class="fa fa-times mr-1"></i> Clear
        </a>
      </div>
    </form>
  </div>
</div>

{% if has_results %}

{# ─── Export Buttons ───────────────────────────────────────────────────────── #}
<div class="mb-3">
  <a href="?date_from={{ date_from }}&date_to={{ date_to }}&company={{ company_filter }}&department_id={{ dept_id_filter }}{% for pid in fin_prod_ids %}&fin_product_ids={{ pid }}{% endfor %}{% for rid in raw_mat_ids %}&raw_product_ids={{ rid }}{% endfor %}&export=excel"
     class="btn btn-success btn-sm">
    <i class="fa fa-file-excel-o mr-1"></i> Export Excel (4 Sheets)
  </a>
  <a href="?date_from={{ date_from }}&date_to={{ date_to }}&company={{ company_filter }}&department_id={{ dept_id_filter }}{% for pid in fin_prod_ids %}&fin_product_ids={{ pid }}{% endfor %}{% for rid in raw_mat_ids %}&raw_product_ids={{ rid }}{% endfor %}&export=pdf"
     class="btn btn-danger btn-sm ml-1">
    <i class="fa fa-file-pdf-o mr-1"></i> Export PDF
  </a>
</div>

{# ══════════════════════════════════════════════════════════════════════════ #}
{# SECTION 1 — SALE SUMMARY                                                   #}
{# ══════════════════════════════════════════════════════════════════════════ #}
<div class="card shadow-sm mb-4">
  <div class="card-header bg-dark text-white py-2">
    <strong><i class="fa fa-shopping-cart mr-1"></i>
      1. Sale Summary
      <small class="font-weight-normal ml-2">{{ date_from }} → {{ date_to }}</small>
    </strong>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-sm table-bordered table-hover mb-0">
        <thead class="thead-dark">
          <tr>
            <th>#</th>
            <th>Product Code</th>
            <th>Product Name</th>
            <th>Company</th>
            <th class="text-right">Total Sold Qty</th>
            <th class="text-right">Sale Amount</th>
          </tr>
        </thead>
        <tbody>
          {% for r in sale_summary %}
          <tr>
            <td class="text-muted">{{ forloop.counter }}</td>
            <td><code>{{ r.code }}</code></td>
            <td>{{ r.name }}</td>
            <td><small>{{ r.company }}</small></td>
            <td class="text-right font-weight-bold">{{ r.total_qty|floatformat:2 }}</td>
            <td class="text-right">{{ r.total_amount|floatformat:2 }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="6" class="text-center text-muted py-3">
            Is date range mein koi sales nahi milein.
          </td></tr>
          {% endfor %}
        </tbody>
        {% if sale_summary %}
        <tfoot class="bg-light font-weight-bold">
          <tr>
            <td colspan="4" class="text-right">Totals:</td>
            <td class="text-right">{{ total_sale_qty|floatformat:2 }}</td>
            <td class="text-right">{{ total_sale_amt|floatformat:2 }}</td>
          </tr>
        </tfoot>
        {% endif %}
      </table>
    </div>
  </div>
</div>

{# ══════════════════════════════════════════════════════════════════════════ #}
{# SECTIONS 2 & 3 — EXPECTED (LEFT) + ACTUAL (RIGHT) SIDE BY SIDE            #}
{# ══════════════════════════════════════════════════════════════════════════ #}
<div class="row mb-4">

  {# ── LEFT: BOM Expected ── #}
  <div class="col-lg-6 mb-3 mb-lg-0">
    <div class="card shadow-sm h-100">
      <div class="card-header bg-info text-white py-2">
        <strong><i class="fa fa-list-ol mr-1"></i>
          2. BOM Based Expected Utilization
        </strong>
        <span class="badge badge-light text-dark float-right mt-1">
          Total: {{ total_exp_qty|floatformat:4 }}
        </span>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive" style="max-height:480px; overflow-y:auto;">
          <table class="table table-sm table-bordered mb-0">
            <thead class="thead-light" style="position:sticky;top:0;z-index:1;">
              <tr>
                <th>Raw Code</th>
                <th>Raw Material</th>
                <th>Company</th>
                <th class="text-right">BOM Qty/Unit</th>
                <th class="text-right">Sold Qty</th>
                <th class="text-right">Expected Usage</th>
                <th>Fin. Item</th>
              </tr>
            </thead>
            <tbody>
              {% for r in expected_detail %}
              <tr>
                <td><code>{{ r.raw_code }}</code></td>
                <td>{{ r.raw_name }}</td>
                <td><small>{{ r.company }}</small></td>
                <td class="text-right">{{ r.bom_qty }}</td>
                <td class="text-right">{{ r.sold_qty|floatformat:2 }}</td>
                <td class="text-right font-weight-bold text-info">
                  {{ r.exp_qty|floatformat:4 }}
                </td>
                <td><small class="text-muted">{{ r.fin_code }}</small></td>
              </tr>
              {% empty %}
              <tr><td colspan="7" class="text-center text-muted py-3">
                Selected items ka koi BOM define nahi hai.
              </td></tr>
              {% endfor %}
            </tbody>
            {% if expected_detail %}
            <tfoot class="bg-light font-weight-bold">
              <tr>
                <td colspan="5" class="text-right">Total Expected:</td>
                <td class="text-right text-info">{{ total_exp_qty|floatformat:4 }}</td>
                <td></td>
              </tr>
            </tfoot>
            {% endif %}
          </table>
        </div>
      </div>
    </div>
  </div>

  {# ── RIGHT: Actual Utilization ── #}
  <div class="col-lg-6">
    <div class="card shadow-sm h-100">
      <div class="card-header bg-warning py-2">
        <strong><i class="fa fa-industry mr-1"></i>
          3. Actual Production Utilization
        </strong>
        <span class="badge badge-dark float-right mt-1">
          Total: {{ total_actual_qty|floatformat:4 }}
          &nbsp;|&nbsp; Cost: {{ total_actual_cost|floatformat:2 }}
        </span>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive" style="max-height:480px; overflow-y:auto;">
          <table class="table table-sm table-bordered mb-0">
            <thead class="thead-light" style="position:sticky;top:0;z-index:1;">
              <tr>
                <th>Raw Code</th>
                <th>Raw Material</th>
                <th>Dept</th>
                <th class="text-right">Actual Qty</th>
                <th class="text-right">Unit Cost</th>
                <th class="text-right">Total Cost</th>
                <th>Run #</th>
              </tr>
            </thead>
            <tbody>
              {% for r in actual_detail %}
              <tr>
                <td><code>{{ r.raw_code }}</code></td>
                <td>{{ r.raw_name }}</td>
                <td><small>{{ r.dept }}</small></td>
                <td class="text-right font-weight-bold text-warning">
                  {{ r.actual_qty|floatformat:4 }}
                </td>
                <td class="text-right">{{ r.unit_cost|floatformat:4 }}</td>
                <td class="text-right">{{ r.total_cost|floatformat:2 }}</td>
                <td><small class="badge badge-secondary">{{ r.run_no }}</small></td>
              </tr>
              {% empty %}
              <tr><td colspan="7" class="text-center text-muted py-3">
                Is date range mein koi production run nahi mila.
              </td></tr>
              {% endfor %}
            </tbody>
            {% if actual_detail %}
            <tfoot class="bg-light font-weight-bold">
              <tr>
                <td colspan="3" class="text-right">Totals:</td>
                <td class="text-right text-warning">{{ total_actual_qty|floatformat:4 }}</td>
                <td></td>
                <td class="text-right">{{ total_actual_cost|floatformat:2 }}</td>
                <td></td>
              </tr>
            </tfoot>
            {% endif %}
          </table>
        </div>
      </div>
    </div>
  </div>

</div>{# /row #}

{# ══════════════════════════════════════════════════════════════════════════ #}
{# SECTION 4 — VARIANCE ANALYSIS                                              #}
{# ══════════════════════════════════════════════════════════════════════════ #}
<div class="card shadow-sm mb-4">
  <div class="card-header bg-danger text-white py-2">
    <strong><i class="fa fa-exchange mr-1"></i>
      4. Variance Analysis &nbsp;
      <small class="font-weight-normal">
        (Actual Usage − BOM Expected)
      </small>
    </strong>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0">
        <thead class="thead-dark">
          <tr>
            <th>#</th>
            <th>Raw Code</th>
            <th>Raw Material Name</th>
            <th class="text-right">Expected Usage</th>
            <th class="text-right">Actual Usage</th>
            <th class="text-right">Difference Qty</th>
            <th class="text-right">Diff %</th>
            <th class="text-center">Status</th>
          </tr>
        </thead>
        <tbody>
          {% for r in variance_rows %}
          {# Row background by status #}
          <tr class="
            {% if r.status == 'Normal' %}table-success
            {% elif r.status == 'Extra Used' %}table-danger
            {% elif r.status == 'Less Used' %}table-warning
            {% elif r.status == 'Missing in Production' %}table-danger
            {% elif r.status == 'Not Defined in BOM' %}table-info
            {% endif %}">
            <td class="text-muted">{{ forloop.counter }}</td>
            <td><code>{{ r.raw_code }}</code></td>
            <td>{{ r.raw_name }}</td>
            <td class="text-right">{{ r.expected|floatformat:4 }}</td>
            <td class="text-right">{{ r.actual|floatformat:4 }}</td>
            <td class="text-right font-weight-bold
              {% if r.diff > 0 %}text-danger
              {% elif r.diff < 0 %}text-warning
              {% else %}text-success{% endif %}">
              {% if r.diff > 0 %}+{% endif %}{{ r.diff|floatformat:4 }}
            </td>
            <td class="text-right">
              {% if r.diff_pct != 0 %}
                {% if r.diff_pct > 0 %}+{% endif %}{{ r.diff_pct }}%
              {% else %}—{% endif %}
            </td>
            <td class="text-center">
              {% if r.status == 'Normal' %}
                <span class="badge badge-success">✔ Normal</span>
              {% elif r.status == 'Extra Used' %}
                <span class="badge badge-danger">⬆ Extra Used</span>
              {% elif r.status == 'Less Used' %}
                <span class="badge badge-warning text-dark">⬇ Less Used</span>
              {% elif r.status == 'Missing in Production' %}
                <span class="badge badge-danger">✘ Missing in Production</span>
              {% elif r.status == 'Not Defined in BOM' %}
                <span class="badge badge-info">? Not in BOM</span>
              {% endif %}
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="8" class="text-center text-muted py-3">
            Variance calculate karne ke liye pehle date range set karein.
          </td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {# Legend #}
  <div class="card-footer bg-light d-flex flex-wrap gap-2" style="gap:.5rem;">
    <span class="badge badge-success px-2 py-1">✔ Normal</span>
    <small class="text-muted mr-3">Diff ≤ 3%</small>
    <span class="badge badge-danger px-2 py-1">⬆ Extra Used</span>
    <small class="text-muted mr-3">Actual &gt; Expected</small>
    <span class="badge badge-warning text-dark px-2 py-1">⬇ Less Used</span>
    <small class="text-muted mr-3">Actual &lt; Expected</small>
    <span class="badge badge-danger px-2 py-1">✘ Missing in Production</span>
    <small class="text-muted mr-3">No actual usage found</small>
    <span class="badge badge-info px-2 py-1">? Not in BOM</span>
    <small class="text-muted">Used in production but no BOM defined</small>
  </div>
</div>

{% elif request.GET %}
  <div class="alert alert-warning">
    <i class="fa fa-exclamation-circle mr-1"></i>
    Is date range mein koi data nahi mila. Filters check karein.
  </div>
{% else %}
  <div class="alert alert-info">
    <i class="fa fa-info-circle mr-1"></i>
    Upar filters set karein aur <strong>Generate Report</strong> press karein.
  </div>
{% endif %}
{% endblock %}


{% block javascripts %}
<script>
$(function () {
  const nameUrl = "{% url 'manufacturing:ajax_search_product_by_name' %}";

  const s2Opts = {
    placeholder:        'Name type karein…',
    allowClear:         true,
    width:              'resolve',
    ajax: {
      url:            nameUrl,
      dataType:       'json',
      delay:          250,
      data:           params => ({ q: params.term }),
      processResults: data   => ({ results: data.results }),
      cache:          true,
    },
    minimumInputLength: 1,
    templateResult: function (item) {
      if (item.loading) return item.text;
      const stock = item.present_stock !== undefined ? item.present_stock : '—';
      const cls   = parseFloat(stock) > 0 ? 'badge-success' : 'badge-danger';
      return `<span>${item.text} <small class="text-muted">(${item.code||''})</small>`
           + ` <span class="badge ${cls}">Stock: ${
               !isNaN(parseFloat(stock)) ? parseFloat(stock).toFixed(2) : stock
             }</span></span>`;
    },
    escapeMarkup: m => m,
  };

  $('#sel-fin').select2({ ...s2Opts, placeholder: 'Finished item search karein…' });
  $('#sel-raw').select2({ ...s2Opts, placeholder: 'Raw material search karein…' });

  // Block Enter on filter form
  $('#filter-form').on('keydown', 'input, select', function (e) {
    if (e.which === 13) { e.preventDefault(); $('#filter-form').submit(); }
  });
});
</script>
{% endblock %}