<style>
.chartdiv {
  width: 100%;
  height: 400px;
}

.chartdiv2 {
  width: 200%;
  height: 600px;
}

</style>

<!-- Resources -->
<script src="<?php echo base_url() ?>dist/vendors/chartdashboard/amcharts.js"></script>
<script src="<?php echo base_url() ?>dist/vendors/chartdashboard/pie.js"></script>
<script src="<?php echo base_url() ?>dist/vendors/chartdashboard/light.js"></script>
<script src="<?php echo base_url() ?>dist/vendors/chartdashboard/serial.js"></script>

<!-- Chart code -->
<script type="text/javascript">


    	var fad = Array();
		
		
		$(document).ready(function(){
			
			
				$.ajax({
					type: "POST",
					url: "<?php echo base_url(); ?>dashboard/getvotebydesignation",
					data:{
						'positionID' : "<?php echo $positionID?>"
						},
					dataType:'json',
					success: function(data){
						if(data.status == 'success'){
							
							var n = data.message.length;
							
							var i = 0;
							
							for(i=0;i<n;i++){
							
								fad[i] = {"vote": data.message[i].candidateName ,"value": data.message[i].countvote};
								
							}
							
							
							
							if(data.checkelected <= 4){
							
								
								var chart = AmCharts.makeChart( "chart1", {
									"type": "pie",
									"theme": "light",
									"dataProvider": 
									fad,
									"valueField": "value",
									"titleField": "vote",
									"outlineAlpha": 0.4,
									"depth3D": 15,
									"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
									"angle": 30,
									"export": {
										"enabled": true
									},
									"legend": {
										//"useGraphSettings": true
									}
								} );
							
								
								var opt1 = "<div id='chart1' class='chartdiv'></div>";
								
								$('#kiki').empty();
								$('#kiki').append(opt1);
								
							
							}
							else{
								
							
								var chart = AmCharts.makeChart("chart2", {
									"theme": "light",
									"type": "serial",
									"dataProvider": 
									fad,
									"valueAxes": [{
										"stackType": "3d",
										"position": "left",
										"title": "<?php echo $this->lang->line('votingStatistic'); ?>",
									}],
									"startDuration": 0,
									"graphs": [{}, {
										"balloonText": "[[category]] : <b>[[value]]</b>",
										"fillAlphas": 0.9,
										"lineAlpha": 0.2,
										"title": "2005",
										"type": "column",
										"valueField": "value"
									}],
									"plotAreaFillAlphas": 0.1,
									"depth3D": 60,
									"angle": 30,
									"categoryField": "vote",
									"categoryAxis": {
										"gridPosition": "start",
										"labelRotation": 70
									},
									"export": {
										"enabled": true
									 }
								});
								jQuery('.chart-input').off().on('input change',function() {
									var property	= jQuery(this).data('property');
									var target		= chart;
									chart.startDuration = 0;
								
									if ( property == 'topRadius') {
										target = chart.graphs[0];
										if ( this.value == 0 ) {
										  this.value = undefined;
										}
									}
								
									target[property] = this.value;
									chart.validateNow();
								});
								
								
								var opt2 = "<div id='chart2' class='chartdiv2'></div>";
								
								$('#kiki').empty();
								$('#kiki').append(opt2);
							
								
							}
							
							 
						}
					}
				});
	
				


				setInterval(function(){
				   
						$.ajax({
							type: "POST",
							url: "<?php echo base_url(); ?>dashboard/getvotebydesignation",
							data:{
								'positionID' : "<?php echo $positionID?>"
								},
							dataType:'json',
							success: function(data){
								if(data.status == 'success'){
									
									var n = data.message.length;
									
									var i = 0;
									
									for(i=0;i<n;i++){
									
										fad[i] = {"vote": data.message[i].candidateName ,"value": data.message[i].countvote};
										
									}
									//alert(data.checkelected);
									
									if(data.checkelected <= 4){
										
										
										var chart = AmCharts.makeChart( "chart1", {
											"type": "pie",
											"theme": "light",
											"dataProvider": 
											fad,
											"valueField": "value",
											"titleField": "vote",
											"outlineAlpha": 0.4,
											"depth3D": 15,
											"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
											"angle": 25,
											"export": {
												"enabled": true
											},
											"legend": {
												// "useGraphSettings": true
											}
										} );
										
										
										
									
										
									}
									else{
										
									
										var chart = AmCharts.makeChart("chart2", {
											"theme": "light",
											"type": "serial",
											"dataProvider": 
											fad,
											"valueAxes": [{
												"stackType": "3d",
												"position": "left",
												"title": "<?php echo $this->lang->line('votingStatistic'); ?>",
											}],
											"startDuration": 0,
											"graphs": [{}, {
												"balloonText": "[[category]]: <b>[[value]]</b>",
												"fillAlphas": 0.9,
												"lineAlpha": 0.2,
												"title": "2005",
												"type": "column",
												"valueField": "value"
											}],
											"plotAreaFillAlphas": 0.1,
											"depth3D": 60,
											"angle": 30,
											"categoryField": "vote",
											"categoryAxis": {
												"gridPosition": "start",
												"labelRotation": 70
											},
											"export": {
												"enabled": true
											 }
										});
										jQuery('.chart-input').off().on('input change',function() {
											var property	= jQuery(this).data('property');
											var target		= chart;
											chart.startDuration = 0;
										
											if ( property == 'topRadius') {
												target = chart.graphs[0];
												if ( this.value == 0 ) {
												  this.value = undefined;
												}
											}
										
											target[property] = this.value;
											chart.validateNow();
										});	
									
									
										
									
									
									}
									
									
									 
								}
							}
						});
			
						
				   
			   },3000);
			   
				
				
			
			
			
			
			
				setInterval(function() {
					
					$.ajax({
						type: "POST",
						url: "<?php echo base_url(); ?>dashboard/refreshtotalvote",
						data:{},
						dataType:'json',
						success: function(data){
							if(data.status == 'success'){
								
								var opt = '';
								
								//opt = data.message[0].totalVote;
								opt = data.message;		  
								$('#refreshtotalvote').empty();
								$('#refreshtotalvote').append(opt);		  
										  				 
							}
						}
						
					});
					
					
        		}, 60000);
			
			
			
			
		});//end $(document).ready(function(){

			


		function changedesignation(){
				
			var positionID = $('#positionID option:selected').val();
			
			//alert(positionID);
			
			var urls = "<?php echo base_url() ?>dashboard/homedashboard/" + positionID;
    		window.location = urls;
			
		}
		


