bbone/application/modules/Expence/views/expence_list.php
2023-06-29 11:36:03 +05:30

269 lines
7.8 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;
}
div.dataTables_wrapper div.dataTables_filter{
margin-top: -44px !important; //search to up
</style>
<style>
/* Modal Popup Styles */
.modal {
display: none; /* Hide the modal by default */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}
.modal img {
display: block;
margin: 0 auto;
max-width: 80%;
max-height: 100%;
margin-top: 5%;
margin-bottom: 5%;
}
.close {
color: #fff;
font-size: 40px;
font-weight: bold;
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 30px;
border: 1px solid #888;
width: 380px;
height: 280px;
text-align: center;
}
</style>
</head>
<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-sm btn-primary" style="margin-top: 20px;">Back</a>
</ul>
<h1>My Approvals</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">Claim Date</th>
<th class="column-title">Employee Name</th>
<th class="column-title">Description </th>
<th class="column-title">Expense Date</th>
<th class="column-title">Expense Cost()</th>
<th class="column-title">Claim Raised By</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_date; ?><br><?php echo $value->created_time;?></td>
<td class=" "><?php echo $value->name; ?> (<?php echo $value->emp_id; ?>) </td>
<td class=" "><?php echo $value->comments; ?></td>
<td class=" "><?php echo $value->date_of_expence; ?></td>
<td class=" ">₹ <?php echo $value->amount; ?></td>
<td class=" "><?php echo $value->created_by; ?></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(!empty($value->bill)) { ?>
<a onclick="openModal('<?php echo base_url(); ?>assets/uploads/Expence_Bill/<?php echo $value->bill; ?>')" title="ViewBill"><i class="fa fa-eye" aria-hidden="true" target="_blank"></i></a><br>
<?php } ?>
<?php if($value->status == 'pending') { ?>
<a href="<?php echo base_url('Expence/Approve_Expence')?>?id=<?php echo $value->id;?> "><i class="fa fa-check" aria-hidden="true"title="Approve" onclick = "return alert()" ></i></a> &nbsp;
<a href="#"><i class="fa fa-times test" aria-hidden="true" title="Decline" onclick="showCustomPrompt()"
id= "<?php echo $value->id; ?>"></i></a>&nbsp;
<?php } ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="customPrompt" class="modal">
<div class="modal-content ">
<span onclick="$('#customPrompt').hide()" style="text-align: right;"><i class="fa fa-times fa-2x" aria-hidden="true"></i></span>
<h3>Decline Reason</h3>
<input list="browsers" style="padding:20px; margin:6px;" 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('Expence/Decline_expence');?>",
type:"get",
success: function(response) {
window.location ='<?php echo base_url('Expence/expence_list');?>';
}
});
else
alert('Decline Reason is required');
}
</script>
</div>
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img id="modalImage" src="" alt="Image">
</div>
<!-- JavaScript -->
<script>
function openModal(itemId) {
// Get the image URL for the item with the specified ID
var imageUrl = itemId;
// Set the image source of the modal
document.getElementById("modalImage").src = imageUrl;
// Open the modal
var modal = document.getElementById("myModal");
modal.style.display = "block";
// Close the modal when the user clicks on the close button
var closeButton = document.getElementsByClassName("close")[0];
closeButton.onclick = function() {
modal.style.display = "none";
}
}
</script>
<script>
function alert()
{
Swal.fire({
title: 'Custom animation with Animate.css',
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
}
})
}
</script>