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


<?php //echo '<pre>';print_r($data);echo '</pre>'; ?>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.common.core.js"></script>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.bar.js"></script>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.line.js"></script>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.horseshoe.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.yaxis.js"></script>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.bar.js"></script>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.vprogress.js"></script>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.semicircularprogress.js"></script>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.line.js"></script>

<script src="/assets/admin/plugins/RGraph/libraries/RGraph.pie.js"></script>
<script src="/assets/admin/plugins/RGraph/libraries/RGraph.drawing.text.js"></script>
-->


<head><title>PROGRESS UPLOAD DOKUMEN</title></head>
<center><?php include('search_progressnilai.php'); ?></center>


<?php 
    $ii=1;
    $datap = array();
    $datauk = array();
    $dataall = 0;
    foreach($data as $k=>$r)
    {
      if($data[$k] !== 'all') {
      $datap[$ii] = floatval($r['cverunver']);
      $datauk[$ii] = $daftarunitkerja[$k]['kode_unitkerja'];
      $ii++;
      }
      $dataall = floatval($r['cverunver']);
    }
?>
<center>
<h2><div class='glyphicon glyphicon-th-large'></div>&nbsp;<b><?php echo $title; ?>  </b></h2>
<div ><?=esc('PROGRESS SECARA KESELURUHAN'); ?></div>
<div>
<canvas id="cvs" width="320" height="200" >[No canvas support]</canvas>
<div ><?=esc('PROGRESS INSTANSI / UNIT KERJA'); ?></div>

</div>
<br/>
<?php
for ($i=1;$i <=$totalunitkerja;$i++)
{ ?>
<div class="grafik1">
<div class='grafik'>
<canvas id="cvs<?php echo $i; ?>" width="150" height="175" style="display:inline-block;border: 0px solid #ddd">[No canvas support]
</canvas>
</div>
<div class="grafik"><?php echo $datauk[$i]; ?></div>
</div>
<?php } ?>
</center>

<div style="margin-bottom:5px"></div>

<i><small>Klik kolom 'Unit Kerja/Instansi' untuk detil</small></i>
<center>
<table class = "paleBlueRows" width='100%' >
<thead><tr><th>NO</th><th>KODE</th><th>UNIT KERJA / INSTANSI</th><th>PERSENTASE UPLOAD</th><th>VERIFIED</th><th>UNVERIFIED</th><th>BLM UPLOAD</th></tr></thead>
<?php
    $no = 1;
    foreach($data as $k=>$v)
    {
      if($k !== 'all') {
      $nama_unitkerja = $daftarunitkerja[$k]['nama_unitkerja'];
      $kode_unitkerja = $daftarunitkerja[$k]['kode_unitkerja'];
      $id_unitkerja = $daftarunitkerja[$k]['id_unitkerja'];

      if($v['cverunver'] > 0) $cverunver = $v['cverunver'].' %'; else $cverunver = '-';
      if($v['cver'] > 0) $cver = $v['cver'].' %'; else $cver = '-';
      if($v['cunver'] > 0) $cunver = $v['cunver'].' %'; else $cunver = '-';
      if($v['cblank'] > 0) $cblank = $v['cblank'].' %'; else $cblank = '-';

      $nm = '<a href="#" onClick="progressdetil('.$id_unitkerja.')">'.$nama_unitkerja.'</a>';


      echo "<tr><td>".esc($no)."</td><td>".esc($kode_unitkerja)."</td><td align='left'>".$nm."</td><td>".esc($cverunver)."</td><td>".esc($cver)."</td><td>".esc($cunver)."</td><td>".esc($cblank)."</td></tr>";
      $no++;
      }
    }
?>

</table>

</center>
<br/>
<div id="allbox"></div>  
<div id="box"></div>  

<script>

$(document).ready(function(){

  $("button").click(function(){
      backhome();
    });

//alert('d');


});


</script>

<script>
function progressdetil(uk)
{
  $("#box").empty();
  $("#box").load("/dashboard/progressbd_detil1/"+uk);
  $('html, body').animate({
        scrollTop: $("#allbox").offset().top
    }, 2000);
}


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

}


</script>


<script>
    var i;
    totalunitkerja      = <?php echo $totalunitkerja; ?>;
    var dataps = <?php echo json_encode($datap); ?>;
    var datapuk = <?php echo json_encode($datauk); ?>;
    for (i = 1; i <= totalunitkerja; ++i) {
            value = dataps[i];
            valuee = datapuk[i];
    horseshoe = new RGraph.Horseshoe({
        id: 'cvs'+i,
        min: 0.00001,
        max: 100,
        value: value,
        options: {
            colors:['#1A237E','#757575'],
            textFont:'Verdana',
            textSize:'22',
            textBold:'true',
            textColor:'#D50000',
            labelsCenterDecimals:'1',
            endsColor:'#3E2723',
            width:12,
            radius:70
            //labelsCenterUnitsPost:valuee
        }
    }).grow();

    horseshoe.canvas.onclick = function (e)
    {
        var obj   = e.target.__object__;
        var value = obj.getValue(e);
        //alert(this.id);   
        //alert(datapuk[1]);
        alert(this.max);
    }


  }



