{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-4">
    <div>
      <p class="text-xs font-semibold uppercase tracking-[0.16em] text-brand-600">Accounting · Audit Analysis</p>
      <h1 class="mt-1 text-2xl font-semibold text-slate-900">Sundry Creditors – 180 Day Analysis</h1>
      <p class="mt-1 max-w-4xl text-sm text-slate-500">Analyses closing Sundry Creditors into ≤180 days and &gt;180 days from the local Accounting Mirror. The selected-FY closing balance is reconstructed from the ledger opening plus selected-FY movements. FIFO ageing is performed forward: Purchase credits create payable lots and debit-side payments/sales/adjustments clear the oldest payable lots first. Receipt/other credits are not presented as purchase bills. Bill-reference allocations are not yet stored in the .act mirror.</p>
    </div>
    <a href="/tools/tally{% if selected_client %}?client_id={{ selected_client.id }}{% endif %}" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back to Tally Accounting</a>
  </div>

  {% if error %}<div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">{{ error }}</div>{% endif %}

  <form method="get" class="grid gap-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm md:grid-cols-4">
    <input type="hidden" name="analyze" value="1">
    <label class="space-y-1 text-sm"><span class="font-semibold text-slate-700">Client</span>
      <select name="client_id" required class="w-full rounded-xl border border-slate-300 px-3 py-2">
        <option value="">Select client</option>
        {% for c in clients %}<option value="{{ c.id }}" {% if selected_client and c.id == selected_client.id %}selected{% endif %}>{{ c.client_name }}</option>{% endfor %}
      </select>
    </label>
    <label class="space-y-1 text-sm"><span class="font-semibold text-slate-700">Analysis FY</span>
      <select name="financial_year" class="w-full rounded-xl border border-slate-300 px-3 py-2">
        {% for fy in fy_options %}<option value="{{ fy }}" {% if fy == selected_fy %}selected{% endif %}>{{ fy }}</option>{% endfor %}
      </select>
    </label>
    <label class="space-y-1 text-sm"><span class="font-semibold text-slate-700">Follow-up FY (optional)</span>
      <select name="follow_up_fy" class="w-full rounded-xl border border-slate-300 px-3 py-2">
        <option value="">Do not trace later payments</option>
        {% for fy in fy_options %}{% if fy > selected_fy %}<option value="{{ fy }}" {% if fy == follow_up_fy %}selected{% endif %}>{{ fy }}</option>{% endif %}{% endfor %}
      </select>
    </label>
    <div class="flex items-end"><button class="w-full rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Analyse Creditors</button></div>
  </form>

  {% if analysis %}
  {% set s = analysis.summary or {} %}
  <div class="grid gap-4 md:grid-cols-3 xl:grid-cols-6">
    {% for label, value in [
      ('Total Closing Creditors', s.get('total_closing',0)), ('≤180 Days', s.get('within_180',0)), ('>180 Days', s.get('over_180',0)),
      ('>180 Paid Later', s.get('over_180_paid_later',0)), ('>180 Still Unpaid', s.get('over_180_still_unpaid',0)), ('Parties', s.get('party_count',0))] %}
    <div class="rounded-2xl border border-slate-200 bg-white p-4"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ label }}</div><div class="mt-2 text-xl font-semibold text-slate-900">{% if label == 'Parties' %}{{ value }}{% else %}₹ {{ '%.2f'|format(value) }}{% endif %}</div></div>
    {% endfor %}
  </div>

  <div class="flex flex-wrap items-center justify-between gap-3">
    <div class="text-xs text-slate-500">Allocation basis: <strong>{{ analysis.allocation_basis }}</strong>. Zero closing-balance creditors are excluded.</div>
    <a href="/tools/accounting/sundry-creditors/export.xlsx?client_id={{ selected_client.id }}&financial_year={{ selected_fy }}{% if follow_up_fy %}&follow_up_fy={{ follow_up_fy }}{% endif %}" class="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-800">Export Excel</a>
  </div>

  <div class="rounded-2xl border border-slate-200 bg-white">
    <div class="border-b border-slate-100 px-4 py-3 text-xs text-slate-500">
      Click a <strong>party name</strong> to see all surviving FIFO components, or click the <strong>≤180</strong> / <strong>&gt;180</strong> amount to drill directly into that age bucket. Genuine Purchase vouchers and opening/brought-forward balances are shown as payable lots; any surviving Receipt/other credit is separately labelled as Other credit / advance and is never presented as a purchase bill.
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full text-sm">
        <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-600"><tr><th class="px-4 py-3">Party</th><th class="px-4 py-3 text-right">≤180 Days</th><th class="px-4 py-3 text-right">&gt;180 Days</th><th class="px-4 py-3 text-right">Closing</th><th class="px-4 py-3 text-right">&gt;180 Paid Later</th><th class="px-4 py-3 text-right">Still Unpaid</th><th class="px-4 py-3">Final Payment Date</th></tr></thead>
        <tbody class="divide-y divide-slate-100">
        {% for row in analysis.parties %}
          {% set party_index = loop.index0 %}
          <tr>
            <td class="px-4 py-3 font-semibold text-slate-800">
              <button type="button" class="inline-flex items-center gap-2 text-left text-brand-700 hover:text-brand-900 hover:underline" data-creditor-drilldown data-target="creditor-detail-{{ party_index }}" data-bucket="all" aria-expanded="false">
                <span>{{ row.party_name }}</span><span aria-hidden="true" class="text-xs">▾</span>
              </button>
            </td>
            <td class="px-4 py-3 text-right">
              {% if row.within_180 > 0 %}<button type="button" class="font-semibold text-brand-700 hover:underline" data-creditor-drilldown data-target="creditor-detail-{{ party_index }}" data-bucket="within" aria-expanded="false">{{ '%.2f'|format(row.within_180) }}</button>{% else %}{{ '%.2f'|format(row.within_180) }}{% endif %}
            </td>
            <td class="px-4 py-3 text-right {% if row.over_180 > 0 %}font-semibold text-rose-700{% endif %}">
              {% if row.over_180 > 0 %}<button type="button" class="font-semibold text-rose-700 hover:underline" data-creditor-drilldown data-target="creditor-detail-{{ party_index }}" data-bucket="over" aria-expanded="false">{{ '%.2f'|format(row.over_180) }}</button>{% else %}{{ '%.2f'|format(row.over_180) }}{% endif %}
            </td>
            <td class="px-4 py-3 text-right font-semibold">{{ '%.2f'|format(row.closing_balance) }}</td>
            <td class="px-4 py-3 text-right">{{ '%.2f'|format(row.over_180_paid_later) }}</td>
            <td class="px-4 py-3 text-right">{{ '%.2f'|format(row.over_180_still_unpaid) }}</td>
            <td class="px-4 py-3">{{ row.final_payment_date or '—' }}</td>
          </tr>
          <tr id="creditor-detail-{{ party_index }}" class="hidden bg-slate-50/60" data-creditor-detail>
            <td colspan="7" class="px-4 py-4">
              <div class="rounded-xl border border-slate-200 bg-white">
                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-4 py-3">
                  <div>
                    <div class="font-semibold text-slate-900">{{ row.party_name }} · FIFO Outstanding Drill-down</div>
                    <div class="mt-1 text-xs text-slate-500">Closing ₹ {{ '%.2f'|format(row.closing_balance) }} · ≤180 ₹ {{ '%.2f'|format(row.within_180) }} · &gt;180 ₹ {{ '%.2f'|format(row.over_180) }}</div>
                  </div>
                  <div class="flex flex-wrap gap-2">
                    <button type="button" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50" data-creditor-filter="all">All outstanding</button>
                    <button type="button" class="rounded-lg border border-brand-200 bg-brand-50 px-3 py-1.5 text-xs font-semibold text-brand-700 hover:bg-brand-100" data-creditor-filter="within">≤180 days</button>
                    <button type="button" class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-1.5 text-xs font-semibold text-rose-700 hover:bg-rose-100" data-creditor-filter="over">&gt;180 days</button>
                    <button type="button" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 hover:bg-slate-50" data-creditor-close>Close</button>
                  </div>
                </div>
                <div class="overflow-x-auto">
                  <table class="min-w-full text-xs">
                    <thead class="bg-slate-50 text-left font-semibold uppercase tracking-wide text-slate-600">
                      <tr><th class="px-3 py-2">Source</th><th class="px-3 py-2">Purchase / Voucher Date</th><th class="px-3 py-2">Voucher Type</th><th class="px-3 py-2">Voucher No.</th><th class="px-3 py-2">Reference</th><th class="px-3 py-2 text-right">Original Credit</th><th class="px-3 py-2 text-right">Outstanding at FY End</th><th class="px-3 py-2 text-right">Age Days</th><th class="px-3 py-2">Bucket</th><th class="px-3 py-2 text-right">Paid Later</th><th class="px-3 py-2 text-right">Follow-up Balance</th><th class="px-3 py-2">Final Paid</th></tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                    {% set ns = namespace(found=false) %}
                    {% for detail in analysis.details %}
                      {% if detail.party_name == row.party_name %}
                        {% set ns.found = true %}
                        <tr data-creditor-lot data-bucket="{% if detail.age_bucket == '>180 Days' %}over{% else %}within{% endif %}">
                          <td class="px-3 py-2">{{ detail.source }}</td>
                          <td class="px-3 py-2 whitespace-nowrap">{{ detail.voucher_date }}</td>
                          <td class="px-3 py-2">{{ detail.voucher_type or '—' }}</td>
                          <td class="px-3 py-2 font-medium text-slate-800">{{ detail.voucher_number or '—' }}</td>
                          <td class="px-3 py-2">{{ detail.reference or '—' }}</td>
                          <td class="px-3 py-2 text-right">{{ '%.2f'|format(detail.original_credit) }}</td>
                          <td class="px-3 py-2 text-right font-semibold">{{ '%.2f'|format(detail.outstanding_at_fy_end) }}</td>
                          <td class="px-3 py-2 text-right">{{ detail.age_days }}</td>
                          <td class="px-3 py-2 {% if detail.age_bucket == '>180 Days' %}font-semibold text-rose-700{% else %}font-semibold text-brand-700{% endif %}">{{ detail.age_bucket }}</td>
                          <td class="px-3 py-2 text-right">{{ '%.2f'|format(detail.paid_subsequently) }}</td>
                          <td class="px-3 py-2 text-right">{{ '%.2f'|format(detail.balance_after_follow_up) }}</td>
                          <td class="px-3 py-2 whitespace-nowrap">{{ detail.final_payment_date or '—' }}</td>
                        </tr>
                      {% endif %}
                    {% endfor %}
                    {% if not ns.found %}<tr><td colspan="12" class="px-3 py-6 text-center text-slate-500">No surviving FIFO bill lots were found for this party.</td></tr>{% endif %}
                    </tbody>
                  </table>
                </div>
                <div class="border-t border-slate-100 px-4 py-3 text-xs text-slate-500">
                  <strong>Note:</strong> “Opening / brought forward” represents an old balance whose originating bill is outside the selected FY/mirror history. “Purchase voucher” rows are FIFO-derived outstanding purchase bills. “Other credit / advance” is disclosed separately only when a non-purchase credit remains in the ledger closing after FIFO netting; it is not represented as a purchase bill. These are not Tally bill-reference allocations.
                </div>
              </div>
            </td>
          </tr>
        {% else %}
          <tr><td colspan="7" class="px-4 py-8 text-center text-slate-500">No non-zero Sundry Creditors were found for the selected FY.</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <details class="rounded-2xl border border-slate-200 bg-white" open><summary class="cursor-pointer px-5 py-4 font-semibold text-slate-800">FIFO closing-balance detail ({{ analysis.details|length }})</summary>
    <div class="overflow-x-auto border-t border-slate-100"><table class="min-w-full text-xs"><thead class="bg-slate-50 text-left font-semibold uppercase tracking-wide text-slate-600"><tr><th class="px-3 py-2">Party</th><th class="px-3 py-2">Source</th><th class="px-3 py-2">Date</th><th class="px-3 py-2">Voucher</th><th class="px-3 py-2 text-right">Original</th><th class="px-3 py-2 text-right">FY Closing</th><th class="px-3 py-2 text-right">Age</th><th class="px-3 py-2">Bucket</th><th class="px-3 py-2 text-right">Paid Later</th><th class="px-3 py-2 text-right">Follow-up Balance</th><th class="px-3 py-2">Final Paid</th></tr></thead><tbody class="divide-y divide-slate-100">{% for row in analysis.details %}<tr><td class="px-3 py-2">{{ row.party_name }}</td><td class="px-3 py-2">{{ row.source }}</td><td class="px-3 py-2">{{ row.voucher_date }}</td><td class="px-3 py-2">{{ row.voucher_type }} {{ row.voucher_number }}</td><td class="px-3 py-2 text-right">{{ '%.2f'|format(row.original_credit) }}</td><td class="px-3 py-2 text-right">{{ '%.2f'|format(row.outstanding_at_fy_end) }}</td><td class="px-3 py-2 text-right">{{ row.age_days }}</td><td class="px-3 py-2 {% if row.age_bucket == '>180 Days' %}font-semibold text-rose-700{% endif %}">{{ row.age_bucket }}</td><td class="px-3 py-2 text-right">{{ '%.2f'|format(row.paid_subsequently) }}</td><td class="px-3 py-2 text-right">{{ '%.2f'|format(row.balance_after_follow_up) }}</td><td class="px-3 py-2">{{ row.final_payment_date or '—' }}</td></tr>{% endfor %}</tbody></table></div>
  </details>
  {% endif %}
