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

{% block content %}
{# ══════════════════════════════════════════════════════════════════════════ #}
{# Department-wise Comprehensive Production Report                           #}
{# ══════════════════════════════════════════════════════════════════════════ #}

{# ── Page Title ──────────────────────────────────────────────────────────── #}
<div class="d-flex justify-content-between align-items-center mb-3">
  <div>
    <h3 class="mb-0">
      <i class="fa fa-industry mr-2 text-primary"></i>
      Department-wise Production Report
    </h3>
    <small class="text-muted">
      Raw material consumption, production output, aur BOM compliance — department by department
    </small>
  </div>
  <button class="btn btn-outline-secondary btn-sm"
          data-toggle="modal" data-target="#helpModal">
    <i class="fa fa-question-circle mr-1"></i> Help
  </button>
</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" class="form-row align-items-end" id="filter-form">
      <div class="form-group col-md-3 mb-2">
        <label class="font-weight-bold">Date From</label>
        <input type="date" name="date_from" class="form-control" value="{{ date_from }}">
      </div>
      <div class="form-group col-md-3 mb-2">
        <label class="font-weight-bold">Date To</label>
        <input type="date" name="date_to" class="form-control" value="{{ date_to }}">
      </div>
      <div class="form-group col-md-3 mb-2">
        <label class="font-weight-bold">Department
          <small class="text-muted font-weight-normal">(optional)</small>
        </label>
        <select name="department_id" class="form-control">
          <option value="">— All Departments —</option>
          {% for dept in all_departments %}
            <option value="{{ dept.id }}"
              {% if dept_id_filter == dept.id|stringformat:"s" %}selected{% endif %}>
              {{ dept.name }}
            </option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group col-md-3 mb-2">
        <button type="submit" class="btn btn-primary btn-block">
          <i class="fa fa-search mr-1"></i> Generate Report
        </button>
      </div>
    </form>
  </div>
</div>

{% if has_results %}

{# ── Export Buttons ──────────────────────────────────────────────────────── #}
<div class="mb-3 d-flex">
  <a href="?date_from={{ date_from }}&date_to={{ date_to }}&department_id={{ dept_id_filter }}&export=excel"
     class="btn btn-success btn-sm mr-2">
    <i class="fa fa-file-excel-o mr-1"></i> Export Excel (5 Sheets)
  </a>
  <a href="?date_from={{ date_from }}&date_to={{ date_to }}&department_id={{ dept_id_filter }}&export=pdf"
     class="btn btn-danger btn-sm">
    <i class="fa fa-file-pdf-o mr-1"></i> Export PDF
  </a>
</div>

{# ════════════════════════════════════════════════════════════════════════════ #}
{# SECTION A — GRAND SUMMARY                                                  #}
{# ════════════════════════════════════════════════════════════════════════════ #}
<div class="card shadow-sm mb-4">
  <div class="card-header bg-dark text-white py-2">
    <strong>
      <i class="fa fa-th-list mr-1"></i>
      A. Department Summary
      <small class="font-weight-normal">— {{ date_from }} to {{ date_to }}</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>Department</th>
            <th class="text-center">Runs</th>
            <th class="text-right">Raw Material Cost</th>
            <th class="text-right">Labour</th>
            <th class="text-right">Fuel</th>
            <th class="text-right">Other</th>
            <th class="text-right">Grand Total</th>
          </tr>
        </thead>
        <tbody>
          {% for dept_name, d in dept_data.items %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td><strong>{{ dept_name }}</strong></td>
            <td class="text-center">
              <span class="badge badge-primary">{{ d.runs|length }}</span>
            </td>
            <td class="text-right">{{ d.raw_cost|floatformat:2|intcomma }}</td>
            <td class="text-right">{{ d.labour|floatformat:2|intcomma }}</td>
            <td class="text-right">{{ d.fuel|floatformat:2|intcomma }}</td>
            <td class="text-right">{{ d.other|floatformat:2|intcomma }}</td>
            <td class="text-right font-weight-bold">{{ d.grand|floatformat:2|intcomma }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="8" class="text-center text-muted">No data.</td></tr>
          {% endfor %}
        </tbody>
        <tfoot class="bg-warning font-weight-bold">
          <tr>
            <td colspan="2">GRAND TOTAL</td>
            <td class="text-center">{{ gt_runs }}</td>
            <td class="text-right">{{ gt_raw_cost|floatformat:2|intcomma }}</td>
            <td class="text-right">{{ gt_labour|floatformat:2|intcomma }}</td>
            <td class="text-right">{{ gt_fuel|floatformat:2|intcomma }}</td>
            <td class="text-right">{{ gt_other|floatformat:2|intcomma }}</td>
            <td class="text-right">{{ gt_grand|floatformat:2|intcomma }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

{# ════════════════════════════════════════════════════════════════════════════ #}
{# PER-DEPARTMENT DETAILED CARDS                                               #}
{# ════════════════════════════════════════════════════════════════════════════ #}
{% for dept_name, d in dept_data.items %}

<div class="card shadow mb-4 border-0">

  {# ── Department Card Header ────────────────────────────────────────────── #}
  <div class="card-header text-white py-2"
       style="background: linear-gradient(135deg, #1f3864 0%, #2e5196 100%);">
    <div class="d-flex align-items-center justify-content-between">
      <h5 class="mb-0">
        <i class="fa fa-building-o mr-2"></i>
        {{ dept_name }}
      </h5>
      <div>
        <span class="badge badge-light text-dark mr-2">
          <i class="fa fa-list-ol mr-1"></i>{{ d.runs|length }} Runs
        </span>
        <span class="badge badge-warning text-dark">
          Grand Total: {{ d.grand|floatformat:2|intcomma }}
        </span>
      </div>
    </div>
  </div>

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

    {# ── Mini KPI Cards ────────────────────────────────────────────────── #}
    <div class="row mb-3 mt-2">
      <div class="col-6 col-md-3 mb-2">
        <div class="card bg-light border text-center py-2">
          <small class="text-muted">Raw Material</small>
          <strong>{{ d.raw_cost|floatformat:2|intcomma }}</strong>
        </div>
      </div>
      <div class="col-6 col-md-3 mb-2">
        <div class="card bg-light border text-center py-2">
          <small class="text-muted">Labour</small>
          <strong>{{ d.labour|floatformat:2|intcomma }}</strong>
        </div>
      </div>
      <div class="col-6 col-md-3 mb-2">
        <div class="card bg-light border text-center py-2">
          <small class="text-muted">Fuel</small>
          <strong>{{ d.fuel|floatformat:2|intcomma }}</strong>
        </div>
      </div>
      <div class="col-6 col-md-3 mb-2">
        <div class="card bg-warning border text-center py-2">
          <small class="text-dark">Grand Total</small>
          <strong>{{ d.grand|floatformat:2|intcomma }}</strong>
        </div>
      </div>
    </div>

    {# ── Section B: Raw Material Consumption ─────────────────────────── #}
    <div class="card border-success mb-3">
      <div class="card-header bg-success text-white py-1">
        <strong><i class="fa fa-cubes mr-1"></i> B. Raw Material Consumption</strong>
        <small class="font-weight-normal"> — is department mein jo raw material use hua</small>
      </div>
      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0">
          <thead style="background:#375623; color:#fff;">
            <tr>
              <th>#</th>
              <th>Code</th>
              <th>Raw Material Name</th>
              <th>Company</th>
              <th class="text-right">Total Qty Used</th>
              <th class="text-right">Total Cost</th>
            </tr>
          </thead>
          <tbody>
            {% for pid, raw in d.raw_map.items %}
            <tr>
              <td class="text-muted">{{ forloop.counter }}</td>
              <td><code>{{ raw.code }}</code></td>
              <td>{{ raw.name }}</td>
              <td>{{ raw.company }}</td>
              <td class="text-right">{{ raw.qty|floatformat:4|intcomma }}</td>
              <td class="text-right">{{ raw.cost|floatformat:2|intcomma }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="6" class="text-center text-muted">No raw material data.</td></tr>
            {% endfor %}
          </tbody>
          {% if d.raw_map %}
          <tfoot class="font-weight-bold" style="background:#E2EFDA;">
            <tr>
              <td colspan="4">Total</td>
              {% with raw_tot_qty=0 raw_tot_cost=0 %}
              <td class="text-right">
                {% with total=d.raw_map.values %}
                  {# We compute in JS below for display; Django template can't sum nested dicts easily #}
                  —
                {% endwith %}
              </td>
              <td class="text-right">—</td>
              {% endwith %}
            </tr>
          </tfoot>
          {% endif %}
        </table>
      </div>
    </div>

    {# ── Section C: Finished Goods Produced ──────────────────────────── #}
    <div class="card border-danger mb-3">
      <div class="card-header text-white py-1" style="background:#7B2D00;">
        <strong><i class="fa fa-check-circle mr-1"></i> C. Finished Goods Produced</strong>
        <small class="font-weight-normal"> — is department mein jo manufacture hua</small>
      </div>
      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0">
          <thead style="background:#7B2D00; color:#fff;">
            <tr>
              <th>#</th>
              <th>Code</th>
              <th>Finished Item Name</th>
              <th class="text-right">Qty Produced</th>
              <th class="text-right">Total Cost</th>
              <th class="text-right">Avg Unit Cost</th>
            </tr>
          </thead>
          <tbody>
            {% for pid, fin in d.fin_map.items %}
            <tr>
              <td class="text-muted">{{ forloop.counter }}</td>
              <td><code>{{ fin.code }}</code></td>
              <td><strong>{{ fin.name }}</strong></td>
              <td class="text-right text-success font-weight-bold">
                {{ fin.qty|floatformat:4|intcomma }}
              </td>
              <td class="text-right">{{ fin.cost|floatformat:2|intcomma }}</td>
              <td class="text-right text-primary">
                {% if fin.qty %}
                  {{ fin.cost|floatformat:2 }}
                {% else %}—{% endif %}
              </td>
            </tr>
            {% empty %}
            <tr><td colspan="6" class="text-center text-muted">No finished goods data.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    {# ── Section D: BOM Compliance / Variance ────────────────────────── #}
    <div class="card mb-2" style="border-color:#44546A;">
      <div class="card-header text-white py-1" style="background:#44546A;">
        <strong>
          <i class="fa fa-balance-scale mr-1"></i>
          D. BOM Compliance — Expected vs Actual Raw Material
        </strong>
        <small class="font-weight-normal">
          — BOM k hisab se kitna hona chahiye tha, aur kitna actually use hua
        </small>
      </div>

      {% if d.variance_rows %}

      {# ── Variance Legend ── #}
      <div class="px-3 pt-2 pb-1">
        <span class="badge" style="background:#C6EFCE;color:#375623;">Normal (±3%)</span>
        <span class="badge ml-1" style="background:#FFC7CE;color:#9C0006;">Extra Used</span>
        <span class="badge ml-1" style="background:#FFEB9C;color:#7D6608;">Less Used</span>
        <span class="badge ml-1" style="background:#BDD7EE;color:#1F3864;">Not in BOM</span>
        <span class="badge ml-1 bg-secondary text-white">Not Used</span>
      </div>

      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0">
          <thead style="background:#44546A; color:#fff;">
            <tr>
              <th>#</th>
              <th>Raw Code</th>
              <th>Raw Material</th>
              <th class="text-right">BOM Expected Qty
                <br><small class="font-weight-normal">(production k hisab se)</small>
              </th>
              <th class="text-right">Actual Used Qty</th>
              <th class="text-right">Difference</th>
              <th class="text-right">Diff %</th>
              <th class="text-right">Actual Cost</th>
              <th class="text-center">Status</th>
            </tr>
          </thead>
          <tbody>
            {% for vr in d.variance_rows %}
            <tr class="{{ vr.row_class }}">
              <td class="text-muted">{{ forloop.counter }}</td>
              <td><code>{{ vr.raw_code }}</code></td>
              <td>{{ vr.raw_name }}</td>
              <td class="text-right">{{ vr.expected|floatformat:4|intcomma }}</td>
              <td class="text-right font-weight-bold">{{ vr.actual|floatformat:4|intcomma }}</td>
              <td class="text-right
                {% if vr.diff > 0 %}text-danger{% elif vr.diff < 0 %}text-warning{% else %}text-success{% endif %}">
                {% if vr.diff > 0 %}+{% endif %}{{ vr.diff|floatformat:4 }}
              </td>
              <td class="text-right
                {% if vr.diff_pct > 3 %}text-danger
                {% elif vr.diff_pct < -3 %}text-warning
                {% else %}text-success{% endif %}">
                {% if vr.diff_pct > 0 %}+{% endif %}{{ vr.diff_pct|floatformat:2 }}%
              </td>
              <td class="text-right">{{ vr.act_cost|floatformat:2|intcomma }}</td>
              <td class="text-center">
                {% if vr.status == "Normal" %}
                  <span class="badge" style="background:#375623;color:#fff;">✓ Normal</span>
                {% elif vr.status == "Extra Used" %}
                  <span class="badge badge-danger">
                    <i class="fa fa-arrow-up mr-1"></i>Extra Used
                  </span>
                {% elif vr.status == "Less Used" %}
                  <span class="badge badge-warning text-dark">
                    <i class="fa fa-arrow-down mr-1"></i>Less Used
                  </span>
                {% elif vr.status == "Not in BOM" %}
                  <span class="badge badge-info">Not in BOM</span>
                {% else %}
                  <span class="badge badge-secondary">Not Used</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot class="font-weight-bold" style="background:#E2EFDA;">
            <tr>
              <td colspan="3">TOTAL</td>
              <td class="text-right">
                {% with tot=0 %}
                {# Totals computed via JS below for display; Python passes dept-level sums #}
                {% endwith %}
                —
              </td>
              <td class="text-right">—</td>
              <td colspan="4"></td>
            </tr>
          </tfoot>
        </table>
      </div>

      {% else %}
        <div class="p-3 text-muted">
          <i class="fa fa-info-circle mr-1"></i>
          Koi BOM define nahi hua is department ke finished items ke liye.
        </div>
      {% endif %}
    </div>

    {# ── Run Detail Collapsible ───────────────────────────────────────── #}
    <div class="card mt-2 border-secondary">
      <div class="card-header py-1 bg-light">
        <a class="text-secondary" data-toggle="collapse"
           href="#runDetail_{{ forloop.counter }}" role="button">
          <i class="fa fa-list mr-1"></i>
          Production Run Detail ({{ d.runs|length }} runs) — click to expand
        </a>
      </div>
      <div class="collapse" id="runDetail_{{ forloop.counter }}">
        <div class="table-responsive">
          <table class="table table-sm table-bordered mb-0">
            <thead class="thead-light">
              <tr>
                <th>Run #</th>
                <th>Date</th>
                <th>Staff</th>
                <th class="text-right">Raw Cost</th>
                <th class="text-right">Labour</th>
                <th class="text-right">Fuel</th>
                <th class="text-right">Other</th>
                <th class="text-right">Grand Total</th>
              </tr>
            </thead>
            <tbody>
              {% for run in d.runs %}
              <tr>
                <td><span class="badge badge-secondary">#{{ run.invoice_no }}</span></td>
                <td>{{ run.run_date }}</td>
                <td>{{ run.staff }}</td>
                <td class="text-right">{{ run.raw_cost|floatformat:2 }}</td>
                <td class="text-right">{{ run.labour|floatformat:2 }}</td>
                <td class="text-right">{{ run.fuel|floatformat:2 }}</td>
                <td class="text-right">{{ run.other|floatformat:2 }}</td>
                <td class="text-right font-weight-bold">{{ run.grand|floatformat:2 }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>{# /card-body #}
</div>{# /dept card #}

{% endfor %}{# /for dept_data #}

{% elif request.GET.date_from %}
  {# Date filter diya tha lekin koi data nahi #}
  <div class="alert alert-warning">
    <i class="fa fa-exclamation-circle mr-1"></i>
    Selected date range mein koi production run nahi mila.
    {% if dept_id_filter %} (Selected department mein){% endif %}
  </div>
{% else %}
  {# Pehli visit — abhi tak filter nahi lagaya #}
  <div class="alert alert-info">
    <i class="fa fa-info-circle mr-1"></i>
    Date range select karein aur <strong>Generate Report</strong> press karein.
  </div>
{% endif %}

{# ── Help Modal ──────────────────────────────────────────────────────────── #}
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">
          <i class="fa fa-question-circle mr-1"></i>
          Department-wise Production Report — Help
        </h5>
        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>Yeh report aapki manufacturing operations ka complete picture deti hai:</p>
        <dl>
          <dt><i class="fa fa-th-list text-dark mr-1"></i> A. Department Summary</dt>
          <dd>Har department ka total raw material cost, labour, fuel, aur grand total ek nazar mein.</dd>

          <dt class="mt-2"><i class="fa fa-cubes text-success mr-1"></i> B. Raw Material Consumption</dt>
          <dd>Department mein kaun sa raw material kitni miqdar aur kitni cost mein use hua — production runs se directly nikala hua.</dd>

          <dt class="mt-2"><i class="fa fa-check-circle text-danger mr-1"></i> C. Finished Goods Produced</dt>
          <dd>Department mein kaun sa final product kitni quantity mein manufacture hua aur us ka total cost kya raha.</dd>

          <dt class="mt-2"><i class="fa fa-balance-scale text-info mr-1"></i> D. BOM Compliance</dt>
          <dd>
            <strong>Expected Qty</strong> = BOM qty per unit × is department mein produce ki gayi quantity.<br>
            <strong>Actual Qty</strong>   = jo actually production run mein use hua.<br>
            <strong>Difference</strong>   = Actual − Expected. Minus matlab less used, plus matlab extra used.
          </dd>
        </dl>
        <table class="table table-sm table-bordered">
          <thead class="thead-dark"><tr><th>Status</th><th>Matlab</th></tr></thead>
          <tbody>
            <tr class="table-success"><td>Normal</td><td>±3% k andar — bilkul theek</td></tr>
            <tr class="table-danger"><td>Extra Used</td><td>BOM se zyada raw material use hua — wastage possible</td></tr>
            <tr class="table-warning"><td>Less Used</td><td>BOM se kam use hua — shortage ya incomplete batch</td></tr>
            <tr class="table-info"><td>Not in BOM</td><td>Ye material BOM mein define nahi — unexpected usage</td></tr>
            <tr class="table-secondary"><td>Not Used</td><td>BOM mein tha lekin use hi nahi hua</td></tr>
          </tbody>
        </table>
        <p class="mb-0 text-muted">
          <i class="fa fa-lightbulb-o mr-1"></i>
          Excel export mein 5 alag sheets milti hain: Department Summary, Run Detail, Raw Material, Finished Goods, aur BOM Variance.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}