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

{% block title %}Android Recoveries (Staging){% endblock %}

{% block content %}
<style>
  :root {
    --primary: #1a56db;
    --success: #057a55;
    --danger: #e02424;
    --border: #e5e7eb;
    --muted: #6b7280;
  }
  .filter-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px 18px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
  .filter-label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; }
  .filter-card .form-control, .filter-card .form-select { font-size:13px; border-radius:7px; border-color:#d1d5db; height:34px; padding:4px 10px; }
  .summary-bar { position:sticky; bottom:0; background:#1e2939; color:#fff; border-radius:10px 10px 0 0; padding:10px 20px; display:flex; gap:28px; align-items:center; font-size:13px; box-shadow:0 -4px 16px rgba(0,0,0,.18); z-index:100; }
  .s-item { display:flex; flex-direction:column; gap:1px; }
  .s-label { font-size:10px; color:#9ca3af; text-transform:uppercase; letter-spacing:.05em; }
  .s-val { font-size:15px; font-weight:700; color:#f9fafb; }
  .s-val.sel { color:#34d399; }
  .tbl-wrap { border-radius:10px; overflow:hidden; border:1px solid var(--border); }
  .tbl-wrap table { margin:0; }
  .tbl-wrap thead th { background:#111827 !important; color:#f9fafb; font-size:12px; font-weight:600; letter-spacing:.04em; padding:10px 12px; border:none; }
  .tbl-wrap tbody tr { transition:background .1s; }
  .tbl-wrap tbody tr:hover { background:#f0fff4; }
  .tbl-wrap tbody td { font-size:13px; padding:9px 12px; border-color:#f0f0f0; vertical-align:middle; }
  .tbl-wrap tfoot td { background:#f9fafb; font-size:13px; font-weight:700; padding:10px 12px; border-color:#e5e7eb; }
  .badge-inv { background:#059669; color:#fff; font-weight:700; font-size:12px; padding:3px 8px; border-radius:5px; }
  .btn-reject-s { font-size:11px; padding:3px 9px; border-radius:5px; background:#fee2e2; color:#b91c1c; border:1px solid #fca5a5; }
  .btn-reject-s:hover { background:#e02424; color:#fff; }
  .btn-approve-s { font-size:11px; padding:3px 9px; border-radius:5px; background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
  .btn-approve-s:hover { background:#057a55; color:#fff; }
  .page-title { font-size:20px; font-weight:800; color:#111827; }
  .page-sub { font-size:12px; color:var(--muted); margin-top:2px; }
  th.sortable { cursor:pointer; user-select:none; }
  th.sortable:hover { background:#e9eaec !important;  color:#050505 !important;}
  th.sort-asc::after { content:' ↑'; color:#60a5fa; }
  th.sort-desc::after { content:' ↓'; color:#60a5fa; }
</style>

<div class="container-fluid py-3">

  {# ─── FILTERS ─── #}
  <div class="filter-card">
    <div class="row g-2 align-items-end">
      <div class="col-md-2 col-6">
        <div class="filter-label">Salesman</div>
        <select id="fSalesman" class="form-select">
          <option value="">All Salesmen</option>
          {% for s in salesman_list %}
          <option value="{{ s.id }}">{{ s.username }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2 col-6">
        <div class="filter-label">Customer</div>
        <input type="text" id="fCustomer" class="form-control" placeholder="Search customer…">
      </div>
      <div class="col-md-2 col-6">
        <div class="filter-label">Date From</div>
        <input type="date" id="fDateFrom" class="form-control">
      </div>
      <div class="col-md-2 col-6">
        <div class="filter-label">Date To</div>
        <input type="date" id="fDateTo" class="form-control">
      </div>
      <div class="col-md-2 col-6">
        <div class="filter-label">Min Amount</div>
        <input type="number" id="fAmtMin" class="form-control" placeholder="0">
      </div>
      <div class="col-md-2 col-6">
        <div class="filter-label">Max Amount</div>
        <input type="number" id="fAmtMax" class="form-control" placeholder="∞">
      </div>
    </div>
    <div class="row g-2 mt-1 align-items-center">
      <div class="col-auto">
        <button id="btnFilter" class="btn btn-primary btn-sm px-3">Apply</button>
      </div>
      <div class="col-auto">
        <button id="btnClear" class="btn btn-outline-secondary btn-sm px-3">Clear</button>
      </div>
      <div class="col-auto ms-auto text-muted" style="font-size:12px;">
        Showing <span id="visibleCount">{{ rows|length }}</span> records
      </div>
    </div>
  </div>

  {# ─── HEADER ─── #}
  <div class="d-flex align-items-center justify-content-between mb-3">
    <div>
      <div class="page-title">Android Recoveries <span class="badge bg-warning text-dark ms-1" style="font-size:13px;">Staging</span></div>
      <div class="page-sub">Customer cash recoveries posted from Android App</div>
    </div>
    <div class="d-flex gap-2">
      <form id="formApprove" method="post" action="{% url 'pos_api:android_recovery_approve' %}">
        {% csrf_token %}
        <button type="submit" id="btnApprove" class="btn btn-success btn-sm px-3" disabled
                onclick="return copyCheckedToForm('formApprove') && confirm('Approve selected recoveries?');">
          Approve Selected
        </button>
      </form>
      <button type="button" id="btnReject" class="btn btn-danger btn-sm px-3" disabled
              onclick="bulkReject()">
        Reject Selected
      </button>
    </div>
  </div>

  {% if not rows %}
    <div class="text-center py-5 text-muted">
      <p class="mb-0">No staging recoveries found.</p>
    </div>
  {% else %}

  <div class="tbl-wrap">
    <table class="table table-hover" id="recTable">
      <thead >
        <tr>
          <th style="background-color: #111827 !important;"class="text-center" style="width:44px;"><input type="checkbox" id="chkAll"></th>
          <th class="sortable" data-col="invoice">Invoice</th>
          <th class="sortable" data-col="customer">Customer</th>
          <th class="sortable" data-col="date">Date</th>
          <th>Time</th>
          <th class="text-end sortable" data-col="total">Total</th>
          <th class="text-end sortable" data-col="received">Received</th>
          <th class="text-end sortable" data-col="prev_bal">Prev Balance</th>
          <th class="sortable" data-col="salesman">Salesman</th>
          <th class="text-center" style="width:160px;">Actions</th>
        </tr>
      </thead>
      <tbody id="recBody">
        {% for r in rows %}
        <tr class="rec-row"
            data-invoice="{{ r.description }}"
            data-customer="{{ r.party_descp|lower }}"
            data-salesman="{{ r.saleman_id|default:r.saleman_name }}"
            data-date="{{ r.transaction_date|date:'Y-m-d' }}"
            data-total="{{ r.total_amount }}"
            data-received="{{ r.amount_transaction }}"
            data-prev-bal="{{ r.previous_balance }}">
          <td class="text-center">
            <input type="checkbox" class="chkRow" name="invoice_nos" value="{{ r.description }}">
          </td>
          <td><span class="badge-inv">#{{ r.description }}</span></td>
          <td>
          <div class="fw-semibold">{{ r.customer_name|default:"—" }}</div>
          <small class="text-muted">ID: {{ r.customer_id }}</small>
        </td>
          <td style="white-space:nowrap;">{{ r.transaction_date }}</td>
          <td><small class="text-muted">{{ r.bill_time|default:"—" }}</small></td>
          <td class="text-end fw-bold">{{ r.total_amount|floatformat:2|intcomma }}</td>
          <td class="text-end text-success">{{ r.amount_transaction|floatformat:2|intcomma }}</td>
          <td class="text-end text-muted">{{ r.previous_balance|floatformat:2|intcomma }}</td>
          <td><small>{{ r.saleman_name|default:"—" }}</small></td>
          <td>
            <div class="d-flex gap-1 justify-content-center">
              <button class="btn btn-sm btn-approve-s"
                      onclick="approveOne('{{ r.description }}')">Approve</button>
              <button class="btn btn-sm btn-reject-s"
                      onclick="rejectOne('{{ r.description }}')">Reject</button>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5" id="footLabel">Total ({{ rows|length }} records)</td>
          <td class="text-end" id="footTotal">{{ sum_total|floatformat:2|intcomma }}</td>
          <td class="text-end" id="footReceived">{{ sum_received|floatformat:2|intcomma }}</td>
          <td class="text-center" id="footCount">{{ sum_count }}</td>
          <td colspan="2"></td>
        </tr>
      </tfoot>
    </table>
  </div>
  {% endif %}
</div>

{# Summary bar #}
<div class="summary-bar">
  <div class="s-item"><span class="s-label">Mode</span><span class="s-val" id="sbMode">All Records</span></div>
  <div class="s-item"><span class="s-label">Records</span><span class="s-val" id="sbCount">{{ rows|length }}</span></div>
  <div class="s-item"><span class="s-label">Total</span><span class="s-val" id="sbTotal">{{ sum_total|floatformat:2|intcomma }}</span></div>
  <div class="s-item"><span class="s-label">Received</span><span class="s-val" id="sbReceived">{{ sum_received|floatformat:2|intcomma }}</span></div>
  <div class="s-item"><span class="s-label">Prev Balance</span><span class="s-val" id="sbPrev">—</span></div>
</div>

{# Hidden forms #}
<form id="formRejectBulk" method="post" action="{% url 'pos_api:android_recovery_reject_bulk' %}">
  {% csrf_token %}
  <div id="rejectInputs"></div>
</form>
<form id="formApproveOne" method="post" action="{% url 'pos_api:android_recovery_approve' %}">
  {% csrf_token %}
  <div id="approveOneInputs"></div>
</form>

<script>
function fmt(n){ return parseFloat(n||0).toLocaleString('en',{minimumFractionDigits:2,maximumFractionDigits:2}); }

function visibleRows(){ return Array.from(document.querySelectorAll('#recBody .rec-row')).filter(r=>r.style.display!=='none'); }
function checkedRows(){ return Array.from(document.querySelectorAll('.chkRow:checked')).map(cb=>cb.closest('tr')); }

function updateSummary(){
  const sel = checkedRows(), vis = visibleRows();
  const src = sel.length>0 ? sel : vis;
  const mode = sel.length>0 ? `Selected (${sel.length})` : `Visible (${vis.length})`;
  let total=0,received=0,prev=0;
  src.forEach(r=>{
    total    += parseFloat(r.dataset.total    ||0);
    received += parseFloat(r.dataset.received ||0);
    prev     += parseFloat(r.dataset.prevBal  ||0);
  });
  document.getElementById('sbMode').textContent     = mode;
  document.getElementById('sbCount').textContent    = src.length;
  document.getElementById('sbTotal').textContent    = fmt(total);
  document.getElementById('sbReceived').textContent = fmt(received);
  document.getElementById('sbPrev').textContent     = fmt(prev);
  const isSel = sel.length>0;
  ['sbTotal','sbReceived'].forEach(id=>{
    document.getElementById(id).className = 's-val'+(isSel?' sel':'');
  });
  document.getElementById('footLabel').textContent    = `${isSel?'Selected':'Total'} (${src.length} records)`;
  document.getElementById('footTotal').textContent    = fmt(total);
  document.getElementById('footReceived').textContent = fmt(received);
  document.getElementById('footCount').textContent    = src.length;
  document.getElementById('btnApprove').disabled = sel.length===0;
  document.getElementById('btnReject').disabled  = sel.length===0;
  document.getElementById('visibleCount').textContent = vis.length;
}

const chkAll = document.getElementById('chkAll');
function syncChkAll(){
  const vis=visibleRows(), sel=vis.filter(r=>r.querySelector('.chkRow').checked);
  if(!chkAll) return;
  chkAll.checked = vis.length>0 && sel.length===vis.length;
  chkAll.indeterminate = sel.length>0 && sel.length<vis.length;
}
if(chkAll) chkAll.addEventListener('change',function(){
  visibleRows().forEach(r=>r.querySelector('.chkRow').checked=this.checked);
  syncChkAll(); updateSummary();
});
document.querySelectorAll('.chkRow').forEach(cb=>cb.addEventListener('change',()=>{syncChkAll();updateSummary();}));

function copyCheckedToForm(formId){
  const f=document.getElementById(formId);
  f.querySelectorAll('input[name="invoice_nos"]').forEach(i=>i.remove());
  checkedRows().forEach(r=>{ const i=document.createElement('input'); i.type='hidden'; i.name='invoice_nos'; i.value=r.dataset.invoice; f.appendChild(i); });
  return true;
}

function rejectOne(inv){
  if(!confirm(`Reject recovery #${inv}? This is permanent.`)) return;
  document.getElementById('rejectInputs').innerHTML=`<input type="hidden" name="invoice_nos" value="${inv}">`;
  document.getElementById('formRejectBulk').submit();
}
function bulkReject(){
  const sel=checkedRows();
  if(!sel.length) return;
  if(!confirm(`Reject ${sel.length} recovery(s)? Cannot be undone.`)) return;
  document.getElementById('rejectInputs').innerHTML=sel.map(r=>`<input type="hidden" name="invoice_nos" value="${r.dataset.invoice}">`).join('');
  document.getElementById('formRejectBulk').submit();
}
function approveOne(inv){
  if(!confirm(`Approve recovery #${inv}?`)) return;
  document.getElementById('approveOneInputs').innerHTML=`<input type="hidden" name="invoice_nos" value="${inv}">`;
  document.getElementById('formApproveOne').submit();
}

function applyFilters(){
  const sal=document.getElementById('fSalesman').value;
  const cust=document.getElementById('fCustomer').value.toLowerCase().trim();
  const df=document.getElementById('fDateFrom').value;
  const dt=document.getElementById('fDateTo').value;
  const mn=parseFloat(document.getElementById('fAmtMin').value)||0;
  const mx=parseFloat(document.getElementById('fAmtMax').value)||Infinity;
  document.querySelectorAll('#recBody .rec-row').forEach(row=>{
    let show=true;
    if(sal  && row.dataset.salesman!==sal) show=false;
    if(cust && !row.dataset.customer.includes(cust)) show=false;
    if(df   && row.dataset.date<df) show=false;
    if(dt   && row.dataset.date>dt) show=false;
    const t=parseFloat(row.dataset.total||0);
    if(t<mn||t>mx) show=false;
    row.style.display=show?'':'none';
  });
  syncChkAll(); updateSummary();
}
document.getElementById('btnFilter').addEventListener('click',applyFilters);
document.getElementById('btnClear').addEventListener('click',()=>{
  ['fSalesman','fCustomer','fDateFrom','fDateTo','fAmtMin','fAmtMax'].forEach(id=>{
    const el=document.getElementById(id); if(el) el.value='';
  });
  applyFilters();
});
['fCustomer','fDateFrom','fDateTo','fAmtMin','fAmtMax'].forEach(id=>{
  const el=document.getElementById(id); if(el) el.addEventListener('input',applyFilters);
});
document.getElementById('fSalesman').addEventListener('change',applyFilters);

// Sort
let sortState={col:null,dir:1};
document.querySelectorAll('th.sortable').forEach(th=>{
  th.addEventListener('click',function(){
    const col=this.dataset.col;
    document.querySelectorAll('th.sortable').forEach(t=>t.classList.remove('sort-asc','sort-desc'));
    if(sortState.col===col) sortState.dir*=-1; else{sortState.col=col;sortState.dir=1;}
    this.classList.add(sortState.dir===1?'sort-asc':'sort-desc');
    const tbody=document.getElementById('recBody');
    const rows=Array.from(tbody.querySelectorAll('.rec-row'));
    rows.sort((a,b)=>{
      let va,vb;
      if(col==='invoice'){va=parseInt(a.dataset.invoice);vb=parseInt(b.dataset.invoice);}
      else if(col==='date'){va=a.dataset.date;vb=b.dataset.date;}
      else if(col==='total'){va=parseFloat(a.dataset.total);vb=parseFloat(b.dataset.total);}
      else if(col==='received'){va=parseFloat(a.dataset.received);vb=parseFloat(b.dataset.received);}
      else if(col==='prev_bal'){va=parseFloat(a.dataset.prevBal);vb=parseFloat(b.dataset.prevBal);}
      else if(col==='customer'){va=a.dataset.customer;vb=b.dataset.customer;}
      else if(col==='salesman'){va=a.querySelector('td:nth-child(9) small').textContent;vb=b.querySelector('td:nth-child(9) small').textContent;}
      else{va=0;vb=0;}
      return va<vb?-1*sortState.dir:va>vb?1*sortState.dir:0;
    });
    rows.forEach(r=>tbody.appendChild(r));
    updateSummary();
  });
});

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