@extends('layouts.index')

@push('css')
<style>
	.break-word{
		max-width: 200px !important;
		word-wrap: break-word !important;
		white-space: inherit !important;
	}

	.table-responsive{
		max-height: 800px !important;
		overflow-y: scroll;
	}

	td{
		vertical-align: middle !important;
		text-align: center !important;
	}
	th{
		vertical-align: middle !important;
		text-align: center !important;
	}

	table td {
		position: relative;
	}

	thead{
		position: sticky; 
		top: -30px;
		z-index: 1;
	}

	.table-bordered th, .table-bordered td { border: 1px solid #0A1D37!important }

	.icon-shape i, .icon-shape svg {
		font-size: 28px !important;
	}

	.bg-kayu{
		background-image: url({{ asset('assets/img/bg-kayu.jpg') }});
	}
</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-md-12">
	    <div class="card">
	        <!-- Card body -->
	        <div class="card-body bg-kayu">
	            <div class="card-title">
	                <h5 class="surtitle">Diagram Persentase Predikat Kinerja untuk Capaian Kinerja Hasil Pelaksanaan RKPD</h5>
	                <a class="btn btn-sm btn-warning float-right" href="{{ route('print', 'chart_lingkaran_predikat_kinerja_capaian_kinerja') }}"
	                    target="_blank">Print</a>
	            </div>

	            <!-- Chart wrapper -->
							<canvas id="lingkaran-predikat-kinerja-capaian-kinerja" style="width:100%;"></canvas>
	        </div>
	    </div>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
	    <div class="card">
	        <!-- Card body -->
	        <div class="card-body bg-kayu">
	            <div class="card-title">
	                <h5 class="surtitle">Diagram Persentase Predikat Kinerja untuk Realisasi Anggaran Hasil Pelaksanaan RKPD</h5>
	                <a class="btn btn-sm btn-warning float-right" href="{{ route('print', 'chart_lingkaran_predikat_kinerja_realisasi_anggaran') }}"
	                    target="_blank">Print</a>
	            </div>

	            <!-- Chart wrapper -->
							<canvas id="lingkaran-predikat-kinerja-realisasi-anggaran" style="width:100%;"></canvas>
	        </div>
	    </div>
	</div>
</div>

</div>
@endsection

@push('js')
<script>
	$(document).ready(function() {
    $('#datatablePrint').DataTable( {
        dom: 'Bfrtip',
				paging: false,
				ordering: false,
				searching: false,
        buttons: [
            'csv', 'excel'
        ]
    } );
	} );
	
</script>

{{-- chart --}}
{{-- <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script> --}}
<script src=" {{ asset('assets/anychart/anychart-core.min.js') }}"></script>
<script src=" {{ asset('assets/anychart/anychart-venn.min.js') }}"></script>
<script src=" {{ asset('assets/anychart/pastel.min.js') }} "></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
<script src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js"></script>
@endpush

@push('chart')
<script>
	let labels, warnaLabels, capaianKinerja, realisasiAnggaran;

	labels = @json($datas['labels']);
	capaianKinerja = @json($datas['capaian_kinerja']);
	realisasiAnggaran = @json($datas['realisasi_anggaran']);
	warnaLabels = @json($datas['warna_labels']);

	const opt = {
		aspectRatio: 2,
		plugins: {
			legend: {
				labels: {
					color: "#000",
				}
			},
			labels: {
				render: 'percentage',
				precision: 2,
				fontSize: 31,
				fontColor: '#FFF',
				textShadow: true,
				position: 'outside',
			},
		},
		layout: {
				padding: {
						left: 50,
						right: 50,
						top: 50,
						bottom: 50
				},
		},
	};

	const ctxLingkaranCapaianKinerja = document.getElementById('lingkaran-predikat-kinerja-capaian-kinerja').getContext('2d');
	const chartLingkaranCapaianKinerja = new Chart
	(ctxLingkaranCapaianKinerja, {
		type: 'pie',
		data: {
			labels: labels,
			datasets: [{
				data: capaianKinerja,
				backgroundColor: warnaLabels,
				borderColor: warnaLabels,
				borderWidth: 1
			}]
		},
		options: opt,
	});

	const ctxLingkaranRealisasiAnggaran = document.getElementById('lingkaran-predikat-kinerja-realisasi-anggaran').getContext('2d');
	const chartLingkaranRealisasiAnggaran = new Chart
	(ctxLingkaranRealisasiAnggaran, {
		type: 'pie',
		data: {
			labels: labels,
			datasets: [{
				data: realisasiAnggaran,
				backgroundColor: warnaLabels,
				borderColor: warnaLabels,
				borderWidth: 1
			}]
		},
		options: opt,
	});
		
</script>
@endpush