@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: -5px;
		z-index: 1;
	}

	.parent{
		background: greenyellow;
	}

	.child{
		background: bisque;
	}	
</style>
@endpush

@section('content')

@include('layouts.include._breadcrumb')

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

	@include('layouts.include.filter', ['semester' => false, 'status' => 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"> {{ $title }} </h3>
							</div>
							<div class="col-6 text-right">
								<a class="btn btn-warning" href="{{ route('print', 'program_unggulan') . '?tahun='.$request->get('tahun', $tahun) }}" target="_blank">Print</a>
							</div>
						</div>
					</div>
					<p>
						{{-- <a class="btn btn-warning" href="{{ route('print', 'anggaran_bidang_urusan') }}" target="_blank">Print</a> --}}
					</p>
					<div class="table-responsive">
						<table class="table table-bordered" id="datatablePrint" style="width: 100%">
							<thead class="table-dark text-center">
								<tr class="biasa">
									<th rowspan="2" width="20px">No</th>
									<th rowspan="2" class="break-word">Program Unggulan</th>
									<th colspan="4" class="break-word">Realisasi Triwulan (Rp)</th>
									<th rowspan="2" class="break-word">Realisasi Tahunan (Rp)</th>
									<th rowspan="2" class="break-word">Perangkat Daerah</th>
									
								</tr>

								<tr class="biasa">
									<th>1</th>
									<th> 2 </th>
									<th> 3 </th>
									<th> 4 </th>
								</tr>
							</thead>
							<tbody>

								<tr class="font-weight-bold pointer table-success biasa">
									<td>1</td>
									<td colspan="7" class="break-word text-center"> Untuk Rekap Program Unggulan PROBEBAYA bisa dilihat <a target="_blank" href="{{ route('laporan.show', 'probebaya') }}">disini</a> </td>
								</tr>
								
								@if(count($datas['master_program_unggulan']) >= 1)

								@foreach ($datas['master_program_unggulan'] as $mpu)
									<tr class="font-weight-bold pointer table-success"  data-id="{{ $mpu['id'] }}"  data-self="mpu" data-id="{{ $mpu['id'] }}" >
										<td>{{ $loop->iteration + 1 }}</td>
										<td class="break-word">{{ $mpu['nama_master_program_unggulan'] }}</td>
										<td>{{ number_format($mpu['totalTri1']) }}</td>
										<td>{{ number_format($mpu['totalTri2']) }}</td>
										<td>{{ number_format($mpu['totalTri3']) }}</td>
										<td>{{ number_format($mpu['totalTri4']) }}</td>
										<td>{{ number_format($mpu['totalTahunan']) }}</td>
										<td>
											@foreach ($mpu['perangkat_daerah'] as $pd)
													- {{ $pd }} <br>
											@endforeach
										</td>
									</tr>

									@foreach ($mpu['data_pu'] as $pm)
										<tr class="sembunyi pointer parent"  data-id="{{ $pm['id'] }}"  data-self="pm" data-tes="mpu" data-parent="mpu_{{ $mpu['id'] }}">
											<td> <i class="text-danger" style="font-size: 10px">(Program)</i> </td>
											<td class="break-word">{{ $pm['nama_program'] }}</td>
											<td>{{ number_format($pm['rp_tri1']) }}</td>
											<td>{{ number_format($pm['rp_tri2']) }}</td>
											<td>{{ number_format($pm['rp_tri3']) }}</td>
											<td>{{ number_format($pm['rp_tri4']) }}</td>
											<td>{{ number_format($pm['rp_tahunan']) }}</td>
											<td class="break-word">{{ $pm['nama_perangkat_daerah'] }}</td>
										</tr>

										@foreach ($pm['data_kn'] as $kn)
											<tr class="sembunyi pointer parent" data-id="{{ $kn['id'] }}"  data-self="kn" data-tes="pm" data-parent="pm_{{ $pm['id'] }}">
												<td> <i class="text-danger" style="font-size: 10px">(Kegiatan)</i> </td>
												<td class="break-word">{{ $kn['nama_kegiatan'] }}</td>
												<td>{{ number_format($kn['rp_tri1']) }}</td>
												<td>{{ number_format($kn['rp_tri2']) }}</td>
												<td>{{ number_format($kn['rp_tri3']) }}</td>
												<td>{{ number_format($kn['rp_tri4']) }}</td>
												<td>{{ number_format($kn['rp_tahunan']) }}</td>
												<td class="break-word">{{ $pm['nama_perangkat_daerah'] }}</td>
											</tr>

											@foreach ($kn['data_sk'] as $sk)
												<tr class="sembunyi pointer parent"  data-id="{{ $sk['id'] }}"  data-self="sk" data-tes="kn" data-parent="kn_{{ $kn['id'] }}">
													<td> <i class="text-danger" style="font-size: 10px">(Sub Kegiatan)</i> </td>
													<td class="break-word">{{ $sk['nama_sub_kegiatan'] }}</td>
													<td>{{ number_format($sk['rp_tri1']) }}</td>
													<td>{{ number_format($sk['rp_tri2']) }}</td>
													<td>{{ number_format($sk['rp_tri3']) }}</td>
													<td>{{ number_format($sk['rp_tri4']) }}</td>
													<td>{{ number_format($sk['rp_tahunan']) }}</td>
													<td class="break-word">{{ $pm['nama_perangkat_daerah'] }}</td>
												</tr>
											@endforeach

										@endforeach

									@endforeach

								@endforeach
								<tr class="font-weight-bold table-dark biasa">
									<td colspan="2">Total :</td>
									<td>{{ number_format($datas['totalKeseluruhanTri1']) }}</td>
									<td>{{ number_format($datas['totalKeseluruhanTri2']) }}</td>
									<td>{{ number_format($datas['totalKeseluruhanTri3']) }}</td>
									<td>{{ number_format($datas['totalKeseluruhanTri4']) }}</td>
									<td>{{ number_format($datas['totalKeseluruhanTahunan']) }}</td>
									<td></td>
								</tr>
								@else
								<tr class="table-light">
									<td colspan="100%" class="break-word">
										Kosong
									</td>
								</tr>
								@endif
							</tbody>
						</table>
					</div>
				</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>

<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}"]`);
			console.log(elTarget)
			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')
		}

	}

	$(document).ready(function(){
		$("tr:not(.biasa,[data-self='mpu'])").hide();

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

		})
	});
</script>
@endpush