554 lines
36 KiB
PHP
Executable File
554 lines
36 KiB
PHP
Executable File
|
|
<div class="tab-pane fade" id="enrollment-dash-tab">
|
|
<div class="row visa_status_count_view">
|
|
<div class="col-12">
|
|
<div class="card" style="border: 0px;height: 470px;">
|
|
<div class="card-body status-option" id="statusContent" style="padding: 0.5rem !important;background-color: white;">
|
|
<!-- Search Input Field -->
|
|
<div class="row">
|
|
<div class="col-3">
|
|
<select class="form-control" name="" id="enrollment_status_open_close">
|
|
<option value="open">Open Enrolment</option>
|
|
<option value="close">Closed Enrolment</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-5"></div>
|
|
<div class="col-4">
|
|
<input type="text" id="searchInput" class="search-input" placeholder="Search by client or branch">
|
|
</div>
|
|
</div>
|
|
<!-- Carousel Structure -->
|
|
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
|
|
<div class="carousel-inner">
|
|
<?php
|
|
$itemsPerSlide = 3; // Number of items per slide
|
|
$currentItem = 0; // Counter for items
|
|
$isActive = true; // Variable to set the first item as active
|
|
foreach ($client_branch_emp_list as $clients) {
|
|
foreach ($clients['branches'] as $branches) {
|
|
// Start a new carousel item if needed
|
|
if ($currentItem % $itemsPerSlide == 0) {
|
|
if (!$isActive) echo '</div>'; // Close previous carousel item
|
|
echo '<div class="carousel-item' . ($isActive ? ' active' : '') . '">';
|
|
$isActive = false;
|
|
}
|
|
if(count($branches['client_policies']) != 0){ ?>
|
|
<!-- New Card Layout for each item -->
|
|
<div class="col-xl-3 col-md-6 d-inline-block scroll-item carousel-slide-item" data-client="<?php echo $clients['short_name']; ?>" data-branch="<?php echo $branches['branch_name']; ?>">
|
|
<div class="card" style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
|
|
<div class="card-header add_card_background_random" >
|
|
<div class="row">
|
|
<div class="col-8 emp-count-view-click" >
|
|
<div class="d-flex justify-content-between">
|
|
<div class="w-100 " >
|
|
<h3 class="my-2 py-1" ><span data-plugin="counterup" style="font-size: 2.0rem;background-color: white;border-radius: 6px;height: 30;padding: 4px 11px 4px 11px;" onclick="enrollment_list(this, 'emp_count_view_click')"><?php echo isset($branches['employees']) ? count($branches['employees']) : '0'; ?></span></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 emp-count-view-click" >
|
|
<div class="d-flex justify-content-between">
|
|
<div class="w-100" >
|
|
<h5 class="mt-0 text-truncate" title="Branch Info" style="font-weight: 400 !important;font-size: 20px !important;line-height: 36px;color: black !important;"><?php echo isset($clients['short_name']) ? $clients['short_name'] : 'N/A'; ?> - <?php echo isset($branches['branch_name']) ? $branches['branch_name'] : 'N/A'; ?></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-3 center_text emp-count-view-click" >
|
|
<div class="d-flex justify-content-between">
|
|
<div class="w-100 text-center" >
|
|
<p class="mb-0 text-muted">
|
|
<span class="text-success mr-2"></span>
|
|
<span class="text-nowrap">Emp Count</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="card-body" >
|
|
<input type="text" class="client_id" value="<?php echo $clients['client_id']; ?>" hidden>
|
|
<input type="text" class="client_branch_id" value="<?php echo $branches['client_branch_id'] ?>" hidden>
|
|
<div class="row emp-status" style="margin-top: -9px;">
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_logged_in_view_click')"><?php echo isset($branches['emp_login']) ? $branches['emp_login'] : '0'; ?></span><br>
|
|
<span class="text-nowrap " style="color: currentColor;font-size: 15px;">Logged-In</span>
|
|
</div>
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_not_logged_in_view_click')"><?php echo isset($branches['emp_login']) ? count($branches['employees']) - $branches['emp_login'] : '0'; ?></span><br>
|
|
<span class="text-nowrap" style="color: currentColor;font-size: 15px;margin-left: -13px;">Not Logged-In</span>
|
|
</div>
|
|
</div>
|
|
<div class="row emp-status" style="margin-top: 5px;">
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_not_enrolled_view_click')"><?php echo isset($branches['emp_enroll']) ? count($branches['employees']) - $branches['emp_enroll'] : '0'; ?></span><br>
|
|
<span class="text-nowrap" style="color: currentColor;font-size: 15px;">Draft</span>
|
|
</div>
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_enrolled_view_click')"><?php echo isset($branches['emp_enroll']) ? $branches['emp_enroll'] : '0'; ?></span><br>
|
|
<span class="text-nowrap" style="color: currentColor;font-size: 15px;">Enrolled</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
$currentItem++;
|
|
}
|
|
}
|
|
}
|
|
|
|
if ($currentItem % $itemsPerSlide != 0) echo '</div>'; // Close the last carousel item
|
|
?>
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" style="width: 28px;"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg> <!-- <img src="<?php echo base_url()?>public/assets/images/left_arrow.png" alt="<"> -->
|
|
<!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> -->
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" style="width: 28px;"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
|
|
<!-- <span class="carousel-control-next-icon" aria-hidden="true"></span> -->
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
var lastDirection = ''; // Variable to keep track of the last direction
|
|
|
|
// Scroll functionality
|
|
$('.scroll-container').on('wheel', function(e) {
|
|
if (e.originalEvent.deltaY < 0) {
|
|
this.scrollLeft -= 100; // Adjust scroll speed
|
|
} else {
|
|
this.scrollLeft += 100; // Adjust scroll speed
|
|
}
|
|
e.preventDefault();
|
|
});
|
|
|
|
// Search functionality
|
|
$('#searchInput').on('input', function() {
|
|
var searchValue = $(this).val().toLowerCase();
|
|
var firstVisibleItem = null;
|
|
|
|
$('.scroll-item').each(function() {
|
|
var itemText = $(this).find('h5').text().toLowerCase();
|
|
|
|
if (itemText.indexOf(searchValue) > -1) {
|
|
$(this).removeClass('hide-item').addClass('show-item'); // Show item
|
|
|
|
if (!firstVisibleItem) {
|
|
firstVisibleItem = $(this);
|
|
}
|
|
} else {
|
|
$(this).removeClass('show-item').addClass('hide-item'); // Hide item
|
|
}
|
|
});
|
|
|
|
if (firstVisibleItem) {
|
|
// Remove active class from all carousel items
|
|
$('.carousel-item').removeClass('active');
|
|
|
|
// Add active class to the parent carousel item of the first visible item
|
|
firstVisibleItem.closest('.carousel-item').addClass('active');
|
|
|
|
// Scroll to the first visible item
|
|
$('html, body').animate({
|
|
scrollTop: firstVisibleItem.offset().top
|
|
}, 500);
|
|
}
|
|
});
|
|
|
|
function navigateCarousel(direction) {
|
|
lastDirection = direction; // Track the direction
|
|
var $carousel = $('#carouselExampleControls');
|
|
var $activeItem = $carousel.find('.carousel-item.active');
|
|
|
|
if (direction === 'next') {
|
|
if ($activeItem.find('.scroll-item').length === 0) {
|
|
$carousel.carousel('next');
|
|
setTimeout(checkEmptyCarouselItem, 100); // Check after slide transition
|
|
} else {
|
|
$carousel.carousel('next');
|
|
}
|
|
} else if (direction === 'prev') {
|
|
if ($activeItem.find('.scroll-item').length === 0) {
|
|
$carousel.carousel('prev');
|
|
setTimeout(checkEmptyCarouselItem, 100); // Check after slide transition
|
|
} else {
|
|
$carousel.carousel('prev');
|
|
}
|
|
}
|
|
}
|
|
|
|
function checkEmptyCarouselItem() {
|
|
var $carousel = $('#carouselExampleControls');
|
|
var $activeItem = $carousel.find('.carousel-item.active');
|
|
|
|
// Check if the active item is empty
|
|
if ($activeItem.find('.scroll-item').length === 0) {
|
|
// If empty, move to the next item
|
|
$carousel.carousel(lastDirection === 'next' ? 'next' : 'prev');
|
|
}
|
|
}
|
|
|
|
// Attach click handlers to carousel controls
|
|
$('.carousel-control-next').on('click', function() {
|
|
navigateCarousel('next');
|
|
$('.carousel-item').each(function(index, element) {
|
|
if ($.trim($(element).html()) === '') {
|
|
$(element).remove();
|
|
}
|
|
});
|
|
});
|
|
|
|
$('.carousel-control-prev').on('click', function() {
|
|
navigateCarousel('prev');
|
|
$('.carousel-item').each(function(index, element) {
|
|
if ($.trim($(element).html()) === '') {
|
|
$(element).remove();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Check the carousel item when the slide changes
|
|
$('#carouselExampleControls').on('slid.bs.carousel', function() {
|
|
checkEmptyCarouselItem();
|
|
});
|
|
|
|
// Initial check for empty carousel items
|
|
checkEmptyCarouselItem();
|
|
});
|
|
|
|
|
|
function enrollment_list(current_element, type) {
|
|
var clientId = $(current_element).closest('.carousel-slide-item').find('.client_id').val();
|
|
var branchId = $(current_element).closest('.carousel-slide-item').find('.client_branch_id').val();
|
|
|
|
var baseUrl = '<?php echo base_url(); ?>'; // Adjust this to your actual base URL if needed
|
|
var url = baseUrl + 'employee/enrollment-list'; // Change this to the actual URL of your enroller_list page
|
|
|
|
var params = new URLSearchParams({
|
|
client_id: clientId,
|
|
branch_id: branchId,
|
|
type: type
|
|
});
|
|
|
|
// Redirect to the constructed URL with parameters
|
|
window.location.href = `${url}?${params.toString()}`;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$('#enrollment_status_open_close').change(function () {
|
|
if ($(this).val() === 'open') {
|
|
var enrollment_data = '<?php echo addslashes($_SESSION['enrollment_data']); ?>';
|
|
try {
|
|
// Parse JSON data
|
|
var data = JSON.parse(enrollment_data);
|
|
console.log('Parsed data:', data);
|
|
|
|
// Ensure data is an object and client_branch_emp_list is treated as an array
|
|
if (data && typeof data === 'object') {
|
|
if (Array.isArray(data.client_branch_emp_list)) {
|
|
console.log('client_branch_emp_list:', data.client_branch_emp_list);
|
|
updateCarouselWithData(data, 1);
|
|
} else {
|
|
// Convert client_branch_emp_list to an array if it's not already
|
|
if (data.client_branch_emp_list && typeof data.client_branch_emp_list === 'object') {
|
|
// If it's an object but not an array, wrap it in an array
|
|
data.client_branch_emp_list = [data.client_branch_emp_list];
|
|
} else {
|
|
// Handle the case where it's neither an array nor an object
|
|
console.error('client_branch_emp_list is not an array or object:', data.client_branch_emp_list);
|
|
data.client_branch_emp_list = []; // Ensure it is at least an empty array
|
|
}
|
|
|
|
console.log('Converted client_branch_emp_list:', data.client_branch_emp_list);
|
|
updateCarouselWithData(data, 1);
|
|
}
|
|
} else {
|
|
console.error('Parsed data is not an object:', data);
|
|
}
|
|
} catch (e) {
|
|
console.error('Error parsing JSON:', e);
|
|
}
|
|
} else {
|
|
// Fetch the session data from PHP
|
|
var enrollment_data = '<?php echo addslashes($_SESSION['enrollment_data']); ?>';
|
|
try {
|
|
// Parse JSON data
|
|
var data = JSON.parse(enrollment_data);
|
|
console.log('Parsed data:', data);
|
|
|
|
// Ensure data is an object and client_branch_emp_list is treated as an array
|
|
if (data && typeof data === 'object') {
|
|
if (Array.isArray(data.client_branch_emp_list)) {
|
|
console.log('client_branch_emp_list:', data.client_branch_emp_list);
|
|
updateCarouselWithData(data, 2);
|
|
} else {
|
|
// Convert client_branch_emp_list to an array if it's not already
|
|
if (data.client_branch_emp_list && typeof data.client_branch_emp_list === 'object') {
|
|
// If it's an object but not an array, wrap it in an array
|
|
data.client_branch_emp_list = [data.client_branch_emp_list];
|
|
} else {
|
|
// Handle the case where it's neither an array nor an object
|
|
console.error('client_branch_emp_list is not an array or object:', data.client_branch_emp_list);
|
|
data.client_branch_emp_list = []; // Ensure it is at least an empty array
|
|
}
|
|
|
|
console.log('Converted client_branch_emp_list:', data.client_branch_emp_list);
|
|
updateCarouselWithData(data, 2);
|
|
}
|
|
} else {
|
|
console.error('Parsed data is not an object:', data);
|
|
}
|
|
} catch (e) {
|
|
console.error('Error parsing JSON:', e);
|
|
}
|
|
}
|
|
});
|
|
|
|
function updateCarouselWithData(data, open_close) {
|
|
var itemsPerSlide = 3; // Number of items per slide
|
|
var currentItem = 0; // Counter for items
|
|
var isActive = true; // Variable to set the first item as active
|
|
var carouselInner = $('.carousel-inner');
|
|
|
|
// Clear existing carousel items
|
|
carouselInner.empty();
|
|
|
|
// Check if data.client_branch_emp_list is valid
|
|
if (Array.isArray(data.client_branch_emp_list) && data.client_branch_emp_list.length > 0) {
|
|
console.log("Processing array...");
|
|
// Handle the case where data.client_branch_emp_list is an array
|
|
var items = data.client_branch_emp_list[0];
|
|
console.log("Items data:", items);
|
|
|
|
// Convert items object to an array
|
|
var client_list = Object.values(items);
|
|
|
|
// Validate if client_list is an array
|
|
if (Array.isArray(client_list)) {
|
|
console.log(client_list);
|
|
for (var i = 0; i < client_list.length; i++) {
|
|
var client = client_list[i];
|
|
// console.log(item.branches);
|
|
var branch_list = client.branches;
|
|
for (var j = 0; j < branch_list.length; j++) {
|
|
var branch = branch_list[j];
|
|
console.log(branch);
|
|
|
|
if(open_close == 1){
|
|
if(branch.client_policies.length > 0){
|
|
if (currentItem % itemsPerSlide === 0) {
|
|
if (!isActive) carouselInner.append('</div>'); // Close previous carousel item
|
|
carouselInner.append('<div class="carousel-item' + (isActive ? ' active' : '') + '">');
|
|
isActive = false;
|
|
}
|
|
// Generate HTML for each item
|
|
var itemHtml = `
|
|
<div class="col-xl-3 col-md-6 d-inline-block scroll-item carousel-slide-item" data-client="${client.short_name}" data-branch="${branch.branch_name }">
|
|
<div class="card" style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
|
|
<div class="card-header add_card_background_random" >
|
|
<div class="row">
|
|
<div class="col-8 emp-count-view-click" >
|
|
<div class="d-flex justify-content-between">
|
|
<div class="w-100 " >
|
|
<h3 class="my-2 py-1" ><span data-plugin="counterup" style="font-size: 2.0rem;background-color: white;border-radius: 6px;height: 30;padding: 4px 11px 4px 11px;" onclick="enrollment_list(this, 'emp_count_view_click')">${branch.employees.length}</span></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 emp-count-view-click" >
|
|
<div class="d-flex justify-content-between">
|
|
<div class="w-100" >
|
|
<h5 class="mt-0 text-truncate" title="Branch Info" style="font-weight: 400 !important;font-size: 20px !important;line-height: 36px;color: black !important;">${client.short_name} - ${branch.branch_name} </h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-3 center_text emp-count-view-click" >
|
|
<div class="d-flex justify-content-between">
|
|
<div class="w-100 text-center" >
|
|
<p class="mb-0 text-muted">
|
|
<span class="text-success mr-2"></span>
|
|
<span class="text-nowrap">Emp Count</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="card-body" >
|
|
<input type="text" class="client_id" value="${client.client_id}" hidden>
|
|
<input type="text" class="client_branch_id" value="${branch.client_branch_id}" hidden>
|
|
<div class="row emp-status" style="margin-top: -9px;">
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_logged_in_view_click')">${branch.emp_login}</span><br>
|
|
<span class="text-nowrap " style="color: currentColor;font-size: 15px;">Logged-In</span>
|
|
</div>
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_not_logged_in_view_click')"> ${branch.employees.length - (branch.emp_login || 0)}</span><br>
|
|
<span class="text-nowrap" style="color: currentColor;font-size: 15px;margin-left: -13px;">Not Logged-In</span>
|
|
</div>
|
|
</div>
|
|
<div class="row emp-status" style="margin-top: 5px;">
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_not_enrolled_view_click')">${branch.employees.length - (branch.emp_enroll || 0)}</span><br>
|
|
<span class="text-nowrap" style="color: currentColor;font-size: 15px;">Draft</span>
|
|
</div>
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_enrolled_view_click')">${(branch.emp_enroll || 0)}</span><br>
|
|
<span class="text-nowrap" style="color: currentColor;font-size: 15px;">Enrolled</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
carouselInner.find('.carousel-item').last().append(itemHtml);
|
|
currentItem++;
|
|
}
|
|
}else{
|
|
if(branch.client_policies.length == 0){
|
|
if (currentItem % itemsPerSlide === 0) {
|
|
if (!isActive) carouselInner.append('</div>'); // Close previous carousel item
|
|
carouselInner.append('<div class="carousel-item' + (isActive ? ' active' : '') + '">');
|
|
isActive = false;
|
|
}
|
|
// Generate HTML for each item
|
|
var itemHtml = `
|
|
<div class="col-xl-3 col-md-6 d-inline-block scroll-item carousel-slide-item" data-client="${client.short_name}" data-branch="${branch.branch_name }">
|
|
<div class="card" style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
|
|
<div class="card-header add_card_background_random" >
|
|
<div class="row">
|
|
<div class="col-8 emp-count-view-click" >
|
|
<div class="d-flex justify-content-between">
|
|
<div class="w-100 " >
|
|
<h3 class="my-2 py-1" ><span data-plugin="counterup" style="font-size: 2.0rem;background-color: white;border-radius: 6px;height: 30;padding: 4px 11px 4px 11px;" onclick="enrollment_list(this, 'emp_count_view_click')">${branch.employees.length}</span></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 emp-count-view-click" >
|
|
<div class="d-flex justify-content-between">
|
|
<div class="w-100" >
|
|
<h5 class="mt-0 text-truncate" title="Branch Info" style="font-weight: 400 !important;font-size: 20px !important;line-height: 36px;color: black !important;">${client.short_name} - ${branch.branch_name} </h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-3 center_text emp-count-view-click" >
|
|
<div class="d-flex justify-content-between">
|
|
<div class="w-100 text-center" >
|
|
<p class="mb-0 text-muted">
|
|
<span class="text-success mr-2"></span>
|
|
<span class="text-nowrap">Emp Count</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="card-body" >
|
|
<input type="text" class="client_id" value="${client.client_id}" hidden>
|
|
<input type="text" class="client_branch_id" value="${branch.client_branch_id}" hidden>
|
|
<div class="row emp-status" style="margin-top: -9px;">
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_logged_in_view_click')">${branch.emp_login}</span><br>
|
|
<span class="text-nowrap " style="color: currentColor;font-size: 15px;">Logged-In</span>
|
|
</div>
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_not_logged_in_view_click')"> ${branch.employees.length - (branch.emp_login || 0)}</span><br>
|
|
<span class="text-nowrap" style="color: currentColor;font-size: 15px;margin-left: -13px;">Not Logged-In</span>
|
|
</div>
|
|
</div>
|
|
<div class="row emp-status" style="margin-top: 5px;">
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_not_enrolled_view_click')">${branch.employees.length - (branch.emp_enroll || 0)}</span><br>
|
|
<span class="text-nowrap" style="color: currentColor;font-size: 15px;">Draft</span>
|
|
</div>
|
|
<div class="col-6 emp-count-view-click" >
|
|
<span style="font-size: large;color: black !important;" class="number_css" onclick="enrollment_list(this, 'emp_enrolled_view_click')">${(branch.emp_enroll || 0)}</span><br>
|
|
<span class="text-nowrap" style="color: currentColor;font-size: 15px;">Enrolled</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
carouselInner.find('.carousel-item').last().append(itemHtml);
|
|
currentItem++;
|
|
}
|
|
}
|
|
}
|
|
// Create a new carousel item every `itemsPerSlide` items
|
|
|
|
}
|
|
|
|
// Close the last carousel item if it was opened
|
|
if (currentItem % itemsPerSlide !== 0) carouselInner.append('</div>');
|
|
} else {
|
|
console.error('Expected an array for items, but got:', client_list);
|
|
}
|
|
} else if (typeof data.client_branch_emp_list === 'object') {
|
|
console.error('client_branch_emp_list is an object, not an array:', data.client_branch_emp_list);
|
|
} else {
|
|
console.error('client_branch_emp_list is missing or not in the expected format:', data.client_branch_emp_list);
|
|
}
|
|
random_color_set();
|
|
|
|
// Initialize or refresh carousel if needed
|
|
$('#carouselExampleControls').carousel('dispose').carousel();
|
|
}
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
random_color_set();
|
|
});
|
|
|
|
function remove_empty_carousel() {
|
|
|
|
}
|
|
|
|
function random_color_set() {
|
|
// Array of predefined colors
|
|
var colors = ['#EBE8FF', '#FFECE5', '#FFE8F5'];
|
|
// '#6ADBE3'
|
|
// Array of predefined background images
|
|
var images = [
|
|
'/public/assets/images/mask_group.png',
|
|
'/public/assets/images/mask_group_orange.png',
|
|
'/public/assets/images/mask_group_pink.png',
|
|
];
|
|
// '/public/assets/images/mask_group_blue.png'
|
|
|
|
// Counter to keep track of the current index
|
|
var index = 0;
|
|
|
|
// Base URL for the images
|
|
var baseUrl = '<?php echo base_url() ?>';
|
|
|
|
// Apply a color and image from the arrays to each card-header in sequence
|
|
document.querySelectorAll('.add_card_background_random').forEach(function(header) {
|
|
header.style.backgroundColor = colors[index % colors.length];
|
|
header.style.backgroundImage = `url(${baseUrl + images[index % images.length]})`;
|
|
header.style.backgroundSize = 'cover'; // Ensure the image covers the entire div
|
|
header.style.backgroundPosition = 'center'; // Center the image within the div
|
|
index++;
|
|
});
|
|
}
|
|
|
|
</script>
|