<?php
require_once($application_path . "view/header.tpl.php");
?>

        <!-- page content -->
        <div class="right_col" role="main">
          <?php include_once( $application_path .  "view/dash_top_titles.tpl.php"); ?>
		  
          <!-- Body First Row Items -->
          <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="dashboard_graph">
                <!-- Top Head lines -->
                <?php include_once( $application_path .  "view/dash_surveys.tpl.php"); ?>
				<!-- End Top Head lines -->
                
                <!-- Main Graph -->
				<?php include_once( $application_path .  "view/dash_main_graph.tpl.php"); ?>
				<!-- End Main Graph -->                
                                
                <!-- Top typologies Left Panel -->
				<?php include_once( $application_path .  "view/dash_top_typologies.tpl.php"); ?>
				<!-- End Top typologies Left Panel -->
                
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
          <!-- End Body First Row Items -->          
          
          <br />

		  
          <!-- Body Second Row Items -->
          <div class="row">
          
          	<!-- Socio Demographics -->
			<?php include_once( $application_path .  "view/dash_sociodemo.tpl.php"); ?>
            <!-- End Socio Demographics -->
            
    		<!-- Top 5 programs -->        
     		<?php include_once( $application_path .  "view/dash_top5_prog.tpl.php"); ?>
            <!-- End Top 5 programs -->        
          
		  </div>
          <!-- End Body Second Row Items -->




          <!-- Body Third Row Items -->
          <div class="row">
          		<!-- Media Penitration Graph -->
	     		<?php include_once( $application_path .  "view/dash_media_peni.tpl.php"); ?>
                <!-- End of Media Penitration Graph -->
                <!-- Gauge graph -->
	     		<?php include_once( $application_path .  "view/dash_survey_info.tpl.php"); ?>
                <!-- End Gauge graph -->
          </div>
          <!-- End Body Third Row Items -->



          <!-- Body Second Row Items -->
          <div class="row">
				<div class="col-md-6 col-sm-6 col-xs-12">         
                	<div class="x_panel">
                    	<?php
						

						$Questions_Ary = array();
						$qcn1 = 1;
						foreach($Question_Array as $Qkey=>$QArray) {
							if($qcn1==1) {
								$Questions_Ary[$Qkey] = $QArray;
								break;
							}
							$qcn1++;
						}
						
						require($application_path . "view/brandanalysis-dashboard.tpl.php");
						?>
                		<!-- <img src="view/images/graph1.jpg?x=11112" class="responsive" width="100%" /> -->
                    </div>
                </div>

                <div class="col-md-6 col-sm-6 col-xs-12">         
                	<div class="x_panel">
                    	<?php
						$Questions_Ary = array();
						$qcn1 = 1;
						foreach($Question_Array as $Qkey=>$QArray) {
							if($qcn1==2) {
								$Questions_Ary[$Qkey] = $QArray;
								break;
							}
							$qcn1++;
						}
												
						require($application_path . "view/brandanalysis-dashboard.tpl.php");
						?>

                		<!-- <img src="view/images/graph2.jpg?x=11113" class="responsive"  width="100%"/> -->
                    </div>
                </div>                
		  </div>
          <!-- End Body Second Row Items -->
			
        
        </div>
        <!-- /page content -->

