Notes

{% extends 'dashboard/index.html' %}
{% block dashoard_title %}
Party Master |
{% endblock %}
{% block dashboard_heading %}
<h1 class="h4 mb-0 text-gray-800">
Create New Party
</h1>

<a href="{% url 'dashboard:party_details' module=module %}" class="d-inline-block btn btn-primary shadow-sm"><i
class="fas fa-eye text-white-50"></i> View List</a>
{% endblock %}



{% block dashboard_content %}

<style>


.table th, .table td{
padding: 0!important;
min-width: 250px!important;
}

</style>

<form enctype="multipart/form-data" method="post">
{% csrf_token %}
{% include 'error_component.html' %}
{% if update %}
<input type="hidden" name="total_rows" id="total_rows" value="{{data.party_address.all|length}}">
{% else %}
<input type="hidden" name="total_rows" id="total_rows" value="1">
{% endif %}
<div class="row">

<div class="col-md-3 col-sm-12 mb-1">
<label for="id_party_name">Party Name</label>
{{ form.party_name }}
</div>
<div class="col-md-3 col-sm-12 mb-1">
<label for="id_alias">Alias</label>
{{ form.alias }}
</div>
<div class="col-md-3 col-sm-12 mb-1">
<label for="id_customer_id">Customer ID</label>
{{ form.customer_id }}
</div>

<div class="col-md-3 col-sm-12 mb-1">
<label for="id_fin_non_fin">Financial/Non Financial</label>
{{ form.fin_non_fin }}
</div>

<div class="col-md-3 col-sm-12 mb-1">
<label for="id_for_station">Station</label>
{{ form.for_station }}
</div>

<div class="col-md-3 col-sm-12 mb-1">
<label for="id_party_company_type">Company Type</label>
{{ form.party_company_type }}
</div>





<div class="col-md-3 col-sm-12 mb-1">
<label for="id_under">Under</label>
{{ form.under }}
</div>

<div class="col-md-3 col-sm-12 mb-1">
<label for="id_account_manager">Account Manager</label>
{{ form.account_manager }}
</div>

<div class="col-md-3 col-sm-12 mb-1">
<label for="id_bl_type">Contact Person</label>
{{ form.contact_person }}
</div>

<div class="col-md-3 col-sm-12 mb-1">
<label for="id_party_short_name">Party Short Name</label>
{{ form.party_short_name }}
</div>

<div class="col-md-3 col-sm-12 mb-1">
<label for="id_iec_code">IEC Code</label>
{{ form.iec_code }}
</div>

<!-- <div class="col-md-3 col-sm-12 mb-1">
<label for="id_cin_number">CIN Number</label>
{{ form.cin_number }}
</div> -->

<div class="col-md-3 col-sm-12 mb-1">
<label for="id_credit_days">Credit Days</label>
{{ form.credit_days }}
</div>


<div class="col-md-3 col-sm-12 mb-1">
<label for="id_registered_gst">Registered GST / VAT</label>
{{ form.registered_gst }}
</div>

<div class="col-md-3 col-sm-12 mb-1">
<label for="kyc_form">KYC Form
{% if update and data.kyc_form %}
<a href="{{ data.kyc_form.url }}" target="_blank">View</a>
{% endif %}
</label>
{{form.kyc_form}}
</div>
<div class="col-md-3 col-sm-12 mb-1">
<label for="photo_id">Photo ID
{% if update and data.photo_id %}
<a href="{{ data.photo_id.url }}" target="_blank">View</a>
{% endif %}
</label>
{{form.photo_id}}
</div>

<div class="col-md-12 col-sm-12 mb-1">
<label for="id_registered_address">Registered Address</label>
{{ form.registered_address }}
</div>

<div class="col-md-12 col-sm-12 mb-1">
<label for="id_party_type">Party Type</label>
{{ form.party_type }}
</div>
<div class="col-md-12 col-sm-12 mb-1">
<label for="id_is_active">Is Active</label>
{{ form.is_active }}
</div>
<div class="table-responsive">
<table class="table table-bordered" id="address_entry">

<tr>
<th >Branch</th>
<th>Address Line 1</th>
<th>Address Line 2</th>
<th>Address Line 3</th>
<th>Country</th>
<th>State</th>
<th>City</th>
<th>ZIP Code</th>
<th>GSTIN / VAT</th>
<th>Contact</th>
<th>Email</th>
<th>PAN</th>
<th></th>
</tr>
{% if not update %}
<tr id="entry-1">

