Update templates/receipt.html

templates/receipt.html

@@ -223,6 +223,22 @@
             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;
             flex-direction: column;
@@ -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>