{% extends "pos/base.html" %}
{% load static %}
{% block title %}{% if is_edit %}Edit{% else %}Add{% endif %} Recovery{% endblock %}

{% block stylesheets %}

<style>
  .hidden {display:none;}

  /* 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: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
  }
  .print-modal h4 {
    margin: 0 0 20px;
    color: #1a365d;
    font-weight: 700;
  }
  .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;
  }
</style>
{% endblock %}

{% block heading %}{% if is_edit %}Edit{% else %}Add{% endif %} Customer Recovery{% endblock %}

{% block content %}

<!-- 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="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>



<form action="" method="post" id="recovery-form" class="needs-validation">
  {% csrf_token %}

  <input type="hidden" id="contract_id" name="contract_id"
         value="{{ contract_id|default_if_none:0 }}">

  <input type="hidden" id="contract_customer_id"
         value="{{ contract_customer_id|default_if_none:0 }}">

  <input type="hidden" id="contract_customer_name"
         value="{{ contract_customer_name|default:'' }}">


  <div class="row">
    <div class="col-md-2">
      <label class="small mb-1">Customer&nbsp;ID</label>
      <input type="number" name="customer_id" id="customer_id" value="{{ payment.name|default_if_none:'' }}" class="form-control" required>
    </div>

    <div class="col-md-4">
      <label class="small mb-1">Customer&nbsp;Name</label>
      <select name="customer_name"
              id="searchbox_customers"
              class="form-control" required>
          {# when editing, inject the current customer so select2 can display it #}
          {% if is_edit %}
              <option value="{{ payment.name }}" selected>
                  {{ payment.party_descp }}
              </option>
          {% endif %}
      </select>
    </div>

    <div class="col-md-2">
      <label class="small mb-1">Previous</label>
      <input type="text" id="due_balance" class="form-control" value="{{ payment.previous_balance|default_if_none:'' }}" readonly>
    </div>

    <div class="col-md-2">
      <label class="small mb-1">Amount</label>
      <input
        type="number"
        step="0.01"
        min="1"
        name="received_amount"
        value="{% if is_edit %}{{ payment_abs_amount|default_if_none:'' }}{% else %}{{ payment.amount_transaction|default_if_none:'' }}{% endif %}"
        required
        class="form-control">
      <div class="form-check mt-1">
        <input class="form-check-input" type="checkbox" id="send_instead" name="send_instead" value="1" {% if send_instead_checked %}checked{% endif %}>
        <label class="form-check-label small" for="send_instead">Send Amount Instead</label>
      </div>

    </div>


    <div class="col-md-2">
      <label class="small mb-1">Date</label>

      <input 
        type="date" 
        class="form-control" 
        id="trx_date" 
        name="trx_date"
        value="{{ today|date:'Y-m-d' }}" 
        required
      >


    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-4">
      <label class="small mb-1">Description</label>
      <input type="text" name="description" class="form-control" value="{{ payment.bill_title_descp|default_if_none:'' }}">
    </div>

    <div class="col-md-2">
      <label class="small mb-1">Cash&nbsp;Type</label>
      <select name="cash_type" id="cash_type" class="form-control" required>
          {% with ct=payment.bank_id|yesno:"Bank,Cash" %}
          {% if is_edit %}<option>{{ ct }}</option>{% endif %}
          {% endwith %}
          <option value="Bank">Bank</option>
          <option value="Cheque">Cheque</option>
      </select>
    </div>

    <div class="col-md-3 bank-only hidden">
      <label class="small mb-1">Bank&nbsp;Name</label>
      <select name="bank_name" id="bank_name" class="form-control">
        {% for b in bank_accounts %}
          <option value="{{ b.t_id }}"
            {% if is_edit and b.t_id|stringformat:"s" == payment.bank_id|stringformat:"s" %}selected{% endif %}>
            {{ b.name }}
          </option>
        {% endfor %}
      </select>
    </div>

    <div class="col-md-3 cheque-only hidden">
      <label class="small mb-1">Cheque&nbsp;No</label>
      <input type="text" name="cheque_no" class="form-control">
    </div>
    <div class="col-md-3 cheque-only hidden mt-3">
      <label class="small mb-1">Cheque&nbsp;Date</label>
      <input type="date" name="cheque_date" class="form-control">
    </div>
    <div class="col-md-4 cheque-only hidden mt-3">
      <label class="small mb-1">Cheque&nbsp;Description</label>
      <input type="text" name="cheque_desc" class="form-control">
    </div>

    <div class="col-md-2">
      <label class="small mb-1">Operator</label>
      <select name="saleman_operator" class="form-control">
        {% for s in salemen %}
          <option value="{{ s.t_id }}"
              {% if is_edit and s.t_id|stringformat:"s" == payment.saleman_name %}selected{% endif %}>{{ s.name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <div class="mt-4">
    <button type="submit"
            name="action"
            value="save"
            class="btn btn-success">
      <i class="fas fa-save mr-1"></i>Save
    </button>

    <button type="submit"
            name="action"
            value="save_share"
            class="btn btn-primary">
      <i class="fas fa-share-alt mr-1"></i>Save &amp; Share
    </button>

    <!-- NEW: Save & Print Button -->
    <button type="button"
            id="saveAndPrintBtn"
            class="btn btn-info">
      <i class="fas fa-print mr-1"></i>Save &amp; Print
    </button>

<!-- Save & WhatsApp Button -->
    <button type="button"
            id="saveAndWhatsAppBtn"
            class="btn btn-success"
            style="background-color:#25D366;border-color:#25D366;">
      <i class="fab fa-whatsapp mr-1"></i>Save &amp; WhatsApp
    </button>

    <a href="{% url 'transactions:customer_recovery' %}" class="btn btn-secondary">
      Cancel
    </a>
  </div>

</form>
{% endblock %}

{% block javascripts %}
<!-- Select2 without defer -->

<script>
// ========== PRINT MODAL FUNCTIONS ==========
let pendingPrintInvoiceNo = null;
let pendingPrintAction = null;

function openPrintModal(invoiceNo, action) {
  pendingPrintInvoiceNo = invoiceNo;
  pendingPrintAction = action || 'direct_print';
  document.getElementById('printModal').classList.add('active');
}

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

// ========== FORM RESET FUNCTION ==========
function resetRecoveryForm() {
  const formEl = document.getElementById('recovery-form');
  if (!formEl) return;

  // 1. Reset basic form fields
  formEl.reset();

  // 2. Clear customer ID
  $('#customer_id').val('');

  // 3. Clear Select2 customer dropdown
  const $customerSelect = $('#searchbox_customers');
  if ($customerSelect.length && $customerSelect.data('select2')) {
    $customerSelect.val(null).trigger('change');
    // Remove all options except placeholder
    $customerSelect.find('option').remove();
  }

  // 4. Clear due balance
  $('#due_balance').val('');

  // 5. Clear amount
  $('input[name="received_amount"]').val('');

  // 6. Reset date to today
  const today = new Date().toISOString().split("T")[0];
  $('#trx_date').val(today);

  // 7. Clear description
  $('input[name="description"]').val('');

  // 8. Reset cash type to Cash and hide bank/cheque fields
  $('#cash_type').val('Bank').trigger('change');

  // 9. Clear cheque fields
  $('input[name="cheque_no"]').val('');
  $('input[name="cheque_date"]').val('');
  $('input[name="cheque_desc"]').val('');

  // 10. Uncheck "Send Instead" checkbox
  $('#send_instead').prop('checked', false);

  // 11. Reset hidden contract fields
  $('#contract_id').val('0');
  $('#contract_customer_id').val('0');
  $('#contract_customer_name').val('');

  // 12. Open Select2 and focus for next entry
  setTimeout(() => {
    if ($customerSelect.data('select2')) {
      $customerSelect.select2('open');
      setTimeout(() => {
        const searchField = document.querySelector('.select2-container--open .select2-search__field');
        if (searchField) searchField.focus();
      }, 100);
    }
  }, 300);

  // 13. Show success message (optional)
  showSuccessToast('Transaction saved! Ready for next entry.');
}

// ========== SUCCESS TOAST (Optional) ==========
function showSuccessToast(message) {
  // Remove existing toast
  const existingToast = document.getElementById('successToast');
  if (existingToast) existingToast.remove();

  // Create toast
  const toast = document.createElement('div');
  toast.id = 'successToast';
  toast.innerHTML = `
    <div style="
      position: fixed;
      top: 20px;
      right: 20px;
      background: linear-gradient(135deg, #28a745, #20c997);
      color: white;
      padding: 15px 25px;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(40,167,69,0.4);
      z-index: 99999;
      display: flex;
      align-items: center;
      gap: 10px;
      animation: slideIn 0.3s ease;
    ">
      <i class="fas fa-check-circle" style="font-size: 20px;"></i>
      <span>${message}</span>
    </div>
  `;
  document.body.appendChild(toast);

  // Auto remove after 3 seconds
  setTimeout(() => {
    toast.style.opacity = '0';
    toast.style.transform = 'translateX(100px)';
    toast.style.transition = 'all 0.3s ease';
    setTimeout(() => toast.remove(), 300);
  }, 3000);
}

// ========== EXECUTE PRINT ==========
function executePrint(printType) {
  if (!pendingPrintInvoiceNo) return;
  
  const url = "{% url 'transactions:recovery_receipt' 0 %}".replace('/0/', '/' + pendingPrintInvoiceNo + '/') + printType + '/';
  window.open(url, '_blank');
  closePrintModal();
  resetRecoveryForm();
  
  // If this was save+print, reset form for next entry
  if (pendingPrintAction === 'save_print') {
    setTimeout(() => {
      resetRecoveryForm();
    }, 500);
  }
}

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

// Close modal on overlay click
document.getElementById('printModal').addEventListener('click', function(e) {
  if (e.target === this) closePrintModal();
});

// Close on Escape key
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closePrintModal();
});

// ========== DOMCONTENTLOADED ==========
document.addEventListener('DOMContentLoaded', () => {
  const csrftoken = '{{ csrf_token }}';

  // Save & Print Button Handler
  const saveAndPrintBtn = document.getElementById('saveAndPrintBtn');
  if (saveAndPrintBtn) {
    saveAndPrintBtn.addEventListener('click', async function() {
      const formEl = document.getElementById('recovery-form');
      
      // Form validation
      if (!formEl.checkValidity()) {
        formEl.reportValidity();
        return;
      }
      
      // Disable button to prevent double click
      this.disabled = true;
      this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Saving...';

      const formData = new FormData(formEl);
      formData.set('action', 'save_print');

      try {
        const resp = await fetch(window.location.href, {
          method: 'POST',
          body: formData,
          credentials: 'same-origin',
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          }
        });

        if (!resp.ok) throw new Error('Save failed');
        const data = await resp.json();
        if (!data.ok || !data.invoice_no) throw new Error('Bad response');

        // Open print modal
        openPrintModal(data.invoice_no, 'save_print');

      } catch (err) {
        console.error(err);
        alert('Save failed. Please try again.');
      } finally {
        // Re-enable button
        this.disabled = false;
        this.innerHTML = '<i class="fas fa-print mr-1"></i>Save & Print';
      }
    });
  }

  // --- Select2 Customer Search ---
  const $customerSelect = $('#searchbox_customers');
  
  if (typeof $.fn.select2 === 'undefined') {
    console.error('Select2 not loaded!');
    return;
  }
 
  // $customerSelect.select2({
  //   theme: 'bootstrap4',
  //   placeholder: 'Search customer…',
  //   allowClear: true,
  //   minimumInputLength: 1,
  //   ajax: {
  //     url: "{% url 'customers:get_customers' %}",
  //     type: 'POST',
  //     delay: 250,
  //     data: p => ({ term: p.term }),
  //     headers: { 'X-CSRFToken': csrftoken },
  //     processResults: d => ({ results: d })
  //   },
  //   templateResult: r => r.loading ? r.text : $('<div>' + r.text + '</div>')
  // });


  $customerSelect.select2({
    theme: 'bootstrap4',
    placeholder: 'Search customer…',
    allowClear: true,
    minimumInputLength: 1,
    ajax: {
      url: "{% url 'customers:get_customers' %}",
      type: 'POST',
      delay: 250,
      data: p => ({ term: p.term }),
      headers: { 'X-CSRFToken': csrftoken },
      processResults: d => ({ results: d })
    },
    templateResult: function(r) {
        if (r.loading) return r.text;

        var balance = (r.balance !== undefined && r.balance !== null)
          ? parseFloat(r.balance).toLocaleString()
          : '0';

        var address = (r.address || '').trim();

        // Title Case
        var name = r.text.replace(/\w\S*/g, function(w) {
          return w.charAt(0).toUpperCase() + w.slice(1).toLowerCase();
        });

        return $(
          '<div style="padding: 4px 0; line-height: 1.4;">' +
            '<div style="display:flex; justify-content:space-between; align-items:baseline; gap:8px;">' +
              '<span style="font-weight:700; color:#111; font-size:14px;">' + name + '</span>' +
              '<span style="font-size:12px; color:#111; font-weight:600; white-space:nowrap;">Balance: ' + balance + '</span>' +
            '</div>' +
            (address
              ? '<div style="font-size:12px; color:#111; font-weight:500; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:360px;">' + address + '</div>'
              : '') +
          '</div>'
        );
      },
    templateSelection: r => r.text || r.id
  });

  

  // Auto-open select2 on page load (only if not editing)
  {% if not is_edit %}
  setTimeout(() => {
    $customerSelect.select2('open');
    setTimeout(() => {
      const searchField = document.querySelector('.select2-container--open .select2-search__field');
      if (searchField) searchField.focus();
    }, 0);
  }, 200);
  {% endif %}

  // On customer select
  $customerSelect.on('select2:select', e => {
    const d = e.params.data;
    $('#customer_id').val(d.id);
    $('#due_balance').val(d.balance || 0);
    $('input[name="received_amount"]').focus();
  });

  // On customer clear
  $customerSelect.on('select2:clear', e => {
    $('#customer_id').val('');
    $('#due_balance').val('');
  });

  // If customer_id typed manually
  $('#customer_id').on('change', function () {
    if (!this.value) return;
    $.post("{% url 'customers:get_customers' %}", { term: this.value }, function (d) {
      const r = d.find(x => x.value == $('#customer_id').val());
      if (r) {
        const newOption = new Option(r.label, r.value, false, true);
        $customerSelect.append(newOption).trigger('change');
        $('#due_balance').val(r.balance || 0);
        $('input[name="received_amount"]').focus();
      }
    });
  });

  // Keyboard Navigation
  $('input[name="received_amount"]').on('keydown', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      $('input[name="description"]').focus();
    }
  });

  $(document).on('keydown', '.select2-search__field', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      setTimeout(() => {
        $('input[name="received_amount"]').focus();
      }, 100);
    }
  });

  // Ctrl + S for Form Submit
  $(document).on('keydown', function (e) {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
      e.preventDefault();
      $('#recovery-form').submit();
    }
  });

  // Prevent form submit on Enter
  $('#recovery-form').on('keydown', function (e) {
    if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA' && !$(e.target).is('.select2-search__field')) {
      e.preventDefault();
    }
  });

  // Date default
  const today = new Date().toISOString().split("T")[0];
  const $trxDate = $('#trx_date');
  if (!$trxDate.val()) $trxDate.val(today);

  // Toggle Cash Type Fields
  function toggleCash() {
    const t = $('#cash_type').val();
    $('.bank-only').toggleClass('hidden', t !== 'Bank');
    $('.cheque-only').toggleClass('hidden', t !== 'Cheque');
    $('#bank_name').prop('required', t === 'Bank');
  }
  $('#cash_type').on('change', toggleCash);
  toggleCash();
});
</script>

