<aside class="right-side">
<section class="side-cont">
<div class="side-head">
<div class="row"> 
<div class="col-md-12">    
<div class="col-md-4 text-left">
<button class="btn btn-flat bg-teal" id="print"><i class="fa fa-print"></i></button> 
<button class="btn btn-flat bg-blue" onclick="downloadPDF()" ><i class="fa fa-envelope-o"></i></button> 
<button class="btn btn-flat bg-gray"><i class="fa fa-file-pdf-o"></i></button>     
</div>
<div class="col-md-7 text-center">
<select name="Page_resolution" id="resolution" onchange="setPrinterConfig()" style="width: 205px;height: 28px;border: 1px solid red;">
<option value="A4" selected="selected">A4 [210mm × 297mm]</option>   
<option value="A5">A5 [148mm × 210mm]</option>
<option value="Letter">US Letter [216mm × 279mm]</option>
<option value="Legal">US Legal [216mm × 356mm]</option>
</select>
<select name="Page_size" id="rotate" onchange="setPrinterConfig()" style="width: 120px;height: 28px;border: 1px solid red;">
<option value="portrait">Portrait</option>
<option value="landscape">Landscape</option>
</select>
<select id='prtype' onchange="callPrintType()" style="width: 140px;height: 28px;border: 1px solid red;">
<option value="invonly">Invoice Only</option>
<option value="chaonly">Challan</option>
<option value="chainv">Invoice With Challan</option>
<option value="padonly">Pad Print</option>
<option value="padcha">Pad Print (Challan)</option>
<option value="padchainv">Invoice &amp; Challan (Pad)</option>    
</select> 
</div>    
<div class="col-md-1 text-right" >
<button class="btn btn-flat bg-red" id="closepop"><span><i class="fa fa-times"></i></span></button>
</div>
</div>
</div>    
</div>     
<div class="box box-solid">
<div class="box-body">   
<div class="row"> 
<div class="col-md-12">
<div class="col-md-3">
<div id="test-list" class="notebooks">
<input type="text" class="search" />
<ul class="list" id="listitem">
          
</ul>
    
<div class="whole">
<span><a class="pagination-prev disabled" href="#">
<<
</a>
<ul class="pagination-layout"></ul>
<a class="pagination-next" href="#">
>>
</a></span>
</div>
</div>    
</div>    
<div class="col-md-9">
<div class="invhold scrol-y" id="invhold">    

</div>
</div>     
</div>
</div>    
</div>
</div>
</section>    
</aside> 

<!-- jsPDF & html2canvas CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
    async function downloadPDF() {
        const { jsPDF } = window.jspdf;

        // Get the content of the invoice
        const element = document.getElementById("wrap_invoice");

        // Use html2canvas to convert it into canvas
        const canvas = await html2canvas(element, {
            scale: 2,
            useCORS: true,
            // ADD THIS LINE: Allows the canvas to be created even if image loading is restricted
            allowTaint: true 
        });

        const imgData = canvas.toDataURL("image/png");

        // Define PDF dimensions
        const pdf = new jsPDF("p", "mm", "a4");

        const imgProps = pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

        pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);

        // Optional: add filename using invoice number or date
        const receiptNo = "<?php echo $rowadd['invno']; ?>";
        pdf.save(`Receipt_${receiptNo}.pdf`);
    }
</script>