<!-- Scripts -->
    <script type="text/javascript" src="<?php echo PATH; ?>js/jqueryscript.min.js"></script>
    <script type="text/javascript" src="<?php echo PATH; ?>js/jqueryuiscript.min.js"></script>
    <script type="text/javascript" src="<?php echo PATH; ?>js/easing.min.js"></script>        
    <script type="text/javascript" src="<?php echo PATH; ?>js/smoothscroll.min.js"></script>        
    <script type="text/javascript" src="<?php echo PATH; ?>js/magnific.min.js"></script>        
    <script type="text/javascript" src="<?php echo PATH; ?>js/bxslider.min.js"></script>        
    <script type="text/javascript" src="<?php echo PATH; ?>js/fitvids.min.js"></script>
    <script type="text/javascript" src="<?php echo PATH; ?>js/viewportchecker.min.js"></script>        
    <script type="text/javascript" src="<?php echo PATH; ?>js/init.js"></script>
	
    <script type="text/javascript">
		$('.popup-link').magnificPopup({
			type: 'image'
		});
		$('#bannerSlider').bxSlider({
		  auto: true,
		  autoControls: true,
		  stopAutoOnClick: true,
		  controls: false,
		  responsive: true,
		  pager: false
		});	
	</script>
<?php
if(isset($_GET['page'])){
	switch($_GET['page']){	
		case 'Jenis-Perizinan': 
?>
    <script src="<?php echo PATH; ?>/css/DataTables/datatables.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function () {
        $("#example1").dataTable();
      });
    </script>	
<?php
	break;
	case 'kontak': 
?>
		<script src="<?php echo PATH; ?>js/jquery.gmap/jquery.gmaps.js"></script>
		<script>
		  $(document).ready(function(){
			$('.gmaps').gmaps();
		  });
		</script>
        <script src="<?php echo PATH; ?>assets/js/bootstrap.js"></script>
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <script src="<?php echo PATH; ?>assets/js/validator.js"></script>
        <script src="<?php echo PATH; ?>assets/js/contact.js"></script>		
<?php
	break;
	case 'cari': 
	case 'arsip': 
?>
<script type="text/javascript">
(function($){	
	$.fn.loaddata = function(options) {
		var settings = $.extend({ 
			loading_gif_url	: "<?php echo PATH; ?>images/ajax-loader.gif", 
			end_record_text	: 'Tidak ada Data!', 
			loadbutton_text	: 'Load More!', 
			data_url 		: '<?php echo PATH; ?>loadmore', 
			start_page 		: 1,
			cari 			: '<?php echo $keyword; ?>' ,
			tipe 			: '<?php echo $tipe; ?>' 
		}, options);
		
		var el = this;	
		loading  = false; 
		end_record = false;		
		
		var load_more_btn = $('<button/>').text(settings.loadbutton_text).addClass('btn btn_turquoise btn_expand').click(function(e){ 
			contents(el, this, settings); 
		});
		
		contents(el, load_more_btn, settings); 
	}; 
	
	function contents(el, load_btn,  settings){
		var load_img = $('<img/>').attr('src',settings.loading_gif_url).addClass('loading-image'); 
		var record_end_txt = $('<div/>').text(settings.end_record_text).addClass('col col_12_of_12 end-record-info alert_message red clearfix'); 
			
		if(loading == false && end_record == false){
			loading = true; 
			el.append(load_img); 
			

			if(load_btn.type === 'submit' || load_btn.type === 'click'){
				load_btn.remove();
			}
			
			$.post( settings.data_url, {'page': settings.start_page,'cari': settings.cari,'tipe': settings.tipe}, function(data){ 
				if(data.trim().length == 0){
					el.append(record_end_txt);
					load_img.remove(); 
					load_btn.remove(); 
					end_record = true; 
					return;
				}
				loading = false;  
				load_img.remove();
				el.append(data).append(load_btn);  
				settings.start_page ++;  
			})
		}
	}

})(jQuery);

$("#results").loaddata();
</script>

<?php
	break;	
	
	case 'ikm': 
?>
		<script type="text/javascript">
$(function () {
    $('#chartIKM').highcharts({
        chart: {
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 25,
                depth: 70
            }
        },
        title: {
			text: 'Indeks Kepuasaan Masyarakat (IKM)'
        },
        subtitle: {
					text: 'Periode Tahun 2011 - 2019'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        xAxis: {
					categories: ['2011','2012','2013','2014','2015','2016','2017','2018','2019']
        },
        yAxis: {
            title: {
                text: null
            }
        },
        series: [{
            name: 'IKM',
					data: [80.92, 80.91, 80.93,81.03,81.15,81.22,81.76,82.25,88.38]
        }]
    });
});
		</script>
		<script src="<?php echo PATH; ?>js/highcharts.js"></script>
		<script src="<?php echo PATH; ?>js/highcharts-3d.js"></script>
		<script src="<?php echo PATH; ?>js/exporting.js"></script>	
