<%- include('../../partials/header') %>
<div class="flex ic jb mb16">
  <div class="flex ic g12">
    <a href="/sales-bills" class="btn btn-ghost btn-sm"><i class="fa fa-arrow-left"></i></a>
    <div><h2 style="font-size:18px;font-weight:700;font-family:var(--mono)"><%= bill.invoiceNo %></h2><p class="muted xs">Created by <%= bill.createdBy?.name||'System' %></p></div>
    <span class="badge badge-<%= bill.status.toLowerCase() %>" style="font-size:13px;padding:4px 12px"><%= bill.status %></span>
  </div>
  <div class="flex g8">
    <a href="/sales-bills/<%= bill.id %>/print" target="_blank" class="btn btn-outline btn-sm"><i class="fa fa-print"></i> Print</a>
    <% if(bill.eWayBill && bill.eWayBill.ewbNo){ %>
    <a href="/sales-bills/<%= bill.id %>/print-ewb" target="_blank" class="btn btn-outline btn-sm" style="border-color:#16a34a;color:#16a34a"><i class="fa fa-road"></i> Print EWB</a>
    <% } %>
    <% if(bill.status!=='Cancelled'){ %>
    <% if(!bill.eInvoice||bill.eInvoice.status!=='Generated'){ %>
    <form action="/sales-bills/<%= bill.id %>/einvoice" method="POST" style="display:inline"><button type="submit" class="btn btn-amber btn-sm"><i class="fa fa-qrcode"></i> E-Invoice</button></form>
    <% } %>
    <button class="btn btn-success btn-sm" onclick="openModal('ewbModal')"><i class="fa fa-road"></i> E-Way Bill</button>
    <button class="btn btn-amber btn-sm" onclick="openModal('payModal')"><i class="fa fa-money-bill"></i> Payment</button>
    <a href="/sales-bills/<%= bill.id %>/edit" class="btn btn-outline btn-sm"><i class="fa fa-pen"></i></a>
    <form action="/sales-bills/<%= bill.id %>/cancel" method="POST" style="display:inline"><button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Cancel invoice?')"><i class="fa fa-ban"></i></button></form>
    <% } %>
  </div>
</div>

<div class="meta-bar">
  <div class="meta-item"><div class="mk">Invoice Date</div><div class="mv"><%= moment(bill.invoiceDate).format('DD/MM/YYYY') %></div></div>
  <div class="meta-div"></div>
  <div class="meta-item"><div class="mk">PO Number</div><div class="mv"><%= bill.poNo||'—' %></div></div>
  <div class="meta-div"></div>
  <% if(bill.poDate){ %><div class="meta-item"><div class="mk">PO Date</div><div class="mv"><%= moment(bill.poDate).format('DD/MM/YYYY') %></div></div><div class="meta-div"></div><% } %>
  <% if(bill.transport?.dispatchDate){ %><div class="meta-item"><div class="mk">Dispatch Date</div><div class="mv"><%= moment(bill.transport.dispatchDate).format('DD/MM/YYYY') %></div></div><div class="meta-div"></div><% } %>
  <div class="meta-item"><div class="mk">Payment Terms</div><div class="mv"><%= bill.paymentTerms||45 %> Days</div></div>
  <div class="meta-div"></div>
  <div class="meta-item"><div class="mk">Transport</div><div class="mv"><%= bill.transport?.mode||'BY ROAD' %></div></div>
  <% if(bill.transport?.vehicleNo){%><div class="meta-div"></div><div class="meta-item"><div class="mk">Vehicle</div><div class="mv"><%= bill.transport.vehicleNo %></div></div><%}%>
  <div class="meta-div"></div>
  <div class="meta-item"><div class="mk">Net Payable</div><div class="mv cacc">₹<%= (bill.netPayable||0).toFixed(2) %></div></div>
</div>

