@extends('home.layout-index')
@section('content')
@php
	$modul="Grafik Penanganan";
@endphp
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgit.com/highcharts/rounded-corners/master/rounded-corners.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<style>
.highcharts-figure, .highcharts-data-table table {
    min-width: 320px; 
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}
#grafik1, #sliders {
    min-width: 310px; 
    max-width: 800px;
    margin: 0 auto;
}
#grafik1 {
    height: 400px; 
}

.tbl{
	padding:5px;
	font-size:12px;
}
.font_tbl{
	padding-top:5px;
	padding-right:5px;
	padding-bottom:5px;
	font-size:12px;
}
.a{
	border:1px red;
}
.batas{
	border:1px solid #e3e3e3;
	border-radius: 10px;
}
.tbl th{
	text-align:center;
}
</style>
<form name=frm id=frm method=post>
<div class=container>
<div style="height:15px"></div>
<div class="row">
	<div class="col-10 title">
		{!!$title!!}
	</div>
</div>     
<div style="height:10px"></div>
<div class="row">
	<div class="col-12 d-flex text-justify modulinfo">
		{!!$modulinfo!!}
       </div>
   </div>    
   <div style="height:25px"></div>
</div>
<div class="row">
	<div class="col  d-flex justify-content-center">
		<div class="row" style="width:85%;">
			<div class="col-sm m-2" ><div id=grafik0 class="batas" style="width:300px;height:300px"></div></div>
			<div class="col-sm m-2" ><div id=grafik2 class="batas" style="width:300px;height:300px"></div></div>
			<div class="col-sm m-2" ><div id=grafik3 class="batas" style="width:300px;height:300px"></div></div>
			<div class="col-sm m-2" ><div id=grafik4 class="batas" style="width:300px;height:300px"></div></div>
			<div class="col-sm m-2" ><div id=grafik5 class="batas" style="width:300px;height:300px"></div></div>
			<div class="col-sm m-2" ><div id=grafik6 class="batas" style="width:300px;height:300px"></div></div>
			<div class="col-sm m-2" ><div id=grafik7 class="batas" style="width:300px;height:300px"></div></div>
		</div>
	</div>
</div>
		
</div>
@php
$data1_nm="";$data1_laporan="";$data1_temuan="";
if (!empty($data1)) {
   foreach ($data1 as $row1) {
        $data1_nm.="'".$row1->periode."',";
        $data1_laporan.=$row1->jmllaporan.",";
        $data1_temuan.=$row1->jmltemuan.",";
    }
}
$data1_laporan=delkoma($data1_laporan);
$data1_temuan=delkoma($data1_temuan);

$data2_nm="";$data2_register="";$data2_tidakregister="";$data2_proses="";
if (!empty($data2)) {
   foreach ($data2 as $row2) {
        $data2_nm.="'".$row2->periode."',";
        $data2_register.=$row2->jmlregister.",";
        $data2_tidakregister.=$row2->jmltidakregister.",";
        $data2_proses.=$row2->jmlproses.",";
    }
}
$data2_register=delkoma($data2_register);
$data2_tidakregister=delkoma($data2_tidakregister);
$data2_proses=delkoma($data2_proses);

$data3_a["pct"]=0;
$data3_a["nama"]="";
$data3_b["pct"]=0;
$data3_b["nama"]="";
$data3_c["pct"]=0;
$data3_c["nama"]="";
$data3_d["pct"]=0;
$data3_d["nama"]="";
$data3_e["pct"]=0;
$data3_e["nama"]="";
if (!empty($data3)) {
    foreach ($data3 as $row) {
        if($row->id==1){
            $data3_a["pct"]=$row->pct;
            $data3_a["nama"]=$row->nama;
        }
        if($row->id==2){
            $data3_b["pct"]=$row->pct;
            $data3_b["nama"]=$row->nama;
        }
        if($row->id==3){
            $data3_c["pct"]=$row->pct;
            $data3_c["nama"]=$row->nama;
        }
        if($row->id==4){
            $data3_d["pct"]=$row->pct;
            $data3_d["nama"]=$row->nama;
        }
        if($row->id==5){
            $data3_e["pct"]=$row->pct;
            $data3_e["nama"]=$row->nama;
        }
    }
}

