@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"> Program Rpjmd Tidak Dijabarkan Rkpd </h3>
						</div>
						<div class="col-6 text-right">
							<a class="btn btn-warning" href="{{ route('print', 'program_tidak_selaras_rpjmd_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 Program</th>
								<th class="break-word">Penjelasan</th>
							</tr>
						</thead>
						<tbody>
							@if($datas['program_rpjmd_tidak_dijabarkan_rkpd'])
							@foreach ($datas['program_rpjmd_tidak_dijabarkan_rkpd'] as $data)
								<tr class="table-light">
									<td style="background-color: aqua">{{ $loop->iteration }}</td>
									<td style="background-color: bisque;">
										@if(count($data->bidangUrusan->perangkatDaerah) > 0)
										{{ ucwords($data->bidangUrusan->perangkatDaerah[0]->nama_perangkat_daerah) }}
										@endif
									</td>
									<td class="break-word" style="background-color: bisque;">
										@if(count($data->bidangUrusan->perangkatDaerah) > 0)
										{{ ucwords($data->bidangUrusan->masterBidangUrusan->nama_bidang_urusan) }}
										@endif
									</td>
									<td class="break-word" style="background-color: aqua">
										{{ $data->nama_program }}
									</td>
									<td class="break-word" style="background-color: aqua">
										{{ $data->Penjelasan?$data->Penjelasan:"-" }}
									</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"> Program RKPD Tidak Dijabarkan RPJMD </h3>
						</div>
						<div class="col-6 text-right">
							<a class="btn btn-warning" href="{{ route('print', 'program_tidak_selaras_rkpd_rpjmd') . '?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 Program</th>
							</tr>
						</thead>
						<tbody>
							@if($datas['program_rkpd_tidak_direncanakan_rpjmd'])
							@foreach ($datas['program_rkpd_tidak_direncanakan_rpjmd'] as $data)
								<tr class="table-light">
									<td style="background-color: aqua">{{ $loop->iteration }}</td>
									<td style="background-color: bisque;">
										@if(count($data->bidangUrusan->perangkatDaerah) > 0)
										{{ ucwords($data->bidangUrusan->perangkatDaerah[0]->nama_perangkat_daerah) }}
										@endif
									</td>
									<td class="break-word" style="background-color: bisque;">
										@if(count($data->bidangUrusan->perangkatDaerah) > 0)
										{{ ucwords($data->bidangUrusan->masterBidangUrusan->nama_bidang_urusan) }}
										@endif
									</td>
									<td class="break-word" style="background-color: aqua">
										{{ $data->nama_program }}
									</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">{{$title}}</h3>
						</div>
						<div class="col-6 text-right">
							<a class="btn btn-warning" href="{{ route('print', 'keselarasan_program_rpjmd_rkpd') . '?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 Program</th>
							</tr>
	
							<tr>
								<th>RPJMD</th>
								<th>RKPD</th>
								<th>Sesuai</th>
								<th>Tidak </br> Terjabarkan </br> di RPJMD</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_program_rpjmd_rkpd_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 Program</th>
							</tr>
	
							<tr>
								<th>RPJMD</th>
								<th>RKPD</th>
								<th>Sesuai</th>
								<th>Tidak </br> Terjabarkan </br> di RPJMD</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
	                    Program RPJMD dan RKPD</h5>
	                <a class="btn btn-sm btn-warning float-right" href="{{ route('print', 'chart_program_rpjmd_rkpd')  . '?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> RPJMD <br> {{ $datas2['table1'] }}</h5>
	                </button>

	                <button class="btn btn-md mb-2 pb-0 float-right" style="background:#FEE440">
	                    <h5> RKPD <br> {{ $datas2['table2'] }}</h5>
	                </button>
	            </div>


	            <!-- Chart wrapper -->
	            <div id="program-rpjmd-rkpd" 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 Program Antara RPJMD dan RKPD</h5>
	                <a class="btn btn-sm btn-warning float-right" href="{{ route('print', 'chart_lingkaran_program_rpjmd_rkpd')  . '?tahun='.$request->get('tahun', $tahun) }}"
	                    target="_blank">Print</a>
	            </div>

	            <!-- Chart wrapper -->
							<canvas id="lingkaran-program-rpjmd-rkpd" 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 Program Antara RKPD dan RPJMD</h5>
	                <a class="btn btn-sm btn-warning float-right" href="{{ route('print', 'chart_lingkaran_program_rpjmd_rpjmd')  . '?tahun='.$request->get('tahun', $tahun) }}"
	                    target="_blank">Print</a>
	            </div>

	            <!-- Chart wrapper -->
							<canvas id="lingkaran-program-rkpd-rpjmd" 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 RPJMD RKPD
	let program_rpjmd = "{{ $datas2['table1'] }}";
	let program_rkpd = "{{ $datas2['table2'] }}";
  
  // Nilai Keselarasan RPJMD RKPD
	let keselarasan_program_rpjmd_rkpd = "{{ $datas2['keselarasan'] }}";

	// Diagram Lingkaran RPJMD RKPD
	let penjabaran_rpjmd_rkpd = parseFloat((keselarasan_program_rpjmd_rkpd / program_rpjmd * 100).toFixed(2));
	let tidak_terjabarkan_rpjmd_rkpd = parseFloat(( (program_rpjmd - keselarasan_program_rpjmd_rkpd) / program_rpjmd * 100).toFixed(2));

	// Diagram Lingkaran RKPD RPJMD
	let penjabaran_rkpd_rpjmd = parseFloat((keselarasan_program_rpjmd_rkpd / program_rkpd * 100).toFixed(2));
	let tidak_terjabarkan_rkpd_rpjmd = parseFloat(( (program_rkpd - keselarasan_program_rpjmd_rkpd) / program_rkpd * 100).toFixed(2));

	anychart.onDocumentReady(function () {
		// set chart theme
	anychart.theme('pastel');

  // VALUE CHART
  var program_rpjmd_rkpd = [
      {
          x: 'A',
          value: 100,
          name: 'RPJMD \n \n ' + (program_rpjmd - keselarasan_program_rpjmd_rkpd),
          tooltipTitle: 'RPJMD \n \n ' + (program_rpjmd - keselarasan_program_rpjmd_rkpd),
          normal: {fill: "#082B59 1"},
          hovered: {fill: "#082B59 1"},
          selected: {fill: "#082B59 1"}
      },
      {
          x: 'B',
          value: 100,
          name: 'RKPD \n \n ' + (program_rkpd - keselarasan_program_rpjmd_rkpd),
          tooltipTitle: 'RKPD \n \n ' + (program_rkpd - keselarasan_program_rpjmd_rkpd),
          normal: {fill: "#FBFF00 1"},
          hovered: {fill: "#FBFF00 1"},
          selected: {fill: "#FBFF00 1"}
      },
      {
          x: ['A', 'B'],
          value: 30,
          name: 'Keselarasan \n \n ' + keselarasan_program_rpjmd_rkpd,
          tooltipTitle: 'Keselarasan \n \n ' + keselarasan_program_rpjmd_rkpd,
          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 PROGRAM RPJMD RKPD
      makeDiagramVenn(program_rpjmd_rkpd, 'program-rpjmd-rkpd');
    });

		$(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 Program RPJMD-RKPD (${keselarasan_program_rpjmd_rkpd} Program)`, `Tidak dijabarkan di RKPD (${program_rpjmd - keselarasan_program_rpjmd_rkpd} Program)`]

		const ctxLingkaranRpjmdRkpd = document.getElementById('lingkaran-program-rpjmd-rkpd').getContext('2d');
		const chartLingkaranRpjmdRkpd = new Chart
		(ctxLingkaranRpjmdRkpd, {
			type: 'pie',
			data: {
				labels: labels,
				datasets: [{
					data: [penjabaran_rpjmd_rkpd, tidak_terjabarkan_rpjmd_rkpd],
					backgroundColor: ['#082B59', '#FBFF00'],
					borderColor: ['#082B59', '#FBFF00'],
					borderWidth: 1
				}]
			},
			options: opt,
		});

		labels = [`Keselarasan Program Rkpd-Rpjmd (${keselarasan_program_rpjmd_rkpd} Program)`, `Tidak Direncanakan di RKPD (${program_rkpd - keselarasan_program_rpjmd_rkpd} Program)`]

		const ctxLingkaranRkpdRpjmd = document.getElementById('lingkaran-program-rkpd-rpjmd').getContext('2d');
		const chartLingkaranRkpdRpjmd = new Chart
		(ctxLingkaranRkpdRpjmd, {
			type: 'pie',
			data: {
				labels: labels,
				datasets: [{
					data: [penjabaran_rkpd_rpjmd, tidak_terjabarkan_rkpd_rpjmd],
					backgroundColor: ['#082B59', '#FBFF00'],
					borderColor: ['#082B59', '#FBFF00'],
					borderWidth: 1
				}]
			},
			options: opt,
		});
		
</script>
@endpush