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

{% block title %}
  {% if is_edit %}Edit{% else %}Add{% endif %} Bulk Customer Credit
{% 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);
  }

  .filter-bar {
      background: #f8f9fc; border: 1px solid #e2e8f0;
      border-radius: 8px; padding: 12px 16px; margin-bottom: 12px;
  }
  .filter-bar label { font-size: .78rem; font-weight: 600; color: #4a5568; }
  .btn-filter-search {
      background: #1170c6; color: #fff; border: none;
      font-weight: 600; font-size: .82rem; padding: 5px 18px;
      border-radius: 6px; transition: .2s;
  }
  .btn-filter-search:hover { background: #0d5aa7; color: #fff; }
  .filter-count { font-size: .75rem; color: #718096; margin-left: 8px; }

  .js-credit { background: #f0fdf4 !important; }
  .js-credit:focus { background: #dcfce7 !important; }

  /* ===== Select2 width bigger ===== */
  .bulk-table .select2-container {
      min-width: 320px !important;
      width: 100% !important;
  }

  .select2-container--open .select2-dropdown {
      min-width: 420px !important;
  }

  .select2-results__option .cust-name {
      font-weight: 600;
      color: #2d3748;
      display: block;
  }

  .select2-results__option .cust-address {
      font-size: 11px;
      color: #718096;
      display: block;
      margin-top: 2px;
      white-space: normal;
      line-height: 1.3;
  }

  .select2-selection__rendered .cust-address-inline {
      color: #718096;
      font-size: 11px;
      margin-left: 6px;
  }

  /* normal rows */
  .select2-container--bootstrap4 .select2-results__option,
  .select2-results__option {
      background: #ffffff !important;
      color: #000000 !important;
      font-weight: 400 !important;
  }

  .select2-container--bootstrap4 .select2-results__option .cust-name,
  .select2-container--bootstrap4 .select2-results__option .cust-address,
  .select2-results__option .cust-name,
  .select2-results__option .cust-address {
      color: #000000 !important;
      font-weight: 400 !important;
  }

  /* hover / highlighted row */
  .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
  .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected="true"],
  .select2-results__option--highlighted[aria-selected],
  .select2-results__option--highlighted[aria-selected="true"] {
      background: #0d5aa7 !important;
      color: #ffffff !important;
      font-weight: 700 !important;
  }

  .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] .cust-name,
  .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] .cust-address,
  .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected="true"] .cust-name,
  .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected="true"] .cust-address,
  .select2-results__option--highlighted[aria-selected] .cust-name,
  .select2-results__option--highlighted[aria-selected] .cust-address,
  .select2-results__option--highlighted[aria-selected="true"] .cust-name,
  .select2-results__option--highlighted[aria-selected="true"] .cust-address {
      color: #ffffff !important;
      font-weight: 700 !important;
  }

  /* selected row in dropdown */
  .select2-container--bootstrap4 .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted),
  .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
      background: #eaf4ff !important;
      color: #000000 !important;
      font-weight: 600 !important;
  }

  .select2-container--bootstrap4 .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .cust-name,
  .select2-container--bootstrap4 .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .cust-address,
  .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .cust-name,
  .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .cust-address {
      color: #000000 !important;
      font-weight: 600 !important;
  }

  /* Address column styling */
  .js-address {
      font-size: 0.75rem;
      color: #4a5568;
      background: #f7fafc !important;
  }

</style>
{% endblock %}