</script>

<div class="content-wrapper">
	<section class="content-header">
        <h1 style="font-family:roboto">
            <b><?php echo $this->lang->line('dashboard'); ?></b>
        </h1>
        <ol class="breadcrumb">
            <li style="color:#0C0"><a href="#"><i class="fa fa-home"></i> <?php echo $this->lang->line('dashboard'); ?></a></li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <!-- Info boxes -->
      <div class="row">
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-red"><i class="fa fa-files-o"></i></span>

            <div class="info-box-content">
              <span class="info-box-text" style="color:#C06"><b><?php echo $this->lang->line('totalvoter'); ?></b></span>
              <span class="info-box-number"><?php echo $totalVoter; ?></span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-purple"><i class="ion ion-ios-people-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text" style="color:#F3F"><b><?php echo $this->lang->line('totalvote'); ?></b></span>
              <span class="info-box-number" id="refreshtotalvote"><?php echo $totalVote; ?></span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-aqua"><i class="fa fa-calendar"></i></span>

            <div class="info-box-content">
              <span class="info-box-text" style="color:#93C"><b><?php echo $this->lang->line('totalnonvote'); ?></b></span>
              <span class="info-box-number"><?php echo $totalnonvoted; ?></span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-yellow"><i class="fa fa-flag-o"></i></span>

            <div class="info-box-content">
              <span class="info-box-text" style="color:#03F"><b><?php echo $this->lang->line('totalblock'); ?></b></span>
              <span class="info-box-number"><?php echo $totalBlock; ?></span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->


      <!-- Main row -->
      <div class="row">
        <!-- Left col -->
        <div class="col-md-8">
          <!-- MAP & BOX PANE -->
          <div class="box box-info">
            
            <!-- /.box-header -->
            <div class="box-body no-padding">
              <!-- USERS LIST -->
                <div class="box-header with-border" style=" background-color:#609">
                  <h3 class="box-title"><font style="font-family:roboto; color:#FFF"><b><?php echo $this->lang->line('votingStatistic'); ?></b></font></h3>

                  <div class="box-tools pull-right">
                    <span class="label label-warning"><?php echo $totalPosition." ".$this->lang->line('designation/s'); ?></span>
                  </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                	<div class="box-body table-responsive" style="overflow: auto">
                		<div class="col-md-12" align="right" style="padding-top:25px"><?php echo $this->lang->line('designation'); ?> : 
                			<select id="positionID" name="positionID" onchange="changedesignation()" style="width:30%">
                        		<?php
									foreach($positionList as $row){
								?>
                                		<option value="<?php echo $row->positionID ?>" <?php if($positionID == $row->positionID){echo "selected";}?>><?php echo $row->positionName ?></option>
								<?php	
                                    }
								?>
							</select>
                    	</div>
                    	<div class="col-md-12" id="kiki">
                  			<div id="chart1" class="chartdiv"></div>
                            <div id="chart2" class="chartdiv2"></div>
                  		</div>
                  	</div>
                </div>
                
                <!-- /.box-body -->
              </div>
              <!--/.box -->
          </div>


          
        </div>
        <!-- /.col -->

        <div class="col-md-4">
          <!-- Info Boxes Style 2 -->
          <div class="info-box bg-orange">
            <span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text"><b><?php echo $this->lang->line('firstsubmittedvote'); ?></b></span>
              <span><?php echo $this->lang->line('memberNo'); ?> : <?php if($firstVoter){echo $firstVoter[0]->noAhli;} ?></span><br />
              <span><?php echo $this->lang->line('time'); ?> : <?php if($firstVoter){echo date("H:i", strtotime($firstVoter[0]->end_time));} ?></span>

              
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
          <div class="info-box bg-green">
            <span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text"><b><?php echo $this->lang->line('lastsubmittedvote'); ?></b></span>
              <span><?php echo $this->lang->line('memberNo'); ?> : <?php if($lastVoter){echo $lastVoter[0]->noAhli;} ?></span><br />
              <span><?php echo $this->lang->line('time'); ?> : <?php if($lastVoter){echo date("H:i", strtotime($lastVoter[0]->end_time));} ?></span>

              
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
          <div class="info-box bg-red">
            <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text"><b><?php echo $this->lang->line('fastestVoter'); ?></b></span>
			  <span><?php echo $this->lang->line('memberNo'); ?> : <?php if($fastestVoter){echo $fastestVoter[0]->noAhli;} ?></span><br />
              <span><?php echo $this->lang->line('duration'); ?> : <?php 
			  if($fastestVoter){
					if($fastestVoter[0]->duration < 60){
						echo $fastestVoter[0]->duration." ".$this->lang->line('second');
					}
					else if($fastestVoter[0]->duration < 3600){
						$minit = explode(".", $fastestVoter[0]->duration / 60);
						$second = $fastestVoter[0]->duration % 60;
						echo $minit[0]." ".$this->lang->line('minute')." ".$second." ".$this->lang->line('second');
					}
					else if($fastestVoter[0]->duration >= 3600){
						$hour = explode(".", $fastestVoter[0]->duration / 3600);
						$minit = ($fastestVoter[0]->duration % 3600) / 60;
						echo $hour[0]." ".$this->lang->line('hour')." ".$minit." ".$this->lang->line('minute');
					}
			  }
			  
			  ?>
              </span>
              
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
          <div class="info-box bg-aqua">
            <span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text"><b><?php echo $this->lang->line('slowestVoter'); ?></b></span>
			  <span><?php echo $this->lang->line('memberNo'); ?> : <?php if($slowestVoter){echo $slowestVoter[0]->noAhli;} ?></span><br />
              <span><?php echo $this->lang->line('duration'); ?> : <?php 
			  if($slowestVoter){	
					if($slowestVoter[0]->duration < 60){
						echo $slowestVoter[0]->duration." ".$this->lang->line('second');
					}
					else if($slowestVoter[0]->duration < 3600){
						$minit = explode(".", $slowestVoter[0]->duration / 60);
						$second = $slowestVoter[0]->duration % 60;
						echo $minit[0]." ".$this->lang->line('minute')." ".$second." ".$this->lang->line('second');
					}
					else if($slowestVoter[0]->duration >= 3600){
						$hour = explode(".", $slowestVoter[0]->duration / 3600);
						$minit = ($slowestVoter[0]->duration % 3600) / 60;
						echo $hour[0]." ".$this->lang->line('hour')." ".$minit." ".$this->lang->line('minute');
					}
			  }
			  
			  ?>
              </span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->

          

          
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
    
