"Adding Retention Field and Balance in Invoice Footer"

[Mabaega]

Let see if this work

<span id="retention-value" style="display: none;">%%Retention%%</span>
<script>
	document.addEventListener('DOMContentLoaded', () => {

    const retentionPlaceholder = document.getElementById('retention-value').textContent.trim();
    const retentionValue = parseFloat(retentionPlaceholder.replace(/[^0-9.]/g, '') || 0);

    if (isNaN(retentionValue)) {
        return; 
    }
	const totalRow = document.querySelector('tbody tr:nth-last-of-type(2)');
    const totalValueCell = totalRow.querySelector('td[data-value]');
    const totalValue = parseFloat(totalValueCell.dataset.value || 0);
    const totalText = totalValueCell.textContent.trim();
    const currencyMatch = totalText.match(/^[^\d\s]+/); 
    const currencyCode = currencyMatch ? currencyMatch[0].trim() : '';
    
	const retentionRow = document.createElement('tr');
    const retentionLabelCell = document.createElement('td');
    retentionLabelCell.colSpan = 3;
    retentionLabelCell.style.textAlign = 'end';
    retentionLabelCell.style.padding = '5px 10px';
    retentionLabelCell.style.fontWeight = 'bold';
    retentionLabelCell.textContent = 'Retention';
    
	const retentionValueCell = document.createElement('td');
    retentionValueCell.style.textAlign = 'right';
    retentionValueCell.style.whiteSpace = 'nowrap';
    retentionValueCell.style.border = '1px solid #000';
    retentionValueCell.style.padding = '5px 10px';
    retentionValueCell.style.fontWeight = 'bold';
    retentionValueCell.textContent = `${currencyCode} ${retentionValue.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
    retentionRow.appendChild(retentionLabelCell);
    retentionRow.appendChild(retentionValueCell);
    totalRow.parentNode.insertBefore(retentionRow, totalRow.nextSibling);
    
	const balanceDueValue = totalValue - retentionValue;
    const balanceRow = document.createElement('tr');
    const balanceLabelCell = document.createElement('td');
    balanceLabelCell.colSpan = 3;
    balanceLabelCell.style.textAlign = 'end';
    balanceLabelCell.style.padding = '5px 10px';
    balanceLabelCell.style.fontWeight = 'bold';
    balanceLabelCell.textContent = 'Balance Due';
    
	const balanceValueCell = document.createElement('td');
    balanceValueCell.style.textAlign = 'right';
    balanceValueCell.style.whiteSpace = 'nowrap';
    balanceValueCell.style.border = '1px solid #000';
    balanceValueCell.style.padding = '5px 10px';
    balanceValueCell.style.fontWeight = 'bold';
    balanceValueCell.textContent = `${currencyCode} ${balanceDueValue.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
    balanceRow.appendChild(balanceLabelCell);
    balanceRow.appendChild(balanceValueCell);
    retentionRow.parentNode.insertBefore(balanceRow, retentionRow.nextSibling);	
	
	const scriptElement = document.currentScript;
	if (scriptElement) {
		scriptElement.remove(); 
	}
});
</script>