@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;
	}
</style>
@endpush

@section('content')

@include('layouts.include._breadcrumb')

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

	@include('layouts.include.filter', ['semester' => true])

	<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', 'realisasi_apbd') . '?tahun='.$request->get('tahun', $tahun).'&semester='.$request->get('semester', 'all').'' }}" target="_blank">Print</a>
							</div>
						</div>
					</div>
					<p>
						{{-- <a class="btn btn-warning" href="{{ route('print', 'anggaran_bidang_urusan') }}" target="_blank">Print</a> --}}
					</p>
					@php
					$tahun = $request->get('tahun', $tahun);
					$semester = $request->get('semester', 'all');
					$text = "";
					if ($semester == "all") {
						$text = "Semester 1 & 2";
					}elseif($semester == "semester1") {
						$text = "Semester 1";
					}elseif($semester == "semester2") {
						$text = "Semester 2";
					}elseif($semester == "tri1") {
						$text = "Triwulan 1";
					}elseif($semester == "tri2") {
						$text = "Triwulan 2";
					}elseif($semester == "tri3") {
						$text = "Triwulan 3";
					}elseif($semester == "tri4") {
						$text = "Triwulan 4";
					}
					@endphp
					<div class="table-responsive">
						<table class="table table-hover table-bordered" id="datatablePrint" style="width: 100%">
							<thead class="table-dark">
								<tr>
									<th rowspan="2" width="20px">No</th>
									<th rowspan="2" class="break-word">Nama Urusan</th>
									<th colspan="2" class="break-word">Pagu Anggaran</th>
								</tr>

								<tr>
									<th> APBD </th>
									<th> Realisasi APBD <br> {{ $text }}</th>
								</tr>
							</thead>
							<tbody>
								@if($datas)
								@foreach ($datas as $mun)
									<tr class="font-weight-bold pointer table-success" data-self="mun" data-id="{{ $mun['id'] }}">
										<td>{{ \Helper::numberToRoman($loop->iteration) }}</td>
										<td class="break-word">{{ $mun['nama_urusan'] }}</td>
										<td>{{ number_format($mun['anggaranApbd']) }}</td>
										<td>{{ number_format($mun['realisasiApbd']) }}</td>
									</tr>

									<tr class="table-dark sembunyi" data-self="pd" data-parent="mun_{{ $mun['id'] }}">
										<td  colspan="4" style="text-align: left !important">Nama Perangkat Daerah</td>
										<td style="display: none;"></td>
										<td style="display: none;"></td>
										<td style="display: none;"></td>
									</tr>

									@foreach ($mun['daftar_pd'] as $pd)
										<tr class="sembunyi pointer" data-self="pd" data-parent="mun_{{ $mun['id'] }}" style="background-color: bisque;">
											<td>{{ $loop->iteration }}</td>
											<td class="break-word">{{ $pd['nama_perangkat_daerah'] }}</td>
											<td>{{ number_format($pd['anggaran_apbd_pd']) }}</td>
											<td>{{ number_format($pd['realisasi_apbd_pd']) }}</td>
										</tr>
									@endforeach
								@endforeach
								<tr class="font-weight-bold table-dark">
									<td>&nbsp;</td>
									<td>Total :</td>
									<td>{{ number_format($datas2['ttlDistribusiApbd']) }}</td>
									<td>{{ number_format($datas2['ttlRealisasiApbd']) }}</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>
@endpush