{% block heading %}
  {% if is_edit %}Edit{% else %}Add{% endif %} Bulk Customer Credit
{% 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">Credit 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-3 col-sm-6">
        <label class="mb-1">Order Booker</label>
        <select id="filter-booker" class="form-control form-control-sm">
          <option value="">— All Bookers —</option>
          {% for ob in order_bookers %}
            <option value="{{ ob.t_id }}">{{ ob.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-3 col-sm-6">
        <label class="mb-1">Sale Area</label>
        <select id="filter-area" class="form-control form-control-sm">
          <option value="">— All Areas —</option>
          {% for a in sale_areas %}
            <option value="{{ a.t_id }}">{{ a.area_name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-3 col-sm-6 mt-2 mt-md-0">
        <button type="button" id="btn-filter-search" class="btn btn-filter-search">
          <i class="fas fa-search mr-1"></i>Load Customers
        </button>
        <span class="filter-count" id="filter-count"></span>
      </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:60px;">Line</th>
          <th style="width:85px;">Cust&nbsp;ID</th>
          <th style="width:220px;">Customer&nbsp;Name</th>
          <th style="width:180px;">Address</th>
          <th style="width:110px;">Previous</th>
          <th style="width:120px;">Credit&nbsp;Amount</th>
          <th style="width:110px;">New&nbsp;Balance</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="customer_id[]"
                       class="form-control form-control-sm bulk-field js-cust-id"
                       value="{{ ln.customer_id }}">
              </td>
              <td>
                <select name="customer_name[]"
                        class="form-control form-control-sm bulk-field js-cust-select">
                  {% if ln.customer_obj %}
                    <option value="{{ ln.customer_obj.t_id }}" selected>{{ ln.customer_obj.name }}</option>
                  {% else %}
                    <option value="" selected>—</option>
                  {% endif %}
                </select>
              </td>
              <td>
                <input type="text" name="address[]"
                       class="form-control form-control-sm js-address"
                       value="{{ ln.customer_obj.address|default:'' }}" 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="credit_amount[]"
                       class="form-control form-control-sm bulk-field js-credit"
                       value="{{ ln.credit_amount }}">
              </td>
              <td>
                <input type="number" step="0.01" name="new_balance[]"
                       class="form-control form-control-sm js-newbal" readonly
                       value="{{ ln.new_balance_snapshot }}">
              </td>
              <input type="hidden" name="bank_id[]" value="0">
              <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="customer_id[]"
                       class="form-control form-control-sm bulk-field js-cust-id"></td>
            <td><select name="customer_name[]"
                        class="form-control form-control-sm bulk-field js-cust-select"></select></td>
            <td><input type="text" name="address[]"
                       class="form-control form-control-sm js-address" 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="credit_amount[]"
                       class="form-control form-control-sm bulk-field js-credit"></td>
            <td><input type="number" step="0.01" name="new_balance[]"
                       class="form-control form-control-sm js-newbal" readonly></td>
            <input type="hidden" name="bank_id[]" value="0">
            <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 Credit:</th>
          <th><input type="text" id="total-credit" class="form-control form-control-sm" readonly></th>
          <th colspan="3"></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 Credit
      </button>
      <a href="{% url 'transactions:bulk_credit_list' %}" class="btn btn-secondary btn-sm">
        Back to Credit 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 credit = parseFloat($row.find('.js-credit').val()) || 0;
    $row.find('.js-newbal').val((prev + credit).toFixed(2));
  }

  function recalcTotals() {
    let t = 0;
    $('#bulk-rows .bulk-row').each(function () {
      t += parseFloat($(this).find('.js-credit').val()) || 0;
    });
    $('#total-credit').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) + ' ');
    });
  }

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

  function createRow(lineNum, custId, custName, prevBalance, custAddress) {
    const bal = parseFloat(prevBalance) || 0;
    const addr = custAddress || '';
    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="customer_id[]"
                   class="form-control form-control-sm bulk-field js-cust-id"
                   value="${custId || ''}"></td>
        <td><select name="customer_name[]"
                    class="form-control form-control-sm bulk-field js-cust-select">
              ${custId ? '<option value="'+custId+'" selected>'+( custName||'' )+'</option>' : ''}
            </select></td>
        <td><input type="text" name="address[]"
                   class="form-control form-control-sm js-address"
                   value="${addr}" readonly></td>
        <td><input type="number" step="0.01" name="prev_balance[]"
                   class="form-control form-control-sm bulk-field js-prev"
                   value="${custId ? bal.toFixed(2) : ''}" readonly></td>
        <td><input type="number" step="0.01" name="credit_amount[]"
                   class="form-control form-control-sm bulk-field js-credit" value=""></td>
        <td><input type="number" step="0.01" name="new_balance[]"
                   class="form-control form-control-sm js-newbal"
                   value="${custId ? bal.toFixed(2) : ''}" readonly></td>
        <input type="hidden" name="bank_id[]" value="0">
        <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 ─────────────────────────────────────────────── */

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

    function formatCustomer(item) {
      if (!item.id) {
        return item.text || item.label || '';
      }

      const name = item.text || item.label || '';
      const address = item.address || '';

      return $(`
        <div>
          <span class="cust-name">${name}</span>
          ${address ? `<span class="cust-address">${address}</span>` : ''}
        </div>
      `);
    }

    function formatCustomerSelection(item) {
      if (!item.id) {
        return item.text || item.label || '';
      }

      const name = item.text || item.label || '';
      const address = item.address || '';

      if (address) {
        return $(`
          <span>
            ${name}
            <span class="cust-address-inline">(${address})</span>
          </span>
        `);
      }
      return name;
    }

    $sel.select2({
      theme: 'bootstrap4',
      placeholder: 'Search customer…',
      allowClear: true,
      minimumInputLength: 1,
      width: '100%',
      dropdownAutoWidth: true,
      templateResult: formatCustomer,
      templateSelection: formatCustomerSelection,
      escapeMarkup: function(markup) { return markup; },
      ajax: {
        url: "{% url 'customers:get_customers' %}",
        type: 'POST',
        delay: 250,
        data: function(p){ return {term:p.term}; },
        headers: {'X-CSRFToken': csrftoken},
        processResults: function(d){
          return {
            results: d.map(function(item){
              return {
                id: item.id || item.value,
                text: item.text || item.label || '',
                label: item.label || item.text || '',
                address: item.address || '',
                balance: item.balance || 0
              };
            })
          };
        }
      }
    });

    $sel.off('select2:select').on('select2:select', function(e){
      const d = e.params.data, $r = $(this).closest('.bulk-row');
      $r.find('.js-cust-id').val(d.id);
      $r.find('.js-address').val(d.address || '');
      $r.find('.js-prev').val(d.balance || 0);
      recalcRow($r);
      $r.find('.js-credit').focus();
    });

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

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

  function initRowEvents($row) {

    // Cust ID: Enter → load or open select2
    $row.find('.js-cust-id').off('keydown.cid').on('keydown.cid', function(e){
      if (e.key !== 'Enter') return;
      e.preventDefault();
      const val = ($(this).val()||'').trim();
      if (!val) {
        const $s = $(this).closest('.bulk-row').find('.js-cust-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 'customers:get_customers_with_tid' %}",
        type:'POST', headers:{'X-CSRFToken':csrftoken},
        data:{term:val},
        success:function(data){
          const r = data.find(function(x){ return x.value==val || x.id==val; });
          if(r){
            const $r = $inp.closest('.bulk-row'),
                  $s = $r.find('.js-cust-select');

            const option = new Option(r.label || r.text, r.value || r.id, false, true);
            $(option).attr('data-address', r.address || '');

            $s.append(option).trigger('change');

            const selectedData = {
              id: r.value || r.id,
              text: r.label || r.text || '',
              label: r.label || r.text || '',
              address: r.address || '',
              balance: r.balance || 0
            };
            $s.trigger({
              type: 'select2:select',
              params: { data: selectedData }
            });

            $r.find('.js-address').val(r.address || '');
            $r.find('.js-prev').val(r.balance || 0);
            recalcRow($r);
            $r.find('.js-credit').focus();
          }
        }
      });
    });

    // Credit input → recalc
    $row.find('.js-credit').off('input').on('input', function(){
      recalcRow($(this).closest('.bulk-row'));
      recalcTotals();
    });

    // Remove 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();
      }
    });

    // Keyboard navigation
    $row.find('.bulk-field').off('keydown.nav').on('keydown.nav', function(e){

      // Credit: Enter → next row Credit, else next field
      if (e.key==='Enter' && $(this).hasClass('js-credit')) {
        e.preventDefault();
        var $nr = $(this).closest('.bulk-row').next('.bulk-row');
        if ($nr.length) {
          $nr.find('.js-credit').focus();
        } else {
          var $ff=$('#bulk-rows .bulk-row .bulk-field'), i=$ff.index(this), n=$ff.get(i+1);
          if(n) n.focus();
        }
        return;
      }
      // Last field (note): Enter → new row if last row
      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-cust-id').focus();
        }
        return;
      }
      // Arrow Down
      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;
      }
      // Arrow Up
      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);
  }


  /* ── Booker → Area dynamic filter ────────────────────────── */

  var allAreaOptions = $('#filter-area').html();

  $('#filter-booker').on('change', function () {
    var bookerId = $(this).val();
    var $area = $('#filter-area');

    if (!bookerId) {
      $area.html(allAreaOptions);
      return;
    }

    $.ajax({
      url: "{% url 'transactions:ajax_areas_for_booker' %}",
      type: 'POST',
      headers: { 'X-CSRFToken': csrftoken },
      data: { booker_id: bookerId },
      success: function (data) {
        $area.empty().append('<option value="">— All Areas —</option>');
        data.forEach(function (a) {
          $area.append('<option value="' + a.id + '">' + a.text + '</option>');
        });
      },
      error: function () {
        $area.html(allAreaOptions);
      }
    });
  });


  /* ── Filter Search ───────────────────────────────────────── */

  $('#btn-filter-search').on('click', function(){
    const aId = $('#filter-area').val(), bId = $('#filter-booker').val();
    if (!aId && !bId) { alert('Select at least Area or Booker.'); return; }

    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_area_customers' %}",
      type:'POST', headers:{'X-CSRFToken':csrftoken},
      data:{area_id:aId, booker_id:bId},
      success:function(data){
        $btn.prop('disabled',false).html('<i class="fas fa-search mr-1"></i>Load Customers');
        if(!data.length){ alert('No customers found.'); $('#filter-count').text(''); return; }

        $('#bulk-rows .js-cust-select').each(function(){
          if($(this).data('select2')) $(this).select2('destroy');
        });
        $('#bulk-rows').empty();

        data.forEach(function(c, idx){
          var $r = createRow(idx+1, c.id, c.text, c.balance, c.address);
          $('#bulk-rows').append($r);
          initRowEvents($r);
        });
        recalcTotals();
        $('#filter-count').text(data.length+' customers loaded');

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

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

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

  // Auto-focus: open Select2 on first empty row's customer name
  setTimeout(function () {
    var $firstRow = $('#bulk-rows .bulk-row').first();
    if ($firstRow.length) {
      var $custId = $firstRow.find('.js-cust-id');
      if (!($custId.val() || '').trim()) {
        var $sel = $firstRow.find('.js-cust-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(),
        $ls   = $last.find('.js-cust-select'),
        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-newbal')||$i.hasClass('js-address')) $i.val('');
      else if($i.is('select')){
        if($i.hasClass('js-bank')) $i.val('0');
        else $i.empty();
      } else $i.val('');
    });

    $clone.appendTo('#bulk-rows');
    renumberLines();
    initRowEvents($clone);
    recalcTotals();
    $clone.find('.js-cust-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 %}