608 lines
18 KiB
PHP
608 lines
18 KiB
PHP
|
|
<!-- Body page content -->
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<!-- bootstrap-daterangepicker -->
|
|
<link href="https://localhost/ams//assets/default/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
|
|
<!-- bootstrap-datetimepicker -->
|
|
<link href="https://localhost/ams//assets/default/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
|
|
<!-- style.css -->
|
|
<link href="https://localhost/ams//assets/default/customize/style.css" rel="stylesheet">
|
|
|
|
<!-- bootstrap-daterangepicker -->
|
|
<script src="https://localhost/ams//assets/default/moment/min/moment.min.js"></script>
|
|
<script src="https://localhost/ams//assets/default/bootstrap-daterangepicker/daterangepicker.js"></script>
|
|
<!-- bootstrap-datetimepicker -->
|
|
<script src="https://localhost/ams//assets/default/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.alert-success {
|
|
background-color: #dff0d8;
|
|
color: #3c763d;
|
|
border-color: #d6e9c6;
|
|
}
|
|
|
|
.flash-message {
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border-radius: 5px;
|
|
margin-left: 650px;
|
|
}
|
|
|
|
.custom-select {
|
|
display: inline-block;
|
|
position: relative;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 14px;
|
|
color: #333;
|
|
padding: 6px 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.custom-select::after {
|
|
content: '\f107';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 10px;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.custom-select:hover {
|
|
border-color: #999;
|
|
}
|
|
|
|
.custom-select:focus {
|
|
border-color: #aaa;
|
|
outline: none;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.custom-select option {
|
|
padding: 10px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
|
|
.hide-arrow {
|
|
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background-image: none;
|
|
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
</style>
|
|
|
|
<button hidden id="button" class="btn btn-secondary source" onclick="new PNotify({
|
|
text: 'No sufficient leave balance please check the Date.',
|
|
type: 'error',
|
|
styling: 'bootstrap3'
|
|
});">Error</button>
|
|
<input type="hidden" id="error" value="<?php echo $this->session->userdata('error');?>" >
|
|
<?php echo $this->session->unset_userdata('error');?>
|
|
<script>
|
|
$(document).ready(function(){
|
|
|
|
if($('#error').val() == 1)
|
|
{
|
|
$('#button').click();
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 ">
|
|
<div class="x_panel" style=" position: relative !important; ">
|
|
<div class="x_title">
|
|
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<a href="<?php echo base_url();?>Leave/LeaveHistory" class="btn btn-primary" style="margin-top: 20px;">Back</a>
|
|
</ul>
|
|
|
|
<h1>Apply Leave</h1>
|
|
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
|
|
|
|
<div class="x_content">
|
|
<br />
|
|
<form id="myForm" data-parsley-validate class="form-horizontal form-label-left" method="post" action="<?php echo base_url();?>Leave/createLeave" enctype="multipart/form-data">
|
|
|
|
<input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash();?>">
|
|
|
|
|
|
<div class="item form-group">
|
|
|
|
<label class="control-label col-md-2 col-sm-2 " for="last-name">Leave Applied For</label>
|
|
<div class="col-md-5 col-sm-5 ">
|
|
|
|
<input type="radio" id="self" name="risedby" value="self(<?php echo user()->id;?>)"style="margin:10px;"checked /><b>Self</b>
|
|
<input type="radio" id="others" name="risedby" value="<?php echo user()->name;?>" style="margin: 10px;" /><b>Others</b>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item form-group">
|
|
<label class="control-label col-md-2 col-sm-2 " for="last-name"> Employee Name </label>
|
|
<div class="col-md-5 col-sm-5 ">
|
|
<select id="user_dropdown" name="emp_id" style="margin-top: 10px;padding-bottom: 10px;" class="form-control manager" required></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item form-group">
|
|
|
|
<label class="control-label col-md-2 col-sm-2 " for="last-name">Leave Type<a style="color:red;">*</a> </label>
|
|
<div class="col-md-5 col-sm-5 ">
|
|
<select id="type" name="type" required class="form-control" onchange="permission(this.id)" >
|
|
<option value="">--Select--</option>
|
|
<?php foreach ($leavetype as $key => $value) { ?>
|
|
|
|
<option id="<?php echo $value->code; ?>" value="<?php echo $value->id; ?>"><?php echo $value->type; ?></option>
|
|
<?php } ?>
|
|
</select>
|
|
</div>
|
|
|
|
<label class="control-label col-md-1 col-sm-1 " for="first-name" id="balance" > Balance</label>
|
|
<div class="col-md-1 col-sm-1 ">
|
|
<input type="text" id="leave_bal" name="" value="" style="width:90px;" class="form-control " readonly>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item form-group" id="hidedate" >
|
|
|
|
<label class="control-label col-md-2 col-sm-2 " for="first-name"> From Date<a style="color:red;">*</a> </label>
|
|
<div class="col-md-2 col-sm-2 ">
|
|
<div class='input-group date'>
|
|
<input type='text' class="form-control" placeholder="DD-MM-YYYY" id="fromdate" name="from_date" value="" required autocomplete="off" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<label class="control-label col-md-1 col-sm-1" for="last-name">To Date<a style="color:red;">*</a> </label>
|
|
<div class="col-md-2 col-sm-2 ">
|
|
<div class='input-group date' >
|
|
<input type='text' class="form-control" placeholder="DD-MM-YYYY" id="todate" name= "to_date" value="" required autocomplete="off"/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<label class="control-label col-md-1 col-sm-1 " for="last-name"></label>
|
|
<div class="col-md-2 col-sm-2 ">
|
|
<input id="dateDifference" value="" readonly class="form-control" style="width:90px;" type="text" >
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item form-group" id="showdate">
|
|
|
|
|
|
<label class="control-label col-md-2 col-sm-2 " for="first-name">Date<a style="color:red;">*</a> </label>
|
|
<div class="col-md-5 col-sm-5 ">
|
|
<div class='input-group date'>
|
|
<input type='text' class="form-control" required name="perm_date" placeholder="DD-MM-YYYY" value="" id='perm_id'/></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item form-group" id="showtime">
|
|
|
|
<label class="control-label col-md-2 col-sm-2 " for="first-name"> From<a style="color:red;">*</a> </label>
|
|
<div class="col-md-2 col-sm-2 ">
|
|
<select class="custom-select" id="from_time" name=from_time required >
|
|
<option value="">select time</option>
|
|
</select>
|
|
</div>
|
|
|
|
<label class="control-label col-md-1 col-sm-1 " for="last-name">To<a style="color:red;">*</a> </label>
|
|
<div class="col-md-2 col-sm-2 ">
|
|
<select id="to_time" class="custom-select" name="to_time" required>
|
|
<option value="">select time</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item form-group">
|
|
|
|
<label class="control-label col-md-2 col-sm-2 " for="last-name">Note</label>
|
|
<div class="col-md-5 col-sm-5">
|
|
<textarea id="comments" name="comments" value="" class="form-control" style="height:100px !important;" type="text" ></textarea>
|
|
|
|
<input type="hidden" id="manager_id" name="manager" value="">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="ln_solid"></div>
|
|
<div class="item form-group">
|
|
<div class=" offset-md-8">
|
|
<a href="<?php echo base_url();?>Leave/LeaveHistory" class="btn btn-secondary">Cancel</a>
|
|
<button type="submit" id="submit" class="btn btn-success">Submit</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!-- /Body page content -->
|
|
<script>
|
|
|
|
// hide the dropdown arrow
|
|
$(document).ready(function() {
|
|
|
|
$("#user_dropdown").addClass("hide-arrow");
|
|
$("input[name='risedby']").on("change", function() {
|
|
var inputValue = $(this).val();
|
|
if (inputValue === "<?php echo user()->name;?>") {
|
|
$("#user_dropdown").removeClass("hide-arrow");
|
|
} else {
|
|
$("#user_dropdown").addClass("hide-arrow");
|
|
}
|
|
});
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
|
|
var currentUserName = '<?php echo user()->name; ?>';
|
|
var currentUserId = '<?php echo user()->id; ?>';
|
|
$('#user_dropdown').append('<option value="' + currentUserId + '">' +
|
|
currentUserName + '</option>');
|
|
$('#user_dropdown').prop('disabled', true);
|
|
|
|
$('#user_dropdown').on('change',function() {
|
|
|
|
$('#type').prop('selectedIndex',0);
|
|
|
|
});
|
|
|
|
|
|
$('#type').on('change',function() {
|
|
let id = $("#user_dropdown").val();
|
|
|
|
var type_id = $('option:selected', this).val();
|
|
var fromdate = document.getElementById("fromdate").value;
|
|
|
|
|
|
if (id)
|
|
{
|
|
$.ajax({
|
|
data: {id : id, type_id : type_id},
|
|
type: 'get',
|
|
url: "<?php echo base_url()?>Leave/get_leave_count/",
|
|
success: function(response) {
|
|
response = JSON.parse(response);
|
|
if(response.length == 0 )
|
|
{
|
|
$.ajax({
|
|
type: "get",
|
|
data: {type_id : type_id},
|
|
url: "<?php echo base_url()?>Leave/get_all_leave_count/",
|
|
success: function(response) {
|
|
response = JSON.parse(response);
|
|
$('#leave_bal').val( response[0].days + ' days');
|
|
},
|
|
});
|
|
}
|
|
else
|
|
{
|
|
if(response[0].remaining_days == 1 )
|
|
{
|
|
$('#leave_bal').val(response[0].remaining_days + ' day');
|
|
}
|
|
else
|
|
{
|
|
$('#leave_bal').val(response[0].remaining_days + ' days');
|
|
}
|
|
}
|
|
},
|
|
|
|
});
|
|
}
|
|
else
|
|
{
|
|
$('#leave_bal').val("");
|
|
}
|
|
});
|
|
|
|
$('input[type="radio"][name="risedby"]').change(function() {
|
|
var selectedValue = $(this).val();
|
|
var $userDropdown = $('#user_dropdown');
|
|
|
|
$userDropdown.empty();
|
|
|
|
if (selectedValue === 'self(<?php echo user()->id;?>)') {
|
|
|
|
var currentUserName = '<?php echo user()->name; ?>';
|
|
var currentUserId = '<?php echo user()->id; ?>';
|
|
$userDropdown.append('<option value="' + currentUserId + '">' + currentUserName + '</option>');
|
|
$userDropdown.prop('disabled', true);
|
|
} else if (selectedValue === '<?php echo user()->name; ?>') {
|
|
|
|
|
|
$.ajax({
|
|
url: '<?php echo base_url('Leave/get_emp_name/')?>"',
|
|
method: 'GET',
|
|
dataType: 'json',
|
|
success: function(response) {
|
|
|
|
$('#user_dropdown').append(response);
|
|
$('#user_dropdown').prop('disabled', false);
|
|
},
|
|
});
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
function get_all_count(id) {
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
|
$('#showtime').hide()
|
|
$('#showdate').hide()
|
|
|
|
$('#type').change(function() {
|
|
|
|
var selectedOptionId = $(this).find(":selected").attr("id");
|
|
if( selectedOptionId === 'permission'){
|
|
|
|
$('#hidedate').hide();
|
|
$('#balance').hide();
|
|
$('#leave_bal').hide();
|
|
$('#fromdate').removeAttr('required');
|
|
$('#todate').removeAttr('required');
|
|
$('#perm_id').prop('required', true);
|
|
$('#showtime').show();
|
|
$('#showdate').show();
|
|
$('#from_time').prop('required', true);
|
|
$('#to_time').prop('required', true);
|
|
}
|
|
else{
|
|
|
|
$('#from_time').removeAttr('required');
|
|
$('#to_time').removeAttr('required');
|
|
$('#perm_id').removeAttr('required');
|
|
$('#hidedate').show();
|
|
$('#showtime').hide();
|
|
$('#showdate').hide();
|
|
$('#balance').show();
|
|
$('#leave_bal').show();
|
|
$('#fromdate').prop('required', true);
|
|
$('#todate').prop('required', true);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
|
//get manager id from the dropdown employee assign the value to $("#manager_id") input field
|
|
|
|
$("#user_dropdown").on("change", function(){
|
|
let manager_id = $(this).children(":selected").attr("id");
|
|
|
|
$("#manager_id").val(manager_id);
|
|
|
|
})
|
|
|
|
$('#others').on('change', function(){
|
|
|
|
$('#leave_bal').val('');
|
|
$('#type').val('');
|
|
|
|
})
|
|
$('#self').on('change', function(){
|
|
|
|
$('#leave_bal').val('');
|
|
$('#type').val('');
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
var selectField = $('#from_time');
|
|
|
|
var options = [ '12:00 AM', '12:30 AM', '1:00 AM', '1:30 AM', '2:00 AM', '2:30 AM', '3:00 AM', '3:30 AM', '4:00 AM', '4:30 AM', '5:00 AM', '5:30 AM', '6:00 AM', '6:30 AM', '7:00 AM', '7:30 AM', '8:00 AM', '8:30 AM', '9:00 AM', '9:30 AM', '10:00 AM', '10:30 AM', '11:00 AM', '11:30 AM', '12:00 Noon', '12:30 PM', '1:00 PM', '1:30 PM', '2:00 PM', '2:30 PM', '3:00 PM', '3:30 PM', '4:00 PM', '4:30 PM', '5:00 PM', '5:30 PM', '6:00 PM', '6:30 PM', '7:00 PM', '7:30 PM', '8:00 PM', '8:30 PM', '9:00 PM', '9:30 PM', '10:00 PM', '10:30 PM', '11:00 PM', '11:30 PM'];
|
|
|
|
|
|
for (var i = 0; i < options.length; i++) {
|
|
selectField.append('<option value="' + options[i] + '">' + options[i] + '</option>');
|
|
}
|
|
});
|
|
|
|
var selectField = $('#from_time');
|
|
selectField.on('click', function() {
|
|
|
|
var selectedValue = $(this).val();
|
|
console.log(selectedValue);
|
|
|
|
var timeSlots = [ '12:00 AM', '12:30 AM', '1:00 AM', '1:30 AM', '2:00 AM', '2:30 AM', '3:00 AM', '3:30 AM', '4:00 AM', '4:30 AM', '5:00 AM', '5:30 AM', '6:00 AM', '6:30 AM', '7:00 AM', '7:30 AM', '8:00 AM', '8:30 AM', '9:00 AM', '9:30 AM', '10:00 AM', '10:30 AM', '11:00 AM', '11:30 AM', '12:00 Noon', '12:30 PM', '1:00 PM', '1:30 PM', '2:00 PM', '2:30 PM', '3:00 PM', '3:30 PM', '4:00 PM', '4:30 PM', '5:00 PM', '5:30 PM', '6:00 PM', '6:30 PM', '7:00 PM', '7:30 PM', '8:00 PM', '8:30 PM', '9:00 PM', '9:30 PM', '10:00 PM', '10:30 PM', '11:00 PM', '11:30 PM'];
|
|
|
|
|
|
function filterTimeSlots(startingTime, numberOfHours) {
|
|
// Find the index of the starting time in the array
|
|
console.log(startingTime,numberOfHours);
|
|
const startIndex = timeSlots.findIndex(time => time === startingTime);
|
|
console.log(startIndex);
|
|
if (startIndex !== -1) {
|
|
|
|
const endIndex = startIndex + (numberOfHours * 2) - 1;
|
|
|
|
return timeSlots.slice(startIndex, endIndex + 2);
|
|
}
|
|
return [];
|
|
}
|
|
|
|
// Usage example
|
|
const startingTime = selectedValue;
|
|
const numberOfHours = 4 ;
|
|
const filteredTimeSlots = filterTimeSlots(startingTime, numberOfHours);
|
|
|
|
filteredTimeSlots.shift();
|
|
var totime = $('#to_time');
|
|
totime.empty();
|
|
for (var i = 0; i < filteredTimeSlots.length; i++) {
|
|
totime.append('<option value="' + filteredTimeSlots[i] + '">' + filteredTimeSlots[i] + '</option>');
|
|
|
|
}
|
|
|
|
console.log(filteredTimeSlots);
|
|
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
var dateFormat = "dd-mm-yy";
|
|
var fromDateInput = $("#fromdate");
|
|
var toDateInput = $("#todate");
|
|
var permissionDate = $("#perm_id");
|
|
|
|
fromDateInput.datepicker({
|
|
dateFormat: dateFormat,
|
|
changeYear: true,
|
|
changeMonth: true,
|
|
onSelect: function (dateText, inst) {
|
|
toDateInput.datepicker("option", "minDate", dateText);
|
|
calculateDateDifference();
|
|
DateValidate();
|
|
}
|
|
});
|
|
|
|
toDateInput.datepicker({
|
|
dateFormat: dateFormat,
|
|
changeYear: true,
|
|
changeMonth: true,
|
|
onSelect: function (dateText, inst) {
|
|
calculateDateDifference();
|
|
DateValidate();
|
|
}
|
|
});
|
|
|
|
permissionDate.datepicker({
|
|
dateFormat: dateFormat,
|
|
changeYear: true,
|
|
changeMonth: true,
|
|
onSelect: function (dateText, inst) {
|
|
DateValidate();
|
|
}
|
|
});
|
|
|
|
function calculateDateDifference() {
|
|
var fromDate = fromDateInput.datepicker("getDate");
|
|
var toDate = toDateInput.datepicker("getDate");
|
|
|
|
if (fromDate && toDate) {
|
|
var difference = Math.ceil((toDate - fromDate) / (1000 * 60 * 60 * 24) + 1);
|
|
if(difference === 1)
|
|
{
|
|
$("#dateDifference").val(difference + ' day');
|
|
}
|
|
else
|
|
{
|
|
$("#dateDifference").val(difference + ' days');
|
|
}
|
|
|
|
} else {
|
|
$("#dateDifference").val("");
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// $(document).ready(function() {
|
|
// $('#submit').click(function() {
|
|
// let selectedValue = $('#user_dropdown').val();
|
|
// alert(selectedValue);
|
|
// if(selectedValue = ""){
|
|
|
|
// }
|
|
// });
|
|
// });
|
|
|
|
|
|
</script>
|
|
|
|
<script>
|
|
let formSubmitted = false;
|
|
|
|
document.getElementById('myForm').addEventListener('submit', function(event) {
|
|
if (formSubmitted) {
|
|
event.preventDefault(); // Prevent the form from being submitted again
|
|
return false;
|
|
}
|
|
|
|
formSubmitted = true;
|
|
document.getElementById('submitBtn').setAttribute('disabled', 'disabled');
|
|
|
|
// You might want to show a message or change button text to indicate submission
|
|
|
|
return true;
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|