@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', 'sub_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 Kegiatan</th>
								<th class="break-word">Nama Sub Kegiatan</th>
								<th class="break-word">Penjelasan</th>
							</tr>
						</thead>
						<tbody>
							@if($datas['sub_kegiatan_rkpd_tidak_dijabarkan_apbd'])
							@foreach ($datas['sub_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->kegiatan->program->bidangUrusan->perangkatDaerah) > 0)
										{{ ucwords($data->kegiatan->program->bidangUrusan->perangkatDaerah[0]->nama_perangkat_daerah) }}
										@endif
									</td>
									<td class="break-word" style="background-color: bisque;">
										@if(count($data->kegiatan->program->bidangUrusan->perangkatDaerah) > 0)
										{{ ucwords($data->kegiatan->nama_kegiatan) }}
										@endif
									</td>
									<td class="break-word" style="background-color: aqua">
										{{ $data->nama_sub_kegiatan }}
									</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>

</div>
@endsection

@push('js')
<script>
	$(document).ready(function() {
    $('#datatablePrint').DataTable( {
        dom: 'Bfrtip',
				paging: false,
				ordering: false,
				searching: false,
        buttons: [
            'csv', 'excel'
        ]
    } );
	} );
	
</script>

<script>
	$('.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) { // 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