@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">

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <form style="width: 100%;" method="GET">
                        <div class="form-group">
                            <div class="row">

                                <div class="col-md-4">
                                    <label for="pd" class="form-control-label">Pilih Perangkat Daerah : </label>
                                    <select name="pd" class="form-control select2" id="perangkat_daerah_id"
                                        data-toggle="select">
                                        {{-- Jika Sebagai Admin --}}
                                        <option value="">Pilih Opd</option>
                                        @foreach ($perangkatDaerah as $item)
                                        <option value="{{ $item->id }}" @if($request->get('pd') == $item->id ) SELECTED
                                            @endif>{{ $item->nama_perangkat_daerah }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label for="tahun" class="form-control-label">Pilih Tahun : </label>
                                    <select name="tahun" class="form-control" data-toggle="select">
                                        <option value="{{ date('Y') - 1 }}" @if( $request->get('tahun') == date('Y') - 1
                                            ) SELECTED @endif >{{ date('Y') - 1 }}</option>

                                        <option value="{{ date('Y') }}" @if( $request->get('tahun') == date('Y') )
                                            SELECTED @endif @if($request->get('tahun') == NULL) SELECTED @endif
                                            >{{ date('Y') }}</option>

                                        <option value="{{ date('Y') + 1 }}" @if( $request->get('tahun') == date('Y') + 1
                                            ) SELECTED @endif >{{ date('Y') + 1 }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <button class="btn btn-info btn-sm" type="submit">Tampil</button>
                                <a href="{{ url()->current() }}" class="btn btn-info btn-sm">Refresh</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <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', 'status_input_evaluasi') . '?pd='.$request->get('pd', null) . '&tahun='.$request->get('tahun', $tahun) }}"
																		target="_blank"><i class="fa fa-download"></i>  Download Status Input </a>
														</div>
												</div>
										</div>
										<div class="table-responsive py-4">
												<table class="table table-hover" id="datatable">
														<thead class="table-dark">
																<tr>
																		<th>No</th>
																		<th>Perangkat Daerah</th>
																		<th>Kode Sub Kegiatan</th>
																		<th>Sub Kegiatan</th>
																		<th>Tahun</th>
																		<th>Status Input Realisasi T1</th>
																		<th>Status Input Realisasi T2</th>
																		<th>Status Input Realisasi T3</th>
																		<th>Status Input Realisasi T4</th>
																</tr>
														</thead>
														<tbody>
																@if($datas)
																@foreach ($datas as $data)
																		<tr>
																			<td>{{ $loop->iteration }}</td>
																			<td>{{ $data['nama_opd'] }}</td>
																			<td>{{ $data['kode'] }}</td>
																			<td>{{ $data['nama_sub_kegiatan'] }}</td>
																			<td>{{ $tahun }}</td>
																			<td>{!! $data['status_realisasi_tri1'] !!}</td>
																			<td>{!! $data['status_realisasi_tri2'] !!}</td>
																			<td>{!! $data['status_realisasi_tri3'] !!}</td>
																			<td>{!! $data['status_realisasi_tri4'] !!}</td>
																		</tr>
																@endforeach
																@else
																<tr>
																		<td colspan="100%" class="break-word">
																			Silahkan Pilih Opd Yang Ingin di-Cek Status Inputnya
																		</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 Persentase Status Input Realisasi Triwulan 1 Evaluasi</h5>
									</div>

									<!-- Chart wrapper -->
									<canvas id="persentase-tri-1-evaluasi" 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 Persentase Status Input Realisasi Triwulan 2 Evaluasi</h5>
									</div>

									<!-- Chart wrapper -->
									<canvas id="persentase-tri-2-evaluasi" 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 Persentase Status Input Realisasi Triwulan 3 Evaluasi</h5>
									</div>

									<!-- Chart wrapper -->
									<canvas id="persentase-tri-3-evaluasi" 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 Persentase Status Input Realisasi Triwulan 4 Evaluasi</h5>
									</div>

									<!-- Chart wrapper -->
									<canvas id="persentase-tri-4-evaluasi" 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>

<script>
	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
				},
		},
	};

	let total_sk = {{ $datas2['total_sk'] }};

	let sudah_input_realisasi_tri1 = {{ $datas2['sudah_input_realisasi_tri1'] }};
	let belum_input_realisasi_tri1 = total_sk - sudah_input_realisasi_tri1;

	let sudah_input_realisasi_tri2 = {{ $datas2['sudah_input_realisasi_tri2'] }};
	let belum_input_realisasi_tri2 = total_sk - sudah_input_realisasi_tri2;

	let sudah_input_realisasi_tri3 = {{ $datas2['sudah_input_realisasi_tri3'] }};
	let belum_input_realisasi_tri3 = total_sk - sudah_input_realisasi_tri3;

	let sudah_input_realisasi_tri4 = {{ $datas2['sudah_input_realisasi_tri4'] }};
	let belum_input_realisasi_tri4 = total_sk - sudah_input_realisasi_tri4;

	// CHART REALISASI TRIWULAN 1
	labels = [`Sudah Input (${sudah_input_realisasi_tri1})`, `Belum Input (${total_sk - sudah_input_realisasi_tri1})`]

	const ctxRealisasiTri1 = document.getElementById('persentase-tri-1-evaluasi').getContext('2d');
	const chartRealisasiTri1 = new Chart
	(ctxRealisasiTri1, {
		type: 'pie',
		data: {
			labels: labels,
			datasets: [{
				data: [sudah_input_realisasi_tri1, belum_input_realisasi_tri1],
				backgroundColor: ['#082B59', '#FBFF00'],
				borderColor: ['#082B59', '#FBFF00'],
				borderWidth: 1
			}]
		},
		options: opt,
	});

	// CHART REALISASI TRIWULAN 2
	labels = [`Sudah Input (${sudah_input_realisasi_tri2})`, `Belum Input (${total_sk - sudah_input_realisasi_tri2})`]

	const ctxRealisasiTri2 = document.getElementById('persentase-tri-2-evaluasi').getContext('2d');
	const chartRealisasiTri2 = new Chart
	(ctxRealisasiTri2, {
		type: 'pie',
		data: {
			labels: labels,
			datasets: [{
				data: [sudah_input_realisasi_tri2, belum_input_realisasi_tri2],
				backgroundColor: ['#082B59', '#FBFF00'],
				borderColor: ['#082B59', '#FBFF00'],
				borderWidth: 1
			}]
		},
		options: opt,
	});

	// CHART REALISASI TRIWULAN 3
	labels = [`Sudah Input (${sudah_input_realisasi_tri3})`, `Belum Input (${total_sk - sudah_input_realisasi_tri3})`]

	const ctxRealisasiTri3 = document.getElementById('persentase-tri-3-evaluasi').getContext('2d');
	const chartRealisasictxRealisasiTri3 = new Chart
	(ctxRealisasiTri3, {
		type: 'pie',
		data: {
			labels: labels,
			datasets: [{
				data: [sudah_input_realisasi_tri3, belum_input_realisasi_tri3],
				backgroundColor: ['#082B59', '#FBFF00'],
				borderColor: ['#082B59', '#FBFF00'],
				borderWidth: 3
			}]
		},
		options: opt,
	});

	// CHART REALISASI TRIWULAN 4
	labels = [`Sudah Input (${sudah_input_realisasi_tri4})`, `Belum Input (${total_sk - sudah_input_realisasi_tri4})`]

	const ctxRealisasiTri4 = document.getElementById('persentase-tri-4-evaluasi').getContext('2d');
	const chartrealisactxRealisasiTri4 = new Chart
	(ctxRealisasiTri4, {
		type: 'pie',
		data: {
			labels: labels,
			datasets: [{
				data: [sudah_input_realisasi_tri4, belum_input_realisasi_tri4],
				backgroundColor: ['#082B59', '#FBFF00'],
				borderColor: ['#082B59', '#FBFF00'],
				borderWidth: 4
			}]
		},
		options: opt,
	});
</script>
@endpush