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

{% block title %}{{ is_edit|yesno:"Edit,New" }} Bank Note{% endblock %}
{% block heading %}{% endblock %}

{% block stylesheets %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
  --bn-accent:      #185FA5;
  --bn-accent-bg:   #E6F1FB;
  --bn-recv:        #0F6E56;
  --bn-recv-bg:     #E1F5EE;
  --bn-recv-light:  #9FE1CB;
  --bn-pay:         #993C1D;
  --bn-pay-bg:      #FAECE7;
  --bn-pay-light:   #F5C4B3;
  --bn-radius:      10px;
  --bn-input-h:     42px;
  --bn-mono:        'IBM Plex Mono', monospace;
}

/* ── PAGE SHELL ─────────────────────────────────────── */
.bn-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 12px 0 40px;
  font-family: inherit;
}

/* ── HEADER BAR ─────────────────────────────────────── */
.bn-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.bn-header-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--bn-accent-bg);
  color: var(--bn-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.bn-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.3px;
}
.bn-header-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 1px;
}
.bn-kbd-hint {
  margin-left: auto;
  font-size: 11px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kbadge {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: var(--bn-mono);
  background: #f9fafb;
  color: #374151;
}

/* ── CARD ────────────────────────────────────────────── */
.bn-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--bn-radius);
  overflow: hidden;
}
.bn-section {
  padding: 18px 22px;
  border-bottom: 1px solid #f3f4f6;
}
.bn-section:last-child { border-bottom: none; }
.bn-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9ca3af;
  margin-bottom: 12px;
}

/* ── DIRECTION TOGGLE ────────────────────────────────── */
.dir-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.dir-toggle input { display: none; }
.dir-toggle label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background .15s, color .15s;
  background: #f9fafb;
  color: #9ca3af;
}
.dir-toggle input:checked + label.recv {
  background: var(--bn-recv-bg);
  color: var(--bn-recv);
}
.dir-toggle input:checked + label.pay {
  background: var(--bn-pay-bg);
  color: var(--bn-pay);
}

/* ── FORM INPUTS ─────────────────────────────────────── */
.bn-field { display: flex; flex-direction: column; gap: 5px; }
.bn-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
}
.bn-input {
  height: var(--bn-input-h);
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #111827;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  box-sizing: border-box;
}
.bn-input:focus {
  border-color: var(--bn-accent);
  box-shadow: 0 0 0 3px rgba(24,95,165,.12);
}
.bn-input-amount {
  font-family: var(--bn-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: right;
  padding-right: 14px;
  height: 54px;
  color: #111827;
}
.bn-input-amount:focus { border-color: var(--bn-accent); }

.bn-select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }

/* ── GRID ROWS ───────────────────────────────────────── */
.bn-row { display: grid; gap: 14px; }
.bn-row-2 { grid-template-columns: 1fr 1fr; }
.bn-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.bn-row-4 { grid-template-columns: 200px 1fr 160px 130px; }

/* ── BALANCE CHIP ────────────────────────────────────── */
.balance-wrap {
  position: relative;
}
.balance-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--bn-mono);
  padding: 2px 8px;
  border-radius: 20px;
  pointer-events: none;
}
.balance-badge.positive { background: var(--bn-recv-bg); color: var(--bn-recv); }
.balance-badge.negative { background: var(--bn-pay-bg);  color: var(--bn-pay); }
.balance-badge.zero     { background: #f3f4f6; color: #9ca3af; }
.balance-input-with-badge { padding-right: 100px !important; }

/* ── PARTY ROW ───────────────────────────────────────── */
.bn-party-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
}

/* ── FOCUS INDICATOR ─────────────────────────────────── */
.field-focused > .bn-label { color: var(--bn-accent); }

/* ── AMOUNT SECTION ──────────────────────────────────── */
.amount-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.amount-side {
  padding: 18px 22px;
}
.amount-side + .amount-side {
  border-left: 1px solid #f3f4f6;
}
.amount-display {
  font-family: var(--bn-mono);
  font-size: 32px;
  font-weight: 600;
  margin-top: 4px;
  min-height: 44px;
  color: #111827;
  letter-spacing: .02em;
}
.amount-display.recv-color { color: var(--bn-recv); }
.amount-display.pay-color  { color: var(--bn-pay); }

