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

{% block stylesheets %}
<style>
  :root {
    --wa-green: #25D366;
    --wa-dark: #075E54;
    --wa-teal: #128C7E;
  }

  /* ── progress bar ─────────────────────────────────────────────── */
  #agingProgress {
    display: none;
    margin: 20px 0;
  }
  #agingProgress .progress {
    height: 28px;
    border-radius: 6px;
    background: #e9ecef;
  }
  #agingProgress .progress-bar {
    font-size: 13px;
    font-weight: 600;
    transition: width 0.3s ease;
  }
  #progressText {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
  }

  /* ── summary cards ────────────────────────────────────────────── */
  .aging-summary-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .aging-card {
    flex: 1;
    min-width: 130px;
    border-radius: 8px;
    padding: 14px 16px;
    text-align: center;
    border: 1px solid #dee2e6;
  }
  .aging-card .label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
  .aging-card .value { font-size: 20px; font-weight: 700; margin-top: 4px; }
  .card-green  { background: #e6f9f0; border-color: #b7e4c7; }
  .card-green .value  { color: #1b7a41; }
  .card-yellow { background: #fff8e1; border-color: #ffe082; }
  .card-yellow .value { color: #e65100; }
  .card-orange { background: #fff3e0; border-color: #ffcc80; }
  .card-orange .value { color: #d84315; }
  .card-red    { background: #fce4ec; border-color: #ef9a9a; }
  .card-red .value    { color: #c62828; }
  .card-dark   { background: #f3e5f5; border-color: #ce93d8; }
  .card-dark .value   { color: #6a1b9a; }
  .card-blue   { background: #e3f2fd; border-color: #90caf9; }
  .card-blue .value   { color: #1565c0; }

  /* ── table ────────────────────────────────────────────────────── */
  #agingTable th { white-space: nowrap; font-size: 12px; }
  #agingTable td { font-size: 12px; vertical-align: middle; }
  .text-danger-bold { color: #c62828; font-weight: 600; }
  .bucket-clickable { cursor: pointer; text-decoration: underline dotted; }
  .bucket-clickable:hover { color: #1565c0; }

  /* ── drill-down modal ─────────────────────────────────────────── */
  #drillModal .modal-dialog { max-width: 850px; }
  #drillTable th { font-size: 11px; }
  #drillTable td { font-size: 12px; }
  .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; }

  /* ═══ WhatsApp Styles ═══════════════════════════════════════════ */
  .wa-server-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; font-weight: 500;
  }
  .wa-server-bar.online  { background: #d4edda; color: #155724; }
  .wa-server-bar.offline { background: #f8d7da; color: #721c24; }
  .wa-server-bar.checking { background: #fff3cd; color: #856404; }
  .wa-server-dot { width: 9px; height: 9px; border-radius: 50%; }
  .wa-server-bar.online .wa-server-dot { background: var(--wa-green); }
  .wa-server-bar.offline .wa-server-dot { background: #e74c3c; }
  .wa-server-bar.checking .wa-server-dot { background: #f39c12; animation: waPulse 1s infinite; }
  @keyframes waPulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

  .wa-action-bar {
    background: linear-gradient(135deg, var(--wa-dark), var(--wa-teal));
    border-radius: 10px; padding: 16px 20px; margin-bottom: 16px;
    display: none; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  }
  .wa-action-bar .wa-info { color: #fff; }
  .wa-action-bar .wa-info h6 { margin: 0 0 2px; font-weight: 700; font-size: 15px; }
  .wa-action-bar .wa-info p { margin: 0; opacity: 0.8; font-size: 12px; }

  .wa-btn-send {
    background: var(--wa-green); border: none; color: #fff;
    padding: 10px 22px; border-radius: 8px; font-weight: 700; font-size: 13px;
    cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 6px;
  }
  .wa-btn-send:hover { background: #1ebe5d; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,211,102,.4); color: #fff; }
  .wa-btn-send:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
  .wa-btn-stop {
    background: #e74c3c; border: none; color: #fff;
    padding: 10px 22px; border-radius: 8px; font-weight: 700; cursor: pointer; display: none;
  }
  .wa-btn-stop:hover { background: #c0392b; color: #fff; }

  .wa-progress-section {
    display: none; background: #f8f9fa; border-radius: 8px; padding: 14px 18px; margin-bottom: 16px;
  }
  .wa-progress-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; font-size: 13px; color: #495057;
  }
  .wa-progress-header .wa-counts span { margin-left: 14px; }
  .wa-progress-header .sent { color: #155724; font-weight: 600; }
  .wa-progress-header .failed { color: #721c24; font-weight: 600; }
  .wa-progress-bar-wa { background: #e9ecef; border-radius: 20px; height: 7px; overflow: hidden; }
  .wa-progress-fill {
    background: linear-gradient(90deg, var(--wa-green), #1ebe5d);
    height: 100%; width: 0%; transition: width .4s ease; border-radius: 20px;
  }
  .wa-progress-text-wa { text-align: center; margin-top: 6px; font-size: 12px; color: #6c757d; }

  .wa-send-single {
    background: var(--wa-green); color: #fff; border: none;
    width: 28px; height: 28px; border-radius: 50%;
    cursor: pointer; font-size: 12px; transition: all .2s;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .wa-send-single:hover { transform: scale(1.15); }
  .wa-send-single:disabled { opacity: .4; cursor: not-allowed; }

  .wa-status-badge {
    display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 600;
  }
  .wa-status-badge.pending { background: #f1f3f4; color: #5f6368; }
  .wa-status-badge.sending { background: #fff3cd; color: #856404; }
  .wa-status-badge.sent    { background: #d4edda; color: #155724; }
  .wa-status-badge.failed  { background: #f8d7da; color: #721c24; }
  .wa-status-badge.skipped { background: #e2e3e5; color: #383d41; }

  #agingTable tbody tr.row-sent    { background: #f0fff4 !important; }
  #agingTable tbody tr.row-failed  { background: #fff5f5 !important; }
  #agingTable tbody tr.row-sending { background: #fffbeb !important; }

  .wa-toast {
    position: fixed; top: 20px; right: 20px;
    padding: 12px 20px; border-radius: 8px; color: #fff; font-weight: 600;
    z-index: 99999; transform: translateX(400px); transition: transform .3s ease; font-size: 13px;
  }
  .wa-toast.show { transform: translateX(0); }
  .wa-toast.success { background: var(--wa-green); }
  .wa-toast.error { background: #e74c3c; }
  .wa-toast.warning { background: #f39c12; }
</style>
{% endblock %}

{% block heading %}Customer Credit Aging{% endblock %}

{% block content %}

<!-- Toast -->
<div class="wa-toast" id="waToast"></div>

<!-- WhatsApp Server Status -->
<div class="wa-server-bar checking" id="waServerBar">
  <div class="wa-server-dot"></div>
  <span id="waServerText">Checking WhatsApp server...</span>
  <button class="btn btn-sm btn-outline-dark ml-auto" onclick="checkWaServer()">
    <i class="fas fa-sync-alt"></i>
  </button>
</div>

<!-- ═══ 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 type="button" id="btnCalculate" class="btn btn-sm btn-primary">
      <i class="fas fa-calculator mr-1"></i> Calculate Aging
    </button>
  </div>
  <div class="ml-auto mb-2" id="exportBtnWrap" style="display:none;">
    <button type="button" class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#exportModal">
      <i class="fas fa-file-export mr-1"></i> Export
    </button>
  </div>
</div>

<!-- ═══ Aging Progress ════════════════════════════════════════════════════ -->
<div id="agingProgress">
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info"
         role="progressbar" style="width:0%;" id="progressBar">0 %</div>
  </div>
  <div id="progressText">Preparing...</div>
</div>

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

<!-- ═══ WhatsApp Action Bar ═══════════════════════════════════════════════ -->
<div class="wa-action-bar" id="waActionBar">
  <div class="wa-info">
    <h6><i class="fab fa-whatsapp mr-1"></i> Send Aging Reminders</h6>
    <p>Send credit aging details to selected customers via WhatsApp</p>
  </div>
  <div>
    <button class="wa-btn-send" id="waBtnSend" onclick="startBulkWaSend()" disabled>
      <i class="fab fa-whatsapp"></i> Send to Selected (<span id="waSelectedCount">0</span>)
    </button>
    <button class="wa-btn-stop" id="waBtnStop" onclick="stopBulkWaSend()">
      <i class="fas fa-stop"></i> Stop
    </button>
  </div>
</div>

<!-- WhatsApp Progress -->
<div class="wa-progress-section" id="waProgressSection">
  <div class="wa-progress-header">
    <span id="waProgressLabel">Sending messages...</span>
    <div class="wa-counts">
      <span class="sent"><i class="fas fa-check-circle mr-1"></i><span id="waSent">0</span> Sent</span>
      <span class="failed"><i class="fas fa-times-circle mr-1"></i><span id="waFailed">0</span> Failed</span>
    </div>
  </div>
  <div class="wa-progress-bar-wa">
    <div class="wa-progress-fill" id="waProgressFill"></div>
  </div>
  <div class="wa-progress-text-wa" id="waProgressText">0 / 0</div>
</div>

<!-- ═══ Aging Table ═══════════════════════════════════════════════════════ -->
<div class="table-responsive" id="agingTableWrap" style="display:none;">
  <table id="agingTable" class="table table-bordered table-hover table-sm">
    <thead class="thead-light">
      <tr>
        <th style="width:35px;"><input type="checkbox" id="selectAllWa" onclick="toggleSelectAllWa(this)"></th>
        <th>#</th>
        <th>Customer Name</th>
        <th>Mobile</th>
        <th class="text-right">Balance</th>
        <th class="text-right">0 – 30</th>
        <th class="text-right">31 – 60</th>
        <th class="text-right">61 – 90</th>
        <th class="text-right">91 – 120</th>
        <th class="text-right">120 +</th>
        <th class="text-right">Aging Total</th>
        <th class="text-right">Other</th>
        <th style="width:60px;">WA Status</th>
        <th style="width:40px;">Send</th>
      </tr>
    </thead>
    <tbody id="agingBody"></tbody>
    <tfoot id="agingFoot"></tfoot>
  </table>
</div>

<div id="placeholderMsg">
  <p class="text-muted mt-4"><i class="fas fa-info-circle mr-1"></i>
    Click <strong>Calculate Aging</strong> to generate the credit aging report.
  </p>
</div>

<!-- ═══ Drill-down Modal ═════════════════════════════════════════════════ -->
<div class="modal fade" id="drillModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="drillTitle">Unpaid Invoices</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div id="drillLoading" class="text-center py-4">
          <div class="spinner-border text-primary"></div>
          <p class="mt-2 text-muted">Loading invoices…</p>
        </div>
        <div id="drillContent" style="display:none;">
          <div class="mb-3" id="drillSummary"></div>
          <div class="table-responsive">
            <table class="table table-bordered table-sm" id="drillTable">
              <thead class="thead-light">
                <tr>
                  <th>#</th><th>Date</th><th>Invoice #</th>
                  <th class="text-right">Original Amount</th>
                  <th class="text-right">Cash at Sale</th>
                  <th class="text-right">Unpaid</th>
                  <th>Age (Days)</th><th>Bucket</th>
                </tr>
              </thead>
              <tbody id="drillBody"></tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- ═══ Export Modal ══════════════════════════════════════════════════════ -->
<div class="modal fade" id="exportModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form method="post" action="{% url 'customers:aging_export' %}" id="exportForm">
      {% csrf_token %}
      <input type="hidden" name="area_id" id="expArea">
      <input type="hidden" name="booker_id" id="expBooker">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Export Aging Report</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>Page Size</label>
            <select name="page_size" class="form-control"><option>A4</option><option>A5</option></select>
          </div>
          <div class="form-group">
            <label>Format</label><br>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="export_type" value="pdf" checked>
              <label class="form-check-label">PDF</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="export_type" value="excel">
              <label class="form-check-label">Excel</label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary"><i class="fas fa-download mr-1"></i> Download</button>
        </div>
      </div>
    </form>
  </div>
</div>

{% endblock %}

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

  const WA_API = 'http://localhost:3000';
  const WA_SIGNATURE = '\n\n━━━━━━━━━━━━━━━\n_Automated Message from Blue Primes Software (blueprimes.com)_';

  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 BUCKET_KEYS   = ["0_30","31_60","61_90","91_120","120_plus"];
  const BUCKET_LABELS = {"0_30":"0 – 30","31_60":"31 – 60","61_90":"61 – 90","91_120":"91 – 120","120_plus":"120 +"};
  const CARD_CLASSES  = {"0_30":"card-green","31_60":"card-yellow","61_90":"card-orange","91_120":"card-red","120_plus":"card-dark"};
  const BATCH_SIZE    = 10;

  let allResults   = [];
  let grandTotals  = {};
  let resultLookup = {};

  let waServerOnline = false;
  let waIsSending    = false;
  let waStopFlag     = false;
  let waSentCount    = 0;
  let waFailedCount  = 0;
  let waDefaultTemplate = '';

  function fmtNum(v){
    if(!v || v===0) return '-';
    return Number(v).toLocaleString('en-US',{minimumFractionDigits:2, maximumFractionDigits:2});
  }
  function fmtInt(v){
    if(!v || v===0) return '-';
    return Number(v).toLocaleString('en-US',{minimumFractionDigits:0, maximumFractionDigits:0});
  }
  function capitalize(s){ return s ? s.replace(/\b\w/g, l=>l.toUpperCase()) : ''; }
  function sleep(ms){ return new Promise(r=>setTimeout(r,ms)); }
  function getRandomDelay(){ return (35+Math.floor(Math.random()*16))*1000; }
  function formatPhone(mobile){
    if(!mobile) return '';
    let p = String(mobile).replace(/\D/g,'');
    if(p.startsWith('0')) p = '92'+p.substring(1);
    return p;
  }

  function toast(msg, type){
    const el = document.getElementById('waToast');
    el.textContent = msg;
    el.className = 'wa-toast '+(type||'success');
    setTimeout(()=>el.classList.add('show'),10);
    setTimeout(()=>el.classList.remove('show'),3500);
  }

  /* ═══ WhatsApp Server Check ════════════════════════════════════════ */
  window.checkWaServer = async function(){
    const bar = document.getElementById('waServerBar');
    const txt = document.getElementById('waServerText');
    bar.className = 'wa-server-bar checking';
    txt.textContent = 'Checking WhatsApp server...';
    try {
      const resp = await fetch(WA_API+'/api/status', {mode:'cors'});
      const data = await resp.json();
      waServerOnline = true;
      if(data.connected){
        bar.className = 'wa-server-bar online';
        txt.textContent = '✅ WhatsApp connected'+(data.profile ? ' — '+data.profile.name : '');
      } else {
        bar.className = 'wa-server-bar online';
        txt.textContent = '⚠️ Server online but WhatsApp not connected';
      }
    } catch(err){
      waServerOnline = false;
      bar.className = 'wa-server-bar offline';
      txt.textContent = '❌ WhatsApp server not reachable';
    }
    updateWaSelectedCount();
  };

  /* ═══ WhatsApp Template ════════════════════════════════════════════ */
  async function fetchWaTemplate(){
    try {
      const resp = await fetch("{% url 'pos:whatsapp_template_get_default' 'reminder' %}", {
        method:'GET', credentials:'same-origin',
        headers:{'X-Requested-With':'XMLHttpRequest'}
      });
      const data = await resp.json();
      if(data.ok && data.template_text) waDefaultTemplate = data.template_text;
      else waDefaultTemplate = getFallbackTemplate();
    } catch(err){
      waDefaultTemplate = getFallbackTemplate();
    }
  }

  function getFallbackTemplate(){
    return '*{customer_name}*\n\n📋 Outstanding Balance: *Rs. {balance}*\n📅 Date: {date}\n\n{aging_details}\n\nPlease clear your dues at the earliest.\n\nThank you! 🙏';
  }

  /* ═══ Build aging details for WA message ═══════════════════════════ */
  function buildAgingText(r){
    if(!r || !r.buckets) return '';
    let lines = ['📊 *Credit Aging Breakdown:*'];
    const labels = {
      '0_30':    '  ▪️ 0-30 days',
      '31_60':   '  ▪️ 31-60 days',
      '61_90':   '  ▪️ 61-90 days',
      '91_120':  '  🔴 91-120 days',
      '120_plus':'  🔴 120+ days',
    };
    let hasAny = false;
    BUCKET_KEYS.forEach(k=>{
      const v = r.buckets[k];
      if(v > 0){
        lines.push(labels[k] + ':  Rs. ' + fmtInt(v));
        hasAny = true;
      }
    });
    if(!hasAny) return '';
    lines.push('  ─────────────────');
    lines.push('  *Total Aging:  Rs. ' + fmtInt(r.total_aging) + '*');
    return lines.join('\n');
  }

  function buildWaMessage(r){
    const agingDetails = buildAgingText(r);
    let msg = waDefaultTemplate || getFallbackTemplate();
    msg = msg
      .replace(/\{customer_name\}/gi, capitalize(r.name)||'')
      .replace(/\{name\}/gi, capitalize(r.name)||'')
      .replace(/\{balance\}/gi, fmtInt(r.balance))
      .replace(/\{remaining\}/gi, fmtInt(r.balance))
      .replace(/\{mobile\}/gi, r.mobile||'')
      .replace(/\{address\}/gi, r.address||'')
      .replace(/\{area\}/gi, '')
      .replace(/\{date\}/gi, new Date().toLocaleDateString('en-GB'))
      .replace(/\{aging_details\}/gi, agingDetails)
      .replace(/\{amount\}/gi, '')
      .replace(/\{invoice_no\}/gi, '')
      .replace(/\{remarks\}/gi, '');
    if(agingDetails && !msg.includes('Credit Aging Breakdown')){
      msg += '\n\n' + agingDetails;
    }
    return msg + WA_SIGNATURE;
  }

  /* ═══ WA Status Helpers ════════════════════════════════════════════ */
  function setWaStatus(tid, status){
    const badge = document.getElementById('wa-status-'+tid);
    if(!badge) return;
    badge.className = 'wa-status-badge '+status;
    const labels = {pending:'—',sending:'Sending…',sent:'✓ Sent',failed:'✗ Failed',skipped:'Skipped'};
    badge.textContent = labels[status]||status;
    const row = document.getElementById('arow-'+tid);
    if(row){
      row.classList.remove('row-sent','row-failed','row-sending');
      if(status==='sent') row.classList.add('row-sent');
      if(status==='failed') row.classList.add('row-failed');
      if(status==='sending') row.classList.add('row-sending');
    }
  }

  function updateWaProgress(current, total){
    const pct = total>0?Math.round((current/total)*100):0;
    document.getElementById('waProgressFill').style.width = pct+'%';
    document.getElementById('waProgressText').textContent = current+' / '+total;
    document.getElementById('waSent').textContent = waSentCount;
    document.getElementById('waFailed').textContent = waFailedCount;
  }

  function updateWaSelectedCount(){
    const count = document.querySelectorAll('.wa-row-check:checked').length;
    document.getElementById('waSelectedCount').textContent = count;
    document.getElementById('waBtnSend').disabled = !waServerOnline || count===0 || waIsSending;
  }

  window.toggleSelectAllWa = function(master){
    document.querySelectorAll('.wa-row-check').forEach(cb=>{ cb.checked=master.checked; });
    updateWaSelectedCount();
  };

  /* ═══ Send Single ══════════════════════════════════════════════════ */
  window.sendSingleWa = async function(tid){
    if(!waServerOnline){toast('Server not connected!','error');return;}
    const r = resultLookup[tid];
    if(!r){toast('No data for this customer','warning');return;}
    if(!waDefaultTemplate) await fetchWaTemplate();
    const phone = formatPhone(r.mobile);
    if(!phone){toast('No mobile number!','warning');return;}

    setWaStatus(tid,'sending');
    try {
      const msg = buildWaMessage(r);
      const fd = new FormData();
      fd.append('phone',phone);
      fd.append('message',msg);
      const resp = await fetch(WA_API+'/api/send-media',{method:'POST',body:fd});
      const result = await resp.json();
      if(result.success){
        setWaStatus(tid,'sent');
        toast('✅ Sent to '+capitalize(r.name),'success');
      } else {
        setWaStatus(tid,'failed');
        toast('❌ Failed: '+(result.error||'Unknown'),'error');
      }
    } catch(err){
      setWaStatus(tid,'failed');
      toast('❌ Error: '+err.message,'error');
    }
  };

  /* ═══ Bulk Send ════════════════════════════════════════════════════ */
  window.startBulkWaSend = async function(){
    const checked = document.querySelectorAll('.wa-row-check:checked');
    if(checked.length===0){toast('Select at least one customer!','warning');return;}
    if(!waServerOnline){toast('Server not connected!','error');return;}
    if(!waDefaultTemplate) await fetchWaTemplate();

    waIsSending=true; waStopFlag=false; waSentCount=0; waFailedCount=0;
    document.getElementById('waBtnSend').style.display='none';
    document.getElementById('waBtnStop').style.display='inline-block';
    document.getElementById('waProgressSection').style.display='block';
    document.getElementById('waProgressLabel').textContent='Sending messages...';
    checked.forEach(cb=>setWaStatus(cb.value,'pending'));
    updateWaProgress(0,checked.length);

    const queue = [];
    checked.forEach(cb=>{
      const r = resultLookup[cb.value];
      if(r) queue.push(r);
    });

    for(let i=0;i<queue.length;i++){
      if(waStopFlag) break;
      const r = queue[i];
      const phone = formatPhone(r.mobile);
      if(!phone || Number(r.balance)<=0){
        setWaStatus(r.t_id,'skipped'); waFailedCount++;
        updateWaProgress(i+1,queue.length); continue;
      }
      setWaStatus(r.t_id,'sending');
      const row = document.getElementById('arow-'+r.t_id);
      if(row) row.scrollIntoView({behavior:'smooth',block:'center'});

      try {
        const msg = buildWaMessage(r);
        const fd = new FormData();
        fd.append('phone',phone);
        fd.append('message',msg);
        const resp = await fetch(WA_API+'/api/send-media',{method:'POST',body:fd});
        const result = await resp.json();
        if(result.success){ setWaStatus(r.t_id,'sent'); waSentCount++; }
        else { setWaStatus(r.t_id,'failed'); waFailedCount++; }
      } catch(err){
        setWaStatus(r.t_id,'failed'); waFailedCount++;
      }
      updateWaProgress(i+1,queue.length);

      if(i<queue.length-1 && !waStopFlag){
        const delay = getRandomDelay();
        document.getElementById('waProgressLabel').textContent=`Waiting ${Math.round(delay/1000)}s before next...`;
        await sleep(delay);
        document.getElementById('waProgressLabel').textContent='Sending messages...';
      }
    }

    waIsSending=false;
    document.getElementById('waBtnSend').style.display='inline-block';
    document.getElementById('waBtnStop').style.display='none';
    document.getElementById('waProgressLabel').textContent=waStopFlag?'Stopped':'Complete!';
    updateWaSelectedCount();
    toast(waStopFlag?`Stopped. Sent: ${waSentCount}`:`✅ Complete! Sent: ${waSentCount}, Failed: ${waFailedCount}`, waStopFlag?'warning':'success');
  };

  window.stopBulkWaSend = function(){
    waStopFlag=true;
    document.getElementById('waBtnStop').textContent='Stopping...';
  };

  /* ═══ AGING: Calculate ═════════════════════════════════════════════ */
  $('#btnCalculate').on('click', function(){
    allResults=[]; resultLookup={};
    grandTotals={balance:0,total:0,other:0};
    BUCKET_KEYS.forEach(k=>grandTotals[k]=0);

    const areaId=$('#filterArea').val();
    const bookerId=$('#filterBooker').val();

    $('#placeholderMsg').hide();
    $('#agingTableWrap').hide();
    $('#summaryCards').hide();
    $('#exportBtnWrap').hide();
    $('#waActionBar').hide();
    $('#waProgressSection').hide();
    $('#agingBody').empty();
    $('#agingFoot').empty();
    $('#summaryCards').empty();
    $('#agingProgress').show();
    updateAgingProgress(0,0,'Fetching customer list…');
    $(this).prop('disabled',true);

    $.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){
          $('#agingProgress').hide();
          $('#placeholderMsg').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;
        }
        updateAgingProgress(0,total,'Calculating…');
        processBatches(ids,0,total);
      },
      error:function(){
        alert('Error fetching customer list.');
        $('#agingProgress').hide();
        $('#btnCalculate').prop('disabled',false);
      }
    });
  });

  /* ═══ AGING: Batch processing ══════════════════════════════════════ */
  function processBatches(ids,offset,total){
    if(offset>=total){ onAgingComplete(); return; }
    const batch=ids.slice(offset,offset+BATCH_SIZE);
    $.ajax({
      url:"{% url 'customers:aging_calculate' %}",
      type:'POST',
      contentType:'application/json',
      data:JSON.stringify({customer_ids:batch}),
      success:function(resp){
        const results=resp.results||[];
        results.forEach(function(r){
          allResults.push(r);
          resultLookup[r.t_id]=r;
          grandTotals.balance+=r.balance;
          grandTotals.total+=r.total_aging;
          grandTotals.other+=r.other;
          BUCKET_KEYS.forEach(k=>grandTotals[k]+=r.buckets[k]);
          appendRow(allResults.length,r);
        });
        const done=Math.min(offset+BATCH_SIZE,total);
        updateAgingProgress(done,total,`Calculated ${done} / ${total} customers…`);
        processBatches(ids,offset+BATCH_SIZE,total);
      },
      error:function(){
        const done=Math.min(offset+BATCH_SIZE,total);
        updateAgingProgress(done,total,`Skipped batch, continuing…`);
        processBatches(ids,offset+BATCH_SIZE,total);
      }
    });
  }

  /* ═══ AGING: Append row ════════════════════════════════════════════ */
  function appendRow(idx,r){
    $('#agingTableWrap').show();
    let html=`<tr id="arow-${r.t_id}">`;
    html+=`<td><input type="checkbox" class="wa-row-check" value="${r.t_id}"></td>`;
    html+=`<td>${idx}</td>`;
    html+=`<td><a href="#" class="drill-link" data-tid="${r.t_id}">${capitalize(r.name)}</a></td>`;
    html+=`<td>${r.mobile||'-'}</td>`;
    html+=`<td class="text-right">${fmtNum(r.balance)}</td>`;
    BUCKET_KEYS.forEach(function(k){
      const v=r.buckets[k];
      let cls='text-right';
      if((k==='91_120'||k==='120_plus')&&v>0) cls+=' text-danger-bold';
      if(v>0) cls+=' bucket-clickable';
      html+=`<td class="${cls}" data-tid="${r.t_id}" data-bucket="${k}">${fmtNum(v)}</td>`;
    });
    html+=`<td class="text-right font-weight-bold">${fmtNum(r.total_aging)}</td>`;
    html+=`<td class="text-right">${fmtNum(r.other)}</td>`;
    html+=`<td class="text-center"><span class="wa-status-badge pending" id="wa-status-${r.t_id}">—</span></td>`;
    html+=`<td class="text-center"><button class="wa-send-single" onclick="sendSingleWa('${r.t_id}')" title="Send WhatsApp"><i class="fab fa-whatsapp"></i></button></td>`;
    html+='</tr>';
    $('#agingBody').append(html);
  }

  /* ═══ AGING: Complete ══════════════════════════════════════════════ */
  function onAgingComplete(){
    $('#agingProgress').hide();
    $('#btnCalculate').prop('disabled',false);
    $('#exportBtnWrap').show();
    $('#waActionBar').css('display','flex');

    let foot='<tr class="table-active font-weight-bold">';
    foot+='<td></td><td></td><td>GRAND TOTAL</td><td></td>';
    foot+=`<td class="text-right">${fmtNum(grandTotals.balance)}</td>`;
    BUCKET_KEYS.forEach(k=>foot+=`<td class="text-right">${fmtNum(grandTotals[k])}</td>`);
    foot+=`<td class="text-right">${fmtNum(grandTotals.total)}</td>`;
    foot+=`<td class="text-right">${fmtNum(grandTotals.other)}</td>`;
    foot+='<td></td><td></td></tr>';
    $('#agingFoot').html(foot);

    let cards='';
    cards+=buildCard('Total Customers',allResults.length,'card-blue');
    cards+=buildCard('Total Balance',fmtNum(grandTotals.balance),'card-blue');
    BUCKET_KEYS.forEach(k=>{
      cards+=buildCard(BUCKET_LABELS[k]+' Days',fmtNum(grandTotals[k]),CARD_CLASSES[k]);
    });
    cards+=buildCard('Aging Total',fmtNum(grandTotals.total),'card-blue');
    $('#summaryCards').html(cards).show();

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

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

    $(document).on('change','.wa-row-check',updateWaSelectedCount);
    updateWaSelectedCount();
  }

  function buildCard(label,value,cls){
    return `<div class="aging-card ${cls}"><div class="label">${label}</div><div class="value">${value}</div></div>`;
  }
  function updateAgingProgress(done,total,text){
    const pct=total>0?Math.round((done/total)*100):0;
    $('#progressBar').css('width',pct+'%').text(pct+' %');
    $('#progressText').text(text);
  }

  /* ═══ Drill-down ═══════════════════════════════════════════════════ */
  $(document).on('click','.drill-link, .bucket-clickable',function(e){
    e.preventDefault();
    const tid=$(this).data('tid');
    const bucket=$(this).data('bucket')||null;
    if(!tid) return;
    $('#drillLoading').show();
    $('#drillContent').hide();
    $('#drillModal').modal('show');

    $.ajax({
      url:`/customers/aging/detail/${tid}/`,
      type:'GET',
      success:function(resp){
        const c=resp.customer;
        $('#drillTitle').text(`Unpaid Invoices — ${capitalize(c.name)}  (Balance: ${fmtNum(c.balance)})`);
        let summary='';
        BUCKET_KEYS.forEach(k=>{
          const v=resp.buckets[k];
          if(v>0) summary+=`<span class="badge-bucket badge-${k} mr-2">${BUCKET_LABELS[k]}: ${fmtNum(v)}</span>`;
        });
        summary+=`<span class="badge badge-dark ml-2">Aging Total: ${fmtNum(resp.total_aging)}</span>`;
        $('#drillSummary').html(summary);

        let invoices=resp.invoices;
        if(bucket) invoices=invoices.filter(inv=>inv.bucket===bucket);

        let tbody='';
        invoices.forEach(function(inv,i){
          tbody+='<tr>';
          tbody+=`<td>${i+1}</td><td>${inv.date}</td><td>${inv.invoice_no}</td>`;
          tbody+=`<td class="text-right">${fmtNum(inv.original)}</td>`;
          tbody+=`<td class="text-right">${fmtNum(inv.cash_at_sale)}</td>`;
          tbody+=`<td class="text-right font-weight-bold">${fmtNum(inv.unpaid)}</td>`;
          tbody+=`<td>${inv.age_days}</td>`;
          tbody+=`<td><span class="badge-bucket badge-${inv.bucket}">${inv.bucket_label}</span></td>`;
          tbody+='</tr>';
        });
        if(invoices.length===0) tbody='<tr><td colspan="8" class="text-center text-muted">No unpaid invoices found.</td></tr>';
        $('#drillBody').html(tbody);
        $('#drillLoading').hide();
        $('#drillContent').show();
      },
      error:function(){
        $('#drillLoading').html('<p class="text-danger">Error loading data.</p>');
      }
    });
  });

  /* ═══ INIT ═════════════════════════════════════════════════════════ */
  $(document).ready(function(){
    checkWaServer();
    fetchWaTemplate();
  });

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