</div>
<style media="screen">
.mapael .mapTooltip {
	position: absolute;
	background-color: #F3E5C9;
	moz-opacity: 0.80;
	opacity: 0.80;
	filter: alpha(opacity=80);
	padding: 10px;
	z-index: 1000;
	max-width: 200px;
	display: none;
	color: #232323;
}
.mapael .map {
    position: relative;
	padding: 0 0 10px;
}
</style>
<script type="text/javascript">
var mapSettings = {
	attrs: {
		fill: '#fff',
		stroke: '#0e3d59',
		'stroke-width': 0.5
	},
	attrsHover: {
		fill: '#0e3d59',
		stroke: '#fff'
	}
};
function fnGetData(action, currency) {
	$.ajax({
		url: '<?php echo base_url(); ?>dashboard/fnGetMapData',
		method: 'POST',
		dataType: 'json',
		data: {
			'action': action,
			'year': '2016'
		},
		success: function(json) {
			if ($.trim(json.status) == 'success') {
				var settings = fnGetMapSettings(json.areas, currency);

				fnLoadMap(settings.dataMap, settings.max);

				setTimeout(function(){
					fnLoadTable(json, currency, settings.total);
				}, 1000);
			}
		}
	});
}

function fnGetMapSettings(data, currency) {
	var dataMap, dataTable;
	var total = max = 0;
	dataMap = data;
	$.each(data, function(index, item) {
		total = total + ((currency) ? parseFloat(item.value) : parseInt(item.value));
		max = (item.value > max) ? ((currency) ? parseFloat(item.value) : parseInt(item.value)) : max;
		dataMap[index].tooltip.content = dataMap[index].tooltip.content.replace('_VALUE_', ((currency) ? abbreviateNumber(item.value) : parseInt(item.value)));
	});

	return {
		'total': total,
		'max': max,
		'dataMap': dataMap,
		'dataTable': dataTable
	};
}

