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

{% block content %}
<section class="card">
  <h3>{% trans "Transactions" %}</h3>
  <div class="toolbar">
    <form method="get" id="tx-filters" style="margin:0">
      <div class="chipbar">
        <details class="chip" id="date-chip">
          <summary class="btn btn--secondary">{% trans "Date" %}{% if date_label %}: {{ date_label }}{% endif %} ▾</summary>
          <div class="chip__panel">
            <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="{% trans 'Calendar' %}">
                  <!-- weekday headers and days will be injected by script -->
                </div>
                <div class="datepanel__inputs">
                  <div class="field">
                    <label for="start">{% trans "Start" %}</label>
                    <input type="date" id="start" name="start" value="{{ request.GET.start }}">
                  </div>
                  <div class="field">
                    <label for="end">{% trans "End" %}</label>
                    <input type="date" id="end" name="end" value="{{ request.GET.end }}">
                  </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 'transactions_index' %}" class="btn btn--tertiary btn--sm">{% trans "Clear" %}</a>
            </div>
          </div>
        </details>

        <details class="chip">
          <summary class="btn btn--secondary">{% trans "Type" %} ▾</summary>
          <div class="chip__panel" style="min-width:260px;">
            <div class="field">
              <label>{% trans "Types" %}</label>
              <div class="multi-list" data-name="ttype" style="display:grid; gap:8px; max-height:220px; overflow:auto; padding:4px;">
                <label style="display:flex; align-items:center; gap:8px;">
                  <input type="checkbox" data-all="1" name="ttype" value="" {% if not selected_types %}checked{% endif %}>
                  <span>{% trans "All types" %}</span>
                </label>
                {% for key,val in ttype_choices %}
                  <label style="display:flex; align-items:center; gap:8px;">
                    <input type="checkbox" name="ttype" value="{{ key }}" {% if key in selected_types %}checked{% endif %}>
                    <span>{{ val }}</span>
                  </label>
                {% endfor %}
              </div>
            </div>
            <!-- No Apply: changes apply instantly -->
          </div>
        </details>

        <details class="chip">
          <summary class="btn btn--secondary">{% trans "Account" %} ▾</summary>
          <div class="chip__panel" style="min-width:260px;">
            <div class="field">
              <label>{% trans "Accounts" %}</label>
              <div class="multi-list" data-name="account" style="display:grid; gap:8px; max-height:220px; overflow:auto; padding:4px;">
                <label style="display:flex; align-items:center; gap:8px;">
                  <input type="checkbox" data-all="1" name="account" value="" {% if not selected_accounts %}checked{% endif %}>
                  <span>{% trans "All accounts" %}</span>
                </label>
                {% for a in accounts %}
                  <label style="display:flex; align-items:center; gap:8px;">
                    <input type="checkbox" name="account" value="{{ a.id }}" {% if a.id|stringformat:'s' in selected_accounts %}checked{% endif %}>
                    <span>{{ a.name }}</span>
                  </label>
                {% endfor %}
              </div>
            </div>
            <!-- No Apply: changes apply instantly -->
          </div>
        </details>

        <details class="chip">
          <summary class="btn btn--secondary">{% trans "Category" %} ▾</summary>
          <div class="chip__panel" style="min-width:300px;">
            <div class="field">
              <label>{% trans "Categories" %}</label>
              <div class="multi-list" data-name="category">
                <label>
                  <input type="checkbox" data-all="1" name="category" value="" {% if not selected_categories %}checked{% endif %}>
                  <span>{% trans "All categories" %}</span>
                </label>
                {% for c in categories %}
                  <label>
                    <input type="checkbox" name="category" value="{{ c.id }}" {% if c.id|stringformat:'s' in selected_categories %}checked{% endif %}>
                    <span>{{ c.name }}</span>
                  </label>
                {% endfor %}
              </div>
            </div>
            <!-- No Apply: changes apply instantly -->
          </div>
        </details>

        <details class="chip">
          <summary class="btn btn--secondary">{% trans "Search" %}{% if search_label %}: <span id="search-chip-text">{{ search_label|truncatechars:18 }}</span>{% endif %} ▾</summary>
          <div class="chip__panel" style="min-width:300px;">
            <div class="field">
              <label for="q">{% trans "Search" %}</label>
              <input type="text" id="q" name="q" class="form-control" placeholder="{% trans 'Description, account, category' %}" value="{{ request.GET.q }}">
            </div>
            <div class="chip__footer">
              <button type="submit" class="btn btn--primary btn--sm">{% trans "Apply" %}</button>
              <a href="{% url 'transactions_index' %}" class="btn btn--tertiary btn--sm">{% trans "Reset" %}</a>
            </div>
          </div>
        </details>
      </div>
    </form>

    <div class="toolbar__right">
      <form method="get" class="flex-end" style="gap:8px; margin:0;">
        <!-- Preserve current filters when changing page size -->
        <input type="hidden" name="start" value="{{ request.GET.start }}">
        <input type="hidden" name="end" value="{{ request.GET.end }}">
        <input type="hidden" name="ttype" value="{{ request.GET.ttype }}">
        <input type="hidden" name="account" value="{{ request.GET.account }}">
        <input type="hidden" name="category" value="{{ request.GET.category }}">
        {% if request.GET.credit %}<input type="hidden" name="credit" value="{{ request.GET.credit }}">{% endif %}
        <input type="hidden" name="q" value="{{ request.GET.q }}">
        <label for="per_page" class="muted" style="align-self:center;">{% trans "Per page" %}</label>
        <select id="per_page" name="per_page" class="select select--sm" onchange="this.form.submit()">
          {% for n in page_size_options %}
            <option value="{{ n }}"{% if per_page|stringformat:'s' == n|stringformat:'s' or request.GET.per_page == n|stringformat:'s' %} selected{% endif %}>{{ n }}</option>
          {% endfor %}
        </select>
      </form>
      <a id="export-excel" href="{% url 'transactions_export_excel' %}{% if params %}?{{ params }}{% endif %}" class="btn btn--secondary" title="{% trans 'Export Excel' %}">
        <i class="bi bi-file-earmark-excel"></i>
        <span class="hide-sm">{% trans "Excel" %}</span>
      </a>
      <a id="export-pdf" href="{% url 'transactions_export_pdf' %}{% if params %}?{{ params }}{% endif %}" class="btn btn--secondary" title="{% trans 'Export PDF' %}">
        <i class="bi bi-file-pdf"></i>
        <span class="hide-sm">{% trans "PDF" %}</span>
      </a>
    </div>
  </div>
  <table class="table" id="tx-table">
    <thead>
      <tr>
        <th>{% trans "Date" %}</th>
        <th>{% trans "Type" %}</th>
        <th>{% trans "Account" %}</th>
        <th>{% trans "Category" %}</th>
        <th>{% trans "Amount" %}</th>
        <th>{% trans "Description" %}</th>
        <th>{% trans "Actions" %}</th>
      </tr>
    </thead>
    <tbody>
    {% for t in page_obj %}
      <tr>
        <td>{{ t.date }}</td>
        <td>
          {{ t.get_ttype_display }}
          {% if t.ttype == 'income' %}<span class="badge">{% trans "Sale" %}</span>{% endif %}
          {% 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 }} {{ biz.currency|currency_label }}</td>
        <td>{{ t.description }}</td>
        <td>
          {% if t.ttype == 'income' %}
            <a class="btn btn--sm btn--secondary" href="{% url 'transaction_receipt' t.id %}">
              <i class="bi bi-receipt"></i> {% trans "Receipt" %}
            </a>
          {% else %}
            <a class="btn btn--sm btn--secondary" href="{% url 'transaction_view' t.id %}">
              <i class="bi bi-eye"></i> {% trans "View" %}
            </a>
          {% endif %}
        </td>
      </tr>
    {% empty %}
      <tr><td colspan="7">{% trans "No transactions found." %}</td></tr>
    {% endfor %}
    </tbody>
  </table>

  {% if is_paginated %}
    <div id="tx-pager" class="flex-between" style="margin-top: var(--spacing);">
      <div class="muted">{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ paginator.num_pages }}</div>
      <div class="flex-end" style="gap:8px">
        {% if page_obj.has_previous %}
          <a class="btn btn--sm btn--secondary" href="?{% if params %}{{ params }}&{% endif %}page={{ page_obj.previous_page_number }}">{% trans "Prev" %}</a>
        {% else %}
          <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Prev" %}</span>
        {% endif %}
        {% for num in paginator.page_range %}
          {% if num == page_obj.number %}
            <span class="btn btn--sm btn--primary" aria-current="page">{{ num }}</span>
          {% elif num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
            <a class="btn btn--sm btn--secondary" href="?{% if params %}{{ params }}&{% endif %}page={{ num }}">{{ num }}</a>
          {% endif %}
        {% endfor %}
        {% if page_obj.has_next %}
          <a class="btn btn--sm btn--secondary" href="?{% if params %}{{ params }}&{% endif %}page={{ page_obj.next_page_number }}">{% trans "Next" %}</a>
        {% else %}
          <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Next" %}</span>
        {% endif %}
      </div>
    </div>
  {% endif %}
  <script>
// Simple inline calendar for the Date chip
(function(){
  const chip = document.getElementById('date-chip');
  if (!chip) return;
  const panel = chip.querySelector('.chip__panel');
  const grid = panel.querySelector('.datecal__grid');
  const label = panel.querySelector('[data-cal-label]');
  const prevBtn = panel.querySelector('[data-cal-prev]');
  const nextBtn = panel.querySelector('[data-cal-next]');
  const startInput = panel.querySelector('#start');
  const endInput = panel.querySelector('#end');

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

  let view = new Date();
  const s0 = startInput.value ? parse(startInput.value) : null;
  const e0 = endInput.value ? parse(endInput.value) : null;
  let selStart = s0; let selEnd = e0;

  function inRange(d){ if (!selStart || !selEnd) return false; const a = +new Date(selStart.getFullYear(), selStart.getMonth(), selStart.getDate()); const b = +new Date(selEnd.getFullYear(), selEnd.getMonth(), selEnd.getDate()); const x = +new Date(d.getFullYear(), d.getMonth(), d.getDate()); return x>Math.min(a,b) && x<Math.max(a,b); }
  function isSameDay(a,b){ return a && b && a.getFullYear()==b.getFullYear() && a.getMonth()==b.getMonth() && a.getDate()==b.getDate(); }

  function render(){
    const year = view.getFullYear();
    const month = view.getMonth();
    const locale = document.documentElement.lang || '{{ LANGUAGE_CODE|default:"fr" }}';
    label.textContent = view.toLocaleString(locale, {month:'long', year:'numeric'});

    // Rebuild grid (weekday headers + days)
    while (grid.firstChild) grid.removeChild(grid.firstChild);
    // Weekday headers starting on Sunday to match getDay()
    const dowBase = new Date(2024, 0, 7); // Sunday Jan 7, 2024 is a Sunday
    for (let i=0; i<7; i++){
      const d = new Date(dowBase.getFullYear(), dowBase.getMonth(), dowBase.getDate()+i);
      const head = document.createElement('div');
      head.className = 'datecal__dow';
      head.textContent = new Intl.DateTimeFormat(locale, {weekday:'narrow'}).format(d);
      grid.appendChild(head);
    }
    const first = new Date(year, month, 1);
    const startDow = first.getDay(); // 0 Sun .. 6 Sat
    const daysInMonth = new Date(year, month+1, 0).getDate();
    const prevDays = new Date(year, month, 0).getDate();

    // Leading days from previous month
    for (let i=startDow-1; i>=0; i--){
      const d = new Date(year, month-1, prevDays - i);
      const cell = document.createElement('div');
      cell.className = 'datecal__day out';
      cell.textContent = String(d.getDate());
      grid.appendChild(cell);
    }
    // Current month days
    for (let day=1; day<=daysInMonth; day++){
      const d = new Date(year, month, day);
      const cell = document.createElement('div');
      let cls = 'datecal__day';
      if (selStart && isSameDay(d, selStart)) cls += ' sel';
      if (selEnd && isSameDay(d, selEnd)) cls += ' sel';
      if (inRange(d)) cls += ' inrange';
      cell.className = cls;
      cell.textContent = String(day);
      cell.tabIndex = 0;
      cell.addEventListener('click', ()=>onPick(d));
      grid.appendChild(cell);
    }
    // Trailing to fill grid to multiple of 7 (optional)
    const cells = grid.children.length;
    const trailing = (cells % 7 === 0) ? 0 : (7 - (cells % 7));
    for (let i=1; i<=trailing; i++){
      const d = new Date(year, month+1, i);
      const cell = document.createElement('div');
      cell.className = 'datecal__day out';
      cell.textContent = String(d.getDate());
      grid.appendChild(cell);
    }
  }

  function onPick(d){
    // If no start or both set, start new selection
    if (!selStart || (selStart && selEnd)){
      selStart = d; selEnd = null; startInput.value = fmt(d); endInput.value = '';
    } else {
      // Set end; order independent
      selEnd = d;
      const a = +selStart, b = +selEnd;
      if (b < a){ const t = selStart; selStart = selEnd; selEnd = t; }
      startInput.value = fmt(selStart); endInput.value = fmt(selEnd);
    }
    render();
  }

  prevBtn.addEventListener('click', ()=>{ view = new Date(view.getFullYear(), view.getMonth()-1, 1); render(); });
  nextBtn.addEventListener('click', ()=>{ view = new Date(view.getFullYear(), view.getMonth()+1, 1); render(); });

  // Initialize view to start or today
  if (selStart) view = new Date(selStart.getFullYear(), selStart.getMonth(), 1);
  render();
})();

// Nav and autoscroll helpers
(function(){
  const form = document.getElementById('tx-filters');
  if (!form) return;
  // Hidden inputs for nav and autoscroll
  let navInput = form.querySelector('input[name="nav"]');
  if (!navInput){ navInput = document.createElement('input'); navInput.type='hidden'; navInput.name='nav'; form.appendChild(navInput); }
  let autoscroll = form.querySelector('input[name="autoscroll"]');
  if (!autoscroll){ autoscroll = document.createElement('input'); autoscroll.type='hidden'; autoscroll.name='autoscroll'; autoscroll.value='1'; form.appendChild(autoscroll); }

  const unitSel = document.getElementById('nav-unit');
  const prevBtn = document.getElementById('nav-prev');
  const nextBtn = document.getElementById('nav-next');
  function submitNav(dir){
    const unit = unitSel ? unitSel.value : 'day';
    navInput.value = unit + '_' + dir;
    form.submit();
  }
  if (prevBtn) prevBtn.addEventListener('click', ()=>submitNav('prev'));
  if (nextBtn) nextBtn.addEventListener('click', ()=>submitNav('next'));

  // On load, if autoscroll present, scroll table into view
  try{
    const params = new URLSearchParams(window.location.search);
    if (params.get('autoscroll') === '1'){
      const table = document.getElementById('tx-table');
      table && table.scrollIntoView({behavior:'smooth', block:'start'});
    }
  }catch(e){}
})();

// AJAX updates for date presets and Apply without full reload
(function(){
  const chip = document.getElementById('date-chip');
  const form = document.getElementById('tx-filters');
  if (!chip || !form) return;

  async function updateList(params){
    const url = window.location.pathname + '?' + params.toString();
    try{
      const res = await fetch(url, {headers:{'X-Requested-With':'XMLHttpRequest'}});
      const html = await res.text();
      const doc = new DOMParser().parseFromString(html, 'text/html');
      const newTable = doc.querySelector('#tx-table');
      const newPager = doc.querySelector('#tx-pager');
      if (newTable){ document.querySelector('#tx-table').replaceWith(newTable); }
      if (newPager){ const p = document.querySelector('#tx-pager'); p && p.replaceWith(newPager); }
      // Update chip labels from server-rendered doc
      const dateText = doc.querySelector('#date-chip summary').textContent.trim();
      const typeText = doc.querySelector('#type-chip-text')?.textContent;
      const accText = doc.querySelector('#account-chip-text')?.textContent;
      const catText = doc.querySelector('#category-chip-text')?.textContent;
      const searchText = doc.querySelector('#search-chip-text')?.textContent;
      const dateSummary = document.querySelector('#date-chip summary');
      if (dateSummary && dateText){ dateSummary.innerHTML = dateText; }
      if (typeText){ const el=document.getElementById('type-chip-text'); if (el) el.textContent=typeText; }
      if (accText){ const el=document.getElementById('account-chip-text'); if (el) el.textContent=accText; }
      if (catText){ const el=document.getElementById('category-chip-text'); if (el) el.textContent=catText; }
      if (searchText){ const el=document.getElementById('search-chip-text'); if (el) el.textContent=searchText; }
      // Update export links
      const excel = document.getElementById('export-excel');
      const pdf = document.getElementById('export-pdf');
      if (excel){ excel.href = excel.href.split('?')[0] + '?' + params.toString(); }
      if (pdf){ pdf.href = pdf.href.split('?')[0] + '?' + params.toString(); }
      // Push state and close popover
      history.pushState({}, '', url);
      chip.removeAttribute('open');
      // Scroll table into view
      const table = document.getElementById('tx-table');
      table && table.scrollIntoView({behavior:'smooth', block:'start'});
    }catch(e){
      // Fallback to full nav
      window.location.search = params.toString();
    }
  }

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

  // Intercept Apply in footer
  chip.addEventListener('click', (e)=>{
    const btn = e.target.closest('.chip__footer .btn.btn--primary');
    if (!btn) return;
    e.preventDefault();
    const start = chip.querySelector('#start')?.value || '';
    const end = chip.querySelector('#end')?.value || '';
    const params = new URLSearchParams(window.location.search);
    if (start) params.set('start', start); else params.delete('start');
    if (end) params.set('end', end); else params.delete('end');
    params.delete('range'); params.delete('page');
    updateList(params);
  });

  // Use AJAX for prev/next nav too
  const unitSel = document.getElementById('nav-unit');
  const prevBtn = document.getElementById('nav-prev');
  const nextBtn = document.getElementById('nav-next');
  async function submitNavAjax(dir){
    const params = new URLSearchParams(window.location.search);
    params.set('nav', (unitSel ? unitSel.value : 'day') + '_' + dir);
    params.delete('page');
    updateList(params);
  }
  if (prevBtn){ prevBtn.addEventListener('click', (e)=>{ e.preventDefault(); submitNavAjax('prev'); }); }
  if (nextBtn){ nextBtn.addEventListener('click', (e)=>{ e.preventDefault(); submitNavAjax('next'); }); }

  // Multi-list dynamic behavior (instant apply)
  document.addEventListener('change', (e)=>{
    const cb = e.target.closest('.multi-list input[type="checkbox"]');
    if (!cb) return;
    const list = cb.closest('.multi-list');
    const name = list?.getAttribute('data-name');
    if (!name) return;
    const allCb = list.querySelector('input[name="'+name+'"][data-all]');
    const items = Array.from(list.querySelectorAll('input[name="'+name+'"]:not([data-all])'));

    // Toggle logic
    if (cb.hasAttribute('data-all')){
      if (cb.checked){ items.forEach(i=>{ i.checked = true; }); }
    } else {
      if (cb.checked && allCb) allCb.checked = false;
      const checkedCount = items.filter(i=>i.checked).length;
      if (checkedCount === items.length && allCb){ allCb.checked = true; }
      if (checkedCount === 0 && allCb){ allCb.checked = true; }
    }

    // Build params reflecting current selections
    const params = new URLSearchParams(window.location.search);
    function applyMulti(field){
      const container = document.querySelector('.multi-list[data-name="'+field+'"]');
      if (!container) return;
      const all = container.querySelector('input[name="'+field+'"][data-all]');
      const opts = Array.from(container.querySelectorAll('input[name="'+field+'"]:not([data-all])'));
      const vals = Array.from(container.querySelectorAll('input[name="'+field+'"]:checked'))
                        .filter(el=>!el.hasAttribute('data-all'))
                        .map(el=>el.value);
      params.delete(field);
      // If All is checked OR every item is checked, append all values
      const everyChecked = opts.every(i=>i.checked);
      if ((all && all.checked) || everyChecked){
        opts.forEach(i=>params.append(field, i.value));
      } else if (vals.length){
        vals.forEach(v=>params.append(field, v));
      } else {
        // none selected – treat as All (append all)
        opts.forEach(i=>params.append(field, i.value));
      }
    }
    applyMulti('ttype');
    applyMulti('account');
    applyMulti('category');
    params.delete('page');
    updateList(params);
  });
})();

// Close any open chips when clicking outside or pressing Escape
document.addEventListener('click', (e)=>{
  if (!e.target.closest('.chip')){
    document.querySelectorAll('.chip[open]').forEach(d=>d.removeAttribute('open'));
  }
});
document.addEventListener('keydown', (e)=>{
  if (e.key === 'Escape'){
    document.querySelectorAll('.chip[open]').forEach(d=>d.removeAttribute('open'));
  }
});

// Ensure only one chip is open at a time
document.addEventListener('toggle', (e)=>{
  const d = e.target;
  if (!(d instanceof HTMLElement)) return;
  if (!d.classList.contains('chip')) return;
  if (d.open){
    document.querySelectorAll('.chip[open]').forEach(other=>{ if (other !== d) other.removeAttribute('open'); });
  }
}, true);
  </script>
</section>
{% endblock %}