@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">
		<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', 'kategori_predikat_kinerja') . '?tahun='.$request->get('tahun', $tahun) . '&pd='.$request->get('pd') }}" 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 >Kategori</th>
								<th colspan="2" class="break-word">Capaian Kinerja</th>
								<th colspan="2" class="text-center">Realisasi Keuangan</th>
							</tr>
						</thead>
						<tbody>
							@foreach ($datas as $data)
							@php
							$noCapaianKinerja = 1;
							$noRealisasiAnggaran = 1;
							@endphp
								@php
								if(count($data['capaianKinerja']) >= count($data['realisasiAnggaran']) )
									$count = count($data['capaianKinerja']);
								else
									$count = count($data['realisasiAnggaran']);
								@endphp
								@for ($i = 0; $i < $count; $i++)
								<tr>
									<td class="break-word" style="vertical-align: top !important;">{{ $data['label'] }}</td>
									{{-- Cek Jika Ada Capaian Kinerja --}}
									@if(@$data['capaianKinerja'][$i])
									<td width="15px">{{ $noCapaianKinerja++ }}</td>
									<td class="break-word">{{ @$data['capaianKinerja'][$i] }}</td>
									@else
									<td></td>
									<td></td>
									@endif

									{{-- Cek Jika Ada Realisasi Anggaran --}}
									@if(@$data['realisasiAnggaran'][$i])
									<td width="15px">{{ $noRealisasiAnggaran++ }}</td>
									<td class="break-word">{{ @$data['realisasiAnggaran'][$i] }}</td>
									@else
									<td></td>
									<td></td>
									@endif
								</tr>
								@endfor
							@endforeach
						</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'
        ]
    } );
	} );

	$('.merge-row').each(function() {
		$('.merge-row').find('td').each(function() {

		var $this = $(this);
		var col = $this.index();
		var html = $this.html();
		var span = 1;
		var cell_above = $($this.parent().prev().children()[col]);
		
		// look for cells one above another with the same text
		while (cell_above.html() === html && html != 1) { // if the text is the same
			span += 1; // increase the span
			cell_above_old = cell_above; // store this cell
			cell_above = $(cell_above.parent().prev().children()[col]); // and go to the next cell above
		}

		// if there are at least two columns with the same value, 
		// set a new span to the first and hide the other
		if (span > 1) {
			// console.log(span);
			$(cell_above_old).attr('rowspan', span);
			$this.hide();
		}
		
		});
	});
	
</script>
@endpush