<td>
<input type="hidden" name="is_update-1" value="no" id="is_update-1">
<input type="text" class="form-control" name="branch-1" />
</td>
<td>
<input type="hidden" name="is_active-1" value="yes" id="is_active-1">
<input type="text" class="form-control" name="address_line_1-1" />
</td>
<td>
<input type="text" class="form-control" name="address_line_2-1" />
</td>
<td>
<input type="text" class="form-control" name="address_line_3-1" />
</td>
<td><input type="text" class="form-control" name="country-1" id="country-1" onkeyup="getCountry(1)"
required /></td>
<td>
<select name="state-1" id="state-1" class="form-control">
<option value=""> Choose State </option>
{% for state in all_states %}
<option value="{{state.id}}">{{ state.name }}</option>
{% endfor %}
</select>
</td>
<td><input type="text" class="form-control" name="city-1" id="city-1" onkeyup="getCity(1)" /></td>
<td><input type="text" class="form-control" name="zip-1" /></td>
<td><input type="text" class="form-control" name="gstin-1" /></td>
<td><input type="text" class="form-control" name="contact-1" /></td>
<td><input type="text" class="form-control" name="email-1" /></td>
<td><input type="text" class="form-control" name="pan-1" /></td>
<td>
<div class="btn btn-sm btn-danger" onclick="deleteRow(1)">Remove</div>
</td>
</tr>

{% else %}
{% for i in data.party_address.all %}
<tr id="entry-{{forloop.counter}}">

<td>
<input type="hidden" name="is_active-{{forloop.counter}}" value="yes" id="is_active-{{forloop.counter}}">
<input type="hidden" name="is_update-{{forloop.counter}}" value="yes" id="is_update-{{forloop.counter}}">
<input type="hidden" name="party_address_id-{{forloop.counter}}" value="{{i.id}}" id="party_address_id-{{forloop.counter}}">

<input type="text" value="{{i.branch}}" class="form-control"
name="branch-{{forloop.counter}}" />
</td>
<td>

<input type="text" value="{{i.corp_address_line1}}" class="form-control"
name="address_line_1-{{forloop.counter}}" />
</td>
<td>
<input type="text" value="{{i.corp_address_line2}}" class="form-control"
name="address_line_2-{{forloop.counter}}" />
</td>
<td>
<input type="text" value="{{i.corp_address_line3}}" class="form-control"
name="address_line_3-{{forloop.counter}}" />
</td>
<td><input type="text" onkeyup="getCountry('{{forloop.counter}}')" value="{{i.corp_country}}"
class="form-control" name="country-{{forloop.counter}}" id="country-{{forloop.counter}}" />
</td>
<td>
<select name="state-{{forloop.counter}}" id="state-{{forloop.counter}}" class="form-control">
<option value=""> Choose State </option>
{% for state in all_states %}
{% if state.id == i.corp_state.id %}
<option value="{{state.id}}" selected>{{ state.name }}</option>
{% else %}
<option value="{{state.id}}">{{ state.name }}</option>
{% endif %}
{% endfor %}
</select>
</td>
<td><input type="text" value="{{i.corp_city}}" onkeyup="getCity('{{forloop.counter}}')"
class="form-control" name="city-{{forloop.counter}}" id="city-{{forloop.counter}}" /></td>
<td><input type="text" value="{{i.corp_zip}}" class="form-control" name="zip-{{forloop.counter}}" />
</td>
<td><input type="text" value="{{i.corp_gstin}}" class="form-control"
name="gstin-{{forloop.counter}}" /></td>
<td><input type="text" value="{{i.corp_contact}}" class="form-control"
name="contact-{{forloop.counter}}" /></td>
<td><input type="text" value="{{i.corp_email}}" class="form-control"
name="email-{{forloop.counter}}" /></td>
<td><input type="text" value="{{i.corp_pan}}" class="form-control" name="pan-{{forloop.counter}}" />
</td>
<td>
<div class="btn btn-sm btn-danger" onclick="deleteRow('{{forloop.counter}}')">Remove</div>
</td>
</tr>
{% endfor %}
{% endif %}
</table>
</div>
<div class="text-right w-100">
<button type="button" class="btn btn-sm btn-primary" onclick="addRow()"> Add More </button>
</div>
</div>

<button type="submit" class="btn btn-primary">
{% if update %}
Update Party
{% else %}
Submit
{% endif %}

</button>
</form>



<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"
integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
var party_type = document.getElementById('id_party_type')
party_type.classList.add('row')
var party_type_nodes = document.getElementById('id_party_type').childNodes
for(var i=0; i<party_type_nodes.length; i++){
party_type_nodes[i].classList.add('col-auto')
}

