ria/app/Views/employeeLeaveApplicationForm.php

652 lines
31 KiB
PHP
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="content-wrapper"></div>
<div class="content-page">
<div class="content">
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box page-title-box-alt">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">HR</a></li>
<li class="breadcrumb-item"><a href="javascript: void(0);">Leave</a></li>
<li class="breadcrumb-item active">
<h4 class="page-title">Leave Application Form</h4>
</li>
</ol>
</div>
<a data-toggle="modal" href="#applicationModal" data-id="0" data-name=""
class="btn btn-success">Add Leave</a>
</div>
</div>
</div><!-- /.end 1st r o w -->
<div class="row">
<div class="col-12">
<div class="card">
<!-- <form class="Date-filter-form" id="DateRangeFilter"
style="margin-top: 14px;margin-bottom: -11px;margin-left: 33px;">
<input type="hidden" name="table" value="requisition">
<label for="fromDate">From:</label>
<input class="form-control date_range form-date-search" id="fromDate" name="fromDate"
placeholder="Select From Date" autocomplete="off" required>
<label for="toDate">To:</label>
<input class="form-control date_range to-date-search" id="toDate" name="toDate"
placeholder="Select To Date" autocomplete="off" required>
<button type="submit" class="range_search_button"><i class="fe-search" aria-hidden="true"
class="icon-button" title="Search"></i></button>
<i class="fe-rotate-cw range_reset_button" aria-hidden="true" class="icon-button"
id="resetButton" title="Reset"></i>
<div class="error" id="error"></div>
</form> -->
<!-- <div style="margin-left:auto">
<div class="form-check" style="margin-right: 25px;">
<form id="archiveFormId" action="<?php // echo base_url()?>/transporterListing" method="post">
<input class="form-check-input" type="checkbox" id="showArchiveId"
name="showArchive" value="1" <?php // echo $showArchive ? "checked" : " " ?>
style="width: 18px; height: 18px;">
<label class="form-check-label" for="showArchiveId"
style="font-size: 1rem; margin-left: 8px;">
Show Archive
</label>
</form>
</div>
</div> -->
<div class="card-body" style="overflow-x:scroll;">
<div class="card-body">
<div class="box">
<div class="box-header">
<div class="box-tools"></div>
</div>
<div class="box-body">
<div class="table-responsive" style="overflow-x:scroll;">
<table id="leave_app_listing" class="table dt-responsive nowrap w-100">
<thead>
<tr>
<th>Create Date</th>
<th>Create By</th>
<th>Employee Name</th>
<th>From Date</th>
<th>To Date</th>
<th>Number Of Days</th>
<th class="auditor-restricted security-restricted labstaff-restricted stock-restricted">Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
if (!empty($leave_info)) :
foreach ($leave_info as $i => $d) {
$createdat = new DateTime($d['created_on']);
$crdate = $createdat->format('d-m-Y');
$crtime = $createdat->format('h:i A');
$startat = new DateTime($d['start_date']);
$stdate = $startat->format('d-m-Y');
$endat = new DateTime($d['end_date']);
$eddate = $endat->format('d-m-Y');
?>
<tr>
<td><?= esc($crdate) ?></td>
<td><?= esc($d['creatorFullName']) ?></td>
<td><?= esc($d['employeeFullName']) ?></td>
<td><?= esc($stdate) ?></td>
<td><?= esc($eddate) ?></td>
<td><?= esc($d['no_of_days']) ?></td>
<td class="auditor-restricted security-restricted labstaff-restricted stock-restricted">
<select
class="form-control"
name="drpStatus"
id="drpStatus_<?php echo $d['leave_application_id'] ?>"
onchange="callLeaveStatus('<?php echo $d['leave_application_id'] ?>', this.value, this)"
style="width: 193px;">
<!-- <option value="">Select</option> -->
<option value="Draft" <?php echo ($d['status'] == 'Draft') ? 'selected' : ''; ?> >Draft</option>
<option value="Approved" <?php echo ($d['status'] == 'Approved') ? 'selected' : ''; ?> >Approve</option>
<option value="Cancel" <?php echo ($d['status'] == 'Cancel') ? 'selected' : ''; ?> >Cancel</option>
</select>
<!-- <?php if($d['status'] !== "Approved"){ }else{ echo esc($d['status']); } ?> -->
</td>
<td><?php if($d['leave_application_id']){ ?>
<a data-toggle="modal" href="#applicationModal" data-arr='<?php echo json_encode($d); ?>' data-id='<?= esc($d['leave_application_id']) ?>' title="<?php echo $d['emp_id']; ?> - Click here to View/Edit Employee Leave Details">
<i class="fas fa-edit"></i>&nbsp;&nbsp;&nbsp;
</a>
<?php } ?>
<?php if($d['status'] == "Approved"){ ?>
<a style="cursor:pointer;" href="<?php echo base_url() . 'leaveApplicationPDF/' . esc($d['leave_application_id']); ?>" title="<?php echo $d['emp_id']; ?> - Click here to Download Employee Leave Details">
<i class="fa fa-download"></i>&nbsp;&nbsp;&nbsp;
</a>
<?php }else{ ?>
<a style="cursor:pointer;" onclick="confirmDelete(event)" href="<?php echo base_url() . 'deleteLeaveApplicationForm?leave_application_id=' . esc($d['leave_application_id']); ?>" title="<?php echo $d['emp_id']; ?> - Click here to Delete Employee Leave Details">
<i class="fa fa-trash"></i>&nbsp;&nbsp;&nbsp;
</a>
<?php } ?>
</td>
</tr>
<?php } ?>
<?php endif; ?>
</tbody>
</table>
</div>
<p>&nbsp;</p>
</div><!-- /. end b o x-b o d y -->
</div><!-- /.end b o x -->
</div> <!-- end c a r d b o d y-->
</div> <!-- /. end c a r d -->
</div><!-- /. end c o l-->
</div> <!-- /.end 2nd r o w -->
</div> <!-- /.end c o n t a i n e r -->
</div> <!-- /.end c o n t e n t -->
</div>
<!-- leave Application entries modal -->
<div class="modal fade" id="applicationModal" tabindex="-1" role="dialog" aria-labelledby="applicationformTitle" aria-hidden="true">
<div class="modal-dialog modal-xl" style="width:900px;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="applicationformTitle">Add Application</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form id="applicationForm" class="form-horizontal" role="form">
<input type="hidden" class="form-control" id="leave_application_id" name="leave_application_id">
<div class="row mt-2">
<div class="col-md-2" style="text-align: end; align-content: center;">
<label class="form" for="emp_name">Employee Name</label>
</div>
<div class="col-md-9">
<select class="form-control searchabledropdown" id="emp_name" name="emp_name" onchange="fetchemployees(this);">
<option value="">Select</option>
<?php foreach ($employee_info as $key => $value) { ?>
<option value="<?= $value->EmpID; ?>"
data-department="<?= $value->DepartmentName; ?>"
data-designation="<?= $value->Designation; ?>">
<?= $value->FullName; ?>
</option>
<?php } ?>
</select>
</div>
</div><!--/. r o w 1 -->
<div class="row mt-2">
<div class="col-md-2" style="text-align: end; align-content: center;">
<label class="form" for="emp_id">Employee ID</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="emp_id" name="emp_id" readonly>
</div>
</div><!--/. r o w 2-->
<div class="row mt-2">
<div class="col-md-2" style="text-align: end; align-content: center;">
<label class="form" for="department">Department</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="department" name="department" readonly>
</div>
</div><!--/. r o w 3 -->
<div class="row mt-2">
<div class="col-md-2" style="text-align: end; align-content: center;">
<label class="form" for="designation">Designation </label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="designation" name="designation" readonly>
</div>
</div><!--/. r o w 4 -->
<div class="row mt-2">
<div class="col-md-2 mt-4" style="text-align: end; align-content: center;">
<label class="form" for="No. of days">Date Range </label>
</div>
<div class="col-md-3">
<label class="form" for="start_date">From Date</label>
<input type="date" class="form-control" id="start_date" name="start_date" required>
</div>
<div class="col-md-3">
<label class="form" for="end_date">To Date</label>
<input type="date" class="form-control" id="end_date" name="end_date" required>
</div>
<div class="col-md-3">
<label class="form" for="no_of_days">No Of Days </label>
<input type="text" class="form-control" id="no_of_days" name="no_of_days" readonly>
</div>
</div><!--/. r o w 5 -->
<div class="row mt-2 auditor-restricted security-restricted labstaff-restricted stock-restricted">
<div class="col-md-2" style="text-align: end; align-content: center;">
<label class="form" for="status_val">Status</label>
</div>
<div class="col-md-9">
<select class="form-control select2" id="status_val" name="status_val">
<option value="">Select</option>
<?php foreach ($status_info as $key => $value) { ?>
<option value="<?= $value; ?>"> <?= $value; ?> </option>
<?php } ?>
</select>
</div>
</div><!--/. r o w 6 -->
<div class="row mt-2">
<div class="col-md-2" style="text-align: end; align-content: center;">
<label class="form" for="reason">Reason</label>
</div>
<div class="col-md-9">
<textarea class="form-control" id="reason" name="reason" ></textarea>
</div>
</div><!--/. r o w 7 -->
</form>
</div><!-- /. m o d a l b o d y -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal"
value="Cancel">Cancel</button>
<button type="button" class="btn btn-info waves-effect waves-light tempClick"
id="tempClick">Submit</button>
</div>
</div><!-- /. m o d a l-c o n t e n t -->
</div><!-- /.m o d a l-d i a l o g -->
</div>
<script type="text/javascript" src="<?php echo base_url(); ?>public/assets/js/common.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
$(document).ready(function () {
$('.tooltip-trigger').tooltip();
$(".searchabledropdown").select2();
let today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
// $("#start_date").attr("min", today);
// $("#end_date").attr("min", today);
$('#start_date').change(function() {
let start = new Date($('#start_date').val());
let formattedStart = start.toISOString().split('T')[0]; // Convert to YYYY-MM-DD format
// Reset the end_date input and set its min attribute
$('#end_date').val('').attr('min', formattedStart);
});
$('#start_date, #end_date').change(function() {
let start = new Date($('#start_date').val());
let end = new Date($('#end_date').val());
let formattedStart = start.toISOString().split('T')[0]; // Convert to YYYY-MM-DD format
$("#end_date").attr("min", formattedStart);
if (!isNaN(start) && !isNaN(end)) {
const days = Math.floor((end - start) / 86400000) + 1;
$('#no_of_days').val(days > 0 ? days : 1);
} else {
$('#no_of_days').val('');
}
validateDateRange();
});
$('#status_val').change(function() {
var status = $('#status_val').val();
var role = "<?php echo session()->get('roleText'); ?>";
$("#tempClick").show();
if (role === 'System Administrator') {
$("#tempClick").show();
}
var restrictedRoles = ['Auditor','Security','Stock Handler','Lab Staff'];
if (restrictedRoles.includes(role) && status === 'Approved') {
$("#tempClick").hide();
}
});
$("#applicationModal").on("shown.bs.modal", function (e) {
var id = $(e.relatedTarget).data('id');
var arr = $(e.relatedTarget).data('arr') || {};
let fields = ['leave_application_id','emp_name','emp_id','start_date','end_date','no_of_days','reason','status_val','department','designation'];
fields.forEach(field => $("#" + field).val(arr[field] || "").prop('readonly', true));
if (id == 0) {
$('#emp_name').val("").select2();
$('#applicationformTitle').text("Apply Leave");
$("#leave_application_id").val(0);
$("#tempClick").show();
} else {
$('#applicationformTitle').text(arr.status === "Approved" ? "View Leave" : "Edit Leave");
// $("#tempClick").toggle(arr.status !== "Approved");
var role = "<?php echo session()->get('roleText'); ?>";
if (role === 'System Administrator') {
$("#tempClick").show();
}
var restrictedRoles = ['Auditor','Security','Stock Handler','Lab Staff'];
if (restrictedRoles.includes(role) && arr.status === "Approved") {
$("#tempClick").hide();
}else{
$("#tempClick").show();
}
}
if (id == 0 || arr.status !== "Approved") {
$("#emp_name, #start_date, #end_date, #status_val, #reason").prop({readonly: false, disabled: false});
$("#start_date, #end_date").prop('required', true);
} else {
$("#emp_name").prop('disabled', true);
}
if (arr.emp_id) $("#emp_name").val(arr.emp_id).select2();
if (arr.status) $("#status_val").val(arr.status);
});
$('#tempClick').click(function () {
if ($('#emp_id').val() === '') {
alert('Please Select the Valid Employee');
return;
}
if ($('#start_date').val() === '') {
alert('Please Enter the Valid From Date');
return;
}
if ($('#end_date').val() === '') {
alert('Please Enter the Valid To Date');
return;
}
if ($('#reason').val() === '') {
alert('Please Enter the Reason');
return;
}
// if ($('#status_val').val() === '') {
// alert('Please Select Status');
// return;
// }
// validateDateRange(function(isValid) {
// if (!isValid) {
// alert("The selected date range overlaps with an existing approved leave.");
// return;
// }
var formData = {
leave_application_id:$('#leave_application_id').val(),
emp_id:$('#emp_id').val(),
start_date:$('#start_date').val(),
end_date:$('#end_date').val(),
no_of_days:$('#no_of_days').val(),
reason:$('#reason').val(),
status:$('#status_val').val() ? $('#status_val').val() : 'Draft',
};
$('#loader').show();
$.ajax({
type: 'POST',
url: "<?php echo base_url(); ?>fetchLeaveApplicationForm",
data: formData,
dataType: 'json',
success: function (response) {
$('#loader').hide();
if (response.status) {
alert(response.message);
location.reload();
} else {
alert(response.message);
}
},
error: function (xhr, status, error) {
$('#loader').hide();
console.error('An error occurred: ' + error);
},
complete: function () {
$('#loader').hide();
console.log("ajax call completed");
}
});
// });
});
$.fn.dataTable.ext.type.order['date-eu-pre'] = function (date) {
var dateSplit = date.split('-');
return (dateSplit[2] + dateSplit[1] + dateSplit[0]) * 1;
};
// Initialize the DataTable
var table = $('#leave_app_listing').DataTable({
dom: 'Blfrtip',
buttons: [
'excel', 'pdf'
],
pageLength: 10,
lengthMenu: [
[10, 20, 30, 50, -1],
[10, 20, 30, 50, "All"]
],
responsive: false,
order: false,
language: {
paginate: {
next: '<i class="fas fa-angle-right"></i>', // Next button icon
previous: '<i class="fas fa-angle-left"></i>' // Previous button icon
}
}
});
// Date range filter function
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var fromDate = $('#fromDate').val();
var toDate = $('#toDate').val();
if (!fromDate || !toDate) {
return true; // If no dates selected, don't filter
}
// Convert the fromDate and toDate from dd-mm-yyyy to Date objects
var fromParts = fromDate.split("-");
var toParts = toDate.split("-");
var startDate = new Date(fromParts[2], fromParts[1] - 1, fromParts[0]); // Year, month (0-based), day
var endDate = new Date(toParts[2], toParts[1] - 1, toParts[0]);
// Adjust startDate to include the day before the selected fromDate
startDate.setDate(startDate.getDate() - 1);
// Ensure endDate includes the entire end date by setting time to the end of the day
endDate.setHours(23, 59, 59, 999);
// Get the date from the DataTable row (assuming it's in the first column in dd-mm-yyyy format)
var dateStr = data[0];
var dateParts = dateStr.split("-");
var rowDate = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
// Return true if the row date is within the range
return rowDate >= startDate && rowDate <= endDate;
}
);
// Handle form submission for the date range filter
// $("#DateRangeFilter").submit(function (e) {
// e.preventDefault();
// table.draw(); // Redraw the table to apply the filter
// });
// Reset button functionality
// $("#resetButton").click(function () {
// $("#fromDate").val('');
// $("#toDate").val('');
// table.draw(); // Redraw the table to clear the filter
// });
// Automatically focus and open the To Date picker when From Date is selected
// document.getElementById('fromDate').addEventListener('change', function () {
// var fromDate = this.value;
// var toDateInput = document.getElementById('toDate');
// // Set the min attribute of the To Date input to the selected From Date
// toDateInput.min = fromDate;
// // Optionally reset the To Date input if the current value is before the new min date
// if (toDateInput.value < fromDate) {
// toDateInput.value = fromDate;
// }
// });
});
function validateDateRange() {
let startDate = $("#start_date").val();
let endDate = $("#end_date").val();
let empId = $("#emp_name").val();
if (!startDate || !endDate || !empId) return;
else{
$.ajax({
url: "<?php echo base_url(); ?>validateDateRange", // Replace with your actual API endpoint
type: "POST",
data: { emp_id: empId, start_date: startDate, end_date: endDate },
dataType: 'json',
success: function (response) {
if (response.status) {
alert(response.message);
$("#start_date, #end_date, #no_of_days").val("");
}else{
console.log(response.status,response.array);
}
},
error: function (xhr, status, error) {
alert("Error checking leave dates.");
},
complete: function () {
console.log("validate leave dates ajax call completed");
}
});
}
}
</script>
<script>
$(window).on('load', function () {
function flashMessage() {
// Fetch the flash data from PHP and encode it for JavaScript
let message = <?= json_encode(session()->getFlashdata('success')) ?>;
if (message) {
alert(message);
}
}
flashMessage();
})
function confirmDelete(event) {
let result = confirm(` Do you Confirm to Delete the Leave Applicationform Detail?`);
if (result) { return result; } else { event.preventDefault(); }
}
function confirmReActivate(event) {
let result = confirm(` Do you Confirm to Re-activate the Leave Applicationform Detail?`);
if (result) { return result; } else { event.preventDefault(); }
}
function fetchemployees(selectElement){
$('#emp_id').val("");
$('#department').val("");
$('#designation').val("");
const selectedOption = selectElement.options[selectElement.selectedIndex];
let empId = selectedOption.value;
// Check if nothing is selected
if (empId === "") {
alert("Please select an employee!");
return; // Exit the function early
}
let department = selectedOption.getAttribute('data-department');
let position = selectedOption.getAttribute('data-designation');
$('#emp_id').val(empId);
$('#department').val(department);
$('#designation').val(position);
}
</script>
<script>
function callLeaveStatus(leaveid, Status, selectElem) {
// $("#drpStatus").val(Status); // not working
// $('#drpStatus_'+leaveid).val(Status);
// selectElem.value = Status;
// $(selectElem).val(Status).trigger('change');
// if (drpStatusElem) {
// drpStatusElem.;
// } else {
// console.error("Element with ID 'drpStatus' not found");
// return;
// }
if (Status == '') {
alert('Please select a valid status!');
selectElem.value = ''; // reset to default
return;
}else{
$('#drpStatus_'+leaveid).val(Status).select2();
}
var strMsg = '';
if (Status === 'Approved') {
strMsg = 'Do you want to Approve?';
} else if (Status === 'Draft') {
strMsg = 'Do you want to change to Draft?';
}
if (confirm(strMsg)) {
$.ajax({
type: "GET",
url: `<?= base_url('leaveStatus') ?>/${leaveid}/${Status}`,
success: function(response) {
alert(response.message);
location.reload();
},
error: function() {
alert('Error occurred while updating leave status.');
}
});
} else {
// reset dropdown to default if cancelled
selectElem.value = '';
}
}
</script>