import{J as g}from"./JsBarcode-DY0UjFhn.js";import{c0 as c}from"./bootstrap-Bqxdt4iG.js";const s=100,d=150,m=(t,o={})=>{var i,n,a;const r=document.createElementNS("http://www.w3.org/2000/svg","svg");g(r,t,{format:"CODE128",width:(i=o.width)!=null?i:2,height:(n=o.height)!=null?n:50,displayValue:!0,fontSize:(a=o.fontSize)!=null?a:14,margin:5});const e=new XMLSerializer().serializeToString(r);return`data:image/svg+xml;base64,${btoa(e)}`},h=t=>{const o=t.items.map((e,i)=>`
    <tr>
      <td class="cell-center">${i+1}</td>
      <td>${e.tdSku||"-"}</td>
      <td>${e.originalSku||"-"}</td>
      <td>${e.description||"-"}</td>
      <td class="cell-center">${e.qty}</td>
    </tr>
  `).join(""),r=m(t.orderNo);return`
    <div class="packing-order">
      <!-- Header -->
      <div class="header">
        <div class="logo">
          <span class="td-logo">TD</span>
          <span class="warehouse-text">WAREHOUSE</span>
        </div>
        <div class="order-info">
          <div class="order-title">PACKING ORDER</div>
          <div class="order-detail">
            <span class="info-label">Code:</span>
            <span class="info-value">${t.orderNo}</span>
          </div>
          <div class="order-detail">
            <span class="info-label">Packing Date:</span>
            <span class="info-value">${t.packingDate}</span>
          </div>
          ${t.customerName?`
          <div class="order-detail">
            <span class="info-label">Customer:</span>
            <span class="info-value">${t.customerName}</span>
          </div>
          `:""}
        </div>
      </div>

      <!-- Barcode -->
      <div class="order-barcode">
        <img src="${r}" alt="${t.orderNo}" class="barcode-img" />
      </div>

      <!-- Items Table -->
      <table class="items-table">
        <thead>
          <tr>
            <th class="cell-center">NO</th>
            <th>TD SKU</th>
            <th>ORIGINAL SKU</th>
            <th>DESCRIPTION</th>
            <th class="cell-center">QTY</th>
          </tr>
        </thead>
        <tbody>
          ${o}
        </tbody>
      </table>

      <!-- Footer -->
      <div class="footer">www.tdexpress.co</div>
    </div>
  `},b=t=>{const o=t.items.map((e,i)=>`
    <tr>
      <td class="cell-center">${i+1}</td>
      <td class="cell-center">${e.tdSku||"-"}</td>
      <td class="cell-center">${e.originalSku||"-"}</td>
      <td>${(e.name||e.description||"-").toUpperCase()}</td>
      <td class="cell-center">${e.qty}</td>
    </tr>
  `).join("");return`
    <div class="packing-order-v2">
      <!-- Top Branding -->
      <div class="header-v2">
        <div class="logo-v2">
           <img src="/logo/logo-icon.png" alt="Logo" style="height: 14mm;" />
        </div>
        <div class="order-barcode-v2">
          <img src="${m(t.orderNo,{width:1.8,height:65,fontSize:18})}" alt="${t.orderNo}" class="barcode-img-v2" />
        </div>
      </div>

      <!-- Customer & Date info -->
      <div class="customer-info-v2">
        <div class="customer-name-v2">${(t.customerName||"").toUpperCase()}</div>
        <div class="order-date-v2">${t.packingDate}</div>
      </div>

      <!-- Items Table -->
      <table class="items-table-v2">
        <thead>
          <tr>
            <th style="width: 8%;">NO</th>
            <th style="width: 23%;">TD SKU</th>
            <th style="width: 23%;">ORIGINAL SKU</th>
            <th style="width: 34%;">NAME</th>
            <th style="width: 12%;">QTY</th>
          </tr>
        </thead>
        <tbody>
          ${o}
          <!-- Total Row -->
          <tr class="total-row">
             <td colspan="4" style="text-align: right; padding-right: 2mm;">TOTAL</td>
             <td class="cell-center">${t.totalQty||t.items.reduce((e,i)=>e+i.qty,0)}</td>
          </tr>
        </tbody>
      </table>

      <!-- Footer Stats -->
      <div class="footer-stats-v2">
        <span class="net-label">NET</span>
        <span class="net-values">${t.totalWeight||"-"}KG / ${t.totalVolume||"-"}M³</span>
      </div>
    </div>
  `},f=()=>`
  @page {
    size: ${s}mm ${d}mm;
    margin: 0;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: Arial, sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .packing-order {
    width: ${s}mm;
    height: ${d}mm;
    padding: 4mm;
    display: flex;
    flex-direction: column;
    background: white;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 3mm;
    border-bottom: 1px solid #333;
    margin-bottom: 3mm;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 2mm;
  }

  .td-logo {
    font-size: 12pt;
    font-weight: bold;
    color: #000;
    background: #f0f0f0;
    padding: 1mm 2mm;
    border: 2px solid #333;
  }

  .warehouse-text {
    font-size: 9pt;
    font-weight: bold;
    letter-spacing: 1px;
  }

  .order-info {
    text-align: right;
  }

  .order-title {
    font-size: 10pt;
    font-weight: bold;
    margin-bottom: 1mm;
  }

  .order-barcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2mm 0;
    margin-bottom: 2mm;
  }

  .barcode-img {
    max-width: 80mm;
    height: auto;
  }


  .order-detail {
    font-size: 8pt;
    margin-bottom: 0.5mm;
  }

  .info-label {
    color: #666;
  }

  .info-value {
    font-weight: bold;
  }

  .items-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .items-table th,
  .items-table td {
    border: 1px solid #333;
    padding: 2mm 1.5mm;
    text-align: left;
    font-size: 8pt;
    vertical-align: middle;
    word-wrap: break-word;
  }

  .items-table th {
    background: #f5f5f5;
    font-weight: bold;
    font-size: 7pt;
    text-align: center;
  }

  .items-table th:nth-child(1) { width: 8%; }
  .items-table th:nth-child(2) { width: 23%; }
  .items-table th:nth-child(3) { width: 23%; }
  .items-table th:nth-child(4) { width: 34%; }
  .items-table th:nth-child(5) { width: 12%; }

  .items-table tbody tr:nth-child(even) {
    background: #fafafa;
  }

  .cell-center {
    text-align: center !important;
  }

  .footer {
    text-align: center;
    font-size: 8pt;
    color: #666;
    padding-top: 2mm;
    margin-top: auto;
    border-top: 1px solid #999;
  }

  @media print {
    .no-print {
      display: none !important;
    }
  }
`,v=()=>`
  @page {
    size: ${s}mm ${d}mm;
    margin: 0;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: Arial, sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .packing-order-v2 {
    width: ${s}mm;
    height: ${d}mm;
    padding: 3mm 4mm;
    display: flex;
    flex-direction: column;
    background: white;
  }

  .header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4mm;
  }

  .logo-v2 {
    display: flex;
    align-items: center;
  }

  .order-barcode-v2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .barcode-img-v2 {
    max-width: 45mm;
    height: 15mm;
  }

  .customer-info-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2mm;
  }

  .customer-name-v2 {
    font-size: 11pt;
    font-weight: normal;
    flex: 1;
    margin-right: 2mm;
  }

  .order-date-v2 {
    font-size: 11pt;
    font-weight: normal;
  }

  .items-table-v2 {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #000;
  }

  .items-table-v2 th,
  .items-table-v2 td {
    border: 1px solid #000;
    padding: 1.2mm 1mm;
    text-align: left;
    font-size: 8pt;
    vertical-align: middle;
    word-wrap: break-word;
    line-height: 1.0;
  }

  .items-table-v2 th {
    font-weight: bold;
    text-align: center;
  }

  .total-row td {
    font-weight: normal;
  }

  .cell-center {
    text-align: center !important;
  }

  .footer-stats-v2 {
    margin-top: 4mm;
    font-size: 11pt;
    font-weight: normal;
  }

  .net-label {
    font-style: italic;
    margin-right: 6mm;
  }

  .net-values {
    font-weight: normal;
  }

  @media print {
    .no-print {
      display: none !important;
    }
  }
`,x=(t,o="v2")=>{if(!t.items||t.items.length===0)return c.warning("No items to preview"),null;const r={v1:h,v2:b},e={v1:f,v2:v},i=r[o],n=e[o],a=i(t),p=`
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Packing Order Preview - ${t.orderNo}</title>
        <style>
          ${n()}
          .preview-controls {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1000;
            display: flex;
            gap: 10px;
          }
          .preview-btn {
            padding: 10px 20px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
          }
          .print-btn {
            background: #1890ff;
            color: white;
          }
          .print-btn:hover {
            background: #40a9ff;
          }
          .close-btn {
            background: #f5f5f5;
            color: #333;
          }
          .close-btn:hover {
            background: #e8e8e8;
          }
          @media screen {
            body {
              background: #f0f0f0;
              padding: 20px;
            }
            .${o==="v2"?"packing-order-v2":"packing-order"} {
              box-shadow: 0 2px 8px rgba(0,0,0,0.15);
              margin: 0 auto;
            }
          }
          @media print {
            body {
              background: white;
              padding: 0;
              margin: 0;
            }
          }
        </style>
      </head>
      <body>
        <div class="preview-controls no-print">
          <button class="preview-btn print-btn" onclick="window.print()">Print</button>
          <button class="preview-btn close-btn" onclick="window.close()">Close</button>
        </div>
        ${a}
      </body>
    </html>
  `,l=window.open("","_blank","width=500,height=700");return l?(l.document.write(p),l.document.close(),l):(c.warning("Please allow pop-ups to preview"),null)};export{x as p};
