<%- include('../../partials/header') %>
<div class="flex ic jb mb24"><div><h2 style="font-size:20px;font-weight:700;margin-bottom:4px"><%= bill?'Edit Purchase Bill':'New Purchase Bill' %></h2><p class="muted sm">Record vendor invoice with GST</p></div><a href="/purchase-bills" class="btn btn-outline btn-sm"><i class="fa fa-arrow-left"></i> Back</a></div>
<form action="/purchase-bills<%= bill?'/'+bill.id+'?_method=PUT':'' %>" method="POST">
<div class="form-section">
  <div class="form-section-title"><i class="fa fa-cart-arrow-down"></i> Bill Details</div>
  <div class="form-grid form-grid-4">
    <div class="form-group"><label>Vendor Invoice No. *</label><input type="text" name="vendorInvoiceNo" value="<%= bill?bill.vendorInvoiceNo||'':'' %>" required></div>
    <div class="form-group"><label>Vendor Invoice Date</label><input type="date" name="vendorInvoiceDate" value="<%= bill&&bill.vendorInvoiceDate?moment(bill.vendorInvoiceDate).format('YYYY-MM-DD'):'' %>"></div>
    <div class="form-group"><label>Our Bill Date *</label><input type="date" name="billDate" required value="<%= bill?moment(bill.billDate).format('YYYY-MM-DD'):moment().format('YYYY-MM-DD') %>"></div>
    <div class="form-group"><label>Payment Terms (Days)</label><input type="number" name="paymentTerms" value="<%= bill?bill.paymentTerms||45:45 %>"></div>
    <div class="form-group"><label>E-Way Bill No.</label><input type="text" name="eWayBillNo" value="<%= bill?bill.eWayBillNo||'':'' %>" placeholder="EWB from vendor"></div>
    <div class="form-group"><label>Transport Mode</label><select name="transportMode"><option value="BY ROAD">BY ROAD</option><option value="BY RAIL">BY RAIL</option><option value="BY AIR">BY AIR</option></select></div>
    <div class="form-group"><label>Vehicle No.</label><input type="text" name="vehicleNo" value="<%= bill?bill.transport?.vehicleNo||'':'' %>"></div>
    <div class="form-group"><label>Docket No.</label><input type="text" name="docketNo" value="<%= bill?bill.transport?.docketNo||'':'' %>"></div>
  </div>
</div>
<div class="form-section">
  <div class="form-section-title"><i class="fa fa-truck"></i> Vendor</div>
  <div class="form-group mb8">
    <label>Search & Select Vendor *</label>
    <div style="position:relative">
      <input type="text" id="vendorSearch" placeholder="Type vendor name…" autocomplete="off" value="<%= bill&&bill.vendor?bill.vendor.name||'':'' %>" style="padding-left:36px">
      <i class="fa fa-search" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:13px;pointer-events:none"></i>
    </div>
    <input type="hidden" name="vendor" id="vendorId" value="<%= bill?bill.vendor?.id||'':'' %>" required>
    <div class="mt8"><a href="/vendors/new" target="_blank" class="cacc sm"><i class="fa fa-plus"></i> Add new vendor</a></div>
  </div>
  <div id="vendorDetails" style="background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:12px;font-size:12px;display:<%= bill&&bill.billedFrom?.name?'block':'none' %>">
    <div style="font-weight:600;color:var(--text);margin-bottom:4px" id="vd-name"><%= bill?bill.billedFrom?.name||'':'' %></div>
    <div class="muted" id="vd-gstin">GSTIN: <%= bill?bill.billedFrom?.gstin||'':'' %></div>
    <div class="muted" id="vd-addr"><%= bill?bill.billedFrom?.address||'':'' %></div>
  </div>
