@extends('layouts.index')

@push('css')

<style>
	.break-word{
		max-width: 300px !important;
		word-wrap: break-word !important;
		white-space: inherit !important;
	}
</style>
@endpush

@section('content')

@include('layouts.include._breadcrumb')

<div class="page-content-wrapper">

@include('layouts.include.filter', ['semester' => true])

<div class="row">
	<div class="col">
		<div class="card">
			<div class="card-body bar-wrapper">
				
				<button class="btn btn-warning btn-sm float-right"type="button" onclick="printJS({printable: document.querySelector('#grafik-rp').toDataURL(), type: 'image', imageStyle: 'width:100%'});
				">
					Print Chart
				</button>
				<hr>
				<canvas id="grafik-rp" style="max-height: {{ (count($datas['pd']) > 1) ? '2000px' : '300px' }}; overflow-y: scroll;"></canvas>
				<hr>
				
				<button class="btn btn-warning btn-sm float-right"type="button" onclick="printJS({printable: document.querySelector('#grafik-k').toDataURL(), type: 'image', imageStyle: 'width:100%'});
				">
					Print Chart
				</button>
				<hr>
				<canvas id="grafik-k" style="max-height: {{ (count($datas['pd']) > 1) ? '2000px' : '300px' }}; overflow-y: scroll;"></canvas>
				<hr>

			</div>
		</div>
	</div>
</div>

</div>
@endsection

@push('js')
<!-- Optional JS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

{{-- Print Chart from https://printjs.crabbly.com/ --}}
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.css"></script>

<script>
// Function For Break Label If To Long
function formatLabel(arr, maxwidth){
	let ttlArr = [];
		arr.forEach((str) => {
			var sections = [];
			var words = str.split(" ");
			var temp = "";

			words.forEach(function(item, index){
					if(temp.length > 0)
					{
							var concat = temp + ' ' + item;

							if(concat.length > maxwidth){
									sections.push(temp);
									temp = "";
							}
							else{
									if(index == (words.length-1))
									{
											sections.push(concat);
											return;
									}
									else{
											temp = concat;
											return;
									}
							}
					}

					if(index == (words.length-1))
					{
							sections.push(item);
							return;
					}

					if(item.length < maxwidth) {
							temp = item;
					}
					else {
							sections.push(item);
					}

			});

			ttlArr.push(sections);
		});

		return ttlArr;
    
}

function makeChart(id, title, labels, anggaranBidangUrusan)
{
	new Chart($(`#${id}`), {
					type: 'horizontalBar',
					data: {
						labels: formatLabel(labels, 30),
						datasets: [
							{
								label: `Persentase`,
								data: anggaranBidangUrusan,
								backgroundColor: '#29bbe3',
								borderRadius: 20,
								maxBarThickness: 20,
							},
						],
					},
					options: {
						// Tooltips Pisahkan dengan coma
						tooltips: {
							callbacks: {
								label: function(tooltipItem, data) {
									return tooltipItem.xLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
								}
							}
						},
						// x Axes Pisahkan dengan coma
						scales: {
							xAxes: [{
							ticks: {
										min: 0,
										callback: function(value){
											return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
										},
									},
							}],
        		},
						// Atur Judul
						title: {
								display: true,
								text: [title],
								fontSize: 24
						},
						plugins: {
							// Show Persen Value
							datalabels: {
								anchor: 'end',
								align: 'right',
								formatter: (value, ctx) => {
									let percentage = (value).toFixed(2)+"%";
									return percentage;
								},
								font: {
									weight: 'bold'
								},
							},
						},
						// Atur Jarak
						layout: {
							padding: {
									left: 10,
									right: 50,
									top: 10,
									bottom: 10,
							}
						},
						// Responsive Chart
						responsive: true,
						maintainAspectRatio: false,
					},
				});
}

	// $.ajax({
	// 	type: 'GET',
	// 	url: '{{ route("getPerangkatDaerah") }}',
	// 	success: (res) => {
	// 		let i = 0;
	// 		const wrapper = $('.bar-wrapper');
	// 		let chart = '';

	// 		// CREATE ELEMENT CANVAS FOR CHART
	// 		res.data.forEach((pd) => {
	// 			i++;
	// 			chart = `
	// 			<canvas id="horizontalBar${i}" style="max-height: 400px;"></canvas>
	// 			<hr>
	// 			`;
	// 			wrapper.append(chart);
	// 		});

	// 		i = 0;
	// 		res.data.forEach((pd) => {
	// 			i++;
	// 		});
	// 	},
	// 	error: (err) => {
	// 		console.log(err.responseText);
	// 	},
	// });

	const data = @json($datas);

	const wrapper = $('.bar-wrapper');

	// CREATE ELEMENT CANVAS FOR CHART
	const opd = @json($datas['pd']);
	const persenK = @json($datas['persenK']);
	const persenRp = @json($datas['persenRp']);
		
	makeChart('grafik-rp', 'Tingkat Realisasi Anggaran Per Perangkat Daerah', opd, persenRp);
	makeChart('grafik-k', 'Tingkat Capaian Kinerja Per Perangkat Daerah', opd, persenK);

	

</script>
@endpush