<?php
	break;	
	
	case 'pma-pmdn': 
?>
		<script type="text/javascript">
$(function () {
    $('#pma').highcharts({

        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                viewDistance: 25,
                depth: 40
            },
            marginTop: 80,
            marginRight: 40
        },
		colors: [
            '#00e600','#ff0066'
            ],
        title: {
            text: 'Target dan Realisasi PMA Sesuai Laporan Kegiatan Penanaman Modal'
        },
        subtitle: {
            text: 'Tahun 2012-2017'
        },
        xAxis: {
            categories: ['2012', '2013', '2014', '2015', '2016', '2017']
        },

        yAxis: {
            allowDecimals: true,
            min: 0,
            title: {
                text: '<b>Juta US $</b>'
            }
        },

        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}'
        },

        plotOptions: {
            column: {
                depth: 40
            }
        },

        series: [{
            name: 'Target PMA',
            data: [10,15, 25, 40, 15, 13.15],
        }, {
            name: 'Realisasi PMA',
            data: [7.08, 5.46, 18.92, 69.55, 9.56, 12.69],			
        }
		]
    });
});


		</script>
				<script type="text/javascript">
$(function () {
    $('#pmdn').highcharts({

        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                viewDistance: 25,
                depth: 40
            },
            marginTop: 80,
            marginRight: 40
        },
		colors: [
            '#b30000','#0047b3'
            ],
        title: {
            text: 'Target dan Realisasi PMDN Sesuai Laporan Kegiatan Penanaman Modal'
        },
        subtitle: {
            text: 'Tahun 2012-2017'
        },
        xAxis: {
            categories: ['2012', '2013', '2014', '2015', '2016', '2017']
        },

        yAxis: {
            allowDecimals: true,
            min: 0,
            title: {
                text: '<b>Milyar Rp.</b>'
            }
        },

        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}'
        },

        plotOptions: {
            column: {
                depth: 40
            }
        },

        series: [{
            name: 'Target PMDN',
            data: [4,1000, 1500, 2000, 2000, 1100],
        }, {
            name: 'Realisasi PMDN',
            data: [4.76, 1322.63, 2658.32, 4463.4, 694.72, 927.36],			
        }
		]
    });
});


		</script>
		<script src="<?php echo PATH; ?>js/highcharts.js"></script>
		<script src="<?php echo PATH; ?>js/highcharts-3d.js"></script>
		<script src="<?php echo PATH; ?>js/exporting.js"></script>	
<?php
	break;	

	case 'profile-pekanbaru': 
?>
<script type="text/javascript">
$(function () {
    $('#penduduk').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: 'Berdasarkan Suku Bangsa'
        },
        tooltip: {
            pointFormat: '<b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'jumlah',
            data: [			
                ['Melayu', 37],
                ['Minang', 30.2],
                {
                    name: 'Jawa',
                    y: 15.1,
                    sliced: true,
                    selected: true
                },					
                ['Batak', 10.8],
                ['Sunda', 2],
                ['Suku Lainya', 4.9]
            ]
        }]
    });
});
		</script>
		<script type="text/javascript">
$(function () {
    $('#agama').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },
        title: {
            text: 'Berdasarkan Agama'
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45
            }
        },
        tooltip: {
            pointFormat: '<b>{point.percentage:.1f}%</b>'
        },		
        series: [{
            name: 'Jumlah',
            data: [
                ['Islam', 90],
                ['Kristen', 4.2],
                ['Buddha', 3.1],
                ['Khatolik', 2.3],
                ['Hindu', 0.3],
                ['Khonghucu', 0.1]
            ]
        }]
    });
});
		</script>		
		<script src="<?php echo PATH; ?>js/highcharts.js"></script>
		<script src="<?php echo PATH; ?>js/highcharts-3d.js"></script>
		<script src="<?php echo PATH; ?>js/exporting.js"></script>	
<?php
	break;	
	
	
	case 'statistik': 
?>
		<script src="<?php echo PATH; ?>js/highcharts.js"></script>
		<script src="<?php echo PATH; ?>js/data.js"></script>
		<script src="<?php echo PATH; ?>js/drilldown.js"></script>
		<script src="<?php echo PATH; ?>js/exporting.js"></script>
		<script type="text/javascript">