<!-- E-Invoice & EWB Panels -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px">
  <div class="ewb-panel <%= bill.eInvoice&&bill.eInvoice.status==='Generated'?'gen':'pend' %>">
    <div class="ewb-hdr">
      <% if(bill.eInvoice&&bill.eInvoice.status==='Generated'){%><i class="fa fa-circle-check cg" style="font-size:18px"></i><span class="ewb-title">E-Invoice Generated</span>
      <%}else{%><i class="fa fa-clock ca" style="font-size:18px"></i><span class="ewb-title">E-Invoice Pending</span><%}%>
    </div>
    <% if(bill.eInvoice&&bill.eInvoice.irn){%>
    <div class="ewb-dets">
      <div><div class="k">IRN</div><div class="v mono xs" style="word-break:break-all"><%= bill.eInvoice.irn.substring(0,24) %>…</div></div>
      <div><div class="k">Ack No.</div><div class="v mono"><%= bill.eInvoice.ackNo %></div></div>
      <div><div class="k">Date</div><div class="v"><%= moment(bill.eInvoice.ackDate).format('DD/MM/YYYY') %></div></div>
    </div>
    <%}else{%><p class="muted sm">Click "E-Invoice" to generate IRN & QR Code.</p><%}%>
  </div>
  <div class="ewb-panel <%= bill.eWayBill&&bill.eWayBill.ewbNo?'gen':'pend' %>">
    <div class="ewb-hdr">
      <% if(bill.eWayBill&&bill.eWayBill.ewbNo){%><i class="fa fa-circle-check cg" style="font-size:18px"></i><span class="ewb-title">E-Way Bill Generated</span>
      <%}else{%><i class="fa fa-triangle-exclamation ca" style="font-size:18px"></i><span class="ewb-title">E-Way Bill <%= bill.netPayable>=50000?'(REQUIRED)':'Not Generated' %></span><%}%>
    </div>
    <% if(bill.eWayBill&&bill.eWayBill.ewbNo){%>
    <div class="ewb-dets">
      <div><div class="k">EWB No.</div><div class="v ewb-no"><%= bill.eWayBill.ewbNo %></div></div>
      <div><div class="k">Date</div><div class="v"><%= moment(bill.eWayBill.ewbDate).format('DD/MM/YYYY') %></div></div>
      <div><div class="k">Valid Upto</div><div class="v"><%= moment(bill.eWayBill.validUpto).format('DD/MM/YYYY') %></div></div>
      <div><div class="k">Vehicle</div><div class="v mono"><%= bill.eWayBill.vehicleNo||'—' %></div></div>
    </div>
    <%}else{%><p class="muted sm"><%= bill.netPayable>=50000?'⚠️ Mandatory for this invoice (above ₹50,000). Click E-Way Bill.':'Invoice below ₹50,000 — optional.' %></p><%}%>
  </div>
</div>

<!-- Party Details -->
<div class="det-grid">
  <div class="det-box">
    <div class="det-box-title">Billed To</div>
    <div style="font-weight:600;color:var(--text);font-size:14px;margin-bottom:8px"><%= bill.billedTo?.name %></div>
    <div class="det-row"><span class="det-k">GSTIN</span><span class="det-v mono"><%= bill.billedTo?.gstin||'Unregistered' %></span></div>
    <div class="det-row"><span class="det-k">Address</span><span class="det-v"><%= [bill.billedTo?.address,bill.billedTo?.city,bill.billedTo?.state].filter(Boolean).join(', ') %></span></div>
    <div class="det-row"><span class="det-k">Phone</span><span class="det-v"><%= bill.billedTo?.phone||'—' %></span></div>
  </div>
  <div class="det-box">
    <div class="det-box-title">Shipped To</div>
    <div style="font-weight:600;color:var(--text);font-size:14px;margin-bottom:8px"><%= bill.shippedTo?.name %></div>
    <div class="det-row"><span class="det-k">GSTIN</span><span class="det-v mono"><%= bill.shippedTo?.gstin||'Unregistered' %></span></div>
    <div class="det-row"><span class="det-k">Address</span><span class="det-v"><%= [bill.shippedTo?.address,bill.shippedTo?.city,bill.shippedTo?.state].filter(Boolean).join(', ') %></span></div>
    <div class="det-row"><span class="det-k">State Code</span><span class="det-v"><%= bill.shippedTo?.stateCode||'27' %></span></div>
  </div>
</div>

