Update templates/receipt.html

This commit is contained in:
Ghassan Yusuf 2025-09-19 20:28:19 +03:00
parent 837a844195
commit 10ca0f5b56

View File

@ -222,6 +222,22 @@
color: var(--bahrain-white);
font-weight: 700;
}
/* New styles for the conditional note */
.receipt-note {
background-color: #fff3cd; /* A light, noticeable color */
border-left: 5px solid #ffc107; /* A bright border */
padding: 10px 15px;
margin-top: 20px;
margin-bottom: 20px;
font-size: 14px;
color: #664d03;
line-height: 1.4;
display: none; /* Hide by default */
}
.receipt-note strong {
color: #333;
}
.contact-info {
display: flex;
@ -358,6 +374,10 @@
</tbody>
</table>
<div id="payment-note" class="receipt-note">
<p><strong>Note:</strong> This payment covers the registration fee for **[Child's Name]** who started training on **[Date the Child Started]**.</p>
</div>
<table class="sub-total-table">
<tbody>
<tr>
@ -405,15 +425,22 @@
</div>
<script>
// JavaScript to handle calculations
document.addEventListener('DOMContentLoaded', () => {
const tableBody = document.querySelector('#receipt-items tbody');
const subTotalElement = document.getElementById('sub-total');
const vatElement = document.getElementById('vat');
const grandTotalElement = document.getElementById('grand-total');
const paymentNote = document.getElementById('payment-note');
const vatRate = 0.05;
let subTotal = 0;
// --- CUSTOM DATA FOR CONDITIONAL LOGIC ---
// Change these values based on your needs
const isLatePayment = true;
const childName = 'John Doe';
const childStartDate = 'September 10, 2025';
// --- CALCULATIONS ---
// Loop through each table row to calculate the total for each item
tableBody.querySelectorAll('tr').forEach(row => {
const qty = parseFloat(row.cells[2].textContent);
@ -434,6 +461,15 @@
subTotalElement.textContent = subTotal.toFixed(2) + ' BHD';
vatElement.textContent = vatAmount.toFixed(2) + ' BHD';
grandTotalElement.textContent = grandTotal.toFixed(2) + ' BHD';
// --- CONDITIONAL NOTE LOGIC ---
// If it's a late payment, show the note and update the text
if (isLatePayment) {
paymentNote.style.display = 'block';
paymentNote.innerHTML = `
<p><strong>Note:</strong> This payment covers the registration fee for <strong>${childName}</strong> who started training on <strong>${childStartDate}</strong>.</p>
`;
}
});
</script>