<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><%= invoice.invoice_number %></title>
<style>
*{box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;background:#f0f2f5;color:#111;margin:0;padding:24px}.print-btn{background:#17483b;color:#fff;border:0;padding:10px 18px;border-radius:8px;font-weight:700;cursor:pointer;margin:0 auto 18px;display:block}.page{width:210mm;min-height:297mm;background:#fff;margin:auto;padding:10mm 9mm;box-shadow:0 10px 22px rgba(0,0,0,.15);position:relative}.top-strip{position:absolute;top:0;left:0;right:0;height:12px;background:#d8c24b}.title{text-align:center;font-weight:800;font-size:14px;margin-top:5px}.copy{text-align:right;font-style:italic;font-size:11px}.grid{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid #555}.cell{padding:6px;border-right:1px solid #555}.cell:last-child{border-right:0}.supplier h1{font-size:22px;margin:0 0 8px}.supplier{font-size:12px;line-height:1.45}.meta{display:grid;grid-template-columns:1fr 1fr;font-size:11px}.meta div{border-left:1px solid #555;border-bottom:1px solid #555;padding:5px;min-height:31px}.meta strong{display:block}.party{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid #555;border-right:1px solid #555}.party>div{padding:7px;border-right:1px solid #555;font-size:12px;line-height:1.45}.party>div:last-child{border-right:0}.items{width:100%;border-collapse:collapse;font-size:11px}.items th,.items td{border:1px solid #555;padding:5px;text-align:right}.items th{background:#e6f5f1;text-align:center}.items .left{text-align:left}.summary{display:grid;grid-template-columns:1.3fr .7fr;border-left:1px solid #555;border-right:1px solid #555;border-bottom:1px solid #555}.words{padding:7px;font-size:12px}.totals{font-size:12px}.totals div{display:flex;justify-content:space-between;border-bottom:1px solid #ddd;padding:5px 7px}.totals div:last-child{border-bottom:0;font-weight:800;font-size:14px}.tax-summary{width:72%;margin:10px auto;border-collapse:collapse;font-size:11px}.tax-summary th,.tax-summary td{border:1px solid #777;padding:4px;text-align:right}.footer{display:grid;grid-template-columns:1fr 1fr;border:1px solid #555;margin-top:14px;min-height:110px}.footer>div{padding:8px;font-size:11px}.sign{text-align:right;position:relative}.stamp-img{max-height:82px;max-width:120px;position:absolute;right:120px;top:10px;opacity:.85}.sign-img{max-height:62px;max-width:150px;display:block;margin-left:auto}.computer{text-align:center;position:absolute;bottom:8mm;left:0;right:0;font-size:11px}@page{size:A4;margin:0}@media print{body{background:#fff;padding:0}.print-btn{display:none}.page{box-shadow:none;margin:0;width:210mm;min-height:297mm}}
</style>
</head>
<body>
<button class="print-btn" onclick="window.print()">Download PDF / Print</button>
<div class="page">
<div class="top-strip"></div><div class="copy">(ORIGINAL FOR RECIPIENT)</div><div class="title">Tax Invoice</div>
<div class="grid">
  <div class="cell supplier">
    <% if(invoice.show_logo && settings.logo_path){ %><img src="<%= url(settings.logo_path) %>" style="max-height:72px;max-width:220px;margin-bottom:5px"><% } %>
    <h1><%= settings.business_name %></h1><div><%= settings.address %></div><div><strong>Phone:</strong> <%= settings.phone || '-' %></div><div><strong>Email:</strong> <%= settings.email || '-' %></div><div><strong>GSTIN/UIN:</strong> <%= settings.gstin || '-' %></div><div><strong>State Name:</strong> <%= settings.state_name || '-' %>, Code: <%= settings.state_code || '-' %></div>
  </div>
  <div class="meta">
    <div><strong>Invoice No</strong><%= invoice.invoice_number %></div><div><strong>Dated</strong><%= formatDate(invoice.invoice_date) %></div>
    <div><strong>Delivery Note</strong><%= invoice.delivery_note || '-' %></div><div><strong>Mode/Terms of Payment</strong><%= invoice.payment_mode || '-' %></div>
    <div><strong>Buyer's Order No.</strong><%= invoice.buyer_order_no || '-' %></div><div><strong>Dated</strong><%= formatDate(invoice.invoice_date) %></div>
    <div><strong>Dispatch Document No.</strong><%= invoice.dispatch_doc_no || '-' %></div><div><strong>Delivery Note Date</strong><%= invoice.delivery_date ? formatDate(invoice.delivery_date) : '-' %></div>
    <div><strong>Dispatched through</strong>-</div><div><strong>Destination</strong><%= invoice.destination || '-' %></div>
    <div style="grid-column:1/3"><strong>Terms Of Delivery</strong><%= invoice.terms_of_delivery || settings.terms_text || '-' %></div>
  </div>
</div>
<div class="party"><div><strong>Buyer (Bill to):</strong><br><strong><%= invoice.customer_name %></strong><br><%= invoice.customer_address || '' %><br><strong>Phone:</strong> <%= invoice.customer_phone || '-' %><br><strong>GSTIN/UIN:</strong> <%= invoice.customer_gstin || '-' %><br><strong>State Name:</strong> <%= invoice.customer_state_name || '-' %>, Code: <%= invoice.customer_state_code || '-' %></div><div><strong>Consignee (Ship to):</strong><br><strong><%= invoice.consignee_name || invoice.customer_name %></strong><br><%= invoice.consignee_address || invoice.customer_address || '' %><br><strong>GSTIN/UIN:</strong> <%= invoice.consignee_gstin || '-' %><br><strong>State Name:</strong> <%= invoice.consignee_state_name || '-' %>, Code: <%= invoice.consignee_state_code || '-' %></div></div>
<table class="items"><thead><tr><th>Sl No</th><th>Description of Goods</th><th>HSN/SAC</th><th>GST Rate %</th><th>Quantity</th><th>Rate</th><th>Disc %</th><th>Taxable</th><th>SGST</th><th>CGST</th><th>IGST</th><th>Total</th></tr></thead><tbody><% items.forEach((item,index)=>{ const rate = Number(item.cgst_percent)+Number(item.sgst_percent)+Number(item.igst_percent); %><tr><td style="text-align:center"><%= index+1 %></td><td class="left"><%= item.description %> - <%= item.paper_type %></td><td><%= item.hsn_code %></td><td><%= rate.toFixed(2) %></td><td><%= Number(item.quantity).toFixed(3) %></td><td><%= Number(item.rate).toFixed(2) %></td><td><%= Number(item.discount_percent).toFixed(2) %></td><td><%= Number(item.taxable_amount).toFixed(2) %></td><td><%= Number(item.sgst_amount).toFixed(2) %></td><td><%= Number(item.cgst_amount).toFixed(2) %></td><td><%= Number(item.igst_amount).toFixed(2) %></td><td><%= Number(item.total_amount).toFixed(2) %></td></tr><% }) %></tbody></table>
<div class="summary"><div class="words"><strong>Amount Chargeable (in words)</strong><br><strong><%= invoice.amount_in_words %></strong></div><div class="totals"><div><span>Taxable</span><span>₹<%= Number(invoice.taxable_amount).toFixed(2) %></span></div><div><span>CGST</span><span>₹<%= Number(invoice.cgst_amount).toFixed(2) %></span></div><div><span>SGST</span><span>₹<%= Number(invoice.sgst_amount).toFixed(2) %></span></div><div><span>IGST</span><span>₹<%= Number(invoice.igst_amount).toFixed(2) %></span></div><div><span>Round Off</span><span>₹<%= Number(invoice.round_off).toFixed(2) %></span></div><div><span>Grand Total</span><span>₹<%= Number(invoice.grand_total).toFixed(2) %></span></div></div></div>
<table class="tax-summary"><thead><tr><th>HSN/SAC</th><th>Taxable Value</th><th>CGST</th><th>SGST</th><th>IGST</th><th>Total Tax</th></tr></thead><tbody><% items.forEach((item)=>{ %><tr><td style="text-align:left"><%= item.hsn_code %></td><td><%= Number(item.taxable_amount).toFixed(2) %></td><td><%= Number(item.cgst_amount).toFixed(2) %></td><td><%= Number(item.sgst_amount).toFixed(2) %></td><td><%= Number(item.igst_amount).toFixed(2) %></td><td><%= Number(item.cgst_amount+item.sgst_amount+item.igst_amount).toFixed(2) %></td></tr><% }) %></tbody></table>
<div class="footer"><div><strong>Declaration</strong><br><%= settings.declaration_text || '' %><br><br><%= settings.bank_details || '' %></div><div class="sign"><% if(invoice.show_seal && settings.seal_path){ %><img src="<%= url(settings.seal_path) %>" class="stamp-img"><% } %><div>For <%= settings.business_name %></div><% if(invoice.show_signature && settings.signature_path){ %><img src="<%= url(settings.signature_path) %>" class="sign-img"><% } else { %><div style="height:60px"></div><% } %><strong>Authorised Signatory</strong></div></div>
<div class="computer">This is a Computer Generated Invoice</div>
</div>
</body>
</html>
