<?php echo $this->extend('/template'); ?>
<?php echo $this->section('content') ?>

<script src="/assets/admin/plugins/RGraph/libraries/RGraph.common.core.js"></script>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.segmented.js"></script>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.common.dynamic.js"></script>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.meter.js"></script>

<script src="/assets/admin/plugins/RGraph/libraries/RGraph.drawing.text.js"></script>
<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
 
<center>
<form id="fsearch" method="post" action="pmprb">    
<input type="hidden" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>" />
<input class="easyui-combobox" id='id_versi' name="id_versi" style="width:40%" data-options="
          url:'/master/versi_data',
          method:'post',
          valueField:'id',
          textField:'versiuraian',
          value:'<?php echo $id_versi; ?>',
          multiple:false,
          queryParams: {'<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>'},
          panelHeight:'auto',
          nowrap:false,
          editable:false,
          labelWidth:'100',
          onChange: function(newValue,oldValue){statustoggle(newValue);}
        ">
</form>       

<h2>INDEK RB MAHKAMAH KONSTITUSI REPUBLIK INDONESIA TAHUN <?php echo $tahunper; ?></h2></center><br/>

<center>
<div id="p" class="easyui-panel" title=" " style="width:90%;height:auto;padding:5px;">

<div class="row">
<div class="col-md-4">


<a href='*'>
    <center>
	<canvas id="cvspiep" width="300" height="300">
	[No canvas support]
	</canvas>
	<br/>
	<b>P E N G U N G K I T</b>
    </center>
</div>
<div class="col-md-4">
	<center>
	<canvas id="cvspieh" width="300" height="300">
	[No canvas support]
	</canvas>
	<br/>
    <b>H A S I L</b>
    </center>
</div>
<div class="col-md-4">
	<center>
	<canvas id="cvspieph" width="300" height="300">
	[No canvas support]
	</canvas>
	<br/>
	<b>I N D E K S  R B</b></center>
	</a>
</div>
</div>

</div>
</center>

<br/>
<center>
<table id="dglke" title=""
        class="easyui-treegrid" height="auto"  style="width:90%"
        url= 'lkemenpandata/<?php echo $id_versi; ?>/0'
		data-options="
        lines: false,
        rownumbers: false,
		fitColumns:true,
		nowrap:false,
        queryParams: {'<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>'},
		autoRowHeight:false,
        idField: 'id',
		treeField: 'kode',
        ">

        <thead>
        <tr>
        <th data-options="field:'kode'" width="200" align='left' >KODE</th>
        <th data-options="field:'penilaian'" width="700" align="left">PENILAIAN</th>
	    <th data-options="field:'nilai'" width="100" align="right">NILAI</th>

		</tr>
        </thead>
    </table>
</center>

<style>
.datagrid-row {
    background-color:#eef;
}
.tree-indent {
    	/*display:none;*/
    }
    .tree-hit {
    	/*display:none;*/
    }
    .tree-expanded {
    	/*display:none;*/
    }

    .tree-icon
    {
    display:none;
    }
    .tree-folder{
    display:none;
    }
    .tree-folder-open {
    display:none;
    }
    .tree-title {
    	text-align: left;
    	/*display: block;*/
    }

</style>


<script>
$(document).ready(function(){
    $.extend($.fn.window.methods, {
  	fixed: function(jq){
  		return jq.each(function(){
  			var opts = $(this).window('options');
  			var shadow = $(this).data('window').shadow;
  			$(this).panel('options').onMove = function(left,top){
  				var p = $(this).panel('panel');
  				setTimeout(function(){
  					p.add($(shadow)).css({
  						position:'fixed',
              top: 50
  					});
  				},0);
  				opts.onMove.call(this, left, top);
  			}
  			$(this).window('window').draggable({
  				onBeforeDrag:function(e){
  					e.data.startTop = $(this).offset().top;
  				}
  			});
  			$(this).window('move');
  		})
  	}
  });

});


</script>



