<?php
require_once($application_path . "view/footer.tpl.php");
?>



	<script>
	// Graph - GRP
	$(function() {

		var chnls_array = [ 
		<?php
		$cx=0;
		$data_txt = "";
		foreach($channel_list as $chlst) {
			if($chlst['chname'] != "Total") {
				if(strlen($data_txt) >0) $data_txt .= ",";
				$data_txt .= '["' . $chlst['chname'] . '"]' ;
				$cx++;
			}
			if($cx >=11) break;
		}
		echo $data_txt;
		?>		
		];


		var cur_data = [ 
		<?php
		$cx=0;
		$data_txt = "";
		foreach($channel_list as $chlst) {
			if($chlst['chname'] != "Total") {
				if(strlen($data_txt) >0) $data_txt .= ",\n";
				$data_txt .= '["' . $chlst['chname'] . '",' . $chlst['grp'] . ']' ;
				$cx++;
			}
			if($cx >=11) break;
		}
		echo $data_txt;
		?>		
		];
		

			var plot = $.plot("#grp_grph", [
				{ data: cur_data, label: "GRP" }
			],
			{
				series: {
					lines: {
					  show: false,
					  fill: true
					},
				  	splines: {
					  show: true,
					  tension: 0.4,
					  lineWidth: 1,
					  fill: 0.4
					},
				  	points: {
					  radius: 2,
					  show: true
					},
				  	shadowSize: 2
				},
				legend:{         
					backgroundOpacity: 0.5,
					noColumns: 0,
					backgroundColor: "green",   
					position: "ne",
					container:$("#legendholder"),
				},		  
				grid: {
					verticalLines: true,
					hoverable: true,
					clickable: true,
					tickColor:  "rgba(51, 51, 51, 0.06)",
					borderWidth: 1,
					color: '#fff'
				},
				colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
				xaxes: [ { mode: "categories" ,
						   tickColor: "rgba(51, 51, 51, 0.06)"} ],
				yaxes: [ { min: 0}, {
					// align if we are to the right
					alignTicksWithAxis: 1,
					position: "right"
				} ]
			});
			
			$("<div id='tooltip'></div>").css({
				position: "absolute",
				display: "none",
				border: "1px solid #fdd",
				padding: "2px",
				"background-color": "#fee",
				opacity: 0.80
			}).appendTo("body");
	
			$("#grp_grph").bind("plothover", function (event, pos, item) {
	
				if (item) {
					var x = chnls_array[item.datapoint[0]],
						y = item.datapoint[1].toFixed(2);
	
					$("#tooltip").html(item.series.label + " of " + x + " = " + y)
						.css({top: item.pageY+5, left: item.pageX+5})
						.fadeIn(200);
				} else {
					$("#tooltip").hide();
				}
			});			
			

	});
	




	// Graph - Reach
	$(function() {

		var chnls_array = [ 
		<?php
		$cx=0;
		$data_txt = "";
		foreach($channel_list as $chlst) {
			if($chlst['chname'] != "Total") {
				if(strlen($data_txt) >0) $data_txt .= ",";
				$data_txt .= '["' . $chlst['chname'] . '"]' ;
				$cx++;
			}
			if($cx >=11) break;
		}
		echo $data_txt;
		?>		
		];
		
		var per_data = [ 
		<?php
		$cx=0;
		$data_txt = "";
		foreach($channel_list as $chlst) {
			if($chlst['chname'] != "Total") {
				if(strlen($data_txt) >0) $data_txt .= ",\n";
				$data_txt .= '["' . $chlst['chname'] . '",' . $chlst['reach'] . ']' ;
				$cx++;
			}
			if($cx >=11) break;
		}
		echo $data_txt;
		?>	
		];



			var plot = $.plot("#reach_grph", [
				{ data: per_data, label: "Reach" }
			],
			{
				series: {
					lines: {
					  show: false,
					  fill: true
					},
				  	splines: {
					  show: true,
					  tension: 0.4,
					  lineWidth: 1,
					  fill: 0.4
					},
				  	points: {
					  radius: 2,
					  show: true
					},
				  	shadowSize: 2
				},
				legend:{         
					backgroundOpacity: 0.5,
					noColumns: 0,
					backgroundColor: "green",   
					position: "ne",
					container:$("#legendholder_reach"),
				},		  
				grid: {
					verticalLines: true,
					hoverable: true,
					clickable: true,
					tickColor:  "rgba(51, 51, 51, 0.06)",
					borderWidth: 1,
					color: '#fff'
				},
				colors: ["rgba(3, 88, 106, 0.38)", "rgba(38, 185, 154, 0.38)"],
				xaxes: [ { mode: "categories" ,
						   tickColor: "rgba(51, 51, 51, 0.06)"} ],
				yaxes: [ { min: 0}, {
					// align if we are to the right
					alignTicksWithAxis: 1,
					position: "right"
				} ]
			});
			
			$("<div id='tooltip2'></div>").css({
				position: "absolute",
				display: "none",
				border: "1px solid #fdd",
				padding: "2px",
				"background-color": "#fee",
				opacity: 0.80
			}).appendTo("body");
	
			$("#reach_grph").bind("plothover", function (event, pos, item) {
	
				if (item) {
					var x = chnls_array[item.datapoint[0]],
						y = item.datapoint[1].toFixed(2);
	
					$("#tooltip2").html(item.series.label + " of " + x + " = " + y)
						.css({top: item.pageY+5, left: item.pageX+5})
						.fadeIn(200);
				} else {
					$("#tooltip2").hide();
				}
			});			
			

	});
	




			
	// Top 5 programs
	$(function() {

		var series = [];
		  
		  series.push({
			  "label": "Avg. Rating",
			  data: [<?php
			  
			  $dt_ary=array();
			  $rc=0;
 			  foreach($avg_program_data as $avg_pdata) {
			  	$dt_ary[] = "[" . $rc . "," .  $avg_pdata['Avg_Rat'] . "]";
				if($rc >= 9) break;
				$rc++;
			  }
			 
			  $dt_txt = implode(",", $dt_ary);
			  echo $dt_txt;
			  ?>],
			  bars: {
				  order: 0,
                  fill: true,
                  lineWidth: 0,
                  fillColor:  "#89A54E"				  
			  },
			  xaxis: {
            	mode: "categories"
			  }			  
		  });

		  
		  
		  		
		$.plot($('#top5_programs'), series, {
			  bars: {
				show: true,
				barWidth: 0.30
			  },
				xaxis: {
                    min: -1,
                    max: 10,
                    mode: null,
                    ticks: [<?php
			  
						  $dt_ary="";
						  $rc=0;
						  foreach($avg_program_data as $avg_pdata) {
							$dt_ary[] = '[' . $rc .  ',"' .  ucwords(strtolower($avg_pdata['progname'])) . " (". $avg_pdata['chname'] .")" . '"]';
							if($rc >= 9) break;
							$rc++;
						  }
						 
						  $dt_txt = implode(",", $dt_ary);
						  echo $dt_txt;
                    ?>],
                    tickLength: 0,
                    axisLabel: "App",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
                    axisLabelPadding: 5
                },			  
			  legend:{         
				backgroundOpacity: 0,
				noColumns: 1,
				backgroundColor: "yellow",   
				position: "ne",
			  },		  
			  grid: {
				verticalLines: false,
				horizontalLines: false,
				hoverable: true,
				clickable: true,
				tickColor: "#d5d5d5",
				borderWidth: 0,
				color: '#000'
			  },	
			  colors: ["#89A54E","#99FFFF","#FFFF00","#0099CC","#FFCC66"],
			  tooltip: true,
			  tooltipFillColor: "rgba(51, 51, 51, 0.55)"
		});

	});

	   
	// Meter Guage
	$(function() {
			
		if( typeof (Gauge) === 'undefined'){ return; }
		
		console.log('init_gauge [' + $('.gauge-chart').length + ']');
		
		console.log('init_gauge');
		

		  var chart_gauge_settings = {
		  lines: 12,
		  angle: 0,
		  lineWidth: 0.4,
		  pointer: {
			  length: 0.75,
			  strokeWidth: 0.042,
			  color: '#1D212A'
		  },
		  limitMax: 'false',
		  colorStart: '#1ABC9C',
		  colorStop: '#1ABC9C',
		  strokeColor: '#F0F3F3',
		  generateGradient: true
	  };
		
		
		if ($('#chart_gauge_01').length){ 
		
			var chart_gauge_01_elem = document.getElementById('chart_gauge_01');
			var chart_gauge_01 = new Gauge(chart_gauge_01_elem).setOptions(chart_gauge_settings);
			
		}	
		
		
		if ($('#gauge-text').length){ 
		
			chart_gauge_01.maxValue = 100;
			chart_gauge_01.animationSpeed = 32;
			chart_gauge_01.set(<?php echo $channel_list[0]['reach']; ?>);
			chart_gauge_01.setTextField(document.getElementById("gauge-text"));
		
		}
		
		if ($('#chart_gauge_02').length){
		
			var chart_gauge_02_elem = document.getElementById('chart_gauge_02');
			var chart_gauge_02 = new Gauge(chart_gauge_02_elem).setOptions(chart_gauge_settings);
			
		}
		
		
		if ($('#gauge-text2').length){
			
			chart_gauge_02.maxValue = 9000;
			chart_gauge_02.animationSpeed = 32;
			chart_gauge_02.set(2400);
			chart_gauge_02.setTextField(document.getElementById("gauge-text2"));
		
		}
	
	
	});
	
	
	
	
	
	

	// Graph - Time Segment - Media Penetration by Time Segment (Top 5 channels GRP)
	$(function() {

		var series = [];
		<?php  
		  $grpordr=0;
		  $fil_color = array("#89A54E","#99FFFF","#FFFF00","#0099CC","#FFCC66");
		  foreach($top5_channel_list as $chnllst) {
		?>
		  series.push({
			  "label": "<?php echo $chnllst['chname']; ?>",
			  data: [<?php
			  $data_txt="";
			  $idr=0;
			  foreach($chnllst['daypart'] as $dp_id=>$dp_details) {
				if(strlen($data_txt) >0) $data_txt .= ",";
				$data_txt .= "[" . $idr . "," . $dp_details['reach'] ."]" ;
				$idr++;
			  }
			  echo $data_txt;
			  ?>],
			  bars: {
				  order: <?php echo $grpordr; ?>,
                  fill: true,
                  lineWidth: 0,
                  fillColor:  "<?php echo $fil_color[$grpordr];?>"				  
			  },
			  xaxis: {
            	mode: "categories"
			  }			  
		  });
		  
		<?php
			$grpordr++;
		  }
		?>
		  
		  
		  
		  		
		$.plot($('#timeseg_grph'), series, {
			  bars: {
				show: true,
				barWidth: 0.15
			  },
				xaxis: {
                    min: -1,
                    max: 7,
                    mode: null,
                    ticks: [<?php
					  $data_txt="";
					  $didr=0;
					  foreach($top5_channel_list as $chnllst) {
						  foreach($chnllst['daypart'] as $dp_id=>$dp_details) {
							if(strlen($data_txt) >0) $data_txt .= ",";
							$data_txt .= '[' . $didr .',"' .  $dp_details['tseg_desc'] .'"]' ;
							$didr++;
						  }
						  break;
					  }
					  echo $data_txt;
					  ?>],
                    tickLength: 0,
                    axisLabel: "App",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
                    axisLabelPadding: 5
                },			  
			  legend:{         
				backgroundOpacity: 0,
				noColumns: 1,
				backgroundColor: "yellow",   
				position: "ne",
			  },		  
			  grid: {
				verticalLines: false,
				horizontalLines: false,
				hoverable: true,
				clickable: true,
				tickColor: "#d5d5d5",
				borderWidth: 0,
				color: '#000'
			  },	
			  colors: [<?php 
			  $clrs="";
			  foreach($fil_color as $clr) {
				if(strlen($clrs)>0) $clrs .= ",";
				$clrs .= '"' . $clr . '"';
			  }
			  echo $clrs;
			  ?>],
			  tooltip: true,
			  tooltipFillColor: "rgba(51, 51, 51, 0.55)"
		});


	});




	</script>
    
    
    
    
    <style>
		.flot-x-axis .flot-tick-label {
			width: 60px;
			padding: 5px;
			white-space: wrap;
			text-align: center !important;
			/*
			white-space: nowrap;
			transform: translate(-9px, 0) rotate(-60deg);
			text-indent: -100%;
			transform-origin: top right;
			text-align: right !important;			
			*/
		}	
		#legendholder td {
			color: #999 !important;
			padding: 2px;
		}
		#legendholder {
			color:#000 !important;
			padding-right: 25px;
		}
		#legendholder_reach td {
			color: #999 !important;
			padding: 2px;
		}
		#legendholder_reach {
			color:#000 !important;
			padding-right: 25px;
		}

	</style>