{% extends "pos/base.html" %}
{% load static %}

{% block title %}Ledger Search{% endblock %}

{% block stylesheets %}
<link href="{% static 'vendor/select2/css/select2.min.css' %}" rel="stylesheet"/>
<style>
  :root{
    --lg-navy: #1a2b4c; --lg-navy-dark: #10192e;
    --lg-green: #0e6b3f; --lg-red: #a3261a; --lg-amber: #9a6b12;
    --lg-border: #ccd2da; --lg-border-soft: #e3e7ec;
    --lg-bg-head: #eef1f5; --lg-bg-page: #f6f7f9;
  }
  .lg-wrap{ width:100%; max-width:1900px; margin:0 auto; padding:0 18px; }

  .lg-toolbar{
    background:#fff; border:1px solid var(--lg-border); border-radius:6px;
    padding:10px 16px; margin-bottom:10px;
    display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  }
  .lg-toolbar .form-group{ margin-bottom:0; }
  .lg-toolbar label{ font-size:.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; color:#000; margin-bottom:3px; display:block; }
  .lg-toolbar input[type=date], .lg-toolbar select.form-control{
    border:1px solid var(--lg-border); border-radius:4px; height:32px; font-size:.82rem; color:#000; padding:0 8px; }
  .lg-party-select{ width: 300px; }
  .select2-container--default .select2-selection--single{
    height:32px!important; border:1px solid var(--lg-border); border-radius:4px;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:30px!important; padding-left:8px; color:#000!important; font-size:.82rem;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow{ height:30px!important; }

  .lg-actions-group{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

  .btn-lg-primary{ background:var(--lg-navy); border:1px solid var(--lg-navy); color:#fff; font-weight:700;
    border-radius:4px; height:32px; padding:0 14px; font-size:.82rem; }
  .btn-lg-primary:hover{ background:var(--lg-navy-dark); border-color:var(--lg-navy-dark); color:#fff; }
  .btn-lg-outline{ border:1px solid var(--lg-border); border-radius:4px; height:32px; padding:0 12px; font-size:.82rem;
    background:#fff; color:#000; font-weight:700; }
  .btn-lg-outline:hover{ background:var(--lg-bg-page); border-color:#a7afba; }
  .btn-lg-outline:disabled{ opacity:.45; cursor:not-allowed; }

  .lg-doc{ background:#fff; border:1px solid var(--lg-border); border-radius:6px; overflow:hidden; }

  .lg-info-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
    padding:8px 16px; border-bottom:1px solid var(--lg-border); color:#000; }
  .lg-info-bar.lg-info-sub{ background:var(--lg-bg-page); font-size:.8rem; color:#000; }
  .lg-info-bar.lg-info-sub strong{ color:#000; }
  .lg-party-name{ font-size:.98rem; font-weight:800; color:#000; }
  .lg-info-meta{ font-size:.78rem; font-weight:600; color:#000; }
  .lg-info-spacer{ flex:1 1 auto; }
  .lg-amount-inline{ font-family:'Courier New',monospace; font-weight:700; color:#000; }

  .lg-status-pill{ display:inline-block; padding:2px 10px; border-radius:4px; font-weight:800; font-size:.72rem; }
  .lg-status-pill.lg-status-over{ background:#f9e0dc; color:var(--lg-red); }
  .lg-status-pill.lg-status-warning{ background:#faecd2; color:var(--lg-amber); }
  .lg-status-pill.lg-status-ok{ background:#dcf0e5; color:var(--lg-green); }
  .lg-text-red{ color:var(--lg-red); font-weight:700; }
  .lg-text-green{ color:var(--lg-green); font-weight:700; }

  .lg-cards{ display:flex; gap:0; flex-wrap:wrap; border-top:1px solid var(--lg-border); }
  .lg-card{ flex:1 1 160px; min-width:160px; padding:8px 14px; border-right:1px solid var(--lg-border); border-bottom:1px solid var(--lg-border); }
  .lg-card:last-child{ border-right:none; }
  .lg-card .lg-card-label{ font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; color:#000; font-weight:700; }
  .lg-card .lg-card-value{ font-size:.94rem; font-weight:800; color:#000; margin-top:2px; font-family:'Courier New',monospace; }

  .lg-statements-head{ padding:7px 16px; font-weight:800; font-size:.78rem; text-transform:uppercase;
    letter-spacing:.05em; color:#000; background:var(--lg-bg-head); border-bottom:1px solid var(--lg-border); }

  .lg-filter-row{ padding:8px 16px; border-bottom:1px solid var(--lg-border); background:var(--lg-bg-page); }
  .lg-filter-row input{ max-width:300px; height:30px; font-size:.8rem; }

  table.lg-table{ width:100%; border-collapse:collapse; font-size:.8rem; table-layout:auto; }
  table.lg-table thead th{
    font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:#000;
    font-weight:800; padding:6px 10px; text-align:left; border-bottom:2px solid var(--lg-border);
    border-right:1px solid var(--lg-border);
    background:var(--lg-bg-head);
  }
  table.lg-table thead th:last-child{ border-right:none; }
  table.lg-table thead th.text-right{ text-align:right; }
  table.lg-table .lg-col-tight{ white-space:nowrap; width:1%; }
  table.lg-table tbody td{ padding:5px 10px; border-bottom:1px solid var(--lg-border-soft);
    border-right:1px solid var(--lg-border-soft); vertical-align:top; color:#000; line-height:1.35; }
  table.lg-table tbody td:last-child{ border-right:none; }
  table.lg-table tbody tr.lg-row-b{ background:var(--lg-bg-page); }
  table.lg-table tbody tr.lg-data-row:hover{ background:#eaf0fb; }
  table.lg-table tbody tr.lg-data-row td:last-child{ font-weight:800; }
  .lg-amount{ font-family:'Courier New', monospace; white-space:nowrap; text-align:right; color:#000; }
  .lg-row-clickable{ cursor:pointer; }
  .lg-voucher-link{ font-weight:700; color:var(--lg-navy); text-decoration:none; }
  .lg-voucher-link:hover{ text-decoration:underline; }
  .lg-detail-text{ font-size:.78rem; color:#000; line-height:1.5; }
  .lg-ref-text{ font-family:'Courier New',monospace; font-size:.78rem; color:#000; line-height:1.5; }
  .lg-opening-row td{ background:var(--lg-bg-page); font-weight:800; color:#000; }
  .lg-total-row td{ border-top:2px solid var(--lg-navy); background:var(--lg-bg-head); font-weight:800; color:#000; }

  .lg-pagination-bar{ display:flex; justify-content:space-between; align-items:center;
    padding:8px 16px; border-top:1px solid var(--lg-border); }
  .lg-pagination-btns{ display:flex; gap:6px; }
  #lgPageInfo{ font-size:.78rem; color:#000; font-weight:600; }

  .lg-summary-section{ border-top:2px solid var(--lg-border); }
  .lg-summary-head{ background:var(--lg-bg-head); padding:7px 16px; font-size:.74rem; font-weight:800;
    letter-spacing:.05em; text-transform:uppercase; color:#000; border-bottom:1px solid var(--lg-border); }
  .lg-badge{ display:inline-block; padding:2px 8px; border-radius:3px; font-size:.68rem; font-weight:700;
    background:var(--lg-bg-head); color:#000; border:1px solid var(--lg-border); }

  .lg-empty{ text-align:center; padding:40px 20px; color:#000; }
  .lg-empty i{ font-size:2rem; margin-bottom:8px; opacity:.35; }

  @media print{
    .no-print{ display:none !important; }
    .lg-wrap{ max-width:100%; padding:0; }
    .lg-doc{ border:1px solid #999; }
  }
</style>
{% endblock %}

{% block heading %}Ledger Search{% endblock %}

{% block content %}
<div class="lg-wrap">

  <form method="get" class="lg-toolbar no-print" id="ledgerSearchForm">
    <div class="form-group">
      <label>Party (Customer / Vendor / Other)</label>
      <select name="party_id" id="partySelect" class="lg-party-select">
        {% if party %}<option value="{{ party.id }}" selected>{{ party.name }} ({{ party.get_party_type_display }})</option>{% endif %}
      </select>
    </div>
    <div class="form-group">
      <label>From</label>
      <input type="date" name="date_from" class="form-control" value="{{ date_from }}">
    </div>
    <div class="form-group">
      <label>To</label>
      <input type="date" name="date_to" class="form-control" value="{{ date_to }}">
    </div>
    <div class="form-group">
      <label>Pagination</label>
      <select id="lgPageSize" class="form-control">
        <option value="25">25</option>
        <option value="50" selected>50</option>
        <option value="100">100</option>
        <option value="0">All</option>
      </select>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-lg-primary"><i class="fas fa-search mr-1"></i>Search</button>
    </div>
    <div class="form-group">
      <button type="submit" name="show_all" value="1" class="btn btn-lg-outline" title="Ignore the date range and show every transaction for this party">
        <i class="fas fa-infinity mr-1"></i>Search Complete Ledger
      </button>
    </div>
    {% if ledger %}
    <div class="lg-actions-group">
      <button type="button" class="btn btn-lg-outline" onclick="window.print()"><i class="fas fa-print mr-1"></i>Print</button>
      <a class="btn btn-lg-outline" href="{% url 'coa:ledger_search_export_pdf' %}?party_id={{ party.id }}&date_from={{ date_from }}&date_to={{ date_to }}">
        <i class="fas fa-file-pdf mr-1"></i>PDF
      </a>
      <a class="btn btn-lg-outline" href="{% url 'coa:ledger_search_export_excel' %}?party_id={{ party.id }}&date_from={{ date_from }}&date_to={{ date_to }}">
        <i class="fas fa-file-excel mr-1"></i>Excel
      </a>
    </div>
    {% endif %}
  </form>

  {% if not party %}
    <div class="lg-doc">
      <div class="lg-empty">
        <i class="fas fa-search"></i>
        <p>Search and select a party above, then click <strong>Search</strong> to view their ledger.</p>
      </div>
    </div>
  {% else %}

  <div class="lg-doc">

    <div class="lg-info-bar">
      <span class="lg-party-name">{{ party.name }}</span>
      <span class="lg-info-meta">{{ party.get_party_type_display }}{% if party.phone %} · {{ party.phone }}{% endif %} · {% if show_all %}All Time{% else %}{{ date_from }} to {{ date_to }}{% endif %}</span>
      <span class="lg-info-spacer"></span>
      {% if ledger.balance_status == 'over' %}
        <span class="lg-status-pill lg-status-over">Exceed - Credit Limit</span>
      {% elif ledger.balance_status == 'warning' %}
        <span class="lg-status-pill lg-status-warning">Approaching Credit Limit</span>
      {% endif %}
    </div>

    {% if ledger.credit_limit %}
    <div class="lg-info-bar lg-info-sub">
      <span><strong>Credit Limit:</strong> <span class="lg-amount-inline">{{ ledger.credit_limit|floatformat:2 }}</span></span>
      <span><strong>Total Ledger Balance:</strong> <span class="lg-amount-inline{% if ledger.balance_status == 'over' %} lg-text-red{% endif %}">{{ ledger.closing_balance|floatformat:2 }} {{ ledger.closing_balance_type }}</span></span>
    </div>
    {% endif %}

    <div class="lg-statements-head no-print">Statements</div>

    <div class="lg-filter-row no-print">
      <input type="text" id="lgRowFilter" class="form-control"
             placeholder="Search this ledger... (invoice no, narration, Tkt/PNR)"
             oninput="lgFilterRows(this.value)">
      <small id="lgFilterCount" style="display:block; margin-top:3px; color:#000;"></small>
    </div>

    <table class="lg-table">
      <thead>
        <tr>
          <th class="lg-col-tight">Date</th>
          <th class="lg-col-tight">Invoice No</th>
          <th class="lg-col-tight">Type</th>
          <th class="lg-col-tight">Ref# / TKT</th>
          <th>Narration</th>
          <th class="text-right lg-col-tight">Debit</th>
          <th class="text-right lg-col-tight">Credit</th>
          <th class="text-right lg-col-tight">Balance</th>
        </tr>
      </thead>
      <tbody id="ledgerTableBody">
        <tr class="lg-opening-row">
          <td colspan="7">Opening Balance</td>
          <td class="lg-amount">{{ ledger.opening_balance|floatformat:2 }} {{ ledger.opening_balance_type }}</td>
        </tr>
        {% for ln in ledger.lines %}
        <tr class="lg-data-row {% cycle 'lg-row-a' 'lg-row-b' %} {% if ln.link_url %}lg-row-clickable{% endif %}"
            {% if ln.link_url %}onclick="window.open('{{ ln.link_url }}', '_blank')"{% endif %}>
          <td class="lg-col-tight">{{ ln.date }}</td>
          <td class="lg-col-tight">
            {% if ln.link_url %}
              <a href="{{ ln.link_url }}" target="_blank" class="lg-voucher-link" onclick="event.stopPropagation();">{{ ln.voucher_no }}</a>
            {% else %}
              {{ ln.voucher_no }}
            {% endif %}
          </td>
          <td class="lg-col-tight"><span class="lg-badge">{{ ln.voucher_type }}</span></td>
          <td class="lg-ref-text lg-col-tight"></td>
          <td>
            {% if ln.voucher_type_code == 'SL' or ln.voucher_type_code == 'CN' or ln.voucher_type_code == 'PU' %}
              <span class="lg-detail-text">{{ ln.description|default:ln.link_detail }}</span>
            {% else %}
              <span class="lg-detail-text">{{ ln.link_detail|default:ln.description }}</span>
            {% endif %}
          </td>
          <td class="lg-amount lg-col-tight">{% if ln.debit %}{{ ln.debit|floatformat:2 }}{% endif %}</td>
          <td class="lg-amount lg-col-tight">{% if ln.credit %}{{ ln.credit|floatformat:2 }}{% endif %}</td>
          <td class="lg-amount lg-col-tight">{{ ln.running_balance|floatformat:2 }} {{ ln.balance_side }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="8" class="text-center py-4" style="color:#000;">No transactions in this period.</td></tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr class="lg-total-row">
          <td colspan="5">Totals</td>
          <td class="lg-amount">{{ ledger.total_debit|floatformat:2 }}</td>
          <td class="lg-amount">{{ ledger.total_credit|floatformat:2 }}</td>
          <td class="lg-amount">{{ ledger.closing_balance|floatformat:2 }} {{ ledger.closing_balance_type }}</td>
        </tr>
      </tfoot>
    </table>

    <div class="lg-pagination-bar no-print">
      <span id="lgPageInfo"></span>
      <div class="lg-pagination-btns">
        <button type="button" class="btn btn-lg-outline" id="lgPrevPage" onclick="lgChangePage(-1)">Previous</button>
        <button type="button" class="btn btn-lg-outline" id="lgNextPage" onclick="lgChangePage(1)">Next</button>
      </div>
    </div>

    {% if ledger.voucher_summary %}
    <div class="lg-summary-section">
      <div class="lg-summary-head">Voucher Summary</div>
      <div class="lg-cards">
        {% for s in ledger.voucher_summary %}
        <div class="lg-card">
          <div class="lg-card-label">{{ s.voucher_type_label }} ({{ s.count }})</div>
          <div class="lg-card-value"><span class="lg-text-green">{{ s.total_debit|floatformat:2 }}</span> / <span class="lg-text-red">{{ s.total_credit|floatformat:2 }}</span></div>
        </div>
        {% endfor %}
        <div class="lg-card">
          <div class="lg-card-label">Closing Balance</div>
          <div class="lg-card-value">{{ ledger.closing_balance|floatformat:2 }} {{ ledger.closing_balance_type }}</div>
        </div>
      </div>
    </div>
    {% endif %}

  </div>
  {% endif %}

</div>
{% endblock %}

{% block javascripts %}
<script src="{% static 'vendor/select2/js/select2.full.min.js' %}"></script>
<script>
$(document).ready(function(){
  $('#partySelect').select2({
    width: '100%',
    ajax: {
      url: "{% url 'coa:ajax_party_search' %}",
      dataType: 'json',
      delay: 250,
      data: function (params) { return { q: params.term }; },
      processResults: function (data) { return { results: data.results }; }
    },
    minimumInputLength: 1,
    placeholder: 'Search Customer / Vendor / Other...'
  });
});

// ── Narration formatting: for cells containing "Tkt:" (one or more
// tickets under one invoice line), pull the ticket number out of each
// segment into the adjacent Ref# cell, bold "PNR:" in what's left, and
// stack multiple tickets one per line in both cells (same row index in
// each so they line up). Cells with no "Tkt:" (bank narration, plain
// descriptions) are left exactly as rendered.
function lgFormatNarrationCells() {
  function escapeHtml(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }

  document.querySelectorAll('.lg-detail-text').forEach(function (cell) {
    var raw = cell.textContent;
    if (!raw || raw.indexOf('Tkt:') === -1) return;

    var refCell = cell.parentElement.previousElementSibling;

    var segments = raw.split('Tkt:').filter(function (s) { return s.trim() !== ''; });
    var refLines = [];
    var narrLines = [];

    segments.forEach(function (seg) {
      seg = seg.trim().replace(/[,;]+$/, '');
      var dashIdx = seg.indexOf(' - ');
      var tktNo, rest;
      if (dashIdx === -1) {
        tktNo = seg;
        rest = '';
      } else {
        tktNo = seg.substring(0, dashIdx);
        rest = seg.substring(dashIdx + 3);
      }
      refLines.push(tktNo);
      narrLines.push(rest);
    });

    if (refCell) {
      refCell.innerHTML = refLines.map(escapeHtml).join('<br>');
    }
    cell.innerHTML = narrLines
      .map(function (line) { return escapeHtml(line).replace(/PNR:/g, '<strong>PNR:</strong>'); })
      .join('<br>');
  });
}

// ── Row text filter — while active it overrides pagination and shows
// every matching row (Opening Balance / Totals rows are untagged, so
// they're never hidden either way).
var lgFilterActive = false;

function lgFilterRows(term) {
  term = term.trim().toLowerCase();
  var rows = document.querySelectorAll('#ledgerTableBody tr.lg-data-row');
  lgFilterActive = !!term;
  var shown = 0;
  rows.forEach(function(row){
    if (lgFilterActive) {
      var match = row.textContent.toLowerCase().indexOf(term) !== -1;
      row.style.display = match ? '' : 'none';
      if (match) shown++;
    }
  });
  var countEl = document.getElementById('lgFilterCount');
  if (countEl) {
    countEl.textContent = lgFilterActive ? (shown + ' of ' + rows.length + ' rows match') : '';
  }
  var pagBar = document.querySelector('.lg-pagination-bar');
  if (pagBar) pagBar.style.display = lgFilterActive ? 'none' : '';
  if (!lgFilterActive) lgApplyPagination();
}

// ── Client-side pagination. All rows are already rendered server-side
// with correct running balances — this only windows how many show at
// once, so page size can change instantly with no server round-trip.
var lgCurrentPage = 1;
var lgPageSize = 50;

function lgApplyPagination() {
  if (lgFilterActive) return;
  var rows = Array.prototype.slice.call(document.querySelectorAll('#ledgerTableBody tr.lg-data-row'));
  var total = rows.length;
  var pageSize = lgPageSize || total || 1;
  var totalPages = Math.max(1, Math.ceil(total / pageSize));
  if (lgCurrentPage > totalPages) lgCurrentPage = totalPages;
  if (lgCurrentPage < 1) lgCurrentPage = 1;

  var start = (lgCurrentPage - 1) * pageSize;
  var end = lgPageSize ? (start + pageSize) : total;

  rows.forEach(function(row, i){
    row.style.display = (i >= start && i < end) ? '' : 'none';
  });

  var info = document.getElementById('lgPageInfo');
  if (info) {
    info.textContent = total ? ('Showing ' + (start + 1) + '-' + Math.min(end, total) + ' of ' + total) : '';
  }
  var prevBtn = document.getElementById('lgPrevPage');
  var nextBtn = document.getElementById('lgNextPage');
  if (prevBtn) prevBtn.disabled = (lgCurrentPage <= 1);
  if (nextBtn) nextBtn.disabled = (lgCurrentPage >= totalPages);
}

function lgChangePage(delta) {
  lgCurrentPage += delta;
  lgApplyPagination();
}

document.addEventListener('DOMContentLoaded', function () {
  lgFormatNarrationCells();

  var sizeSelect = document.getElementById('lgPageSize');
  if (sizeSelect) {
    lgPageSize = parseInt(sizeSelect.value, 10) || 0;
    sizeSelect.addEventListener('change', function () {
      lgPageSize = parseInt(this.value, 10) || 0;
      lgCurrentPage = 1;
      lgApplyPagination();
    });
  }
  lgApplyPagination();
});
</script>
{% endblock %}