</div>

<script>
(function () {
  function applyBucket(detailRow, bucket) {
    if (!detailRow) return;
    detailRow.querySelectorAll('[data-creditor-lot]').forEach(function (lot) {
      var show = bucket === 'all' || lot.dataset.bucket === bucket;
      lot.classList.toggle('hidden', !show);
    });
  }

  document.querySelectorAll('[data-creditor-drilldown]').forEach(function (button) {
    button.addEventListener('click', function () {
      var detailRow = document.getElementById(button.dataset.target);
      if (!detailRow) return;
      var bucket = button.dataset.bucket || 'all';
      var currentlyHidden = detailRow.classList.contains('hidden');
      document.querySelectorAll('[data-creditor-detail]').forEach(function (row) {
        if (row !== detailRow) row.classList.add('hidden');
      });
      if (!currentlyHidden && detailRow.dataset.activeBucket === bucket) {
        detailRow.classList.add('hidden');
        detailRow.dataset.activeBucket = '';
        return;
      }
      detailRow.classList.remove('hidden');
      detailRow.dataset.activeBucket = bucket;
      applyBucket(detailRow, bucket);
      detailRow.scrollIntoView({behavior: 'smooth', block: 'nearest'});
    });
  });

  document.querySelectorAll('[data-creditor-detail]').forEach(function (detailRow) {
    detailRow.querySelectorAll('[data-creditor-filter]').forEach(function (button) {
      button.addEventListener('click', function () {
        var bucket = button.dataset.creditorFilter || 'all';
        detailRow.dataset.activeBucket = bucket;
        applyBucket(detailRow, bucket);
      });
    });
    var closeButton = detailRow.querySelector('[data-creditor-close]');
    if (closeButton) {
      closeButton.addEventListener('click', function () {
        detailRow.classList.add('hidden');
        detailRow.dataset.activeBucket = '';
      });
    }
  });
})();
</script>
{% endblock %}