{% extends "pos/base.html" %}
{% load static %}
{% block title %}Customer Recovery{% endblock %}

{% block stylesheets %}
<style>
  .filter-box .form-control,
  .filter-box .form-check-input { font-size: .85rem;}
  
  /* Print Type Modal Styles */
  .print-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
  }
  .print-modal-overlay.active {
    display: flex;
  }
  .print-modal {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
  }
  .print-modal h4 {
    margin: 0 0 8px;
    color: #1a365d;
    font-weight: 700;
  }
  .print-modal .invoice-info {
    color: #718096;
    font-size: 14px;
    margin-bottom: 20px;
  }
  .print-options {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .print-option {
    flex: 1;
    min-width: 100px;
    padding: 20px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: #f7fafc;
  }
  .print-option:hover {
    border-color: #3182ce;
    background: #ebf8ff;
    transform: translateY(-2px);
  }
  .print-option i {
    font-size: 28px;
    color: #3182ce;
    margin-bottom: 8px;
  }
  .print-option .label {
    font-weight: 600;
    color: #2d3748;
    font-size: 14px;
  }
  .print-option .size {
    font-size: 11px;
    color: #718096;
    margin-top: 4px;
  }
  .print-modal-close {
    margin-top: 20px;
  }

  /* ── WhatsApp Bulk Styles ── */
  :root {
    --wa-green: #25D366;
    --wa-dark: #075E54;
    --wa-teal: #128C7E;
  }

  .wa-bulk-bar {
    background: linear-gradient(135deg, var(--wa-dark), var(--wa-teal));
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .wa-bulk-bar .wa-info {
    color: #fff;
    font-size: 14px;
  }
  .wa-bulk-bar .wa-info strong {
    font-size: 16px;
  }
  .wa-btn-bulk {
    background: var(--wa-green);
    border: none;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .wa-btn-bulk:hover { background: #1ebe5d; color: #fff; }
  .wa-btn-bulk:disabled { opacity: .5; cursor: not-allowed; }
  .wa-btn-stop {
    background: #e74c3c;
    border: none;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    display: none;
  }
  .wa-btn-stop:hover { background: #c0392b; color: #fff; }

  /* Progress Bar */
  .wa-progress-section {
    display: none;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px 16px;
    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 .sent { color: #155724; font-weight: 600; }
  .wa-progress-header .failed { color: #721c24; font-weight: 600; }
  .wa-progress-bar {
    background: #e9ecef;
    border-radius: 20px;
    height: 6px;
    overflow: hidden;
  }
  .wa-progress-fill {
    background: linear-gradient(90deg, var(--wa-green), #1ebe5d);
    height: 100%;
    width: 0%;
    transition: width .3s ease;
  }
  .wa-progress-text {
    text-align: center;
    margin-top: 6px;
    font-size: 12px;
    color: #6c757d;
  }

  /* Row Styles */
  #dataTable tbody tr.row-sent { background: #f0fff4 !important; }
  #dataTable tbody tr.row-failed { background: #fff5f5 !important; }
  #dataTable tbody tr.row-sending { background: #fffbeb !important; }

  .wa-status-badge {
    display: inline-block;
    padding: 3px 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; }

  /* Toast */
  .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: 14px;
  }
  .wa-toast.show { transform: translateX(0); }
  .wa-toast.success { background: var(--wa-green); }
  .wa-toast.error { background: #e74c3c; }
  .wa-toast.warning { background: #f39c12; }

  /* ══════════ UI POLISH ══════════ */
  :root {
    --primary:    #2563eb;
    --success:    #059669;
    --bg:         #f1f5f9;
    --border:     #e2e8f0;
    --text:       #1e293b;
    --text-muted: #64748b;
  }
  body { background: var(--bg); }

  .stats-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
  .stat-card {
    flex:1; min-width:160px;
    background:#fff; border:1px solid var(--border);
    border-radius:10px; padding:14px 18px;
    box-shadow:0 1px 3px rgba(0,0,0,.07);
    display:flex; align-items:center; gap:14px;
  }
  .stat-card .stat-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0; }
  .stat-card .stat-label { font-size:.72rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px; }
  .stat-card .stat-value { font-size:1.1rem;font-weight:700;color:var(--text);margin-top:2px; }
  .si-blue  { background:#dbeafe;color:#2563eb; }
  .si-green { background:#d1fae5;color:#059669; }
  .si-navy  { background:#e0e7ff;color:#4338ca; }

  .badge-bank { background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;border-radius:6px;padding:3px 8px;font-size:.75rem;font-weight:600;white-space:nowrap; }
  .badge-bank.none { background:#f8fafc;color:var(--text-muted);border-color:#e2e8f0; }

  .bank-totals-card { background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.07);overflow:hidden;margin-bottom:18px; }
  .bank-totals-header { background:linear-gradient(135deg,#1e3a5f,#2563eb);color:#fff;padding:12px 20px;font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:8px; }
  .bank-totals-grid { display:flex;flex-wrap:wrap; }
  .bank-total-item { flex:1;min-width:180px;padding:13px 20px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px; }
  .bank-total-item:nth-last-child(-n+3) { border-bottom:none; }
  .bank-total-item .bt-name  { font-size:.84rem;color:var(--text);font-weight:500; }
  .bank-total-item .bt-amount{ font-size:.95rem;font-weight:700;color:#2563eb; }

  .grand-total-bar { display:flex;justify-content:flex-end;align-items:center;padding:12px 20px;border-top:1px solid var(--border);gap:8px; }
  .grand-total-bar .gt-label { font-size:.84rem;color:var(--text-muted);font-weight:600; }
  .grand-total-bar .gt-value { background:#01478f;color:#fff;padding:5px 16px;border-radius:20px;font-size:.95rem;font-weight:700; }
  .amount-positive { color:#059669;font-weight:600; }
  .amount-muted    { color:#64748b; }

  /* ══════════ EXPORT MODAL ══════════ */
  .export-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10000;
    justify-content: center;
    align-items: center;
  }
  .export-modal-overlay.active { display: flex; }

  .export-modal {
    background: #ffffff;
    border-radius: 14px;
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  .export-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f0f0;
  }
  .export-modal-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .export-modal-header p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #888;
  }

  .export-modal-body {
    padding: 18px 24px;
  }

  .export-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    margin-bottom: 10px;
  }

  /* Column checkboxes grid */
  .col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-bottom: 18px;
  }
  .col-check-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    background: #fafafa;
    user-select: none;
  }
  .col-check-item:hover { border-color: #1a1a1a; background: #f5f5f5; }
  .col-check-item input[type=checkbox] {
    width: 14px; height: 14px;
    accent-color: #1a1a1a;
    cursor: pointer;
    flex-shrink: 0;
  }
  .col-check-item span {
    font-size: 12.5px;
    color: #333;
    font-weight: 500;
  }

  .export-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 14px 0;
  }

  /* Selected rows toggle */
  .selected-only-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    background: #fafafa;
    margin-bottom: 16px;
    cursor: pointer;
  }
  .selected-only-row input[type=checkbox] {
    width: 14px; height: 14px;
    accent-color: #1a1a1a;
  }
  .selected-only-row .sel-text {
    font-size: 12.5px;
    color: #333;
    font-weight: 500;
    flex: 1;
  }
  .selected-only-row .sel-badge {
    background: #1a1a1a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
  }

  /* Format toggle */
  .format-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
  }
  .fmt-btn {
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    font-size: 12.5px;
    font-weight: 500;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .fmt-btn.active {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: #fff;
  }
  .fmt-btn:hover:not(.active) {
    border-color: #999;
    background: #f0f0f0;
  }

  .export-modal-footer {
    padding: 14px 24px 18px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid #f0f0f0;
  }
  .btn-export-cancel {
    padding: 8px 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
  }
  .btn-export-cancel:hover { background: #f5f5f5; }
  .btn-export-download {
    padding: 8px 22px;
    border: none;
    border-radius: 8px;
    background: #1a1a1a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
  }
  .btn-export-download:hover { background: #333; }
</style>
{% endblock %}

{% block heading %}Customer Recovery{% endblock %}

{% block content %}

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

<!-- PRINT TYPE MODAL -->
<div class="print-modal-overlay" id="printModal">
  <div class="print-modal">
    <h4><i class="fas fa-print mr-2"></i>Select Print Size</h4>
    <div class="invoice-info" id="printModalInvoiceInfo">Invoice #---</div>
    <div class="print-options">
      <div class="print-option" data-type="thermal">
        <i class="fas fa-receipt"></i>
        <div class="label">Thermal</div>
        <div class="size">80mm Receipt</div>
      </div>
      <div class="print-option" data-type="a5">
        <i class="fas fa-file-alt"></i>
        <div class="label">A5</div>
        <div class="size">Half Page</div>
      </div>
      <div class="print-option" data-type="a4">
        <i class="fas fa-file"></i>
        <div class="label">A4</div>
        <div class="size">Full Page</div>
      </div>
    </div>
    <button type="button" class="btn btn-secondary btn-sm print-modal-close" onclick="closePrintModal()">
      <i class="fas fa-times mr-1"></i>Cancel
    </button>
  </div>
</div>

<!-- ══════════════ EXPORT MODAL ══════════════ -->
<div class="export-modal-overlay" id="exportModal">
  <div class="export-modal">
    <div class="export-modal-header">
      <h5>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
        </svg>
        Export Report
      </h5>
      <p>Choose columns, format, and scope</p>
    </div>

    <div class="export-modal-body">

      <!-- Columns -->
      <div class="export-section-label">Columns</div>
      <div class="col-grid" id="colGrid">
        <label class="col-check-item">
          <input type="checkbox" class="exp-col-chk" value="Invoice #" checked>
          <span>Invoice #</span>
        </label>
        <label class="col-check-item">
          <input type="checkbox" class="exp-col-chk" value="Date" checked>
          <span>Date</span>
        </label>
        <label class="col-check-item">
          <input type="checkbox" class="exp-col-chk" value="Customer" checked>
          <span>Customer</span>
        </label>
        <label class="col-check-item">
          <input type="checkbox" class="exp-col-chk" value="Bank" checked>
          <span>Bank</span>
        </label>
        <label class="col-check-item">
          <input type="checkbox" class="exp-col-chk" value="Previous Balance" checked>
          <span>Previous Balance</span>
        </label>
        <label class="col-check-item">
          <input type="checkbox" class="exp-col-chk" value="Received" checked>
          <span>Received</span>
        </label>
        <label class="col-check-item">
          <input type="checkbox" class="exp-col-chk" value="Remaining" checked>
          <span>Remaining</span>
        </label>
      </div>

      <div class="export-divider"></div>

      <!-- Selected rows only -->
      <label class="selected-only-row" id="selOnlyRow">
        <input type="checkbox" id="expSelectedOnly">
        <span class="sel-text">Export only selected rows</span>
        <span class="sel-badge" id="expSelCount">0</span>
      </label>

      <!-- Format -->
      <div class="export-section-label">Format</div>
      <div class="format-toggle">
        <div class="fmt-btn active" id="fmtPdf" onclick="setFmt('pdf')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/>
          </svg>
          PDF (inline)
        </div>
        <div class="fmt-btn" id="fmtExcel" onclick="setFmt('excel')">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/>
            <line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/>
            <line x1="15" y1="3" x2="15" y2="21"/>
          </svg>
          Excel (.xlsx)
        </div>
      </div>

    </div>

    <div class="export-modal-footer">
      <button class="btn-export-cancel" onclick="closeExportModal()">Cancel</button>
      <button class="btn-export-download" onclick="doExport()">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
        </svg>
        Download
      </button>
    </div>
  </div>
</div>

<!-- ─────────────────────────────  FILTER BAR  ────────────────────────────── -->
<form method="get" class="filter-box mb-3">
  <div class="row align-items-end">
    <!-- invoice -->
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Search by Transaction #</label>
      <input type="text" name="invoice" value="{{ invoice_q }}" class="form-control" placeholder="Invoice #" >
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="invoice"
               id="fInvoice" {% if picked_filter == "invoice" %}checked{% endif %}>
        <label class="form-check-label small" for="fInvoice">Use</label>
      </div>
    </div>

    <!-- customer -->
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Search by Customer</label>
      <input type="text" name="customer" value="{{ customer_q }}" class="form-control" placeholder="Customer name">
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="customer"
               id="fCustomer" {% if picked_filter == "customer" %}checked{% endif %}>
        <label class="form-check-label small" for="fCustomer">Use</label>
      </div>
    </div>

    <!-- date range -->
    <div class="col-md-4 mb-2">
      <label class="small mb-1 d-block">Search by Date</label>
      <div class="d-flex">
        <input type="date" name="date_from" value="{{ date_from_q }}" class="form-control me-1">
        <input type="date" name="date_to"   value="{{ date_to_q }}"   class="form-control">
      </div>
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="date"
               id="fDate" {% if picked_filter == "date" %}checked{% endif %}>
        <label class="form-check-label small" for="fDate">Use</label>
      </div>
    </div>

    <!-- action -->
    <div class="col-auto mb-2">
      <button type="submit" class="btn btn-primary btn-sm">
        <i class="fas fa-search me-1"></i>Search
      </button>
      <a href="{% url 'transactions:customer_recovery' %}" class="btn btn-secondary btn-sm">Reset</a>
    </div>
  </div>

  <!-- ── NEW ROW: Booker & Area filters ── -->
  <div class="row align-items-end mt-2">
    <!-- Order Booker -->
    <div class="col-md-4 mb-2">
      <div class="d-flex align-items-center mb-1">
        <div class="form-check me-2">
          <input class="form-check-input" type="checkbox" name="filter_booker"
                 id="fBooker" {% if use_booker %}checked{% endif %}>
          <label class="form-check-label small" for="fBooker">Filter by Order Booker</label>
        </div>
      </div>
      <select id="order_booker_select" name="order_booker_ids"
              class="form-control" multiple="multiple" style="width:100%;">
        {% for b in sel_bookers %}
          <option value="{{ b.t_id }}" selected>{{ b.name }}</option>
        {% endfor %}
      </select>
    </div>

    <!-- Sale Area -->
    <div class="col-md-4 mb-2">
      <div class="d-flex align-items-center mb-1">
        <div class="form-check me-2">
          <input class="form-check-input" type="checkbox" name="filter_area"
                 id="fArea" {% if use_area %}checked{% endif %}>
          <label class="form-check-label small" for="fArea">Filter by Sale Area</label>
        </div>
      </div>
      <select id="sale_area_select" name="sale_area_ids"
              class="form-control" multiple="multiple" style="width:100%;">
        {% for a in sel_areas %}
          <option value="{{ a.t_id }}" selected>{{ a.area_name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
</form>

<!-- ───────────────────────  ACTION BUTTONS ROW  ─────────────────────── -->
<div class="row ml-0 mb-3" style="gap:8px; align-items:center;">
  <a href="{% url 'transactions:recovery_add' %}">
    <button type="button" class="btn btn-success font-weight-bold">
      <i class="fas fa-plus mr-2"></i> Create new Recovery Invoice
    </button>
  </a>

  <!-- Export Button -->
  <button type="button" class="btn btn-outline-secondary font-weight-bold"
          onclick="openExportModal()"
          style="display:inline-flex;align-items:center;gap:6px;">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
    </svg>
    Export
  </button>
</div>

<!-- ══════════ STATS ROW ══════════ -->
<!-- <div class="stats-row">
  <div class="stat-card">
    <div class="stat-icon si-blue"><i class="fas fa-file-invoice"></i></div>
    <div>
      <div class="stat-label">Total Recoveries</div>
      <div class="stat-value">{{ recoveries|length }}</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon si-green"><i class="fas fa-money-bill-wave"></i></div>
    <div>
      <div class="stat-label">Grand Total Received</div>
      <div class="stat-value">{{ grand_total|floatformat:2 }}</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon si-navy"><i class="fas fa-university"></i></div>
    <div>
      <div class="stat-label">Banks Used</div>
      <div class="stat-value">{{ bank_totals|length }}</div>
    </div>
  </div>
</div> -->

<!-- ══════════ BANK-WISE TOTALS ══════════ -->
{% if bank_totals %}
<div class="bank-totals-card">
  <div class="bank-totals-header">
    <i class="fas fa-university"></i> Bank-wise Collection Summary
  </div>
  <div class="bank-totals-grid">
    {% for bt in bank_totals %}
    <div class="bank-total-item">
      <span class="bt-name"><i class="fas fa-landmark mr-1" style="color:#94a3b8;font-size:.75rem;"></i>{{ bt.name }}</span>
      <span class="bt-amount">{{ bt.total|floatformat:2 }}</span>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

<!-- ═══════════ BULK WHATSAPP BAR ═══════════ -->
<div class="wa-bulk-bar">
  <div class="wa-info">
    <i class="fab fa-whatsapp mr-2"></i>
    <strong id="selectedCount">0</strong> selected for bulk WhatsApp
  </div>
  <div>
    <button class="wa-btn-bulk" id="waBtnBulk" onclick="startBulkSend()" disabled>
      <i class="fab fa-whatsapp"></i> Send Bulk WhatsApp
    </button>
    <button class="wa-btn-stop" id="waBtnStop" onclick="stopBulkSend()">
      <i class="fas fa-stop"></i> Stop
    </button>
  </div>
</div>

<!-- Progress Section -->
<div class="wa-progress-section" id="waProgressSection">
  <div class="wa-progress-header">
    <span id="waProgressLabel">Sending messages...</span>
    <div>
      <span class="sent"><i class="fas fa-check-circle mr-1"></i><span id="statSent">0</span></span>
      <span class="failed ml-3"><i class="fas fa-times-circle mr-1"></i><span id="statFailed">0</span></span>
    </div>
  </div>
  <div class="wa-progress-bar">
    <div class="wa-progress-fill" id="waProgressFill"></div>
  </div>
  <div class="wa-progress-text" id="waProgressText">0 / 0</div>
</div>

<!-- ─────────────────────────────  TABLE  ────────────────────────────── -->
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Customer Recovery</h6>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th style="width:40px;">
              <input type="checkbox" id="selectAll" onclick="toggleSelectAll(this)" title="Select All">
            </th>
            <th style="width:10%">Invoice #</th>
            <th style="width:11%">Date</th>
            <th style="width:18%">Customer</th>
            <th style="width:14%">Bank</th>
            <th class="text-end" style="width:10%">Previous</th>
            <th class="text-end" style="width:10%">Received</th>
            <th class="text-end" style="width:10%">Remainings</th>
            <th style="width:60px;">Status</th>
            <th class="text-center" style="width:14%">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for s in recoveries %}
          <tr id="row-{{ s.description }}"
              data-invoice="{{ s.description }}"
              data-customer="{{ s.party_descp }}"
              data-date="{{ s.transaction_date }}"
              data-amount="{{ s.amount_transaction }}"
              data-balance="{{ s.previous_balance }}"
              data-remaining="{{ s.remaining_balance }}"
              data-mobile="{{ s.customer_mobile }}">
            <td><input type="checkbox" class="row-check" value="{{ s.description }}"></td>
            <td>{{ s.description }}</td>
            <td>{{ s.transaction_date }}</td> 
            <td>{{ s.party_descp }}</td>
            <td>
              {% if s.bank_name and s.bank_name != '—' %}
                <span class="badge-bank"><i class="fas fa-university mr-1" style="font-size:.7rem;"></i>{{ s.bank_name }}</span>
              {% else %}
                <span class="badge-bank none">—</span>
              {% endif %}
            </td>
            <td class="text-end amount-muted">{{ s.previous_balance|floatformat:2 }}</td>
            <td class="text-end amount-positive">{{ s.amount_transaction|floatformat:2 }}</td>
            <td class="text-end amount-muted">{{ s.remaining_balance|floatformat:2 }}</td>
            <td><span class="wa-status-badge pending" id="status-{{ s.description }}">—</span></td>
            <td class="text-center">
              <a href="{% url 'transactions:recovery_edit' s.description %}" class="btn btn-warning btn-sm" title="Edit">
                <i class="fas fa-edit"></i>
              </a>
              <a href="{% url 'transactions:recovery_delete' s.description %}"
                 class="btn btn-danger btn-sm"
                 onclick="return confirm('Delete invoice #{{ s.description }}?');"
                 title="Delete">
                <i class="fas fa-trash"></i>
              </a>
              <button type="button" 
                      class="btn btn-info btn-sm print-btn" 
                      data-invoice="{{ s.description }}"
                      data-customer="{{ s.party_descp }}"
                      title="Print">
                <i class="fas fa-print"></i>
              </button>
              <button type="button" 
                      class="btn btn-sm wa-single-btn"
                      style="background:#25D366;border-color:#25D366;color:#fff;"
                      onclick="sendSingle('{{ s.description }}')"
                      title="Send WhatsApp">
                <i class="fab fa-whatsapp"></i>
              </button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="grand-total-bar">
      <span class="gt-label"><i class="fas fa-calculator mr-1"></i>Grand Total:</span>
      <span class="gt-value">{{ grand_total|floatformat:2 }}</span>
    </div>
  </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)_';

  let isSending = false;
  let stopFlag = false;
  let sentCount = 0;
  let failedCount = 0;
  let dataTable = null;
  let defaultTemplate = '';
  let currentFmt = 'pdf';

  // ══════════════ HELPERS ══════════════
  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);
  }

  function setStatus(invoiceNo, status) {
    const badge = document.getElementById('status-' + invoiceNo);
    if (!badge) return;
    badge.className = 'wa-status-badge ' + status;
    const labels = { pending: '—', sending: 'Sending…', sent: '✓ Sent', failed: '✗ Failed' };
    badge.textContent = labels[status] || status;

    const row = document.getElementById('row-' + invoiceNo);
    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 updateProgress(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('statSent').textContent = sentCount;
    document.getElementById('statFailed').textContent = failedCount;
  }

  function updateSelectedCount() {
    const count = document.querySelectorAll('.row-check:checked').length;
    document.getElementById('selectedCount').textContent = count;
    document.getElementById('waBtnBulk').disabled = count === 0 || isSending;
    // Also update export modal badge
    const badge = document.getElementById('expSelCount');
    if (badge) badge.textContent = count;
    // Disable "selected only" toggle if nothing selected
    const selOnlyChk = document.getElementById('expSelectedOnly');
    if (selOnlyChk) {
      if (count === 0) {
        selOnlyChk.checked = false;
        selOnlyChk.disabled = true;
        document.getElementById('selOnlyRow').style.opacity = '0.5';
      } else {
        selOnlyChk.disabled = false;
        document.getElementById('selOnlyRow').style.opacity = '1';
      }
    }
  }

  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 buildMessage(template, data) {
    return template
      .replace(/\{customer_name\}/gi, data.customer || '')
      .replace(/\{invoice_no\}/gi, data.invoice || '')
      .replace(/\{date\}/gi, data.date || '')
      .replace(/\{amount\}/gi, data.amount || '')
      .replace(/\{balance\}/gi, data.balance || '')
      .replace(/\{remaining\}/gi, data.remaining || '')
      .replace(/\{mobile\}/gi, data.mobile || '')
      .replace(/\{address\}/gi, '')
      .replace(/\{remarks\}/gi, '');
  }

  function getRandomDelay() {
    return (30 + Math.floor(Math.random() * 16)) * 1000;
  }

  function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }

  // ══════════════ FETCH DEFAULT TEMPLATE ══════════════
  async function fetchDefaultTemplate() {
    try {
      const resp = await fetch("{% url 'pos:whatsapp_template_get_default' 'recovery' %}", {
        method: 'GET',
        credentials: 'same-origin',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      });
      const data = await resp.json();
      if (data.ok && data.template_text) {
        defaultTemplate = data.template_text;
      } else {
        defaultTemplate = getFallbackTemplate();
      }
    } catch (err) {
      defaultTemplate = getFallbackTemplate();
    }
  }

  function getFallbackTemplate() {
    return `*{customer_name}*

✅ Rs. {amount} received
📝 Receipt# {invoice_no}
📋 Balance: Rs. {remaining}
📅 Date: {date}

Thank you! 🙏`;
  }

  // ══════════════ SELECT ALL ══════════════
  window.toggleSelectAll = function(master) {
    const rows = dataTable ? dataTable.rows({ search: 'applied' }).nodes() : [];
    $(rows).find('.row-check').prop('checked', master.checked);
    updateSelectedCount();
  };

  // ══════════════ SEND SINGLE ══════════════
  window.sendSingle = async function(invoiceNo) {
    if (!defaultTemplate) await fetchDefaultTemplate();

    const row = document.getElementById('row-' + invoiceNo);
    if (!row) return;

    const data = {
      invoice: row.dataset.invoice,
      customer: row.dataset.customer,
      date: row.dataset.date,
      amount: row.dataset.amount,
      balance: row.dataset.balance,
      remaining: row.dataset.remaining,
      mobile: row.dataset.mobile,
    };

    const phone = formatPhone(data.mobile);
    if (!phone) { 
      toast('No mobile number!', 'warning'); 
      return; 
    }

    setStatus(invoiceNo, 'sending');

    try {
      const msg = buildMessage(defaultTemplate, data) + WA_SIGNATURE;
      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) {
        setStatus(invoiceNo, 'sent');
        toast('✅ Sent to ' + data.customer, 'success');
      } else {
        setStatus(invoiceNo, 'failed');
        toast('❌ Failed: ' + (result.error || 'Unknown'), 'error');
      }
    } catch (err) {
      setStatus(invoiceNo, 'failed');
      toast('❌ Server not reachable', 'error');
    }
  };

  // ══════════════ BULK SEND ══════════════
  window.startBulkSend = async function() {
    const checked = document.querySelectorAll('.row-check:checked');
    if (checked.length === 0) { toast('Select at least one recovery!', 'warning'); return; }

    if (!defaultTemplate) await fetchDefaultTemplate();

    isSending = true;
    stopFlag = false;
    sentCount = 0;
    failedCount = 0;

    document.getElementById('waBtnBulk').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 => setStatus(cb.value, 'pending'));
    updateProgress(0, checked.length);

    const queue = [];
    checked.forEach(cb => {
      const row = document.getElementById('row-' + cb.value);
      if (row) {
        queue.push({
          invoice: row.dataset.invoice,
          customer: row.dataset.customer,
          date: row.dataset.date,
          amount: row.dataset.amount,
          balance: row.dataset.balance,
          remaining: row.dataset.remaining,
          mobile: row.dataset.mobile,
        });
      }
    });

    for (let i = 0; i < queue.length; i++) {
      if (stopFlag) break;

      const c = queue[i];
      const phone = formatPhone(c.mobile);

      if (!phone) {
        setStatus(c.invoice, 'failed');
        failedCount++;
        updateProgress(i + 1, queue.length);
        continue;
      }

      setStatus(c.invoice, 'sending');

      const row = document.getElementById('row-' + c.invoice);
      if (row) row.scrollIntoView({ behavior: 'smooth', block: 'center' });

      try {
        const msg = buildMessage(defaultTemplate, c) + WA_SIGNATURE;
        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) {
          setStatus(c.invoice, 'sent');
          sentCount++;
        } else {
          setStatus(c.invoice, 'failed');
          failedCount++;
        }
      } catch (err) {
        setStatus(c.invoice, 'failed');
        failedCount++;
      }

      updateProgress(i + 1, queue.length);

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

    isSending = false;
    document.getElementById('waBtnBulk').style.display = 'inline-block';
    document.getElementById('waBtnStop').style.display = 'none';
    document.getElementById('waProgressLabel').textContent = stopFlag ? 'Stopped' : 'Complete!';
    updateSelectedCount();

    toast(stopFlag ? `Stopped. Sent: ${sentCount}` : `✅ Done! Sent: ${sentCount}, Failed: ${failedCount}`, 
          stopFlag ? 'warning' : 'success');
  };

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

  // ══════════════ EXPORT MODAL ══════════════
  window.setFmt = function(fmt) {
    currentFmt = fmt;
    document.getElementById('fmtPdf').classList.toggle('active', fmt === 'pdf');
    document.getElementById('fmtExcel').classList.toggle('active', fmt === 'excel');
  };

  window.openExportModal = function() {
    updateSelectedCount();
    document.getElementById('exportModal').classList.add('active');
  };

  window.closeExportModal = function() {
    document.getElementById('exportModal').classList.remove('active');
  };

  window.doExport = function() {
    // Collect chosen columns
    const checkedCols = Array.from(document.querySelectorAll('.exp-col-chk:checked')).map(c => c.value);
    if (checkedCols.length === 0) {
      alert('Please select at least one column.');
      return;
    }

    const selectedOnly = document.getElementById('expSelectedOnly').checked;

    // Build form programmatically and POST
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = "{% url 'transactions:export_customer_recovery' %}";
    form.target = currentFmt === 'pdf' ? '_blank' : '_self';
    form.style.display = 'none';

    function addHidden(name, value) {
      const inp = document.createElement('input');
      inp.type = 'hidden';
      inp.name = name;
      inp.value = value;
      form.appendChild(inp);
    }

    // CSRF
    addHidden('csrfmiddlewaretoken', '{{ csrf_token }}');

    // Current filter state from URL
    const params = new URLSearchParams(window.location.search);
    const filterFields = ['date_from','date_to','invoice','customer','filter',
                          'filter_booker','filter_area'];
    filterFields.forEach(k => {
      if (params.has(k)) addHidden(k, params.get(k));
    });

    // Multi-value params
    ['order_booker_ids', 'sale_area_ids'].forEach(k => {
      params.getAll(k).forEach(v => addHidden(k, v));
    });

    // Columns
    checkedCols.forEach(c => addHidden('columns', c));

    // Selected only + row IDs
    if (selectedOnly) {
      addHidden('selected_only', 'on');
      document.querySelectorAll('.row-check:checked').forEach(cb => {
        addHidden('selected_ids', cb.value);
      });
    }

    // Format
    addHidden('export_type', currentFmt);

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);

    closeExportModal();
  };

  // Close export modal on backdrop click
  document.getElementById('exportModal').addEventListener('click', function(e) {
    if (e.target === this) closeExportModal();
  });

  // ══════════════ INIT ══════════════
  $(document).ready(function() {
    $.ajaxSetup({ headers: { 'X-CSRFToken': '{{ csrf_token }}' } });

    dataTable = $('#dataTable').DataTable({ 
      order: [[1, 'desc']],
      columnDefs: [{ orderable: false, targets: [0, 8, 9] }]
    });

    $('#order_booker_select').select2({
      placeholder: 'Select Booker(s)',
      multiple: true,
      ajax: {
        url: "{% url 'customers:get_order_bookers' %}",
        type: 'POST', delay: 250,
        data: p => ({ term: p.term }),
        processResults: d => ({ results: d }),
      }
    });
    $('#sale_area_select').select2({
      placeholder: 'Select Area(s)',
      multiple: true,
      ajax: {
        url: "{% url 'customers:get_sale_areas' %}",
        type: 'POST', delay: 250,
        data: p => ({ term: p.term }),
        processResults: d => ({ results: d }),
      }
    });

    $('#order_booker_select').on('select2:open select2:select', () => $('#fBooker').prop('checked', true));
    $('#sale_area_select').on('select2:open select2:select', () => $('#fArea').prop('checked', true));

    $(document).on('change', '.row-check', function() {
      updateSelectedCount();
      const total = dataTable ? $(dataTable.rows({ search: 'applied' }).nodes()).find('.row-check').length : 0;
      const checked = document.querySelectorAll('.row-check:checked').length;
      document.getElementById('selectAll').checked = (total > 0 && checked >= total);
    });

    fetchDefaultTemplate();
    updateSelectedCount();
  });

  // ══════════════ PRINT MODAL ══════════════
  let pendingPrintInvoiceNo = null;

  window.openPrintModal = function(invoiceNo, customerName) {
    pendingPrintInvoiceNo = invoiceNo;
    document.getElementById('printModalInvoiceInfo').textContent = 
      'Invoice #' + invoiceNo + (customerName ? ' - ' + customerName : '');
    document.getElementById('printModal').classList.add('active');
  };

  window.closePrintModal = function() {
    document.getElementById('printModal').classList.remove('active');
    pendingPrintInvoiceNo = null;
  };

  window.executePrint = function(printType) {
    if (!pendingPrintInvoiceNo) return;
    const url = "{% url 'transactions:recovery_receipt' 0 %}".replace('0', pendingPrintInvoiceNo) + printType + '/';
    window.open(url, '_blank');
    closePrintModal();
  };

  document.querySelectorAll('.print-option').forEach(opt => {
    opt.addEventListener('click', () => executePrint(opt.dataset.type));
  });

  document.querySelectorAll('.print-btn').forEach(btn => {
    btn.addEventListener('click', () => openPrintModal(btn.dataset.invoice, btn.dataset.customer));
  });

  document.getElementById('printModal').addEventListener('click', function(e) {
    if (e.target === this) closePrintModal();
  });
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') { closePrintModal(); closeExportModal(); }
  });

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