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

{% block stylesheets %}
<style>
/* ── Layout ──────────────────────────────────────────────────────── */
.sub-mgr-card   { border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.07); }
.section-heading {
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:#6b7280; margin-bottom:.6rem;
}

/* ── Global Actions Bar ──────────────────────────────────────────── */
.global-bar {
  background:#eff6ff; border:1px solid #bfdbfe;
  border-radius:10px; padding:1rem 1.25rem; margin-bottom:1.25rem;
}
.global-bar .label { font-size:.8rem; font-weight:600; color:#1e40af; margin-bottom:.3rem; }

/* ── Table ───────────────────────────────────────────────────────── */
.subs-table thead th {
  background:#f8fafc; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:#374151;
  padding:.55rem .75rem; white-space:nowrap;
}
.subs-table tbody tr:hover { background:#f0f9ff; }
.subs-table td { padding:.5rem .75rem; vertical-align:middle; }
.subs-table .branch-name { font-weight:600; font-size:.88rem; color:#1e40af; }
.subs-table .branch-meta { font-size:.75rem; color:#6b7280; }
.expiry-badge {
  font-size:.75rem; font-weight:600; padding:.2rem .55rem;
  border-radius:20px; white-space:nowrap;
}
.expiry-ok      { background:#dcfce7; color:#166534; }
.expiry-warning { background:#fef9c3; color:#854d0e; }
.expiry-expired { background:#fee2e2; color:#991b1b; }

.form-control-sm-inline {
  display:inline-block; width:auto;
  padding:.25rem .5rem; font-size:.82rem;
  height:calc(1.5em + .5rem + 2px);
  border:1px solid #d1d5db; border-radius:6px; background:#fff;
}
.input-sm { font-size:.82rem; height:31px; }

/* ── Checkbox style ──────────────────────────────────────────────── */
.row-check-wrap { text-align:center; }
.row-check-wrap input[type=checkbox] { width:17px; height:17px; cursor:pointer; }

/* ── Info boxes ──────────────────────────────────────────────────── */
.info-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .7rem; border-radius:20px; font-size:.78rem; font-weight:600;
}
.pill-blue  { background:#dbeafe; color:#1e40af; }
.pill-green { background:#dcfce7; color:#166534; }
.pill-gray  { background:#f3f4f6; color:#374151; }

.summary-stat { text-align:center; padding:.75rem 1rem; }
.summary-stat .num { font-size:1.5rem; font-weight:700; color:#1e40af; }
.summary-stat .lbl { font-size:.72rem; color:#6b7280; text-transform:uppercase; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h3 class="mb-0"><i class="fas fa-id-card text-primary mr-2"></i>Branch Subscription Manager</h3>
      <small class="text-muted">Search a branch → load all branches of its master → update subscriptions &amp; record payments</small>
    </div>
    <a href="{% url 'authentication:branch_payments_report' %}" class="btn btn-outline-info btn-sm">
      <i class="fas fa-chart-bar mr-1"></i>Payments Report
    </a>
  </div>

  {% if messages %}
  {% for m in messages %}
  <div class="alert alert-{{ m.tags }} alert-dismissible fade show">
    {{ m }}<button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
  {% endfor %}
  {% endif %}

  <!-- ── Search ──────────────────────────────────────────────────── -->
  <div class="card sub-mgr-card mb-3">
    <div class="card-body">
      <div class="section-heading"><i class="fas fa-search mr-1"></i>Search Branch</div>
      <div class="row">
        <div class="col-md-8">
          <select id="branch_select" class="form-control" style="width:100%;">
            {% if branch %}
            <option value="{{ branch.id }}" selected>
              {{ branch.company_name }} / {{ branch.branch_name }} (ID: {{ branch.id }})
            </option>
            {% endif %}
          </select>
          <small class="text-muted">Search by branch name or company name</small>
        </div>
        <div class="col-md-4 mt-2 mt-md-0">
          {% if branch %}
          <div class="d-flex flex-wrap" style="gap:.5rem;">
            {% for mu in master_users %}
            <span class="info-pill pill-blue"><i class="fas fa-user-tie mr-1"></i>{{ mu.username }}</span>
            {% endfor %}
            <span class="info-pill pill-green"><i class="fas fa-building mr-1"></i>{{ branches_in_scope|length }} branches</span>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <!-- ── Main form (only if branches loaded) ─────────────────────── -->
  {% if branches_in_scope %}

  <form method="post">
    {% csrf_token %}
    <input type="hidden" name="branch_id" value="{{ branch.id }}">
    <input type="hidden" name="save_subscriptions" value="1">

    <!-- Global Actions Bar -->
    <div class="global-bar">
      <div class="row align-items-end">
        <div class="col-md-auto">
          <div class="label">Global Months to Extend</div>
          <div class="input-group input-group-sm" style="width:160px;">
            <input type="number" name="global_months" id="global_months"
                   class="form-control input-sm" value="0" min="0" max="60">
            <div class="input-group-append">
              <span class="input-group-text" style="font-size:.78rem;">months</span>
            </div>
          </div>
          <small class="text-muted" style="font-size:.72rem;">Adds to each branch's current expiry date</small>
        </div>
        <div class="col-md-auto mt-2 mt-md-0">
          <div class="label">Global Status</div>
          <select name="global_status" class="form-control input-sm" style="width:130px;">
            <option value="">— no change —</option>
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
          </select>
        </div>
        <div class="col-md-auto mt-2 mt-md-0">
          <button type="button" class="btn btn-info btn-sm" onclick="applyGlobalMonths()">
            <i class="fas fa-magic mr-1"></i>Preview Dates
          </button>
        </div>
        <div class="col-md-auto mt-2 mt-md-0 ml-md-auto">
          <button type="button" class="btn btn-outline-success btn-sm mr-1" onclick="selectAll(true)">
            <i class="fas fa-check-double mr-1"></i>Select All
          </button>
          <button type="button" class="btn btn-outline-secondary btn-sm" onclick="selectAll(false)">
            <i class="fas fa-times mr-1"></i>Clear All
          </button>
        </div>
      </div>
    </div>

    <!-- Summary bar -->
    <div class="row text-center mb-3" style="row-gap:.5rem;">
      <div class="col-4 col-md-2">
        <div class="card sub-mgr-card py-2">
          <div class="summary-stat">
            <div class="num text-primary">{{ branches_in_scope|length }}</div>
            <div class="lbl">Total</div>
          </div>
        </div>
      </div>
      <div class="col-4 col-md-2">
        <div class="card sub-mgr-card py-2">
          <div class="summary-stat">
            <div class="num text-success" id="active-count">–</div>
            <div class="lbl">Active</div>
          </div>
        </div>
      </div>
      <div class="col-4 col-md-2">
        <div class="card sub-mgr-card py-2">
          <div class="summary-stat">
            <div class="num text-danger" id="expired-count">–</div>
            <div class="lbl">Expired</div>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card sub-mgr-card py-2">
          <div class="summary-stat">
            <div class="num" id="selected-count">0</div>
            <div class="lbl">Selected</div>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card sub-mgr-card py-2">
          <div class="summary-stat">
            <div class="num text-success" id="total-amount-display">0</div>
            <div class="lbl">Total Amount</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Branches Table -->
    <div class="card sub-mgr-card">
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table subs-table mb-0">
            <thead>
              <tr>
                <th style="width:40px;">
                  <input type="checkbox" id="select-all-cb" onchange="selectAll(this.checked)"
                         style="width:17px;height:17px;cursor:pointer;">
                </th>
                <th>Branch</th>
                <th>Current Expiry</th>
                <th style="width:145px;">Months Extend<br><small class="text-muted" style="font-weight:400;">per row</small></th>
                <th style="width:160px;">New Expiry Date<br><small class="text-muted" style="font-weight:400;">or manual override</small></th>
                <th style="width:130px;">Payment Mode</th>
                <th style="width:130px;">Amount Received</th>
              </tr>
            </thead>
            <tbody>
              {% for b in branches_in_scope %}
              {% with days_left=b.days_left %}
              <tr data-branch-id="{{ b.id }}"
                  data-current-expiry="{% if b.expiry_date %}{{ b.expiry_date|date:'Y-m-d' }}{% endif %}"
                  data-status="{{ b.status }}">

                <!-- Checkbox -->
                <td class="row-check-wrap">
                  <input type="checkbox" name="selected_branches" value="{{ b.id }}"
                         class="row-cb" onchange="updateStats()">
                </td>

                <!-- Branch Info -->
                <td>
                  <div class="branch-name">{{ b.company_name }}</div>
                  <div class="branch-meta">{{ b.branch_name }}</div>
                  <small class="badge badge-{% if b.status == 'Active' %}success{% else %}secondary{% endif %} mt-1">
                    {{ b.status }}
                  </small>
                </td>

                <!-- Current Expiry -->
                <td>
                  {% if b.expiry_date %}
                    <span class="expiry-badge {% if days_left is not None %}{% if days_left < 0 %}expiry-expired{% elif days_left <= 30 %}expiry-warning{% else %}expiry-ok{% endif %}{% endif %}">
                      {{ b.expiry_date|date:"d/m/Y" }}
                    </span>
                    {% if days_left is not None %}
                    <div class="branch-meta mt-1">
                      {% if days_left < 0 %}
                        <i class="fas fa-times-circle text-danger"></i> Expired {{ days_left|cut:"-" }} days ago
                      {% elif days_left == 0 %}
                        <i class="fas fa-exclamation-circle text-warning"></i> Expires today
                      {% else %}
                        <i class="fas fa-clock text-success"></i> {{ days_left }} days left
                      {% endif %}
                    </div>
                    {% endif %}
                  {% else %}
                    <span class="text-muted small">No expiry set</span>
                  {% endif %}
                </td>

                <!-- Months to extend (per row) -->
                <td>
                  <input type="number"
                         name="months_{{ b.id }}"
                         id="months_{{ b.id }}"
                         class="form-control input-sm row-months"
                         value="0" min="0" max="60"
                         data-bid="{{ b.id }}"
                         oninput="calcRowExpiry({{ b.id }})">
                </td>

                <!-- New expiry (computed or manual) -->
                <td>
                  <input type="date"
                         name="manual_expiry_{{ b.id }}"
                         id="manual_expiry_{{ b.id }}"
                         class="form-control input-sm"
                         data-bid="{{ b.id }}"
                         oninput="onManualExpiry({{ b.id }})">
                  <div id="computed_expiry_{{ b.id }}"
                       class="branch-meta mt-1 text-info"
                       style="display:none; font-size:.75rem;">
                  </div>
                </td>

                <!-- Payment Mode -->
                <td>
                  <select name="payment_mode_{{ b.id }}"
                          class="form-control input-sm row-mode"
                          onchange="updateAmountTotal()">
                    <option value="">— select —</option>
                    {% for mode in PAYMENT_MODES %}
                    <option value="{{ mode }}">{{ mode }}</option>
                    {% endfor %}
                  </select>
                </td>

                <!-- Amount -->
                <td>
                  <input type="number"
                         name="amount_{{ b.id }}"
                         class="form-control input-sm row-amount"
                         placeholder="0"
                         min="0" step="0.01"
                         oninput="updateAmountTotal()">
                </td>

              </tr>
              {% endwith %}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      <div class="card-footer d-flex justify-content-between align-items-center">
        <span class="text-muted small" id="selection-info">0 of {{ branches_in_scope|length }} selected</span>
        <div style="display:flex;gap:.5rem;">
          <button type="submit" class="btn btn-success"
                  onclick="return confirmSave()">
            <i class="fas fa-save mr-2"></i>Save Selected Branches
          </button>
          <button type="button" id="saveAndWhatsAppBtn"
                  class="btn btn-success"
                  style="background:#25D366;border-color:#1ebe57;">
            <i class="fab fa-whatsapp mr-1"></i>Save &amp; WhatsApp
          </button>
        </div>
      </div>
    </div>

  </form>

  {% elif branch %}
  <div class="alert alert-warning">
    <i class="fas fa-exclamation-triangle mr-2"></i>
    No master user found for this branch, or no branches linked to its master.
  </div>
  {% else %}
  <div class="card sub-mgr-card">
    <div class="card-body text-center py-5 text-muted">
      <i class="fas fa-search fa-2x mb-3 d-block text-primary"></i>
      Search a branch above to load all branches of its master user.
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
// ── Stored branch data for JS calculations ────────────────────────────────
var BRANCHES = {
  {% for b in branches_in_scope %}
  {{ b.id }}: {
    expiry:      "{% if b.expiry_date %}{{ b.expiry_date|date:'Y-m-d' }}{% endif %}",
    expiry_disp: "{% if b.expiry_date %}{{ b.expiry_date|date:'d/m/Y' }}{% endif %}",
    status:      "{{ b.status }}",
    company:     "{{ b.company_name|escapejs }}",
    branch:      "{{ b.branch_name|escapejs }}",
    phone:       "{{ b.phone_no|escapejs }}",
    mobile:      "{{ b.mobile_no|escapejs }}",
    tid:         {{ b.pos_business_id }}
  }{% if not forloop.last %},{% endif %}
  {% endfor %}
};

// ── Select2 AJAX search ───────────────────────────────────────────────────
$(function() {
  $('#branch_select').select2({
    placeholder: 'Search branch by name or company…',
    allowClear: true,
    ajax: {
      url: '{% url "authentication:branch_ajax" %}',
      dataType: 'json',
      delay: 250,
      data: function(p) { return { q: p.term }; },
      processResults: function(d) { return { results: d.results }; },
      cache: true,
    },
  });
  $('#branch_select').on('change', function() {
    var id = $(this).val();
    if (id) {
      window.location.href =
        '{% url "authentication:branch_subscription_manage" %}?branch_id=' + id;
    }
  });
  countStatuses();
  updateStats();
});

// ── Count active/expired ──────────────────────────────────────────────────
function countStatuses() {
  var active = 0, expired = 0;
  var today = new Date(); today.setHours(0,0,0,0);
  Object.values(BRANCHES).forEach(function(b) {
    if (b.status === 'Active') active++;
    if (b.expiry) {
      var d = new Date(b.expiry);
      if (d < today) expired++;
    }
  });
  document.getElementById('active-count').textContent  = active;
  document.getElementById('expired-count').textContent = expired;
}

// ── Select all / clear ────────────────────────────────────────────────────
function selectAll(doSelect) {
  document.querySelectorAll('.row-cb').forEach(function(cb) { cb.checked = doSelect; });
  document.getElementById('select-all-cb').checked = doSelect;
  updateStats();
}

// ── Update counts + total amount ──────────────────────────────────────────
function updateStats() {
  var sel   = document.querySelectorAll('.row-cb:checked').length;
  var total = document.querySelectorAll('.row-cb').length;
  document.getElementById('selected-count').textContent = sel;
  document.getElementById('selection-info').textContent =
    sel + ' of ' + total + ' selected';
  updateAmountTotal();
}

function updateAmountTotal() {
  var sum = 0;
  document.querySelectorAll('.row-cb:checked').forEach(function(cb) {
    var row  = cb.closest('tr');
    var amt  = parseFloat(row.querySelector('.row-amount').value) || 0;
    sum += amt;
  });
  document.getElementById('total-amount-display').textContent = sum.toLocaleString('en-PK');
}

// ── Add months helper ─────────────────────────────────────────────────────
function addMonthsToDate(dateStr, months) {
  if (!dateStr || months <= 0) return null;
  var d = new Date(dateStr);
  var m = d.getMonth() + months;
  var y = d.getFullYear() + Math.floor(m / 12);
  m = m % 12;
  // Cap day at month end
  var maxDay = new Date(y, m + 1, 0).getDate();
  d.setFullYear(y);
  d.setMonth(m);
  d.setDate(Math.min(d.getDate(), maxDay));
  return d.toISOString().split('T')[0];
}

function fmtDate(s) {
  if (!s) return '';
  var d = new Date(s);
  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  return d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear();
}

// ── Per-row: compute new expiry when months input changes ─────────────────
function calcRowExpiry(bid) {
  var months    = parseInt(document.getElementById('months_' + bid).value) || 0;
  var manualEl  = document.getElementById('manual_expiry_' + bid);
  var previewEl = document.getElementById('computed_expiry_' + bid);
  var base      = BRANCHES[bid] ? BRANCHES[bid].expiry : '';

  if (manualEl.value) {
    // Manual date is set — months have no visual effect
    previewEl.style.display = 'none';
    return;
  }

  if (months > 0 && base) {
    var newDate = addMonthsToDate(base, months);
    previewEl.textContent  = '→ ' + fmtDate(newDate);
    previewEl.style.display = 'block';
  } else {
    previewEl.style.display = 'none';
  }
}

// ── When manual date is set, clear the preview ────────────────────────────
function onManualExpiry(bid) {
  var previewEl = document.getElementById('computed_expiry_' + bid);
  var val       = document.getElementById('manual_expiry_' + bid).value;
  if (val) {
    previewEl.style.display = 'none';
    document.getElementById('months_' + bid).value = 0;
  }
}

// ── Apply global months to ALL visible rows ───────────────────────────────
function applyGlobalMonths() {
  var globalMonths = parseInt(document.getElementById('global_months').value) || 0;
  if (globalMonths <= 0) { alert('Enter months > 0 to preview.'); return; }
  document.querySelectorAll('.row-months').forEach(function(inp) {
    var bid = inp.getAttribute('data-bid');
    inp.value = globalMonths;
    calcRowExpiry(parseInt(bid));
  });
}

// ── Confirm before save ───────────────────────────────────────────────────
function confirmSave() {
  var sel = document.querySelectorAll('.row-cb:checked').length;
  if (sel === 0) { alert('Please select at least one branch.'); return false; }
  return confirm(sel + ' branch(es) will be updated. Proceed?');
}


// ── Save & WhatsApp ────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', function() {
  var waBtn = document.getElementById('saveAndWhatsAppBtn');
  if (!waBtn) return;

  waBtn.addEventListener('click', function() {
    // 1. Validate selected branches
    var selected = Array.from(document.querySelectorAll('.row-cb:checked'));
    if (selected.length === 0) {
      alert('Please select at least one branch.');
      return;
    }
    if (!confirm(selected.length + ' branch(es) will be updated and WhatsApp sent. Proceed?')) {
      return;
    }

    // 2. Collect form data
    var form = document.querySelector('form[method="post"]');
    if (!form) return;
    var fd = new FormData(form);
    fd.set('save_subscriptions', '1');

    // 3. Disable button
    var origHTML = waBtn.innerHTML;
    waBtn.disabled = true;
    waBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Saving...';

    // 4. Submit via AJAX
    fetch(window.location.href, {
      method: 'POST',
      body: fd,
      credentials: 'same-origin',
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(function(resp) {
      // Django returns redirect on success, AJAX returns 200/302
      // We collect selected branches data from JS BRANCHES object
      return resp;
    })
    .then(function() {
      // 5. Group selected branches by phone number
      var phoneGroups = {};  // phone -> [branch_data, ...]

      selected.forEach(function(cb) {
        var bid = parseInt(cb.value);
        var bdata = BRANCHES[bid];
        if (!bdata) return;

        // Phone priority: mobile_no first, then phone_no
        var rawPhone = (bdata.mobile || bdata.phone || '').trim();
        if (!rawPhone) return;  // no phone — skip

        // Normalize: remove spaces/dashes, ensure starts with 92
        var phone = rawPhone.replace(/[\s\-\(\)]/g, '');
        if (phone.startsWith('0')) phone = '92' + phone.slice(1);
        if (!phone.startsWith('92')) phone = '92' + phone;

        if (!phoneGroups[phone]) phoneGroups[phone] = [];

        // Get new expiry from form inputs
        var manualExpiry = document.getElementById('manual_expiry_' + bid);
        var monthsInput  = document.getElementById('months_' + bid);
        var newExpiryStr = '';

        if (manualExpiry && manualExpiry.value) {
          // Manual date entered — format as dd/mm/yyyy
          var parts = manualExpiry.value.split('-');
          if (parts.length === 3) newExpiryStr = parts[2] + '/' + parts[1] + '/' + parts[0];
        } else {
          // Computed from months
          var months = parseInt((monthsInput && monthsInput.value) || 0);
          var globalMonths = parseInt(document.getElementById('global_months').value || 0);
          var usedMonths = months > 0 ? months : globalMonths;
          if (usedMonths > 0 && bdata.expiry) {
            var computed = addMonthsToDate(bdata.expiry, usedMonths);
            if (computed) {
              var p = computed.split('-');
              newExpiryStr = p[2] + '/' + p[1] + '/' + p[0];
            }
          } else {
            newExpiryStr = bdata.expiry_disp || bdata.expiry || '';
          }
        }

        phoneGroups[phone].push({
          company:    bdata.company,
          branch:     bdata.branch,
          tid:        bdata.tid,
          new_expiry: newExpiryStr
        });
      });

      // 6. Send WhatsApp to each unique phone
      var phones = Object.keys(phoneGroups);
      if (phones.length === 0) {
        alert('Branches saved! (No phone numbers found to send WhatsApp)');
        waBtn.disabled = false;
        waBtn.innerHTML = origHTML;
        setTimeout(function() { location.reload(); }, 800);
        return;
      }

      var sent = 0;
      var failed = 0;
      var promises = phones.map(function(phone) {
        var branches = phoneGroups[phone];
        var msg = buildWhatsAppMessage(branches);

        var waFD = new FormData();
        waFD.append('phone', phone);
        waFD.append('message', msg);
        // http://localhost:3000
        return fetch('https://wp.blueprimes.com/api/send-media', {
          method: 'POST',
          body: waFD
        })
        .then(function(r) { return r.json(); })
        .then(function(d) {
          if (d.success) sent++;
          else { failed++; console.warn('WA failed for', phone, d.error); }
        })
        .catch(function() { failed++; });
      });

      Promise.all(promises).then(function() {
        waBtn.disabled = false;
        waBtn.innerHTML = origHTML;

        if (failed === 0) {
          showSubsToast('\u2705 Saved & WhatsApp sent to ' + sent + ' number(s)!');
        } else {
          alert('Saved! WhatsApp sent: ' + sent + ', failed: ' + failed + '. (Is WhatsApp server running?)');
        }
        setTimeout(function() { location.reload(); }, 1500);
      });
    })
    .catch(function(err) {
      console.error(err);
      alert('Save failed. Please try again.');
      waBtn.disabled = false;
      waBtn.innerHTML = origHTML;
    });
  });
});

// ── Build WhatsApp message for a group of branches (same phone) ───────────
function buildWhatsAppMessage(branches) {
  var today = new Date();
  var dateStr = today.getDate().toString().padStart(2,'0') + '/' +
                (today.getMonth()+1).toString().padStart(2,'0') + '/' +
                today.getFullYear();

  var msg = '';
  msg += '\u2705 *Subscription Payment Received*\n';
  msg += '\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\n';

  if (branches.length === 1) {
    var b = branches[0];
    msg += '*Company:* ' + b.company + '\n';
    msg += '*Tenant ID:* ' + b.tid    + '\n';
    msg += '*Valid Till:* ' + (b.new_expiry || '—') + '\n';
  } else {
    msg += 'Dear Customer, payment received for *' + branches.length + ' branch(es)*:\n\n';
    branches.forEach(function(b, i) {
      msg += (i+1) + '. *' + b.company + ' / ' + b.branch + '*\n';
      msg += '   Tenant ID: ' + b.tid + '\n';
      msg += '   Valid Till: ' + (b.new_expiry || '—') + '\n';
      if (i < branches.length - 1) msg += '\n';
    });
  }

  msg += '\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\n';
  msg += '\uD83D\uDCC5 *Date:* ' + dateStr + '\n';
  msg += '\uD83D\uDCB0 Thank you for your payment!\n';
  msg += '\n_Powered by Blue Primes Software_\n_blueprimes.com_';

  return msg;
}

// ── Simple toast for subscription page ───────────────────────────────────
function showSubsToast(message) {
  var old = document.getElementById('subsToast');
  if (old) old.remove();
  var t = document.createElement('div');
  t.id = 'subsToast';
  t.innerHTML = '<div style="position:fixed;top:20px;right:20px;background:linear-gradient(135deg,#25D366,#128C7E);'
    + 'color:#fff;padding:14px 22px;border-radius:10px;box-shadow:0 5px 20px rgba(37,211,102,.4);'
    + 'z-index:99999;display:flex;align-items:center;gap:10px;font-weight:600;">'
    + '<i class="fab fa-whatsapp" style="font-size:20px;"></i>'
    + '<span>' + message + '</span></div>';
  document.body.appendChild(t);
  setTimeout(function() {
    t.style.opacity = '0';
    t.style.transition = 'opacity .3s';
    setTimeout(function() { t.remove(); }, 300);
  }, 3500);
}

// ── Block Enter key from submitting form anywhere in the table ────────────
// ── Amount Received field: Enter → next row ka Amount focus ───────────────
document.addEventListener('DOMContentLoaded', function() {
  var mainForm = document.querySelector('form[method="post"]');
  if (!mainForm) return;

  mainForm.addEventListener('keydown', function(e) {
    if (e.key !== 'Enter') return;

    // Submit button pe Enter allow hai
    if (e.target && e.target.type === 'submit') return;

    // Har jagah Enter block karo
    e.preventDefault();
    e.stopPropagation();

    // Agar .row-amount field pe Enter press hua to next row ka amount focus
    if (e.target && e.target.classList.contains('row-amount')) {
      var allAmounts = Array.from(document.querySelectorAll('.row-amount'));
      var idx = allAmounts.indexOf(e.target);
      if (idx >= 0 && idx < allAmounts.length - 1) {
        allAmounts[idx + 1].focus();
        allAmounts[idx + 1].select();
      }
    }
  }, true); // capture phase use karo taake koi bhi field miss na ho
});
</script>
{% endblock %}