297 lines
7.9 KiB
PHP
297 lines
7.9 KiB
PHP
|
|
<head>
|
|
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css'>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
|
|
|
<style>
|
|
.design {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.design-form {
|
|
background-color: #fefefe;
|
|
margin: 15% auto;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 380px;
|
|
height: 280px;
|
|
text-align: center;
|
|
}
|
|
|
|
button {
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
|
|
#myImg {
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#myImg:hover {opacity: 0.7;}
|
|
|
|
/* The Modal (background) */
|
|
.modal {
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Stay in place */
|
|
z-index: 1; /* Sit on top */
|
|
padding-top: 100px; /* Location of the box */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%; /* Full width */
|
|
height: 100%; /* Full height */
|
|
overflow: auto; /* Enable scroll if needed */
|
|
background-color: rgb(0,0,0); /* Fallback color */
|
|
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
|
|
}
|
|
|
|
/* Modal Content (image) */
|
|
.modal-content {
|
|
margin: auto;
|
|
display: block;
|
|
width: 80%;
|
|
max-width: 700px;
|
|
}
|
|
|
|
/* Caption of Modal Image */
|
|
#caption {
|
|
margin: auto;
|
|
display: block;
|
|
width: 80%;
|
|
max-width: 700px;
|
|
text-align: center;
|
|
color: #ccc;
|
|
padding: 10px 0;
|
|
height: 150px;
|
|
}
|
|
|
|
/* Add Animation */
|
|
.modal-content, #caption {
|
|
-webkit-animation-name: zoom;
|
|
-webkit-animation-duration: 0.6s;
|
|
animation-name: zoom;
|
|
animation-duration: 0.6s;
|
|
}
|
|
|
|
@-webkit-keyframes zoom {
|
|
from {-webkit-transform:scale(0)}
|
|
to {-webkit-transform:scale(1)}
|
|
}
|
|
|
|
@keyframes zoom {
|
|
from {transform:scale(0)}
|
|
to {transform:scale(1)}
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 35px;
|
|
color: #f1f1f1;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: #bbb;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 100% Image Width on Smaller Screens */
|
|
@media only screen and (max-width: 700px){
|
|
.modal-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<div class="col-md-12 col-sm-12 ">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h1>Expence List</h1>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
<div class="row">
|
|
<div class="col-sm-12" style="overflow: auto;">
|
|
<table id="datatable-buttons" class="table table-striped table-bordered" width="100%">
|
|
<thead>
|
|
<tr class="headings">
|
|
<th class="column-title">Creadted Date</th>
|
|
<th class="column-title">Employee Id</th>
|
|
<th class="column-title">Employee Name</th>
|
|
<th class="column-title">Expence Date</th>
|
|
<th class="column-title">Expence Raised By</th>
|
|
<th class="column-title">Expence Cost(₹)</th>
|
|
<th class="column-title">Expence Bill</th>
|
|
<th class="column-title">Comments </th>
|
|
<th class="column-title">Status </th>
|
|
<th class="column-title" >Action </th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($tableData as $key => $value) { ?>
|
|
<tr class="even pointer">
|
|
|
|
<td class=" "><?php echo $value->created_at; ?> </td>
|
|
<td class=" "><?php echo $value->emp_id; ?> </td>
|
|
<td class=" "><?php echo $value->name; ?> </td>
|
|
<td class=" "><?php echo $value->date_of_expence; ?></td>
|
|
<td class=" "><?php echo $value->created_by; ?></td>
|
|
<td class=" ">₹ <?php echo $value->amount; ?></td>
|
|
<td class=" ">
|
|
<img id="myImg" style="width: 50%; display: block;" src="<?php echo base_url(); ?>assets/uploads/Expence_Bill/<?php echo $value->bill; ?>" alt="invoice"/>
|
|
</td>
|
|
<td class=" "><?php echo $value->comments; ?></td>
|
|
<?php if($value->status == 'pending'){ ?>
|
|
<td style="color:#e68a00"><?php echo $value->status; ?></td>
|
|
<?php }
|
|
else if($value->status == 'Approved'){ ?>
|
|
<td style="color:green"><?php echo $value->status; ?>By <?php echo $value->approved_by; ?><br><?php echo $value->approved_at;?></td>
|
|
<?php }
|
|
else if($value->status == 'Declined'){ ?>
|
|
<td style="color:red"><?php echo $value->status; ?><br><?php echo $value->DReason; ?></td>
|
|
<?php }
|
|
else if($value->status == 'canceled'){ ?>
|
|
<td style="color:darkcyan;"><?php echo $value->status; ?></td>
|
|
<?php }
|
|
else{
|
|
|
|
}?>
|
|
<td style=" text-align: center; font-size: 16px;">
|
|
|
|
<?php if($value->status == 'pending') { ?>
|
|
|
|
<a href="<?php echo base_url('Employee/Approve_Expence')?>?id=<?php echo $value->id;?> "><i class="fa fa-check" aria-hidden="true"title="Approve" onclick = "return confirm('Are you sure to Approve This Leave ')" ></i></a>
|
|
|
|
|
|
<a href="#"><i class="fa fa-times test" aria-hidden="true" title="Decline" onclick="showCustomPrompt()"
|
|
id= "<?php echo $value->id; ?>"></i></a>
|
|
|
|
<?php } ?>
|
|
</td>
|
|
</tr>
|
|
<?php } ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="customPrompt" class="design">
|
|
<div class="design-form ">
|
|
<span onclick="$('#customPrompt').hide()">X</span>
|
|
<h3>Decline Reason</h3>
|
|
<input list="browsers" id="decline_reason" required name="myBrowser" />
|
|
<datalist id="browsers" >
|
|
<?php foreach ($dropdown as $key => $value) { ?>
|
|
<option value="<?php echo $value->enum_value; ?>"><?php echo $value->enum_value; ?></option>
|
|
<?php } ?>
|
|
</datalist>
|
|
|
|
<button onclick="submitCustomPrompt()" type="button" class="btn btn-primary">Submit</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<div class="modal fade bs-example-modal-lg" id="ItemModal" tabindex="-1" role="dialog" aria-hidden="true"></div>
|
|
<div class="modal bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true" id="popup"> </div>
|
|
|
|
|
|
<script>
|
|
|
|
function showCustomPrompt() {
|
|
var customPrompt = document.getElementById("customPrompt");
|
|
customPrompt.style.display = "block";
|
|
}
|
|
|
|
function submitCustomPrompt() {
|
|
|
|
var id = $('.test').attr("id");
|
|
var reason = document.getElementById("decline_reason").value;
|
|
|
|
if( reason != "")
|
|
|
|
$.ajax(
|
|
{
|
|
data:{id : id , reason : reason },
|
|
url:"<?php echo base_url('Employee/Decline_expence');?>",
|
|
type:"get",
|
|
success: function(response) {
|
|
|
|
window.location ='<?php echo base_url('Employee/expence_list');?>';
|
|
}
|
|
|
|
|
|
});
|
|
else
|
|
|
|
alert('Decline Reason is required');
|
|
}
|
|
|
|
</script>
|
|
</div>
|
|
|
|
<!-- The Modal -->
|
|
<div id="myModal" class="modal">
|
|
<span class="close">×</span>
|
|
<img class="modal-content" id="img01">
|
|
<div id="caption"></div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
|
|
|
|
$('#myImg').on('click', function(){
|
|
|
|
var modal = document.getElementById("myModal");
|
|
var modalImg = document.getElementById("img01");
|
|
var captionText = document.getElementById("caption");
|
|
img.onclick = function(){
|
|
modal.style.display = "block";
|
|
modalImg.src = this.src;
|
|
captionText.innerHTML = this.alt;
|
|
}
|
|
|
|
// Get the <span> element that closes the modal
|
|
var span = document.getElementsByClassName("close")[0];
|
|
|
|
// When the user clicks on <span> (x), close the modal
|
|
span.onclick = function() {
|
|
modal.style.display = "none";
|
|
}
|
|
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|