467 lines
19 KiB
PHP
467 lines
19 KiB
PHP
<style>
|
|
.table th,
|
|
.table td {
|
|
padding: 8px;
|
|
}
|
|
|
|
table.dataTable tbody td {
|
|
padding: 4px 4px !important;
|
|
}
|
|
|
|
.btn .btn-secondary .buttons-csv .buttons-html5 .my_class {
|
|
position: relative;
|
|
left: 79px;
|
|
}
|
|
|
|
.visa_status_count_view .card-header {
|
|
/* background-color: #eb7a76; */
|
|
background-color: darkgrey;
|
|
/* padding-bottom: 1px; */
|
|
padding-top: 10px;
|
|
}
|
|
|
|
#tickets-table_filter {
|
|
float: right;
|
|
}
|
|
|
|
.click_hover {
|
|
background: #1aa79c !important;
|
|
color: #fff !important;
|
|
border-radius: 5px;
|
|
box-shadow: 6px 5px 8px 0 #00000036;
|
|
cursor: pointer;
|
|
}
|
|
.click_hover .text-muted{
|
|
color: #fff !important;
|
|
}
|
|
.click_hover span{
|
|
color: #fff !important;
|
|
}
|
|
.card {
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
|
|
<div class="row visa_status_count_view">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row">
|
|
<div class="col-3">
|
|
<div id="categoryFilter" style="display: flex;">
|
|
<select class="form-control" id="clients" onchange="populateBranches()">
|
|
<option value="0">Select Client</option>
|
|
<?php foreach ($client_list as $client) { ?>
|
|
<option value="<?= $client['id'] ?>"><?= $client['client_name'] ?></option>
|
|
<?php } ?>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<div id="categoryFilter_11">
|
|
<select name="branch_id" class="form-control" id="branch_id">
|
|
<option value="0">Select Branch</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<div id="categoryFilter_11">
|
|
<a href="#" class="btn btn-primary waves-effect waves-light" id="get-emp-list" onclick="fetchEmpolyeeList(event);">Search</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-3 text-right view-status-btn">
|
|
|
|
<button type="button" class="btn btn-link visa_status_button" onclick="toggleContent()">
|
|
Status <i id="toggleIcon" class="fas fa-minus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body status-option" id="statusContent" style="padding: 0.5rem !important;background-color: darkgrey;">
|
|
<div class="text-center">
|
|
<div class="row" style="margin-right: -261px;margin-left: 5px;">
|
|
<div class="col-xl-2 col-md-3">
|
|
<div class="card">
|
|
<div class="card-body" id="emp_count_view_click">
|
|
<div class="d-flex justify-content-between" style="justify-content: center !important;">
|
|
<div>
|
|
<h5 class="text-muted font-weight-normal mt-0 text-truncate" title="Emp Count">Emp Count</h5>
|
|
<h3 class="my-2 py-1"><span data-plugin="counterup" id="emp_count_view">0</span></h3>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
<div class="col-xl-2 col-md-3">
|
|
<div class="card">
|
|
<div class="card-body" id="emp_enrolled_view_click">
|
|
<div class="d-flex justify-content-between" style="justify-content: center !important;">
|
|
<div>
|
|
<h5 class="text-muted font-weight-normal mt-0 text-truncate" title="Enrolled">Enrolled</h5>
|
|
<h3 class="my-2 py-1"><span data-plugin="counterup" id="emp_enrolled_view">0</span></h3>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
<div class="col-xl-2 col-md-3">
|
|
<div class="card">
|
|
<div class="card-body" id="emp_not_enrolled_view_click">
|
|
<div class="d-flex justify-content-between" style="justify-content: center !important;">
|
|
<div>
|
|
<h5 class="text-muted font-weight-normal mt-0 text-truncate" title="Not Enrolled">Not Enrolled</h5>
|
|
<h3 class="my-2 py-1"><span data-plugin="counterup" id="emp_not_enrolled_view">0</span></h3>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
<div class="col-xl-2 col-md-3">
|
|
<div class="card">
|
|
<div class="card-body" id="emp_logged_in_view_click">
|
|
<div class="d-flex justify-content-between" style="justify-content: center !important;">
|
|
<div>
|
|
<h5 class="text-muted font-weight-normal mt-0 text-truncate" title="Logged-In">Logged-In</h5>
|
|
<h3 class="my-2 py-1"><span data-plugin="counterup" id="emp_logged_in_view">0</span></h3>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
<div class="col-xl-2 col-md-3">
|
|
<div class="card">
|
|
<div class="card-body" id="emp_not_logged_in_view_click">
|
|
<div class="d-flex justify-content-between" style="justify-content: center !important;">
|
|
<div>
|
|
<h5 class="text-muted font-weight-normal mt-0 text-truncate" title="Not Logged-In">Not Logged-In</h5>
|
|
<h3 class="my-2 py-1"><span data-plugin="counterup" id="emp_not_logged_in_view">0</span></h3>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="client_list">
|
|
<div class="col-12">
|
|
<div class="card" style="">
|
|
<div class="card-body">
|
|
<table class="table table-hover m-0 table-centered dt-responsive w-100" cellspacing="0" id="tickets-table">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th class="font-weight-medium">SNO</th>
|
|
<th class="font-weight-medium">Name</th>
|
|
<th class="font-weight-medium">Emp Code</th>
|
|
<th class="font-weight-medium">Enrolled</th>
|
|
<th class="font-weight-medium">Logged-In</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="font-12">
|
|
<!-- Table body -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center modal content omitted for brevity -->
|
|
|
|
<script>
|
|
function populateBranches() {
|
|
var clientId = document.getElementById('clients').value;
|
|
var branchDropdown = document.getElementById('branch_id');
|
|
|
|
branchDropdown.innerHTML = '<option value="0">Select Branch</option>';
|
|
|
|
if (clientId == 0) {
|
|
return;
|
|
}
|
|
|
|
var branches = <?= json_encode($branch_list) ?>;
|
|
|
|
branches.forEach(branch => {
|
|
if (branch.client_id == clientId) {
|
|
var option = document.createElement('option');
|
|
option.value = branch.id;
|
|
option.textContent = branch.branch_name;
|
|
branchDropdown.appendChild(option);
|
|
}
|
|
});
|
|
}
|
|
|
|
function filterTable(columnIndex, filterValue) {
|
|
var table = $('#tickets-table').DataTable();
|
|
|
|
// Reset the search filter for all columns
|
|
table.columns().search('').draw();
|
|
|
|
// Apply the filter to the specified column
|
|
table.column(columnIndex).search(filterValue).draw();
|
|
}
|
|
function fetchEmpolyeeList(event) {
|
|
event.preventDefault();
|
|
|
|
var client_id = $('#clients').val();
|
|
var branch_id = $('#branch_id').val();
|
|
if (client_id == '0' || branch_id == '0') {
|
|
alert('Please select values in both dropdowns.');
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '<?php echo base_url(); ?>' + '/employee/empby_client_clientbranch/' + client_id + '/' + branch_id,
|
|
method: 'GET',
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-Requested-With": "XMLHttpRequest"
|
|
},
|
|
success: function(response) {
|
|
var data = JSON.parse(response);
|
|
console.log(data);
|
|
var table = $('#tickets-table').DataTable();
|
|
table.clear();
|
|
|
|
if (data.length === 0) {
|
|
table.row.add([
|
|
'',
|
|
'',
|
|
'No data available',
|
|
'',
|
|
'',
|
|
''
|
|
]).draw();
|
|
return;
|
|
}
|
|
var enrolled_count = 0;
|
|
var loggedIn_count = 0;
|
|
data.forEach(function(employee, index) {
|
|
|
|
if(employee.emp_status !== 'draft'){
|
|
var enrolled = 'Yes';
|
|
enrolled_count++;
|
|
}else{
|
|
var enrolled = 'No';
|
|
}
|
|
|
|
if(employee.user_type === 'employee'){
|
|
var loggedIn = 'Yes';
|
|
loggedIn_count++;
|
|
}else{
|
|
var loggedIn = 'No';
|
|
}
|
|
|
|
table.row.add([
|
|
index + 1,
|
|
employee.employee_name,
|
|
employee.emp_code,
|
|
enrolled,
|
|
loggedIn
|
|
]);
|
|
|
|
$('#emp_count_view').html(data.length);
|
|
$('#emp_enrolled_view').html(enrolled_count);
|
|
$('#emp_not_enrolled_view').html(data.length - enrolled_count);
|
|
$('#emp_logged_in_view').html(loggedIn_count);
|
|
$('#emp_not_logged_in_view').html(data.length - loggedIn_count);
|
|
|
|
});
|
|
|
|
table.draw();
|
|
|
|
function getUrlParameter(name) {
|
|
var params = new URLSearchParams(window.location.search);
|
|
return params.get(name);
|
|
}
|
|
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('Error fetching data from API:', error);
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
|
|
function getUrlParameter(name) {
|
|
var params = new URLSearchParams(window.location.search);
|
|
return params.get(name);
|
|
}
|
|
|
|
// Check for URL parameters and set form values
|
|
var client_id = getUrlParameter('client_id');
|
|
var branch_id = getUrlParameter('branch_id');
|
|
var type = getUrlParameter('type');
|
|
|
|
if (client_id) {
|
|
$('#clients').val(client_id).trigger('change'); // Set client ID and trigger change event to populate branches
|
|
}
|
|
|
|
if (branch_id) {
|
|
setTimeout(function() { // Ensure branches are populated before setting branch ID
|
|
$('#branch_id').val(branch_id).trigger('change');
|
|
if($('#branch_id').val() != 0){
|
|
$('#get-emp-list').click().trigger();
|
|
|
|
|
|
}
|
|
}, 500);
|
|
|
|
}
|
|
if (history.pushState) {
|
|
var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
|
|
window.history.pushState({path: newUrl}, '', newUrl);
|
|
}
|
|
|
|
setTimeout(() => {
|
|
// var type = getUrlParameter('type');
|
|
console.log("------------------------");
|
|
console.log(type);
|
|
$('#' + type).click().trigger();
|
|
}, 1000);
|
|
|
|
$('#clients').select2();
|
|
$('#branch_id').select2();
|
|
var table = $('#tickets-table').DataTable({
|
|
dom: 'fBrtip',
|
|
buttons: [
|
|
{
|
|
extend: 'copy',
|
|
text: '<i class="fa fa-copy"></i>',
|
|
titleAttr: 'Copy',
|
|
filename: 'Enrollment List'
|
|
},
|
|
{
|
|
extend: 'print',
|
|
text: '<i class="fa fa-print"></i>',
|
|
titleAttr: 'Print',
|
|
filename: 'Enrollment List'
|
|
},
|
|
{
|
|
extend: 'pdf',
|
|
text: '<i class="fa fa-file-pdf"></i>',
|
|
titleAttr: 'PDF',
|
|
filename: 'Enrollment List'
|
|
},
|
|
{
|
|
extend: 'csv',
|
|
text: '<i class="fa fa-file-csv"></i>',
|
|
titleAttr: 'CSV',
|
|
filename: 'Enrollment List'
|
|
}
|
|
],
|
|
initComplete: function() {
|
|
// Add custom class to the print button
|
|
$('.buttons-print').addClass('buttons-html5');
|
|
}
|
|
});
|
|
|
|
|
|
$('#emp_enrolled_view_click').on('click', function() {
|
|
if ($(this).hasClass('click_hover')) {
|
|
// $(this).removeClass('click_hover');
|
|
$('.click_hover').each(function() {
|
|
$(this).removeClass('click_hover');
|
|
});
|
|
table.columns().search('').draw(); // Clear all filters and show all data
|
|
}else{
|
|
$('.click_hover').each(function() {
|
|
$(this).removeClass('click_hover');
|
|
});
|
|
$('#emp_enrolled_view_click').addClass('click_hover');
|
|
filterTable(3, 'Yes'); // Filter "Enrolled" column (4th column, index 3)
|
|
}
|
|
});
|
|
|
|
$('#emp_not_enrolled_view_click').on('click', function() {
|
|
if ($(this).hasClass('click_hover')) {
|
|
// $(this).removeClass('click_hover');
|
|
$('.click_hover').each(function() {
|
|
$(this).removeClass('click_hover');
|
|
});
|
|
table.columns().search('').draw(); // Clear all filters and show all data
|
|
}else{
|
|
$('.click_hover').each(function() {
|
|
$(this).removeClass('click_hover');
|
|
});
|
|
$('#emp_not_enrolled_view_click').addClass('click_hover');
|
|
filterTable(3, 'No'); // Filter "Enrolled" column (4th column, index 3)
|
|
}
|
|
});
|
|
|
|
$('#emp_logged_in_view_click').on('click', function() {
|
|
if ($(this).hasClass('click_hover')) {
|
|
// $(this).removeClass('click_hover');
|
|
$('.click_hover').each(function() {
|
|
$(this).removeClass('click_hover');
|
|
});
|
|
table.columns().search('').draw(); // Clear all filters and show all data
|
|
}else{
|
|
$('.click_hover').each(function() {
|
|
$(this).removeClass('click_hover');
|
|
});
|
|
$('#emp_logged_in_view_click').addClass('click_hover');
|
|
filterTable(4, 'Yes'); // Filter "Logged-In" column (5th column, index 4)
|
|
}
|
|
});
|
|
|
|
$('#emp_not_logged_in_view_click').on('click', function() {
|
|
if ($(this).hasClass('click_hover')) {
|
|
// $(this).removeClass('click_hover');
|
|
$('.click_hover').each(function() {
|
|
$(this).removeClass('click_hover');
|
|
});
|
|
table.columns().search('').draw(); // Clear all filters and show all data
|
|
}else{
|
|
$('.click_hover').each(function() {
|
|
$(this).removeClass('click_hover');
|
|
});
|
|
$('#emp_not_logged_in_view_click').addClass('click_hover');
|
|
filterTable(4, 'No'); // Filter "Logged-In" column (5th column, index 4)
|
|
}
|
|
});
|
|
|
|
$('#emp_count_view_click').on('click', function() {
|
|
if ($(this).hasClass('click_hover')) {
|
|
// $(this).removeClass('click_hover');
|
|
$('.click_hover').each(function() {
|
|
$(this).removeClass('click_hover');
|
|
});
|
|
table.columns().search('').draw(); // Clear all filters and show all data
|
|
}else{
|
|
$('.click_hover').each(function() {
|
|
$(this).removeClass('click_hover');
|
|
});
|
|
$('#emp_count_view_click').addClass('click_hover');
|
|
table.columns().search('').draw(); // Clear all filters and show all data
|
|
}
|
|
});
|
|
|
|
toggleContent();
|
|
});
|
|
|
|
function toggleContent() {
|
|
var content = document.getElementById("statusContent");
|
|
var toggleIcon = document.getElementById("toggleIcon");
|
|
if (content.style.display === "none") {
|
|
content.style.display = "block";
|
|
toggleIcon.classList.remove("fa-plus");
|
|
toggleIcon.classList.add("fa-minus");
|
|
} else {
|
|
content.style.display = "none";
|
|
toggleIcon.classList.remove("fa-minus");
|
|
toggleIcon.classList.add("fa-plus");
|
|
}
|
|
}
|
|
</script>
|