<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>E-Way Bill <%= bill.eWayBill?.ewbNo %></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;font-size:11px;color:#000;background:#fff}
.wrap{width:210mm;margin:0 auto;padding:10mm}
.hdr{display:flex;justify-content:space-between;align-items:center;border-bottom:1.5px solid #000;padding-bottom:5px;margin-bottom:15px}
.hdr-title{font-size:18px;font-weight:700;text-transform:uppercase}
.section{border:1px solid #000;margin-bottom:15px}
.sec-hdr{background:#f3f4f6;padding:4px 8px;font-weight:700;border-bottom:1px solid #000;font-size:10px;text-transform:uppercase}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.cell{padding:6px 8px;border-bottom:.5px solid #ccc;border-right:.5px solid #ccc}
.cell:last-child{border-right:none}
.lbl{font-size:9px;color:#555;font-weight:600;margin-bottom:2px}
.val{font-size:11px;font-weight:600}
.addr-grid{display:grid;grid-template-columns:1fr 1fr;height:120px}
.addr-box{padding:8px;border-right:1px solid #000}
.addr-box:last-child{border-right:none}
table.goods{width:100%;border-collapse:collapse}
table.goods th{border:1px solid #000;padding:5px;font-size:9px;text-align:left;background:#f3f4f6}
table.goods td{border:1px solid #000;padding:5px;font-size:10px}
.tr{text-align:right}.tc{text-align:center}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #000;border-top:none}
.summary-cell{padding:5px;border-right:1px solid #000;text-align:center}
.summary-cell:last-child{border-right:none}
.barcode{text-align:center;margin-top:15px}
@media print{.no-print{display:none}@page{margin:0;size:A4}}
</style></head><body>
<div class="no-print" style="background:#333;padding:10px;text-align:center"><button onclick="window.print()" style="padding:8px 20px;cursor:pointer">Print E-Way Bill</button></div>
<div class="wrap">
  <div class="hdr">
    <div class="hdr-title">e-Way Bill</div>
    <div style="text-align:right">
      <% if(bill.eWayBill?.qrCode){ %><img src="https://api.qrserver.com/v1/create-qr-code/?size=80x80&data=<%= bill.eWayBill.qrCode %>" alt="QR"><% } %>
    </div>
  </div>

  <div class="section">
    <div class="sec-hdr">1. E-WAY BILL Details</div>
    <div class="grid">
      <div class="cell"><div class="lbl">eWay Bill No:</div><div class="val"><%= bill.eWayBill?.ewbNo %></div></div>
      <div class="cell"><div class="lbl">Generated Date:</div><div class="val"><%= moment(bill.eWayBill?.ewbDate).format('DD/MM/YYYY hh:mm A') %></div></div>
      <div class="cell"><div class="lbl">Generated By:</div><div class="val"><%= settings?.company?.gstin %></div></div>
      <div class="cell"><div class="lbl">Valid Upto:</div><div class="val"><%= moment(bill.eWayBill?.validUpto).format('DD/MM/YYYY') %></div></div>
    </div>
    <div class="grid" style="grid-template-columns:1fr 1fr 1.5fr 1fr">
      <div class="cell"><div class="lbl">Mode:</div><div class="val"><%= bill.eWayBill?.transMode || 'Road' %></div></div>
      <div class="cell"><div class="lbl">Approx Distance:</div><div class="val"><%= bill.eWayBill?.transDistance %> Km</div></div>
      <div class="cell"><div class="lbl">Type:</div><div class="val">Outward - Supply</div></div>
      <div class="cell"><div class="lbl">Transaction type:</div><div class="val">Regular</div></div>
    </div>
  </div>

  <div class="section">
    <div class="sec-hdr">2. Address Details</div>
    <div class="addr-grid">
      <div class="addr-box">
        <div class="lbl" style="border-bottom:1px solid #000;padding-bottom:3px;margin-bottom:5px">From</div>
        <div class="val" style="font-size:12px"><%= settings?.company?.name %></div>
        <div class="val" style="font-size:10px;margin-top:2px">GSTIN: <%= settings?.company?.gstin %></div>
        <div style="font-size:10px;margin-top:4px">
          <%= settings?.company?.address?.line1 %>, <%= settings?.company?.address?.city %><br>
          <%= settings?.company?.address?.state %> - <%= settings?.company?.address?.pincode %>
        </div>
      </div>
      <div class="addr-box">
        <div class="lbl" style="border-bottom:1px solid #000;padding-bottom:3px;margin-bottom:5px">To</div>
        <div class="val" style="font-size:12px"><%= bill.billedTo?.name %></div>
        <div class="val" style="font-size:10px;margin-top:2px">GSTIN: <%= bill.billedTo?.gstin %></div>
        <div style="font-size:10px;margin-top:4px">
          <%= bill.billedTo?.address %>, <%= bill.billedTo?.city %><br>
          <%= bill.billedTo?.state %> - <%= bill.billedTo?.pincode %>
        </div>
      </div>
    </div>
  </div>

  <div class="section">
    <div class="sec-hdr">3. Goods Details</div>
    <table class="goods">
      <thead><tr><th>HSN Code</th><th>Product Name & Desc.</th><th>Quantity</th><th>Taxable Amount Rs.</th><th class="tr">Tax Rate (C+S+I)</th></tr></thead>
      <tbody>
        <% bill.lineItems.forEach(item =>{ %>
        <tr>
          <td><%= item.hsnCode %></td>
          <td><%= item.particulars %></td>
          <td class="tc"><%= item.qty %> <%= item.unit %></td>
          <td class="tr"><%= (item.amount||0).toFixed(2) %></td>
          <td class="tr"><%= item.gstRate %>%</td>
        </tr>
        <% }) %>
      </tbody>
    </table>
    <div class="summary-grid">
      <div class="summary-cell"><div class="lbl">Tot. Tax'ble Amt</div><div class="val"><%= (bill.taxableAmount||0).toFixed(2) %></div></div>
      <div class="summary-cell"><div class="lbl">CGST Amt</div><div class="val"><%= (bill.cgstAmount||0).toFixed(2) %></div></div>
      <div class="summary-cell"><div class="lbl">SGST Amt</div><div class="val"><%= (bill.sgstAmount||0).toFixed(2) %></div></div>
      <div class="summary-cell"><div class="lbl">IGST Amt</div><div class="val"><%= (bill.igstAmount||0).toFixed(2) %></div></div>
    </div>
    <div class="summary-grid" style="border-top:none">
      <div class="summary-cell" style="grid-column: span 3;text-align:right;padding-right:20px;font-weight:700">Total Invoice Amount</div>
      <div class="summary-cell" style="font-weight:700;font-size:12px"><%= (bill.netPayable||0).toFixed(2) %></div>
    </div>
  </div>

  <div class="section">
    <div class="sec-hdr">4. Transportation Details</div>
    <div class="grid">
      <div class="cell"><div class="lbl">Transporter ID & Name:</div><div class="val"><%= bill.eWayBill?.transporterId %> & <%= bill.eWayBill?.transporterName %></div></div>
      <div class="cell"><div class="lbl">Transporter Doc. No & Date:</div><div class="val">— & <%= moment(bill.eWayBill?.ewbDate).format('DD/MM/YYYY') %></div></div>
    </div>
  </div>

  <div class="section">
    <div class="sec-hdr">5. Vehicle Details</div>
    <table class="goods">
      <thead><tr><th>Mode</th><th>Vehicle / Trans Doc No & Dt.</th><th>From</th><th>Entered Date</th><th>Entered By</th></tr></thead>
      <tbody>
        <tr>
          <td><%= bill.eWayBill?.transMode || 'Road' %></td>
          <td class="fw6"><%= bill.eWayBill?.vehicleNo %></td>
          <td><%= settings?.company?.address?.city %></td>
          <td><%= moment(bill.eWayBill?.ewbDate).format('DD/MM/YYYY hh:mm A') %></td>
          <td><%= settings?.company?.gstin %></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="barcode">
    <div style="font-family:'Libre Barcode 39', cursive; font-size: 40px;"><%= bill.eWayBill?.ewbNo %></div>
    <div style="font-size:10px; margin-top:5px;"><%= bill.eWayBill?.ewbNo %></div>
  </div>
</div>
</body></html>
