@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;
	}

	.parent{
		background: greenyellow;
	}

	.child{
		background: bisque;
	}

	.pointer{
		cursor: pointer;
	}

	.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">
			<div class="card-body">
				<div class="card-title">
					<div class="row">
						<div class="col-6">
							<h3 class="mb-0"> Kegiatan Rkpd Tidak Dijabarkan Apbd </h3>
						</div>
					</div>
				</div>
				<div class="table-responsive py-4">
					<table class="table table-flush merge-row table-bordered" id="datatablePrint">
						<thead class="table-dark">
							<tr>
								<th>No</th>
								<th class="break-word">Nama Perangkat Daerah</th>
								<th class="break-word">Nama Program</th>
								<th class="break-word">Nama Kegiatan</th>
								<th class="break-word">Penjelasan OPD</th>
							</tr>
						</thead>
						<tbody>
							@if($datas['kegiatan_rkpd_tidak_dijabarkan_apbd'])
							@foreach ($datas['kegiatan_rkpd_tidak_dijabarkan_apbd'] as $data)
								<tr class="table-light">
									<td style="background-color: aqua">{{ $loop->iteration }}</td>
									<td style="background-color: bisque;">
										@if(count($data->program->bidangUrusan->perangkatDaerah) > 0)
										{{ ucwords($data->program->bidangUrusan->perangkatDaerah[0]->nama_perangkat_daerah) }}
										@endif
									</td>
									<td class="break-word" style="background-color: bisque;">
										@if(count($data->program->bidangUrusan->perangkatDaerah) > 0)
										{{ ucwords($data->program->nama_program) }}
										@endif
									</td>
									<td class="break-word" style="background-color: aqua">
										{{ $data->nama_kegiatan }}
									</td>
									<td class="break-word" style="background-color: aqua">
										{{ $data->penjelasan_opd }}
									</td>
								</tr>
							@endforeach
							@else
							<tr class="table-light">
								<td colspan="100%" class="break-word">
									Kosong
								</td>
							</tr>
							@endif
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="col-md-12">
		<div class="card">
			<div class="card-body">
				<div class="card-title">
					<div class="row">
						<div class="col-6">
							<h3 class="mb-0"> Kegiatan APBD Tidak Direncanakan RKPD </h3>
						</div>
						<div class="col-6 text-right">
							<a class="btn btn-warning" href="{{ route('print', 'kegiatan_tidak_selaras_apbd_rkpd') . '?tahun='.$request->get('tahun', $tahun) }}" target="_blank">Print PDF</a>
						</div>
					</div>
				</div>
				<div class="table-responsive py-4">
					<table class="table table-flush merge-row table-bordered" id="datatablePrint">
						<thead class="table-dark">
							<tr>
								<th>No</th>
								<th class="break-word">Nama Perangkat Daerah</th>
								<th class="break-word">Nama Bidang Urusan</th>
								<th class="break-word">Nama Kegiatan</th>
								<th class="break-word">Penjelasan OPD</th>
							</tr>
						</thead>
						<tbody>
							@if($datas['kegiatan_apbd_tidak_direncanakan_rkpd'])
							@foreach ($datas['kegiatan_apbd_tidak_direncanakan_rkpd'] as $data)
								<tr class="table-light">
									<td style="background-color: aqua">{{ $loop->iteration }}</td>
									<td style="background-color: bisque;">
										@if(count($data->program->bidangUrusan->perangkatDaerah) > 0)
										{{ ucwords($data->program->bidangUrusan->perangkatDaerah[0]->nama_perangkat_daerah) }}
										@endif
									</td>
									<td class="break-word" style="background-color: bisque;">
										@if(count($data->program->bidangUrusan->perangkatDaerah) > 0)
										{{ ucwords($data->program->bidangUrusan->masterBidangUrusan->nama_bidang_urusan) }}
										@endif
									</td>
									<td class="break-word" style="background-color: aqua">
										{{ $data->nama_kegiatan }}
									</td>
									<td class="break-word" style="background-color: aqua">
										{{ $data->penjelasan_opd }}
									</td>
								</tr>
							@endforeach
							@else
							<tr class="table-light">
								<td colspan="100%" class="break-word">
									Kosong
								</td>
							</tr>
							@endif
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="col">
		<div class="card">
			<div class="card-body">
				<div class="card-title">
					<div class="row">
						<div class="col-6">
							<h3 class="mb-0">{{$title}}</h3>
						</div>
						<div class="col-6 text-right">
							<a class="btn btn-warning" href="{{ route('print', 'keselarasan_kegiatan_rkpd_apbd') . '?tahun='.$request->get('tahun', $tahun) }}" target="_blank">Print PDF</a>
						</div>
					</div>
				</div>
				<div class="table-responsive py-4">
					<table class="table table-hover table-bordered">
						<thead class="table-dark">
							<tr>
								<th rowspan="2">No</th>
								<th rowspan="2" class="break-word">Nama </br> Bidang </br> Urusan</th>
								<th colspan="5" class="text-center">Keselarasan Kegiatan</th>
							</tr>
	
							<tr>
								<th>RKPD</th>
								<th>APBD</th>
								<th>Sesuai</th>
								<th>Tidak </br> Terjabarkan </br> di APBD</th>
								<th>Tidak </br> di-Rencanakan </br> di RKPD</th>
							</tr>
						</thead>
						<tbody>
							@if($datas['datas'])
							@foreach ($datas['datas'] as $data)
								<tr class="font-weight-bold pointer" data-self="pm_rpjmd_rkpd_mun" data-id="{{ $data['id'] }}">
									<td>{{ \Helper::numberToRoman($loop->iteration) }}</td>
									<td class="break-word">{{ $data['nama'] }}</td>
									<td>{{ $data['table1'] }}</td>
									<td>{{ $data['table2'] }}</td>
									<td>{{ $data['sesuai'] }}</td>
									<td>{{ $data['selisih_table1'] }}</td>
									<td>{{ $data['selisih_table2'] }}</td>
								</tr>

								<tr class="table-dark sembunyi data-self="mbun" data-parent="pm_rpjmd_rkpd_mun_{{ $data['id'] }}">
									<td colspan="7">Nama Bidang Urusan</td>
								</tr>

								@foreach ($data['data_mbun'] as $data_mbun)
									<tr class="sembunyi pointer parent" data-self="mbun" data-parent="pm_rpjmd_rkpd_mun_{{ $data['id'] }}">
										<td>{{ $loop->iteration }}</td>
										<td class="break-word">{{ $data_mbun['nama'] }}</td>
										<td>{{ $data_mbun['table1'] }}</td>
										<td>{{ $data_mbun['table2'] }}</td>
										<td>{{ $data_mbun['sesuai'] }}</td>
										<td>{{ $data_mbun['selisih_table1'] }}</td>
										<td>{{ $data_mbun['selisih_table2'] }}</td>
									</tr>
								@endforeach

							@endforeach
							<tr class="font-weight-bold">
								<td colspan="2">Total : </td>
								<td>{{ $datas['total']['table1'] }}</td>
									<td>{{ $datas['total']['table2'] }}</td>
									<td>{{ $datas['total']['sesuai'] }}</td>
									<td>{{ $datas['total']['selisih_table1'] }}</td>
									<td>{{ $datas['total']['selisih_table2'] }}</td>
							</tr>
							@else
							<tr>
								<td colspan="100%" class="break-word">
									Kosong
								</td>
							</tr>
							@endif
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="col-md-12">
		<div class="card">
			<div class="card-body">
				<div class="card-title">
					<div class="row">
						<div class="col-6">
							<h3 class="mb-0">{{$title}} Berdasarkan OPD</h3>
						</div>
						<div class="col-6 text-right">
							<a class="btn btn-warning" href="{{ route('print', 'keselarasan_kegiatan_rkpd_apbd_opd') . '?tahun='.$request->get('tahun', $tahun) }}" target="_blank">Print PDF</a>
						</div>
					</div>
				</div>
				<div class="table-responsive py-4">
					<table class="table table-hover table-bordered">
						<thead class="table-dark">
							<tr>
								<th rowspan="2">No</th>
								<th rowspan="2" class="break-word">Nama </br> OPD</th>
								<th colspan="5" class="text-center">Keselarasan Kegiatan</th>
							</tr>
	
							<tr>
								<th>RKPD</th>
								<th>APBD</th>
								<th>Sesuai</th>
								<th>Tidak </br> Terjabarkan </br> di APBD</th>
								<th>Tidak </br> di-Rencanakan </br> di RKPD</th>
							</tr>
						</thead>
						<tbody>
							@if($datas2['keselarasan_opd']['datas'])
							@foreach ($datas2['keselarasan_opd']['datas'] as $data)

								<tr class="pointer">
									<td>{{ $loop->iteration }}</td>
									<td class="break-word">{{ $data['nama'] }}</td>
									<td>{{ $data['table1'] }}</td>
									<td>{{ $data['table2'] }}</td>
									<td>{{ $data['sesuai'] }}</td>
									<td>{{ $data['selisih_table1'] }}</td>
									<td>{{ $data['selisih_table2'] }}</td>
								</tr>

							@endforeach
							<tr class="font-weight-bold">
								<td colspan="2">Total : </td>
								<td>{{ $datas2['keselarasan_opd']['total']['table1'] }}</td>
									<td>{{ $datas2['keselarasan_opd']['total']['table2'] }}</td>
									<td>{{ $datas2['keselarasan_opd']['total']['sesuai'] }}</td>
									<td>{{ $datas2['keselarasan_opd']['total']['selisih_table1'] }}</td>
									<td>{{ $datas2['keselarasan_opd']['total']['selisih_table2'] }}</td>
							</tr>
							@else
							<tr>
								<td colspan="100%" class="break-word">
									Kosong
								</td>
							</tr>
							@endif
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="col-md-12">
	    <div class="card">
	        <!-- Card body -->
	        <div class="card-body bg-kayu">
	            <div class="card-title">
	                <h5 class="surtitle">Diagram Irisan Penjabaran dan Keselarasan Antara
	                    Kegiatan RKPD dan APBD</h5>
	                <a class="btn btn-sm btn-warning float-right" href="{{ route('print', 'chart_kegiatan_rkpd_apbd')  . '?tahun='.$request->get('tahun', $tahun) }}"
	                    target="_blank">Print</a>
	            </div>
	            <div class="d-flex align-items-center justify-content-between">
	                <button class="btn btn-md mb-2 pb-0" style="background:#1597E5">
	                    <h5> RKPD <br> {{ $datas2['table1'] }}</h5>
	                </button>

	                <button class="btn btn-md mb-2 pb-0 float-right" style="background:#FEE440">
	                    <h5> APBD <br> {{ $datas2['table2'] }}</h5>
	                </button>
	            </div>
	            <!-- Chart wrapper -->
	            <div id="kegiatan-rkpd-apbd" style="width:100%; height:350px;"></div>
	        </div>
	    </div>
	</div>

	<div class="col-md-12">
	    <div class="card">
	        <!-- Card body -->
	        <div class="card-body bg-kayu">
	            <div class="card-title">
	                <h5 class="surtitle">Diagram Lingkaran Persentase Penjabaran Kegiatan Antara RKPD dan APBD</h5>
	                <a class="btn btn-sm btn-warning float-right" href="{{ route('print', 'chart_lingkaran_kegiatan_rkpd_apbd')  . '?tahun='.$request->get('tahun', $tahun) }}"
	                    target="_blank">Print</a>
	            </div>

	            <!-- Chart wrapper -->
	            <canvas id="lingkaran-kegiatan-rkpd-apbd" style="width:100%;"></canvas>
	        </div>
	    </div>
	</div>
	<div class="col-md-12">
	    <div class="card">
	        <!-- Card body -->
	        <div class="card-body bg-kayu">
	            <div class="card-title">
	                <h5 class="surtitle">Diagram Lingkaran Persentase Keselarasan Kegiatan Antara APBD dan RKPD</h5>
	                <a class="btn btn-sm btn-warning float-right" href="{{ route('print', 'chart_lingkaran_kegiatan_apbd_rkpd')  . '?tahun='.$request->get('tahun', $tahun) }}"
	                    target="_blank">Print</a>
	            </div>

	            <!-- Chart wrapper -->
	            <canvas id="lingkaran-kegiatan-apbd-rkpd" 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>
	function closeAllChild(obj)
	{
		const object = $(obj);
		object.each(function(i, o){
			let self = $(o).data('self');
			let id = $(o).data('id');

			let elTarget = $(`tr[data-parent="${self}_${id}"]`);
			elTarget.each(function(i, obj){
				$(obj).hide();

				closeAllChild(obj)
			});
		});
		
	}

	function collapseTable(obj)
	{
		const object = $(obj);
		const self = object.data('self');
		const id = object.data('id');
		
		$(".parent").removeClass('parent')
		object.addClass('parent')

		const elTarget = $(`tr[data-parent="${self}_${id}"]`);
		
		if( elTarget.is(":visible") ) {
			elTarget.hide();
			closeAllChild(elTarget);
		}else{
			elTarget.show();

			$(".child").removeClass('child')
			elTarget.addClass('child')
		}

	}

	let labels;
	// Nilai RKPD/APBD
	let kegiatan_rkpd = "{{ $datas2['table1'] }}";
	let kegiatan_apbd = "{{ $datas2['table2'] }}";
  
  // Nilai Keselarasan RKPD/APBD
	let keselarasan_kegiatan_rkpd_apbd = "{{ $datas2['keselarasan'] }}";

	// Diagram Lingkaran RKPD APBD
	let penjabaran_rkpd_apbd = parseFloat((keselarasan_kegiatan_rkpd_apbd / kegiatan_rkpd * 100).toFixed(2));
	let tidak_terjabarkan_rkpd_apbd = parseFloat(( (kegiatan_rkpd - keselarasan_kegiatan_rkpd_apbd) / kegiatan_rkpd * 100).toFixed(2));

	// Diagram Lingkaran APBD RKPD
	let penjabaran_apbd_rkpd = parseFloat((keselarasan_kegiatan_rkpd_apbd / kegiatan_apbd * 100).toFixed(2));
	let tidak_terjabarkan_apbd_rkpd = parseFloat(( (kegiatan_apbd - keselarasan_kegiatan_rkpd_apbd) / kegiatan_apbd * 100).toFixed(2));
	
    anychart.onDocumentReady(function () {
      // set chart theme
    anychart.theme('pastel');

  // VALUE CHART
  var kegiatan_rkpd_apbd = [
      {
          x: 'A',
          value: 100,
          name: 'RKPD \n \n ' + (kegiatan_rkpd - keselarasan_kegiatan_rkpd_apbd),
          tooltipTitle: 'RKPD \n \n ' + (kegiatan_rkpd - keselarasan_kegiatan_rkpd_apbd),
          normal: {fill: "#082B59 1"},
          hovered: {fill: "#082B59 1"},
          selected: {fill: "#082B59 1"}
      },
      {
          x: 'B',
          value: 100,
          name: 'APBD \n \n ' + (kegiatan_apbd - keselarasan_kegiatan_rkpd_apbd),
          tooltipTitle: 'APBD \n \n ' + (kegiatan_apbd - keselarasan_kegiatan_rkpd_apbd),
          normal: {fill: "#FBFF00 1"},
          hovered: {fill: "#FBFF00 1"},
          selected: {fill: "#FBFF00 1"}
      },
      {
          x: ['A', 'B'],
          value: 30,
          name: 'Keselarasan \n \n ' + keselarasan_kegiatan_rkpd_apbd,
          tooltipTitle: 'Keselarasan \n \n ' + keselarasan_kegiatan_rkpd_apbd,
          normal: {fill: "#9fdebe 0.8"},
          hovered: {fill: "#9fdebe 1"},
          selected: {fill: "#9fdebe 1"},
          hatchFill: {color: "#83c3a3"}
      },
  ];

      // INIT DIAGRAM VENN

      const makeDiagramVenn = (data, container) => {
        var chart = anychart.venn(data);

        // set stroke
        chart.stroke('1 #fff');

        // set labels settings
        chart
          .labels()
          .fontSize(32)
          .fontColor('#5e6469')
          .hAlign("center")
          .vAlign("center")
          .fontFamily('Roboto, sans-serif')
          .fontWeight('500')
          .format('{%Name}');

        // set intersections labels settings
        chart
          .intersections()
          .labels()
          .fontStyle('italic')
          .fontSize(21)
          .fontColor('#fff')
          .format('{%Name}');

        // disable legend
        chart.legend(false);

        // set tooltip settings
        chart
          .tooltip()
          .titleFormat('{%tooltipTitle}')
          .format("{%tooltipDesc}")
          .background().fill("#000 0.5");

        // set container id 
        chart.container(container);

        // initiate drawing
        chart.draw();
      };

      // CREATE VENN DIAGRAM kegiatan RKPD X APBD
      makeDiagramVenn(kegiatan_rkpd_apbd, 'kegiatan-rkpd-apbd');
	  
    });

		$(document).ready(function(){
			$("path[fill='#fefdfa']").attr("fill", 'transparent').attr('stroke', 'none')

			$(".sembunyi").hide();

			$("tr").click(function(){
				const parentEl = $(this);
				collapseTable(parentEl)
			})

			$("path[fill='#fefdfa']").attr("fill", 'transparent').attr('stroke', 'none')
		});

		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
						},
				},
			};

		labels = [`Penjabaran Kegiatan RKPD-APBD (${keselarasan_kegiatan_rkpd_apbd} kegiatan)`, `Tidak Terjabarkan pada APBD (${kegiatan_rkpd - keselarasan_kegiatan_rkpd_apbd} kegiatan)`]

		const ctxLingkaranRkpdApbd = document.getElementById('lingkaran-kegiatan-rkpd-apbd').getContext('2d');
		const chartLingkaranRkpdApbd = new Chart
		(ctxLingkaranRkpdApbd, {
			type: 'pie',
			data: {
				labels: labels,
				datasets: [{
					data: [penjabaran_rkpd_apbd, tidak_terjabarkan_rkpd_apbd],
					backgroundColor: ['#082B59', '#FBFF00'],
					borderColor: ['#082B59', '#FBFF00'],
					borderWidth: 1
				}]
			},
			options: opt,
		});

		labels = [`Sesuai Antara APBD-RKPD (${keselarasan_kegiatan_rkpd_apbd} kegiatan)`, `Tidak Direncanakan di RKPD (${kegiatan_apbd - keselarasan_kegiatan_rkpd_apbd} kegiatan)`]

		const ctxLingkaranApbdRkpd = document.getElementById('lingkaran-kegiatan-apbd-rkpd').getContext('2d');
		const chartLingkaranApbdRkpd = new Chart
		(ctxLingkaranApbdRkpd, {
			type: 'pie',
			data: {
				labels: labels,
				datasets: [{
					data: [penjabaran_apbd_rkpd, tidak_terjabarkan_apbd_rkpd],
					backgroundColor: ['#082B59', '#FBFF00'],
					borderColor: ['#082B59', '#FBFF00'],
					borderWidth: 1
				}]
			},
			options: opt,
		});

</script>
@endpush