$data4_a["pct"]=0;
$data4_a["nama"]="";
$data4_b["pct"]=0;
$data4_b["nama"]="";
if (!empty($data4)) {
    foreach ($data4 as $row) {
        if($row->id==6){
            $data4_a["pct"]=$row->pct;
            $data4_a["nama"]=$row->nama;
        }
        if($row->id==7){
            $data4_b["pct"]=$row->pct;
            $data4_b["nama"]=$row->nama;
        }
    }
}

$data5_a["pct"]=0;
$data5_a["nama"]="";
$data5_b["pct"]=0;
$data5_b["nama"]="";
$data5_c["pct"]=0;
$data5_c["nama"]="";
if (!empty($data5)) {
    foreach ($data5 as $row) {
        if($row->id==8){
            $data5_a["pct"]=$row->pct;
            $data5_a["nama"]=$row->nama;
        }
        if($row->id==9){
            $data5_b["pct"]=$row->pct;
            $data5_b["nama"]=$row->nama;
        }
        if($row->id==10){
            $data5_c["pct"]=$row->pct;
            $data5_c["nama"]=$row->nama;
        }
    }
}

$data6_a["pct"]=0;
$data6_a["nama"]="";
$data6_b["pct"]=0;
$data6_b["nama"]="";
$data6_c["pct"]=0;
$data6_c["nama"]="";
if (!empty($data6)) {
    foreach ($data6 as $row) {
        if($row->id==11){
            $data6_a["pct"]=$row->pct;
            $data6_a["nama"]=$row->nama;
        }
        if($row->id==12){
            $data6_b["pct"]=$row->pct;
            $data6_b["nama"]=$row->nama;
        }
        if($row->id==13){
            $data6_c["pct"]=$row->pct;
            $data6_c["nama"]=$row->nama;
        }
    }
}

