443 lines
12 KiB
PHP
443 lines
12 KiB
PHP
<!-- 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>
|
|
<!-- Body page content -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.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>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
|
|
|
|
<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>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
|
|
<style>
|
|
.alert-success {
|
|
background-color: #dff0d8;
|
|
color: #3c763d;
|
|
border-color: #d6e9c6;
|
|
}
|
|
|
|
.flash-message {
|
|
padding: 20px;
|
|
margin-bottom: 10px;
|
|
border-radius: 5px;
|
|
margin-left: 500px;
|
|
}
|
|
|
|
.hide-arrow {
|
|
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background-image: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
.drop-zone {
|
|
border: 2px dashed #ccc;
|
|
padding: 20px;
|
|
width: 257px;
|
|
height:300px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.preview-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 19px;
|
|
margin-left: -18px !important;
|
|
}
|
|
|
|
.preview-item {
|
|
width: 100%;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.preview-item img,
|
|
.preview-item object {
|
|
width: 290px;
|
|
height: 280px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="clearfix"></div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 ">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<a href="<?php echo base_url();?>Expence/emp_expence_list" class="btn btn-primary" style="margin-top: 20px;">Back</a>
|
|
</ul>
|
|
|
|
<h1>Expense Claim</h1>
|
|
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
<br />
|
|
<form id="" data-parsley-validate class="form-horizontal form-label-left" method="post" action="<?php echo base_url();?>Expence/rise_expence_request" 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">
|
|
|
|
|
|
</div>
|
|
|
|
<div class="item form-group">
|
|
|
|
<label class="control-label col-md-2 col-sm-2" for="last-name">Expense Requisted For</label>
|
|
<div class="col-md-5 col-sm-5 ">
|
|
|
|
<input type="radio" name="created_by" value="self (<?php echo user()->id;?>)"style="margin:10px;"checked /><b>Self</b>
|
|
|
|
<input type="radio" name="created_by" value="<?php echo user()->name;?> (<?php echo user()->id;?>)" 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 <a style="color:red;">*</a></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" > </select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="item form-group">
|
|
|
|
<label class="control-label col-md-2 col-sm-2 " for="first-name"> Date of Expense<a style="color:red;">*</a></label>
|
|
<div class="col-md-5 col-sm-5 ">
|
|
<div class="form-group">
|
|
<input type='text' id='ExpenseDate' class="form-control" placeholder="DD-MM-YYYY" required name="date_of_expence" value="" autocomplete='off' />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item form-group">
|
|
|
|
<label class="control-label col-md-2 col-sm-2 " for="first-name"> Expense Cost <a style="color:red;">*</a></label>
|
|
<div class="col-md-5 col-sm-5 ">
|
|
<input id="cost" name="amount" required value="<?php if(isset($assetData)) { echo $assetData->cost; } ?>" class="form-control" onkeypress = "return matchnum(event)" type="number" name="middle-name" autocomplete='off'>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="item form-group">
|
|
<label class="control-label col-md-2 col-sm-2 " for="last-name">Description</label>
|
|
<div class="col-md-5 col-sm-3">
|
|
<textarea id="comments" name="comments" value="" class="form-control" style="height:200px !important;" type="text" ></textarea>
|
|
|
|
<input type="hidden" id="manager_id" name="manager" value="">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="item form-group">
|
|
|
|
<label class="control-label col-md-2 col-sm-2 " required for="first-name">Upload Bill </label>
|
|
<div class="col-md-5 col-sm-5 ">
|
|
<input id="formFile" name="bill" onchange="validateFile(this)" class="typeFile" type="file" value="">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="item form-group">
|
|
<div class="col-md-2 col-sm-2 ">
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- <div class="item form-group">
|
|
|
|
<label class="control-label col-md-2 col-sm-2 " required for="first-name"></label>
|
|
|
|
<img src="http://ssl.gstatic.com/accounts/ui/avatar_2x.png" width="100" height="100" id="uploadPreview" class="avatar img-circle img-thumbnail" style="height: 100px; width: 100px;" alt="avatar"/>
|
|
</div>
|
|
</div> -->
|
|
|
|
|
|
<div class="ln_solid"></div>
|
|
<div class="item form-group">
|
|
<div class=" offset-md-8">
|
|
<button class="btn btn-secondary" onclick="history.back()">Cancel</button>
|
|
<button class="btn btn-primary" type="reset">Reset</button>
|
|
<button type="submit" class="btn btn-success">Submit</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- /Body page content -->
|
|
|
|
<script>
|
|
|
|
// hide the dropdown arrow
|
|
|
|
$(document).ready(function() {
|
|
|
|
$("#user_dropdown").addClass("hide-arrow");
|
|
$("input[name='created_by']").on("change", function() {
|
|
var inputValue = $(this).val();
|
|
if (inputValue === "<?php echo user()->name;?> (<?php echo user()->id;?>)") {
|
|
$("#user_dropdown").removeClass("hide-arrow");
|
|
} else {
|
|
$("#user_dropdown").addClass("hide-arrow");
|
|
}
|
|
});
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- <script>
|
|
function validateFile(input) {
|
|
const file = input.files[0];
|
|
const allowedExtensions = ["jpg", "jpeg", "png", "pdf"];
|
|
const fileExtension = file.name.split(".").pop().toLowerCase();
|
|
|
|
if (!allowedExtensions.includes(fileExtension)) {
|
|
Swal.fire("Invalid file type. Only JPG, JPEG, PNG, and PDF files are allowed.");
|
|
input.value = ""; // Clear the input value
|
|
}
|
|
}
|
|
|
|
</script>
|
|
-->
|
|
<script>
|
|
|
|
var dateFormat = "dd-mm-yy";
|
|
var fromDateInput = $("#ExpenseDate");
|
|
console.log(fromDateInput);
|
|
|
|
fromDateInput.datepicker({
|
|
dateFormat: dateFormat,
|
|
changeYear: true,
|
|
changeMonth: true,
|
|
yearRange: "1990:c",
|
|
onSelect: function (dateText, inst) {
|
|
|
|
}
|
|
});
|
|
|
|
|
|
function validateFile(input) {
|
|
const file = input.files[0];
|
|
const allowedExtensions = ["jpg", "jpeg", "png", "pdf"];
|
|
const fileExtension = file.name.split(".").pop().toLowerCase();
|
|
|
|
if (!allowedExtensions.includes(fileExtension)) {
|
|
// Invalid file type
|
|
Swal.fire("Invalid file type. Only JPG, JPEG, PNG, and PDF files are allowed.");
|
|
input.value = ""; // Clear the input value
|
|
return;
|
|
}
|
|
|
|
if (fileExtension === "pdf") {
|
|
// Preview PDF
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const pdfObject = `<embed src="${e.target.result}" width="500" height="600" type="application/pdf">`;
|
|
document.getElementById("previewContainer").innerHTML = pdfObject;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
// Preview image
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const imageObject = `<img src="${e.target.result}" alt="Preview" width="500">`;
|
|
document.getElementById("previewContainer").innerHTML = imageObject;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
function matchnum(event)
|
|
{
|
|
var charcode;
|
|
|
|
charcode = event.which || event.keyCode;
|
|
|
|
if(charcode>= 48 && charcode <= 57)return true; //only numbers
|
|
return false;
|
|
|
|
}
|
|
|
|
$(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() {
|
|
|
|
});
|
|
|
|
$('input[type="radio"][name="created_by"]').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; ?> (<?php echo user()->id;?>)') {
|
|
|
|
$.ajax({
|
|
url: '<?php echo base_url('Expence/get_emp_name/')?>"',
|
|
method: 'GET',
|
|
dataType: 'json',
|
|
success: function(response) {
|
|
|
|
$('#user_dropdown').append(response);
|
|
$('#user_dropdown').prop('disabled', false);
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error(error);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
</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");
|
|
|
|
console.log(manager_id);
|
|
|
|
$("#manager_id").val(manager_id);
|
|
|
|
|
|
})
|
|
|
|
</script>
|
|
<!-- <script>
|
|
function PreviewImage() {
|
|
var oFReader = new FileReader();
|
|
oFReader.readAsDataURL(document.getElementById("formFile").files[0]);
|
|
|
|
oFReader.onload = function (oFREvent) {
|
|
document.getElementById("uploadPreview").src = oFREvent.target.result;
|
|
};
|
|
};
|
|
</script> -->
|
|
<script>
|
|
function handleFiles(files) {
|
|
const dropZone = document.getElementById('drop-zone');
|
|
const previewContainer = document.getElementById('preview-container');
|
|
previewContainer.innerHTML = '';
|
|
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files[i];
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = function(e) {
|
|
const previewItem = document.createElement('div');
|
|
previewItem.className = 'preview-item';
|
|
|
|
if (file.type.startsWith('image/')) {
|
|
const img = document.createElement('img');
|
|
img.src = e.target.result;
|
|
previewItem.appendChild(img);
|
|
} else if (file.type === 'application/pdf') {
|
|
const obj = document.createElement('object');
|
|
obj.data = e.target.result;
|
|
obj.type = 'application/pdf';
|
|
obj.width = '100%';
|
|
obj.height = '200';
|
|
previewItem.appendChild(obj);
|
|
}
|
|
|
|
previewContainer.appendChild(previewItem);
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
dropZone.classList.remove('dragover');
|
|
}
|
|
|
|
function handleDragOver(e) {
|
|
e.preventDefault();
|
|
const dropZone = document.getElementById('drop-zone');
|
|
dropZone.classList.add('dragover');
|
|
}
|
|
|
|
function handleDragLeave(e) {
|
|
e.preventDefault();
|
|
const dropZone = document.getElementById('drop-zone');
|
|
dropZone.classList.remove('dragover');
|
|
}
|
|
|
|
function initializeDropZone() {
|
|
const dropZone = document.getElementById('drop-zone');
|
|
const fileInput = document.getElementById('file-input');
|
|
|
|
dropZone.addEventListener('dragover', handleDragOver);
|
|
dropZone.addEventListener('dragleave', handleDragLeave);
|
|
|
|
dropZone.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
const files = e.dataTransfer.files;
|
|
handleFiles(files);
|
|
});
|
|
|
|
fileInput.addEventListener('change', function(e) {
|
|
const files = e.target.files;
|
|
handleFiles(files);
|
|
});
|
|
}
|
|
|
|
initializeDropZone();
|
|
|
|
</script>
|
|
|
|
|