<!-- Label Area (Hidden for print template) -->
<div id="printLabelArea" style="display:none;">
  <div style="padding:15px; text-align:left;">
    <div style="display:flex; align-items:center; gap:20px;">

      <!-- QR Preview -->
      <div>
        <img id="pkgQrImagePrint" src="" alt="QR Code" style="height:120px; width:120px;">
      </div>

      <!-- Details -->
      <div>
        <h3>
          <strong><span id="pkgInvoiceTextPrint" style="color:red; font-size:22px;"></span></strong>
        </h3>
        <div style="font-size:20px;">
          <span id="pkgNameTextPrint"></span>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Print Button -->
<button class="btn btn-primary" onclick="printLabel()">🖨️ Print Label</button>

<script>
function printLabel() {
  // ✅ Get content
  var content = document.getElementById("printLabelArea").outerHTML;

  // ✅ New window
  var printWindow = window.open('', '', 'height=600,width=800');
  printWindow.document.write('<html><head><title>Print Label</title>');

  // ✅ Load Bootstrap (optional)
  printWindow.document.write('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">');
  printWindow.document.write('<style> body { padding:30px; font-family:Arial; } h3{margin:0;} </style>');

  printWindow.document.write('</head><body>');
  printWindow.document.write(content);
  printWindow.document.write('</body></html>');

  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
}
</script>