function fnLoadMap(data, max) {
	var temp = max/3;
	$('.malaysia').mapael({
		map: {
			name: 'malaysia',
			defaultArea: mapSettings
		},
		// legend: {
		// 	area: {
		// 		slices: [
		// 			{
		// 				min: 0,
		// 				max: temp,
		// 				attrs: {
		// 					fill: '#E84B30'
		// 				},
		// 				label: '<= ' + temp
		// 			},
		// 			{
		// 				min: temp + 1,
		// 				max: temp * 2,
		// 				attrs: {
		// 					fill: '#FFD432'
		// 				},
		// 				label: (temp + 1) + ' - ' + (temp * 2)
		// 			},
		// 			{
		// 				min: temp * 2 + 1,
		// 				attrs: {
		// 					fill: '#49E83E'
		// 				},
		// 				label: '>= ' + (temp * 3 + 1)
		// 			}
		// 		]
		// 	}
		// },
		areas: data
	});
}

function fnLoadTable(data, currency, total) {
	if (typeof currency == 'undefined') currency = false;
	$('span.mapTitle').html('&nbsp;(' + data.title + ')');
	var title = 'User';
	if (currency) title = 'RM';
	$('.dataTable').find('thead').append('<tr><th>#</th><th>State</th><th>' + title + '</th><th>Percentage</th></tr>');
	var counter = 0;
	$.each(data.areas, function(index, item) {
		var value = 0;
		value = (currency) ? abbreviateNumber(item.value) : item.value;
		$('.dataTable tbody')
		.append('<tr><td>' + (++counter) + '</td><td>' + item.name + '</td><td>' + value + '</td><td>' + accounting.formatNumber(parseInt(item.value)/total*100, 2, ',') + '%</td></tr>');
	});
}

$(function() {
	$('.malaysia').mapael({
		map: {
			name: 'malaysia',
			defaultArea: mapSettings
		}
	});

	$('.filter').on('change', function() {
		if ($.trim($(this).val()) != '') {
			fnGetData($(this).val(), $('option:selected', this).attr('currency'));
		}
	});
});
</script>
