@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' => false])

<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">{{ $title }}</h5>
	                <a class="btn btn-sm btn-warning float-right" href="{{ route('print', 'persentase_apbd') }}"
	                    target="_blank">Print</a>
	            </div>

	            <!-- Chart wrapper -->
							<canvas id="persentase-apbd" 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;
	let warna = [];
	labels = @json($datas2['urusanLabel'])

	// Nilai RKPD/APBD
	let realisasi = @json($datas2['urusanRealisasi']);

	for(key in labels){
		warna.push('#'+ Math.floor(Math.random() * 19777215).toString(16));
	}

		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 ctxLingkaranRkpdApbd = document.getElementById('persentase-apbd').getContext('2d');
		const chartLingkaranRkpdApbd = new Chart
		(ctxLingkaranRkpdApbd, {
			type: 'pie',
			data: {
				labels: labels,
				datasets: [{
					data: realisasi,
					backgroundColor: warna,
					borderColor: warna,
					borderWidth: 1
				}]
			},
			options: opt,
		});
		
</script>
@endpush