<!-- Line Items -->
<div class="tbl-wrap mb16 mt16">
  <div class="tbl-hdr"><span class="tbl-title">Line Items</span></div>
  <table><thead><tr><th>#</th><th>Particulars</th><th>HSN</th><th>Qty</th><th>Unit</th><th class="tr">MRP</th><th class="tr">Amount</th><th class="tr">GST%</th><th class="tr">GST Amt</th><th class="tr">Total</th></tr></thead>
  <tbody><% bill.lineItems.forEach(item=>{ %>
    <tr><td class="muted"><%= item.srNo %></td><td class="fw6"><%= item.particulars %></td><td class="mono sm"><%= item.hsnCode||'—' %></td><td class="mono"><%= item.qty %></td><td class="muted"><%= item.unit||'NOS' %></td><td class="mono tr">₹<%= (item.mrp||0).toFixed(2) %></td><td class="mono tr">₹<%= (item.amount||0).toFixed(2) %></td><td class="tr"><%= item.gstRate %>%</td><td class="mono tr">₹<%= (item.gstAmt||0).toFixed(2) %></td><td class="mono fw6 tr">₹<%= (item.total||0).toFixed(2) %></td></tr>
  <% }) %></tbody></table>
</div>

<!-- Totals -->
<div style="display:grid;grid-template-columns:1fr 300px;gap:16px;margin-bottom:20px">
  <div class="card">
    <div class="card-hdr"><span class="card-title">GST Tax Breakdown</span></div>
    <table><thead><tr><th>Tax Rate</th><th class="tr">Taxable Amt</th><th class="tr">CGST</th><th class="tr">SGST</th><th class="tr">IGST</th><th class="tr">Total GST</th></tr></thead>
    <tbody><% (bill.taxBreakdown||[]).forEach(tb=>{ %><tr><td class="fw6"><%= tb.taxRate %>%</td><td class="mono tr">₹<%= (tb.taxableAmt||0).toFixed(2) %></td><td class="mono tr">₹<%= (tb.cgst||0).toFixed(2) %></td><td class="mono tr">₹<%= (tb.sgst||0).toFixed(2) %></td><td class="mono tr">₹<%= (tb.igst||0).toFixed(2) %></td><td class="mono fw6 tr">₹<%= ((tb.cgst||0)+(tb.sgst||0)+(tb.igst||0)).toFixed(2) %></td></tr><% }) %></tbody>
    <tfoot><tr style="background:var(--bg3)"><td class="fw6">Total</td><td class="mono fw6 tr" style="padding:10px 14px">₹<%= (bill.taxableAmount||0).toFixed(2) %></td><td class="mono fw6 tr" style="padding:10px 14px">₹<%= (bill.cgstAmount||0).toFixed(2) %></td><td class="mono fw6 tr" style="padding:10px 14px">₹<%= (bill.sgstAmount||0).toFixed(2) %></td><td class="mono fw6 tr" style="padding:10px 14px">₹<%= (bill.igstAmount||0).toFixed(2) %></td><td class="mono fw6 tr cacc" style="padding:10px 14px">₹<%= (bill.totalGst||0).toFixed(2) %></td></tr></tfoot>
    </table>
  </div>
  <div class="totals-box" style="align-self:start">
    <div class="tot-row"><span class="lbl">Taxable Amount</span><span class="val">₹<%= (bill.taxableAmount||0).toFixed(2) %></span></div>
    <div class="tot-row"><span class="lbl">CGST</span><span class="val">₹<%= (bill.cgstAmount||0).toFixed(2) %></span></div>
    <div class="tot-row"><span class="lbl">SGST</span><span class="val">₹<%= (bill.sgstAmount||0).toFixed(2) %></span></div>
    <div class="tot-row"><span class="lbl">IGST</span><span class="val">₹<%= (bill.igstAmount||0).toFixed(2) %></span></div>
    <div class="tot-row"><span class="lbl">Total Amount</span><span class="val">₹<%= (bill.totalAmount||0).toFixed(2) %></span></div>
    <% if(bill.discount){%><div class="tot-row"><span class="lbl">Discount</span><span class="val cr">-₹<%= bill.discount.toFixed(2) %></span></div><%}%>
    <div class="tot-row"><span class="lbl">Round Off</span><span class="val">₹<%= (bill.roundOff||0).toFixed(2) %></span></div>
    <div class="tot-row grand divider"><span class="lbl">Net Payable</span><span class="val cacc">₹<%= (bill.netPayable||0).toFixed(2) %></span></div>
    <div class="tot-row"><span class="lbl">Paid</span><span class="val cg">₹<%= (bill.paidAmount||0).toFixed(2) %></span></div>
    <div class="tot-row divider"><span class="lbl" style="font-weight:700">Balance Due</span><span class="val" style="font-weight:700" class="<%= ((bill.netPayable||0)-(bill.paidAmount||0))>0?'cr':'cg' %>">₹<%= ((bill.netPayable||0)-(bill.paidAmount||0)).toFixed(2) %></span></div>
  </div>