</div>
<div class="form-section">
  <div class="form-section-title"><i class="fa fa-list"></i> Line Items</div>
  <div style="overflow-x:auto">
    <table class="li-table" style="width:100%">
      <thead><tr><th style="width:32px">#</th><th style="min-width:200px">Particulars</th><th>HSN</th><th>Qty</th><th>Unit</th><th>MRP</th><th>Rate</th><th>GST%</th><th class="tr">Total</th><th style="width:32px"></th></tr></thead>
      <tbody id="lineItemsBody">
        <% if(bill&&bill.lineItems&&bill.lineItems.length>0){bill.lineItems.forEach((item,i)=>{%>
        <tr class="li-row">
          <td style="text-align:center;color:var(--text3);font-size:12px;padding:6px 4px"><%= i+1 %></td>
          <td style="padding:4px 2px;min-width:200px"><div style="position:relative"><input type="text" name="particulars" data-search value="<%= item.particulars %>" required style="width:100%" autocomplete="off"><input type="hidden" name="hsnCode" value="<%= item.hsnCode||'' %>"></div></td>
          <td style="padding:4px 2px"><input type="text" name="hsnCode" data-hsn value="<%= item.hsnCode||'' %>" style="width:90px"></td>
          <td style="padding:4px 2px"><input type="number" name="qty" data-qty value="<%= item.qty %>" min="0.001" step="any" style="width:70px" required></td>
          <td style="padding:4px 2px"><select name="unit" style="width:68px"><% ['NOS','KG','MTR','LTR','BOX','SET','PCS','PAIR'].forEach(u=>{%><option <%=u===item.unit?'selected':''%>><%= u %></option><%})%></select></td>
          <td style="padding:4px 2px"><input type="number" name="mrp" value="<%= item.mrp||'' %>" step="any" style="width:75px"></td>
          <td style="padding:4px 2px"><input type="number" name="rate" data-rate value="<%= item.rate %>" step="any" style="width:85px" required></td>
          <td style="padding:4px 2px"><select name="gstRate" data-gst style="width:66px"><% [0,5,12,18,28].forEach(r=>{%><option value="<%= r %>" <%=r===item.gstRate?'selected':''%>><%= r %>%</option><%})%></select></td>
          <td class="row-total" data-total style="text-align:right;padding:4px 8px;font-family:var(--mono);font-weight:600;white-space:nowrap">₹<%= (item.total||0).toFixed(2) %></td>
          <td style="padding:4px 2px"><button type="button" class="rm-btn" onclick="LineItems.removeRow(this)"><i class="fa fa-times"></i></button></td>
        </tr>
        <%})}%>
      </tbody>
    </table>
    <button type="button" class="add-row-btn" onclick="LineItems.addRow()"><i class="fa fa-plus"></i> Add Line Item</button>
  </div>
  <div style="display:flex;justify-content:flex-end;margin-top:20px">
    <div class="totals-box">
      <div class="tot-row"><span class="lbl">Taxable Amount</span><span class="val" id="sum-taxable">₹0.00</span></div>
      <div class="tot-row"><span class="lbl">CGST</span><span class="val" id="sum-cgst">₹0.00</span></div>
      <div class="tot-row"><span class="lbl">SGST</span><span class="val" id="sum-sgst">₹0.00</span></div>
      <div class="tot-row"><span class="lbl">IGST</span><span class="val" id="sum-igst">₹0.00</span></div>
      <div class="tot-row"><span class="lbl">Total GST</span><span class="val" id="sum-gst">₹0.00</span></div>
      <div class="tot-row"><span class="lbl">Gross Total</span><span class="val" id="sum-total">₹0.00</span></div>
      <div class="tot-row"><span class="lbl">Discount</span><input type="number" name="discount" id="discountInput" value="<%= bill?bill.discount||0:0 %>" step="any" style="width:100px;text-align:right" oninput="LineItems.recalcAll()"></div>
      <div class="tot-row grand divider"><span class="lbl">Net Payable</span><span class="val cacc" id="sum-net">₹0.00</span></div>
      <input type="hidden" name="taxableAmount" id="inp-taxable"><input type="hidden" name="totalGst" id="inp-gst"><input type="hidden" name="totalAmount" id="inp-total"><input type="hidden" name="roundOff" id="inp-roundoff" value="0"><input type="hidden" name="netPayable" id="inp-net">
    </div>
  </div>
</div>
<div class="form-section"><div class="form-group"><label>Notes</label><textarea name="notes" rows="2" placeholder="Internal notes…"><%= bill?bill.notes||'':'' %></textarea></div></div>
<div class="flex g8 jb"><a href="/purchase-bills" class="btn btn-outline">Cancel</a><button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> <%= bill?'Update Bill':'Save Purchase Bill' %></button></div>
</form>
<script>LineItems.init('lineItemsBody');<% if(!bill||!bill.lineItems||bill.lineItems.length===0){%>LineItems.addRow();<%}else{%>LineItems.recalcAll();<%}%></script>
<%- include('../../partials/footer') %>
