1

assets/css/custom.css

@@ -93,5 +93,7 @@ body {
 .footer {
     padding: 2rem 0;
     background-color: #FFFFFF;
-    margin-top: 4rem;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
 }

assets/js/main.js

@@ -1,14 +1,15 @@
 document.addEventListener('DOMContentLoaded', function () {
     const amountInput = document.getElementById('amount');
     const rateInput = document.getElementById('rate');
+    const agreementInput = document.getElementById('agreement');
     const vatAmountOutput = document.getElementById('vatAmount');
     const totalAmountOutput = document.getElementById('totalAmount');
-    const grossSalaryInput = document.getElementById('gross-salary');
+    const netAmountOutput = document.getElementById('netAmount');
-    const netSalaryOutput = document.getElementById('netSalary');
 
-    function calculateVAT() {
+    function updateCalculator() {
         const amount = parseFloat(amountInput.value) || 0;
         const rate = parseFloat(rateInput.value) || 0;
+        let tax = 0;
 
         if (amount > 0 && rate > 0) {
             const vatAmount = (amount * rate) / 100;
@@ -16,41 +17,37 @@ document.addEventListener('DOMContentLoaded', function () {
 
             vatAmountOutput.textContent = vatAmount.toFixed(2);
             totalAmountOutput.textContent = totalAmount.toFixed(2);
+
+            if (totalAmount > 0) {
+                if (totalAmount <= 1000) {
+                    tax = totalAmount * 0.10;
+                } else if (totalAmount <= 3000) {
+                    tax = (1000 * 0.10) + ((totalAmount - 1000) * 0.20);
+                } else {
+                    tax = (1000 * 0.10) + (2000 * 0.20) + ((totalAmount - 3000) * 0.30);
+                }
+                const netAmount = totalAmount - tax;
+                netAmountOutput.textContent = netAmount.toFixed(2);
+            } else {
+                netAmountOutput.textContent = '0.00';
+            }
+
         } else {
             vatAmountOutput.textContent = '0.00';
             totalAmountOutput.textContent = '0.00';
-        }
+            netAmountOutput.textContent = '0.00';
-    }
-
-    function calculateNetSalary() {
-        const grossSalary = parseFloat(grossSalaryInput.value) || 0;
-        let tax = 0;
-
-        if (grossSalary > 0) {
-            if (grossSalary <= 1000) {
-                tax = grossSalary * 0.10;
-            } else if (grossSalary <= 3000) {
-                tax = (1000 * 0.10) + ((grossSalary - 1000) * 0.20);
-            } else {
-                tax = (1000 * 0.10) + (2000 * 0.20) + ((grossSalary - 3000) * 0.30);
-            }
-            const netSalary = grossSalary - tax;
-            netSalaryOutput.textContent = netSalary.toFixed(2);
-        } else {
-            netSalaryOutput.textContent = '0.00';
         }
     }
 
     window.setRate = function(rate) {
         rateInput.value = rate;
-        calculateVAT();
+        updateCalculator();
     }
 
-    amountInput.addEventListener('input', calculateVAT);
+    amountInput.addEventListener('input', updateCalculator);
-    rateInput.addEventListener('input', calculateVAT);
+    rateInput.addEventListener('input', updateCalculator);
-    grossSalaryInput.addEventListener('input', calculateNetSalary);
+    agreementInput.addEventListener('change', updateCalculator);
 
     // Initial calculation
-    calculateVAT();
+    updateCalculator();
-    calculateNetSalary();
 });

index.php

@@ -27,9 +27,17 @@
                             <h2>Instant VAT Calculator</h2>
                             <form id="vat-form">
                                 <div class="mb-3">
-                                    <label for="amount" class="form-label">Amount (excl. VAT)</label>
+                                    <label for="amount" class="form-label">Base Amount</label>
                                     <input type="number" class="form-control" id="amount" placeholder="e.g., 100" step="0.01">
                                 </div>
+                                <div class="mb-3">
+                                    <label for="agreement" class="form-label">Employee Agreement Type</label>
+                                    <select class="form-select" id="agreement">
+                                        <option value="b2b">B2B</option>
+                                        <option value="b2c">B2C</option>
+                                        <option value="b2e">B2E</option>
+                                    </select>
+                                </div>
                                 <div class="mb-3">
                                     <label for="rate" class="form-label">VAT Rate (%)</label>
                                     <input type="number" class="form-control" id="rate" value="20" placeholder="e.g., 20" step="0.1">
@@ -46,25 +54,7 @@
                                 <p>VAT Amount: <span class="amount" id="vatAmount">0.00</span></p>
                                 <hr>
                                 <p class="h4">Total (incl. VAT): <span class="amount" id="totalAmount">0.00</span></p>
-                            </div>
+                                <p class="h4">Net Amount: <span class="amount" id="netAmount">0.00</span></p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row justify-content-center mt-4">
-                <div class="col-lg-8 col-xl-6">
-                    <div class="card calculator-card">
-                        <div class="card-body">
-                            <h2>Net Salary Calculator</h2>
-                            <form id="salary-form">
-                                <div class="mb-3">
-                                    <label for="gross-salary" class="form-label">Gross Salary</label>
-                                    <input type="number" class="form-control" id="gross-salary" placeholder="e.g., 3000" step="0.01">
-                                </div>
-                            </form>
-
-                            <div class="results">
-                                <p>Net Salary: <span class="amount" id="netSalary">0.00</span></p>
                             </div>
                         </div>
                     </div>
@@ -80,7 +70,7 @@
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+        <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
     <script>
         feather.replace();
     </script>