</script>
<script>
    var dataall =<?php echo $dataall; ?>;
    defaultColors = [
        [0,10,'#f20'],
        [10,20,'#f30'],
        [20,30,'#f50'],
        [30,40,'#f60'],
        [40,50,'#f80'],
        [50,60,'#fa0'],
        [60,70,'#C8E6C9'],
        [70,80,'#A5D6A7'],
        [80,90,'#7CB342'],
        [90,100,'#00C853'],
    ];
    
    // Create the Meter chart specifying the min/max/value
    meter = new RGraph.Meter({
        id: 'cvs',
        min: 0,
        max: 100,
        value: dataall,
        options: {
            labelsValue :'true',
            labelsValueSize : 34,
            labelsValueBold : 'true',
            labelsValueOffsety:35,
            labelsValueBackground:'false',
            labelsValueBackgroundFill:'rgba(0,0,0,0)',
            linewidth:10,
            labelsValueDecimals:'1',
            needleType:'pointer',
            needleTail:'true',
            backgroundColor:'rgba(0,0,0,0.1)',
            // Hide the centerpin by setting its colors to transparent
            centerpinStroke: 'rgba(10,0,0)',
            centerpinFill: 'rgba(0,0,0,0)',

            // These are the colors for the segments on the main chart
            colorsRanges: defaultColors,

            // Turn off labels
            labelsCount: 0,
            
            // By setting the start and end angles of the Meter you can change
            // the extent of the Meter chart from the default semi-circle
            anglesStart: RGraph.PI + 0.2,
            anglesEnd: RGraph.TWOPI - 0.2,

            linewidthSegments: 3,
            textSize: 14,
            colorsStroke: 'white',
            segmentsRadiusStart: 160,
            needleRadius: 140,
            border: 0,
            tickmarksSmallCount: 0,
            tickmarksLargeCount: 0,
            
            // This option means that the chart will be dynamically adjustable.
            // You could then use the adjust* events to do something with the
            // new value of the chart.
            adjustable: true
        }
    })
    .draw();
    /*
    .on('click', function (e, shape)
    {
      alert('ok');
      // Handle click event
    }).draw();
    */
    
    //
    // This function facilitates changing the colors to a
    // smooth gradient and vice-versa
    //
    function toggleGradient ()
    {
        // The meter.isGradient variable doesn't have any special RGraph meaning - it's
        // just a regular JavaScript variable that we're setting here that allows us to
        // track what style of color the chart is using.
        if (!meter.isGradient) {
            meter.set('colorsRanges', [[0,100,'Gradient({colors:["red","yellow"],x1:50,y1:0,x2:350,y2:0})']]);
        } else {
            meter.set('colorsRanges', defaultColors);
        }
        
        meter.isGradient = !meter.isGradient;
        
        // Reset this flag so that the colors are parsed again;
        meter.colorsParsed = false;

        RGraph.redraw()
    }
</script>
  

<STYLE>
.grafik {
    display : block;
    text-align:center;
    font-size:25px;
    font-weight:bold;
    line-height:10px;
    color:#444;
}

.grafik1 {
    display : inline-block;
    width:200px;
    text-align:center;
}
.grafik2 {
    display : inline-block;
    width:200px;
    text-align:center;
}

table.paleBlueRows {
  border: 1px solid #ccc;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
table.paleBlueRows td, table.paleBlueRows th {
  border: 1px solid #888;
  padding: 4px 2px;
}
table.paleBlueRows tbody td {
  font-size: 1.5vw;
  background-color:#f5e5c9;
}
table.paleBlueRows tr:nth-child(even) {
  background: #f5e5c9;
}
table.paleBlueRows thead {
  background: #0B6FA4;
  border-bottom: 2px solid #888;
}
table.paleBlueRows thead th {
  font-size: 1.1vw;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #FFFFFF;
}
table.paleBlueRows thead th:first-child {
  border-left: none;
}

table.paleBlueRows tfoot {
  font-size: 1.5vw;
  color: #333333;
  background: #D0E4F5;
  border-top: 3px solid #444444;
}
table.paleBlueRows tfoot td {
  font-size: 1.5vw;
}

.content {
  background-image: url("/assets/images/<?php echo FLD_APP ?>/progress_bg.jpg");
  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

a:link {
  color: #555;
}

/* visited link */
a:visited {
  color: #333;
}

/* mouse over link */
a:hover {
  color: black;
  font-weight:bold;
}

/* selected link */
a:active {
  color: black;
}
</style>



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