<?php //header('Content-Type: text/html; charset=utf-8'); ?>
<style>
.submit_excel {
    background-image: url(./assets/images/file-icons/xlsx.png);
    border: 0px;
    background-color: #FFFFFF;
    color: transparent;
    /*float: left;*/
    margin: 5px 0 10px 20px;
    height: 25px;
    width: 25px;
}
.submit_pdf {
    background-image: url(./assets/images/file-icons/pdf.png);
    border: 0px;
    background-color: #FFFFFF;
    color: transparent;
    float: initial;
    margin: 5px 0 10px 0;
    height: 25px;
    width: 25px;
}
.print_chart {
    background-image: url(./assets/images/file-icons/printchart.png);
    border: 0px;
    background-color: #FFFFFF;
    color: transparent;
    /*float: left;
    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>
            <?php if(!IS_KSK_CMS) { ?><div class="breadcrumb_container"><?php echo breadcrumb_links();?></div><?php } ?>
        </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>
                        <div class="col-xs-12">
                            <div class="col-md-2">&nbsp;</div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <span style="padding-left: 116px; font-size: 16px;">Date :&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $start_date;?></span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <span style="padding-left: 116px; font-size: 16px;">Period :&nbsp;&nbsp;&nbsp;&nbsp;
                                        <?php if($period == 1) {
                                            echo 'Morning';
                                        } elseif($period == 2) {
                                            echo 'Evening';
                                        } else {
                                            echo '-';
                                        }?>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-2">&nbsp;</div>
                        </div>
                    </div>
                    <div class="box-body table-responsive">
                        <table class="table table-bordered table-striped data_table filterTable" id="filterTable">
                            <thead>
                                <tr>
                                    <th width="5%" class="align-center">S.No</th>
                                    <th class="align-center">Receipt No</th>
                                    <th class="align-center">Type</th>
                                    <th class="align-center">Function Date</th>
                                    <th class="align-center">Booked Date</th>
                                    <th class="align-center">Period</th>
                                    <th class="align-center">Name 1</th>
                                    <th class="align-center">Tamil Name 1</th>
                                    <th class="align-center">Star 1</th>
                                    <th class="align-center">Name 2</th>
                                    <th class="align-center">Tamil Name 2</th>
                                    <th class="align-center">Star 2</th>
                                    <th class="align-center">Contact No</th>
                                    <th class="align-center">Email</th>
                                    <th width="15%" class="align-center">Particulars</th>
                                    <th class="align-center">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if(count($results) > 0) {  $total_amt = 0;?>
                                    <?php foreach($results as $key=>$value) {
											$chartData[$value->service_name] += $value->bp_amount;
                                            $total_amt += $value->bp_amount;
                                            $tooltip = ($value->status == 2) ? $value->del_reason : '';
                                        ?>
                                        <tr data-toggle="tooltip" title="<?php echo $tooltip;?>">
                                            <td class="align-center"><?php echo ++$key;?></td>
                                            <td><?php echo (($general->prefix == 1) ? $value->prefix : '') . $value->bp_rec_no;?></td>
                                            <td><?php echo text($value->service_name);?></td>
                                            <td><?php echo text(date('d-m-Y',strtotime($value->bp_fn_date)));?></td>
                                            <td><?php echo text(date('d-m-Y',strtotime($value->created_on)));?></td>
                                            <td><?php echo text($value->period_str);?></td>
                                            <td><?php echo text($value->bp_dev_name_1);?></td>
                                            <td><?php echo (!empty($value->bp_tamil_name_1)) ? '<span class="lang-tamil">' . $value->bp_tamil_name_1 . '</span>' : 'N/A';?></td>
                                            <td><?php echo text($value->star);?></td>
                                            <td><?php echo text($value->bp_dev_name_2);?></td>
                                            <td><?php echo (!empty($value->bp_tamil_name_2)) ? '<span class="lang-tamil">' . $value->bp_tamil_name_2 . '</span>' : 'N/A';?></td>
                                            <td><?php echo text($value->star2);?></td>
                                            <td><?php echo text($value->bp_contact_no);?></td>
                                            <td><?php echo text($value->bp_email);?></td>
                                            <td width="15%"><?php echo text(nl2br($value->bp_desc));?></td>
                                            <td class="align-right"><?php echo $value->bp_amount;?></td>
                                        </tr>
                                    <?php } ?>
                                <?php } ?>
                            </tbody>
                           <tfoot>
                                <?php if(!empty($total_amt)) { ?>
                                    <tr>
                                        <td colspan="15" align="right"><b>Total</b></td>
                                        <td align="right"><b><?php echo number_format($total_amt,2,'.','');?></b></td>
                                    </tr>
                                <?php } ?>
                          </tfoot>  
                        </table>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div>
        </div>
    </section><!-- /.content -->
</aside><!-- /.right-side -->
<!-- ./wrapper -->
<?php 
//echo "<pre>"; print_r($chartData); echo "</pre>"; exit;  
$label 		= '';
$dataval 	= '';

if($chartData){
	foreach($chartData 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
					}
				}]
			}
        }
});
};
</script>