<style>
.submit_pdf {
    background-image: url(./assets/images/file-icons/pdf.png);
    border: 0px;
    background-color: #FFFFFF;
    color: transparent;
    margin: 5px 0 10px 0;
    height: 25px;
    width: 25px;
	float:none !important;
}
.submit_excel {
    background-image: url(./assets/images/file-icons/xlsx.png);
    border: 0px;
    background-color: #FFFFFF;
    color: transparent;
    margin: 5px 0 10px 20px;
    height: 25px;
    width: 25px;
}
.print_chart {
    background-image: url(./assets/images/file-icons/chart.png);
    border: 0px;
    background-color: #FFFFFF;
    color: transparent;
    margin: 5px 0 10px 20px;
    height: 24px;
    width: 24px;
}
.cht-pie{
    width: 75%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 60px;
    background: #f3f3f3;
    padding: 30px 30px;
    box-shadow: -1px 20px 7px -18px #717171;
}
</style>
<aside class="right-side">
    <section class="content-header">
        <div class="title_bar">
            <h1 class="major_txt_color"><?php echo $title;?></h1>
            <div class="breadcrumb_container"><?php echo breadcrumb_links();?></div>
        </div>
    </section>
    <?php $general = get_general_setting();?>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <!-- /.box -->
                <div class="box box-primary">
                    <div class="box-body table-responsive">
                        <div class="cht-pie">
                            <canvas id="chart-area"></canvas>
                        </div>
                        
                        <form name="get_data_search" action="<?php echo $form_action;?>" method="post" class="search_form validate_form">
                            <div class="col-xs-12">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label >Start Date</label>
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="start_date" placeholder="DD-MM-YYYY" style="padding: 6px 12px;margin-right:5%;width:100%;" id="start_date" name="start_date" value="<?php echo (!empty($start_date)) ? $start_date : date('d-m-Y');?>" autocomplete="off" >
                                            
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label >End Date</label>
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <?php 
                                                $add_days = 30;
                                                $date = (!empty($start_date)) ? date('Y-m-d',strtotime($start_date)) : date('Y-m-d');
                                                $d = date('d-m-Y',strtotime($date) + (24*3600*$add_days));
                                            ?>
                                            <input type="text" class="end_date" placeholder="DD-MM-YYYY" style="padding: 6px 12px;margin-right:5%;width:100%;"  id="end_date" name="end_date" value="<?php echo (!empty($end_date)) ? $end_date : $d;?>" autocomplete="off" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="col-md-3">&nbsp;</div>
                                <div class="col-md-6" style="text-align: center;">
                                    <input type="submit" value="Submit" name="submit" class="btn btn-danger btn-sm" style="background-color: #e33739; border-color: #e33739;margin-right: 10px;" />
                                    <input type="submit" value="Print Data" name="submit" class="btn btn-primary btn-sm" style="margin-right: 10px;" />
                                    <input type="submit" name="submit" value="<?php echo (!empty($pdftype)) ? $pdftype : 'Pdf Data';?>" class="submit_pdf" title="Export PDF" />
                                    <input type="submit" name="submit" value="<?php echo (!empty($exceltype)) ? $exceltype : 'Excel Data';?>" class="submit_excel" title="Export Excel" />
                                    <input type="submit" name="submit" value="<?php echo (!empty($charttype)) ? $charttype : 'Chart Data';?>" class="print_chart" title="PDF Chart" />
                                </div>                                
                                <div class="col-md-3">&nbsp;</div>
                            </div>
                        </form>
                    </div>
                    <div class="box-body table-responsive" style="clear:both;">                       
                        <div style="max-height: 410px; overflow-y: auto;">
                            <table class="table table-bordered table-striped filterTable" id="filterTable">
                                <thead>
                                    <tr>
                                        <th width="5%" class="align-center">S.No</th>
                                        <th width="14%" class="align-center">Description</th>
                                        <th width="15%" class="align-center">Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php 
                                    $total_amt 	= 0;
                                    $start_date = (!empty($start_date)) ? $start_date : date('d-m-Y');
                                    $add_days 	= 30;
                                    $d 			= date('d-m-Y',strtotime($start_date) + (24*3600*$add_days));
                                    $end_date 	= (!empty($end_date)) ? $end_date : date('d-m-Y');
                                    
									if(count($results) > 0) { 
                                        $i = 0;
                                        foreach( $results as $key => $row) :
											$total_amt += $row['amount'];
											$chartamout[$row['service_name']] += $row['amount'];
                                    ?>
                                            <tr>
                                                <td class="align-center"><?php echo ++$i;?></td>
                                                <td><?php echo $row['service_name']; ?></td>
                                                <td class="align-right"><?php echo number_format($row['amount'],2,'.','');?></td>
                                            </tr>
                                    <?php endforeach; ?>                                       
                                    <?php } else {?>
                                        <tr>
                                            <td colspan="3" style="color: #0B6CCB;"><center>No Records Found!</center></td>
                                        </tr>
                                    <?php } ?>
                                </tbody>    
                                <?php if(count($results) > 0) { ?>
                                <tfoot>
                                	<tr>
                                        <td align="right">&nbsp;</td>
                                        <td align="right">Total</td>
                                        <td align="right"><?php echo number_format($total_amt,2,'.','');?></td>
                                    </tr>
                                </tfoot>
                                <?php } ?>                      
                            </table>
                        </div>
                    </div><!-- /.box-body -->
                    
                </div><!-- /.box -->
            </div>
        </div>
    </section><!-- /.content -->
