nhance/app/Views/rack_rate_test.php
2024-09-13 09:00:09 +05:30

1124 lines
47 KiB
PHP
Executable File
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.

<style>
.table th,
.table td {
padding: 4px;
}
table.dataTable tbody td {
padding: 4px 4px !important;
}
.btn .btn-secondary .buttons-csv .buttons-html5 .my_class {
position: relative;
left: 79px;
}
/* Add styles for the table and its elements as needed */
.disabled {
background-color: #ddd; /* Set desired gray color for disabled rows */
}
.small-width {
width: 5%;
}
.medium-width {
width: 10%;
}
.large-width {
width: 15%;
}
.extra-large-width {
width: 20%;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="row">
<div class="col-xl-12">
<div id="accordion" class="mb-3">
<div class="card mb-1">
<h5 class="m-1">
<a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne" aria-expanded="true">
<i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;"></i>
</a>
</h5>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<!-- <div class="text-center"> -->
<div class="form-row">
<div class="form-group col-md-3">
<label>Client</label> <br />
<select class="form-control" id="clients">
<option value="0">Select</option>
</select>
</div>
<div class="form-group col-md-3">
<label>Branch</label> <br />
<select name="branch_id" class="form-control" id="branch_id">
<option value="0">Select</option>
</select>
</div>
<div class="form-group col-md-3">
<label>Unit</label> <br />
<select name="branch_id" class="form-control" id="unit_id">
<option value="0">Select</option>
</select>
</div>
<div class="form-group col-md-3">
<label>Policy</label> <br />
<select class="form-control" id="policies">
<option value="0">Select</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label>Action</label> <br />
<select name="action" class="form-control" id="action">
<!-- <option value="0">Select</option> -->
<option value="inception" selected="selected">Inception/Addition</option>
<option value="dependent_addition">Dependent Addition</option>
</select>
</div>
<div class="form-group col-md-2">
<label>Employee Code</label> <br />
<input type="text" class="form-control" id="emp_code" name="emp_code" value="">
</div>
<div class="col-6" style="text-align: right;">
<a href="<?= base_url("#"); ?>" class="btn btn-primary waves-effect waves-light" id="get-emp-list" onclick="checkDependentConflict(event);" >Check Dependent conflict</a>
<a href="<?= base_url("#"); ?>" class="btn btn-primary waves-effect waves-light" id="get-emp-list" onclick="calculatePremium(event);" >calc premium</a>
<a href="#" class="btn btn-primary waves-effect waves-light" id="get-emp-list" onclick="addRowToTable();">+</a>
</div>
<!-- <button onclick="addRowToTable()">Add Row</button> -->
</div>
<!-- </div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="client_list">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="row" style="padding-bottom: 10px;">
<!-- <div class="col-6" style="align-self: center;">
<h4 style="position: relative;">Endorsement List</h4>
</div> -->
<div id="suggestion-box" style="display: none; position: absolute; background-color: #fff; border: 1px solid #ccc; padding: 5px; z-index: 100;">
Suggestions, pick any one
<ul id="suggestions"></ul>
</div>
</div>
<table class="table table-hover m-0 table-centered dt-responsive w-100" cellspacing="0" id="emptable">
<thead class="bg-light">
<tr>
<th class="small-width">SNO</th>
<th class="small-width">Emp code</th>
<th class="large-width">Name</th>
<th class="large-width">DOB</th>
<th class="small-width">Gender</th>
<th class="medium-width">Relation</th>
<th class="large-width">SI</th>
<th class="medium-width">DOC</th>
<th class="medium-width">Basic pay</th>
<th class="small-width">Band</th>
<th class="small-width">Unit</th>
<th class="small-width">Delete</th>
</tr>
</thead>
<tbody id='emptablebody'>
</tbody>
</table>
</div>
</div>
</div><!-- end col -->
</div>
<div class="modal fade" id="centermodal" tabindex="-1" role="dialog" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered" style="max-width:80%;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myCenterModalLabel">Premium Calculation Test Data</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<table class="table table-hover m-0 table-centered dt-responsive w-100" cellspacing="0" id="oldrestable" style="display: none;">
<thead class="bg-light">
<tr>
<th class="small-width">SNO</th>
<th class="small-width">Emp code</th>
<th class="large-width">Name</th>
<th class="medium-width">DOB</th>
<th class="medium-width">Relation</th>
<th class="large-width">Rack rate name</th>
<th class="small-width">Grid ID</th>
<th class="small-width">Is Self</th>
<th class="small-width">Premium type</th>
<th class="large-width">SI</th>
<th class="medium-width">premium</th>
<th class="small-width">Policy days</th>
<th class="small-width">no of days</th>
<th class="medium-width">Rata premium</th>
<th class="medium-width">GST</th>
</tr>
</thead>
<tbody id='oldrestablebody'>
</tbody>
</table>
<table class="table table-hover m-0 table-centered dt-responsive w-100" cellspacing="0" id="restable">
<thead class="bg-light">
<tr>
<th class="small-width">SNO</th>
<th class="small-width">Emp code</th>
<th class="large-width">Name</th>
<th class="medium-width">DOB</th>
<th class="medium-width">Relation</th>
<th class="large-width">Rack rate name</th>
<th class="small-width">Grid ID</th>
<th class="small-width">Is Self</th>
<th class="small-width">Premium type</th>
<th class="large-width">SI</th>
<th class="medium-width">premium</th>
<th class="small-width">Policy days</th>
<th class="small-width">no of days</th>
<th class="medium-width">Rata premium</th>
<th class="medium-width">GST</th>
</tr>
</thead>
<tbody id='restablebody'>
</tbody>
</table>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="centermodal2" tabindex="-1" role="dialog" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered" style="max-width:80%;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myCenterModalLabel">Dependent Conflict Test Data</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<table class="table table-hover m-0 table-centered dt-responsive w-100" cellspacing="0" id="restable">
<thead class="bg-light">
<tr>
<th class="small-width">Column</th>
<th class="large-width">Error</th>
</tr>
</thead>
<tbody id='dependenttablebody'>
</tbody>
</table>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
let mouseX = 0;
let mouseY = 0;
document.addEventListener('mousemove', function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
});
function getMouseCoordinates() {
return { x: mouseX, y: mouseY };
}
$(document).ready(function() {
// Initialize select2
$("#clients").select2();
$("#policies").select2();
$("#branch_id").select2();
});
// Declare a global variable to store API response data
var clientPolicies = [];
var clientPoliciesWithBranch = {
policies: [],
units:[]
};
var client_id = '<?= isset($getData) ? $getData['client_id'] : '0' ?>';
var client_branch_id = '<?= isset($getData) ? $getData['branch_id'] : '0' ?>';
$(window).on("load", function() {
console.log("window loaded");
// $('#centermodal').modal('show');
fetchClientPolicies();
addRowToTable(['Ram Kumar','01-Apr-1990','M','Self','500000','',450000,'A','unit1']);
addRowToTable(['Sita','01-Apr-1993','F','Spouse','','','','','']);
addRowToTable(['Gugan','01-Apr-2005','M','Son','','','','','']);
addRowToTable(['Selvi','01-Apr-2010','F','Daughter','','','','','']);
addRowToTable(['Suresh','01-Apr-1960','M','Father','','','','','']);
addRowToTable(['Jamuna','01-Apr-1965','F','Mother','','','','','']);
});
function fetchClientPolicies() {
$('#loader').show();
var apiURL = '<?php echo base_url(); ?>' + 'util/clients-with-policies';
console.log('fetchClientPolicies');
// console.log(apiURL);
$.ajax({
url: apiURL,
method: 'GET',
headers: {
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest"
},
success: function(response) {
// console.log(response.code);
// console.log(response.dataStatus);
// console.log(response.data);
if (response.code === 200 && response.dataStatus === true && response.data !== "") {
try {
clientPolicies = (response.data);
response.data.forEach(policy => {
// console.log('policies', policy.policies);
policy.policies.forEach(p => {
clientPoliciesWithBranch.policies.push(p);
});
});
// console.log(clientPolicies);
appendClients(clientPolicies);
setTimeout(function() {
if (client_id) {
var foundPolicies = clientPolicies.find(function(item) {
// console.log(typeof item.id)
return item.id == client_id;
});
appendBranch(foundPolicies.branchs);
}
}, 500);
setTimeout(function() {
if (client_branch_id) {
var foundPolicies = clientPoliciesWithBranch.policies.filter(function(item) {
// console.log('item', item);
return item.branch_id === client_branch_id;
});
if (foundPolicies) {
// console.log('foundPolicies', foundPolicies);
appendPolicies(foundPolicies);
} else {
console.log('No policies found for the selected client');
}
}
}, 500);
} catch (error) {
console.error('Error parsing API response data:', error);
}
} else if (response.code === 404 && response.dataStatus === false) {
console.error('no data found', response);
} else {
console.error('Something went wrong!');
}
},
error: function(xhr, status, error) {
console.error('Error fetching data from API:', error);
}
});
$('#loader').hide();
}
function appendClients(data) {
var clientID = <?= isset($getData) ? $getData['client_id'] : '0' ?>;
$.each(data, function(index, item) {
var option = $('<option>', {
value: item.id,
text: item.client_name
});
if (clientID == item.id) {
option.attr('selected', true);
}
$('#clients').append(option);
});
}
function appendBranch(data) {
$('#branch_id').empty();
$('#branch_id').append($('<option>', {
value: '0',
text: 'Select'
}));
$.each(data, function(index, item) {
var option = $('<option>', {
value: item.id,
text: item.branch_name
});
if (client_branch_id == item.id) {
option.attr('selected', true);
}
$('#branch_id').append(option);
});
}
function appendPolicies(data) {
$('#policies').empty();
$('#policies').append($('<option>', {
value: '0',
text: 'Select'
}));
var PolicyID = <?= isset($getData) ? $getData['policy_id'] : '0' ?>;
// console.log(PolicyID)
$.each(data, function(index, item) {
var option = $('<option>', {
value: item.client_policy_id,
text: `${item.policy_no ?? ''} - ${item.policy_type ?? ''}`
});
if (PolicyID == item.client_policy_id) {
option.attr('selected', true);
}
$('#policies').append(option);
});
}
function appendUnits(data) {
$('#unit_id').empty();
$('#unit_id').append($('<option>', {
value: '0',
text: 'Select'
}));
// var PolicyID = <?= isset($getData) ? $getData['policy_id'] : '0' ?>;
// console.log(PolicyID)
$.each(data, function(index, item) {
var option = $('<option>', {
value: item,
text: item
});
if (index == 0) {
option.attr('selected', true);
setUnitInFirstRow(item);
}
$('#unit_id').append(option);
});
}
function setUnitInFirstRow(text) {
var cellIndex = 10;
// Get the tbody element by its ID
var tbody = document.getElementById('emptablebody');
// Check if the tbody exists
if (!tbody) {
console.error('Tbody element not found with id:', tbodyId);
return;
}
// Get the first row of the tbody
var firstRow = tbody.rows[0];
// Check if the first row exists
if (!firstRow) {
console.error('No rows found in tbody with id:', tbodyId);
return;
}
// Check if the specified cell index exists in the first row
if (cellIndex >= firstRow.cells.length) {
console.error('Cell index', cellIndex, 'out of bounds for the first row');
return;
}
// Set the text content of the specified cell in the first row
firstRow.cells[cellIndex].textContent = text;
}
$(document).ready(function() {
$('#clients').on('change', function() {
$('#policies').empty();
$('#policies').append($('<option>', {
value: '0',
text: 'Select'
}));
var selectedClient = $(this).val();
// console.log(selectedClient);
// $('#selectedOptionInfo').text('Selected option: ' + selectedOption);
// Check if the selected option exists in apiData
var foundPolicies = clientPolicies.find(function(item) {
return item.id === selectedClient;
});
// console.log(foundPolicies.branchs);
appendBranch(foundPolicies.branchs);
});
$('#unit_id').on('change', function() {
var selectedUnit = $(this).val();
setUnitInFirstRow(selectedUnit);
});
});
$(document).ready(function() {
$('#branch_id').on('change', function() {
console.log(clientPolicies);
console.log(clientPoliciesWithBranch);
var selectedBranch = $(this).val();
var current_client_id = $('#clients').val();
// console.log('selectedBranch', selectedClient);
// console.log('clientPolicies', clientPoliciesWithBranch);
var foundPolicies = clientPoliciesWithBranch.policies.filter(function(item) {
// console.log('item', item);
return item.branch_id === selectedBranch;
});
var foundUnits = [];
clientPolicies.forEach(function(client) {
if (client.id == current_client_id) {
console.log('inside ' + current_client_id);
console.log(client.client_name + ' first if');
var branches = client.branchs;
branches.forEach(function(branch) {
if (branch.id == selectedBranch) {
console.log('inside branch check');
console.log(branch.branch_name);
console.log(branch.units);
foundUnits = (JSON.parse(branch.units));
}
});
}
});
console.log('final');
console.log(foundUnits);
if (Array.isArray(foundUnits) && foundUnits.length === 0) {
// appendPolicies(foundPolicies);
toastr.warning('No Units found for the selected client branch.');
} else {
// console.log('foundPolicies', foundPolicies);
appendUnits(foundUnits);
}
if (Array.isArray(foundPolicies) && foundPolicies.length === 0) {
appendPolicies(foundPolicies);
toastr.warning('No policies found for the selected client branch.');
} else {
// console.log('foundPolicies', foundPolicies);
appendPolicies(foundPolicies);
}
});
});
// Function to convert object to query parameters
function objectToQueryString(obj) {
return Object.keys(obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
}
function calculatePremium() {
event.preventDefault(); // Prevent default action
let table = document.getElementById('emptable');
let tabledata = getTableDataAsJson(table);
// return;
var client_id = $('#clients').val();
var policy_id = $('#policies').val();
var branch_id = $('#branch_id').val();
var unit_id = $('#unit_id').val();
var action = $('#action').val();
var emp_code = $('#emp_code').val();
console.log(client_id + '-' + policy_id);
if (client_id == '0' || policy_id == '0') {
alert('Please select all values in dropdowns.');
return;
}
if (action == 'dependent_addition') {
if(emp_code.trim() == "")
{
alert('Enter emp code');
return;
}
}
// return;
var queryParams = {
client_id: client_id,
policy_id: policy_id,
branch_id: branch_id,
unit_id: unit_id,
action: action,
emp_code: emp_code,
data: tabledata,
};
$('#loader').show();
var apiURL = '<?php echo base_url(); ?>' + 'employee/test-rack-rate';
console.log('calculatePremium');
// console.log(apiURL);
$.ajax({
url: apiURL,
method: 'POST',
headers: {
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest"
},
data: JSON.stringify(queryParams),
success: function(response) {
console.log(response);
console.log(response.dataStatus);
console.log(response.data);
if (response.code === 200 && response.dataStatus === true && response.data !== "") {
// $("#centermodal").modal('show');
console.log('success');
displayData(response.data);
} else if (response.code === 404 && response.dataStatus === false) {
console.error('no data found', response);
alert(response.messgae);
} else {
console.error('Something went wrong!');
alert('Something went wrong!');
}
},
error: function(xhr, status, error) {
console.error('Error fetching data from API:', error);
}
});
$('#loader').hide();
}
function checkDependentConflict() {
event.preventDefault(); // Prevent default action
let table = document.getElementById('emptable');
let tabledata = getTableDataAsJson(table);
// return;
var client_id = $('#clients').val();
var policy_id = $('#policies').val();
var branch_id = $('#branch_id').val();
console.log(client_id + '-' + policy_id);
if (client_id == '0' || policy_id == '0' || branch_id == '0') {
alert('Please select all values');
return;
}
var queryParams = {
client_id: client_id,
policy_id: policy_id,
branch_id: branch_id,
data: tabledata,
};
$('#loader').show();
var apiURL = '<?php echo base_url(); ?>' + 'employee/test-dependent';
console.log('calculatePremium');
// console.log(apiURL);
$.ajax({
url: apiURL,
method: 'POST',
headers: {
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest"
},
data: JSON.stringify(queryParams),
success: function(response) {
console.log(response);
console.log(response.dataStatus);
console.log(response.data);
if (response.code === 200 && response.dataStatus === true && response.data !== "") {
// $("#centermodal").modal('show');
console.log('success');
displayDependentData(response.data);
} else if (response.code === 404 && response.dataStatus === false) {
console.error('no data found', response);
} else {
console.error('Something went wrong!');
}
},
error: function(xhr, status, error) {
console.error('Error fetching data from API:', error);
}
});
$('#loader').hide();
}
document.getElementById('toggleIcon').addEventListener('click', function() {
var icon = document.getElementById('icon');
icon.classList.toggle('mdi-chevron-down');
icon.classList.toggle('mdi-chevron-up');
});
function displayData(data)
{
displayTable(data.new,"restablebody");
if(data.old.length)
{
$('#oldrestablebody').prop('display','block');
displayTable(data.old,"oldrestablebody");
}
}
function displayTable(data,tableID)
{
var old_data = data.old;
const tableBody = document.getElementById(tableID);
// $(("#".tableID)).empty();
$("#restable tbody").empty();
$('#oldrestable tbody').empty();
const existingRowCount = tableBody.rows.length;
for(i = 0; i < data.length; i++)
{
const newRow = document.createElement("tr");
let newCell;
// SNO with auto-increment
newCell = document.createElement("td");
newCell.textContent = i + 1;
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
// Emp code (assuming you want an input field)
newCell = document.createElement("td");
newCell.innerHTML = data[i]['emp_code'];
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
// newCell.innerHTML = data[i]['name'] ;
newCell.innerHTML = data[i]['name'];
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = data[i]['dob'];
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = data[i]['relationship'];
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = data[i]['temp']['grid_name'];
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = data[i]['temp']['grid_id'];
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = (data[i]['temp']['acting_self'] ? 'Yes' : 'No');
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = (data[i]['temp']['premium_type'] == 1 ? 'S' : 'I');
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = (data[i]['policy_details']['basic_cover_si']);
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = (data[i]['policy_details']['premium']);
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = data[i]['policy_details']['days'];
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = data[i]['policy_details']['no_of_days'];
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = (data[i]['policy_details']['rata_premimum']);
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
newCell = document.createElement("td");
newCell.innerHTML = (data[i]['policy_details']['gst']);
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
tableBody.appendChild(newRow);
}
var myModal = new bootstrap.Modal(document.getElementById('centermodal'), { keyboard: true });
// Show the modal
myModal.show();
}
function displayDependentData(data)
{
const tableBody = document.getElementById("dependenttablebody");
$("#dependenttablebody").empty();
if(!data['result']['status'])
{
for(i = 0; i < data['result']['error_data'].length; i++)
{
const newRow = document.createElement("tr");
let newCell;
// SNO with auto-increment
newCell = document.createElement("td");
newCell.textContent = data['result']['error_data'][i]['col_name'];
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
// Emp code (assuming you want an input field)
newCell = document.createElement("td");
newCell.innerHTML = data['result']['error_data'][i]['msg'];
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
tableBody.appendChild(newRow);
}
}
else
{
const newRow = document.createElement("div");
newRow.innerHTML = '<h2>All Good...!</h2>';
tableBody.appendChild(newRow);
}
var myModal = new bootstrap.Modal(document.getElementById('centermodal2'), { keyboard: true });
// Show the modal
myModal.show();
}
function formatNumberToIndianLocale(value, field_name, action) {
// Check if the value is a valid number (either as a number or as a string)
if (!isNaN(value) && !isNaN(parseFloat(value)) && field_name != 'No of Days') {
// Convert the value to a number and format it using Indian English locale
var return_val = parseFloat(value).toLocaleString('en-IN');
if (field_name == 'Period of non coverage') {
return value + ' days';
}
if (field_name == 'Total Amount') {
return '₹ ' + return_val + ' ( To be Refunded )';
}
if (field_name == 'Total') {
if (action == 'd') {
return '₹ ' + return_val + ' ( To be Refunded )';
} else if (action == 'si') {
return '₹ ' + return_val + ' ( To be paid )';
}
}
return '₹ ' + return_val;
} else {
// Return the original value if it's not a valid number
return value;
}
}
$('.close').click(function() {
$('#table_data').empty();
})
const suggestionBox = document.getElementById("suggestion-box");
const suggestionsList = document.getElementById("suggestions");
function addRowToTable(default_data = false) {
console.log(default_data);
const tableBody = document.getElementById("emptablebody");
const existingRowCount = tableBody.rows.length;
const newRow = document.createElement("tr");
let newCell;
// SNO with auto-increment
newCell = document.createElement("td");
newCell.textContent = existingRowCount + 1;
newCell.contentEditable = "true"; // Make the cell editable (if needed)
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
// Emp code (assuming you want an input field)
newCell = document.createElement("td");
newCell.innerHTML = 'FAM001';
newCell.contentEditable = "true"; // Make the cell editable (if needed)
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
// Name (assuming you want an input field)
newCell = document.createElement("td");
newCell.innerHTML = (default_data != false ? default_data[0] : '');
newCell.contentEditable = "true"; // Make the cell editable (if needed)
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
// **HERE'S WHERE YOU ADD CELLS FOR OTHER COLUMNS**
// DOB (assuming you want a date input field)
newCell = document.createElement("td");
// newCell.innerHTML = '<input type="date" class="form-control">'; // Adjust for your needs
newCell.innerHTML = (default_data != false ? default_data[1] : ''); // Adjust for your needs
newCell.contentEditable = "true"; // Make the cell editable (if needed)
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
// Gender (assuming you want a date input field)
newCell = document.createElement("td");
newCell.innerHTML = (default_data != false ? default_data[2] : ''); // Adjust for your needs
newCell.contentEditable = "true"; // Make the cell editable (if needed)
newCell.style.border = "1px solid";
// newCell.addEventListener("input", handleInput);
newRow.appendChild(newCell);
// relationship (assuming you want a date input field)
newCell = document.createElement("td");
newCell.innerHTML = (default_data != false ? default_data[3] : ''); // Adjust for your needs
newCell.contentEditable = "true"; // Make the cell editable (if needed)
newCell.style.border = "1px solid";
newCell.addEventListener("input", handleInput);
newCell.addEventListener("blur", function(){ hideSuggestions(); });
newRow.appendChild(newCell);
// SI (assuming you want a date input field)
newCell = document.createElement("td");
newCell.innerHTML = (default_data != false ? default_data[4] : ''); // Adjust for your needs
newCell.contentEditable = "true"; // Make the cell editable (if needed)
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
// DOC (assuming you want a date input field)
newCell = document.createElement("td");
newCell.innerHTML = (default_data != false ? default_data[5] : ''); // Adjust for your needs
newCell.contentEditable = "true"; // Make the cell editable (if needed)
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
// BP (assuming you want a date input field)
newCell = document.createElement("td");
newCell.innerHTML = (default_data != false ? default_data[6] : '');
// Adjust for your needs
newCell.contentEditable = "true"; // Make the cell editable (if needed)
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
// band (assuming you want a date input field)
newCell = document.createElement("td");
newCell.innerHTML = (default_data != false ? default_data[7] : ''); // Adjust for your needs
newCell.contentEditable = "true"; // Make the cell editable (if needed)
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
// unit (assuming you want a date input field)
newCell = document.createElement("td");
newCell.innerHTML = (default_data != false ? default_data[8] : ''); // Adjust for your needs
newCell.contentEditable = "true"; // Make the cell editable (if needed)
newCell.style.border = "1px solid";
newRow.appendChild(newCell);
// ... Add remaining cells and content
// Create a checkbox for disabled
newCell = document.createElement("td");
newCell.style.border = "1px solid";
newCell.innerHTML = '<i class="material-icons" onclick="deleteRow(event)">&#xe872;</i>';
const checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.addEventListener("change", function() {
newRow.classList.toggle("disabled");
});
newCell.appendChild(checkBox);
newRow.appendChild(newCell);
tableBody.appendChild(newRow);
}
function deleteRow(button) {
// console.log(button.target.parentElement.parentElement);
// console.log(button.parentNode.parentNode);
const tableBody = document.getElementById("emptablebody");
const rowToDelete = button.target.parentElement.parentElement;
tableBody.removeChild(rowToDelete);
}
let focusedCell;
function handleInput(event) {
focusedCell = event.target;
const inputValue = focusedCell.textContent.trim();
if (inputValue.length > 1) { // Show suggestions only after 2 characters
showSuggestions(inputValue);
} else {
hideSuggestions();
}
}
function showSuggestions(inputValue) {
console.log(inputValue);
const suggestions = ["Self", "Spouse", "Son","Daughter","Father","Mother","Father in law",'Mother in law','M','F']; // Replace with your logic or API call
const filteredSuggestions = suggestions.filter(s => s.toLowerCase().startsWith(inputValue.toLowerCase()));
console.log(filteredSuggestions);
console.log(filteredSuggestions.length);
suggestionsList.innerHTML = ""; // Clear previous suggestions
if(filteredSuggestions.length)
{
suggestionBox.style.display = "block"; // Show the suggestion box
for (const suggestion of filteredSuggestions) {
const listItem = document.createElement("li");
listItem.textContent = suggestion;
listItem.addEventListener("click", function() {
console.log(focusedCell);
if (focusedCell) { // Check if a cell is focused
focusedCell.textContent = suggestion; // Set the selected suggestion in the focused cell
}
hideSuggestions();
});
suggestionsList.appendChild(listItem);
}
// Position the suggestion box near the input field (optional)
const cellRect = focusedCell.parentNode.getBoundingClientRect();
const coords = getMouseCoordinates();
console.log(coords.x);
console.log(coords.y);
suggestionBox.style.left = (coords.x - 100) + "px";
suggestionBox.style.top = (coords.y - 300) + "px";
}
}
function hideSuggestions() {
suggestionBox.style.display = "none";
suggestionsList.innerHTML = ""; // Clear suggestions
}
function getTableDataAsJson(table) {
// let index = {'1' : 'sno','2' : 'emp_code'};
const tableBody = table.querySelector("tbody");
if (!tableBody) {
console.error("Error: Table does not have a tbody element.");
return null;
}
// Get all rows
const rows = tableBody.querySelectorAll("tr");
// Create an empty array to store JSON data
const jsonData = [];
// Loop through each row
for (const row of rows) {
const cells = row.querySelectorAll("td");
const rowData = {}; // Create an object to hold cell data
// Loop through each cell in the row
for (let i = 0; i < cells.length; i++) {
const cellContent = cells[i].textContent.trim();
// You can adjust the property name logic if needed (e.g., use cell index as key)
const isCheckbox = i === 11;
if (isCheckbox) {
rowData[`column${i + 1}`] = cells[i].querySelector("input[type='checkbox']").checked;
} else {
rowData[`column${i + 1}`] = cellContent; // Use descriptive column names (optional)
}
}
// Add the row data object to the JSON array
jsonData.push(rowData);
}
console.log(jsonData);
return jsonData;
}
</script>