File: //home/cafsindia/allyindian_com/sbltt/application/views/utilization/manage.php
<?php $this->load->view("partial/header"); ?>
<link rel="stylesheet" type="text/css" href="dist/data_tables/datatables.min.css"/>
<script type="text/javascript" src="dist/data_tables/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
<?php $this->load->view('partial/daterangepicker'); ?>
$('#daterangepicker').data('daterangepicker').setStartDate("<?php echo date($this->config->item('dateformat'), mktime(0,0,0,date("m"),1,date("Y"))); ?>");
var start_date = "<?php echo date('Y-m-d', mktime(0,0,0,date("m"),1,date("Y"))); ?>";
var end_date = "<?php echo date('Y-m-d', mktime(0,0,0,date("m")+1,1,date("Y"))-1); ?>";
$('#search').on('click', function (e){
$('#detail_list').DataTable().destroy();
$.ajax({
type: "POST",
url:"<?php echo base_url('index.php/Utilization/search'); ?>?",
data: {start_date: start_date,end_date: end_date},
success: function(data) {
var rslt = JSON.parse(data);
var tr = "";
for(i = 0,j=1; i < rslt.result.length; i++,j++) {
count = j;
op_driver_id = rslt.result[i].op_driver_id;
driver_name = rslt.result[i].d_name;
tour_days = rslt.result[i].tour_days;
local_days = rslt.result[i].local_days;
trip_days = rslt.result[i].trip_days;
company_days = rslt.result[i].company_days;
tr += "<tr><td style='text-align:center;'>"+count+"</td><td>"+driver_name+"</td><td style='text-align:center;cursor:pointer;'onclick=get_driver_utilization_info('"+start_date+"','"+end_date+"','"+op_driver_id+"','1')>"+tour_days+"</td><td style='text-align:center;cursor:pointer;'onclick=get_driver_utilization_info('"+start_date+"','"+end_date+"','"+op_driver_id+"','2')>"+local_days+"</td><td style='text-align:center;cursor:pointer;'onclick=get_driver_utilization_info('"+start_date+"','"+end_date+"','"+op_driver_id+"','3')>"+trip_days+"</td><td style='text-align:center;cursor:pointer;'onclick=get_driver_utilization_info('"+start_date+"','"+end_date+"','"+op_driver_id+"','4')>"+company_days+"</td></tr>";
}
$('#driver_utilization_report').html(tr);
$('#detail_list').DataTable({
"paging": false,
"ordering": false,
dom: 'Bfrtip',
buttons: ['excel'],
destroy: true,
});
},
});
});
});
function get_driver_utilization_info(start_date,end_date,op_driver_id,mode){
var frm = "get_driver_utilization_info";
$.ajax({
type: "POST",
url: "./dashboard/report_call.php",
data: {frm:frm,start_date:start_date,end_date:end_date,op_driver_id:op_driver_id,mode:mode},
success: function(data) {
$('#report_model_body').html(data);
$('#detail').DataTable( {
"paging": false,
"ordering": false,
dom: 'Bfrtip',
buttons: ['excel'],
});
$('#detail_list_model').modal('show');
},
});
}
</script>
<div id="table_holder" style="padding:0px;">
<div class="analysis_holder">
<h1>Driver Utilization Report</h1>
<div class="form-group">
<?php
echo form_label("Select Date", 'daterangepicker', array('class' => ''));
echo form_input(array('name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker'));
?>
</div>
<div class="form-group">
<?php
//echo form_label("Vehicle Type", 'vehicle_type', array('class' => '')); echo "<br/>";
//echo form_multiselect('vehicle_type[]', $vehicle_type, '', array('id' => 'vehicle_type', 'class' => 'selectpicker show-menu-arrow', 'data-none-selected-text' => '--Select Vehicle Type--', 'data-selected-text-format' => 'count > 1', 'data-style' => 'btn-default btn-sm', 'data-width' => 'fit'));
?>
</div>
<div class="form-group">
<button class="btn btn-primary btn-sm" id="search" > Search</button>
</div>
</div>
<div id="table">
<table id='detail_list' class='table table-hover table-striped col-style'">
<thead>
<tr style='font-weight:bold;text-align:center !important;background:#3369E6;'>
<th style='padding:4px; text-align:center;'>Si. No</th>
<th style='padding:4px;'>Driver Name</th>
<th style='padding:4px; text-align:center;'>Tour Days</th>
<th style='padding:4px; text-align:center;'>Local Days</th>
<th style='padding:4px; text-align:center;'>Trip Days</th>
<th style='padding:4px; text-align:center;'>Company Days</th>
</tr>
</thead>
<tbody id="driver_utilization_report"></tbody>
</table>
</div>
</div>
<div class="modal fade" id="detail_list_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" style="width: 90%;" role="document">
<div class="modal-content">
<div class="modal-header" style='padding: 5px 15px;'>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Detailed List</h4>
</div>
<div class="modal-body" id="report_model_body" style="height:260px;">
</div>
</div>
</div>
</div>
<style>
h1{
margin: 0;
width: auto;
font-size: 25px;
color: #d84f57;
font-weight: bold;
text-transform: initial;
margin-bottom: 15px;
}
.analysis_holder{
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
padding: 8px;
background-color: #EEEEEE;
margin-bottom: 15px;
}
.btn-group, .btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
float: right;
}
div.dataTables_wrapper div.dataTables_filter label {
font-weight: normal;
white-space: nowrap;
text-align: left;
float: left;
}
div.dataTables_wrapper div.dataTables_filter input {
margin-left: 0.5em;
display: inline-block;
width: auto;
width: 170px !important;
}
.buttons-html5 , .buttons-print {
color: #ffffff;
background-color: #d84f57;
border: 0px;
padding: 3px 15px;
font-size:12px
}
.pagination>li>a, .pagination>li>span {
position: relative;
float: left;
padding: 8px 15px;
line-height: 1.42857143;
text-decoration: none;
color: #ffffff;
background-color: #d84f57;
border: 1px solid transparent;
margin-left: -1px;
}
.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
color: #FFFFFF;
background-color:#d84f57;
border-color: transparent;
cursor: not-allowed;
}
</style>
<?php $this->load->view("partial/footer"); ?>