<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Double Invoice Layout</title>
      <style>
         body {
         font-family: Arial, sans-serif;
         margin: 10px;
         }
         .page {
         display: flex;
         flex-direction: row;
         justify-content: center;
         gap: 20px;
         transform: scale(0.95);
         }
         .invoice {
         width: 98%;
         border: 1px solid #000;
         padding: 10px;
         box-sizing: border-box;
         /* New additions */
         display: flex;
         flex-direction: column;
         width:21cm;
         height: 29.7cm; /* fixed height for full A4 */
         }
         .header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         }
         .logo {
         width: 150px;
         }
         .title {
         text-align: center;
         font-weight: bold;
         font-size: 16px;
         }
         .details {
         margin-top: 10px;
         font-size: 13px;
         }
         table {
         width: 100%;
         border-collapse: collapse;
         margin-top: 10px;
         font-size: 13px;
         }
         th, td {
         border: 1px solid #000;
         padding: 4px;
         vertical-align: top;
         }
         .totals {
         text-align: right;
         font-weight: bold;
         }
         .footer {
         font-size: 12px;
         margin-top: 15px; /* pushes footer to bottom */
         }
         .sign {
         margin-top: 15px;
         }
         .contact {
         font-size: 11px;
         text-align: center;
         margin-top: 15px;
         }
         @media print {
         @page {
         size: A4 portrait;
         margin: 0; /* Remove all page margins */
         }
         body {
         margin: 0;
         transform: scale(1);
         }
         .page {
         gap: 0;
         transform: scale(0.95); /* Slight scale if needed */
         }
         .invoice {
         page-break-inside: avoid;
         height: 29.7cm;
         }
         }
         tbody tr td{
         border-top: none;
         border-bottom: none;
         }
         .d-none-print-show {
         display: none !important; /* Hidden by default */
         }
         @media print {
         .d-none-print-show {
         display: block !important; /* Visible only in print preview/printing */
         }
         .page {
         display: block;
         }
         }
         /* Toolbar styles */
         .toolbar {
         position: sticky; /* Stays on top when scrolling */
         top: 0;
         background: #f8f9fa;
         padding: 10px;
         display: flex;
         gap: 10px;
         border-bottom: 1px solid #ccc;
         z-index: 1000;
         justify-content: center;
         }
         .toolbar button {
         padding: 6px 14px;
         font-size: 14px;
         cursor: pointer;
         border: 1px solid #999;
         background: white;
         border-radius: 4px;
         transition: background 0.2s;
         }
         .toolbar button:hover {
         background: #ddd;
         }
         @media print {
         .toolbar { display: none; } /* Hide buttons in print/PDF */
         }
      </style>
   </head>
   <body>
      <!-- Toolbar -->
      <div class="toolbar">
         <button onclick="saveAsPDF()">💾 Save as PDF</button>
         <button onclick="window.print()">🖨 Print</button>
         <button onclick="history.back()">⬅ Back</button>
      </div>
      <div class="page">
         <!-- Left Invoice -->
         <div class="invoice">
            <div style="position:fixed;top: 0; width: 20.4cm;padding-top: 10px;">
                <div class="header">
               <img class="logo" src="images/pro-logo.png" alt="Logo">
               <div class="title" style="text-align:right;">Praveen International Packaging Solutions<br>[ Order Form ]</div>
            </div>
            <div style="display: flex;justify-content: space-between;">
               <div class="details" style="width: 33.33%;font-size: 15px;">
                  <strong>To:</strong> Sharon Raj<br>
                  Plaparambil House<br>P.O Edamuttam,Thrissur
                  <!-- <img src="images/client-logo.png" alt=""> -->
                  <!-- <strong>To:</strong> SMCHOSP<br> -->
               </div>
               <div style="width: 33.33%;text-align: center;display: flex;justify-content: center;">
                  <h4 style="border: 1px solid black;
                     padding: 4px;width: 50%;">ORDER FORM</h4>
               </div>
               <div style="width: 33.33%;">
                  <h4 style="text-align:right;">Original<br><span style="font-size: 12px;">Order No: 2388</span></h4>
               </div>
            </div>
            <h6 style="margin-bottom: 0;margin-top: 0;">Sir, We thank you for the enquiry and have pleasure in submitting our best offer as below item. We hope that you will find our offer competitive and new look forward to the pleasure of receiving your valued order. Which we will have our best and prompt attention.</h6>
            <!-- <div class="note" style="border:1px solid black;padding: 10px;text-align:left;">
               <b>To:</b> <br>   Sharon Raj<br>
               </div> -->
            </div>
            <div style="height:calc(130vh - 210px); overflow:auto; margin-top:155px; margin-bottom:100px;">
            <table style="width:100%; border-collapse:collapse;">
               <thead>
                  <tr>
                     <th style="
                        width: 30px;
                        ">#</th>
                     <th>Product Name</th>
                     <th style="
                        width: 50px;
                        ">Rate</th>
                     <th style="
                        width: 50px;
                        ">Qty</th>
                     <th style="
                        width: 50px;
                        ">Color</th>
                     <th style="
                        width: 50px;
                        ">Size</th>
                     <th style="
                        width: 100px;
                        ">Total</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>
                        <br>
                        <br>
                        <br>
                     </td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                  </tr>
               </tbody>
               <thead>
                  <tr>
                     <td colspan="6" class="totals">Total</td>
                     <td></td>
                  </tr>
               </thead>
               <thead>
                  <tr>
                     <td colspan="6" class="totals">Discount</td>
                     <td></td>
                  </tr>
               </thead>
               <!-- <thead>
                  <tr>
                     <td colspan="6" class="totals">Tax Amt</td>
                     <td></td>
                  </tr>
                  </thead> -->
               <thead>
                  <tr>
                     <td colspan="6" class="totals">Net Total</td>
                     <td></td>
                  </tr>
               </thead>
               <thead>
                  <tr>
                     <td colspan="7" class="totals" rowspan="4" style="text-align: left;">Remarks:</td>
                  </tr>
               </thead>
            </table></div>
            <div style="position:fixed;bottom: 0; width: 20.4cm;">
            <div class="footer">
               <div style="display: flex;justify-content: space-between;align-items: flex-end;align-items:baseline;">
                  <div style="display: flex;justify-content:end;width: 72%;">
                     <div>
                        <img src="seal.png" alt="" style="  
                           position: absolute;
                           width: 55mm;
                           margin-bottom: -15px;
                           bottom:125px;">
                     </div>
                     <!-- <div>
                        <img src="sign.png" alt="" style="    position: absolute;
                           width: 35mm;
                           margin-bottom: -15px;
                           bottom:132px;mix-blend-mode: darken;">
                        </div>
                        -->                  
                  </div>
                  <!-- <div>
                     For Programers International
                     </div> -->
               </div>
               <div class="sign" style="display: flex;justify-content: space-between;align-items:baseline;">
                  <span> Authorised Person:<br>Date:</span> <span>(Seal)</span>
               </div>
            </div>
            <hr style="border-top:1px solid black ;">
            <div class="note" style="border:1px solid black;padding: 10px;text-align:left;font-size: 11px;text-align: center;">
               <div class="" style="width: 100%;">
                   <span><b>Terms & Conditions:</b><br><b>Delivery: </b>within 90 Days | <b>Quality: </b>Same as sample | <b>Payment:</b> 50% advance payment balance 50% upon delivery | <b>Bill: </b>GST APPLICABLE <br>
               <b>*This is a computer generated order form. Does not requires any signature.</b> </span>
               </div>
            </div>
            <!-- <div class="contact">
               4th Floor, Park House, Round North, Thrissur, Kerala, India - 680001<br>
               Ph: +91 8089259003 / 4 / 5, Email: info@programers.in
               </div> -->
            <div class="note" style="padding: 10px;text-align:left;font-size: 11px;text-align: center;">
               Praveen International Packing Solutions, Kechri Wadakkancheri Road, Velur-680601
               Ph: +91 9946235343 / 894333014 
            </div>
        </div>
         </div>
      </div>
      <!-- Right Invoice -->
      <div class="invoice d-none-print-show" style="display: none!important;">
         <div class="header">
            <img class="logo" src="images/pro-logo.png" alt="Logo">
            <div class="title" style="text-align:right;">Praveen International Packaging Solutions<br>[ Order Form ]</div>
         </div>
         <div style="display: flex;justify-content: space-between;">
            <div class="details" style="width: 33.33%;font-size: 15px;">
               <strong>To:</strong> Sharon Raj<br>
               Plaparambil House<br>P.O Edamuttam,Thrissur
               <!-- <strong>To:</strong> SMCHOSP<br> -->
            </div>
            <div style="width: 33.33%;text-align: center;display: flex;justify-content: center;">
               <h4 style="border: 1px solid black;
                  padding: 4px;width: 50%;">ORDER FORM</h4>
            </div>
            <div style="width: 33.33%;">
               <h4 style="text-align:right;">Duplicate<br><span style="font-size: 12px;">Order No: 2388</span></h4>
            </div>
         </div>
         <!-- <div class="note" style="border:1px solid black;padding: 10px;text-align:left;">
            <b>To:</b> <br>   Sharon Raj<br>
            </div> -->
         <table>
            <thead>
               <tr>
                  <th style="
                     width: 30px;
                     ">#</th>
                  <th>Product Name</th>
                  <th style="
                     width: 50px;
                     ">Rate</th>
                  <th style="
                     width: 50px;
                     ">Qty</th>
                  <th style="
                     width: 100px;
                     ">Total</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <br>
                     <br>
                     <br>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
            </tbody>
            <thead>
               <tr>
                  <td colspan="4" class="totals">Total</td>
                  <td></td>
               </tr>
            </thead>
            <thead>
               <tr>
                  <td colspan="4" class="totals">Discount</td>
                  <td></td>
               </tr>
            </thead>
            <thead>
               <tr>
                  <td colspan="4" class="totals">Tax Amt</td>
                  <td></td>
               </tr>
            </thead>
            <thead>
               <tr>
                  <td colspan="4" class="totals">Net Total</td>
                  <td></td>
               </tr>
            </thead>
         </table>
         <div class="footer">
            <div style="display: flex;justify-content: space-between;align-items: flex-end;align-items:baseline;">
               <div style="display: flex;justify-content: space-between;width: 80%;">
                  <div>
                     <img src="seal.png" alt="" style="    position: absolute;
                        width: 35mm;
                        margin-bottom: -15px;
                        bottom: 50px;">
                  </div>
                  <div>
                     <img src="sign.png" alt="" style="    position: absolute;
                        width: 35mm;
                        margin-bottom: -15px;
                        bottom:114px;mix-blend-mode: darken;">
                  </div>
               </div>
               <!-- <div>
                  For Programers International
                  </div> -->
            </div>
            <div class="sign" style="display: flex;justify-content: space-between;align-items:baseline;">
               <span>(Seal)</span><span> Authorised Signatory<br>Date:</span>
            </div>
         </div>
         <hr style="border-top:1px solid black ;">
         <div class="note" style="border:1px solid black;padding: 10px;text-align:left;font-size: 11px;text-align: center;">
            Praveen International Packing Solutions, Kechri Wadakkancheri Road, Velur-680601<br>
            Ph: +91 90987654321 / 4 / 5, Email: info@demo.in
         </div>
         <!-- <div class="contact">
            4th Floor, Park House, Round North, Thrissur, Kerala, India - 680001<br>
            Ph: +91 8089259003 / 4 / 5, Email: info@programers.in
            </div> -->
      </div>
      </div>
      <!-- JS for Save as PDF -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
      <script>
         function saveAsPDF() {
             const element = document.querySelector('.page'); // Capture entire invoice area
             const opt = {
                 margin:       0,
                 filename:     'invoice.pdf',
                 image:        { type: 'jpeg', quality: 0.98 },
                 html2canvas:  { scale: 2 },
                 jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
             };
             html2pdf().set(opt).from(element).save();
         }
      </script>
   </body>
</html>