@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 Kecamatan : </label>
                                    <select name="pd" class="form-control select2" id="perangkat_daerah_id"
                                        data-toggle="select">
                                        {{-- Jika Sebagai Kelurahan --}}
                                        @if (Helper::checkIfKelurahan())
                                        <option value="{{ Auth::user()->kelurahan->kecamatan_id }}"> {{ Auth::user()->kelurahan->kecamatan->nama_perangkat_daerah }}</option>

                                        {{-- Jika Sebagai Kecamatan --}}
                                        @elseif (Helper::checkIfKecamatan())
                                        <option value="">Pilih Kecamatan</option>
                                        @foreach(\Helper::getOnlyKecamatan()
                                        as $data)
                                        <option value="{{$data->id}}" @if($request->get('kecamatan_id') == $data->id )
                                            SELECTED @endif >{{$data->nama_perangkat_daerah}}</option>
                                        @endforeach

                                        @else
                                        {{-- Jika Sebagai Admin --}}
                                        <option value="">Pilih Kecamatan</option>
                                        @foreach ($perangkatDaerah as $item)
                                        <option value="{{ $item->id }}" @if($request->get('pd') == $item->id ) SELECTED
                                            @endif>{{ $item->nama_perangkat_daerah }}</option>
                                        @endforeach

                                        @endif
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label for="kelurahan_id" class="form-control-label">Pilih Kelurahan : </label>
                                    <select name="kelurahan_id" class="form-control select2" id="kelurahan_id"
                                        data-toggle="select">
                                        {{-- Jika Sebagai Kelurahan --}}
                                        @if (Helper::checkIfKelurahan())
                                        <option value="{{ Auth::user()->kelurahan_id }}">
                                            {{ Auth::user()->kelurahan->nama_kelurahan }}</option>

                                        {{-- Jika Sebagai Kecamatan --}}
                                        @elseif (Helper::checkIfKecamatan())
                                        <option value="">Pilih Kelurahan</option>
                                        @foreach(\Helper::findKelurahanByKecamatanId(\Helper::getIdPerangkatDaerahLoginUser())
                                        as $data)
                                        <option value="{{$data->id}}" @if($request->get('kelurahan_id') == $data->id )
                                            SELECTED @endif >{{$data->nama_kelurahan}}</option>
                                        @endforeach

                                        {{-- Jika Sebagai Admin --}}
                                        @else
                                        @if($request->get('pd'))
                                        <option value="">Pilih Kelurahan</option>
                                        @foreach(\Helper::findKelurahanByKecamatanId($request->get('pd')) as $data)
                                        <option value="{{$data->id}}" @if($request->get('kelurahan_id') == $data->id )
                                            SELECTED @endif >{{$data->nama_kelurahan}}</option>
                                        @endforeach
                                        @else
                                        <option value="">Pilih Kecamatan Terlebih dahulu</option>
                                        @endif

                                        @endif
                                    </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_probebaya') . '?pd='.$request->get('pd', null) . '&kelurahan_id='.$request->get('kelurahan_id', 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>Kecamatan</th>
																		<th>Kelurahan</th>
																		<th>No RT</th>
																		<th>Tahun</th>
																		<th>Status Input Perencanaan</th>
																		<th>Status Anggaran Perubahan</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>
																		<th>Status Input Realisasi Tahunan</th>
																</tr>
														</thead>
														<tbody>
																@if($datas)
																@foreach ($datas as $data)
																		<tr>
																			<td>{{ $loop->iteration }}</td>
																			<td>{{ $data['nama_kecamatan'] }}</td>
																			<td>{{ $data['nama_kelurahan'] }}</td>
																			<td>{{ $data['no_rt'] }}</td>
																			<td>{{ $tahun }}</td>
																			<td>{!! $data['status_rencana'] !!}</td>
																			<td>{!! $data['status_perubahan'] !!}</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>
																			<td>{!! $data['status_realisasi_tahunan'] !!}</td>
																		</tr>
																@endforeach
																@else
																<tr>
																		<td colspan="100%" class="break-word">
																			Silahkan Pilih Kecamatan atau Kelurahan 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">
                                        @if ($request->get('kelurahan_id'))
                                            <h5 class="surtitle">Diagram Persentase Status Input Perencanaan Probebaya Kelurahan {{ \Helper::findNameKelurahanbyId( $request->get('kelurahan_id')) }}</h5>
                                        @elseif ($request->get('pd'))
										    <h5 class="surtitle">Diagram Persentase Status Input Perencanaan Probebaya {{ \Helper::findNameKecamatanbyId( $request->get('pd')) }}</h5>
                                        @else
                                            <h5 class="surtitle">Diagram Persentase Status Input Perencanaan Probebaya Kota Samarinda</h5>
                                        @endif
									</div>

									<!-- Chart wrapper -->
									<canvas id="persentase-perencanaan-probebaya" 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">
                                        @if ($request->get('kelurahan_id'))
                                            <h5 class="surtitle">Diagram Persentase Status Input Anggaran Perubahan Probebaya Kelurahan {{ \Helper::findNameKelurahanbyId( $request->get('kelurahan_id')) }}</h5>
                                        @elseif ($request->get('pd'))
										    <h5 class="surtitle">Diagram Persentase Status Anggaran Perubahan Probebaya {{ \Helper::findNameKecamatanbyId( $request->get('pd')) }}</h5>
                                        @else
                                            <h5 class="surtitle">Diagram Persentase Status Input Anggaran Perubahan Probebaya Kota Samarinda</h5>
                                        @endif
									</div>

									<!-- Chart wrapper -->
									<canvas id="persentase-anggaran-perubahan-probebaya" 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">
                                        @if ($request->get('kelurahan_id'))
                                            <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 1 Probebaya Kelurahan {{ \Helper::findNameKelurahanbyId( $request->get('kelurahan_id')) }}</h5>
                                        @elseif ($request->get('pd'))
										    <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 1 Probebaya {{ \Helper::findNameKecamatanbyId( $request->get('pd')) }}</h5>
                                        @else
                                            <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 1 Probebaya Kota Samarinda</h5>
                                        @endif
									</div>

									<!-- Chart wrapper -->
									<canvas id="persentase-tri-1-probebaya" 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">
                                        @if ($request->get('kelurahan_id'))
                                            <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 2 Probebaya Kelurahan {{ \Helper::findNameKelurahanbyId( $request->get('kelurahan_id')) }}</h5>
                                        @elseif ($request->get('pd'))
										    <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 2 Probebaya {{ \Helper::findNameKecamatanbyId( $request->get('pd')) }}</h5>
                                        @else
                                            <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 2 Probebaya Kota Samarinda</h5>
                                        @endif
									</div>

									<!-- Chart wrapper -->
									<canvas id="persentase-tri-2-probebaya" 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">
                                    @if ($request->get('kelurahan_id'))
                                        <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 3 Probebaya Kelurahan {{ \Helper::findNameKelurahanbyId( $request->get('kelurahan_id')) }}</h5>
                                    @elseif ($request->get('pd'))
                                        <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 3 Probebaya {{ \Helper::findNameKecamatanbyId( $request->get('pd')) }}</h5>
                                    @else
                                        <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 3 Probebaya Kota Samarinda</h5>
                                    @endif
									</div>

									<!-- Chart wrapper -->
									<canvas id="persentase-tri-3-probebaya" 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">
                                    @if ($request->get('kelurahan_id'))
                                        <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 4 Probebaya Kelurahan {{ \Helper::findNameKelurahanbyId( $request->get('kelurahan_id')) }}</h5>
                                    @elseif ($request->get('pd'))
                                        <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 4 Probebaya {{ \Helper::findNameKecamatanbyId( $request->get('pd')) }}</h5>
                                    @else
                                        <h5 class="surtitle">Diagram Persentase Status Input Realisasi Triwulan 4 Probebaya Kota Samarinda</h5>
                                    @endif
									</div>

									<!-- Chart wrapper -->
									<canvas id="persentase-tri-4-probebaya" 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'
            ]
        });
    });

    $("#perangkat_daerah_id").change(function (e) {
        const kecamatan_id = $(this).val();
        $.ajax({
            type: "get",
            url: "{{ url('api/kelurahan') }}" + "/" + kecamatan_id,
            success: function (res) {
                if (res.status == "success") {
                    let option = '<option value="">Pilih Kelurahan</option>';
                    res.data.forEach((data) => {
                        option +=
                            `<option value="${data.id}" data-jumlah-rt=${data.jumlah_rt}>${data.nama_kelurahan}</option>`;
                    });

                    $('select[id="kelurahan_id"]').html(option);
                } else {
                    alert("gagal.. : " + res.message);
                }
            }
        });
    });