$(function () {
    $('#statMingguan').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'Permohonan Perizinan'
        },
        subtitle: {
            text: 'Sumber: DPMPTSP Kota Pekanbaru'
        },
        xAxis: {
            categories: [<?php echo $keyDataMingguan ?>]
        },
        yAxis: {
            title: {
                text: 'Jumlah)'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: 'Permohonan',
            data: [<?php echo $valueDataMingguan ?>]
        }]
    });
});
		</script>	
		
		<script type="text/javascript">
		$(function () {
			$('#statBulanan').highcharts({
				chart: {
					zoomType: 'xy'
				},
				title: {
					text: 'Permohonan Perizinan 12 Bulan Terkahir'
				},
				subtitle: {
					text: 'Sumber: DPMPTSP Kota Pekanbaru'
				},
				xAxis: [{
					categories: [<?php echo $keyData ?>],
					crosshair: true
				}],
				yAxis: [{ // Primary yAxis
					labels: {
						format: '{value}',
						style: {
							color: Highcharts.getOptions().colors[1]
						}
					},
					title: {
						text: 'Jumlah',
						style: {
							color: Highcharts.getOptions().colors[1]
						}
					}
				}, { // Secondary yAxis
					title: {
						text: 'jumlah',
						style: {
							color: Highcharts.getOptions().colors[0]
						}
					},
					labels: {
						format: '{value}',
						style: {
							color: Highcharts.getOptions().colors[0]
						}
					},
					opposite: true
				}],
				tooltip: {
					shared: true
				},
				legend: {
					layout: 'vertical',
					align: 'left',
					x: 120,
					verticalAlign: 'top',
					y: 100,
					floating: true,
					backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
				},
				series: [{
					name: 'Permohonan',
					type: 'column',
					yAxis: 1,
					data: [<?php echo $valueData ?>]

				}, {
					name: 'Permohonan',
					type: 'spline',
					data: [<?php echo $valueData ?>]
				}]
			});
		});
		</script>	
		<script type="text/javascript">
		$(function () {
			// Create the chart
			$('#statTahunan').highcharts({
				chart: {
					type: 'column'
				},
				title: {
					text: 'Statistik Permohonan Perizinan per tahun'
				},
				subtitle: {
					text: 'Sumber: DPMPTSP Kota Pekanbaru'
				},
				xAxis: {
					type: 'category'
				},				
				yAxis: {
					title: {
						text: 'Jumlah'
					}

				},
				legend: {
					enabled: false
				},
				plotOptions: {
					series: {
						borderWidth: 0,
						dataLabels: {
							enabled: true,
							format: '{point.y}'
						}
					}
				},

				tooltip: {
					headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
					pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
				},

				series: [{
					name: 'Tahun',
					colorByPoint: true,
					data: [<?php echo $keyDataTahunan;?>]
				}],
				drilldown: {
					series: [<?php echo $valueDataTahunanDetail;?>]
				}
			});
		});
		</script>	
	<script type="text/javascript">
	$(document).ready(function(){			
		$("#jsi").bind("change", function(){
			
						var options ={
				chart: {
					type: 'column'
				},
				title: {
					text: ''
				},
				subtitle: {
					text: 'Sumber: DPMPTSP Kota Pekanbaru'
				},
				xAxis: {
					type: 'category'
				},				
				yAxis: {
					title: {
						text: 'Jumlah'
					}

				},
				legend: {
					enabled: false
				},
				plotOptions: {
					series: {
						borderWidth: 0,
						dataLabels: {
							enabled: true,
							format: '{point.y}'
						}
					}
				},

				tooltip: {
					headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
					pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
				},

				series: [{
					name: 'Tahun',
					colorByPoint: true,
					data: []
				}],
				drilldown: {
					series: []
				}
			};	
			
			
		   $.ajax({
			 type: 'post',
			 url: 'https://simpel.dpmptsp.pekanbaru.go.id/simpel2/index.php?act=Permohonan&task=client&find=statistikPerizinan',
			 data: {
			   data:$(this).val()
			 },
			 success: function (response) {
				 if (!$.trim(response)){   
						alert("Maaf! data tidak ditemukan");
					}
					else{   
						var obj = JSON.parse(response);					
						options.title.text=obj.judul;
						jQuery.each(obj.keyData, function(i, val) {
							options.series[0].data.push({name:val.name,y:Number(val.y),drilldown:val.drilldown});
						});								
						jQuery.each(obj.valueDataDetail, function(i, val) {
							var result = Object.keys(val.data).map(function(key) {
								return [key, Number(val.data[key])];
							});
							options.drilldown.series.push({name:val.name,id:val.id,data:result});
						});

						$('#statData').highcharts(options);	
					}
			 }
		   });
		});		
	});
	
	</script>			
<?php
	break;	
	} 
	
}
?>