{% 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-flask mr-2 text-primary"></i>
    Production Capacity Report
    <small class="text-muted d-block" style="font-size:.65em;">
      Raw Material stock se kitne Finished Items ban sakte hain
    </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> Select Finished Items</strong>
  </div>
  <div class="card-body">
    <form method="get" id="capacity-filter-form">
      <div class="form-row align-items-end">
        <div class="form-group col-md-9 mb-2">
          <label class="font-weight-bold">Finished Items
            <small class="text-muted font-weight-normal">(multiple select kar sakte hain)</small>
          </label>
          <select id="product-select"
                  name="product_ids"
                  class="form-control"
                  multiple="multiple"
                  style="width:100%">
            {% for p in selected_products %}
              <option value="{{ p.id }}" selected>{{ p.text }}</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-calculator mr-1"></i> Calculate Capacity
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

{% if results %}

{# ─── Export Buttons ───────────────────────────────────────────────────── #}
<div class="mb-3">
  <a href="?{% for pid in prod_ids %}product_ids={{ pid }}&{% endfor %}export=excel"
     class="btn btn-success btn-sm">
    <i class="fa fa-file-excel-o mr-1"></i> Export Excel
  </a>
  <a href="?{% for pid in prod_ids %}product_ids={{ pid }}&{% 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>

{# ─── Per Finished Item Cards ──────────────────────────────────────────── #}
{% for item in results %}
<div class="card shadow-sm mb-4">
  {# Card Header: Finished Item info + Max Production badge #}
  <div class="card-header d-flex align-items-center justify-content-between py-2
              {% if item.no_bom %}bg-secondary{% elif item.max_qty > 0 %}bg-success{% else %}bg-danger{% endif %}
              text-white">
    <div>
      <strong>{{ item.fin_code }}</strong>
      &nbsp;—&nbsp;
      {{ item.fin_name }}
    </div>
    <div class="text-right">
      {% if item.no_bom %}
        <span class="badge badge-light text-dark">No BOM Defined</span>
      {% else %}
        <span class="mr-2" style="font-size:.85em;">Max Production:</span>
        <span class="badge badge-light text-dark"
              style="font-size:1.1em; padding:.4em .8em;">
          {{ item.max_qty }}
          <small>units</small>
        </span>
      {% endif %}
    </div>
  </div>

  <div class="card-body p-0">
    {% if item.no_bom %}
      <div class="p-3 text-muted">
        <i class="fa fa-exclamation-triangle text-warning mr-1"></i>
        Is finished item ka koi BOM define nahi hua.
      </div>
    {% else %}
      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0">
          <thead class="thead-light">
            <tr>
              <th>Raw Code</th>
              <th>Raw Material Name</th>
              <th class="text-right">Req Qty / Unit</th>
              <th class="text-right">Available Stock</th>
              <th class="text-right">Possible Qty <small class="text-muted">(this material)</small></th>
              <th class="text-center">Limiting?</th>
              <th>Remarks</th>
            </tr>
          </thead>
          <tbody>
            {% for row in item.raw_rows %}
            <tr class="{% if row.is_limiting %}table-warning font-weight-bold{% elif row.stock <= 0 %}table-danger{% endif %}">
              <td><code>{{ row.raw_code }}</code></td>
              <td>{{ row.raw_name }}</td>
              <td class="text-right">{{ row.per_unit }}</td>
              <td class="text-right
                {% if row.stock <= 0 %}text-danger
                {% elif row.stock < row.per_unit %}text-warning
                {% else %}text-success{% endif %}">
                {{ row.stock|floatformat:2 }}
              </td>
              <td class="text-right">{{ row.possible|floatformat:4 }}</td>
              <td class="text-center">
                {% if row.is_limiting %}
                  <span class="badge badge-warning">
                    <i class="fa fa-exclamation-triangle mr-1"></i>YES
                  </span>
                {% else %}
                  <span class="badge badge-light text-muted">—</span>
                {% endif %}
              </td>
              <td>
                <small class="
                  {% if row.is_limiting %}text-warning font-weight-bold
                  {% elif row.stock <= 0 %}text-danger
                  {% else %}text-success{% endif %}">
                  {{ row.remarks }}
                </small>
              </td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot class="bg-light">
            <tr>
              <td colspan="4" class="text-right font-weight-bold">
                Limiting Material:
              </td>
              <td colspan="3" class="font-weight-bold text-warning">
                <i class="fa fa-exclamation-triangle mr-1"></i>
                {{ item.limiting_material }}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    {% endif %}
  </div>
</div>
{% endfor %}


{# ─── Summary Table ────────────────────────────────────────────────────── #}
<div class="card shadow-sm mt-2 mb-4">
  <div class="card-header bg-dark text-white py-2">
    <strong><i class="fa fa-list-alt mr-1"></i> Summary</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>Finished Item Code</th>
            <th>Finished Item Name</th>
            <th class="text-right">Max Production Qty</th>
            <th>Limiting Raw Material</th>
            <th class="text-center">Status</th>
          </tr>
        </thead>
        <tbody>
          {% for item in results %}
          <tr class="{% if item.no_bom %}table-secondary
                     {% elif item.max_qty > 0 %}table-success
                     {% else %}table-danger{% endif %}">
            <td>{{ forloop.counter }}</td>
            <td><code>{{ item.fin_code }}</code></td>
            <td>{{ item.fin_name }}</td>
            <td class="text-right font-weight-bold">
              {% if item.no_bom %}—{% else %}{{ item.max_qty }}{% endif %}
            </td>
            <td>
              {% if item.no_bom %}
                <span class="text-muted">No BOM</span>
              {% else %}
                <small class="text-warning font-weight-bold">
                  <i class="fa fa-exclamation-triangle mr-1"></i>
                  {{ item.limiting_material }}
                </small>
              {% endif %}
            </td>
            <td class="text-center">
              {% if item.no_bom %}
                <span class="badge badge-secondary">No BOM</span>
              {% elif item.max_qty > 0 %}
                <span class="badge badge-success">Can Produce</span>
              {% else %}
                <span class="badge badge-danger">Cannot Produce</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot class="bg-light font-weight-bold">
          <tr>
            <td colspan="2" class="text-right">Total Items Selected:</td>
            <td>{{ results|length }}</td>
            <td colspan="3"></td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

{% elif prod_ids %}
  {# IDs the mein thay lekin koi result nahi aaya #}
  <div class="alert alert-warning">
    <i class="fa fa-exclamation-circle mr-1"></i>
    Selected items ke liye koi data nahi mila.
  </div>

{% else %}
  {# Page pehli baar khula — koi selection nahi #}
  <div class="alert alert-info">
    <i class="fa fa-info-circle mr-1"></i>
    Upar se <strong>Finished Items</strong> select karein aur
    <strong>Calculate Capacity</strong> press karein.
  </div>
{% endif %}
{% endblock %}


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

  $('#product-select').select2({
    placeholder:        'Finished item ka naam 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 badgeClass = parseFloat(stock) > 0 ? 'badge-success' : 'badge-danger';
      return `<span>${item.text} <small class="text-muted">(${item.code || ''})</small>`
           + ` <span class="badge ${badgeClass} ml-1">Stock: ${
               parseFloat(stock) >= 0 ? parseFloat(stock).toFixed(2) : stock
             }</span></span>`;
    },
    escapeMarkup: m => m,
  });
});
</script>
{% endblock %}