s11

customers/.hta_slug/billing-details.php

@@ -172,13 +172,13 @@
             <p>Outstanding: <strong>$<?php echo $currentOutstanding; ?></strong></p>
             <p>Tenure: <strong><?php echo $tenure; ?></strong></p>
             <p>Frequency: <strong><?php echo $invoiceData['frequency'] ?></strong></p>
-            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Additional Payment</button>
+            <button type="button" class="btn text-white" data-bs-toggle="modal" data-bs-target="#myModal" style="background-color: #374151;">Additional Payment</button>
         </div>
     </div>
     <hr >
     <div class="d-flex flex-column gap-3">
         <table class="table table-striped table-bordered">
-            <thead class="bg-primary text-white text-center">
+            <thead class="text-white text-center" style="background-color: #374151;">
                 <tr>
                     <th>Number of EMI</th>
                     <th>EMI Amount</th>
@@ -246,7 +246,7 @@
             <div class="modal-dialog modal-dialog-centered">  <!-- This centers the modal -->
                 <div class="modal-content">
                     <div class="modal-header">
-                        <h5 class="modal-title" id="modalLabel">Additional Payment</h5>
+                        <h5 class="modal-title fw-bold" id="modalLabel" style="color: #374151;">Additional Payment</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
@@ -272,8 +272,8 @@
                                 <input type="text" id="adPaymentRemarks" name="adPaymentRemarks" class="form-control" >
                             </div>
                             <div class="modal-footer">
-                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                                <button type="button" class="btn" data-bs-dismiss="modal" style="color: #374151; border: 2px solid #374151;">Close</button>
-                                <button type="submit" name="additional-payment" class="btn btn-success btn-block mt-2">Save Payment</button>
+                                <button type="submit" name="additional-payment" class="btn btn-block mt-2 text-white" style="background-color: #374151; border: 2px solid #374151;">Save Payment</button>
                             </div>
                         </form>
                     </div>

customers/.hta_slug/print-invoice.php

@@ -21,7 +21,7 @@ if ($invoiceInfo['tenure'] > 1) {
 ?>
 
 <div class="container my-5">
-    <div class="invoice-box">
+    <div class="invoice-box" id="invoice-box">
         <h2 class="text-center fw-bold" style="color: #374151;">Invoice</h2><hr>
         <div class="d-flex justify-content-between">
             <div class="w-100">
@@ -124,11 +124,26 @@ if ($invoiceInfo['tenure'] > 1) {
 
         <p class="text-muted mt-3"><strong>Admin Note:</strong> <?= $invoiceInfo['adminNote'] ?></p>
         <p style="font-size: 12px;"><strong>Invoice Generate Date: </strong><span id="invoiceGenDate"></span></p>
+        <div class="d-flex gap-1">
+            <button onclick="downloadPDF()" class="btn text-white btn-print w-100" style="background-color: #374151;">Download Invoice</button>
             <button onclick="window.print()" class="btn text-white btn-print w-100" style="background-color: #374151;">Print Invoice</button>
         </div>
+    </div>
 </div>
+<script src="/assets/js/html2pdf.bundle.min.js"></script>
 <script>
     document.getElementById('invoiceGenDate').textContent = new Date().toLocaleDateString('en-GB');
+
+    function downloadPDF() {
+            const invoice = document.getElementById("invoice-box");
+            html2pdf(invoice, {
+                margin: 10,
+                filename: 'invoice.pdf',
+                image: { type: 'jpeg', quality: 0.98 },
+                html2canvas: { scale: 2 },
+                jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+            });
+        }
 </script>
 <style>
     body {
@@ -138,7 +153,7 @@ if ($invoiceInfo['tenure'] > 1) {
         max-width: 800px;
         margin: auto;
         padding: 30px;
-        border: 1px solid #ddd;
+        /* border: 1px solid #ddd; */
         background: #fff;
         border-radius: 10px;
     }

my-account/.hta_slug/print-invoice.php

@@ -99,6 +99,19 @@ if ($invoiceInfo['tenure'] > 1) {
         <button onclick="window.print()" class="btn text-white btn-print w-100" style="background-color: #374151;">Print Invoice</button>
     </div>
 </div>
+<script src="/assets/js/html2pdf.bundle.min.js"></script>
+<script>
+    function downloadPDF() {
+        const invoice = document.getElementById("invoice-box");
+        html2pdf(invoice, {
+            margin: 10,
+            filename: 'invoice.pdf',
+            image: { type: 'jpeg', quality: 0.98 },
+            html2canvas: { scale: 2 },
+            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+        });
+    }
+</script>
 
 <style>
     body {