bbone/application/modules/Expence/views/expence_form.php
2024-01-10 12:24:58 +05:30

486 lines
15 KiB
PHP

<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://localhost/ams//assets/default/bootstrap-daterangepicker/daterangepicker.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></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;
}
.fa .fa-calendar {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
}
</style>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<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; font-size: small;">Back</a>
</ul>
<h3>New Claim</h3>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br />
<form id="expenceForm" 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="x_panel">
<div class="item form-group">
<label class="control-label col-md-2 col-sm-2 label-align" for="last-name">Expense Requisted For</label>
<div class="col-md-4 col-sm-4">
<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>
<label class="control-label col-md-1 col-sm-1 label-align" 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-1 col-sm-1 label-align" for="first-name">Expense Name<a style="color:red;">*</a></label>
<div class="col-md-5 col-sm-5 ">
<div class="form-group">
<input type='text' id="expense_name" class="form-control" name="expense_name" value="<?php if(isset($expense_data[0]->id)){echo $expense_data[0]->expense_name; } ?>" autocomplete='off' required />
</div>
</div>
<label class="control-label col-md-1 col-sm-1 label-align" for="first-name">Business Reason</label>
<div class="col-md-5 col-sm-5 ">
<div class="form-group">
<input type='text' class="form-control" name="business_reason" value="<?php if(isset($expense_data[0]->id)){echo $expense_data[0]->business_reason; } ?>" autocomplete='off'/>
</div>
</div>
</div>
</div>
<div class="x_panel">
<div class="x_title">
<!-- <ul class="nav navbar-right panel_toolbox">
<button type="button" id="add-button" onclick="createAndAppendFormGroup()" class="btn btn-info" style="font-size:small;" >Add</button>
</ul> -->
<div class="clearfix"></div>
</div><br>
<?php if(isset($expense_child_data[0]->id)) { foreach ($expense_child_data as $key => $value) { ?>
<div class="item form-group">
<label class="control-label col-md-1 col-sm-1 label-align" 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='date' id='ExpenseDate' class="form-control" placeholder="DD-MM-YYYY" required name="date_of_expence[]" value="<?php echo $value->date_of_expense ?>" autocomplete='off' /><i class="fa fa-calendar"></i>
</div>
<input type="hidden" name="expense_pid" value="<?php echo $expense_data[0]->id; ?>">
</div>
<label class="control-label col-md-1 col-sm-1 label-align" 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 echo $value->amount ?>" class="form-control" onkeypress = "return matchnum(event)" type="number" name="middle-name" autocomplete='off'>
</div>
</div>
<div class="item form-group flex-wrap">
<label class="control-label col-md-1 col-sm-1 label-align" for="last-name">Description</label>
<div class="col-md-5 col-sm-3">
<textarea id="comments" name="description[]" value="" class="form-control" style="height:50px !important;" type="text" ><?php echo $value->description ?></textarea>
<!-- <input type="hidden" id="manager_id" name="manager" value=""> -->
</div>
<label class="control-label col-md-1 col-sm-1 label-align" required for="first-name">Recipt</label>
<div class="col-md-5 col-sm-5 ">
<input id="formFile" name="bill[]" onchange="validateFile(this)" class="typeFile" type="file" value="<?php echo $value->bill ?>" multiple>
</div>
<div class="col-12"><button type="button" class="float-right btn btn-danger" onclick="remove_row(<?php echo $value->id ?>)" id="remove-button2"><i class="fa fa-trash"></i></button></div></div>
<?php } } else { ?>
<div class="item form-group">
<label class="control-label col-md-1 col-sm-1 label-align" 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'/>
<i class="fa fa-calendar" style=" position: absolute; right: 25px; top: 12px;z-index: 0;"></i>
</div>
</div>
<label class="control-label col-md-1 col-sm-1 label-align" for="first-name"> Amount <a style="color:red;">*</a></label>
<div class="col-md-5 col-sm-5 ">
<input id="cost" name="amount[]" required value="" 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-1 col-sm-1 label-align" for="last-name">Description</label>
<div class="col-md-5 col-sm-3">
<textarea id="comments" name="description[]" value="" class="form-control" style="height:50px !important;" type="text" ></textarea>
</div>
<label class="control-label col-md-1 col-sm-1 label-align" required for="first-name">Recipt</label>
<div class="col-md-5 col-sm-5 ">
<input id="formFile" name="bill[]" onchange="validateFile(this)" class="typeFile" type="file" value="" multiple></div>
</div><div class="col-12"><button type="button" id="add-button" onclick="createAndAppendFormGroup()" class="btn btn-primary float-right">Add</button></div>
<?php } ?>
<div id="formContainer"></div>
</div>
<div class="ln_solid"></div>
<div class="item form-group">
<div class=" offset-md-8">
<a href="<?php echo base_url();?>Expence/emp_expence_list" class="btn btn-secondary">Cancel</a>
<button type="submit" class="btn btn-primary" name="save">Save</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='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>
const datepickerInput = document.getElementById('ExpenseDate');
flatpickr(datepickerInput, {
dateFormat: 'd-m-Y',
maxDate: new Date(),
allowInput: true,
autoclose:true,
onChange: function(selectedDates, dateStr) {
console.log('Selected date: ', dateStr);
}
});
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)) {
new PNotify({
title: 'Invalid file type.',
text: 'Only JPG, JPEG, PNG, and PDF files are allowed.',
styling: 'bootstrap3'
});
input.value = "";
return;
}
}
</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('required', true);
$('#user_dropdown').prop('disabled', false);
},
error: function(xhr, status, error) {
console.error(error);
}
});
}
});
});
$('input[type="radio"][name="created_by"]').change(function() {
var selectedValue = $(this).val();
var $userDropdown = $('#user_dropdown');
if (selectedValue === '<?php echo user()->name; ?> (<?php echo user()->id;?>)') {
$('#user_dropdown').prop('required', true);
$('#user_dropdown').prop('disabled', false);
}
});
</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>
document.addEventListener("DOMContentLoaded", function() {
var addButton = document.getElementById("add-button");
addButton.style.display = "block"; // Show the "Add" button initially
});
var i=1;
function createAndAppendFormGroup() {
var html1 = '';
i++
html1 += '<div id="removeChild'+i+'"><br>'
html1 += '<br><div class="x_title"></div><br>'
html1 += '<div class="item form-group">';
html1 += '<label class="control-label col-md-1 col-sm-1 label-align" for="first-name"> Date of Expense<a style="color:red;">*</a></label>';
html1 += '<div class="col-md-5 col-sm-5 "><div class="form-group"><input type="text" id="datepicker'+i+'" class="form-control date-picker" placeholder="DD-MM-YYYY" name="date_of_expence[]" value="" autocomplete="off" required/><i class="fa fa-calendar" style=" position: absolute; right: 25px; top: 12px;z-index: 0;"></i></div></div>';
html1 += '<label class="control-label col-md-1 col-sm-1 label-align" for="first-name"> Amount <a style="color:red;">*</a></label>';
html1 += '<div class="col-md-5 col-sm-5 "><input id="cost" name="amount[]" required class="form-control" onkeypress="return matchnum(event)" type="number" name="middle-name" autocomplete="off"></div>';
html1 += '</div>';
html1 += '<div class="item form-group flex-wrap">'
html1 += '<label class="control-label col-md-1 col-sm-1 label-align" for="last-name">Description</label>'
html1 += '<div class="col-md-5 col-sm-3"><textarea id="comments" name="description[]" value="" class="form-control" style="height:50px !important;" type="text" ></textarea></div>'
html1 += '<label class="control-label col-md-1 col-sm-1 label-align" required for="first-name">Recipt </label>'
html1 += '<div class="col-md-5 col-sm-5 "><input id="formFile" name="bill[]" multiple onchange="validateFile(this)" class="typeFile" type="file" value="" ></div>'
html1 += '</div>'
html1 += '<div class="col-12"><button type="button" class="float-right btn btn-danger"" id="remove-button" onclick="removebutton('+i+')"><i class="fa fa-trash"></i></button></div><button type="button" id="add-button" onclick="createAndAppendFormGroup()" class="btn btn-primary float-right">Add</button></div>'
var formContainer = document.getElementById('formContainer');
//formContainer.innerHTML += html1;
formContainer.insertAdjacentHTML('beforeend', html1);
const datepickerInput = document.getElementById('datepicker'+i);
flatpickr(datepickerInput, {
dateFormat: 'd-m-Y',
maxDate: new Date(),
autoclose:true,
allowInput: true,
onChange: function(selectedDates, dateStr) {
console.log('Selected date: ', dateStr);
}
});
}
function removebutton(index) {
//console.log(index)
var element = document.getElementById('removeChild'+ index);
//console.log(element)
if (element) {
element.remove();
}
}
</script>
<script>
function remove_row(id)
{
$.ajax({
data:{id : id},
url:"<?php echo base_url('Expence/remove_row');?>",
type:"get",
success: function(response) {
if(response==true);
{
location.reload(true)
}
}
});
}
</script>
<script>
let formSubmitted = false;
document.getElementById('expenceForm').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>