/* ── FOOTER ──────────────────────────────────────────── */
.bn-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 var(--bn-radius) var(--bn-radius);
}
.btn-bn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.btn-bn:active { transform: scale(.98); }
.btn-bn-primary { background: var(--bn-accent); color: #fff; }
.btn-bn-primary:hover { opacity: .9; }
.btn-bn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}
.btn-bn-secondary:hover { background: #f9fafb; }
.btn-bn-danger {
  background: #fff;
  color: var(--bn-pay);
  border: 1px solid var(--bn-pay-light);
  margin-left: auto;
}
.btn-bn-danger:hover { background: var(--bn-pay-bg); }
.btn-kbs {
  font-size: 10px;
  font-family: var(--bn-mono);
  background: rgba(24,95,165,.08);
  color: var(--bn-accent);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 2px;
}

/* ── STATUS STRIP ────────────────────────────────────── */
.bn-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  margin-bottom: 14px;
  display: none;
}
.bn-status.show { display: flex; }
.bn-status.error { background: var(--bn-pay-bg); color: var(--bn-pay); }
.bn-status.success { background: var(--bn-recv-bg); color: var(--bn-recv); }

/* ── SELECT2 OVERRIDE ────────────────────────────────── */
.select2-container--default .select2-selection--single {
  height: var(--bn-input-h) !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--bn-accent) !important;
  box-shadow: 0 0 0 3px rgba(24,95,165,.12) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 32px 0 12px !important;
  color: #111827 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: var(--bn-input-h) !important;
}
.select2-container { width: 100% !important; }
.select2-dropdown { border: 1.5px solid var(--bn-accent) !important; border-radius: 8px !important; box-shadow: 0 4px 24px rgba(0,0,0,.10) !important; }
.select2-results__option { padding: 8px 12px !important; font-size: 13px !important; }
.select2-results__option--highlighted { background: var(--bn-accent-bg) !important; color: var(--bn-accent) !important; }
.select2-search__field { border: 1px solid #e5e7eb !important; border-radius: 6px !important; padding: 6px 10px !important; font-size: 13px !important; }

/* ── SHORTCUT LEGEND ─────────────────────────────────── */
.shortcut-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sc-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #9ca3af;
}

