<?php
	$CI =& get_instance();
	$CI->load->model('SalesDeliveryOrder');
	$itemSale = $CI->SalesDeliveryOrder->dashboardSaleByItem(date('Y'));
?>
<!-- Sales By Items -->

<div class="row-fluid">
	<div class="span12 scCol">
		<div class="block">
			<div class="head">                                        
				<h2><?php echo $this->lang->line('salesByItem')?></h2>
				<ul class="buttons">
					<li><a href="#" class="block_loading" onclick="drawChart()"><span class="i-cycle"></span></a></li>
					<li><a href="#" class="block_toggle"><span class="i-arrow-down-3"></span></a></li>
				</ul>
	        </div>
	        <div class="content">
				<div id="piechart_3d" style=" margin: 0px auto;"></div>
	        </div>
	        <script type="text/javascript">	
		// Load the Visualization API and the piechart package.
		google.load('visualization', '1.0', {'packages':['corechart']});

		// Set a callback to run when the Google Visualization API is loaded.
		google.setOnLoadCallback(drawChart);

		function drawChart() {
			var data = google.visualization.arrayToDataTable([
			  ['Year', 'Sales'],
			  <?php
			  	if(!empty($itemSale)){
					foreach($itemSale as $v){
						echo "['".$v->name."', ".$v->itemTotal."],";
					}
				}
				else{
					echo "[test,0]";
				}
			  ?>
			]);

			var options = {
			  title: '<?php 
			  				if(!empty($itemSale)){
								echo $this->lang->line('salesByItemPerYear');
							}
					?>',
			  is3D: true,
			};

			var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
			chart.draw(data, options);
		}

		$(window).resize(function(){
			drawChart();
		});

	</script>
	    </div>
	</div>		
</div>