<%- include('../partials/header') %>
<div class="flex ic jb mb24">
  <h2 style="font-size:20px;font-weight:700"><%= vendor ? 'Edit Vendor' : 'Add New Vendor' %></h2>
  <a href="/vendors" class="btn btn-outline btn-sm"><i class="fa fa-arrow-left"></i> Back</a>
</div>

<form action="<%= action %>" method="<%= method %>">

<!-- GSTIN LOOKUP -->
<div class="form-section" style="border-color:rgba(61,127,255,.3);background:linear-gradient(135deg,var(--bg2),var(--bg3))">
  <div class="form-section-title"><i class="fa fa-magnifying-glass-chart"></i> GSTIN Auto-Fill
    <span class="muted xs" style="margin-left:8px;font-weight:400;text-transform:none;letter-spacing:0">Enter GSTIN to automatically fetch vendor details</span>
  </div>
  <div class="form-grid form-grid-2">
    <div class="form-group">
      <label>Enter GSTIN to Auto-Fill</label>
      <div class="gstin-wrap">
        <input type="text" id="gstinInput" placeholder="e.g. 27ABBFK1103E1Z1" maxlength="15"
          style="text-transform:uppercase;letter-spacing:1px;font-family:var(--mono)"
          value="<%= vendor ? vendor.gstin||'' : '' %>">
        <button type="button" class="gstin-lookup-btn" id="gstinLookupBtn">
          <i class="fa fa-search"></i> Fetch Details
        </button>
      </div>
      <div class="gstin-status" id="gstinStatus"></div>
    </div>
    <div style="display:flex;align-items:center;padding:12px;background:var(--bg4);border-radius:var(--r);font-size:12px;color:var(--text2)">
      <div>
        <div style="font-weight:600;color:var(--text);margin-bottom:4px"><i class="fa fa-bolt" style="color:var(--amber)"></i> How it works</div>
        <div style="color:var(--text3)">Enter vendor's 15-digit GSTIN and click Fetch. Name, address & state auto-fill from the GST Portal.</div>
      </div>
    </div>
  </div>
</div>

<!-- BASIC INFO -->
<div class="form-section">
  <div class="form-section-title"><i class="fa fa-truck"></i> Basic Information</div>
  <div class="form-grid form-grid-3">
    <div class="form-group">
      <label>Vendor / Company Name *</label>
      <input type="text" id="fieldName" name="name" value="<%= vendor?vendor.name:'' %>" required>
    </div>
    <div class="form-group">
      <label>Trade Name</label>
      <input type="text" id="fieldTradeName" name="tradeName" value="<%= vendor?vendor.tradeName||'':'' %>">
    </div>
    <div class="form-group">
      <label>GST Type</label>
      <select id="fieldGSTType" name="gstType">
        <% ['Regular','Composition','Unregistered','SEZ','Export'].forEach(t=>{ %>
          <option value="<%= t %>" <%= vendor&&vendor.gstType===t?'selected':'' %>><%= t %></option>
        <% }) %>
      </select>
    </div>
    <div class="form-group">
      <label>GSTIN</label>
      <input type="text" name="gstin" value="<%= vendor?vendor.gstin||'':'' %>"
        placeholder="Auto-filled above" style="text-transform:uppercase;font-family:var(--mono)">
    </div>
    <div class="form-group">
      <label>PAN Number</label>
      <input type="text" id="fieldPAN" name="pan" value="<%= vendor?vendor.pan||'':'' %>"
        placeholder="Auto-filled from GSTIN" style="text-transform:uppercase;font-family:var(--mono)">
    </div>
    <div class="form-group">
      <label>Payment Terms (Days)</label>
      <input type="number" name="paymentTerms" value="<%= vendor?vendor.paymentTerms||45:45 %>">
    </div>
  </div>
</div>

<!-- ADDRESS -->
<div class="form-section">
  <div class="form-section-title"><i class="fa fa-location-dot"></i> Address</div>
  <div class="form-grid form-grid-3">
    <div class="form-group full">
      <label>Address Line 1</label>
      <input type="text" id="fieldAddrLine1" name="address[line1]" value="<%= vendor?vendor.address?.line1||'':'' %>" placeholder="Auto-filled from GSTIN">
    </div>
    <div class="form-group full">
      <label>Address Line 2</label>
      <input type="text" id="fieldAddrLine2" name="address[line2]" value="<%= vendor?vendor.address?.line2||'':'' %>">
    </div>
    <div class="form-group">
      <label>City</label>
      <input type="text" id="fieldCity" name="address[city]" value="<%= vendor?vendor.address?.city||'':'' %>">
    </div>
    <div class="form-group">
      <label>State</label>
      <input type="text" id="fieldState" name="address[state]" value="<%= vendor?vendor.address?.state||'Maharashtra':'Maharashtra' %>">
    </div>
    <div class="form-group">
      <label>State Code</label>
      <input type="text" id="fieldStateCode" name="address[stateCode]" value="<%= vendor?vendor.address?.stateCode||'27':'27' %>" style="width:80px">
    </div>
    <div class="form-group">
      <label>Pincode</label>
      <input type="text" id="fieldPincode" name="address[pincode]" value="<%= vendor?vendor.address?.pincode||'':'' %>" maxlength="6">
    </div>
  </div>
</div>

<!-- CONTACT -->
<div class="form-section">
  <div class="form-section-title"><i class="fa fa-phone"></i> Contact</div>
  <div class="form-grid form-grid-4">
    <div class="form-group"><label>Contact Person</label><input type="text" name="contact[person]" value="<%= vendor?vendor.contact?.person||'':'' %>"></div>
    <div class="form-group"><label>Phone *</label><input type="text" name="contact[phone]" value="<%= vendor?vendor.contact?.phone||'':'' %>" required></div>
    <div class="form-group"><label>Alt Phone</label><input type="text" name="contact[altPhone]" value="<%= vendor?vendor.contact?.altPhone||'':'' %>"></div>
    <div class="form-group"><label>Email</label><input type="email" name="contact[email]" value="<%= vendor?vendor.contact?.email||'':'' %>"></div>
  </div>
</div>

<!-- BANK -->
<div class="form-section">
  <div class="form-section-title"><i class="fa fa-building-columns"></i> Bank Details</div>
  <div class="form-grid form-grid-4">
    <div class="form-group"><label>Account Name</label><input type="text" name="bank[accountName]" value="<%= vendor?vendor.bank?.accountName||'':'' %>"></div>
    <div class="form-group"><label>Account Number</label><input type="text" name="bank[accountNumber]" value="<%= vendor?vendor.bank?.accountNumber||'':'' %>"></div>
    <div class="form-group"><label>Bank Name</label><input type="text" name="bank[bankName]" value="<%= vendor?vendor.bank?.bankName||'':'' %>"></div>
    <div class="form-group"><label>IFSC</label><input type="text" name="bank[ifsc]" value="<%= vendor?vendor.bank?.ifsc||'':'' %>" style="text-transform:uppercase"></div>
  </div>
</div>

<div class="flex g8 jb">
  <a href="/vendors" class="btn btn-outline">Cancel</a>
  <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> <%= vendor ? 'Update Vendor' : 'Save Vendor' %></button>
</div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
  initGSTINLookup('/vendors/api/gstin');
});
</script>
<%- include('../partials/footer') %>
