From 67d48ff900e29c9cf13269cac7c87dc8a550e6e7 Mon Sep 17 00:00:00 2001
From: MohamedKhX <muhamedkhx2@gmail.com>
Date: Mon, 16 Jun 2025 19:34:41 +0200
Subject: [PATCH] Add SwitchContent Event && Improve Printing

---
 resources/js/html2pdf.js | 97 +++++++++++++++++++++++++++++++---------
 1 file changed, 77 insertions(+), 20 deletions(-)

diff --git a/resources/js/html2pdf.js b/resources/js/html2pdf.js
index 956d285..0cd44b4 100644
--- a/resources/js/html2pdf.js
+++ b/resources/js/html2pdf.js
@@ -4,29 +4,56 @@ document.addEventListener('DOMContentLoaded', function () {
 
         performAction(options);
     });
+
+    Livewire.on('switchContent', function (args) {
+        const elementId  = args[0];
+        const newContent = args[1];
+
+        console.log('Switching content for element:', elementId);
+        console.log(newContent);
+
+        const element = document.getElementById(`print-smart-content-${elementId}`);
+        if (element) {
+            // Replace the content of the element
+            element.innerHTML = newContent;
+
+            // Optional: Replace spaces in text nodes
+            replaceSpacesInTextNodes(element);
+
+            console.log('Content updated successfully.');
+        } else {
+            console.error(`Element with ID "print-smart-content-${elementId}" not found.`);
+        }
+    });
 });
 
+
 function performAction({ action = 'print', element, ...customOptions } = {}) {
     const printElement = document.getElementById(`print-smart-content-${element}`);
 
-    // Default options for html2pdf
+    // Enhanced default options for html2pdf
     const defaultOptions = {
         filename: 'document.pdf',
         pagebreak: {
-            mode: ['css', 'legacy'],
-            after: 'section'
+            mode: ['css'],
+            avoid: '.invoice-section'
         },
         jsPDF: {
             unit: 'mm',
             format: 'a4',
-            orientation: 'portrait'
+            orientation: 'portrait',
+            compress: true
         },
         html2canvas: {
-            scale: 2,
+            scale: 0.75, // Crucial for proper scaling
             useCORS: true,
-            logging: true
+            logging: false,
+            scrollX: 0,
+            scrollY: 0
         },
-        margin: 0
+        margin: [10, 10, 10, 10], // Top, Right, Bottom, Left
+        imageType: 'image/jpeg',
+        imageQuality: 0.95
     };
 
     // Merge custom options with defaults
@@ -48,49 +75,79 @@ function performAction({ action = 'print', element, ...customOptions } = {}) {
     };
 
     if (printElement) {
+        // Temporary fix for content measurement
+        const originalDisplay = printElement.style.display;
+        printElement.style.display = 'block';
+
         switch (action) {
             case 'savePdf':
-                // Save as PDF
                 html2pdf()
-                    .from(printElement)
                     .set(options)
+                    .from(printElement)
+                    .toPdf()
+                    .get('pdf')
+                    .then((pdf) => {
+                        const totalPages = pdf.internal.getNumberOfPages();
+                        for (let i = 1; i <= totalPages; i++) {
+                            pdf.setPage(i);
+                            pdf.setFontSize(8);
+                            pdf.text(`Page ${i} of ${totalPages}`,
+                                pdf.internal.pageSize.width - 25,
+                                pdf.internal.pageSize.height - 10
+                            );
+                        }
+                    })
                     .save();
                 break;
+
             case 'print':
-                // Print action
                 html2pdf()
-                    .from(printElement)
                     .set(options)
+                    .from(printElement)
                     .toPdf()
                     .get('pdf')
-                    .then(function (pdf) {
+                    .then((pdf) => {
                         const blob = pdf.output('blob');
                         const url = URL.createObjectURL(blob);
-                        const iframe = document.getElementById(`print-smart-iframe-${element}`);
-                        iframe.src = url;
+                        const iframe = document.createElement('iframe');
+                        iframe.style.display = 'none';
+                        document.body.appendChild(iframe);
 
                         iframe.onload = function () {
-                            iframe.contentWindow.focus();
-                            iframe.contentWindow.print();
-                            iframe.contentWindow.onafterprint = function () {
+                            setTimeout(() => {
+                                iframe.contentWindow.focus();
+                                iframe.contentWindow.print();
                                 URL.revokeObjectURL(url);
-                            };
+                                document.body.removeChild(iframe);
+                            }, 500);
                         };
+                        iframe.src = url;
                     });
                 break;
+
             default:
                 console.error('Unsupported action:', action);
         }
+
+        // Reset display property
+        setTimeout(() => {
+            printElement.style.display = originalDisplay;
+        }, 1000);
     } else {
         console.error(`Element with ID "print-smart-content-${element}" not found.`);
     }
 }
-
 function replaceSpacesInTextNodes(element) {
     element.childNodes.forEach(node => {
         if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
-            node.textContent = node.textContent.replace(/\s/g, "\u00a0");
+            // Replace spaces and hyphens with non-breaking equivalents
+            node.textContent = node.textContent
+                .replace(/\s/g, "\u00a0") // Non-breaking space
+                .replace(/-/g, "\u2011"); // Non-breaking hyphen
         } else if (node.nodeType === Node.ELEMENT_NODE) {
+            // Add RTL direction for all elements
+            node.style.direction = 'rtl';
+            node.style.unicodeBidi = 'embed';
             replaceSpacesInTextNodes(node);
         }
     });