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

{% block content %}
<section class="card">
  <h3>{% trans "Reports" %}</h3>
  {% comment %}
  <div class="toolbar" style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;" hidden>
    <details class="chip" id="date-chip-top">
      <summary class="btn btn--secondary">{% trans "Date" %}{% if date_label %}: {{ date_label }}{% endif %} ▼</summary>
      <div class="chip__panel">
        <div class="datepanel">
          <div class="datepanel__presets" style="display:flex; flex-wrap:wrap; gap:6px;">
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=today">{% trans "Today" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=yesterday">{% trans "Yesterday" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=week">{% trans "This week" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=lastweek">{% trans "Last week" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=month">{% trans "This month" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=lastmonth">{% trans "Last month" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=year">{% trans "This year" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=lastyear">{% trans "Last year" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=last7">{% trans "Last 7 days" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=last30">{% trans "Last 30 days" %}</a>
          </div>
          <form method="get" class="flex" style="display:grid; grid-template-columns: 1fr 1fr auto; gap:8px; margin-top:8px;">
            <input type="hidden" name="tab" value="{{ tab|default:'pl' }}">
            <div class="field">
              <label for="start">{% trans "Start" %}</label>
              <input type="date" id="start" name="start" value="{{ start|date:'Y-m-d' }}">
            </div>
            <div class="field">
              <label for="end">{% trans "End" %}</label>
              <input type="date" id="end" name="end" value="{{ end|date:'Y-m-d' }}">
            </div>
            <div style="display:flex; align-items:flex-end; gap:8px; padding-bottom:2px;">
              <button type="submit" class="btn btn--primary btn--sm">{% trans "Apply" %}</button>
              <a href="{% url 'report_index' %}" class="btn btn--tertiary btn--sm">{% trans "Clear" %}</a>
            </div>
          </form>
        </div>
      </div>
    </details>
    <div id="report-export-top" style="margin-left:auto; display:flex; gap:8px;">
      {% if tab == 'yesterday' %}
        <a href="{% url 'report_export_yesterday_csv' %}" class="btn btn--secondary">
          <i class="bi bi-download"></i> <span class="hide-sm">{% trans "Export Yesterday CSV" %}</span>
        </a>
      {% elif tab == 'customer' %}
        <a href="{% url 'report_export_customer_csv' %}?{% if params %}{{ params }}&{% endif %}{% if customer %}customer={{ customer.id }}{% endif %}" class="btn btn--secondary">
          <i class="bi bi-download"></i> <span class="hide-sm">{% trans "Export Customer CSV" %}</span>
        </a>
      {% elif tab == 'supplier' %}
        <a href="{% url 'report_export_supplier_csv' %}?{% if params %}{{ params }}&{% endif %}{% if supplier %}supplier={{ supplier.id }}{% endif %}" class="btn btn--secondary">
          <i class="bi bi-download"></i> <span class="hide-sm">{% trans "Export Supplier CSV" %}</span>
        </a>
      {% else %}
        <a href="{% url 'report_export_pl_csv' %}{% if params %}?{{ params }}{% endif %}" class="btn btn--secondary">
          <i class="bi bi-download"></i> <span class="hide-sm">{% trans "Export P&L CSV" %}</span>
        </a>
      {% endif %}
      <button onclick="window.print()" class="btn btn--secondary">
        <i class="bi bi-printer"></i> <span class="hide-sm">{% trans "Print" %}</span>
      </button>
    </div>
  </div>
  {% endcomment %}

  <div id="report-sticky" class="report-sticky">
    <div id="report-tabs" class="tabs" style="margin-top:8px; display:flex; gap:8px; flex-wrap:wrap;">
      <a class="btn {% if tab == 'yesterday' %}btn--primary{% else %}btn--secondary{% endif %}" href="?tab=yesterday">{% trans "Yesterday Sales" %}</a>
      <a class="btn {% if tab == 'pl' or not tab %}btn--primary{% else %}btn--secondary{% endif %}" href="?tab=pl">{% trans "P&L" %}</a>
      <a class="btn {% if tab == 'customer' %}btn--primary{% else %}btn--secondary{% endif %}" href="?tab=customer">{% trans "Customer Statement" %}</a>
      <a class="btn {% if tab == 'supplier' %}btn--primary{% else %}btn--secondary{% endif %}" href="?tab=supplier">{% trans "Supplier Statement" %}</a>
    </div>

    <!-- Controls moved below tabs for clarity -->
    <div id="report-controls" class="toolbar" style="display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px;">
      <details class="chip" id="date-chip">
        <summary class="btn btn--secondary">{% trans "Date Filter" %}{% if date_label %}: {{ date_label }}{% endif %} ▾</summary>
        <div class="chip__panel">
          <div class="datepanel">
            <div class="datepanel__presets" style="display:flex; flex-wrap:wrap; gap:6px;">
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=today">{% trans "Today" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=yesterday">{% trans "Yesterday" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=week">{% trans "This week" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=lastweek">{% trans "Last week" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=month">{% trans "This month" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=lastmonth">{% trans "Last month" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=year">{% trans "This year" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=lastyear">{% trans "Last year" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=last7">{% trans "Last 7 days" %}</a>
            <a class="btn btn--secondary btn--sm" href="?tab={{ tab|default:'pl' }}&range=last30">{% trans "Last 30 days" %}</a>
          </div>
          <form method="get" class="flex" style="display:grid; grid-template-columns: 1fr 1fr auto; gap:8px; margin-top:8px;">
            <input type="hidden" name="tab" value="{{ tab|default:'pl' }}">
            <div class="field">
              <label for="start">{% trans "Start" %}</label>
              <input type="date" id="start" name="start" value="{{ start|date:'Y-m-d' }}">
            </div>
            <div class="field">
              <label for="end">{% trans "End" %}</label>
              <input type="date" id="end" name="end" value="{{ end|date:'Y-m-d' }}">
            </div>
            <div style="display:flex; align-items:flex-end; gap:8px; padding-bottom:2px;">
              <button type="submit" class="btn btn--primary btn--sm">{% trans "Apply" %}</button>
              <a href="{% url 'report_index' %}" class="btn btn--tertiary btn--sm">{% trans "Clear" %}</a>
            </div>
          </form>
        </div>
        </div>
      </details>

      <div id="report-export" style="margin-left:auto; display:flex; gap:8px;">
        <a id="report-share" target="_blank" rel="noopener" href="https://wa.me/?text={{ share_text|urlencode }}" class="btn btn--secondary">
          <i class="bi bi-whatsapp"></i> <span class="hide-sm">{% trans "Share" %}</span>
        </a>
        <details class="chip" id="share-chip" hidden>
          <summary class="btn btn--secondary">
            <i class="bi bi-pencil-square"></i>
            <span class="hide-sm">{% trans "Edit Message" %}</span>
          </summary>
          <div class="chip__panel" style="min-width:340px;">
            <div class="field" style="margin-bottom:8px;">
              <label for="share-text">{% trans "Message" %}</label>
              <textarea id="share-text" rows="6" style="width:100%; border:1px solid var(--line); border-radius:8px; padding:8px;">{{ share_text }}</textarea>
            </div>
            <div class="chip__footer">
              <button type="button" class="btn btn--primary btn--sm" data-share-send>{% trans "Share" %}</button>
              <button type="button" class="btn btn--tertiary btn--sm" data-share-cancel>{% trans "Cancel" %}</button>
            </div>
          </div>
        </details>
        {% if tab == 'yesterday' %}
          <a href="{% url 'report_export_yesterday_csv' %}" class="btn btn--secondary">
            <i class="bi bi-download"></i> <span class="hide-sm">{% trans "Export Yesterday CSV" %}</span>
          </a>
        {% elif tab == 'customer' %}
          <a href="{% url 'report_export_customer_csv' %}?{% if params %}{{ params }}&{% endif %}{% if customer %}customer={{ customer.id }}{% endif %}" class="btn btn--secondary">
            <i class="bi bi-download"></i> <span class="hide-sm">{% trans "Export Customer CSV" %}</span>
          </a>
        {% elif tab == 'supplier' %}
          <a href="{% url 'report_export_supplier_csv' %}?{% if params %}{{ params }}&{% endif %}{% if supplier %}supplier={{ supplier.id }}{% endif %}" class="btn btn--secondary">
            <i class="bi bi-download"></i> <span class="hide-sm">{% trans "Export Supplier CSV" %}</span>
          </a>
        {% else %}
          <a href="{% url 'report_export_pl_csv' %}{% if params %}?{{ params }}{% endif %}" class="btn btn--secondary">
            <i class="bi bi-download"></i> <span class="hide-sm">{% trans "Export P&L CSV" %}</span>
          </a>
        {% endif %}
        <button onclick="window.print()" class="btn btn--secondary">
          <i class="bi bi-printer"></i> <span class="hide-sm">{% trans "Print" %}</span>
        </button>
      </div>
  </div>

  <div id="report-tab-content">
  {% if tab == 'yesterday' %}
  <div class="card" style="margin-top:12px;">
    <h3>{% trans "Yesterday Sales" %} — {{ yesterday }}</h3>
    <div style="margin:8px 0; font-weight:700;">{% trans "Total" %}: {{ yesterday_total }} {{ biz.currency|currency_label }}</div>
    <table class="table">
      <thead>
        <tr>
          <th>{% trans "Date" %}</th>
          <th>{% trans "Account" %}</th>
          <th>{% trans "Category" %}</th>
          <th>{% trans "Amount" %}</th>
          <th>{% trans "Note" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for t in yesterday_sales %}
        <tr>
          <td>{{ t.date }}</td>
          <td>{{ t.account.name }}</td>
          <td>{% if t.category %}{{ t.category.name }}{% endif %}</td>
          <td style="color:var(--success);">{{ t.amount }} {{ t.currency|currency_label }}</td>
          <td>{{ t.description }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="5">{% trans "No sales yesterday." %}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% elif tab == 'customer' %}
  <div class="card" style="margin-top:12px;">
    <h3>{% trans "Customer Statement" %}{% if customer %} — {{ customer.name }}{% endif %} — {{ start|date:'Y-m-d' }} {% trans "to" %} {{ end|date:'Y-m-d' }}</h3>
    <form method="get" class="flex" style="gap:8px; align-items:end; flex-wrap:wrap;">
      <input type="hidden" name="tab" value="customer">
      <div class="field">
        <label for="cust">{% trans "Customer" %}</label>
        <select id="cust" name="customer" class="select" onchange="this.form.submit()">
          <option value="">--</option>
          {% for c in customers %}
            <option value="{{ c.id }}" {% if customer and customer.id == c.id %}selected{% endif %}>{{ c.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label for="start-c">{% trans "Start" %}</label>
        <input type="date" id="start-c" name="start" value="{{ start|date:'Y-m-d' }}">
      </div>
      <div class="field">
        <label for="end-c">{% trans "End" %}</label>
        <input type="date" id="end-c" name="end" value="{{ end|date:'Y-m-d' }}">
      </div>
      <button class="btn btn--primary btn--sm" type="submit">{% trans "Apply" %}</button>
    </form>
    {% if customer %}
    <div style="margin:8px 0; display:flex; gap:16px; flex-wrap:wrap;">
      <div><span class="muted">{% trans "Total In" %}</span>: <strong>{{ customer_in_total }} {{ biz.currency|currency_label }}</strong></div>
      <div><span class="muted">{% trans "Total Out" %}</span>: <strong>{{ customer_out_total }} {{ biz.currency|currency_label }}</strong></div>
      <div><span class="muted">{% trans "Receivable" %}</span>: <strong>{{ customer_receivable }} {{ biz.currency|currency_label }}</strong></div>
    </div>
    <table class="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 "Note" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for t in customer_qs %}
        <tr>
          <td>{{ t.date }}</td>
          <td>{{ t.get_ttype_display }}</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 for this customer in range." %}</td></tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>
  {% elif tab == 'supplier' %}
  <div class="card" style="margin-top:12px;">
    <h3>{% trans "Supplier Statement" %}{% if supplier %} — {{ supplier.name }}{% endif %} — {{ start|date:'Y-m-d' }} {% trans "to" %} {{ end|date:'Y-m-d' }}</h3>
    <form method="get" class="flex" style="gap:8px; align-items:end; flex-wrap:wrap;">
      <input type="hidden" name="tab" value="supplier">
      <div class="field">
        <label for="supp">{% trans "Supplier" %}</label>
        <select id="supp" name="supplier" class="select" onchange="this.form.submit()">
          <option value="">--</option>
          {% for s in suppliers %}
            <option value="{{ s.id }}" {% if supplier and supplier.id == s.id %}selected{% endif %}>{{ s.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label for="start-s">{% trans "Start" %}</label>
        <input type="date" id="start-s" name="start" value="{{ start|date:'Y-m-d' }}">
      </div>
      <div class="field">
        <label for="end-s">{% trans "End" %}</label>
        <input type="date" id="end-s" name="end" value="{{ end|date:'Y-m-d' }}">
      </div>
      <button class="btn btn--primary btn--sm" type="submit">{% trans "Apply" %}</button>
    </form>
    {% if supplier %}
    <div style="margin:8px 0; display:flex; gap:16px; flex-wrap:wrap;">
      <div><span class="muted">{% trans "Total In" %}</span>: <strong>{{ supplier_in_total }} {{ biz.currency|currency_label }}</strong></div>
      <div><span class="muted">{% trans "Total Out" %}</span>: <strong>{{ supplier_out_total }} {{ biz.currency|currency_label }}</strong></div>
      <div><span class="muted">{% trans "Payable" %}</span>: <strong>{{ supplier_payable }} {{ biz.currency|currency_label }}</strong></div>
    </div>
    <table class="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 "Note" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for t in supplier_qs %}
        <tr>
          <td>{{ t.date }}</td>
          <td>{{ t.get_ttype_display }}</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 for this supplier in range." %}</td></tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>
  {% else %}
  <!-- Default: P&L view -->
  
  <div class="card" style="margin-top:12px;">
    <h3>{% trans "Profit & Loss" %} — {{ start|date:'Y-m-d' }} {% trans "to" %} {{ end|date:'Y-m-d' }}</h3>
    <div class="grid cols-3" style="gap:16px;">
      <div>
        <div style="font-weight:700; margin-bottom:6px;">{% trans "Income by Category" %}</div>
        <table class="table">
          <tbody>
            {% for row in pl_income_rows %}
              <tr><td>{{ row.category__name }}</td><td style="text-align:right;">{{ row.total }} {{ biz.currency|currency_label }}</td></tr>
            {% empty %}
              <tr><td colspan="2">{% trans "No income in range." %}</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div>
        <div style="font-weight:700; margin-bottom:6px;">{% trans "Expense by Category" %}</div>
        <table class="table">
          <tbody>
            {% for row in pl_expense_rows %}
              <tr><td>{{ row.category__name }}</td><td style="text-align:right;">{{ row.total }} {{ biz.currency|currency_label }}</td></tr>
            {% empty %}
              <tr><td colspan="2">{% trans "No expense in range." %}</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div>
        <div class="muted">{% trans "Net" %}</div>
        <div style="font-size:28px; font-weight:700;">{{ net }} {{ biz.currency|currency_label }}</div>
      </div>
    </div>
  </div>
  {% endif %}
  </div>

</section>

<style>
@media print{
  .sidebar, .topbar, .toolbar { display:none !important; }
  .main { padding:0; }
  .card { box-shadow:none; border:none; }
}
.report-sticky{ position: sticky; top: 56px; z-index: 8; background:#fff; border-bottom:1px solid var(--line); padding-bottom:8px; }
</style>

<script>
// AJAX tab switching without full reload
(function(){
  async function updateReport(params){
    const url = window.location.pathname + '?' + params.toString();
    try{
      const res = await fetch(url, { headers: { 'X-Requested-With': 'fetch' } });
      const html = await res.text();
      const doc = new DOMParser().parseFromString(html, 'text/html');
      // Replace sticky wrapper (tabs + controls)
      const newSticky = doc.querySelector('#report-sticky');
      const stickyEl = document.querySelector('#report-sticky');
      if (newSticky && stickyEl) stickyEl.innerHTML = newSticky.innerHTML;
      // Replace tab content
      const newContent = doc.querySelector('#report-tab-content');
      const contentEl = document.querySelector('#report-tab-content');
      if (newContent && contentEl) contentEl.innerHTML = newContent.innerHTML;
      // Update URL
      history.pushState({}, '', url);
      // Rebind chip handlers after controls were replaced
      initReportChip();
    }catch(err){
      window.location.href = url;
    }
  }

  // Delegate tab click handling
  document.addEventListener('click', (e)=>{
    const a = e.target.closest('#report-tabs a[href]');
    if (!a) return;
    e.preventDefault();
    const params = new URLSearchParams(window.location.search);
    const url = new URL(a.getAttribute('href'), window.location.origin);
    const nextTab = url.searchParams.get('tab') || 'pl';
    params.set('tab', nextTab);
    updateReport(params);
  });

  function initReportChip(){
    const chip = document.getElementById('date-chip');
    if (!chip) return;
    chip.addEventListener('click', chip._presetHandler || (chip._presetHandler = (e)=>{
      const a = e.target.closest('.datepanel__presets a[href]');
      if (!a) return;
      e.preventDefault();
      const params = new URLSearchParams(window.location.search);
      const link = new URL(a.getAttribute('href'), window.location.origin);
      const range = link.searchParams.get('range');
      const tab = link.searchParams.get('tab') || (new URL(window.location.href)).searchParams.get('tab') || 'pl';
      if (tab) params.set('tab', tab);
      if (range) params.set('range', range);
      params.delete('start'); params.delete('end');
      updateReport(params);
    }));
    chip.addEventListener('click', chip._applyHandler || (chip._applyHandler = (e)=>{
      const btn = e.target.closest('.chip__footer .btn.btn--primary');
      if (!btn) return;
      e.preventDefault();
      const params = new URLSearchParams(window.location.search);
      const start = chip.querySelector('#start')?.value || '';
      const end = chip.querySelector('#end')?.value || '';
      if (start) params.set('start', start); else params.delete('start');
      if (end) params.set('end', end); else params.delete('end');
      params.delete('range');
      updateReport(params);
    }));
  }

  // Initial bind
  initReportChip();
  initShareEditor();

  function initShareEditor(){
    const shareChip = document.getElementById('share-chip');
    if (!shareChip) return;
    shareChip.addEventListener('click', shareChip._handler || (shareChip._handler = (e)=>{
      const send = e.target.closest('[data-share-send]');
      const cancel = e.target.closest('[data-share-cancel]');
      if (send){
        e.preventDefault();
        const text = shareChip.querySelector('#share-text')?.value || '';
        const url = 'https://wa.me/?text=' + encodeURIComponent(text);
        window.open(url, '_blank', 'noopener');
        shareChip.removeAttribute('open');
      } else if (cancel){
        e.preventDefault();
        shareChip.removeAttribute('open');
      }
    }));
  }
})();
</script>
{% endblock %}