</aside><!-- /.right-side -->
<!-- ./wrapper -->
<div class="modal fade" id="pdfModal" role="dialog">
    <div class="modal-dialog modal-lg">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Salary Report</h4>
        </div>
        <div class="modal-body">
         <iframe src="" class="pdf_iframe" width="850" height="600"></iframe>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
</div>

<div class="modal fade" id="pdfchartModal" role="dialog">
    <div class="modal-dialog modal-lg">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Salary Report Chart PDF</h4>
        </div>
        <div class="modal-body">
         <iframe src="" class="pdf_iframe" width="850" height="600"></iframe>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
</div>
<?php 
//echo "<pre>"; print_r($chartamout); echo "</pre>";  
//$servicess 	= "Salary Report"; 
$label 		= '';
$dataval 	= '';

if($chartamout){
	$barchart_label	= array();
	$barchart_data	= array();
	foreach($chartamout as $key => $amount){
		if(empty($label)){
			$label = "'".$key."'";
		}else{
			$label .= ",'".$key."'";
		}
		
		if(empty($dataval)){
			$dataval = "'".number_format($amount,2,".","")."'";
		}else{
			$dataval .= ",'".number_format($amount,2,".","")."'";
		}
	}		
}
?>

<script src="<?php echo base_url().'assets/js/Chart.min.js'?>"></script>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [<?php echo $label; ?>],
    datasets: [{
      backgroundColor: [
        "#ff4700",
        "#FFA07A",
        "#bc00bf",
        "#FA8072",
        "#E9967A",
        "#E74C3C",
        "#34495E",
        "#bf8400",
        "#148F77",
        "#dd0000",
        "#0093f4",
		"#B22222",
		'#FFD700',
		'#FFEFD5',
		'#FFE4B5',
		'#7CFC00',
		'#00FF7F',
		'#98FB98',
		'#808000',
		'#00FFFF',
		'#008B8B'       
      ],
      //label: '',
      data: [<?php echo $dataval; ?>]
     
    }]
    
  },
  options: {
	  		tooltips: {
			  callbacks: {
					label: function(tooltipItem, data) {
						var value = data.datasets[0].data[tooltipItem.index];
						if(parseInt(value) >= 1000){
						   return 'S$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
						} else {
						   return 'S$' + value;
						}
					}
			  } // end callbacks:
			}, //end tooltips
          responsive: true,
          legend: false,
		  scales: {
				yAxes: [{
					ticks: {
						beginAtZero: true
					}
				}]
			}
        }
	});
};    
    
    $(document).ready(function() {
		<?php if(isset($_SESSION['pdf_salary'])): ?>
        var srcval='<?php echo base_url().'uploads/salary_report_pdf/'.$_SESSION['pdf_salary_file']; ?>';
        $('.pdf_iframe').attr("src",srcval);
        $('#pdfModal').modal({"show":true}); 
      <?php 
      unset($_SESSION['pdf_salary']);
      endif; 
	  ?>
	  
	  <?php if(isset($_SESSION['pdf_chart'])): ?>
		var srcval='<?php echo base_url().'uploads/salary_report_pdf/'.$_SESSION['pdf_chart_file']; ?>';
		$('.pdf_iframe').attr("src",srcval);
		$('#pdfchartModal').modal({"show":true}); 
		<?php 
		$_SESSION['pdf_chart'] = '';
		unset($_SESSION['pdf_chart']);
		endif; 
		?>
        //change_todate();
        $('.start_date').bootstrapMaterialDatePicker({ 
            time: false, 
            format: 'DD-MM-YYYY'
        }).on('change', function(){
            if($('.end_date').val() != '') {
                $('.end_date').val('');
            }
            change_todate();
        });
        
        $('.end_date').bootstrapMaterialDatePicker({ 
            time: false, 
            format: 'DD-MM-YYYY'
        });
        change_todate();
    });
   
    function change_todate() {
        if (($('.start_date').val() != '') && ($('.start_date').val()!= undefined)) {
            var start_date_arr = $('.start_date').val().split('-');
            var start_date_obj = new Date(start_date_arr[2], (start_date_arr[1] - 1), start_date_arr[0]);
            var end_date_start_obj = new Date(start_date_obj.getTime());// + (27 * 24 * 60 * 60 * 1000));
            var start_date = (end_date_start_obj.getDate()) + '-' + (end_date_start_obj.getMonth() + 1) + '-' + end_date_start_obj.getFullYear();
            $('.end_date').bootstrapMaterialDatePicker('setMinDate', start_date);
        }
    }
</script>