<style type="text/css">
.center { text-align: center;}
.right { text-align: right;}
</style>
<div class="col-md-4">
	<div class="box box-solid box-primary">
		<div class="box-header" align="center">
			<h3 class="box-title">Data Diri</h3>
		</div>
		<div class="box-body table-responsive">
			<dl class="dl-horizontal">
				<dt style="text-align:left;">Name</dt><dd><?php echo $peserta['f_nama'];?></dd>
				<dt style="text-align:left;">Gender</dt><dd><?php echo ($peserta['f_gender'] == 'F') ? 'Female':'Male';?></dd>
				<dt style="text-align:left;">HP</dt><dd><?php echo $peserta['f_hp'];?></dd>
				<dt style="text-align:left;">Email</dt><dd><?php echo $peserta['f_email'];?></dd>
				<dt style="text-align:left;">Sekolah</dt><dd><?php echo $peserta['f_sekolah'];?></dd>
				<dt style="text-align:left;">Date</dt><dd><?php echo $peserta['f_date_on'];?></dd>
				<dt style="text-align:left;">Try</dt><dd><?php echo $peserta['f_yangke'];?></dd>
			</dl>
		</div>
	</div>	
</div>
<div class="col-md-4">
	<div class="box box-solid box-primary">
		<div class="box-header" align="center">
			<h3 class="box-title">ASSESSMENT RESULT</h3>
		</div>
		<div class="box-body table-responsive">
			<table class="table table-striped table-bordered">
				<thead>
					<tr>
						<th>Intelligence type</th>
						<th class="center">Total</th>
					</tr>
				</thead>
				<tbody>
				<?php
					foreach($tabel as $a)
					{
						echo "<tr>";
						echo "<td>".$a['name']."</td>";
						echo "<td class=\"center\">".$a['y']."</td>";
						echo "</tr>";
					}
				?>	
				</tbody>
			</table>
		</div>
	</div>
</div>
<div class="col-md-4" id="container"></div>

<div class="col-md-offset-1 col-md-10">
	<div class="box box-solid box-primary">
		<div class="box-header" align="center">
			<h3 class="box-title">Gardner's Multiple Intelligences</h3>
		</div>
		<div class="box-body table-responsive">
			<dl class="dl-horizontal" style="font-size:12pt;">
				<?php
					foreach($kondisi as $a)
					{
						echo "<dt style=\"text-align:left;\">".$a->f_kondisi_name."</dt>";
						echo "<dd>".$a->f_kondisi_desc."</dd>";
					}
				?>
			</dl>
		</div>
	</div>
</div>

<script src="<?php echo ASSETS_URL;?>plugins/highcharts/highcharts.js" type="text/javascript"></script>
<script src="<?php echo ASSETS_URL;?>plugins/highcharts/highcharts-more.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('#container').highcharts({
        chart: { type: 'column' },
        title: { text: 'Your Strength (Preferences & Personal Potensial Too)<br/>according to the multiple intelligences model' },
//        subtitle: { text: 'according to the multiple intelligences model' },
        xAxis: { type: 'category' ,
			labels: {
                rotation: -45,
                style: {
                    fontSize: '12px',
                }
            }			
		},
        yAxis: {
            title: { min: 0,text: '' }
        },
        legend: { enabled: false },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: { enabled: true, //format: '{point.y}'
					formatter : function() { return '<div style="font-weigth:bold;font-size:10pt;color:#000;">'+this.y+'</div>'; }
					 }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> of total<br/>'
        },
        series: [{
            name: 'Intelligence type',
            colorByPoint: true,
            data: <?php echo json_encode($tabel);?>,
            }],
        credits: { enabled: false },
	});
});
</script>


