573 lines
36 KiB
PHP
Executable File
573 lines
36 KiB
PHP
Executable File
<div class="tab-pane active show" id="pending-actions-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" style="width:200px">
|
|
<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" style="width:200px;margin-left:150px;"
|
|
placeholder="Search by client or branch">
|
|
</div>
|
|
</div>
|
|
<!-- Carousel Structure -->
|
|
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false" style="height:30vh; width:90vw;">
|
|
<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) {
|
|
|
|
// 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;
|
|
}
|
|
?>
|
|
<!-- 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 $clients['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($clients['total_employees']) ? $clients['total_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($clients['branch_name']) ? $clients['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 $clients['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($clients['logged_in_count']) ? $clients['logged_in_count'] : '0'; ?></span><br>
|
|
<span class="text-nowrap "
|
|
style="color: black;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($clients['not_logged_in_count']) ? $clients['not_logged_in_count'] : '0'; ?></span><br>
|
|
<span class="text-nowrap"
|
|
style="color: black;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($clients['draft_count']) ? $clients['draft_count'] : '0'; ?></span><br>
|
|
<span class="text-nowrap"
|
|
style="color: black;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($clients['enrolled_count']) ? $clients['enrolled_count'] : '0'; ?></span><br>
|
|
<span class="text-nowrap"
|
|
style="color: black;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();
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
random_color_set();
|
|
});
|
|
|
|
$('#enrollment_status_open_close').change(function() {
|
|
|
|
if ($(this).val() === 'open') {
|
|
|
|
var enrollment_data = '<?php echo addslashes(json_encode($client_branch_emp_list, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT)); ?>';
|
|
|
|
console.log('Raw enrollment_data:', enrollment_data);
|
|
|
|
try {
|
|
// Ensure enrollment_data is not empty or invalid
|
|
if (!enrollment_data || enrollment_data === 'null' || enrollment_data === '""') {
|
|
throw new Error('Invalid JSON data received.');
|
|
}
|
|
|
|
// Parse JSON data
|
|
var data = JSON.parse(enrollment_data);
|
|
console.log('Parsed data:', data);
|
|
|
|
// Ensure parsed data is always treated as an array
|
|
if (!Array.isArray(data)) {
|
|
data = data && typeof data === 'object' ? [data] : [];
|
|
}
|
|
|
|
console.log('Final client_branch_emp_list:', data);
|
|
updateCarouselWithData(data, 1);
|
|
|
|
} catch (error) {
|
|
console.error('Error parsing JSON:', error.message, error);
|
|
}
|
|
|
|
} else {
|
|
|
|
// Fetch the session data from PHP
|
|
var enrollment_data = '<?php echo addslashes(json_encode($client_branch_emp_list, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT)); ?>';
|
|
console.log('Raw enrollment_data:', enrollment_data);
|
|
|
|
try {
|
|
// Ensure enrollment_data is valid before parsing
|
|
if (!enrollment_data || enrollment_data === 'null' || enrollment_data === '""') {
|
|
throw new Error('Invalid JSON data received.');
|
|
}
|
|
|
|
// Parse JSON data
|
|
var data = JSON.parse(enrollment_data);
|
|
console.log('Parsed data:', data);
|
|
|
|
// Ensure `data` is always an array
|
|
data = Array.isArray(data) ? data : (data && typeof data === 'object' ? [data] : []);
|
|
|
|
console.log('Final client_branch_emp_list:', data);
|
|
updateCarouselWithData(data, 2);
|
|
|
|
} catch (error) {
|
|
console.error('Error parsing JSON:', error.message, error);
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
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()}`;
|
|
}
|
|
|
|
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) && data.length > 0) {
|
|
|
|
console.log("Processing array........................................");
|
|
// Handle the case where data.client_branch_emp_list is an array
|
|
var items = data[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 < data.length; i++) {
|
|
|
|
let client = data[i];
|
|
|
|
if (open_close == 1 && client.open_or_close_enrollment == 1) {
|
|
|
|
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="${client.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')">${client.total_employees}</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} - ${client.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="${client.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')">${client.logged_in_count ?? 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')"> ${client.not_logged_in_count ?? 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')">${client.draft_count ?? 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')">${(client.enrolled_count ?? 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 (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="${client.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')">${client.total_employees}</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} - ${client.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="${client.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')">${client.logged_in_count}</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')"> ${client.not_logged_in_count ?? 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')">${client.draft_count ?? 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')">${(client.enrolled_count ?? 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++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 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 === 'object') {
|
|
console.error('client_branch_emp_list is an object, not an array:', data);
|
|
} else {
|
|
console.error('client_branch_emp_list is missing or not in the expected format:', data);
|
|
}
|
|
random_color_set();
|
|
|
|
// Initialize or refresh carousel if needed
|
|
$('#carouselExampleControls').carousel('dispose'); // Properly dispose of the instance
|
|
$('#carouselExampleControls').carousel(); // Reinitialize it
|
|
|
|
}
|
|
|
|
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>
|