{# templates/transactions/staff_payment_bulk.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}
  {% if is_edit %}Edit{% else %}Add{% endif %} Bulk Staff Payment
{% endblock %}

{% block stylesheets %}
<style>
  .hidden { display: none; }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none; margin: 0;
  }
  input[type="number"] { -moz-appearance: textfield; }

  table.bulk-table th, table.bulk-table td {
      padding: 4px 6px; vertical-align: middle;
  }
  .form-control-sm {
      padding: 0.15rem 0.35rem; font-size: 0.8rem;
      height: calc(1.6em + 0.5rem);
  }

  .js-amount { background: #fef9e7 !important; }
  .js-amount:focus { background: #fef3c7 !important; }

  /* ===== Filter Bar ===== */
  .filter-bar {
      background: #f8f9fc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 14px 16px;
      margin-bottom: 14px;
  }
  .filter-bar label {
      font-size: .76rem;
      font-weight: 600;
      color: #4a5568;
      margin-bottom: 2px;
  }
  .btn-load-staff {
      background: #1170c6;
      color: #fff;
      border: none;
      font-weight: 600;
      font-size: .82rem;
      padding: 6px 20px;
      border-radius: 6px;
      transition: .2s;
  }
  .btn-load-staff:hover { background: #0d5aa7; color: #fff; }
  .filter-count {
      font-size: .75rem;
      color: #718096;
      margin-left: 8px;
  }
  .checkbox-group {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 8px 12px;
      margin-top: 8px;
  }
  .checkbox-group .custom-control {
      margin-right: 18px;
  }
  .checkbox-group .custom-control-label {
      font-size: .78rem;
      font-weight: 600;
      color: #2d3748;
      cursor: pointer;
  }
  .checkbox-group .custom-control-label small {
      font-weight: 400;
      color: #718096;
  }

  /* ===== Select2 width ===== */
  .bulk-table .select2-container {
      min-width: 280px !important;
      width: 100% !important;
  }
  .select2-container--open .select2-dropdown {
      min-width: 380px !important;
  }

  .select2-results__option .staff-name {
      font-weight: 600;
      color: #2d3748;
      display: block;
  }
  .select2-results__option .staff-dept {
      font-size: 11px;
      color: #718096;
      display: block;
      margin-top: 2px;
  }

  /* normal rows */
  .select2-container--bootstrap4 .select2-results__option,
  .select2-results__option {
      background: #ffffff !important;
      color: #000000 !important;
  }
  /* hover */
  .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
  .select2-results__option--highlighted[aria-selected] {
      background: #0d5aa7 !important;
      color: #ffffff !important;
      font-weight: 700 !important;
  }
  .select2-results__option--highlighted[aria-selected] .staff-name,
  .select2-results__option--highlighted[aria-selected] .staff-dept {
      color: #ffffff !important;
  }
  /* selected */
  .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
      background: #eaf4ff !important;
  }

  .cash-type-select {
      min-width: 80px;
  }

  /* Department column */
  .js-dept {
      font-size: 0.75rem;
      color: #4a5568;
      background: #f7fafc !important;
  }
</style>
{% endblock %}

{% block heading %}
  {% if is_edit %}Edit{% else %}Add{% endif %} Bulk Staff Payment
{% endblock %}

{% block content %}

<!-- Bank options template (for JS row creation) -->
<template id="bank-options-tpl">
  {% for b in bank_accounts %}
    <option value="{{ b.t_id }}"
      {% if b.t_id == default_bank_id %}selected{% endif %}>{{ b.name }}</option>
  {% endfor %}
</template>

<div class="mb-2">
  {% if is_edit %}
    <span class="badge badge-success">Staff Bulk No: {{ bulk.bulk_no }}</span>
  {% endif %}
</div>

<form method="post" id="bulk-form" class="needs-validation" novalidate>
  {% csrf_token %}

  <!-- Header -->
  <div class="row">
    <div class="col-md-3">
      <label class="small mb-1">Date</label>
      <input type="date" class="form-control form-control-sm"
             name="trx_date" value="{{ today|date:'Y-m-d' }}" required>
    </div>
    <div class="col-md-4">
      <label class="small mb-1">Remarks</label>
      <input type="text" name="bulk_remarks"
             class="form-control form-control-sm" value="{{ bulk_remarks }}">
    </div>
    <div class="col-md-3">
      <label class="small mb-1">Operator</label>
      <select name="saleman_operator" class="form-control form-control-sm">
        {% for s in salemen %}
          <option value="{{ s.t_id }}"
            {% if bulk.operator_id == s.t_id %}selected{% endif %}>{{ s.name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <hr>

  <!-- ═══════════════════ Filter Bar ═══════════════════ -->
  <div class="filter-bar">
    <div class="row align-items-end">

      <div class="col-md-2 col-sm-6 mb-2">
        <label class="mb-1">Employment Type</label>
        <select id="filter-employment-type" class="form-control form-control-sm">
          <option value="">— All —</option>
          <option value="full_time">Full Time</option>
          <option value="part_time">Part Time</option>
          <option value="contract">Contract</option>
          <option value="temporary">Temporary</option>
          <option value="internship">Internship</option>
        </select>
      </div>

      <div class="col-md-2 col-sm-6 mb-2">
        <label class="mb-1">Salary Type</label>
        <select id="filter-pay-type" class="form-control form-control-sm">
          <option value="">— All —</option>
          <option value="monthly">Monthly</option>
          <option value="daily">Daily</option>
          <option value="weekly">Weekly</option>
          <option value="hourly">Hourly</option>
        </select>
      </div>

      <div class="col-md-2 col-sm-6 mb-2">
        <label class="mb-1">Payment Method</label>
        <select id="filter-payment-method" class="form-control form-control-sm">
          <option value="">— All —</option>
          <option value="cash">Cash</option>
          <option value="bank_transfer">Bank Transfer</option>
          <option value="cheque">Cheque</option>
          <option value="mobile_wallet">Mobile Wallet</option>
        </select>
      </div>

      <div class="col-md-2 col-sm-6 mb-2">
        <label class="mb-1">Commission Type</label>
        <select id="filter-commission-type" class="form-control form-control-sm">
          <option value="">— All —</option>
          <option value="none">No Commission</option>
          <option value="on_sale">On Sale</option>
          <option value="on_profit">On Profit</option>
          <option value="on_item">On Item</option>
        </select>
      </div>

      <div class="col-md-2 col-sm-6 mb-2">
        <button type="button" id="btn-load-staff" class="btn btn-load-staff">
          <i class="fas fa-users mr-1"></i>Load All Staff
        </button>
        <span class="filter-count" id="filter-count"></span>
      </div>
    </div>

    <!-- Checkboxes Row -->
    <div class="checkbox-group d-flex flex-wrap align-items-center">
      <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" class="custom-control-input" id="chk-load-salary"
               name="amount_source" value="salary" checked>
        <label class="custom-control-label" for="chk-load-salary">
          Load Salary <small>(monthly salary → Amount)</small>
        </label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" class="custom-control-input" id="chk-load-balance"
               name="amount_source" value="balance">
        <label class="custom-control-label" for="chk-load-balance">
          Load Remaining Balance <small>(staff balance → Amount)</small>
        </label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" class="custom-control-input" id="chk-load-finalized"
               name="amount_source" value="finalized">
        <label class="custom-control-label" for="chk-load-finalized">
          Load Last Finalized Salary <small>(last salary record → Amount)</small>
        </label>
      </div>
    </div>
  </div>

  <!-- Table -->
  <div class="table-responsive">
    <table class="table table-bordered bulk-table" id="bulk-table">
      <thead class="thead-light">
        <tr>
          <th style="width:50px;">Line</th>
          <th style="width:80px;">Staff&nbsp;ID</th>
          <th style="width:220px;">Staff&nbsp;Name</th>
          <th style="width:130px;">Department</th>
          <th style="width:110px;">Prev&nbsp;Balance</th>
          <th style="width:120px;">Amount</th>
          <th style="width:110px;">Remaining</th>
          <th style="width:90px;">Pay&nbsp;Type</th>
          <th style="width:150px;">Bank</th>
          <th>Note</th>
          <th style="width:40px;"></th>
        </tr>
      </thead>
      <tbody id="bulk-rows">
        {% if lines %}
          {% for ln in lines %}
            <tr class="bulk-row">
              <td class="text-center align-middle">
                {{ forloop.counter }}
                <input type="hidden" name="line_id[]" value="{{ ln.id }}">
              </td>
              <td>
                <input type="number" name="staff_id[]"
                       class="form-control form-control-sm bulk-field js-staff-id"
                       value="{{ ln.staff_id }}">
              </td>
              <td>
                <select name="staff_name[]"
                        class="form-control form-control-sm bulk-field js-staff-select">
                  {% if ln.staff_obj %}
                    <option value="{{ ln.staff_obj.t_id }}" selected>{{ ln.staff_obj.name }}</option>
                  {% else %}
                    <option value="" selected>—</option>
                  {% endif %}
                </select>
              </td>
              <td>
                <input type="text" name="department[]"
                       class="form-control form-control-sm js-dept"
                       value="{% if ln.staff_obj %}{{ ln.staff_obj.department|default:'' }}{% endif %}" readonly>
              </td>
              <td>
                <input type="number" step="0.01" name="prev_balance[]"
                       class="form-control form-control-sm bulk-field js-prev"
                       value="{{ ln.previous_balance_snapshot }}" readonly>
              </td>
              <td>
                <input type="number" step="0.01" name="amount[]"
                       class="form-control form-control-sm bulk-field js-amount"
                       value="{{ ln.amount }}">
              </td>
              <td>
                <input type="number" step="0.01" name="remaining[]"
                       class="form-control form-control-sm js-remain" readonly
                       value="{{ ln.remaining_balance_snapshot }}">
              </td>
              <td>
                <select name="cash_type[]" class="form-control form-control-sm bulk-field cash-type-select js-cash-type">
                  <option value="Cash" {% if ln.cash_type == "Cash" %}selected{% endif %}>Cash</option>
                  <option value="Bank" {% if ln.cash_type == "Bank" %}selected{% endif %}>Bank</option>
                </select>
              </td>
              <td>
                <select name="bank_id[]" class="form-control form-control-sm bulk-field js-bank">
                  <option value="0">—</option>
                  {% for b in bank_accounts %}
                    <option value="{{ b.t_id }}" {% if b.t_id == ln.bank_id %}selected{% endif %}>{{ b.name }}</option>
                  {% endfor %}
                </select>
              </td>
              <td>
                <input type="text" name="note[]"
                       class="form-control form-control-sm bulk-field"
                       value="{{ ln.note }}">
              </td>
              <td class="text-center">
                <button type="button" class="btn btn-sm btn-danger js-remove-row">&times;</button>
              </td>
            </tr>
          {% endfor %}
        {% else %}
          <tr class="bulk-row">
            <td class="text-center align-middle">
              1 <input type="hidden" name="line_id[]" value="">
            </td>
            <td><input type="number" name="staff_id[]"
                       class="form-control form-control-sm bulk-field js-staff-id"></td>
            <td><select name="staff_name[]"
                        class="form-control form-control-sm bulk-field js-staff-select"></select></td>
            <td><input type="text" name="department[]"
                       class="form-control form-control-sm js-dept" readonly></td>
            <td><input type="number" step="0.01" name="prev_balance[]"
                       class="form-control form-control-sm bulk-field js-prev" readonly></td>
            <td><input type="number" step="0.01" name="amount[]"
                       class="form-control form-control-sm bulk-field js-amount"></td>
            <td><input type="number" step="0.01" name="remaining[]"
                       class="form-control form-control-sm js-remain" readonly></td>
            <td>
              <select name="cash_type[]" class="form-control form-control-sm bulk-field cash-type-select js-cash-type">
                <option value="Cash" selected>Cash</option>
                <option value="Bank">Bank</option>
              </select>
            </td>
            <td>
              <select name="bank_id[]" class="form-control form-control-sm bulk-field js-bank">
                <option value="0">—</option>
                {% for b in bank_accounts %}
                  <option value="{{ b.t_id }}"
                    {% if b.t_id == default_bank_id %}selected{% endif %}>{{ b.name }}</option>
                {% endfor %}
              </select>
            </td>
            <td><input type="text" name="note[]"
                       class="form-control form-control-sm bulk-field"></td>
            <td class="text-center">
              <button type="button" class="btn btn-sm btn-danger js-remove-row">&times;</button>
            </td>
          </tr>
        {% endif %}
      </tbody>
      <tfoot>
        <tr>
          <th colspan="5" class="text-right">Total Amount:</th>
          <th><input type="text" id="total-amount" class="form-control form-control-sm" readonly></th>
          <th colspan="5"></th>
        </tr>
      </tfoot>
    </table>
  </div>

  <div class="mt-3 d-flex justify-content-between">
    <div>
      <button type="button" id="btn-add-row" class="btn btn-sm btn-outline-primary">+ Add Row</button>
    </div>
    <div>
      <button type="submit" class="btn btn-success">
        <i class="fas fa-save mr-1"></i>Save Bulk Payment
      </button>
      <a href="{% url 'transactions:staff_bulk_payment_list' %}" class="btn btn-secondary btn-sm">
        Back to List
      </a>
    </div>
  </div>
</form>

{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
  const csrftoken = '{{ csrf_token }}';
  const bankOptionsHtml = document.getElementById('bank-options-tpl').innerHTML;

  /* ── helpers ──────────────────────────────────────────────── */

  function recalcRow($row) {
    const prev = parseFloat($row.find('.js-prev').val())   || 0;
    const amt  = parseFloat($row.find('.js-amount').val()) || 0;
    $row.find('.js-remain').val((prev - amt).toFixed(2));
  }

  function recalcTotals() {
    let t = 0;
    $('#bulk-rows .bulk-row').each(function () {
      t += parseFloat($(this).find('.js-amount').val()) || 0;
    });
    $('#total-amount').val(t.toFixed(2));
  }

  function renumberLines() {
    $('#bulk-rows .bulk-row').each(function (idx) {
      $(this).find('td:first').contents()
        .filter(function(){ return this.nodeType === 3; })
        .first().replaceWith((idx+1) + ' ');
    });
  }

  function toggleBank($row) {
    var ct = $row.find('.js-cash-type').val();
    if (ct === 'Bank') {
      $row.find('.js-bank').prop('disabled', false).css('opacity', '1');
    } else {
      $row.find('.js-bank').val('0').prop('disabled', true).css('opacity', '0.4');
    }
  }

  /** Which radio is selected? Returns 'salary' | 'balance' | 'finalized' */
  function getAmountSource() {
    return $('input[name="amount_source"]:checked').val() || 'salary';
  }

  /* ── create row ──────────────────────────────────────────── */

  function createRow(lineNum, staffId, staffName, prevBalance, department, amountVal) {
    const bal    = parseFloat(prevBalance) || 0;
    const dept   = department || '';
    const amt    = parseFloat(amountVal) || 0;
    const remain = (bal - amt).toFixed(2);
    const html = `
      <tr class="bulk-row">
        <td class="text-center align-middle">
          ${lineNum} <input type="hidden" name="line_id[]" value="">
        </td>
        <td><input type="number" name="staff_id[]"
                   class="form-control form-control-sm bulk-field js-staff-id"
                   value="${staffId || ''}"></td>
        <td><select name="staff_name[]"
                    class="form-control form-control-sm bulk-field js-staff-select">
              ${staffId ? '<option value="'+staffId+'" selected>'+(staffName||'')+'</option>' : ''}
            </select></td>
        <td><input type="text" name="department[]"
                   class="form-control form-control-sm js-dept"
                   value="${dept}" readonly></td>
        <td><input type="number" step="0.01" name="prev_balance[]"
                   class="form-control form-control-sm bulk-field js-prev"
                   value="${staffId ? bal.toFixed(2) : ''}" readonly></td>
        <td><input type="number" step="0.01" name="amount[]"
                   class="form-control form-control-sm bulk-field js-amount"
                   value="${amt ? amt.toFixed(2) : ''}"></td>
        <td><input type="number" step="0.01" name="remaining[]"
                   class="form-control form-control-sm js-remain"
                   value="${staffId ? remain : ''}" readonly></td>
        <td>
          <select name="cash_type[]" class="form-control form-control-sm bulk-field cash-type-select js-cash-type">
            <option value="Cash" selected>Cash</option>
            <option value="Bank">Bank</option>
          </select>
        </td>
        <td>
          <select name="bank_id[]" class="form-control form-control-sm bulk-field js-bank" disabled style="opacity:0.4">
            <option value="0">—</option>
            ${bankOptionsHtml}
          </select>
        </td>
        <td><input type="text" name="note[]"
                   class="form-control form-control-sm bulk-field" value=""></td>
        <td class="text-center">
          <button type="button" class="btn btn-sm btn-danger js-remove-row">&times;</button>
        </td>
      </tr>`;
    return $(html);
  }

  /* ── Select2 for Staff ───────────────────────────────────── */

  function initSelect2($row) {
    const $sel = $row.find('.js-staff-select');
    if ($sel.data('select2')) $sel.select2('destroy');

    function formatStaff(item) {
      if (!item.id) return item.text || '';
      const name = item.text || '';
      const dept = item.department || '';
      return $(`<div>
        <span class="staff-name">${name}</span>
        ${dept ? '<span class="staff-dept">' + dept + '</span>' : ''}
      </div>`);
    }

    $sel.select2({
      theme: 'bootstrap4',
      placeholder: 'Search staff…',
      allowClear: true,
      minimumInputLength: 1,
      width: '100%',
      dropdownAutoWidth: true,
      templateResult: formatStaff,
      escapeMarkup: function(m) { return m; },
      ajax: {
        url: "{% url 'transactions:get_staff' %}",
        type: 'POST',
        delay: 250,
        data: function(p) { return { term: p.term }; },
        headers: { 'X-CSRFToken': csrftoken },
        processResults: function(d) {
          return {
            results: d.results.map(function(item) {
              return {
                id: item.id,
                text: item.text,
                department: item.department || '',
                balance: item.balance || 0
              };
            })
          };
        }
      }
    });

    $sel.off('select2:select').on('select2:select', function(e) {
      const d  = e.params.data;
      const $r = $(this).closest('.bulk-row');
      $r.find('.js-staff-id').val(d.id);
      $r.find('.js-dept').val(d.department || '');

      $.ajax({
        url: "{% url 'transactions:get_staff_balance' %}",
        type: 'GET',
        data: { staff_id: d.id },
        success: function(res) {
          var bal = parseFloat(res.balance) || 0;
          $r.find('.js-prev').val(bal.toFixed(2));
          recalcRow($r);
        }
      });

      $r.find('.js-amount').focus();
    });

    $sel.off('select2:clear').on('select2:clear', function() {
      const $r = $(this).closest('.bulk-row');
      $r.find('.js-staff-id').val('');
      $r.find('.js-dept').val('');
      $r.find('.js-prev').val('');
      $r.find('.js-remain').val('');
    });
  }

  /* ── row events ──────────────────────────────────────────── */

  function initRowEvents($row) {

    $row.find('.js-staff-id').off('keydown.sid').on('keydown.sid', function(e) {
      if (e.key !== 'Enter') return;
      e.preventDefault();
      const val = ($(this).val() || '').trim();
      if (!val) {
        const $s = $(this).closest('.bulk-row').find('.js-staff-select');
        $s.select2('open');
        setTimeout(function(){
          var f = document.querySelector('.select2-container--open .select2-search__field');
          if(f) f.focus();
        }, 0);
        return;
      }
      const $inp = $(this);
      $.ajax({
        url: "{% url 'transactions:get_staff' %}",
        type: 'POST',
        headers: { 'X-CSRFToken': csrftoken },
        data: { term: val },
        success: function(data) {
          var results = data.results || data;
          var r = results.find(function(x) { return String(x.id) === String(val); });
          if (r) {
            const $r = $inp.closest('.bulk-row');
            const $s = $r.find('.js-staff-select');
            const option = new Option(r.text, r.id, false, true);
            $s.append(option).trigger('change');
            $r.find('.js-dept').val(r.department || '');

            $.ajax({
              url: "{% url 'transactions:get_staff_balance' %}",
              type: 'GET',
              data: { staff_id: r.id },
              success: function(res) {
                var bal = parseFloat(res.balance) || 0;
                $r.find('.js-prev').val(bal.toFixed(2));
                recalcRow($r);
              }
            });

            $r.find('.js-amount').focus();
          }
        }
      });
    });

    $row.find('.js-amount').off('input').on('input', function() {
      recalcRow($(this).closest('.bulk-row'));
      recalcTotals();
    });

    $row.find('.js-cash-type').off('change').on('change', function() {
      toggleBank($(this).closest('.bulk-row'));
    });
    toggleBank($row);

    $row.find('.js-remove-row').off('click').on('click', function() {
      if ($('#bulk-rows .bulk-row').length > 1) {
        $(this).closest('.bulk-row').remove();
        renumberLines();
        recalcTotals();
      }
    });

    $row.find('.bulk-field').off('keydown.nav').on('keydown.nav', function(e) {
      if (e.key === 'Enter' && $(this).hasClass('js-amount')) {
        e.preventDefault();
        var $nr = $(this).closest('.bulk-row').next('.bulk-row');
        if ($nr.length) {
          $nr.find('.js-amount').focus();
        } else {
          var $ff = $('#bulk-rows .bulk-row .bulk-field'), i = $ff.index(this), n = $ff.get(i+1);
          if (n) n.focus();
        }
        return;
      }
      if (e.key === 'Enter') {
        e.preventDefault();
        var $ff = $('#bulk-rows .bulk-row .bulk-field'), i = $ff.index(this), n = $ff.get(i+1);
        if (n) {
          n.focus();
        } else {
          $('#btn-add-row').click();
          var $lastRow = $('#bulk-rows .bulk-row').last();
          $lastRow.find('.js-staff-id').focus();
        }
        return;
      }
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        var $r = $(this).closest('.bulk-row'), ci = $r.find('.bulk-field').index(this),
            $n = $r.next('.bulk-row');
        if ($n.length) $n.find('.bulk-field').eq(ci).focus();
        return;
      }
      if (e.key === 'ArrowUp') {
        e.preventDefault();
        var $r = $(this).closest('.bulk-row'), ci = $r.find('.bulk-field').index(this),
            $p = $r.prev('.bulk-row');
        if ($p.length) $p.find('.bulk-field').eq(ci).focus();
        return;
      }
    });

    initSelect2($row);
    recalcRow($row);
  }


  /* ══════════════════════════════════════════════════════════
     ██  Load All Staff  (filter button)
     ══════════════════════════════════════════════════════════ */

  $('#btn-load-staff').on('click', function () {
    const source = getAmountSource();  // 'salary' | 'balance' | 'finalized'

    const postData = {
      employment_type: $('#filter-employment-type').val(),
      pay_type:        $('#filter-pay-type').val(),
      payment_method:  $('#filter-payment-method').val(),
      commission_type: $('#filter-commission-type').val(),
    };

    const $btn = $(this);
    $btn.prop('disabled', true)
        .html('<i class="fas fa-spinner fa-spin mr-1"></i>Loading…');

    $.ajax({
      url:     "{% url 'transactions:ajax_load_staff_for_bulk' %}",
      type:    'POST',
      headers: { 'X-CSRFToken': csrftoken },
      data:    postData,
      success: function (data) {
        $btn.prop('disabled', false)
            .html('<i class="fas fa-users mr-1"></i>Load All Staff');

        if (!data.length) {
          alert('No active staff found for the selected filters.');
          $('#filter-count').text('');
          return;
        }

        // destroy existing Select2 instances
        $('#bulk-rows .js-staff-select').each(function () {
          if ($(this).data('select2')) $(this).select2('destroy');
        });
        $('#bulk-rows').empty();

        data.forEach(function (s, idx) {
          // decide what goes into Amount column
          var amountVal = 0;
          if (source === 'balance') {
            amountVal = s.balance || 0;
          } else if (source === 'finalized') {
            amountVal = s.last_finalized_salary || 0;
          } else {
            // 'salary' (default)
            amountVal = s.full_salary || 0;
          }

          var $r = createRow(
            idx + 1,
            s.id,
            s.text,
            s.balance,
            s.department,
            amountVal
          );
          $('#bulk-rows').append($r);
          initRowEvents($r);
        });

        recalcTotals();
        $('#filter-count').text(data.length + ' staff loaded');

        setTimeout(function () {
          $('#bulk-rows .bulk-row:first .js-amount').focus();
        }, 100);
      },
      error: function () {
        $btn.prop('disabled', false)
            .html('<i class="fas fa-users mr-1"></i>Load All Staff');
        alert('Error loading staff.');
      }
    });
  });


  /* ── Init existing rows ──────────────────────────────────── */

  $('#bulk-rows .bulk-row').each(function () { initRowEvents($(this)); });
  recalcTotals();

  setTimeout(function () {
    var $firstRow = $('#bulk-rows .bulk-row').first();
    if ($firstRow.length) {
      var $sid = $firstRow.find('.js-staff-id');
      if (!($sid.val() || '').trim()) {
        var $sel = $firstRow.find('.js-staff-select');
        $sel.select2('open');
        setTimeout(function () {
          var f = document.querySelector('.select2-container--open .select2-search__field');
          if (f) f.focus();
        }, 50);
      }
    }
  }, 300);

  /* ── Add Row button ──────────────────────────────────────── */

  $('#btn-add-row').on('click', function () {
    var $last = $('#bulk-rows .bulk-row').last();
    var $ls   = $last.find('.js-staff-select');
    var lv    = $ls.val(), lt = $ls.find('option:selected').text();
    if ($ls.data('select2')) $ls.select2('destroy');

    var $clone = $last.clone();

    if (lv) {
      if (!$ls.find('option[value="' + lv + '"]').length)
        $ls.append(new Option(lt, lv, true, true));
      $ls.val(lv);
    }
    initSelect2($last);

    $clone.find('input, select').each(function () {
      var $i = $(this), nm = $i.attr('name') || '';
      if (nm === 'line_id[]') $i.val('');
      else if ($i.hasClass('js-prev') || $i.hasClass('js-remain') || $i.hasClass('js-dept')) $i.val('');
      else if ($i.is('select')) {
        if ($i.hasClass('js-bank')) $i.html('<option value="0">—</option>' + bankOptionsHtml);
        else if ($i.hasClass('js-cash-type')) $i.val('Cash');
        else $i.empty();
      } else $i.val('');
    });

    $clone.appendTo('#bulk-rows');
    renumberLines();
    initRowEvents($clone);
    recalcTotals();
    $clone.find('.js-staff-id').focus();
  });

  /* ── Global shortcuts ────────────────────────────────────── */

  $(document).on('keydown', function (e) {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
      e.preventDefault();
      $('#bulk-form').submit();
    }
  });
  $('#bulk-form').on('keydown', function (e) {
    if (e.key === 'Enter' && !$(e.target).is('textarea')) e.preventDefault();
  });
});
</script>
{% endblock %}