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

{% block content %}

{# ══ Title Bar ═══════════════════════════════════════════════════════════════ #}
<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 Cost Analysis
    </h3>
    <small class="text-muted">
      BOM-based cost allocation · efficiency · raw material breakdown
    </small>
  </div>
  <button class="btn btn-outline-secondary btn-sm"
          data-toggle="modal" data-target="#helpModal">
    <i class="fa fa-question-circle"></i>
  </button>
</div>

{# ══ Filter Card ══════════════════════════════════════════════════════════════ #}
<div class="card shadow-sm mb-4">
  <div class="card-body py-3">
    <form method="get" class="form-row align-items-end">
      <div class="form-group col-sm-3 mb-2">
        <label class="small font-weight-bold mb-1">Department</label>
        <select name="department_id" class="form-control form-control-sm">
          <option value="">— All Departments —</option>
          {% for d in all_departments %}
            <option value="{{ d.id }}"
              {% if dept_id == d.id|stringformat:"s" %}selected{% endif %}>
              {{ d.name }}
            </option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group col-sm-3 mb-2">
        <label class="small font-weight-bold mb-1">Date From</label>
        <input type="date" name="date_from" class="form-control form-control-sm"
               value="{{ date_from }}">
      </div>
      <div class="form-group col-sm-3 mb-2">
        <label class="small font-weight-bold mb-1">Date To</label>
        <input type="date" name="date_to" class="form-control form-control-sm"
               value="{{ date_to }}">
      </div>
      <div class="form-group col-sm-3 mb-2">
        <button type="submit" class="btn btn-primary btn-sm btn-block">
          <i class="fa fa-search mr-1"></i> Generate
        </button>
      </div>
    </form>
  </div>
</div>


{# ══ Department selected but no runs ═════════════════════════════════════════ #}
{% if no_data %}
<div class="alert alert-warning">
  <i class="fa fa-exclamation-circle mr-1"></i>
  <strong>{{ dept_name }}</strong> mein selected dates mein koi production run nahi mila.
</div>

{# ══ RESULTS ══════════════════════════════════════════════════════════════════ #}
{% elif has_results %}

{# ── Export + Dept Header ─────────────────────────────────────────────────── #}
<div class="d-flex justify-content-between align-items-center mb-3">

  <div>
    <h5 class="mb-0">
      <span class="badge badge-primary mr-1" style="font-size:.9rem;">
        <i class="fa fa-building-o mr-1"></i>{{ dept_name }}
      </span>
      <small class="text-muted font-weight-normal">
        {{ date_from }}  →  {{ date_to }}
      </small>
    </h5>
  </div>

  <div>
    <a href="?department_id={{ dept_id }}&date_from={{ date_from }}&date_to={{ date_to }}&export=excel"
       class="btn btn-success btn-sm mr-1">
      <i class="fa fa-file-excel-o mr-1"></i> Excel
    </a>
    <a href="?department_id={{ dept_id }}&date_from={{ date_from }}&date_to={{ date_to }}&export=pdf"
       class="btn btn-danger btn-sm">
      <i class="fa fa-file-pdf-o mr-1"></i> PDF
    </a>
  </div>
</div>

{# ── Total Raw Cost Banner ─────────────────────────────────────────────────── #}
<div class="alert mb-4 py-2 px-3"
     style="background:#1F3864; color:#fff; border-radius:6px;">
  <div class="d-flex justify-content-between align-items-center">
    <span>
      <i class="fa fa-database mr-2"></i>
      <strong>Total Raw Material Cost ({{ date_from }} – {{ date_to }})</strong>
    </span>
    <span style="font-size:1.3rem; font-weight:700; letter-spacing:.03em;">
      Rs. {{ dept_total_raw_cost|floatformat:2|intcomma }}
    </span>
  </div>
</div>

<h5 class="mb-3">
  <i class="fa fa-check-circle text-success mr-1"></i>
  Finished Goods — Cost Allocation &amp; Efficiency
</h5>

<div class="row">
{% for f in fin_results %}
<div class="col-md-6 col-lg-4 mb-4">
  <div class="card h-100 shadow-sm"
       style="border-top: 4px solid {{ f.eff_color }};">
    <div class="card-body pb-2">

      {# Product name + code #}
      <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
          <h6 class="mb-0 font-weight-bold">{{ f.name }}</h6>
          <small class="text-muted"><code>{{ f.code }}</code></small>
        </div>
        {% if not f.has_bom %}
        <span class="badge badge-secondary">No BOM</span>
        {% else %}
        <span class="badge" style="background:{{ f.eff_color }};color:#fff;font-size:.75rem;">
          {{ f.eff_label }}
        </span>
        {% endif %}
      </div>

      {# Qty produced #}
      <div class="mb-3">
        <span class="text-muted small">Qty Produced:</span>
        <strong class="ml-1">{{ f.produced_qty|floatformat:4|intcomma }}</strong>
        <span class="text-muted small ml-1">units</span>
      </div>

      {% if f.has_bom %}

      {# Cost rows #}
      <table class="table table-sm mb-2" style="font-size:.82rem;">
        <tbody>
          <tr>
            <td class="text-muted border-0 pl-0">Actual Cost</td>
            <td class="text-right border-0 font-weight-bold">
              Rs. {{ f.actual_cost|floatformat:2|intcomma }}
            </td>
          </tr>
          <tr>
            <td class="text-muted pl-0">BOM Std Cost</td>
            <td class="text-right">Rs. {{ f.std_cost|floatformat:2|intcomma }}</td>
          </tr>
          <tr>
            <td class="text-muted pl-0">Per Unit (actual)</td>
            <td class="text-right">Rs. {{ f.actual_unit_cost|floatformat:4 }}</td>
          </tr>
          <tr>
            <td class="text-muted pl-0">Per Unit (BOM std)</td>
            <td class="text-right">Rs. {{ f.std_unit_cost|floatformat:4 }}</td>
          </tr>
          <tr>
            <td class="text-muted pl-0">Variance</td>
            <td class="text-right
              {% if f.variance > 0 %}text-danger{% else %}text-success{% endif %}">
              {% if f.variance > 0 %}+{% endif %}Rs. {{ f.variance|floatformat:2|intcomma }}
              <small>({% if f.variance_pct > 0 %}+{% endif %}{{ f.variance_pct|floatformat:2 }}%)</small>
            </td>
          </tr>
          <tr>
            <td class="text-muted pl-0">Cost Share</td>
            <td class="text-right">
              <span class="badge badge-light text-dark border">
                {{ f.cost_share|floatformat:2 }}% of dept
              </span>
            </td>
          </tr>
        </tbody>
      </table>

      {# Efficiency bar #}
      <div class="mt-1 mb-1">
        <div class="d-flex justify-content-between mb-1">
          <small class="text-muted">Efficiency</small>
          <small class="font-weight-bold" style="color:{{ f.eff_color }};">
            {{ f.efficiency|floatformat:1 }}%
          </small>
        </div>
        <div class="progress" style="height:10px; border-radius:6px;">
          {% with eff_w=f.efficiency %}
          <div class="progress-bar" role="progressbar"
               style="width:{% if eff_w > 100 %}100{% else %}{{ eff_w|floatformat:0 }}{% endif %}%;
                      background:{{ f.eff_color }}; border-radius:6px;"
               aria-valuenow="{{ eff_w }}"
               aria-valuemin="0" aria-valuemax="100">
          </div>
          {% endwith %}
        </div>
        <div class="d-flex justify-content-between mt-1">
          <small class="text-muted" style="font-size:.7rem;">0%</small>
          <small class="text-muted" style="font-size:.7rem;">100% (BOM std)</small>
        </div>
      </div>

      {# BOM breakdown — collapsible #}
      <div class="mt-2">
        <a class="small text-secondary" data-toggle="collapse"
           href="#bom_{{ f.fin_pid }}" role="button">
          <i class="fa fa-list-ul mr-1"></i>BOM detail
          <i class="fa fa-chevron-down" style="font-size:.65rem;"></i>
        </a>
        <div class="collapse" id="bom_{{ f.fin_pid }}">
          <table class="table table-sm mt-2 mb-0" style="font-size:.75rem;">
            <thead class="thead-light">
              <tr>
                <th>Raw Material</th>
                <th class="text-right">Qty/Unit</th>
                <th class="text-right">Avg Rate</th>
                <th class="text-right">Std Cost</th>
              </tr>
            </thead>
            <tbody>
              {% for bl in f.bom_lines %}
              <tr>
                <td>{{ bl.raw_name }}
                  <br><small class="text-muted"><code>{{ bl.raw_code }}</code></small>
                </td>
                <td class="text-right">{{ bl.qty_per_unit|floatformat:4 }}</td>
                <td class="text-right">{{ bl.avg_unit_cost|floatformat:4 }}</td>
                <td class="text-right font-weight-bold">{{ bl.std_cost|floatformat:4 }}</td>
              </tr>
              {% empty %}
              <tr><td colspan="4" class="text-muted text-center">No BOM lines.</td></tr>
              {% endfor %}
            </tbody>
            <tfoot class="font-weight-bold" style="background:#f0f0f0;">
              <tr>
                <td colspan="3">Total Std Cost / Unit</td>
                <td class="text-right">{{ f.bom_unit_cost|floatformat:4 }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

      {% else %}
      {# No BOM #}
      <div class="alert alert-secondary py-2 mb-0" style="font-size:.82rem;">
        <i class="fa fa-exclamation-triangle mr-1"></i>
        Is product ka BOM define nahi hua — cost allocation nahi ho sakti.
      </div>
      {% endif %}

    </div>{# /card-body #}
  </div>{# /card #}
</div>{# /col #}
{% empty %}
<div class="col-12">
  <div class="alert alert-warning">Koi finished goods nahi mile is period mein.</div>
</div>
{% endfor %}
</div>{# /row #}

{# ── Grand Total Row ──────────────────────────────────────────────────────── #}
{% if fin_results %}
<div class="card mb-4 shadow-sm" style="border-left:4px solid #1F3864;">
  <div class="card-body py-2">
    <div class="row text-center">
      <div class="col-3 border-right">
        <small class="text-muted d-block">Total Produced</small>
        <strong>{{ gt_produced|floatformat:4|intcomma }}</strong>
      </div>
      <div class="col-3 border-right">
        <small class="text-muted d-block">Total Actual Cost</small>
        <strong>Rs. {{ gt_actual_cost|floatformat:2|intcomma }}</strong>
      </div>
      <div class="col-3 border-right">
        <small class="text-muted d-block">Total BOM Std Cost</small>
        <strong>Rs. {{ gt_std_cost|floatformat:2|intcomma }}</strong>
      </div>
      <div class="col-3">
        <small class="text-muted d-block">Total Variance</small>
        <strong class="{% if gt_variance > 0 %}text-danger{% else %}text-success{% endif %}">
          {% if gt_variance > 0 %}+{% endif %}Rs. {{ gt_variance|floatformat:2|intcomma }}
        </strong>
      </div>
    </div>
  </div>
</div>
{% endif %}

<h5 class="mb-3 mt-2">
  <i class="fa fa-cubes text-warning mr-1"></i>
  Raw Material Consumption
</h5>

<div class="card shadow-sm">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0">
        <thead style="background:#1E5631; color:#fff;">
          <tr>
            <th>#</th>
            <th>Code</th>
            <th>Raw Material</th>
            <th class="text-right">Qty Used</th>
            <th class="text-right">Avg Unit Cost</th>
            <th class="text-right">Total Cost (Rs)</th>
            <th style="min-width:160px;">% of Dept Cost</th>
          </tr>
        </thead>
        <tbody>
          {% for r in raw_list %}
          <tr>
            <td class="text-muted">{{ forloop.counter }}</td>
            <td><code>{{ r.code }}</code></td>
            <td>{{ r.name }}</td>
            <td class="text-right">{{ r.total_qty|floatformat:4|intcomma }}</td>
            <td class="text-right">{{ r.avg_cost|floatformat:4 }}</td>
            <td class="text-right font-weight-bold">{{ r.total_cost|floatformat:2|intcomma }}</td>
            <td>
              <div class="d-flex align-items-center">
                {# Progress bar #}
                <div class="progress flex-grow-1 mr-2" style="height:8px;">
                  <div class="progress-bar"
                       style="width:{{ r.pct|floatformat:0 }}%;
                              background: {% if r.pct >= 40 %}#dc3545{% elif r.pct >= 20 %}#fd7e14{% else %}#28a745{% endif %};"
                       role="progressbar"></div>
                </div>
                <small class="font-weight-bold" style="min-width:36px;">
                  {{ r.pct|floatformat:2 }}%
                </small>
              </div>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="7" class="text-center text-muted">No raw material data.</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot style="background:#E2EFDA;" class="font-weight-bold">
          <tr>
            <td colspan="5" class="text-right">Total</td>
            <td class="text-right">Rs. {{ dept_total_raw_cost|floatformat:2|intcomma }}</td>
            <td>100%</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

{% endif %}{# /has_results #}


{# ══ 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 py-2">
        <h5 class="modal-title">
          <i class="fa fa-question-circle mr-1"></i> Report Explanation
        </h5>
        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body" style="font-size:.9rem;">

        <p>
          Yeh report department ki <strong>manufacturing cost</strong> ko
          BOM k hisab sy allocate kar k batati hy — binaa kisi sale price k.
        </p>

        <dl>
          <dt>Actual Cost (per product)</dt>
          <dd>
            Department ka total raw material cost (is period mein jo bhi raw material use hua)
            BOM weight ratio se har finished product mein baanta hai.
            <br>
            <code>Product X Actual Cost = (X ka BOM Value / Total BOM Value) × Dept Total Raw Cost</code>
          </dd>

          <dt class="mt-2">BOM Std Cost</dt>
          <dd>
            Agar exactly BOM qty use hoti — same rates par — to kitna cost aata.
            <br>
            <code>= BOM qty/unit × produced qty × avg unit cost (actual rates)</code>
          </dd>

          <dt class="mt-2">Variance</dt>
          <dd>
            Actual − Std. <span class="text-danger">Positive = overspent (waste)</span>,
            <span class="text-success">Negative = saving (efficient)</span>.
          </dd>

          <dt class="mt-2">Efficiency Bar</dt>
          <dd>
            <code>BOM Std Cost / Actual Cost × 100</code>
            <br>
            <span style="color:#28a745;">98%+</span> = Excellent &nbsp;|&nbsp;
            <span style="color:#17a2b8;">93–98%</span> = Good &nbsp;|&nbsp;
            <span style="color:#ffc107;">85–93%</span> = Warning &nbsp;|&nbsp;
            <span style="color:#dc3545;">&lt;85%</span> = Poor
          </dd>

          <dt class="mt-2">Raw Material Table</dt>
          <dd>
            Department mein is period mein use hone wale saare raw materials —
            qty, average FIFO cost, total cost, aur percentage bar
            (lal = zyada mehnga, hara = kam mehnga).
          </dd>
        </dl>

      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}