$data7_a["pct"]=0;
$data7_a["nama"]="";
$data7_b["pct"]=0;
$data7_b["nama"]="";
if (!empty($data7)) {
    foreach ($data7 as $row) {
        if($row->id==14){
            $data7_a["pct"]=$row->pct;
            $data7_a["nama"]=$row->nama;
        }
        if($row->id==15){
            $data7_b["pct"]=$row->pct;
            $data7_b["nama"]=$row->nama;
        }
    }
}
@endphp
</form>
<script>
Highcharts.chart('grafik0', {
	title: {
		text:"Laporan & Temuan {!!session('ujenislaporannm')!!}",
        style: {
            color: '#000',
            font: 'bold 14px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    xAxis: {
        categories: ['']
    },
    plotOptions: {
    	series: {
        	borderRadiusTopLeft: '15%',
        	borderRadiusTopRight: '15%'
        }
    },
    series: [{
           name: 'Laporan',
           data: [{!!$data1_laporan!!}],
   		   type: 'column',
           color: '#ff7900'

       }, {
           name: 'Temuan',
           data: [{!!$data1_temuan!!}],
   		   type: 'column',
           color: '#e2b665'

       }
	]
});
Highcharts.chart('grafik2', {
	title: {
		text:"Register, Unregister & Proses {!!session('ujenislaporannm')!!}",
        style: {
            color: '#000',
            font: 'bold 14px "Trebuchet MS", Verdana, sans-serif'
        }
    },

    xAxis: {
        categories: ['']
    },
    plotOptions: {
    	series: {
        	borderRadiusTopLeft: '15%',
        	borderRadiusTopRight: '15%'
        }
    },
    series: [{
           name: 'Register',
           data: [{!!$data2_register!!}],
   		   type: 'column',
           color: '#ff7900'

       }, {
           name: 'Unregister',
           data: [{!!$data2_tidakregister!!}],
   		   type: 'column',
           color: '#e2b665'

       }, {
           name: 'Proses',
           data: [{!!$data2_proses!!}],
   		   type: 'column',
           color: '#eed3b5'

       }
	]
});

Highcharts.chart('grafik3', {
   chart: {
     type: 'solidgauge',
     marginTop: 50
   },
   title: {
     text: "{{ $data3_judul->nama }}<br>(Total Penerusan {{$data3_judul->jml}} Rekomendasi)",
     style: {
        color: '#000',
        font: 'bold 14px "Trebuchet MS", Verdana, sans-serif'
     }
   },
   tooltip: {
     borderWidth: 0,
     backgroundColor: 'none',
     shadow: false,
     style: {
       fontSize: '16px'
     },
     pointFormat: '<span style="font-size:0.8em;">{series.name}</span>&nbsp;<span style="font-size:0.8em; color: {point.color}; font-weight: bold">{point.y}%</span>',
     positioner: function(labelWidth, labelHeight) {
       return {
         x: 150 - labelWidth / 2,
         y: 203
       };
     }
   },
   pane: {
     startAngle: 0,
     endAngle: 360,
     background: [{
       outerRadius: '116%',
       innerRadius: '100%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     },{
       outerRadius: '100%',
       innerRadius: '82%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }, {
       outerRadius: '82%',
       innerRadius: '66%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }, {
       outerRadius: '66%',
       innerRadius: '50%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }, {
       outerRadius: '50%',
       innerRadius: '34%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }]
   },
   yAxis: {
     min: 0,
     max: 100,
     lineWidth: 0,
     tickPositions: []
   },
   plotOptions: {
     solidgauge: {
       borderWidth: '10px',
       dataLabels: {
         enabled: false
       },
       linecap: 'round',
       stickyTracking: false
     }
   },
   legend: {
     labelFormatter: function() {
       return '<span style="text-weight:bold;color:' + this.userOptions.color + '">&nbsp;' + this.name + '</span>';
     },
     symbolWidth: 0
   },
   series: [{
     name: '{{$data3_a["nama"]}}',
     marker: {enabled:false},
     borderColor: '#e2b665',
     color: '#e2b665',
     data: [{
       color: '#e2b665',
       radius: '107%',
       innerRadius: '107%',
       y: {{$data3_a["pct"]}}
     }],
     showInLegend: true
   },{
     name: '{{$data3_b["nama"]}}',
     marker: {enabled:false},
     borderColor: '#ff7900',
     color: '#ff7900',
     data: [{
       color: '#ff7900',
       radius: '91%',
       innerRadius: '91%',
       y: {{$data3_b["pct"]}}
     }],
     showInLegend: true
   }, {
     name: '{{$data3_c["nama"]}}',
     marker: {enabled:false},
     borderColor: '#d60f1b',
     color: '#d60f1b',
     data: [{
       color: '#d60f1b',
       radius: '75%',
       innerRadius: '75%',
       y: {{$data3_c["pct"]}}
     }],
     showInLegend: true
   }, {
     name: '{{$data3_d["nama"]}}',
     marker: {enabled:false},
     borderColor: '#ba9c5c',
     color:'#ba9c5c',
     data: [{
       color: '#ba9c5c',
       radius: '59%',
       innerRadius: '59%',
       y: {{$data3_d["pct"]}}
     }],
     showInLegend: true
   }, {
     name: '{{$data3_e["nama"]}}',
     marker: {enabled:false},
     borderColor: '#ffc000',
     color:'#ffc000',
     data: [{
       color: '#ffc000',
       radius: '43%',
       innerRadius: '43%',
       y: {{$data3_e["pct"]}}
     }],
     showInLegend: true
   }]
 });

 Highcharts.chart('grafik4', {
   chart: {
     type: 'solidgauge',
     marginTop: 50
   },
   title: {
     text: '{{$data4_judul->nama}}<br>(Total Penerusan {{$data4_judul->jml}} Rekomendasi)',
     style: {
        color: '#000',
        font: 'bold 14px "Trebuchet MS", Verdana, sans-serif'
     }
   },
   tooltip: {
     borderWidth: 0,
     backgroundColor: 'none',
     shadow: false,
     style: {
       fontSize: '16px'
     },
     pointFormat: '<span style="font-size:0.8em;">{series.name}</span>&nbsp;<span style="font-size:0.8em; color: {point.color}; font-weight: bold">{point.y}%</span>',
     positioner: function(labelWidth, labelHeight) {
       return {
         x: 150 - labelWidth / 2,
         y: 225
       };
     }
   },
   pane: {
     startAngle: 0,
     endAngle: 360,
     background: [{
       outerRadius: '100%',
       innerRadius: '82%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }, {
       outerRadius: '82%',
       innerRadius: '66%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }]
   },
   yAxis: {
     min: 0,
     max: 100,
     lineWidth: 0,
     tickPositions: []
   },
   plotOptions: {
     solidgauge: {
       borderWidth: '10px',
       dataLabels: {
         enabled: false
       },
       linecap: 'round',
       stickyTracking: false
     }
   },
   legend: {
     labelFormatter: function() {
       return '<span style="text-weight:bold;color:' + this.userOptions.color + '">&nbsp;' + this.name + '</span>';
     },
     symbolWidth: 0
   },
   series: [{
     name: '{{$data4_a["nama"]}}',
     marker: {enabled:false},
     borderColor: '#ff7900',
     color: '#ff7900',
     data: [{
       color: '#ff7900',
       radius: '91%',
       innerRadius: '91%',
       y: {{$data4_a["pct"]}}
     }],
     showInLegend: true
   }, {
     name: '{{$data4_b["nama"]}}',
     marker: {enabled:false},
     borderColor: '#d60f1b',
     color: '#d60f1b',
     data: [{
       color: '#d60f1b',
       radius: '75%',
       innerRadius: '75%',
       y: {{$data4_b["pct"]}}
     }],
     showInLegend: true
   }]
 });

Highcharts.chart('grafik5', {
   chart: {
     type: 'solidgauge',
     marginTop: 50
   },
   title: {
     text: '{{$data5_judul->nama}}<br>(Total Penerusan {{$data5_judul->jml}} Rekomendasi)',
     style: {
        color: '#000',
        font: 'bold 14px "Trebuchet MS", Verdana, sans-serif'
     }
   },
   tooltip: {
     borderWidth: 0,
     backgroundColor: 'none',
     shadow: false,
     style: {
       fontSize: '16px'
     },
     pointFormat: '<span style="font-size:0.8em;">{series.name}</span>&nbsp;<span style="font-size:0.8em; color: {point.color}; font-weight: bold">{point.y}%</span>',
     positioner: function(labelWidth, labelHeight) {
       return {
         x: 150 - labelWidth / 2,
         y: 200
       };
     }
   },
   pane: {
     startAngle: 0,
     endAngle: 360,
     background: [{
       outerRadius: '100%',
       innerRadius: '82%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }, {
       outerRadius: '82%',
       innerRadius: '66%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }, {
       outerRadius: '66%',
       innerRadius: '50%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }]
   },
   yAxis: {
     min: 0,
     max: 100,
     lineWidth: 0,
     tickPositions: []
   },
   plotOptions: {
     solidgauge: {
       borderWidth: '10px',
       dataLabels: {
         enabled: false
       },
       linecap: 'round',
       stickyTracking: false
     }
   },
   legend: {
     labelFormatter: function() {
       return '<span style="text-weight:bold;color:' + this.userOptions.color + '">&nbsp;' + this.name + '</span>';
     },
     symbolWidth: 0
   },
   series: [{
     name: '{{$data5_a["nama"]}}',
     marker: {enabled:false},
     borderColor: '#ff7900',
     color: '#ff7900',
     data: [{
       color: '#ff7900',
       radius: '91%',
       innerRadius: '91%',
       y: {{$data5_a["pct"]}}
     }],
     showInLegend: true
   }, {
     name: '{{$data5_b["nama"]}}',
     marker: {enabled:false},
     borderColor: '#ba9c5c',
     color: '#ba9c5c',
     data: [{
       color: '#ba9c5c',
       radius: '75%',
       innerRadius: '75%',
       y: {{$data5_b["pct"]}}
     }],
     showInLegend: true
   }, {
     name: '{{$data5_c["nama"]}}',
     marker: {enabled:false},
     borderColor: '#d60f1b',
     color:'#d60f1b',
     data: [{
       color: '#d60f1b',
       radius: '59%',
       innerRadius: '59%',
       y: {{$data5_c["pct"]}}
     }],
     showInLegend: true
   }]
 });

Highcharts.chart('grafik6', {
   chart: {
     type: 'solidgauge',
     marginTop: 50
   },
   title: {
     text: '{{$data6_judul->nama}}<br>(Total Penerusan {{$data6_judul->jml}} Rekomendasi)',
     style: {
        color: '#000',
        font: 'bold 14px "Trebuchet MS", Verdana, sans-serif'
     }
   },
   tooltip: {
     borderWidth: 0,
     backgroundColor: 'none',
     shadow: false,
     style: {
       fontSize: '16px'
     },
     pointFormat: '<span style="font-size:0.8em;">{series.name}</span>&nbsp;<span style="font-size:0.8em; color: {point.color}; font-weight: bold">{point.y}%</span>',
     positioner: function(labelWidth, labelHeight) {
       return {
         x: 150 - labelWidth / 2,
         y: 225
       };
     }
   },
   pane: {
     startAngle: 0,
     endAngle: 360,
     background: [{
       outerRadius: '100%',
       innerRadius: '82%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }, {
       outerRadius: '82%',
       innerRadius: '66%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }, {
       outerRadius: '66%',
       innerRadius: '50%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }]
   },
   yAxis: {
     min: 0,
     max: 100,
     lineWidth: 0,
     tickPositions: []
   },
   plotOptions: {
     solidgauge: {
       borderWidth: '10px',
       dataLabels: {
         enabled: false
       },
       linecap: 'round',
       stickyTracking: false
     }
   },
   legend: {
     labelFormatter: function() {
       return '<span style="text-weight:bold;color:' + this.userOptions.color + '">&nbsp;' + this.name + '</span>';
     },
     symbolWidth: 0
   },
   series: [{
     name: '{{$data6_a["nama"]}}',
     marker: {enabled:false},
     borderColor: '#ff7900',
     color: '#ff7900',
     data: [{
       color: '#ff7900',
       radius: '91%',
       innerRadius: '91%',
       y: {{$data6_a["pct"]}}
     }],
     showInLegend: true
   }, {
     name: '{{$data6_b["nama"]}}',
     marker: {enabled:false},
     borderColor: '#ba9c5c',
     color: '#ba9c5c',
     data: [{
       color: '#ba9c5c',
       radius: '75%',
       innerRadius: '75%',
       y: {{$data6_b["pct"]}}
     }],
     showInLegend: true
   }, {
     name: '{{$data6_c["nama"]}}',
     marker: {enabled:false},
     borderColor: '#d60f1b',
     color:'#d60f1b',
     data: [{
       color: '#d60f1b',
       radius: '59%',
       innerRadius: '59%',
       y: {{$data6_c["pct"]}}
     }],
     showInLegend: true
   }]
 });
 
 Highcharts.chart('grafik7', {
   chart: {
     type: 'solidgauge',
     marginTop: 50
   },
   title: {
     text: '{{ isset($data7_judul->nama) ? $data7_judul->nama : "No title available"; }}<br>(Total Penerusan {{ isset($data7_judul->jml) ? $data7_judul->jml : 0; }} Rekomendasi)',
     style: {
        color: '#000',
        font: 'bold 14px "Trebuchet MS", Verdana, sans-serif'
     }
   },
   tooltip: {
     borderWidth: 0,
     backgroundColor: 'none',
     shadow: false,
     style: {
       fontSize: '16px'
     },
     pointFormat: '<span style="font-size:0.8em;">{series.name}</span>&nbsp;<span style="font-size:0.8em; color: {point.color}; font-weight: bold">{point.y}%</span>',
     positioner: function(labelWidth, labelHeight) {
       return {
         x: 150 - labelWidth / 2,
         y: 225
       };
     }
   },
   pane: {
     startAngle: 0,
     endAngle: 360,
     background: [{
       outerRadius: '100%',
       innerRadius: '82%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }, {
       outerRadius: '82%',
       innerRadius: '66%',
       //backgroundColor: Highcharts.Color('#e4e4e4').get(),
       borderWidth: 0
     }]
   },
   yAxis: {
     min: 0,
     max: 100,
     lineWidth: 0,
     tickPositions: []
   },
   plotOptions: {
     solidgauge: {
       borderWidth: '10px',
       dataLabels: {
         enabled: false
       },
       linecap: 'round',
       stickyTracking: false
     }
   },
   legend: {
     labelFormatter: function() {
       return '<span style="text-weight:bold;color:' + this.userOptions.color + '">&nbsp;' + this.name + '</span>';
     },
     symbolWidth: 0
   },
   series: [{
     name: '{{$data7_b["nama"]}}',
     marker: {enabled:false},
     borderColor: '#ff7900',
     color: '#ff7900',
     data: [{
       color: '#ff7900',
       radius: '91%',
       innerRadius: '91%',
       y: {{$data7_b["pct"]}}
     }],
     showInLegend: true
   }, {
     name: '{{$data7_a["nama"]}}',
     marker: {enabled:false},
     borderColor: '#d60f1b',
     color: '#d60f1b',
     data: [{
       color: '#d60f1b',
       radius: '75%',
       innerRadius: '75%',
       y: {{$data7_a["pct"]}}
     }],
     showInLegend: true
   }]
 });
</script>
@endsection