{% extends "pos/base.html" %}
{% load static %}
{% block title %}Invoice Wise Aging{% endblock %}

{% block stylesheets %}
<style>
  #invAgingProgress { display: none; margin: 20px 0; }
  #invAgingProgress .progress { height: 28px; border-radius: 6px; background: #e9ecef; }
  #invAgingProgress .progress-bar { font-size: 13px; font-weight: 600; transition: width 0.3s ease; }
  #invProgressText { font-size: 13px; color: #666; margin-top: 6px; }

  .inv-summary-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
  .inv-card {
    flex: 1; min-width: 130px; border-radius: 8px; padding: 14px 16px;
    text-align: center; border: 1px solid #dee2e6; background: #e3f2fd;
  }
  .inv-card .label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
  .inv-card .value { font-size: 20px; font-weight: 700; margin-top: 4px; color: #1565c0; }

  #invAgingTable th { white-space: nowrap; font-size: 12px; }
  #invAgingTable td { font-size: 12px; vertical-align: middle; }
  .text-danger-bold { color: #c62828; font-weight: 600; }
  .badge-bucket {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 600; color: #fff;
  }
  .badge-0_30    { background: #43a047; }
  .badge-31_60   { background: #fb8c00; }
  .badge-61_90   { background: #e65100; }
  .badge-91_120  { background: #d32f2f; }
  .badge-120_plus { background: #6a1b9a; }
</style>
{% endblock %}

{% block heading %}Invoice Wise Credit Aging{% endblock %}

{% block content %}

<!-- ═══ Filter bar ═════════════════════════════════════════════════════════ -->
<div class="d-flex flex-wrap align-items-end bg-light p-3 rounded border mb-3">
  <div class="mr-3 mb-2">
    <label class="small mb-1">Sale Area</label>
    <select id="filterArea" class="form-control form-control-sm" style="width:160px;">
      <option value="">All Areas</option>
      {% for a in sale_areas %}
        <option value="{{ a.t_id }}">{{ a.area_name }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="mr-3 mb-2">
    <label class="small mb-1">Order Booker</label>
    <select id="filterBooker" class="form-control form-control-sm" style="width:160px;">
      <option value="">All Bookers</option>
      {% for b in order_bookers %}
        <option value="{{ b.t_id }}">{{ b.name }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="mb-2">
    <button id="btnCalculate" class="btn btn-primary btn-sm">
      <i class="fas fa-calculator mr-1"></i> Calculate
    </button>
  </div>
  <div class="mb-2 ml-3" id="exportBtnWrap" style="display:none;">
    <input type="hidden" id="expArea">
    <input type="hidden" id="expBooker">
    <div class="btn-group">
      <button class="btn btn-sm btn-outline-success" onclick="exportInvoiceAging('excel')">
        <i class="fas fa-file-excel mr-1"></i> Excel
      </button>
      <button class="btn btn-sm btn-outline-danger" onclick="exportInvoiceAging('pdf')">
        <i class="fas fa-file-pdf mr-1"></i> PDF
      </button>
    </div>
  </div>
</div>

<!-- ═══ Progress bar ═══════════════════════════════════════════════════════ -->
<div id="invAgingProgress">
  <div class="progress">
    <div id="invProgressBar" class="progress-bar bg-primary" role="progressbar" style="width:0%;">0 %</div>
  </div>
  <div id="invProgressText"></div>
</div>

<!-- ═══ Summary cards ══════════════════════════════════════════════════════ -->
<div class="inv-summary-cards" id="invSummaryCards" style="display:none;"></div>

<p id="invPlaceholderMsg" class="text-muted mt-4">
  Select Area / Booker (or leave as "All") and click <b>Calculate</b> to load pending invoices.
</p>

<!-- ═══ Table ══════════════════════════════════════════════════════════════ -->
<div id="invAgingTableWrap" style="display:none;">
  <table id="invAgingTable" class="table table-bordered table-sm table-hover" style="width:100%;">
    <thead class="thead-light">
      <tr>
        <th>Sr#</th>
        <th>Shop Name</th>
        <th>Invoice No</th>
        <th>Delivery Date</th>
        <th>Last Payment</th>
        <th>Bill Days</th>
        <th>Debit</th>
        <th>Credit</th>
        <th>Under Credit</th>
        <th>Due</th>
        <th>Total Balance</th>
      </tr>
    </thead>
    <tbody id="invAgingBody"></tbody>
    <tfoot id="invAgingFoot"></tfoot>
  </table>
</div>

{% endblock %}

{% block javascripts %}
<script>
(function(){

  function getCookie(n){
    let v=null;
    document.cookie.split(';').forEach(c=>{
      const [k,val]=c.trim().split('=');
      if(k===n) v=decodeURIComponent(val);
    });
    return v;
  }
  const csrftoken = getCookie('csrftoken');
  $.ajaxSetup({
    beforeSend(xhr, s){
      if(!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(s.type))
        xhr.setRequestHeader('X-CSRFToken', csrftoken);
    }
  });

  const BATCH_SIZE = 15;
  let grandTotals = { debit:0, credit:0, under_credit:0, due:0 };
  let customerIndexMap = {};   // t_id -> sr#
  let nextSr = 0;
  let totalInvoices = 0;
  let uniqueCustomers = new Set();

  function fmtNum(v){
    if (v === null || v === undefined || v === 0) return '-';
    return Number(v).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2});
  }
  function capitalize(s){
    if(!s) return '';
    return s.replace(/\w\S*/g, t => t.charAt(0).toUpperCase() + t.substr(1).toLowerCase());
  }

  $('#btnCalculate').on('click', function(){
    const areaId   = $('#filterArea').val();
    const bookerId = $('#filterBooker').val();

    $('#btnCalculate').prop('disabled', true);
    $('#invAgingBody').empty();
    $('#invAgingFoot').empty();
    $('#invAgingTableWrap').hide();
    $('#invSummaryCards').hide();
    $('#exportBtnWrap').hide();
    $('#invPlaceholderMsg').hide();

    grandTotals = { debit:0, credit:0, under_credit:0, due:0 };
    customerIndexMap = {};
    nextSr = 0;
    totalInvoices = 0;
    uniqueCustomers = new Set();

    $('#invAgingProgress').show();

    $.ajax({
      url: "{% url 'customers:aging_customer_list' %}",
      type: 'GET',
      data: { area_id: areaId, booker_id: bookerId },
      success: function(resp){
        const ids = resp.customer_ids || [];
        const total = ids.length;
        if (total === 0) {
          $('#invAgingProgress').hide();
          $('#invPlaceholderMsg').html('<p class="text-warning mt-4"><i class="fas fa-exclamation-triangle mr-1"></i> No customers with outstanding balance found.</p>').show();
          $('#btnCalculate').prop('disabled', false);
          return;
        }
        updateInvProgress(0, total, 'Calculating…');
        processInvBatches(ids, 0, total);
      },
      error: function(){
        alert('Error fetching customer list.');
        $('#invAgingProgress').hide();
        $('#btnCalculate').prop('disabled', false);
      }
    });
  });

  function processInvBatches(ids, offset, total){
    if (offset >= total) { onInvAgingComplete(); return; }
    const batch = ids.slice(offset, offset + BATCH_SIZE);
    $.ajax({
      url: "{% url 'customers:invoice_wise_aging_calculate' %}",
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({ customer_ids: batch }),
      success: function(resp){
        const rows = resp.rows || [];
        rows.forEach(function(r){
          if (!(r.t_id in customerIndexMap)) {
            nextSr += 1;
            customerIndexMap[r.t_id] = nextSr;
            uniqueCustomers.add(r.t_id);
          }
          appendInvRow(customerIndexMap[r.t_id], r);
          totalInvoices += 1;
          grandTotals.debit += r.debit;
          grandTotals.credit += r.credit;
          grandTotals.under_credit += r.under_credit;
          grandTotals.due += r.due;
        });
        const done = Math.min(offset + BATCH_SIZE, total);
        updateInvProgress(done, total, `Calculated ${done} / ${total} customers…`);
        processInvBatches(ids, offset + BATCH_SIZE, total);
      },
      error: function(){
        const done = Math.min(offset + BATCH_SIZE, total);
        updateInvProgress(done, total, `Skipped batch, continuing…`);
        processInvBatches(ids, offset + BATCH_SIZE, total);
      }
    });
  }

  function appendInvRow(sr, r){
    $('#invAgingTableWrap').show();
    const lastPay = r.last_payment_date
      ? `${r.last_payment_date} (${fmtNum(r.last_payment_amount)})`
      : 'No Payment';
    const dueDanger = (r.bucket === '91_120' || r.bucket === '120_plus') && r.due > 0;

    let html = '<tr>';
    html += `<td>${sr}</td>`;
    html += `<td>${capitalize(r.shop_name)}</td>`;
    html += `<td>${r.invoice_no}</td>`;
    html += `<td>${r.delivery_date}</td>`;
    html += `<td>${lastPay}</td>`;
    html += `<td>${r.bill_days}</td>`;
    html += `<td class="text-right">${fmtNum(r.debit)}</td>`;
    html += `<td class="text-right">${fmtNum(r.credit)}</td>`;
    html += `<td class="text-right">${fmtNum(r.under_credit)}</td>`;
    html += `<td class="text-right ${dueDanger ? 'text-danger-bold' : ''}">${fmtNum(r.due)}</td>`;
    html += `<td class="text-right font-weight-bold">${r.is_first_row ? fmtNum(r.balance) : '-'}</td>`;
    html += '</tr>';
    $('#invAgingBody').append(html);
  }

  function onInvAgingComplete(){
    $('#invAgingProgress').hide();
    $('#btnCalculate').prop('disabled', false);
    $('#exportBtnWrap').show();

    let foot = '<tr class="table-active font-weight-bold">';
    foot += '<td colspan="6" class="text-right">GRAND TOTAL</td>';
    foot += `<td class="text-right">${fmtNum(grandTotals.debit)}</td>`;
    foot += `<td class="text-right">${fmtNum(grandTotals.credit)}</td>`;
    foot += `<td class="text-right">${fmtNum(grandTotals.under_credit)}</td>`;
    foot += `<td class="text-right">${fmtNum(grandTotals.due)}</td>`;
    foot += '<td></td></tr>';
    $('#invAgingFoot').html(foot);

    let cards = '';
    cards += `<div class="inv-card"><div class="label">Customers</div><div class="value">${uniqueCustomers.size}</div></div>`;
    cards += `<div class="inv-card"><div class="label">Pending Invoices</div><div class="value">${totalInvoices}</div></div>`;
    cards += `<div class="inv-card"><div class="label">Total Due</div><div class="value">${fmtNum(grandTotals.due)}</div></div>`;
    $('#invSummaryCards').html(cards).show();

    $('#expArea').val($('#filterArea').val());
    $('#expBooker').val($('#filterBooker').val());

    if ($.fn.DataTable && !$.fn.DataTable.isDataTable('#invAgingTable')) {
      $('#invAgingTable').DataTable({
        pageLength: 50, ordering: true, order: [], searching: true, dom: 'frtip',
        language: {
          paginate: {previous:'<i class="fas fa-angle-left"></i>', next:'<i class="fas fa-angle-right"></i>'},
          info: "_START_ – _END_ / _TOTAL_",
        }
      });
    }
  }

  function updateInvProgress(done, total, text){
    const pct = total > 0 ? Math.round((done/total)*100) : 0;
    $('#invProgressBar').css('width', pct+'%').text(pct+' %');
    $('#invProgressText').text(text);
  }

  window.exportInvoiceAging = function(exportType){
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = "{% url 'customers:invoice_wise_aging_export' %}";

    const fields = {
      csrfmiddlewaretoken: '{{ csrf_token }}',
      export_type: exportType,
      area_id: $('#expArea').val() || '',
      booker_id: $('#expBooker').val() || '',
    };
    Object.keys(fields).forEach(function(k){
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = k;
      input.value = fields[k];
      form.appendChild(input);
    });
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
  };

})();
</script>
{% endblock %}