</div>

<div style="background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:12px 16px;margin-bottom:20px">
  <span class="muted xs" style="font-weight:600;letter-spacing:.5px">AMOUNT IN WORDS: </span>
  <span style="font-size:13px;font-style:italic"><%= bill.amountInWords %></span>
</div>

<% if(bill.payments&&bill.payments.length>0){%>
<div class="tbl-wrap mb16"><div class="tbl-hdr"><span class="tbl-title">Payment History</span></div>
<table><thead><tr><th>Date</th><th>Amount</th><th>Mode</th><th>Reference</th><th>Notes</th></tr></thead>
<tbody><% bill.payments.forEach(p=>{ %><tr><td><%= moment(p.date).format('DD/MM/YYYY') %></td><td class="mono fw6 cg">₹<%= (p.amount||0).toFixed(2) %></td><td><%= p.mode||'—' %></td><td class="mono sm"><%= p.reference||'—' %></td><td class="muted sm"><%= p.notes||'—' %></td></tr><% }) %></tbody>
</table></div>
<% } %>

<!-- EWB Modal -->
<div class="modal-ov" id="ewbModal">
  <div class="modal">
    <div class="modal-title"><i class="fa fa-road cacc"></i> Generate E-Way Bill</div>
    <form action="/sales-bills/<%= bill.id %>/eway-bill" method="POST">
      <div class="form-grid form-grid-2">
        <div class="form-group"><label>Vehicle No. *</label><input type="text" name="vehicleNo" value="<%= bill.transport?.vehicleNo||'' %>" required placeholder="MH12AB1234"></div>
        <div class="form-group"><label>Transport Mode</label><select name="transMode"><option value="1-Road">1 - Road</option><option value="2-Rail">2 - Rail</option><option value="3-Air">3 - Air</option></select></div>
        <div class="form-group"><label>Distance (KM) *</label><input type="number" name="distance" placeholder="100" required></div>
        <div class="form-group"><label>Transporter Name</label><input type="text" name="transporterName" placeholder="Transporter"></div>
      </div>
      <div style="background:var(--amberbg);border:1px solid rgba(245,158,11,.3);border-radius:6px;padding:10px 12px;font-size:12px;color:var(--amber);margin:12px 0">
        <i class="fa fa-info-circle"></i> Invoice value: <strong>₹<%= (bill.netPayable||0).toFixed(2) %></strong> — EWB <%= bill.netPayable>=50000?'is MANDATORY':'is optional' %> for this amount.
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-outline" onclick="closeModal('ewbModal')">Cancel</button>
        <button type="submit" class="btn btn-success"><i class="fa fa-road"></i> Generate EWB</button>
      </div>
    </form>
  </div>
</div>

<!-- Payment Modal -->
<div class="modal-ov" id="payModal">
  <div class="modal">
    <div class="modal-title"><i class="fa fa-money-bill cacc"></i> Record Payment</div>
    <form action="/sales-bills/<%= bill.id %>/payment" method="POST">
      <div class="form-grid form-grid-2">
        <div class="form-group"><label>Amount Received *</label><input type="number" name="amount" step="0.01" required value="<%= ((bill.netPayable||0)-(bill.paidAmount||0)).toFixed(2) %>"></div>
        <div class="form-group"><label>Payment Mode</label><select name="mode"><option>Bank Transfer</option><option>NEFT</option><option>RTGS</option><option>IMPS</option><option>Cheque</option><option>Cash</option><option>UPI</option></select></div>
        <div class="form-group"><label>Reference / UTR</label><input type="text" name="reference" placeholder="UTR / Cheque No."></div>
        <div class="form-group"><label>Notes</label><input type="text" name="notes" placeholder="Optional"></div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-outline" onclick="closeModal('payModal')">Cancel</button>
        <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i> Record Payment</button>
      </div>
    </form>
  </div>
</div>

<%- include('../../partials/footer') %>
