<head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>

</head>

<?php

use yii\helpers\Html;
use kartik\form\ActiveForm;
use kartik\select2\Select2;
use yii\grid\GridView;
use app\models\TKandidat;
use miloschuman\highcharts\Highcharts;
use yii\helpers\Url;
/* @var $this yii\web\View */
/* @var $model app\models\HasilVoting */
/* @var $form yii\widgets\ActiveForm */

$urlHasilVoting = Url::to(['hasil-voting/result-voting']);
$urlFilterHasilVoting = Url::to(['hasil-voting/filter-hasil-voting']);

?>

<div class="hasil-voting-form">
	<div class="row">
		<div class="col-lg-6 col-md-6 col-sm-6">
		</div>
		<div class="col-lg-2 col-md-2 col-sm-2" align="right">
			<?= Html::a('<span class="glyphicon glyphicon-step-backward"></span>Kembali', ['voting/index-hasil-voting'], ['class' => 'btn btn-default']) ?>
		</div>
		<div class="col-lg-4 col-md-4 col-sm-4">
			<?php
                  echo Select2::widget([
                    'name' => 'id_voting',
                    'data' => $arrayVoting,
                    'options' => [
                        'placeholder' => 'Filter Data Voting...',
                        'id'=>'hasilvoting'
                        
                    ],
                    'pluginOptions' => [
                        'allowClear' => false
                    ],
                ]);
            ?>
		</div>
	</div>
	<div id="filterhasilvoting">
		
		<hr>
		<center><h3 class="text-danger"><b>Hasil Voting <?= $voting->nama_voting;?></b></h3></center>
		<hr>
		<div class="col-lg-6 col-md-6 col-sm-6">
			<div class="panel panel-danger">
				  <div class="panel-heading">
				    <center><h3 class="panel-title">Grafik Persentase Voting <?= $voting->nama_voting;?></h3></center>
				  </div>
				  <div class="panel-body">
				    <figure class="highcharts-figure" id="voting">
                	</figure>
				  </div>
			</div>
		</div>
  		<div class="col-lg-6 col-md-6 col-sm-6">
  			<div class="panel panel-success">
			  <div class="panel-heading">
			    <center><h3 class="panel-title"><b>Jumlah Suara Kandidat <?= $voting->nama_voting;?></b></h3></center>
			  </div>
			  <div class="panel-body">
			    <table class="table">
			    	<tr>
			    		<td><b>KANDIDAT</b></td>
			    		<td align="center"><b>JUMLAH SUARA</b></td>
			    	</tr>
			    	<?php
			    		foreach ($hasil_voting as $key => $value) {
			    	?>
			    			<tr>
					    		<td>
					    			<?php
					    				$kandidat =  TKandidat::find()->where(['id_kandidat' => $value['pilihan']])->one();
					    				echo $kandidat->nama_kandidat;
					    			?>
					    		</td>
					    		<td align="center"><h4><span class="label label-primary"><?= $value['Jumlah_Voting']?></span></h4></td>
					    	</tr>
			    	<?php
			    		}
			    	?>
			    	
			    </table>
			  </div>
			</div>
  		</div>
		
  	</div>
</div>

<?php
$this->title = '';
$script = <<< JS
$(document).ready(function(){
    
    txt = 'Hasil Voting '
    $.ajax({
        url: '{$urlHasilVoting}',
        type: "GET",
        data:{
            id_voting: {$voting->id_voting},
        },

        contentType: "application/json",
        dataType: 'json',

        success: function(response){
        	Highcharts.chart('voting', {
        		credits: {
				    enabled: false
				},
			    chart: {
			       plotBackgroundColor: null,
			        plotBorderWidth: null,
			        plotShadow: false,
			        type: 'pie'
			    },
			    title: {
			        text: ''
			    },
			    tooltip: {
			        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
			    },
			    accessibility: {
			        point: {
			            valueSuffix: '%'
			        }
			    },
			    plotOptions: {
			        pie: {
			            allowPointSelect: true,
			            cursor: 'pointer',
			            dataLabels: {
			                enabled: true,
			                format: '<b>{point.name}</b>: {point.percentage:.2f} %'
			            }
			        }
			    },
			    series: [{
			        name: 'Persentase Voting',
			        colorByPoint: true,
			        data: response,
			    }]
			});
        },
    });

});

$("#hasilvoting").on("change",function(){
    //$(".loading-image").show();
    $.ajax({
         url:"{$urlFilterHasilVoting}",
         type: "GET",
         data:"id_voting="+$(this).val(),
         success:function(data){
             $("#filterhasilvoting").html(data);
             //$(".loading-image").hide();
         },
         error:function(xhr, ajaxOptions, throwError)
         {
            //$(".loading-image").hide();
            alert("GAGAL LOAD DATA");
         }
     });
 });    

JS;
$this->registerJs($script)
?>