<style>
::-webkit-scrollbar {display:none;}
.page_loader {
     position: fixed;
     left: 0px;
     top: 0px;
     width: 100%;
     height: 100%;
     z-index: 9999;
     background: url('<?php echo base_url(); ?>assets/images/loader.gif') 50% 50% no-repeat rgb(249, 249, 249);
 }
</style>
<!--<div class="loader"></div>-->
<div class="page_loader"></div>

<?php 	
$logo_url 	= !empty($data['settings']['logo']) && file_exists(DIR_COMPANY_LOGO. $data['settings']['logo']) ? DIR_COMPANY_LOGO . $data['settings']['logo'] : 'assets/images/logo.png';
if(count($data['results']) > 0) {		
	foreach($data['results'] as $k => $r ) :
		$chartData[$r['exp_type_name']] += $r['exp_amount'];
	endforeach; 
}
$calArray	= $chartData;
arsort($calArray);
if($calArray){
	$i = 0;
	foreach($calArray as $greater){
	  if($i == 1)
	  	continue;
		
	  if($i == 0){
		  $num 		= (int)((int)$greater/6);
		  $round 	= (strlen($num)-1)*-1;
		  $stepSize =  round($num,$round); // prints 200
	  }
	  $i++;
	}
}else{
	$num 		= 20;
	$round 		= (strlen($num)-1)*-1;
	$stepSize 	=  round($num,$round);
} 
?>
<div id="print_content">
    <table width="100%" style="font-family:Verdana, Geneva, sans-serif">
        <tr>
            <td width="25%">
                <img src="<?php echo $logo_url; ?>"/>
            </td>
            <td width="50%" align="center">
                <table border="0" width="100%">
                    <tr>
                        <td align="center" style="font-size:24px;">
                            <strong><?php echo $data['settings']['temple_name']; ?></strong>
                        </td>
                    </tr>
                </table>
            </td>
            <td width="25%">&nbsp;</td>
        </tr>
        <tr><td colspan="3"><hr></td></tr>
        <tr>
            <td width="25%">&nbsp;</td>
            <td align="center" width="50%" style="font-weight:bold; font-size:24px;">
            <?php echo 'Temple Expenses Chart Report'; ?>
            </td>
            <td width="25%" style="font-size:16px;">&nbsp; </td>
        </tr>
        <tr><td colspan="3">&nbsp;</td></tr>
        <tr><td colspan="3">&nbsp;</td></tr><tr><td colspan="3">&nbsp;</td></tr><tr><td colspan="3">&nbsp;</td></tr>   
    </table>
	<canvas id="chart-area"></canvas>
</div>
<?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 type="text/javascript" src="<?php echo base_url().'assets/js/'; ?>library/jquery-1.11.1.min.js"></script>
<script src="<?php echo base_url().'assets/js/Chart.min.js'?>"></script>
<script src="<?php echo base_url().'assets/js/jspdf.min.js'; ?>"></script>
<script src="<?php echo base_url().'assets/js/html2canvas.min.js'; ?>"></script>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext('2d');
     Chart.defaults.global.defaultFontColor = "#ff0000";
     Chart.defaults.global.defaultFontSize = "18";
     Chart.defaults.global.defaultFontStyle = "bolder";
debugger;

var 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; ?>]
     
    }]
    
  }
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
      "hover": {
                    "animationDuration": 0
                },
                "animation": {
                  "duration": 1,
                    
                  "onComplete": function() {
                      
                    var chartInstance = this.chart,
                      ctx = chartInstance.ctx;
                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontColor, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily, Chart.defaults.global.defaultFontWeight);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function(dataset, i) {
                      var meta = chartInstance.controller.getDatasetMeta(i);
                      meta.data.forEach(function(bar, index) {
                        var data = "S$"+dataset.data[index];
                        ctx.fillText(data, bar._model.x, bar._model.y - 3);
                      });
                    });
                  }
                },
        tooltips: {
              "enabled": false
            },
          responsive: true,
         
          legend: false,
       fontColor: 'black',
         
		   scales: {
                  yAxes: [{
                    display: true,
                    gridLines: {
                      display: false
                    },
                    ticks: {
                      //max: Math.max(...data.datasets[0].data) + 50,
					  stepSize: <?php echo $stepSize; ?>,
                      display: true,
                      beginAtZero: true
                    }
                  }],
                  xAxes: [{
                    gridLines: {
                      display: true
                    },
                    ticks: {
                      beginAtZero: true
                    }
                  }]
               
                }
        }
});
};

function saveAsPDF() {
   html2canvas(document.getElementById("print_content"), {
      onrendered: function(canvas) {
         var img = canvas.toDataURL(); //image data of canvas
         var doc = new jsPDF();
         doc.addImage(img, 0, 2, 210, 150);
		var other_service_report = doc.output('blob');
		var formData = new FormData();
		formData.append('pdf', other_service_report);
		$.ajax('<?php echo base_url().'temple_expenses_report/uploadchartpdf';?>',
		{
			method: 'POST',
			data: formData,
			processData: false,
			contentType: false,
			success: function(data){window.location.href = '<?php echo base_url().'temple_expenses_report';?>';}
		});
      }
   });
}

setTimeout(function(){ saveAsPDF(); }, 1);
</script>