nhance/app/Views/policy_grid.php

819 lines
45 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- Modal content for the Large example -->
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" aria-modal="true" data-backdrop="static">
<div class="modal-dialog modal-full-width">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Policy Premium <span id="nameOfThePolicy"></span></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form role="form" class="parsley-examples" method="post" id="GridForm" enctype="multipart/form-data">
<input type="hidden" value="<?= csrf_hash() ?>" name="<?= csrf_token() ?>"/>
<input type="hidden" name="client_id" id="Client_id" value="<?= isset($client['id']) ? $client['id'] : '' ?>"/>
<input type="hidden" name="client_policy_id" id="client_policy_id" />
<input type="hidden" id="grid_emp_count"/>
<div class="form-group">
<div class="form-row">
<div class="form-group col-md-6">
<label for="emp_code">Policy Premium Type<span class="text-danger">*</span></label>
<select class="form-control" id="grid" name="policy_grid_id" onchange="addGridHTML(event)" required>
</select>
</div>
</div>
<hr>
<div class="form-row" id="grid_content_input">
</div>
</div>
<div class="form-group text-right m-b-0">
<button type="submit" class="btn btn-primary waves-effect waves-light mr-1" id="btnGridSubmit">Submit</button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
var policy_grid_id = $('#client_id').val();
var grid_html = '';
$('#gmc_remove').hide();
$('#btnGridSubmit').hide();
$('.close').click(function(){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
});
function addGridHTML(event = false, data = false, ui_type = false){
var grid_container = document.getElementById('grid_content_input');
var dataIdValue = ''
if(event === false){
var dataIdValue = ui_type
}else{
var selectElement = event.target;
var selectedOption = selectElement.options[selectElement.selectedIndex];
dataIdValue = selectedOption.getAttribute('data-id');
}
if(dataIdValue == '1'){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = `
<div class="form-row" id="grid_1">
<input value="1" type="hidden" name="policy_type">
<div class="form-group col-md-3">
<label for="mobile">Select <span class="text-danger">*</span></label>
<select class="form-control" id="si_or_bp" required>
<option value="2">Basic Pay</option>
<option value="1">Sum Insured</option>
</select>
</div>
<div class="form-group col-md-4" id="gpa_sum_insured">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si" id="gpa_si" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">Multiplier<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.multiplier : ''}" type="text" class="form-control" placeholder="Multiplier" name="multiplier" id="multiplier" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium" id="gpa_premium" required>
</div>
</div>`;
} else if(dataIdValue == '2'){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = `
<div class="form-row" id="grid_2">
<input value="1" type="hidden" name="policy_type">
<div class="form-group col-md-6">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si" id="gpa_si" required>
</div>
<div class="form-group col-md-6">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium" id="gpa_premium" required>
</div>
</div>`;
} else if(dataIdValue == '3'){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = `
<div class="form-row" id="grid_3">
<div class="form-group col-md-5">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="gpa_si" required>
</div>
<div class="form-group col-md-5">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="gpa_premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(0, 3)">x</button>
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(3)">+</button>
</div>
</div>`;
} else if(dataIdValue == '4'){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = `
<div class="form-row" id="grid_4">
<div class="form-group col-md-4">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si" id="sum_insured" required>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="mobile">From Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_from : ''}" type="text" class="form-control" placeholder="Enter From Age" name="age_from[]" id="age_from" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">To Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_to : ''}" type="text" class="form-control" placeholder="Enter TO Age" name="age_to[]" id="age_to" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(0,4)">x</button>
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(4)">+</button>
</div>
</div>
</div>`;
} else if(dataIdValue == '5'){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = `
<div class="form-row" id="grid_5">
<div class="form-group col-md-3">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">From Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_from : ''}" type="text" class="form-control" placeholder="Enter From Age" name="age_from[]" id="age_from" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">To Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_to : ''}" type="text" class="form-control" placeholder="Enter TO Age" name="age_to[]" id="age_to" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(0,5)">x</button>
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(5)">+</button>
</div>
</div>`;
} else if(dataIdValue == '6'){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = `
<div class="form-row" id="grid_6">
<div class="form-group col-md-4">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si" id="sum_insured" required>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="mobile">From Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_from : ''}" type="text" class="form-control" placeholder="Enter From Age" name="age_from[]" id="age_from" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">To Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_to : ''}" type="text" class="form-control" placeholder="Enter TO Age" name="age_to[]" id="age_to" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(0,6)">x</button>
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(6)">+</button>
</div>
</div>
</div>`;
} else if(dataIdValue == '7'){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = `
<div class="form-row" id="grid_7">
<div class="form-group col-md-3">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">From Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_from : ''}" type="text" class="form-control" placeholder="Enter From Age" name="age_from[]" id="age_from" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">To Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_to : ''}" type="text" class="form-control" placeholder="Enter TO Age" name="age_to[]" id="age_to" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(0,7)">x</button>
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(7)">+</button>
</div>
</div>`;
} else if(dataIdValue == '8'){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = `
<div class="form-row" id="grid_8">
<div class="form-group col-md-3">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Grade/Band<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.grade : ''}" type="text" class="form-control" placeholder="Enter Grade/Band " name="grade[]" id="grade" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(0,8)">x</button>
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(8)">+</button>
</div>
</div>`;
} else if(dataIdValue == '9'){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = `
<div class="form-row" id="grid_9">
<div class="form-group col-md-3">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Grade/Band<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.grade : ''}" type="text" class="form-control" placeholder="Enter Grade/Band " name="grade[]" id="grade" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(0,9)">x</button>
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(9)">+</button>
</div>
</div>`;
} else if(dataIdValue == '10'){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = `
<div class="form-row" id="grid_10">
<div class="form-group col-md-3">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">From Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_from : ''}" type="text" class="form-control" placeholder="Enter From Age" name="age_from[]" id="age_from" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">To Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_to : ''}" type="text" class="form-control" placeholder="Enter TO Age" name="age_to[]" id="age_to" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(0,10)">x</button>
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(10)">+</button>
</div>
</div>`;
} else if(dataIdValue == '11'){
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = `
<div class="form-row" id="grid_11">
<div class="form-group col-md-2">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Grade/Band<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.grade : ''}" type="text" class="form-control" placeholder="Enter Grade/Band " name="grade[]" id="grade" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">Max SI<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.max_si : ''}" type="text" class="form-control" placeholder="Enter Max SI" name="max_si[]" id="max_si" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(0,11)">x</button>
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(11)">+</button>
</div>
</div>`;
}
else
{
for (var i = 1; i <= 11; i++) {
$('#grid_' + i).remove();
}
grid_html = '';
$('#btnGridSubmit').hide();
}
grid_container.insertAdjacentHTML('beforeend', grid_html);
$('#gpa_sum_insured').hide();
$('#btnGridSubmit').show();
$('#si_or_bp').change(function(){
var selectedValue = $(this).val();
if(selectedValue == 1){
$('#gpa_sum_insured').show();
}else {
$('#gpa_sum_insured').hide();
}
});
if(data !== false && data.si){
console.log('show');
$('#gpa_sum_insured').show();
$('#si_or_bp').val("1");
}else{
$('#si_or_bp').val("2");
}
};
$("#GridForm").submit(function(event) {
event.preventDefault();
console.log($('#grid_emp_count').val());
if($('#grid_emp_count').val() == 'true'){
console.log('test')
toastr.warning('Client has active employees', 'Warning');
return;
}
var isValid = $('#GridForm').parsley().validate();
if (!isValid) {
console.log('Form is Empty', 'Warning');
return ;
}
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
var formData = new FormData($('#GridForm')[0]);
var policy_form_action = '<?= base_url("client/premimum/create") ?>';
$.ajax({
data: formData,
url: policy_form_action,
type: "POST",
dataType: 'json',
processData: false,
contentType: false,
success: function(res) {
console.log(res);
if (res.status === false) {
toastr.error('Policy Dose Not Create', 'Error');
return;
}
setTimeout(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
var message = (policy_PrimaryKey === '') ? 'Policy Premium Added successfully' : 'Policy Premium Added Successfully';
toastr.success(message, 'Success');
$('.close').click();
}, 1000);
},
error: function(xhr, status, error) {
console.error(xhr.responseText);
console.error(status, error);
}
});
});
$('body').on('click', '.btnPolicyModel', function () {
var policy_id = $(this).data('id');
var client_id = $('#Client_id').val();
$('#client_policy_id').val(policy_id);
$.ajax({
url: '<?= base_url("util/policy-premium") ?>' ,
type: "GET",
data: { policy_id: policy_id, client_id: client_id },
dataType: 'json',
success: function (res) {
console.log('responce :', res);
$('#nameOfThePolicy').html(' - ' + res.policy_name);
$('#grid_emp_count').val(res.count);
if (res.status === false) {
toastr.error(res.status);
return;
}
var policy_grid_id_value = '';
if (res.premiumData && res.premiumData.length > 0 && res.premiumData[0].policy_grid_id) {
policy_grid_id_value = res.premiumData[0].policy_grid_id;
}
$('#grid_content_input').empty();
var policeGridOptionHTML = '';
policeGridOptionHTML += ` <option value="">Select Premium Type</option>`;
$.each(res.data, function(index, item) {
policeGridOptionHTML += '<option data-id="'+ item.ui_type +'" value="' + item.id + '" ' + (policy_grid_id_value === item.id ? 'selected="selected"' : '') + '>' + item.policy_grid_type + '</option>';
});
$('#grid').html(policeGridOptionHTML);
if (res.premiumData && res.premiumData.length > 0) {
addGridHTML(false, res.premiumData[0], res.premiumData[0].policy_grid_id);
res.premiumData.shift();
$.each(res.premiumData, function(index, item){
console.log('premiumData index :',index)
appendGridtHtml(item.policy_grid_id, item);
});
} else {
console.log("res.premiumData is undefined, null, or empty.");
}
$('#bs-example-modal-lg').modal('show');
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
console.error(status, error);
}
});
});
var Count = 1
function appendGridtHtml(ui_type = false, data = false,) {
var html = '';
console.log('appendGridtHtml function called ');
// console.log('Grid Content',data)
console.log('UI TYPE :', ui_type);
Count++;
var container = document.getElementById('grid_content_input');
if(ui_type == '3'){
html = `
<div class="form-row" id="removeChild_${Count}">
<div class="form-group col-md-5">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="gpa_si" required>
</div>
<div class="form-group col-md-5">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="gpa_premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more_${Count}" onclick="appendGridtHtml(3)">+</button>
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(${Count})">x</button>
</div>
</div>
`;
}else if(ui_type == '4'){
html =`
<div class="form-row" id="removeChild_${Count}">
<div class="form-group col-md-3">
<label for="mobile">From Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_from : ''}" type="text" class="form-control" placeholder="Enter From Age" name="age_from[]" id="age_from" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">To Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_from : ''}" type="text" class="form-control" placeholder="Enter TO Age" name="age_to[]" id="age_to" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more_${Count}" onclick="appendGridtHtml(4)">+</button>
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(${Count})">x</button>
</div>
</div>`;
}else if(ui_type == '5'){
html = `
<div class="form-row" id="removeChild_${Count}">
<div class="form-group col-md-3">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">From Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_from : ''}" type="text" class="form-control" placeholder="Enter From Age" name="age_from[]" id="age_from" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">To Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_to : ''}" type="text" class="form-control" placeholder="Enter TO Age" name="age_to[]" id="age_to" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more_${Count}" onclick="appendGridtHtml(5)">+</button>
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(${Count})">x</button>
</div>
</div>`;
}else if(ui_type == '6'){
html =`
<div class="form-row" id="removeChild_${Count}">
<div class="form-group col-md-4">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="mobile">From Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_from : ''}" type="text" class="form-control" placeholder="Enter From Age" name="age_from[]" id="age_from" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">To Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_to : ''}" type="text" class="form-control" placeholder="Enter TO Age" name="age_to[]" id="age_to" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(6)">+</button>
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(${Count})">x</button>
</div>
</div>
</div>`;
}else if(ui_type == '7'){
html = `
<div class="form-row" id="removeChild_${Count}">
<div class="form-group col-md-3">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">From Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_from : ''}" type="text" class="form-control" placeholder="Enter From Age" name="age_from[]" id="age_from" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">To Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_to : ''}" type="text" class="form-control" placeholder="Enter TO Age" name="age_to[]" id="age_to" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(7)">+</button>
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(${Count})">x</button>
</div>
</div>`;
}else if(ui_type == '8'){
html = `
<div class="form-row" id="removeChild_${Count}">
<div class="form-group col-md-3">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Grade/Band<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.grade : ''}" type="text" class="form-control" placeholder="Enter Grade/Band " name="grade[]" id="grade" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(8)">+</button>
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(${Count})">x</button>
</div>
</div>`;
}else if(ui_type == '9'){
html = `
<div class="form-row" id="removeChild_${Count}">
<div class="form-group col-md-3">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Grade/Band<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.grade : ''}" type="text" class="form-control" placeholder="Enter Grade/Band " name="grade[]" id="grade" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(9)">+</button>
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(${Count})">x</button>
</div>
</div>`;
}else if(ui_type == '10'){
html = `
<div class="form-row" id="removeChild_${Count}">
<div class="form-group col-md-3">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">From Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_from : ''}" type="text" class="form-control" placeholder="Enter From Age" name="age_from[]" id="age_from" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">To Age<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.age_to : ''}" type="text" class="form-control" placeholder="Enter TO Age" name="age_to[]" id="age_to" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(10)">+</button>
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(${Count})">x</button>
</div>
</div>`;
}else if(ui_type == '11'){
html = `
<div class="form-row" id="removeChild_${Count}">
<div class="form-group col-md-2">
<label for="mobile">Sum Insured<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.si : ''}" type="text" class="form-control" placeholder="Enter Sum Insured" name="si[]" id="sum_insured" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Grade/Band<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.grade : ''}" type="text" class="form-control" placeholder="Enter Grade/Band " name="grade[]" id="grade" required>
</div>
<div class="form-group col-md-3">
<label for="mobile">Premium<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.premium : ''}" type="text" class="form-control" placeholder="Enter Premium" name="premium[]" id="premium" required>
</div>
<div class="form-group col-md-2">
<label for="mobile">Max SI<span class="text-danger">*</span></label>
<input value="${data !== false && data !== undefined && data !== '' ? data.max_si : ''}" type="text" class="form-control" placeholder="Enter Max SI" name="max_si" id="max_si[]" required>
</div>
<div class="form-group">
<button style="margin-top: 44px;" type="button" class="btn btn-primary" id="gmc_add_more" onclick="appendGridtHtml(11)">+</button>
<button style="margin-top: 44px;" type="button" class="btn btn-danger" id="gmc_remove" onclick="removebutton(${Count})">x</button>
</div>
</div>`;
}
container.insertAdjacentHTML('beforeend', html);
$('#gmc_add_more').hide()
$('#gmc_remove').show()
// console.log('count 1',Count)
Count--
// console.log('count 2',Count)
$('#gmc_add_more_'+Count).hide()
Count++
// console.log('count 3',Count)
}
function removebutton(index, type) {
if(index == 0){
var inputs = document.querySelectorAll('#grid_'+ type +' input');
inputs.forEach(function(input) {
input.value = '';
});
}else{
var element = document.getElementById('removeChild_'+ index);
var gridContentDiv = document.getElementById('grid_content_input');
var count = gridContentDiv.childElementCount;
if (element) {
element.remove();
}
if(count == 2){
$('#gmc_add_more').show();
}
index--;
$('#gmc_add_more_'+index).show();
}
}
</script>