337 lines
16 KiB
PHP
337 lines
16 KiB
PHP
<!-- Bootstrap CSS -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Bootstrap JS (ensure this is included) -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
|
|
|
|
<style>
|
|
/* Existing CSS ... */
|
|
|
|
.carousel-control-prev {
|
|
left: -38px;
|
|
}
|
|
|
|
.status-option {
|
|
padding: 0.5rem !important;
|
|
background-color: darkgrey;
|
|
}
|
|
|
|
.emp-count-view-click {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.emp-status .col-6 {
|
|
padding-bottom: 0.3rem;
|
|
}
|
|
|
|
.emp-status label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.client-branch-label {
|
|
padding: 0.2rem;
|
|
border-radius: 0.2rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.scroll-container {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.scroll-item {
|
|
flex: 0 0 auto;
|
|
width: 33%; /* Adjust based on the number of items you want to show */
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.col-xl-3 {
|
|
max-width: 32% !important;
|
|
}
|
|
}
|
|
|
|
.center_text {
|
|
text-align: center;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.number_css {
|
|
font-family: Roboto, sans-serif;
|
|
color: #343a40;
|
|
text-align: center;
|
|
}
|
|
|
|
.label_bottom_reduce {
|
|
margin-bottom: .0rem;
|
|
}
|
|
|
|
.search-input {
|
|
margin-bottom: 1rem;
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
border: 1px solid #ced4da;
|
|
width: 100%;
|
|
}
|
|
|
|
.carousel-inner {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.carousel-item {
|
|
height: auto; /* Adjust if needed */
|
|
/* margin-left: 80px; */
|
|
}
|
|
|
|
.card {
|
|
margin: 0 auto; /* Center card in carousel item */
|
|
}
|
|
|
|
.carousel-control-prev, .carousel-control-next {
|
|
width: 5%;
|
|
height: 100%;
|
|
}
|
|
|
|
.carousel-control-prev-icon, .carousel-control-next-icon {
|
|
background-color: rgba(0,0,0,0.5); /* Change color as needed */
|
|
}
|
|
|
|
.carousel-control-prev-icon {
|
|
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D"http://www.w3.org/2000/svg" fill%3D"%23000000" viewBox%3D"0 0 8 8"%3E%3Cpath d%3D"M2.5 0L4 1.5 1.5 4 4 6.5 2.5 8 0 4 2.5 0z"/%3E%3C/svg%3E');
|
|
}
|
|
|
|
.carousel-control-next-icon {
|
|
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D"http://www.w3.org/2000/svg" fill%3D"%23000000" viewBox%3D"0 0 8 8"%3E%3Cpath d%3D"M5.5 8L4 6.5 6.5 4 4 1.5 5.5 0l4 4-4 4z"/%3E%3C/svg%3E');
|
|
}
|
|
|
|
.show-item {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.hide-item {
|
|
display: none !important;
|
|
}
|
|
|
|
.content-page {
|
|
background-color: #e8eff5;
|
|
}
|
|
|
|
html {
|
|
background-color: #e8eff5;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<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;">
|
|
<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="">
|
|
<option value="">Open Enrollment</option>
|
|
<option value="">Close Enrollment</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;
|
|
}
|
|
?>
|
|
<!-- 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" >
|
|
<div class="row">
|
|
<div class="col-8 center_text emp-count-view-click" >
|
|
<div class="d-flex justify-content-between">
|
|
<div class="w-100 text-center" >
|
|
<h3 class="my-2 py-1 number_css" ><span data-plugin="counterup" style="margin-left: 113px;font-size: 2.0rem;" 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 center_text emp-count-view-click" >
|
|
<div class="d-flex justify-content-between">
|
|
|
|
<div class="w-100 text-center" >
|
|
<h5 class="text-muted font-weight-normal mt-0 text-truncate" title="Branch Info" style="text-align: center;"><?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 add_card_background_random" >
|
|
|
|
<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 center_text emp-count-view-click" >
|
|
<span style="font-size: large;color: white !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 center_text emp-count-view-click" >
|
|
<span style="font-size: large;color: white !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: -9px;">
|
|
|
|
<div class="col-6 center_text emp-count-view-click" >
|
|
<span style="font-size: large;color: white !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 center_text emp-count-view-click" >
|
|
<span style="font-size: large;color: white !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">
|
|
<!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> -->
|
|
<!-- <span class="sr-only">Previous</span> -->
|
|
<i class="fas fa-angle-left"></i>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
|
<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() {
|
|
// 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 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()}`;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Array of predefined colors
|
|
var colors = ['yellowgreen', 'indianred', 'cadetblue', 'burlywood', 'darkolivegreen'];
|
|
|
|
// Counter to keep track of the current color index
|
|
var colorIndex = 0;
|
|
|
|
// Apply a color from the array to each card-header in sequence
|
|
document.querySelectorAll('.add_card_background_random').forEach(function(header) {
|
|
header.style.backgroundColor = colors[colorIndex];
|
|
colorIndex = (colorIndex + 1) % colors.length; // Move to the next color, cycling back to 0 if needed
|
|
});
|
|
});
|
|
</script>
|