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

{% block content %}
<h1>{% if pk %}Edit{% else %}New{% endif %} Production Run</h1>

<form method="post" id="run-form">
  {% csrf_token %}

  <!-- Run Date -->
  <div class="form-group row">
    <label for="id_run_date" class="col-sm-2 col-form-label">Run Date</label>
    <div class="col-sm-4">
      <input type="date"
             id="id_run_date"
             name="run_date"
             class="form-control"
             value="{{ run_date|default:'' }}"
             required>
    </div>
  </div>

  <!-- Finished Items -->
  <h5>Finished Items</h5>
  <table id="finished-table" class="table table-bordered">
    <thead>
      <tr><th>Code</th><th>Name</th><th>Qty</th><th>✖</th></tr>
    </thead>
    <tbody>
      {% if fin_lines %}
        {% for line in fin_lines %}
        <tr data-index="{{ line.index }}">
          <td>
            <input type="text"
                   class="form-control fin-code"
                   data-index="{{ line.index }}"
                   value="{{ line.code }}">
            <input type="hidden"
                   name="lines-{{line.index}}-component_id"
                   class="fin-id"
                   value="{{ line.id }}">
          </td>
          <td>
            <select class="form-control fin-name"
                    data-index="{{ line.index }}"
                    style="width:100%">
              <option value="{{ line.id }}" selected>
                {{ line.name }} ({{ line.code }})
              </option>
            </select>
          </td>
          <td>
            <input type="number" step="0.01"
                   name="lines-{{line.index}}-quantity"
                   class="form-control fin-qty"
                   data-index="{{ line.index }}"
                   value="{{ line.quantity }}">
          </td>
          <td class="text-center">
            <button type="button"
                    class="btn btn-sm btn-danger fin-remove"
                    data-index="{{ line.index }}">✖</button>
          </td>
        </tr>
        {% endfor %}
      {% else %}
        <tr data-index="0">
          <td>
            <input type="text" class="form-control fin-code"
                   data-index="0" placeholder="Code & Enter">
            <input type="hidden" name="lines-0-component_id"
                   class="fin-id">
          </td>
          <td>
            <select class="form-control fin-name"
                    data-index="0" style="width:100%">
              <option></option>
            </select>
          </td>
          <td>
            <input type="number" step="0.01"
                   name="lines-0-quantity"
                   class="form-control fin-qty"
                   data-index="0">
          </td>
          <td class="text-center">
            <button type="button"
                    class="btn btn-sm btn-danger fin-remove"
                    data-index="0">✖</button>
          </td>
        </tr>
      {% endif %}
    </tbody>
  </table>
  <button type="button" class="btn btn-secondary mb-3"
          id="add-finished">+ Add Finished Item</button>

  <!-- Calculate Raw Material -->
  <button type="button" class="btn btn-info mb-3" id="calc-raw">
    Calculate Raw Material
  </button>

  <!-- Raw Material Summary -->
  <h5>Raw Material Summary</h5>
  <table id="raw-table" class="table table-bordered">
    <thead>
      <tr>
        <th>Code</th><th>Name</th><th>Qty Needed</th>
        <th>Unit Cost</th><th>Line Cost</th><th>✖</th>
      </tr>
    </thead>
    <tbody>
      {% if raw_lines %}
        {% for line in raw_lines %}
        <tr data-index="{{ line.index }}">
          <td>
            <input type="text"
                   class="form-control raw-code"
                   data-index="{{ line.index }}"
                   value="{{ line.code }}">
            <input type="hidden"
                   name="raw-lines-{{line.index}}-component_id"
                   class="raw-id"
                   value="{{ line.id }}">
          </td>
          <td>
            <select class="form-control raw-name"
                    data-index="{{ line.index }}"
                    style="width:100%">
              <option value="{{ line.id }}" selected>
                {{ line.name }} ({{ line.code }})
              </option>
            </select>
          </td>
          <td>
            <input type="number" step="0.01"
                   name="raw-lines-{{line.index}}-qty_needed"
                   class="form-control raw-qty"
                   data-index="{{ line.index }}"
                   value="{{ line.qty_needed }}">
          </td>
          <td>
            <input type="number" step="0.01"
                   name="raw-lines-{{line.index}}-unit_cost"
                   class="form-control raw-uc"
                   data-index="{{ line.index }}"
                   value="{{ line.unit_cost }}">
          </td>
          <td>
            <input type="number" step="0.01"
                   name="raw-lines-{{line.index}}-line_cost"
                   class="form-control raw-lc"
                   data-index="{{ line.index }}"
                   value="{{ line.line_cost }}"
                   readonly>
          </td>
          <td class="text-center">
            <button type="button"
                    class="btn btn-sm btn-danger raw-remove"
                    data-index="{{ line.index }}">✖</button>
          </td>
        </tr>
        {% endfor %}
      {% else %}
        <tr data-index="0">
          <td>
            <input type="text" class="form-control raw-code"
                   data-index="0" placeholder="Code & Enter">
            <input type="hidden"
                   name="raw-lines-0-component_id"
                   class="raw-id">
          </td>
          <td>
            <select class="form-control raw-name"
                    data-index="0" style="width:100%">
              <option></option>
            </select>
          </td>
          <td>
            <input type="number" step="0.01"
                   name="raw-lines-0-qty_needed"
                   class="form-control raw-qty"
                   data-index="0">
          </td>
          <td>
            <input type="number" step="0.01"
                   name="raw-lines-0-unit_cost"
                   class="form-control raw-uc"
                   data-index="0">
          </td>
          <td>
            <input type="number" step="0.01"
                   name="raw-lines-0-line_cost"
                   class="form-control raw-lc"
                   data-index="0" readonly>
          </td>
          <td class="text-center">
            <button type="button"
                    class="btn btn-sm btn-danger raw-remove"
                    data-index="0">✖</button>
          </td>
        </tr>
      {% endif %}
    </tbody>
    <tfoot>
      <tr>
        <th colspan="4" class="text-right">Total Raw Cost:</th>
        <th>
          <input type="number" step="0.01"
                 id="total-raw-cost"
                 class="form-control"
                 value="{{ raw_total|default:0.00 }}"
                 readonly>
        </th>
        <th></th>
      </tr>
    </tfoot>
  </table>
  <button type="button" class="btn btn-secondary mb-3" id="add-raw">
    + Add Raw Material
  </button>

  <!-- Overheads -->
  <h5>Overheads</h5>
  <div class="form-row">
    <div class="form-group col-md-3">
      <label for="overhead_staff">Staff</label>
      <select id="overhead_staff" name="staff_id"
              class="form-control" style="width:100%">
        <option></option>
        {% if staff_id %}
        <option value="{{ staff_id }}" selected>{{ staff_name }}</option>
        {% endif %}
      </select>
    </div>
    <div class="form-group col-md-3">
      <label for="overhead_dept">Department</label>
      <select id="overhead_dept" name="department_id"
              class="form-control" style="width:100%">
        <option></option>
        {% if dept_id %}
        <option value="{{ dept_id }}" selected>{{ dept_name }}</option>
        {% endif %}
      </select>
    </div>
    <div class="form-group col-md-2">
      <label>Labour</label>
      <input type="number" step="0.01"
             id="labour_charge"
             name="labour_charge"
             class="form-control"
             value="{{ labour|default:0 }}">
    </div>
    <div class="form-group col-md-2">
      <label>Fuel</label>
      <input type="number" step="0.01"
             id="fuel_charge"
             name="fuel_charge"
             class="form-control"
             value="{{ fuel|default:0 }}">
    </div>
    <div class="form-group col-md-2">
      <label>Other</label>
      <input type="number" step="0.01"
             id="other_expense"
             name="other_expense"
             class="form-control"
             value="{{ other|default:0 }}">
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Grand Total</label>
    <div class="col-sm-4">
      <input type="number" step="0.01"
             id="grand-total"
             name="grand_total"
             class="form-control"
             value="{{ grand_total|default:'0.00' }}"
             readonly>
    </div>
  </div>

  <button type="submit" class="btn btn-success">Submit Run</button>
  <a href="{% url 'manufacturing:run_list' %}" class="btn btn-link">
    Cancel
  </a>
