{% extends 'base.html' %}
{% load i18n static cashbook_extras %}

{% block content %}
<div class="grid" style="gap:var(--spacing)">

  <!-- Date filter chip with inline calendar -->
  <div class="card" style="padding:12px;">
    <details class="chip" id="dash-date-chip">
      <summary class="btn btn--secondary">{% trans "Date" %}: {{ kpi_range_label }} ▼</summary>
      <div class="chip__panel">
        <form method="get" id="dash-date-form" style="margin:0">
          <div class="datepanel">
            <div class="datepanel__cal">
              <div class="datecal__header">
                <button type="button" class="datecal__btn" data-cal-prev>‹</button>
                <div class="datecal__label" data-cal-label>—</div>
                <button type="button" class="datecal__btn" data-cal-next>›</button>
              </div>
              <div class="datecal__grid" aria-label="calendar">
                <div class="datecal__dow">S</div><div class="datecal__dow">M</div><div class="datecal__dow">T</div><div class="datecal__dow">W</div><div class="datecal__dow">T</div><div class="datecal__dow">F</div><div class="datecal__dow">S</div>
              </div>
              <div class="datepanel__inputs">
                <div class="field">
                  <label for="dash-start">{% trans "Start" %}</label>
                  <input type="date" id="dash-start" name="start" value="{{ request.GET.start|default:'' }}">
                </div>
                <div class="field">
                  <label for="dash-end">{% trans "End" %}</label>
                  <input type="date" id="dash-end" name="end" value="{{ request.GET.end|default:'' }}">
                </div>
              </div>
            </div>
            <div class="datepanel__presets">
              <button class="btn btn--secondary btn--sm" name="range" value="today">{% trans "Today" %}</button>
              <button class="btn btn--secondary btn--sm" name="range" value="yesterday">{% trans "Yesterday" %}</button>
              <button class="btn btn--secondary btn--sm" name="range" value="week">{% trans "This week" %}</button>
              <button class="btn btn--secondary btn--sm" name="range" value="lastweek">{% trans "Last week" %}</button>
              <button class="btn btn--secondary btn--sm" name="range" value="month">{% trans "This month" %}</button>
              <button class="btn btn--secondary btn--sm" name="range" value="lastmonth">{% trans "Last month" %}</button>
              <button class="btn btn--secondary btn--sm" name="range" value="year">{% trans "This year" %}</button>
              <button class="btn btn--secondary btn--sm" name="range" value="lastyear">{% trans "Last year" %}</button>
              <button class="btn btn--secondary btn--sm" name="range" value="last7">{% trans "Last 7 days" %}</button>
              <button class="btn btn--secondary btn--sm" name="range" value="last30">{% trans "Last 30 days" %}</button>
            </div>
          </div>
          <div class="chip__footer">
            <button type="submit" class="btn btn--primary btn--sm">{% trans "Apply" %}</button>
            <a href="{% url 'dashboard' %}" class="btn btn--tertiary btn--sm">{% trans "Clear" %}</a>
          </div>
        </form>
      </div>
    </details>
  </div>

  <!-- Top summary cards (report style) -->
  <div id="dashboard-top-cards" class="grid cols-3">
    <section class="card">
      <div class="muted">{% trans "Money In" %}</div>
      <div style="font-size:28px; font-weight:700; color:var(--success);">{{ income }} {{ biz.currency|currency_label }}</div>
      <div class="badge" style="margin-top:4px">{{ kpi_range_label }} · {{ income_count }} {% trans "transactions" %}</div>
    </section>
    <section class="card">
      <div class="muted">{% trans "Money Out" %}</div>
      <div style="font-size:28px; font-weight:700; color:var(--danger);">{{ expense }} {{ biz.currency|currency_label }}</div>
      <div class="badge" style="margin-top:4px">{{ kpi_range_label }} · {{ expense_count }} {% trans "transactions" %}</div>
    </section>
    <section class="card">
      <div class="muted">{% trans "Net Cash" %}</div>
      <div style="font-size:28px; font-weight:700;">{{ net }} {{ biz.currency|currency_label }}</div>
      <div class="muted" style="margin-top:4px">{% trans "Balance" %}: {{ available_total }} {{ biz.currency|currency_label }}</div>
    </section>
  </div>

  <!-- Replace report lower cards: Who owes me / Who I owe / Top Accounts -->
  <div id="dashboard-lower-cards" class="grid cols-3" style="margin-top:12px;">
    <section class="card">
      <h3 style="margin-bottom:8px;">{% trans "Who Owes Me" %}</h3>
      <div style="font-size:24px; font-weight:700;">{{ receivables_total }} {{ biz.currency|currency_label }}</div>
      <div class="badge" style="margin-top:4px">{{ receivables_count }} {% trans "customers" %}</div>
    </section>
    <section class="card">
      <h3 style="margin-bottom:8px;">{% trans "Who I Owe" %}</h3>
      <div style="font-size:24px; font-weight:700;">{{ payables_total }} {{ biz.currency|currency_label }}</div>
      <div class="badge" style="margin-top:4px">{{ payables_count }} {% trans "suppliers" %}</div>
    </section>
    <section class="card">
      <h3 style="margin-bottom:8px;">{% trans "Top Accounts" %}</h3>
      {% if top_accounts %}
        <div style="display:grid; gap:8px;">
          {% for a in top_accounts %}
          <div style="display:flex; align-items:center; gap:8px;">
            <div style="width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ a.name }}</div>
            <div style="flex:1; background:#f3f4f6; border-radius:10px; overflow:hidden; height:14px;">
              <div style="background:#111; width: {{ a.pct }}%; height:100%;"></div>
            </div>
            <div style="width:110px; text-align:right;">{{ a.balance }} {{ biz.currency|currency_label }}</div>
          </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="muted">{% trans "No accounts yet." %}</div>
      {% endif %}
    </section>
  </div>

  <script>
  // Inline calendar for dashboard date chip
  (function(){
    const chip = document.getElementById('dash-date-chip');
    if (!chip) return;
    const grid = chip.querySelector('.datecal__grid');
    const label = chip.querySelector('[data-cal-label]');
    const prevBtn = chip.querySelector('[data-cal-prev]');
    const nextBtn = chip.querySelector('[data-cal-next]');
    const startInput = chip.querySelector('#dash-start');
    const endInput = chip.querySelector('#dash-end');

    const fmt = d => d.toISOString().slice(0,10);
    const parse = s => { if(!s) return null; const [y,m,dd]=s.split('-').map(Number); return new Date(y, m-1, dd); };

    const today = new Date();
    let start = parse(startInput.value) || today;
    let end = parse(endInput.value) || start;
    let view = new Date(start.getFullYear(), start.getMonth(), 1);

    function monthLabel(d){ return d.toLocaleDateString(document.documentElement.lang || 'en', { month:'long', year:'numeric' }); }
    function daysInMonth(y,m){ return new Date(y, m+1, 0).getDate(); }
    function clearGrid(){ while (grid.children.length > 7) grid.removeChild(grid.lastChild); }
    function isSameDay(a,b){ return a && b && a.getFullYear()==b.getFullYear() && a.getMonth()==b.getMonth() && a.getDate()==b.getDate(); }
    function inRange(d){ const a = start <= end ? start : end; const b = end >= start ? end : start; return d >= a && d <= b; }

    function draw(){
      clearGrid();
      label.textContent = monthLabel(view);
      const y=view.getFullYear(), m=view.getMonth();
      const firstDow = new Date(y,m,1).getDay();
      const dim = daysInMonth(y,m);
      // Prev month trailing days
      const prevDim = daysInMonth(y, m-1);
      for (let i=firstDow-1; i>=0; i--){
        const el = document.createElement('div');
        el.className='datecal__day out';
        el.textContent = String(prevDim - i);
        grid.appendChild(el);
      }
      // This month days
      for (let d=1; d<=dim; d++){
        const el = document.createElement('div');
        el.className='datecal__day';
        el.textContent = String(d);
        const thisDate = new Date(y,m,d);
        if (isSameDay(thisDate, start) || isSameDay(thisDate, end)) el.classList.add('sel');
        if (inRange(thisDate)) el.classList.add('inrange');
        el.addEventListener('click', ()=>{
          if (!start || (start && end)){
            start = thisDate; end = thisDate;
          } else {
            end = thisDate;
          }
          startInput.value = fmt(start);
          endInput.value = fmt(end);
          draw();
        });
        grid.appendChild(el);
      }
      // Fill to 6 rows
      const cells = grid.children.length;
      for (let k=cells; k<7*7; k++){
        const el = document.createElement('div');
        el.className='datecal__day out';
        el.textContent = String((k - cells) + 1);
        grid.appendChild(el);
      }
    }

    prevBtn.addEventListener('click', ()=>{ view.setMonth(view.getMonth()-1); draw(); });
    nextBtn.addEventListener('click', ()=>{ view.setMonth(view.getMonth()+1); draw(); });
    draw();

    async function updateDashboard(params){
      try{
        const url = window.location.pathname + '?' + params.toString();
        const res = await fetch(url, { headers: { 'X-Requested-With':'fetch' }});
        const html = await res.text();
        const doc = new DOMParser().parseFromString(html, 'text/html');
        const top = doc.querySelector('#dashboard-top-cards');
        const low = doc.querySelector('#dashboard-lower-cards');
        const topHere = document.querySelector('#dashboard-top-cards');
        const lowHere = document.querySelector('#dashboard-lower-cards');
        if (top && topHere) topHere.innerHTML = top.innerHTML;
        if (low && lowHere) lowHere.innerHTML = low.innerHTML;
        // Update summary label from fetched chip summary
        const fetchedSummary = doc.querySelector('#dash-date-chip > summary');
        const hereSummary = document.querySelector('#dash-date-chip > summary');
        if (fetchedSummary && hereSummary){ hereSummary.innerHTML = fetchedSummary.innerHTML; }
        // Update history and close chip
        history.pushState({}, '', url);
        chip.removeAttribute('open');
      } catch(e){
        // Fallback to full navigation
        window.location.search = params.toString();
      }
    }

    // Intercept presets
    chip.addEventListener('click', (e)=>{
      const btn = e.target.closest('.datepanel__presets .btn');
      if (!btn) return;
      e.preventDefault();
      const params = new URLSearchParams(window.location.search);
      const val = btn.value || btn.getAttribute('value') || '';
      if (val){ params.set('range', val); }
      params.delete('start'); params.delete('end');
      updateDashboard(params);
    });

    // Intercept Apply
    chip.addEventListener('click', (e)=>{
      const apply = e.target.closest('.chip__footer .btn.btn--primary');
      if (!apply) return;
      e.preventDefault();
      const params = new URLSearchParams(window.location.search);
      const s = startInput.value; const ed = endInput.value;
      if (s) params.set('start', s); else params.delete('start');
      if (ed) params.set('end', ed); else params.delete('end');
      params.delete('range');
      updateDashboard(params);
    });
  })();
  </script>
  </div>
  <br>
    <!-- Today's transactions -->
    <section class="card">
      <header class="flex-between">
        <h3>{% trans "Today" %}: {{ biz.name }} - {{ today }}</h3>
        <div class="flex-end" style="gap:8px">
          {% with summary_text=biz.name|add:': '|add:kpi_range_label|add:' — '|add:biz.currency|currency_label|add:' '|add:income|stringformat:'s'|add:' / '|add:expense|stringformat:'s'|add:' / '|add:net|stringformat:'s' %}
            <a class="btn btn--secondary" target="_blank" rel="noopener" href="https://wa.me/?text={{ summary_text|urlencode }}">{% trans "Share via WhatsApp" %}</a>
          {% endwith %}
          <button id="add-transaction-btn" type="button" class="btn btn--primary push-right">
            {% trans "Add Transaction" %}
          </button>
        </div>
      </header>
      <br>
      <table class="table mt-2">
      <thead>
      <tr>
        <th>{% trans "Time" %}</th>
        <th>{% trans "Type" %}</th>
        <th>{% trans "Account" %}</th>
        <th>{% trans "Category" %}</th>
        <th>{% trans "Amount" %}</th>
        <th>{% trans "Description" %}</th>
      </tr>
      </thead>
      <tbody>
      {% for t in transactions %}
        <tr>
          <td>{{ t.created_at|date:"H:i" }}</td>
          <td>{{ t.get_ttype_display }} {% if t.is_credit %}<span class="badge">{% trans "Credit" %}</span>{% endif %}</td>
          <td>{{ t.account.name }}</td>
          <td>{% if t.category %}{{ t.category.name }}{% endif %}</td>
          <td>{{ t.amount }} {{ t.currency|currency_label }}</td>
          <td>{{ t.description }}</td>
        </tr>
      {% empty %}
        <tr><td colspan="6">{% trans "No transactions today." %}</td></tr>
      {% endfor %}
      </tbody>
      </table>
    </section>

    <!-- Add Transaction Modal -->
    <div id="transaction-modal" class="modal">
      <div class="modal-content modal-lg">
        <h3>{% trans "New Transaction" %}</h3>

        <!-- Step 1: Pick Type -->
        <div id="tx-type-picker">
          <p class="muted" style="margin-bottom:8px">{% trans "Choose a type" %}</p>
          <div class="grid cols-3" style="gap:8px">
            <button type="button" class="btn btn--secondary" data-tx-type="income">{% trans "Income" %}</button>
            <button type="button" class="btn btn--secondary" data-tx-type="expense">{% trans "Expense" %}</button>
            <button type="button" class="btn btn--secondary" data-tx-type="transfer">{% trans "Transfer" %}</button>
            <button type="button" class="btn btn--secondary" data-tx-type="sale">{% trans "Sale" %}</button>
            <button type="button" class="btn btn--secondary" data-tx-type="credit-sale">{% trans "Credit Sale" %}</button>
            <button type="button" class="btn btn--secondary" data-tx-type="credit-purchase">{% trans "Credit Purchase" %}</button>
          </div>
          <div class="flex-end" style="margin-top:var(--spacing)">
            <button type="button" id="close-transaction-modal" class="btn btn--tertiary">{% trans "Cancel" %}</button>
          </div>
        </div>

        <!-- Income form -->
        <form id="form-income" class="tx-form" method="post" action="{% url 'transaction_form' %}" enctype="multipart/form-data" style="display:none">{% csrf_token %}
          <input type="hidden" name="ttype" value="income">
          <div class="flex-between">
            <h4>{% trans "Income" %}</h4>
            <button type="button" class="btn btn--tertiary" data-back>{% trans "Change Type" %}</button>
          </div>
          <label>{% trans "Date" %}</label><input type="date" name="date" required>
          <label>{% trans "Account" %}</label>
          <select name="account" required>
            {% for a in accounts %}<option value="{{ a.id }}">{{ a.name }}</option>{% endfor %}
          </select>
          <label>{% trans "Category" %}</label>
          <select name="category">
            <option value="">{% trans "--" %}</option>
            {% for c in categories %}<option value="{{ c.id }}">{{ c.name }} ({% trans c.type %})</option>{% endfor %}
          </select>
          <label>{% trans "Amount" %}</label><input name="amount" type="number" step="0.01" required>
          <label>{% trans "Description" %}</label><input name="description" type="text">
          <label>{% trans "Receipt (photo)" %}</label><input type="file" name="receipt">
          <div class="flex-end" style="gap:var(--spacing)">
            <button type="button" class="btn btn--tertiary" data-cancel>{% trans "Cancel" %}</button>
            <button type="submit" class="btn btn--primary">{% trans "Save" %}</button>
          </div>
        </form>

        <!-- Expense form -->
        <form id="form-expense" class="tx-form" method="post" action="{% url 'transaction_form' %}" enctype="multipart/form-data" style="display:none">{% csrf_token %}
          <input type="hidden" name="ttype" value="expense">
          <div class="flex-between">
            <h4>{% trans "Expense" %}</h4>
            <button type="button" class="btn btn--tertiary" data-back>{% trans "Change Type" %}</button>
          </div>
          <label>{% trans "Date" %}</label><input type="date" name="date" required>
          <label>{% trans "Account" %}</label>
          <select name="account" required>
            {% for a in accounts %}<option value="{{ a.id }}">{{ a.name }}</option>{% endfor %}
          </select>
          <label>{% trans "Category" %}</label>
          <select name="category">
            <option value="">{% trans "--" %}</option>
            {% for c in categories %}<option value="{{ c.id }}">{{ c.name }} ({% trans c.type %})</option>{% endfor %}
          </select>
          <label>{% trans "Amount" %}</label><input name="amount" type="number" step="0.01" required>
          <label>{% trans "Description" %}</label><input name="description" type="text">
          <label>{% trans "Receipt (photo)" %}</label><input type="file" name="receipt">
          <div class="flex-end" style="gap:var(--spacing)">
            <button type="button" class="btn btn--tertiary" data-cancel>{% trans "Cancel" %}</button>
            <button type="submit" class="btn btn--primary">{% trans "Save" %}</button>
          </div>
        </form>

        <!-- Transfer form -->
        <form id="form-transfer" class="tx-form" method="post" action="{% url 'transfer_create' %}" style="display:none">{% csrf_token %}
          <div class="flex-between">
            <h4>{% trans "Transfer" %}</h4>
            <button type="button" class="btn btn--tertiary" data-back>{% trans "Change Type" %}</button>
          </div>
          <label>{% trans "Date" %}</label><input type="date" name="date" required>
          <label>{% trans "From Account" %}</label>
          <select name="from_account" required>
            {% for a in accounts %}<option value="{{ a.id }}">{{ a.name }}</option>{% endfor %}
          </select>
          <label>{% trans "To Account" %}</label>
          <select name="to_account" required>
            {% for a in accounts %}<option value="{{ a.id }}">{{ a.name }}</option>{% endfor %}
          </select>
          <label>{% trans "Amount" %}</label><input name="amount" type="number" step="0.01" required>
          <label>{% trans "Description" %}</label><input name="description" type="text">
          <div class="flex-end" style="gap:var(--spacing)">
            <button type="button" class="btn btn--tertiary" data-cancel>{% trans "Cancel" %}</button>
            <button type="submit" class="btn btn--primary">{% trans "Save" %}</button>
          </div>
        </form>

        <!-- Credit Sale form -->
        <form id="form-credit-sale" class="tx-form" method="post" action="{% url 'debt_create' %}" style="display:none">{% csrf_token %}
          <div class="flex-between">
            <h4>{% trans "Credit Sale" %}</h4>
            <button type="button" class="btn btn--tertiary" data-back>{% trans "Change Type" %}</button>
          </div>
          <label>{% trans "Date" %}</label><input type="date" name="date" required>
          <label>{% trans "Customer" %}</label>
          <select name="contact" required>
            {% for c in customers %}<option value="{{ c.id }}">{{ c.name }}</option>{% endfor %}
          </select>
          <label>{% trans "Account" %}</label>
          <select name="account" required>
            {% for a in accounts %}<option value="{{ a.id }}">{{ a.name }}</option>{% endfor %}
          </select>
          <label>{% trans "Amount" %}</label><input name="amount" type="number" step="0.01" required>
          <label>{% trans "Due Date" %}</label><input type="date" name="due_date">
          <label>{% trans "Note" %}</label><input name="description" type="text">
          <div class="flex-end" style="gap:var(--spacing)">
            <button type="button" class="btn" data-cancel>{% trans "Cancel" %}</button>
            <button type="submit" class="btn primary">{% trans "Save" %}</button>
          </div>
        </form>

        <!-- Credit Purchase form -->
        <form id="form-credit-purchase" class="tx-form" method="post" action="{% url 'purchase_create' %}" style="display:none">{% csrf_token %}
          <div class="flex-between">
            <h4>{% trans "Credit Purchase" %}</h4>
            <button type="button" class="btn" data-back>{% trans "Change Type" %}</button>
          </div>
          <label>{% trans "Date" %}</label><input type="date" name="date" required>
          <label>{% trans "Supplier" %}</label>
          <select name="contact" required>
            {% for s in suppliers %}<option value="{{ s.id }}">{{ s.name }}</option>{% endfor %}
          </select>
          <label>{% trans "Account" %}</label>
          <select name="account" required>
            {% for a in accounts %}<option value="{{ a.id }}">{{ a.name }}</option>{% endfor %}
          </select>
          <label>{% trans "Amount" %}</label><input name="amount" type="number" step="0.01" required>
          <label>{% trans "Due Date" %}</label><input type="date" name="due_date">
          <label>{% trans "Note" %}</label><input name="description" type="text">
          <div class="flex-end" style="gap:var(--spacing)">
            <button type="button" class="btn" data-cancel>{% trans "Cancel" %}</button>
            <button type="submit" class="btn primary">{% trans "Save" %}</button>
          </div>
        </form>

        <!-- Sale form (multi-items) -->
        <form id="form-sale" class="tx-form" method="post" action="{% url 'transaction_form' %}" style="display:none">{% csrf_token %}
          <input type="hidden" name="ttype" value="income">
          <input type="hidden" name="amount" value="0">
          <input type="hidden" name="description" value="">
          <div class="flex-between">
            <h4>{% trans "Sale" %}</h4>
            <button type="button" class="btn" data-back>{% trans "Change Type" %}</button>
          </div>
          <label>{% trans "Date" %}</label><input type="date" name="date" value="{{ today }}" required>
          <label>{% trans "Customer" %}</label>
          <select name="contact">
            <option value="">{% trans "-- Optional --" %}</option>
            {% for c in customers %}<option value="{{ c.id }}">{{ c.name }}</option>{% endfor %}
          </select>
          <label>{% trans "Category" %}</label>
          <select name="category" required>
            <option value="">{% trans "--" %}</option>
            {% for c in categories %}{% if c.type == 'income' %}<option value="{{ c.id }}">{{ c.name }}</option>{% endif %}{% endfor %}
          </select>
          <label>{% trans "Account" %}</label>
          <select name="account" required>
            {% for a in accounts %}<option value="{{ a.id }}">{{ a.name }}</option>{% endfor %}
          </select>

          <div class="card" style="margin-top:8px">
            <div class="flex-between">
              <div style="font-weight:600">{% trans "Items" %}</div>
              <button class="btn" type="button" id="sale-add-item"><i class="bi bi-plus"></i> {% trans "Add Item" %}</button>
            </div>
            <table class="table" style="margin-top:8px">
              <thead>
                <tr>
                  <th>{% trans "Item" %}</th>
                  <th style="width:120px">{% trans "Qty" %}</th>
                  <th style="width:160px">{% trans "Price" %}</th>
                  <th style="width:160px">{% trans "Amount" %}</th>
                  <th style="width:48px"></th>
                </tr>
              </thead>
              <tbody id="sale-items"></tbody>
              <tfoot>
                <tr>
                  <td colspan="3" class="text-right" style="text-align:right; font-weight:600">{% trans "Total" %}</td>
                  <td><span id="sale-total">0</span> {{ biz.currency|currency_label }}</td>
                  <td></td>
                </tr>
              </tfoot>
            </table>
          </div>
          <div class="flex-end" style="gap:var(--spacing)">
            <button type="button" class="btn" data-cancel>{% trans "Cancel" %}</button>
            <button type="submit" class="btn primary">{% trans "Save" %}</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script>
  // Simple 3-dots dropdown for each KPI card
    document.addEventListener('click', (e) => {
      const btn = e.target.closest('.kpi-menu-btn');
      document.querySelectorAll('.kpi-menu').forEach(m => m.classList.remove('open'));
      if (btn) {
        const menu = btn.parentElement.querySelector('.kpi-menu');
        menu.classList.toggle('open');
        e.stopPropagation();
      }
    });

    // Modal open/close
    const modal = document.getElementById('transaction-modal');
    const openBtn = document.getElementById('add-transaction-btn');
    const typePicker = document.getElementById('tx-type-picker');
    const forms = Array.from(document.querySelectorAll('.tx-form'));
    function showPicker() {
      typePicker.style.display = '';
      forms.forEach(f => f.style.display = 'none');
    }
    function showForm(type) {
      typePicker.style.display = 'none';
      forms.forEach(f => f.style.display = 'none');
      const form = document.getElementById(`form-${type}`);
      if (form) form.style.display = '';
    }
    openBtn.addEventListener('click', () => { modal.classList.add('open'); showPicker(); });
    // Picker buttons
    modal.addEventListener('click', (e) => {
      const btn = e.target.closest('[data-tx-type]');
      if (btn) {
        showForm(btn.getAttribute('data-tx-type'));
      }
      if (e.target.matches('[data-back]')) {
        showPicker();
      }
      if (e.target.matches('[data-cancel]')) {
        modal.classList.remove('open');
        showPicker();
      }
      if (e.target.id === 'close-transaction-modal') {
        modal.classList.remove('open');
        showPicker();
      }
    });

    // --- Sale dynamic items ---
    const saleTbody = document.getElementById('sale-items');
    const saleAddBtn = document.getElementById('sale-add-item');
    const saleTotalEl = document.getElementById('sale-total');
    const saleForm = document.getElementById('form-sale');

    function fmt(n){
      const locale = document.documentElement.lang || navigator.language || 'en';
      try { return new Intl.NumberFormat(locale, { maximumFractionDigits: 2, minimumFractionDigits: 2 }).format(n); }
      catch(e){ return (Math.round(n*100)/100).toFixed(2); }
    }
    const L_ITEM = "{% trans 'Item' %}";
    const L_SALE = "{% trans 'Sale' %}";
    function rowTemplate(){
      return `
        <tr>
          <td><input type="text" class="sale-item-name" name="item_name" placeholder="${L_ITEM}"/></td>
          <td><input type="number" min="0" step="1" class="sale-item-qty" name="item_qty" value="1"/></td>
          <td><input type="number" min="0" step="0.01" class="sale-item-price" name="item_price" value="0"/></td>
          <td class="sale-item-amount">0</td>
          <td><button type="button" class="btn btn--sm btn--tertiary sale-item-del">×</button></td>
        </tr>`;
    }
    function updateSaleTotals(){
      let total = 0;
      saleTbody.querySelectorAll('tr').forEach(tr => {
        const qty = parseFloat(tr.querySelector('.sale-item-qty')?.value || '0') || 0;
        const price = parseFloat(tr.querySelector('.sale-item-price')?.value || '0') || 0;
        const amt = qty * price;
        tr.querySelector('.sale-item-amount').textContent = fmt(amt);
        total += amt;
      });
      saleTotalEl.textContent = fmt(total);
      // write into hidden amount field
      saleForm.querySelector('input[name="amount"]').value = String(total.toFixed(2));
      // also craft a compact description from first items
      const names = Array.from(saleTbody.querySelectorAll('.sale-item-name')).map(i => i.value.trim()).filter(Boolean);
      const summary = names.slice(0,3).join(', ') + (names.length > 3 ? ` +${names.length-3}` : '');
      saleForm.querySelector('input[name="description"]').value = summary ? `${L_SALE}: ${summary}` : L_SALE;
    }
    function addRow(){
      saleTbody.insertAdjacentHTML('beforeend', rowTemplate());
      updateSaleTotals();
    }
    if (saleAddBtn && saleTbody){
      saleAddBtn.addEventListener('click', addRow);
      saleTbody.addEventListener('input', (e)=>{
        if (e.target.matches('.sale-item-qty, .sale-item-price')) updateSaleTotals();
      });
      saleTbody.addEventListener('click', (e)=>{
        if (e.target.closest('.sale-item-del')){
          const tr = e.target.closest('tr');
          tr?.remove();
          updateSaleTotals();
        }
      });
      // Ensure at least one row exists when opening Sale form
      modal.addEventListener('click', (e)=>{
        const btn = e.target.closest('[data-tx-type="sale"]');
        if (btn){
          if (saleTbody.children.length === 0) addRow();
          updateSaleTotals();
        }
      });
      // Validate before submit: mark as sale, total > 0 and category/account chosen
      saleForm?.addEventListener('submit', (e)=>{
        updateSaleTotals();
        const marker = document.createElement('input');
        marker.type = 'hidden';
        marker.name = 'is_sale';
        marker.value = '1';
        saleForm.appendChild(marker);
        const total = parseFloat(saleForm.querySelector('input[name="amount"]').value || '0') || 0;
        if (total <= 0){
          e.preventDefault();
          alert('{% trans "Please add at least one item with non-zero total." %}');
        }
      });
    }
  </script>
{% endblock %}