<script>
// --------- Share helper ---------
async function runRecoveryShare(invNo, receiptUrl) {
  if (!invNo) return;

  const baseUrl = receiptUrl || (
    "/transactions/customer_recovery/receiptpdf/" + encodeURIComponent(invNo) + "/"
  );

  try {
    const resp = await fetch(baseUrl, {
      credentials: 'same-origin',
      cache: 'no-store'
    });
    if (!resp.ok) throw new Error('PDF fetch failed');

    const blob = await resp.blob();
    const fileName = `recovery-${invNo}.pdf`;
    const file = new File([blob], fileName, { type: 'application/pdf' });

    const isSecure =
      window.isSecureContext ||
      /^https:$/i.test(location.protocol) ||
      /^(localhost|127\.0\.0\.1)$/i.test(location.hostname);

    if (isSecure && navigator.canShare && navigator.canShare({ files: [file] })) {
      await navigator.share({
        files: [file],
        title: `Recovery #${invNo}`,
        text: 'Please find attached recovery receipt.'
      });
    } else {
      const blobUrl = URL.createObjectURL(file);
      const w = window.open(blobUrl, '_blank');
      if (!w) {
        window.open(baseUrl, '_blank');
      }
    }
  } catch (err) {
    console.error('Recovery share failed:', err);
    window.open(baseUrl, '_blank');
  }
}