/* Disabled state */
select:disabled, input:disabled { background: #f9fafb !important; color: #9ca3af !important; cursor: not-allowed; }
</style>
{% endblock %}

{% block content %}
<div class="bn-page">

  <!-- Status strip (JS-driven) -->
  <div id="bn-status" class="bn-status"></div>

  <!-- Header -->
  <div class="bn-header">
    <div class="bn-header-icon">
      <i class="fas fa-university"></i>
    </div>
    <div>
      <h2>{{ is_edit|yesno:"Edit Bank Note,New Bank Note" }}</h2>
      <div class="bn-header-sub">Bank Receive / Pay &nbsp;·&nbsp; {{ is_edit|yesno:"Editing existing entry,Create new entry" }}</div>
    </div>
    <div class="bn-kbd-hint">
      <i class="fas fa-keyboard" style="font-size:13px"></i>
      Keyboard nav active
    </div>
  </div>

  <form method="post" id="bank-note-form" autocomplete="off">
    {% csrf_token %}
    <div class="bn-card">

      <!-- SECTION 1: Direction -->
      <div class="bn-section">
        <div class="bn-section-label">Direction</div>
        <div class="dir-toggle" id="dir-toggle">
          <input type="radio" id="dir_recv" name="direction" value="receive"
                 {% if not is_edit or edit_direction == 'receive' %}checked{% endif %}>
          <label class="recv" for="dir_recv" tabindex="0">
            <i class="fas fa-arrow-circle-down"></i> Receive
          </label>

          <input type="radio" id="dir_pay" name="direction" value="pay"
                 {% if is_edit and edit_direction == 'pay' %}checked{% endif %}>
          <label class="pay" for="dir_pay" tabindex="0">
            <i class="fas fa-arrow-circle-up"></i> Pay
          </label>
        </div>
        <div style="margin-top:8px; font-size:12px; color:#9ca3af; display:flex; align-items:center; gap:6px;">
          <i class="fas fa-info-circle"></i>
          <span id="dir_hint"></span>
          &nbsp;<span class="kbadge">R</span> Receive &nbsp;<span class="kbadge">P</span> Pay
        </div>
      </div>

      <!-- SECTION 2: Party -->
      <div class="bn-section">
        <div class="bn-section-label">Account / Party</div>
        <div class="bn-party-row">
          <div class="bn-field" id="field-party-type">
            <label class="bn-label" for="party_type">Account Type</label>
            <select id="party_type" name="party_type" class="bn-input bn-select"
                    {% if is_edit %}disabled{% endif %}
                    data-taborder="1">
              {% for pt in party_types %}
                <option value="{{ pt }}" {% if edit_party_type == pt or not is_edit and forloop.first %}selected{% endif %}>{{ pt|title }}</option>
              {% endfor %}
            </select>
            {% if is_edit %}<input type="hidden" name="party_type" value="{{ edit_party_type }}">{% endif %}
          </div>

          <div class="bn-field" id="field-party">
            <label class="bn-label" for="party_select">Party / Account Name</label>
            <select id="party_select" name="party_id" style="width:100%" required data-taborder="2">
              {% if is_edit %}
                <option value="{{ edit_party_id }}" selected>{{ edit_party_name }}</option>
              {% endif %}
            </select>
          </div>
        </div>

        <!-- Balance row -->
        <div style="margin-top:12px;">
          <div class="bn-field">
            <label class="bn-label">Current Party Balance</label>
            <div class="balance-wrap">
              <input type="text" id="party_balance" class="bn-input balance-input-with-badge" readonly value="" placeholder="Select a party to see balance…">
              <span id="balance-badge" class="balance-badge zero" style="display:none">—</span>
            </div>
          </div>
        </div>
      </div>

      <!-- SECTION 3: Amount & Bank & Date -->
      <div class="bn-section">
        <div class="bn-section-label">Transaction Details</div>
        <div class="bn-row bn-row-4">
          <div class="bn-field" id="field-amount">
            <label class="bn-label" for="amount">Amount (PKR)</label>
            <input type="number" step="0.01" min="0.01" id="amount" name="amount"
                   class="bn-input bn-input-amount"
                   value="{% if is_edit %}{{ edit_abs_amount|default_if_none:'' }}{% endif %}"
                   required placeholder="0.00" data-taborder="3">
          </div>

          <div class="bn-field" id="field-bank">
            <label class="bn-label" for="bank_name">Bank Account</label>
            <select id="bank_name" name="bank_name" class="bn-input bn-select" required data-taborder="4">
              <option value="">-- Select --</option>
              {% for b in bank_accounts %}
                <option value="{{ b.t_id }}"
                  {% if payment and payment.bank_id == b.t_id %}selected{% endif %}>{{ b.name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="bn-field" id="field-saleman">
            <label class="bn-label" for="saleman_operator">Handled By</label>
            <select id="saleman_operator" name="saleman_operator" class="bn-input bn-select" data-taborder="5">
              <option value="">-- Select --</option>
              {% for s in salemen %}
                <option value="{{ s.t_id }}"
                  {% if payment and payment.saleman_name == s.t_id %}selected{% endif %}>{{ s.name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="bn-field" id="field-date">
            <label class="bn-label" for="trx_date">Date</label>
            <input type="date" id="trx_date" name="trx_date"
                   class="bn-input"
                   value="{{ payment.transaction_date|default:today|date:'Y-m-d' }}"
                   data-taborder="6">
          </div>
        </div>

        <!-- Remarks -->
        <div class="bn-field" style="margin-top:14px;" id="field-remarks">
          <label class="bn-label" for="description">Remarks / Description</label>
          <input type="text" id="description" name="description" class="bn-input"
                 value="{{ payment.bill_title_descp|default:'' }}"
                 placeholder="Optional remarks…" data-taborder="7">
        </div>
      </div>

      <!-- SECTION 4: Live summary -->
      <div class="amount-section">
        <div class="amount-side">
          <div class="bn-section-label">Transaction Amount</div>
          <div id="summary-amount" class="amount-display">—</div>
        </div>
        <div class="amount-side">
          <div class="bn-section-label">Summary</div>
          <div id="summary-text" style="font-size:13px; color:#6b7280; margin-top:4px; line-height:1.8;">
            Fill in the form above to preview the entry.
          </div>
        </div>
      </div>

      <!-- FOOTER -->
      <div class="bn-footer">
        <button type="submit" name="action" value="save" class="btn-bn btn-bn-primary" id="btn-save" data-taborder="8">
          <i class="fas fa-save"></i>
          {{ is_edit|yesno:"Update Note,Save Note" }}
          <span class="btn-kbs">Ctrl+S</span>
        </button>
        <a href="{% url 'transactions:bank_note_add' %}" class="btn-bn btn-bn-secondary" data-taborder="9">
          <i class="fas fa-times"></i> Cancel
        </a>

        {% if is_edit %}
        <button type="button" id="deleteBtn" class="btn-bn btn-bn-danger" data-taborder="10">
          <i class="fas fa-trash"></i> Delete
          <span class="btn-kbs">Del</span>
        </button>
        {% endif %}

        <!-- Keyboard shortcuts legend -->
        <div class="bn-kbd-hint" style="margin-left:auto;">
          <span class="sc-item"><span class="kbadge">Tab</span> Next field</span>
          <span class="sc-item"><span class="kbadge">Shift+Tab</span> Prev</span>
          <span class="sc-item"><span class="kbadge">Ctrl+S</span> Save</span>
          {% if is_edit %}<span class="sc-item"><span class="kbadge">Del</span> Delete</span>{% endif %}
        </div>
      </div>

    </div>
  </form>

  {% if is_edit %}
  <form method="post" id="delete-form"
        action="{% url 'transactions:bank_note_delete' edit_party_type payment.description %}" style="display:none">
    {% csrf_token %}
  </form>
  {% endif %}

</div>
{% endblock %}

{% block javascripts %}
<script>
/* ── Utilities ───────────────────────────────────────── */
function getCookie(n){
  let v=null;
  document.cookie.split(';').forEach(c=>{
    let [k,val]=c.trim().split('=');
    if(k===n) v=decodeURIComponent(val);
  });
  return v;
}
const csrftoken = getCookie('csrftoken') || '{{ csrf_token }}';

function fmtAmt(v){
  const n = parseFloat(v);
  if(isNaN(n)||n===0) return '—';
  return n.toLocaleString('en-PK',{minimumFractionDigits:2,maximumFractionDigits:2});
}

function showStatus(msg, type){
  const el = document.getElementById('bn-status');
  el.className = 'bn-status show ' + type;
  el.innerHTML = `<i class="fas fa-${type==='error'?'exclamation-circle':'check-circle'}"></i> ${msg}`;
  if(type==='success') setTimeout(()=>{ el.classList.remove('show'); }, 2800);
}

/* ── Field focus highlight ───────────────────────────── */
document.querySelectorAll('.bn-field').forEach(f=>{
  const inp = f.querySelector('input,select');
  if(!inp) return;
  inp.addEventListener('focus',  ()=>f.classList.add('field-focused'));
  inp.addEventListener('blur',   ()=>f.classList.remove('field-focused'));
});

/* ── Direction toggle ────────────────────────────────── */
function updateDirHint(){
  const recv = document.getElementById('dir_recv').checked;
  document.getElementById('dir_hint').textContent =
    recv ? 'Money INTO selected bank account.' : 'Money OUT of selected bank account.';
  const amt = document.getElementById('summary-amount');
  const cls = recv ? 'recv-color' : 'pay-color';
  amt.className = 'amount-display ' + cls;
  updateSummary();
}
document.querySelectorAll('input[name=direction]').forEach(r=>r.addEventListener('change', updateDirHint));

/* dir-toggle labels: keyboard activatable */
document.querySelectorAll('.dir-toggle label').forEach(lbl=>{
  lbl.addEventListener('keydown', e=>{
    if(e.key===' '||e.key==='Enter'){
      e.preventDefault();
      document.getElementById(lbl.getAttribute('for')).click();
    }
  });
});

/* ── Live summary ────────────────────────────────────── */
function updateSummary(){
  const recv  = document.getElementById('dir_recv').checked;
  const amt   = parseFloat(document.getElementById('amount').value||0);
  const bank  = document.getElementById('bank_name');
  const party = document.getElementById('party_select');
  const bName = bank.options[bank.selectedIndex]?.text || '—';
  const pName = (party.select2?.()?party.select2('data')[0]?.text:party.options[party.selectedIndex]?.text) || '—';

  document.getElementById('summary-amount').textContent = amt>0 ? fmtAmt(amt) : '—';

  const lines = [
    `<b>Direction:</b> ${recv?'<span style="color:var(--bn-recv)">Receive</span>':'<span style="color:var(--bn-pay)">Pay</span>'}`,
    `<b>Bank:</b> ${bName}`,
    `<b>Party:</b> ${pName}`,
    `<b>Flow:</b> ${recv?'Bank ← Party':'Bank → Party'}`,
  ];
  document.getElementById('summary-text').innerHTML = lines.join('<br>');
}

document.getElementById('amount').addEventListener('input', updateSummary);
document.getElementById('bank_name').addEventListener('change', updateSummary);

/* ── Balance badge ───────────────────────────────────── */
function currentType(){
  return '{{ edit_party_type }}' || document.getElementById('party_type').value;
}

function setBalance(val){
  const n = parseFloat(val||0);
  const inp = document.getElementById('party_balance');
  const badge = document.getElementById('balance-badge');
  inp.value = fmtAmt(n);
  badge.style.display = '';
  badge.textContent = n>0 ? '▲ '+fmtAmt(n) : (n<0 ? '▼ '+fmtAmt(Math.abs(n)) : 'Zero');
  badge.className = 'balance-badge ' + (n>0?'positive':n<0?'negative':'zero');
}

/* ── Select2 init ────────────────────────────────────── */
$(function(){
  const $party  = $('#party_select');

  function initSelect2(){
    if($party.hasClass('select2-hidden-accessible')) $party.select2('destroy');
    $party.select2({
      placeholder: 'Type to search party…',
      allowClear: true,
      minimumInputLength: 1,
      dropdownParent: $('.bn-card'),
      ajax: {
        url: "{% url 'transactions:bank_note_party_search' %}",
        type: 'POST',
        delay: 180,
        headers: { 'X-CSRFToken': csrftoken },
        data: params => ({ term: params.term, party_type: currentType() }),
        processResults: data => data
      },
      templateResult: function(r){
        if(r.loading) return r.text;
        const bal = (r.balance!=null) ? parseFloat(r.balance) : 0;
        const name = (r.text||'').replace(/\w\S*/g, w=>w[0].toUpperCase()+w.slice(1).toLowerCase());
        const addr = (r.address||'').trim();
        const balColor = bal>0?'#0F6E56':bal<0?'#993C1D':'#9ca3af';
        const balFmt   = fmtAmt(Math.abs(bal));
        const balLbl   = bal>0?'▲':bal<0?'▼':'';
        return $(
          '<div style="padding:6px 0;line-height:1.5;">'+
            '<div style="display:flex;justify-content:space-between;align-items:center;gap:8px;">'+
              '<span style="font-weight:700;color:#111;font-size:14px;">'+name+'</span>'+
              '<span style="font-size:12px;font-weight:700;color:'+balColor+';font-family:\'IBM Plex Mono\',monospace;white-space:nowrap;">'+balLbl+' '+balFmt+'</span>'+
            '</div>'+
            (addr?'<div style="font-size:11px;color:#9ca3af;margin-top:2px;">'+addr+'</div>':'')+
          '</div>'
        );
      },
      templateSelection: r => r.text || r.id
    });
    $party.trigger('change.select2');
  }
  initSelect2();

  /* On party select */
  $party.on('select2:select', function(e){
    const tid = e.params.data.id;
    $.getJSON("{% url 'transactions:bank_note_party_balance' %}",
      { party_type: currentType(), party_id: tid })
      .done(d=>setBalance(d.balance));
    updateSummary();
    setTimeout(()=>{ document.getElementById('amount').select(); }, 60);
  });
  $party.on('select2:clear', function(){
    document.getElementById('party_balance').value='';
    document.getElementById('balance-badge').style.display='none';
    updateSummary();
  });

  /* Party type change */
  {% if not is_edit %}
  document.getElementById('party_type').addEventListener('change', function(){
    $party.val(null).trigger('change');
    document.getElementById('party_balance').value='';
    document.getElementById('balance-badge').style.display='none';
    initSelect2();
  });
  {% endif %}

  /* Pre-fill balance on edit */
  {% if is_edit %}
  $.getJSON("{% url 'transactions:bank_note_party_balance' %}",
    { party_type: currentType(), party_id: {{ edit_party_id|default:0 }} })
    .done(d=>setBalance(d.balance));
  {% endif %}

  /* Init summary + hint */
  updateDirHint();
  updateSummary();

  /* Default date */
  const today = new Date().toISOString().split('T')[0];
  if(!document.getElementById('trx_date').value)
    document.getElementById('trx_date').value = today;

  /* ── Delete button ─────────────────────────────────── */
  {% if is_edit %}
  document.getElementById('deleteBtn').addEventListener('click', function(){
    if(confirm('Delete this note?\n\nGL reversal entry create hogi — ledger clean rahega.\n\nConfirm karna chahte hain?'))
      document.getElementById('delete-form').submit();
  });
  {% endif %}

  /* ── Keyboard navigation ───────────────────────────── */
  const tabOrder = [
    'party_type','party_select','amount','bank_name',
    'saleman_operator','trx_date','description'
  ];

  /* Enter key: move to next field */
  document.getElementById('bank-note-form').addEventListener('keydown', function(e){
    if(e.key==='Enter' && e.target.tagName!=='BUTTON' && e.target.tagName!=='A'){
      const cur = e.target.id || '';
      const idx = tabOrder.indexOf(cur);
      if(idx>=0 && idx<tabOrder.length-1){
        e.preventDefault();
        const nextId = tabOrder[idx+1];
        if(nextId==='party_select'){
          $party.select2('open');
        } else {
          const next = document.getElementById(nextId);
          if(next) next.focus();
        }
      } else if(idx===tabOrder.length-1){
        e.preventDefault();
        document.getElementById('btn-save').focus();
      }
    }

    /* Ctrl+S → Save */
    if((e.ctrlKey||e.metaKey) && e.key==='s'){
      e.preventDefault();
      document.getElementById('bank-note-form').requestSubmit
        ? document.getElementById('bank-note-form').requestSubmit(document.getElementById('btn-save'))
        : document.getElementById('btn-save').click();
    }

    {% if is_edit %}
    /* Delete key on delete button → confirm */
    if(e.key==='Delete' && e.target.id==='deleteBtn'){
      document.getElementById('deleteBtn').click();
    }
    {% endif %}

    /* R/P shortcut for direction (when not typing in a text input) */
    const tag = e.target.tagName;
    if(tag!=='INPUT' && tag!=='TEXTAREA'){
      if(e.key==='r'||e.key==='R'){
        document.getElementById('dir_recv').click(); e.preventDefault();
      }
      if(e.key==='p'||e.key==='P'){
        document.getElementById('dir_pay').click(); e.preventDefault();
      }
    }
  });

  /* Amount: select all on focus for quick overwrite */
  document.getElementById('amount').addEventListener('focus', function(){ this.select(); });

  /* Tab on party_select: focus next field after select2 close */
  $party.on('select2:close', function(){
    setTimeout(()=>{
      const af = document.activeElement;
      if(af && af.classList.contains('select2-search__field')){
        document.getElementById('amount').focus();
      }
    }, 80);
  });

  /* Form submit: prevent double */
  document.getElementById('bank-note-form').addEventListener('submit', function(){
    const btn = document.getElementById('btn-save');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving…';
  });

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