</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_rt = {{ $datas2['total_rt'] }};

	let sudah_input_rencana = {{ $datas2['sudah_input_rencana'] }};
	let belum_input_rencana = total_rt - sudah_input_rencana;

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

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

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

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

	let sudah_input_perubahan = {{ $datas2['sudah_input_perubahan'] }};
	let belum_input_perubahan = total_rt - sudah_input_perubahan;

	// CHART RENCANA
	labels = [`Sudah Input (${sudah_input_rencana} Rt)`, `Belum Input (${belum_input_rencana} Rt)`]
	const ctxRencanaProbebaya = document.getElementById('persentase-perencanaan-probebaya').getContext('2d');
	const chartRencanaProbebaya = new Chart
	(ctxRencanaProbebaya, {
		type: 'pie',
		data: {
			labels: labels,
			datasets: [{
				data: [sudah_input_rencana, belum_input_rencana],
				backgroundColor: ['#082B59', '#FBFF00'],
				borderColor: ['#082B59', '#FBFF00'],
				borderWidth: 1
			}]
		},
		options: opt,
	});

	// CHART ANGGARAN PERUBAHAN 
	labels = [`Sudah Input (${sudah_input_perubahan} Rt)`, `Belum Input (${belum_input_perubahan} Rt)`]
	const ctxAnggaranPerubahan = document.getElementById('persentase-anggaran-perubahan-probebaya').getContext('2d');
	const chartAnggaranPerubahan = new Chart
	(ctxAnggaranPerubahan, {
		type: 'pie',
		data: {
			labels: labels,
			datasets: [{
				data: [sudah_input_perubahan, belum_input_perubahan],
				backgroundColor: ['#082B59', '#FBFF00'],
				borderColor: ['#082B59', '#FBFF00'],
				borderWidth: 1
			}]
		},
		options: opt,
	});

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

	const ctxRealisasiTri1 = document.getElementById('persentase-tri-1-probebaya').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} Rt)`, `Belum Input (${total_rt - sudah_input_realisasi_tri2} Rt)`]

	const ctxRealisasiTri2 = document.getElementById('persentase-tri-2-probebaya').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} Rt)`, `Belum Input (${total_rt - sudah_input_realisasi_tri3} Rt)`]

	const ctxRealisasiTri3 = document.getElementById('persentase-tri-3-probebaya').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} Rt)`, `Belum Input (${total_rt - sudah_input_realisasi_tri4} Rt)`]

	const ctxRealisasiTri4 = document.getElementById('persentase-tri-4-probebaya').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