<script>
    segmented = new RGraph.Segmented({
        id: 'cvspiep',
        max: 100,
        value: <?php echo $p; ?>,
        options: {
            labelsCenterUnitsPost: '',
            labelsCenterColor: '#aaa',
            backgroundColor: '#fff',
        }
    }).roundRobin({frames: 60}).responsive([
        {maxWidth: null,width: 300,height: 300,options:{width: 55,labelsCenterSize: 40},parentCss:{'float':'right', textAlign:'none'}},
        {maxWidth: 700,width: 250,height: 250,options:{width: 40,labelsCenterSize: 45},parentCss:{'float':'none', textAlign:'center'}}
    ]);

</script>

<script>
    segmented = new RGraph.Segmented({
        id: 'cvspieh',
        max: 100,
        value: <?php echo $h; ?>,
        options: {
            labelsCenterUnitsPost: '',
            labelsCenterColor: '#aaa',
            backgroundColor: '#fff'
        }
    }).roundRobin({frames: 60}).responsive([
        {maxWidth: null,width: 300,height: 300,options:{width: 55,labelsCenterSize: 40},parentCss:{'float':'right', textAlign:'none'}},
        {maxWidth: 700,width: 250,height: 250,options:{width: 40,labelsCenterSize: 45},parentCss:{'float':'none', textAlign:'center'}}
    ]);

</script>

<script>
    segmented = new RGraph.Segmented({
        id: 'cvspieph',
        max: 100,
        value: <?php echo $ph; ?>,
        options: {
            labelsCenterUnitsPost: '',
            labelsCenterColor: '#444',
            backgroundColor: '#fff'
        }
    }).roundRobin({frames: 60}).responsive([
        {maxWidth: null,width: 300,height: 300,options:{width: 55,labelsCenterSize: 40},parentCss:{'float':'right', textAlign:'none'}},
        {maxWidth: 700,width: 250,height: 250,options:{width: 40,labelsCenterSize: 45},parentCss:{'float':'none', textAlign:'center'}}
    ]);

</script>
<script>

function statustoggle()
{
  $("#fsearch").submit();

}

</script>


<STYLE>
#nilaitot {
	border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	background: #9ed181;
	border: 0px solid #181308;
		width: 50px;
	padding: 2px;
	font-weight: bold;
}

#nilaitotm {
	border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	background: #9ed181;
	border: 0px solid #181308;
		width: 50px;
	padding: 2px;
	font-weight: bold;
}

h3 {
	color : rgba(120,120,120,0.7);
	line-height: 20px;
	font-size: 20px;
}

h4 {
	color : rgba(120,120,120,0.7);
}




</style>

<style>





#layer1 {
position: absolute;
z-index: 2;
//background-color: #6F0;
height: auto;
width: 100%;
top: 5px;
left: 0px;
}

#layer2 {
position: absolute;
z-index: 1;
//background-color: #FC0;
height: auto;
width: 100%;
top: 5px;
left: 50px;
}

#swa {
border-width: 1px;
border-style: dashed;
border-color: #777;
border-radius: 20px;
}
#menpan {
border-width: 1px;
border-style: dashed;
border-color: #777;
border-radius: 20px;
}


.wrap{
  margin-left:20px;
}

.box{
  width:95%;
  height:auto;
  float:left;
  background-color:#fff;
  margin:15px 10px;
  border-radius:25px;
}
.box h3{
  font-family: 'Didact Gothic', sans-serif;
  font-weight:normal;
  text-align:center;
  padding-top:1px;
  color:#000;
}

.shadow2{
  position:relative;
}
.shadow2{
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}


.shadow2:before{
  position:absolute;
  content:"";
  width:80%;
  top:140px;bottom:15px;left:30px;
  background-color:#9F8641;
  z-index:-1;
  -webkit-box-shadow:0 23px 17px 0 #9F8641;
  -moz-box-shadow:0 23px 17px 0 #9F8641;
  box-shadow: 0 23px 17px 0 #9F8641;
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  transform:rotate(-3deg);
}

form {
    margin: 0 0 0px;
}
H2 {
	font-size: 24px;
	color:#777;
	text-shadow: 0px 1px 2px #555;
}

.datagrid-htable, .datagrid-btable, .datagrid-ftable {
    background-color: #ddd;
}
.datagrid-header-row {
    height: 32px;
		background-color: #999;
//		color:white;
//		font-size: 27px;

}
</style>




<?php echo $this->endSection() ?>