</script>

<script>
var countries = []
const config = {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"X-CSCAPI-KEY": "Wm5kc3hoMFNUSFRqWUNNQTJ5cFNtUlZ3dzNiakFkTmVwMjhveG5wdQ=="
},
}
axios.get('https://api.countrystatecity.in/v1/countries', config).then((res) => {

var data = res.data.map(item => item.name.toUpperCase())
countries = data


}).catch(err => {
console.log(err)
})

const getCountry = (index) => {
// For Country

const country_id = `#country-` + index

$(country_id).autocomplete({
minLength: 2,
delay: 100,
source: countries,

});




}

var cities = []
axios.get('/api/v1/city/details', config).then((res) => {
var data = res.data.map(item => item.name.toUpperCase())
cities = data

}).catch(err => {
console.log(err)
})

const getCity = (index) => {

const city_id = `#city-` + index

$(city_id).autocomplete({
minLength: 2,
delay: 100,
source: cities,

});

}



var currentRowNumber = parseInt(document.getElementById('total_rows').value) || 0
var availableRowNumber = parseInt(document.getElementById('total_rows').value) || 0

const addRow = () => {
currentRowNumber += 1
availableRowNumber += 1
var newRow = document.getElementById('address_entry').insertRow(-1)
newRow.id = `entry-${currentRowNumber}`
newRow.classList.add("entry")
var branch = newRow.insertCell(0)
var address_line_1 = newRow.insertCell(1)
var address_line_2 = newRow.insertCell(2)
var address_line_3 = newRow.insertCell(3)
var country = newRow.insertCell(4)
var state = newRow.insertCell(5)
var city = newRow.insertCell(6)
var zip = newRow.insertCell(7)
var gstin = newRow.insertCell(8)
var contact = newRow.insertCell(9)
var email = newRow.insertCell(10)
var pan = newRow.insertCell(11)
var delete_cell = newRow.insertCell(12)

branch.innerHTML = `
<input type="hidden" name="is_update-${currentRowNumber}" value="no" id="is_update-${currentRowNumber}">
<input type="text" class="form-control" name="branch-${currentRowNumber}" />
`
address_line_1.innerHTML = `
<input type="hidden" name="is_active-${currentRowNumber}" value="yes" id="is_active-${currentRowNumber}">
<input type="text" class="form-control" name="address_line_1-${currentRowNumber}" />
`

address_line_2.innerHTML = `
<input type="text" class="form-control" name="address_line_2-${currentRowNumber}" />
`

address_line_3.innerHTML = `
<input type="text" class="form-control" name="address_line_3-${currentRowNumber}" />
`

country.innerHTML = `<input type="text" onkeyup="getCountry(${currentRowNumber})" class="form-control" name="country-${currentRowNumber}" id="country-${currentRowNumber}" />`

state.innerHTML = `
<select name="state-${currentRowNumber}" id="state-${currentRowNumber}" class="form-control">
<option value=""> Choose State </option>
{% for state in all_states %}
<option value="{{state.id}}">{{ state.name }}</option>
{% endfor %}
</select>
`

city.innerHTML = `
<input type="text" class="form-control" name="city-${currentRowNumber}" id="city-${currentRowNumber}" onkeyup="getCity(${currentRowNumber})" />
`

zip.innerHTML = `<input type="text" class="form-control" id="zip-${currentRowNumber}" name="zip-${currentRowNumber}" />`

gstin.innerHTML = `<input type="text" class="form-control" name="gstin-${currentRowNumber}" name="gstin-${currentRowNumber}" />`

contact.innerHTML = `<input type="text" class="form-control" name="contact-${currentRowNumber}" name="contact-${currentRowNumber}" />`

email.innerHTML = `<input type="text" class="form-control" name="email-${currentRowNumber}" name="email-${currentRowNumber}" />`

pan.innerHTML = `<input type="text" class="form-control" name="pan-${currentRowNumber}" name="pan-${currentRowNumber}" />`





delete_cell.innerHTML = `
<div class="btn btn-sm btn-danger" onclick="deleteRow(${currentRowNumber})">Remove</div>
`

document.getElementById('total_rows').value = currentRowNumber
}



const deleteRow = (index) => {
document.getElementById(`is_active-${index}`).value = "no"


document.getElementById(`entry-${index}`).style.display = 'none'
availableRowNumber -= 1
}


</script>

{% endblock %}