</form>
{% endblock %}


{% block javascripts %}

<script>
$(function(){
  const nameUrl   = "{% url 'manufacturing:ajax_search_product_by_name' %}";
  const codeUrl   = "{% url 'manufacturing:ajax_get_product_by_code'   %}";
  const staffUrl  = "{% url 'manufacturing:ajax_search_staff'         %}";
  const deptUrl   = "{% url 'manufacturing:ajax_search_department'    %}";
  const calcUrl   = "{% url 'manufacturing:run_calc'                 %}";
  const csrfToken = '{{ csrf_token }}';

  // ─────────────────────────────────────────────────────────────────────────
  // 1) RUN DATE — default today if not already set (new form)
  // ─────────────────────────────────────────────────────────────────────────
  const $dateField = $('#id_run_date');
  if (!$dateField.val()) {
    const now = new Date();
    const y   = now.getFullYear();
    const m   = String(now.getMonth() + 1).padStart(2, '0');
    const d   = String(now.getDate()).padStart(2, '0');
    $dateField.val(`${y}-${m}-${d}`);
  }

  // ─────────────────────────────────────────────────────────────────────────
  // ENTER BLOCK — form ke andar kisi bhi input/select par Enter se
  //               form submit na ho (custom handlers apna kaam karte rahein)
  // ─────────────────────────────────────────────────────────────────────────
  $('#run-form').on('keydown', 'input, select, textarea', function(e) {
    if (e.which === 13) e.preventDefault();
  });

  // ─────────────────────────────────────────────────────────────────────────
  // 5) CTRL + S  — save form
  // ─────────────────────────────────────────────────────────────────────────
  $(document).on('keydown', function(e) {
    if (e.ctrlKey && e.key === 's') {
      e.preventDefault();
      $('#run-form').submit();
    }
  });

  // ─────────────────────────────────────────────────────────────────────────
  // Helper — Select2 search input focus karo (dropdown open hone ke baad)
  // ─────────────────────────────────────────────────────────────────────────
  function openSelect2AndFocus($select) {
    $select.select2('open');
    setTimeout(function () {
      // Select2 rendered search input — visible wala focus karo
      $('.select2-container--open .select2-search__field').first().focus();
    }, 50);
  }

  // ─────────────────────────────────────────────────────────────────────────
  // Select2 options
  // ─────────────────────────────────────────────────────────────────────────
  const select2ProdOpts = {
    placeholder: 'Search…', 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
        : '—';
      return `<span>${item.text} <small class="text-muted">(${item.code || ''})</small>`
           + `&nbsp;&nbsp;<span class="badge badge-${parseFloat(stock) > 0 ? 'success' : 'danger'}">`
           + `Stock: ${parseFloat(stock) >= 0 ? parseFloat(stock).toFixed(2) : stock}`
           + `</span></span>`;
    },
    escapeMarkup: m => m
  };

  // ─────────────────────────────────────────────────────────────────────────
  // Helper — raw line cost recalculate karo
  // ─────────────────────────────────────────────────────────────────────────
  function recalcRawLine($row) {
    const q  = parseFloat($row.find('.raw-qty').val()) || 0;
    const uc = parseFloat($row.find('.raw-uc').val())  || 0;
    const lc = q * uc;
    $row.find('.raw-lc').val(lc.toFixed(2));
    let tot = 0;
    $('#raw-table tbody tr').each(function () {
      tot += parseFloat($(this).find('.raw-lc').val()) || 0;
    });
    $('#total-raw-cost').val(tot.toFixed(2));
    // grand total bhi update karo
    const labour = parseFloat($('#labour_charge').val()) || 0;
    const fuel   = parseFloat($('#fuel_charge').val())   || 0;
    const other  = parseFloat($('#other_expense').val()) || 0;
    $('#grand-total').val((tot + labour + fuel + other).toFixed(2));
  }

  // ─────────────────────────────────────────────────────────────────────────
  // Helper — naya raw row add karo aur focus karo
  // ─────────────────────────────────────────────────────────────────────────
  function addRawRow() {
    const i = $('#raw-table tbody tr').length;
    $('#raw-table tbody').append(`
      <tr data-index="${i}">
        <td>
          <input type="text" class="form-control raw-code"
                 data-index="${i}" placeholder="Code & Enter">
          <input type="hidden" name="raw-lines-${i}-component_id"
                 class="raw-id">
        </td>
        <td>
          <select class="form-control raw-name"
                  data-index="${i}" style="width:100%"><option></option>
          </select>
        </td>
        <td>
          <input type="number" step="0.01"
                 name="raw-lines-${i}-qty_needed"
                 class="form-control raw-qty"
                 data-index="${i}">
        </td>
        <td>
          <input type="number" step="0.01"
                 name="raw-lines-${i}-unit_cost"
                 class="form-control raw-uc"
                 data-index="${i}">
        </td>
        <td>
          <input type="number" step="0.01"
                 name="raw-lines-${i}-line_cost"
                 class="form-control raw-lc"
                 data-index="${i}" readonly>
        </td>
        <td class="text-center">
          <button type="button" class="btn btn-sm btn-danger raw-remove"
                  data-index="${i}">✖</button>
        </td>
      </tr>`);
    initRawRow(i);
    return i;  // naye row ka index return karo
  }

  // ─────────────────────────────────────────────────────────────────────────
  // 3 & 4) RAW ROW INIT — Enter key flow + Code lookup
  // ─────────────────────────────────────────────────────────────────────────
  function initRawRow(i) {
    const $row  = $(`#raw-table tr[data-index=${i}]`);
    const $name = $row.find('.raw-name');

    // Select2 init
    $name.select2(select2ProdOpts)
      .off('select2:select').on('select2:select', function (e) {
        const d = e.params.data;
        $row.find('.raw-id').val(d.id);
        $row.find('.raw-code').val(d.code || '');
        $row.find('.raw-uc').val(d.purchase_price || '');
        recalcRawLine($row);
        // Select2 close hone ke baad Qty Needed par focus
        setTimeout(function () { $row.find('.raw-qty').focus().select(); }, 50);
      });

    // ── Code column — Enter ──────────────────────────────────────────────
    // 4) Code mein kuch likh kar Enter → found: focus qty | not found: Select2 open
    $row.find('.raw-code').off('keydown').on('keydown', function (e) {
      if (e.which !== 13) return;
      e.preventDefault();
      const v = $(this).val().trim();
      if (!v) {
        // Khaali hai → seedha Select2 open karo
        openSelect2AndFocus($name);
        return;
      }
      $.post(codeUrl, { code: v, csrfmiddlewaretoken: csrfToken })
        .done(function (resp) {
          if (resp.success) {
            // Item found — populate karo, focus qty
            $row.find('.raw-id').val(resp.product.id);
            $row.find('.raw-uc').val(resp.product.purchase_price || '');
            const opt = new Option(
              `${resp.product.name} (${resp.product.product_code})`,
              resp.product.id, true, true
            );
            $name.append(opt).trigger('change');
            recalcRawLine($row);
            $row.find('.raw-qty').focus().select();
          } else {
            // Item nahi mila → Select2 search open karo
            openSelect2AndFocus($name);
          }
        });
    });

    // ── Qty Needed — Enter → Unit Cost par focus ─────────────────────────
    // 3) Qty Enter → Unit Cost
    $row.find('.raw-qty').off('keydown').on('keydown', function (e) {
      if (e.which !== 13) return;
      e.preventDefault();
      $row.find('.raw-uc').focus().select();
    });

    // ── Unit Cost — Enter → naya row add karo, Code par focus ────────────
    // 3) Unit Cost Enter → new row + focus Code
    $row.find('.raw-uc').off('keydown').on('keydown', function (e) {
      if (e.which !== 13) return;
      e.preventDefault();
      const newIdx = addRawRow();
      // Thoda delay taake Select2 init ho jaye
      setTimeout(function () {
        $(`#raw-table tr[data-index=${newIdx}]`).find('.raw-code').focus();
      }, 80);
    });

    // Input change → line cost recalc
    $row.find('.raw-qty, .raw-uc').off('input').on('input', function () {
      recalcRawLine($row);
    });

    // Remove button
    $row.find('.raw-remove').off('click').on('click', function () {
      $row.remove();
      // Total bhi update karo
      let tot = 0;
      $('#raw-table tbody tr').each(function () {
        tot += parseFloat($(this).find('.raw-lc').val()) || 0;
      });
      $('#total-raw-cost').val(tot.toFixed(2));
      const labour = parseFloat($('#labour_charge').val()) || 0;
      const fuel   = parseFloat($('#fuel_charge').val())   || 0;
      const other  = parseFloat($('#other_expense').val()) || 0;
      $('#grand-total').val((tot + labour + fuel + other).toFixed(2));
    });
  }

  // ─────────────────────────────────────────────────────────────────────────
  // Helper — naya finished row add karo
  // ─────────────────────────────────────────────────────────────────────────
  function addFinishedRow() {
    const i = $('#finished-table tbody tr').length;
    $('#finished-table tbody').append(`
      <tr data-index="${i}">
        <td>
          <input type="text" class="form-control fin-code"
                 data-index="${i}" placeholder="Code & Enter">
          <input type="hidden" name="lines-${i}-component_id"
                 class="fin-id">
        </td>
        <td>
          <select class="form-control fin-name"
                  data-index="${i}" style="width:100%"><option></option>
          </select>
        </td>
        <td>
          <input type="number" step="0.01" name="lines-${i}-quantity"
                 class="form-control fin-qty" data-index="${i}">
        </td>
        <td class="text-center">
          <button type="button" class="btn btn-sm btn-danger fin-remove"
                  data-index="${i}">✖</button>
        </td>
      </tr>`);
    initFinishedRow(i);
    return i;
  }

  // ─────────────────────────────────────────────────────────────────────────
  // FINISHED ROW INIT
  // ─────────────────────────────────────────────────────────────────────────
  let labourTotals = [];

  function updateLabourSum() {
    const sum = labourTotals.reduce((a, b) => a + (b || 0), 0);
    $('#labour_charge').val(sum.toFixed(2)).trigger('input');
  }

  function initFinishedRow(i) {
    const $row  = $(`#finished-table tr[data-index=${i}]`);
    const $name = $row.find('.fin-name');

    $name.select2(select2ProdOpts)
      .off('select2:select').on('select2:select', function (e) {
        const d = e.params.data;
        $row.find('.fin-id').val(d.id);
        $row.find('.fin-code').val(d.code || '');
        // packing_cost store karo data attribute mein
        $row.find('.fin-code').data('packing_cost', d.packing_cost || 0);
        const qty = parseFloat($row.find('.fin-qty').val()) || 0;
        labourTotals[i] = (d.packing_cost || 0) * qty;
        updateLabourSum();
        setTimeout(function () { $row.find('.fin-qty').focus().select(); }, 50);
      });

    $row.find('.fin-qty').off('input keydown').on('input', function () {
      const qty = parseFloat(this.value) || 0;
      const pc  = parseFloat($row.find('.fin-code').data('packing_cost')) || 0;
      labourTotals[i] = pc * qty;
      updateLabourSum();
    }).on('keydown', function (e) {
      // Qty Enter → naya finished row, focus naye row ki Name (Select2)
      if (e.which !== 13) return;
      e.preventDefault();
      const newIdx = addFinishedRow();
      setTimeout(function () {
        openSelect2AndFocus($(`#finished-table tr[data-index=${newIdx}]`).find('.fin-name'));
      }, 80);
    });

    // Code column Enter
    $row.find('.fin-code').off('keydown').on('keydown', function (e) {
      if (![9, 13].includes(e.which)) return;
      e.preventDefault();
      const v = $(this).val().trim();
      if (!v) {
        openSelect2AndFocus($name);
        return;
      }
      $.post(codeUrl, { code: v, csrfmiddlewaretoken: csrfToken })
        .done(function (resp) {
          if (resp.success) {
            $row.find('.fin-id').val(resp.product.id);
            $row.find('.fin-code').data('packing_cost', resp.product.packing_cost || 0);
            const opt = new Option(
              `${resp.product.name} (${resp.product.product_code})`,
              resp.product.id, true, true
            );
            $name.append(opt).trigger('change');
            labourTotals[i] = (resp.product.packing_cost || 0) *
                               (parseFloat($row.find('.fin-qty').val()) || 0);
            updateLabourSum();
            $row.find('.fin-qty').focus().select();
          } else {
            // Code nahi mila → Select2 open karo
            openSelect2AndFocus($name);
          }
        });
    });

    $row.find('.fin-remove').off('click').on('click', function () {
      labourTotals[i] = 0;
      $row.remove();
      updateLabourSum();
    });
  }

  // ─────────────────────────────────────────────────────────────────────────
  // + Add Finished Item button
  // ─────────────────────────────────────────────────────────────────────────
  $('#add-finished').click(function () {
    const newIdx = addFinishedRow();
    setTimeout(function () {
      openSelect2AndFocus($(`#finished-table tr[data-index=${newIdx}]`).find('.fin-name'));
    }, 80);
  });

  // ─────────────────────────────────────────────────────────────────────────
  // + Add Raw Material button
  // ─────────────────────────────────────────────────────────────────────────
  $('#add-raw').click(function () {
    const newIdx = addRawRow();
    setTimeout(function () {
      $(`#raw-table tr[data-index=${newIdx}]`).find('.raw-code').focus();
    }, 80);
  });

  // ─────────────────────────────────────────────────────────────────────────
  // Existing rows init
  // ─────────────────────────────────────────────────────────────────────────
  $('#finished-table tbody tr').each(function () {
    initFinishedRow($(this).data('index'));
  });

  $('#raw-table tbody tr').each(function () {
    initRawRow($(this).data('index'));
  });

  // ─────────────────────────────────────────────────────────────────────────
  // 2) PAGE OPEN DEFAULT FOCUS — Finished Items ka pehla Name (Select2) open karo
  //    Sirf new form par (edit par existing data already hai)
  // ─────────────────────────────────────────────────────────────────────────
  {% if not pk %}
  setTimeout(function () {
    const $firstName = $('#finished-table tbody tr:first').find('.fin-name');
    if ($firstName.length) {
      openSelect2AndFocus($firstName);
    }
  }, 200);
  {% endif %}

  // ─────────────────────────────────────────────────────────────────────────
  // Calculate Raw Material (AJAX)
  // ─────────────────────────────────────────────────────────────────────────
  $('#calc-raw').click(function () {
    const items = [];
    $('#finished-table tbody tr').each(function () {
      const id = $(this).find('.fin-id').val();
      const q  = parseFloat($(this).find('.fin-qty').val()) || 0;
      if (id && q > 0) items.push({ id: parseInt(id), qty: q });
    });
    if (!items.length) {
      return alert('Add at least one finished item.');
    }
    $.ajax({
      url: calcUrl,
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({ items }),
      headers: { 'X-CSRFToken': csrfToken },
      success: function (data) {
        $('#raw-table tbody').empty();
        data.results.forEach(function (r, i) {
          $('#raw-table tbody').append(`
            <tr data-index="${i}">
              <td>
                <input type="text" class="form-control raw-code"
                       data-index="${i}" value="${r.code}">
                <input type="hidden"
                       name="raw-lines-${i}-component_id"
                       class="raw-id" value="${r.id}">
              </td>
              <td>
                <select name="raw-lines-${i}-component_name"
                        class="form-control raw-name"
                        data-index="${i}" style="width:100%">
                  <option></option>
                  <option value="${r.id}" selected>${r.name} (${r.code})</option>
                </select>
              </td>
              <td>
                <input type="number" step="0.01"
                       name="raw-lines-${i}-qty_needed"
                       class="form-control raw-qty"
                       data-index="${i}" value="${r.qty_needed}">
              </td>
              <td>
                <input type="number" step="0.01"
                       name="raw-lines-${i}-unit_cost"
                       class="form-control raw-uc"
                       data-index="${i}" value="${r.unit_cost}">
              </td>
              <td>
                <input type="number" step="0.01"
                       name="raw-lines-${i}-line_cost"
                       class="form-control raw-lc"
                       data-index="${i}" value="${r.line_cost}" readonly>
              </td>
              <td class="text-center">
                <button type="button"
                        class="btn btn-sm btn-danger raw-remove"
                        data-index="${i}">✖</button>
              </td>
            </tr>`);
          initRawRow(i);
        });
        $('#total-raw-cost').val(data.total_raw_cost.toFixed(2));
        $('#labour_charge').val(data.total_labour_charge.toFixed(2));
        $('#fuel_charge, #other_expense').trigger('input');
      }
    });
  });

  // ─────────────────────────────────────────────────────────────────────────
  // Overhead recalc (Labour / Fuel / Other change hone par)
  // ─────────────────────────────────────────────────────────────────────────
  $('#labour_charge, #fuel_charge, #other_expense').on('input', function () {
    const totRaw = parseFloat($('#total-raw-cost').val()) || 0;
    const labour = parseFloat($('#labour_charge').val())  || 0;
    const fuel   = parseFloat($('#fuel_charge').val())    || 0;
    const other  = parseFloat($('#other_expense').val())  || 0;
    $('#grand-total').val((totRaw + labour + fuel + other).toFixed(2));
  });

  // ─────────────────────────────────────────────────────────────────────────
  // Staff & Department Select2
  // ─────────────────────────────────────────────────────────────────────────
  $('#overhead_staff').select2({
    placeholder: 'Select staff…',
    allowClear: true,
    width: 'resolve',
    ajax: {
      url: staffUrl, dataType: 'json', delay: 250,
      data: params => ({ q: params.term }),
      processResults: data => ({ results: data.results }),
      cache: true
    },
    minimumInputLength: 1
  });

  $('#overhead_dept').select2({
    placeholder: 'Select department…',
    allowClear: true,
    width: 'resolve',
    ajax: {
      url: deptUrl, dataType: 'json', delay: 250,
      data: params => ({ q: params.term }),
      processResults: data => ({ results: data.results }),
      cache: true
    },
    minimumInputLength: 1
  });

});
</script>
{% endblock %}