{% extends 'pos/base.html' %}

{% block stylesheets %}
<style>
  :root {
    --jv-bg: #f0f4f8;
    --jv-card: #ffffff;
    --jv-border: #dce3ec;
    --jv-accent: #2563eb;
    --jv-accent-light: #eff6ff;
    --jv-success: #16a34a;
    --jv-danger: #dc2626;
    --jv-warning: #d97706;
    --jv-text: #1e293b;
    --jv-muted: #64748b;
    --jv-dr-bg: #fff7ed;
    --jv-cr-bg: #f0fdf4;
    --jv-dr-border: #fed7aa;
    --jv-cr-border: #bbf7d0;
    --jv-row-hover: #f8fafc;
    --jv-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --jv-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  }

  body { background: var(--jv-bg); }

  .jv-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
  }

  /* ── Header ── */
  .jv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .jv-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--jv-text);
    letter-spacing: -0.3px;
  }
  .jv-title span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--jv-muted);
    margin-left: 10px;
  }

  /* ── Card ── */
  .jv-card {
    background: var(--jv-card);
    border: 1px solid var(--jv-border);
    border-radius: 10px;
    box-shadow: var(--jv-shadow);
    overflow: hidden;
  }

  /* ── Meta row (date, type, narration) ── */
  .jv-meta {
    display: grid;
    grid-template-columns: 160px 200px 1fr;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--jv-border);
    background: #fafbfc;
  }
  .jv-meta label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--jv-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 5px;
  }
  .jv-meta input,
  .jv-meta select {
    width: 100%;
    border: 1px solid var(--jv-border);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.875rem;
    color: var(--jv-text);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
  }
  .jv-meta input:focus,
  .jv-meta select:focus {
    border-color: var(--jv-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
  }

  /* ── Lines table ── */
  .jv-table-wrap { overflow-x: auto; }
  .jv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }
  .jv-table thead th {
    padding: 10px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--jv-muted);
    background: #f8fafc;
    border-bottom: 2px solid var(--jv-border);
    white-space: nowrap;
  }
  .jv-table thead th.th-dr { color: var(--jv-warning); }
  .jv-table thead th.th-cr { color: var(--jv-success); }

  .jv-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
  }
  .jv-table tbody tr:hover { background: var(--jv-row-hover); }
  .jv-table tbody td { padding: 8px 10px; vertical-align: middle; }

  /* ── Search field ── */
  .search-wrap { position: relative; }
  .search-input {
    width: 100%;
    border: 1px solid var(--jv-border);
    border-radius: 6px;
    padding: 7px 32px 7px 10px;
    font-size: 0.85rem;
    color: var(--jv-text);
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 260px;
  }
  .search-input:focus {
    border-color: var(--jv-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
  }
  .search-input.is-selected {
    background: var(--jv-accent-light);
    border-color: var(--jv-accent);
    color: var(--jv-accent);
    font-weight: 600;
  }
  .search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--jv-muted);
    font-size: 14px;
    display: none;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
  }
  .search-clear.visible { display: block; }
  .search-input.not-selected {
    border-color: #fca5a5;
    background: #fff5f5;
  }

  /* ── Dropdown ── */
  .search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 340px;
    background: #fff;
    border: 1px solid var(--jv-border);
    border-radius: 8px;
    box-shadow: var(--jv-shadow-md);
    z-index: 9999;
    max-height: 280px;
    overflow-y: auto;
    display: none;
  }
  .search-dropdown.open { display: block; }

  .dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid #f8fafc;
  }
  .dd-item:last-child { border-bottom: none; }
  .dd-item:hover, .dd-item.focused { background: var(--jv-accent-light); }

  .dd-icon {
    font-size: 1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
  }
  .dd-main { flex: 1; min-width: 0; }
  .dd-name {
    font-weight: 600;
    color: var(--jv-text);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dd-sub {
    font-size: 0.72rem;
    color: var(--jv-muted);
    margin-top: 1px;
  }
  .dd-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .badge-customer  { background: #dbeafe; color: #1d4ed8; }
  .badge-vendor    { background: #fce7f3; color: #be185d; }
  .badge-bank      { background: #d1fae5; color: #065f46; }
  .badge-staff     { background: #fef3c7; color: #92400e; }
  .badge-debitor   { background: #ede9fe; color: #5b21b6; }
  .badge-investor  { background: #fee2e2; color: #991b1b; }
  .badge-asset     { background: #e0f2fe; color: #0369a1; }
  .badge-liability { background: #fef9c3; color: #854d0e; }
  .badge-equity    { background: #f3e8ff; color: #6b21a8; }
  .badge-income    { background: #dcfce7; color: #14532d; }
  .badge-expense   { background: #ffedd5; color: #9a3412; }
  .badge-cogs      { background: #f1f5f9; color: #475569; }

  .dd-group-header {
    padding: 6px 12px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--jv-muted);
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
    position: sticky;
    top: 0;
  }
  .dd-empty {
    padding: 20px;
    text-align: center;
    color: var(--jv-muted);
    font-size: 0.82rem;
  }
  .dd-loading {
    padding: 14px;
    text-align: center;
    color: var(--jv-muted);
    font-size: 0.82rem;
  }

  /* ── Amount inputs ── */
  .amt-input {
    width: 110px;
    border: 1px solid var(--jv-border);
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 0.875rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
  }
  .amt-input.dr-input:focus {
    border-color: var(--jv-warning);
    background: var(--jv-dr-bg);
    box-shadow: 0 0 0 3px rgba(217,119,6,0.08);
  }
  .amt-input.cr-input:focus {
    border-color: var(--jv-success);
    background: var(--jv-cr-bg);
    box-shadow: 0 0 0 3px rgba(22,163,74,0.08);
  }
  .amt-input.has-value.dr-input {
    background: var(--jv-dr-bg);
    border-color: var(--jv-dr-border);
    font-weight: 600;
    color: #b45309;
  }
  .amt-input.has-value.cr-input {
    background: var(--jv-cr-bg);
    border-color: var(--jv-cr-border);
    font-weight: 600;
    color: var(--jv-success);
  }

  /* ── Narration input ── */
  .nar-input {
    width: 100%;
    border: 1px solid var(--jv-border);
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 0.82rem;
    outline: none;
    min-width: 120px;
  }
  .nar-input:focus {
    border-color: var(--jv-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
  }

  /* ── Delete button ── */
  .del-btn {
    background: none;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    font-size: 14px;
    line-height: 1;
  }
  .del-btn:hover { color: var(--jv-danger); background: #fee2e2; }

  /* ── Add line button ── */
  .add-line-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: none;
    border: 1.5px dashed var(--jv-border);
    border-radius: 6px;
    color: var(--jv-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    margin: 12px 16px;
  }
  .add-line-btn:hover {
    border-color: var(--jv-accent);
    color: var(--jv-accent);
    background: var(--jv-accent-light);
  }

  /* ── Totals footer ── */
  .jv-totals {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 2px solid var(--jv-border);
  }
  .totals-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--jv-muted);
    padding: 0 20px;
  }
  .totals-amt {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 110px;
    text-align: right;
    padding: 0 10px;
  }
  .totals-amt.dr { color: #b45309; }
  .totals-amt.cr { color: var(--jv-success); }

  /* ── Balance indicator ── */
  .balance-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--jv-border);
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s;
  }
  .balance-bar.balanced {
    background: #f0fdf4;
    color: var(--jv-success);
  }
  .balance-bar.unbalanced {
    background: #fff7ed;
    color: var(--jv-warning);
  }
  .balance-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .balanced .balance-dot { background: var(--jv-success); }
  .unbalanced .balance-dot { background: var(--jv-warning); }

  /* ── Footer actions ── */
  .jv-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--jv-border);
  }
  .btn-post {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    background: var(--jv-accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
  }
  .btn-post:hover:not(:disabled) { background: #1d4ed8; }
  .btn-post:disabled { opacity: 0.45; cursor: not-allowed; }
  .btn-cancel {
    padding: 9px 16px;
    background: #fff;
    color: var(--jv-muted);
    border: 1px solid var(--jv-border);
    border-radius: 7px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s;
    display: inline-flex;
    align-items: center;
  }
  .btn-cancel:hover { border-color: #94a3b8; color: var(--jv-text); }

  /* ── Hidden account_id cell ── */
  .acct-id-cell { display: none; }

  /* ── Responsive ── */
  @media (max-width: 768px) {
    .jv-meta { grid-template-columns: 1fr 1fr; }
    .jv-meta .narration-field { grid-column: 1 / -1; }
    .amt-input { width: 85px; }
    .search-input { min-width: 180px; }
  }
</style>
{% endblock %}

{% block content %}
<div class="jv-wrapper">

  <!-- Header -->
  <div class="jv-header">
    <div class="jv-title">
      Journal Voucher
      <span>Double-Entry Manual Posting</span>
    </div>
    <a href="{% url 'gl:jv_list' %}" class="btn-cancel" style="font-size:0.8rem; padding:6px 12px;">
      ← Back to List
    </a>
  </div>

  <!-- Messages -->
  {% for msg in messages %}
  <div class="alert alert-{{ msg.tags }} alert-dismissible fade show mb-3" role="alert" style="border-radius:8px; font-size:0.875rem;">
    {{ msg }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  {% endfor %}

  <form method="post" id="jv-form" onsubmit="return buildAndSubmit()">
    {% csrf_token %}
    <input type="hidden" name="lines_json" id="lines-json">

    <div class="jv-card">

      <!-- Meta row -->
      <div class="jv-meta">
        <div>
          <label>Date *</label>
          <input type="date" name="jv_date" id="jv-date" value="{{ today }}" required>
        </div>
        <div>
          <label>JV Type</label>
          <select name="jv_type" id="jv-type">
            {% for val, label in jv_types %}
            <option value="{{ val }}">{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="narration-field">
          <label>Narration / Description *</label>
          <input type="text" name="narration" id="jv-narration"
                 placeholder="e.g. Depreciation for May 2025 — Machinery"
                 autocomplete="off" required>
        </div>
      </div>

      <!-- Table -->
      <div class="jv-table-wrap">
        <table class="jv-table">
          <thead>
            <tr>
              <th style="width:36px">#</th>
              <th>Account / Party</th>
              <th class="th-dr" style="width:120px; text-align:right">Debit (Dr)</th>
              <th class="th-cr" style="width:120px; text-align:right">Credit (Cr)</th>
              <th style="min-width:150px">Line Narration</th>
              <th style="width:36px"></th>
            </tr>
          </thead>
          <tbody id="jv-lines">
            <!-- Rows injected by JS -->
          </tbody>
        </table>
      </div>

      <!-- Add line -->
      <button type="button" class="add-line-btn" onclick="addLine()">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        Add Line
      </button>

      <!-- Totals -->
      <div class="jv-totals">
        <span class="totals-label">Total</span>
        <span class="totals-amt dr" id="total-dr">0.00</span>
        <span class="totals-label" style="color:#cbd5e1">|</span>
        <span class="totals-amt cr" id="total-cr">0.00</span>
      </div>

      <!-- Balance indicator -->
      <div class="balance-bar unbalanced" id="balance-bar">
        <div class="balance-dot"></div>
        <span id="balance-text">Difference: <strong id="diff-amt">0.00</strong> — Entry not balanced</span>
      </div>

      <!-- Actions -->
      <div class="jv-actions">
        <button type="submit" class="btn-post" id="save-btn" disabled>
          <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
            <path d="M12.5 4.5l-7 7L2 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Post Journal Voucher
        </button>
        <a href="{% url 'gl:jv_list' %}" class="btn-cancel">Cancel</a>
        <span style="margin-left:auto; font-size:0.75rem; color:var(--jv-muted)">
          ⌨️ Tab through fields &nbsp;·&nbsp; Dr=Cr required to post
        </span>
      </div>

    </div>
  </form>
</div>

<!-- Preload data for search -->
<script>
// ── Preloaded parties + COA from Django ──────────────────────────────────────
const SEARCH_DATA = {
  parties: [
    {% for p in parties %}
    {
      id: {{ p.id }},
      name: "{{ p.party_name|escapejs }}",
      type: "{{ p.party_type }}",
      coa_id: {{ p.coa_account_id|default:"null" }},
      coa_code: "{{ p.coa_account.code|default:'' }}",
      coa_name: "{{ p.coa_account.name|default:''|escapejs }}",
      kind: "party"
    },
    {% endfor %}
  ],
  accounts: [
    {% for a in coa_accounts %}
    {
      id: {{ a.id }},
      name: "{{ a.name|escapejs }}",
      code: "{{ a.code }}",
      type: "{{ a.account_type }}",
      kind: "account"
    },
    {% endfor %}
  ]
};

// ── Icons and badges ─────────────────────────────────────────────────────────
const PARTY_ICON = {
  customer: '👤', vendor: '🏪', bank: '🏦',
  staff: '👷', debitor: '📋', investor: '💼', other: '🔹'
};
const ACCT_ICON = {
  asset: '💵', liability: '📄', equity: '📊',
  income: '📈', expense: '📝', cogs: '📦'
};
const PARTY_LABEL = {
  customer: 'Customer', vendor: 'Vendor', bank: 'Bank',
  staff: 'Staff', debitor: 'Debitor', investor: 'Investor', other: 'Other'
};

// ── Line counter ─────────────────────────────────────────────────────────────
let lineCount = 0;

function addLine(drVal = '', crVal = '', narVal = '', acctId = null, acctLabel = '') {
  lineCount++;
  const n = lineCount;
  const tbody = document.getElementById('jv-lines');
  const tr = document.createElement('tr');
  tr.id = 'line-' + n;
  tr.dataset.accountId = acctId || '';

  tr.innerHTML = `
    <td style="color:var(--jv-muted);font-size:0.8rem;text-align:center;width:36px">${n}</td>
    <td>
      <div class="search-wrap">
        <input type="text"
               class="search-input"
               id="search-${n}"
               placeholder="🔍 Type to search account or party…"
               autocomplete="off"
               value="${acctLabel}"
               oninput="onSearchInput(${n}, this.value)"
               onkeydown="onSearchKeydown(event, ${n})"
               onblur="onSearchBlur(${n})"
               onfocus="onSearchFocus(${n})">
        <button type="button" class="search-clear ${acctLabel ? 'visible' : ''}"
                id="clear-${n}" onclick="clearLine(${n})">✕</button>
        <div class="search-dropdown" id="dd-${n}"></div>
      </div>
    </td>
    <td>
      <input type="number" step="0.01" min="0"
             class="amt-input dr-input"
             id="dr-${n}"
             placeholder="0.00"
             value="${drVal}"
             onfocus="this.select()">
    </td>
    <td>
      <input type="number" step="0.01" min="0"
             class="amt-input cr-input"
             id="cr-${n}"
             placeholder="0.00"
             value="${crVal}"
             onfocus="this.select()">
    </td>
    <td>
      <input type="text" class="nar-input" id="nar-${n}"
             placeholder="Optional note…"
             value="${narVal}">
    </td>
    <td>
      <button type="button" class="del-btn" onclick="removeLine(${n})" title="Remove">✕</button>
    </td>
  `;
  tbody.appendChild(tr);

  if (acctId) {
    tr.dataset.accountId = acctId;
    const inp = tr.querySelector('.search-input');
    if (inp) inp.classList.add('is-selected');
  }
  const drEl = document.getElementById('dr-' + n);
  const crEl = document.getElementById('cr-' + n);
  if (drVal) drEl.classList.add('has-value');
  if (crVal) crEl.classList.add('has-value');

  calcTotals();
  return n;
}

function removeLine(n) {
  const rows = document.querySelectorAll('#jv-lines tr');
  if (rows.length <= 2) {
    alert('Minimum 2 lines required.');
    return;
  }
  const row = document.getElementById('line-' + n);
  if (row) row.remove();
  calcTotals();
}

function clearLine(n) {
  const row = document.getElementById('line-' + n);
  if (!row) return;
  row.dataset.accountId = '';
  const inp = document.getElementById('search-' + n);
  inp.value = '';
  inp.classList.remove('is-selected');
  document.getElementById('clear-' + n).classList.remove('visible');
  closeDropdown(n);
}

// ── Amount input handling ─────────────────────────────────────────────────────
function clearOther(n, side) {
  // When focusing Dr, clear Cr if empty (and vice versa)
  // Actually just let user type both — only flag if both > 0 on submit
}

function onAmtInput(n, side) {
  const inp = document.getElementById(side + '-' + n);
  const val = parseFloat(inp.value || 0);
  if (val > 0) {
    inp.classList.add('has-value');
  } else {
    inp.classList.remove('has-value');
  }
  calcTotals();
}

// ── Search logic ──────────────────────────────────────────────────────────────
let _ddFocusIdx = {};  // dropdown keyboard nav index per line



function onSearchFocus(n) {
  const val = document.getElementById('search-' + n).value;
  if (val.length >= 1) {
    const results = searchAll(val);
    renderDropdown(n, results);
  }
}

function onSearchBlur(n) {
  // Delay to allow click on dropdown item
  setTimeout(() => closeDropdown(n), 180);
}

function onSearchKeydown(e, n) {
  const dd = document.getElementById('dd-' + n);
  if (!dd.classList.contains('open')) return;

  const items = dd.querySelectorAll('.dd-item');
  if (!items.length) return;

  if (e.key === 'ArrowDown') {
    e.preventDefault();
    _ddFocusIdx[n] = Math.min((_ddFocusIdx[n] || -1) + 1, items.length - 1);
    updateDdFocus(n, items);
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    _ddFocusIdx[n] = Math.max((_ddFocusIdx[n] || 0) - 1, 0);
    updateDdFocus(n, items);
  } else if (e.key === 'Enter') {
    e.preventDefault();
    const fi = _ddFocusIdx[n] || 0;
    if (items[fi]) items[fi].click();
  } else if (e.key === 'Escape') {
    closeDropdown(n);
  }
}

function updateDdFocus(n, items) {
  items.forEach((item, i) => {
    item.classList.toggle('focused', i === (_ddFocusIdx[n] || 0));
  });
  const fi = _ddFocusIdx[n] || 0;
  if (items[fi]) items[fi].scrollIntoView({ block: 'nearest' });
}

function closeDropdown(n) {
  const dd = document.getElementById('dd-' + n);
  if (dd) dd.classList.remove('open');
}

function searchAll(q) {
  q = q.toLowerCase().trim();
  const parties = SEARCH_DATA.parties.filter(p =>
    p.name.toLowerCase().includes(q) ||
    (p.coa_code && p.coa_code.toLowerCase().includes(q)) ||
    (p.coa_name && p.coa_name.toLowerCase().includes(q)) ||
    p.type.toLowerCase().includes(q)
  ).slice(0, 8);

  const accounts = SEARCH_DATA.accounts.filter(a =>
    a.name.toLowerCase().includes(q) ||
    a.code.toLowerCase().includes(q) ||
    a.type.toLowerCase().includes(q)
  ).slice(0, 8);

  return { parties, accounts };
}

function renderDropdown(n, results) {
  const dd = document.getElementById('dd-' + n);
  dd.innerHTML = '';

  const totalCount = results.parties.length + results.accounts.length;

  if (totalCount === 0) {
    dd.innerHTML = '<div class="dd-empty">No results found</div>';
    dd.classList.add('open');
    return;
  }

  // Parties section
  if (results.parties.length > 0) {
    const hdr = document.createElement('div');
    hdr.className = 'dd-group-header';
    hdr.textContent = 'Parties';
    dd.appendChild(hdr);

    results.parties.forEach(p => {
      const icon = PARTY_ICON[p.type] || '🔹';
      const label = PARTY_LABEL[p.type] || p.type;
      const coaInfo = p.coa_code ? `${p.coa_code} — ${p.coa_name}` : 'No COA linked';
      const item = document.createElement('div');
      item.className = 'dd-item';
      item.innerHTML = `
        <div class="dd-icon">${icon}</div>
        <div class="dd-main">
          <div class="dd-name">${escHtml(p.name)}</div>
          <div class="dd-sub">${escHtml(coaInfo)}</div>
        </div>
        <span class="dd-badge badge-${p.type}">${label}</span>
      `;
      item.addEventListener('mousedown', (e) => {
        e.preventDefault();
        selectAccount(n, p.coa_id, `${p.name}`, p.name);
      });
      dd.appendChild(item);
    });
  }

  // COA Accounts section
  if (results.accounts.length > 0) {
    const hdr = document.createElement('div');
    hdr.className = 'dd-group-header';
    hdr.textContent = 'Chart of Accounts';
    dd.appendChild(hdr);

    results.accounts.forEach(a => {
      const icon = ACCT_ICON[a.type] || '📒';
      const item = document.createElement('div');
      item.className = 'dd-item';
      item.innerHTML = `
        <div class="dd-icon">${icon}</div>
        <div class="dd-main">
          <div class="dd-name">${escHtml(a.code)} — ${escHtml(a.name)}</div>
          <div class="dd-sub">${capitalize(a.type)}</div>
        </div>
        <span class="dd-badge badge-${a.type}">${capitalize(a.type)}</span>
      `;
      item.addEventListener('mousedown', (e) => {
        e.preventDefault();
        selectAccount(n, a.id, `${a.code} — ${a.name}`, a.name);
      });
      dd.appendChild(item);
    });
  }

  dd.classList.add('open');
}

function selectAccount(n, acctId, displayText, shortName) {
  const row = document.getElementById('line-' + n);
  if (!row) return;

  row.dataset.accountId = acctId || '';

  const inp = document.getElementById('search-' + n);
  inp.value = displayText;
  inp.classList.add('is-selected');
  inp.style.borderColor = '';  // reset any error color

  document.getElementById('clear-' + n).classList.add('visible');
  closeDropdown(n);

  // Auto-focus Dr field
  const drInp = document.getElementById('dr-' + n);
  if (drInp && !parseFloat(drInp.value)) {
    drInp.focus();
    drInp.select();
  }
}

function onSearchInput(n, val) {
  _ddFocusIdx[n] = -1;
  const row = document.getElementById('line-' + n);
  if (row) {
    row.dataset.accountId = '';  // clear selection when user types again
    const inp = document.getElementById('search-' + n);
    if (inp) {
      inp.classList.remove('is-selected');
      inp.style.borderColor = '';
    }
    const clr = document.getElementById('clear-' + n);
    if (clr) clr.classList.remove('visible');
  }
  if (!val || val.length < 1) {
    closeDropdown(n);
    return;
  }
  const results = searchAll(val);
  renderDropdown(n, results);
}

// ── Totals ────────────────────────────────────────────────────────────────────
function calcTotals() {
  const totalDrEl  = document.getElementById('total-dr');
  const totalCrEl  = document.getElementById('total-cr');
  const bar        = document.getElementById('balance-bar');
  const diffEl     = document.getElementById('diff-amt');
  const saveBtn    = document.getElementById('save-btn');
  const balText    = document.getElementById('balance-text');

  // If critical display elements missing, skip gracefully
  if (!totalDrEl || !totalCrEl) return;

  let dr = 0, cr = 0;
  document.querySelectorAll('.dr-input').forEach(f => dr += parseFloat(f.value || 0));
  document.querySelectorAll('.cr-input').forEach(f => cr += parseFloat(f.value || 0));

  totalDrEl.textContent = dr.toFixed(2);
  totalCrEl.textContent = cr.toFixed(2);

  const diff = Math.abs(dr - cr);

  if (diffEl)   diffEl.textContent   = diff.toFixed(2);
  if (bar)      bar.className        = (diff <= 0.01 && dr > 0) ? 'balance-bar balanced' : 'balance-bar unbalanced';
  if (saveBtn)  saveBtn.disabled     = !(diff <= 0.01 && dr > 0);
  if (balText) {
    if (diff <= 0.01 && dr > 0) {
      balText.innerHTML = '&#10003; Entry is balanced &nbsp;&middot;&nbsp; Total: <strong>' + dr.toFixed(2) + '</strong>';
    } else if (dr === 0 && cr === 0) {
      balText.innerHTML = 'Enter debit and credit amounts';
    } else {
      balText.innerHTML = 'Difference: <strong>' + diff.toFixed(2) + '</strong> &mdash; Entry not balanced';
    }
  }
}

// ── Submit ────────────────────────────────────────────────────────────────────
function buildAndSubmit() {
  const rows = document.querySelectorAll('#jv-lines tr');
  const lines = [];
  let valid = true;

  rows.forEach(row => {
    const n = row.id.replace('line-', '');
    const acctId = row.dataset.accountId;
    const searchVal = (document.getElementById('search-' + n)?.value || '').trim();
    const dr = parseFloat(document.getElementById('dr-' + n)?.value || 0);
    const cr = parseFloat(document.getElementById('cr-' + n)?.value || 0);
    const nar = document.getElementById('nar-' + n)?.value || '';

    // Skip empty lines
    if (!searchVal && dr === 0 && cr === 0) return;

    // Account not selected from dropdown
    if (!acctId && searchVal) {
      alert('Line ' + n + ': Please select "' + searchVal + '" from the dropdown. Click on a result to select it.');
      valid = false;
      return;
    }

    if (!acctId) return;

    if (dr > 0 && cr > 0) {
      alert('Line ' + n + ': A single line cannot have both Debit and Credit.');
      valid = false;
      return;
    }

    if (dr === 0 && cr === 0) return;  // skip zero lines

    lines.push({
      account_id: parseInt(acctId),
      debit: dr,
      credit: cr,
      narration: nar,
      party_id: null
    });
  });

  if (!valid) return false;
  if (lines.length < 2) {
    alert('Please fill at least 2 lines with accounts and amounts.');
    return false;
  }

  document.getElementById('lines-json').value = JSON.stringify(lines);
  return true;
}

// ── Helpers ───────────────────────────────────────────────────────────────────
function escHtml(str) {
  return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
function capitalize(str) {
  return str ? str.charAt(0).toUpperCase() + str.slice(1) : '';
}

// ── Event delegation — catches ALL current and future amt inputs ──────────────
document.addEventListener('input', function(e) {
  const el = e.target;
  if (!el) return;
  const cls = el.className || '';
  if (cls.indexOf('dr-input') !== -1 || cls.indexOf('cr-input') !== -1) {
    const val = parseFloat(el.value || 0);
    if (val > 0) el.classList.add('has-value');
    else         el.classList.remove('has-value');
    calcTotals();
  }
});

// ── Init: add 2 default lines ─────────────────────────────────────────────────
// Use setTimeout 0 to ensure DOM is fully ready regardless of block render order
setTimeout(function() {
  addLine();
  addLine();
}, 0);
</script>
{% endblock %}