// Save & Share button handler
document.addEventListener('DOMContentLoaded', () => {
  const saveShareBtn = document.querySelector('button[name="action"][value="save_share"]');
  const formEl = document.getElementById('recovery-form');

  if (!saveShareBtn || !formEl) return;

  saveShareBtn.addEventListener('click', async function(e) {
    e.preventDefault();
    
    // Form validation
    if (!formEl.checkValidity()) {
      formEl.reportValidity();
      return;
    }

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

    const formData = new FormData(formEl);
    formData.set('action', 'save_share');

    let savedOk = false;

    try {
      const resp = await fetch(window.location.href, {
        method: 'POST',
        body: formData,
        credentials: 'same-origin',
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      });

      if (!resp.ok) throw new Error('Save failed');
      const data = await resp.json();
      if (!data.ok || !data.invoice_no) throw new Error('Bad response');

      savedOk = true;
      await runRecoveryShare(data.invoice_no, data.receipt_url);

    } catch (err) {
      console.error(err);
      alert('Recovery save/share nahi ho saki. Please dobara try karein.');
    } finally {
      // Re-enable button
      this.disabled = false;
      this.innerHTML = '<i class="fas fa-share-alt mr-1"></i>Save & Share';
      
      // Reset form if saved successfully
      if (savedOk) {
        resetRecoveryForm();
      }
    }
  });

  // Contract customer handling
  var custName = ($('#contract_customer_name').val() || '').trim();
  var custId = parseInt(($('#contract_customer_id').val() || '').replace(/[^\d]/g, ''), 10) || 0;
  var contractId = parseInt(($('#contract_id').val() || '').replace(/[^\d]/g, ''), 10) || 0;

  if (!contractId || !custId) return;

  $('#customer_id').val(custId);
  var $sel = $('#searchbox_customers');

  function setContractCustomer() {
    if (!$sel.length) return;
    var text = custName || ('Customer #' + custId);
    var option = new Option(text, custId, true, true);
    $sel.append(option).trigger('change');

    if ($sel.data('select2')) {
      $sel.select2('close');
    }
  }

  if ($sel.data('select2')) {
    setContractCustomer();
  } else {
    setTimeout(function () {
      if ($sel.data('select2')) {
        setContractCustomer();
      }
    }, 0);
  }
});
</script>



<script>
document.addEventListener('DOMContentLoaded', () => {
  const waBtn = document.getElementById('saveAndWhatsAppBtn');
  const formEl = document.getElementById('recovery-form');
  if (!waBtn || !formEl) return;
 
  // Signature to append at the end of every message
  const MESSAGE_SIGNATURE = `
 
━━━━━━━━━━━━━━━
_Automated Message from Blue Primes Software (blueprimes.com)_`;
 
  waBtn.addEventListener('click', async function() {
    if (!formEl.checkValidity()) { formEl.reportValidity(); return; }
 
    const origHTML = this.innerHTML;
    this.disabled = true;
    this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Saving…';
 
    const fd = new FormData(formEl);
    fd.set('action', 'save_whatsapp');
 
    let savedOk = false;
    try {
      // Step 1: Save in Django
      const resp = await fetch(window.location.href, {
        method: 'POST', body: fd, credentials: 'same-origin',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      });
      const data = await resp.json();
      if (!data.ok) throw new Error('Save failed');
      savedOk = true;
 
      // Step 2: Get default template from database
      let templateText = '';
      try {
        const templateResp = await fetch("{% url 'pos:whatsapp_template_get_default' 'recovery' %}", {
          method: 'GET',
          credentials: 'same-origin',
          headers: { 'X-Requested-With': 'XMLHttpRequest' }
        });
        const templateData = await templateResp.json();
        
        if (templateData.ok && templateData.template_text) {
          templateText = templateData.template_text;
          console.log('Using template:', templateData.template_name);
        } else {
          console.warn('No default template found, using fallback');
          templateText = getFallbackTemplate();
        }
      } catch (templateErr) {
        console.warn('Failed to fetch template, using fallback:', templateErr);
        templateText = getFallbackTemplate();
      }
 
      // Step 3: Replace placeholders in template
      let msg = replacePlaceholders(templateText, {
        customer_name: (data.customer_name || 'Customer').toString().trim(),
        invoice_no: data.invoice_no || '',
        amount: data.amount || '0',
        balance: data.prev_balance || '0',
        remaining: data.cust_balance || '0',
        date: new Date().toLocaleDateString('en-GB'),
        mobile: data.customer_phone || '',
        address: '',
        remarks: '',
      });
 
      // Step 4: Add signature at the end
      msg += MESSAGE_SIGNATURE;
 
      // Step 5: Call WhatsApp API
      const waFD = new FormData();
      waFD.append('phone', data.customer_phone);
      waFD.append('message', msg);
 
      const waResp = await fetch('http://localhost:3000/api/send-media', {
        method: 'POST', body: waFD
      });
      const waData = await waResp.json();
 
      if (waData.success) {
        showSuccessToast('✅ WhatsApp sent to ' + data.customer_name);
      } else {
        alert('Saved but WhatsApp failed: ' + waData.error);
      }
    } catch (err) {
      console.error(err);
      if (!savedOk) alert('Save failed: ' + err.message);
      else alert('Saved but WhatsApp not reachable. Is WhatsApp server running?');
    } finally {
      this.disabled = false;
      this.innerHTML = origHTML;
      if (savedOk) resetRecoveryForm();
    }
  });
 
  // Helper function to replace placeholders
  function replacePlaceholders(template, data) {
    let result = template;
    for (const [key, value] of Object.entries(data)) {
      const placeholder = '{' + key + '}';
      result = result.split(placeholder).join(value || '');
    }
    return result;
  }
 
  // Fallback template - Short English message
  function getFallbackTemplate() {
    return `*{customer_name}*
 
✅ Rs. {amount} received
📝 Receipt# {invoice_no}
📋 Balance: Rs. {remaining}
📅 Date: {date}
 
Thank you! 🙏`;
  }
});
</script>


<style>
/* Toast Animation */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
{% endblock %}