@extends('layouts.index')

@push('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom.css')}}">
<style>
	tr.show {
		display: table-row !important;
	}
    table th{
        vertical-align: middle;
    }
</style>
@endpush

@section('content')

@include('layouts.include._breadcrumb')

<div class="page-content">
    <div class="container-fluid">

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
            <div class="page-title">
                <br>
                <br>
                <br>
                <h4 class="mb-0 font-size-18">Data {{ $title }}</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active">Welcome to {{ env('APP_NAME') }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

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

    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <br>
                    <div class="d-flex justify-content-between w-100 align-items-center">
                        <form method="GET" class="d-flex w-100">
                            <select name="pd" id="" class="form-control select-opd mx-1">
                                <option value="">Pilih Perangkat Daerah</option>
                                @foreach ($opd as $item)
                                <option value="{{ $item->id }}" @if($request->get('pd') == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
                                @endforeach
                            </select>
                            {{-- <select name="tahun" id="" class="form-control w-100 mx-1">
                                <option value="">pilih tahun</option>
                                @foreach($list_year as $year)
                                <option value="{{ $year }}" {{$request->get('tahun') == $year ? 'selected':''}}>{{ $year }}</option>
                                @endforeach
                            </select>
                            <select class="form-control" name="month">
                                <option value="">pilih bulan</option>
                                @foreach($list_month as $key => $month)
                                <option value="{{$key}}" {{$request->get('month') == $key ? 'selected':''}}>{{$month}}</option>
                                @endforeach
                            </select> --}}
                            <button type="submit" class="btn btn-warning">filter</button>
                            <a href="{{url('/laporan_realisasi')}}" class="btn btn-success" style="margin-left: 5px;">reset</a>
                        </form>
                        <div>
                            <div class="icon d-flex w-100">
                                <div class="d-flex align-items-center w-100 justify-content-around">
                                    {{-- <a href="" class="btn btn-danger mx-3"><i class="fa fa-print"></i></a>
                                    <a href="" class="btn btn-success"><i class="fa fa-file"></i></a> --}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-center d-flex flex-column justify-content-center w-100 align-items-around table-responsive"style="display: block">
                        <table class="my-5">
                            <thead>
                                <tr class="text-center biasa m-2">
                                    <th style="background: rgb(220, 218, 218)" class="p-3" rowspan="2">
                                        <center><h5>No</h5></center>
                                    </th>
                                    <th style="background: rgb(220, 218, 218)" class="p-3" rowspan="2"><center><h5>Perangkat Daerah</h5></center></th>
                                    <th style="background: rgb(220, 218, 218)" class="p-3" rowspan="2"><center><h5>Total Anggaran Pagu</h5></center></th>
                                    <th style="background: rgb(220, 218, 218)" class="p-3" colspan="4"><center><h5>Realisasi</h5></center></th>
                                </tr>
                                <tr class="biasa m-2">
                                    <th style="background: rgb(220, 218, 218)" class="p-3"><center><h5>Fisik (%)</h5></center></th>
                                    <th style="background: rgb(220, 218, 218)" class="p-3"><center><h5>Keuangan (Rp)</h5></center></th>
                                    <th style="background: rgb(220, 218, 218)" class="p-3"><center><h5>Keuangan Pembayaran (%)</h5></center></th>
                                    <th style="background: rgb(220, 218, 218)" class="p-3"><center><h5>Keuangan Penyerapan (%)</h5></center></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="biasa">
                                    <td class="p-3">{{$proker->count() > 0?'1':'-'}}</td>
                                    <td class="p-3">{{$proker->count() > 0?$proker->first()->Opd->nama_perangkat_daerah:'-'}}</td>
                                    <td class="text-center text-nowrap p-3">
                                        {{$proker->count() > 0?'Rp'.number_format($proker->first()->anggaran , 0, ',', '.'):'-'}}
                                    </td>
                                    <td class="text-center p-3">{{$proker->count() > 0? number_format($proker->first()->percentfisik/($proker->first()->anggaran > 0 ? $proker->first()->anggaran:1) , 2, ',', '.'):'0'}}%</td>
                                    <td class="text-center text-nowrap p-3">
                                        {{$proker->count() > 0?'Rp'.number_format($proker->first()->keuangan , 0, ',', '.'):'-'}}
                                    </td>
                                    <td class="text-cente p-3r">{{$proker->count() > 0? number_format(($proker->first()->keuangan/($proker->first()->kontrak > 0 ? $proker->first()->kontrak+$proker->first()->pagubelumberjalan:1))*100 , 2, ',', '.'):'0'}}%</td>
                                    <td class="text-cente p-3r">{{$proker->count() > 0? number_format(($proker->first()->keuangan/($proker->first()->anggaran > 0 ? $proker->first()->anggaran:1))*100 , 2, ',', '.'):'0'}}%</td>
                                
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </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">Data {{$title}}</h3>
                            </div>
                             <div class="col-md-6">
                                <div style="float:right;">
                                    <div class="icon d-flex w-100">
                                        <div class="d-flex align-items-center w-100 justify-content-around">
                                           
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive py-4">
                        <table class="table table-hover table-bordered sticky-header">
                            <thead style="background: rgb(220, 218, 218)" class="text-nowrap">
                                <tr>
                                    <th rowspan="3"></th>
                                    <th rowspan="3">
                                        <center><h5>No</h5></center>
                                    </th>
                                    <th rowspan="3" style="min-width: 150px;">
                                        <center><h5>Kode</h5></center>
                                    </th>
                                    <th rowspan="3">
                                        <center><h5>Program/Kegiatan/Sub Kegiatan</h5></center>
                                    </th>
                                    <th rowspan="3"><center><h5>OPD</h5></center></th>
                                    <th rowspan="3"><center><h5>Bagian/Bidang/Kelurahan/UPT</h5></center></th>
                                    <th rowspan="3"><center><h5>PA/KPA</h5></center></th>
                                    <th rowspan="3"><center><h5>PPTK</h5></center></th>
                                    <th rowspan="3"><center><h5>Pagu</h5></center></th>
                                    <th rowspan="3"><center><h5>Pagu Kontrak</h5></center></th>
                                    <th rowspan="3"><center><h5>Nilai Kontrak</h5></center></th>
                                    <th colspan="4"><center><h5>Realisasi</h5></center></th>
                                    <th rowspan="3"><center><h5>Sisa Pagu Kontrak</h5></center></th>
                                    <th rowspan="3"><center><h5>Sisa Pagu</h5></center></th>
                                    <th rowspan="3"><center><h5>Aksi</h5></center></th>
                                </tr>

                                <tr>
                                    <th><center><h5>Fisik</h5></center></th>
                                    <th colspan="3"><center><h5>Keuangan</h5></center></th>
                                </tr>

                                <tr>
                                    <th><center><h5>%</h5></center></th>
                                    <th><center><h5>RP</h5></center></th>
                                    <th><center><h5>Pembayaran (%)</h5></center></th>
                                    <th><center><h5>Penyerapan (%)</h5></center></th>
                                </tr>
                            </thead>
                            <tbody>

                                {{-- Proker --}}
                                @forelse ($proker as $pr)
                                        {{-- Proker Program --}}
                                        @foreach ($pr->ProkerProgram as $pm)
                                            <tr class="table-primary">
                                                <td>
                                                    <button url="{{ route('get.realisasi.kegiatan',$pm->id) }}" type="button" id="{{ $pm->id }}" class="btn btn-sm btn-primary btn-program sub" data-toggle="collapse" data-target=".program_{{ $pm->id }}"> <i class="fa fa-arrow-down text-white"></i> </button>
                                                </td>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $pm->program->kode }}</td>
                                                <td>{{ $pm->program->nama_program }}</td>
                                                <td>{{ $pr->opd->nama_perangkat_daerah }}</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td class="text-nowrap text-end">Rp{{ number_format($pm->anggaran , 0, ',', '.') }}</td>
                                                <td class="text-nowrap text-end">Rp{{ number_format($pm->paguberjalan , 0, ',', '.') }}</td>
                                                <td class="text-nowrap text-end">Rp{{number_format($pm->kontrak , 0, ',', '.')}}</td>
                                                <td class="text-center">{{ number_format($pm->percentfisik/($pm->anggaran > 0 ? $pm->anggaran:1), 2, ',', '.')}}%</td>
                                                <td class="text-nowrap text-end">Rp{{number_format($pm->keuangan , 0, ',', '.')}}</td>
                                                <td class="text-center">{{number_format(($pm->keuangan/($pm->kontrak > 0 ?$pm->kontrak+$pm->pagubelumberjalan:1))*100, 2, ',', '.')}}%</td>
                                                <td class="text-center">{{number_format(($pm->keuangan/($pm->anggaran > 0 ?$pm->anggaran:1))*100, 2, ',', '.')}}%</td>
                                                <td class="text-nowrap text-end">Rp{{number_format($pm->paguberjalan - $pm->kontrak , 0, ',', '.')}}</td>
                                                <td class="text-nowrap text-end">Rp{{number_format($pm->anggaran - $pm->keuangan , 0, ',', '.')}}</td>
                                                
                                                <td></td>
                                            </tr>

                                        {{-- Proker Kegiatan --}}
                                        {{-- @foreach ($pm->ProkerKegiatan as $kn)
                                        <tr class="table-warning collapse program_{{ $pm->program_id }}">
                                            <td></td>
                                            <td></td>
                                            <td>{{ $kn->kegiatan->kode }}</td>
                                            <td>{{ $kn->kegiatan->nama_kegiatan }}</td>
                                            <td>{{ $pr->opd->nama_perangkat_daerah }}</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td>Rp. {{ number_format($kn->anggaran) }}</td>
                                            <td>Rp.{{ number_format($kn->paguberjalan) }}
                                            </td>
                                            <td>Rp. {{ number_format($kn->kontrak) }}</td>
                                            <td>Rp. {{number_format($kn->paguberjalan - $kn->kontrak)}}</td>
                                            <td>{{ number_format($kn->percentfisik/($kn->anggaran > 0 ?$kn->anggaran:1),2)}}%</td>
                                            <td>Rp. {{number_format($kn->keuangan)}}</td>
                                            <td>{{number_format(($kn->keuangan/($kn->anggaran > 0 ? $kn->anggaran:1))*100,2)}}%</td>
                                            <td>Rp.{{number_format($kn->anggaran - $kn->keuangan,2)}}</td>
                                           
                                            <td></td>
                                        </tr> --}}
                                        <tr class="table-warning collapse program_{{ $pm->id }} view_kegiatan_{{ $pm->id }}">
                                            <td colspan="17">
                                                <div align="center">
                                                    Memproses...
                                                </div>  
                                            </td>
                                        </tr>
                                        {{-- Proker Sub Kegiatan --}}
                                        {{-- @foreach ($kn->ProkerSubKegiatan as $sk)
                                        @if(\Auth::user()->hasRole('admin-PPTK'))
                                            @if($sk->user_id == \Auth::user()->id)
                                                <tr class="collapse program_{{ $pm->program_id }}">
                                                    <td></td>
                                                    <td></td>
                                                    <td>{{ $sk->subKegiatan->kode }}</td>
                                                    <td>{{ $sk->subKegiatan->nama_sub_kegiatan }}</td>
                                                    <td></td>
                                                    <td>{{ $sk->bagian }}</td>
                                                    <td>{{ $sk->kpa->nama??"-" }}</td>
                                                    <td>{{ $sk->pptk->nama }}</td>
                                                    
                                                    <td>Rp. {{ number_format($sk->anggaran) }}</td>
                                                    <td>Rp.{{ number_format($sk->paguberjalan) }}</td>
                                                    <td>Rp.{{ number_format($sk->kontrak) }}</td>
                                                    <td>Rp. {{number_format($sk->paguberjalan - $sk->kontrak)}}</td>
                                                    <td>{{ number_format($sk->percentfisik/$sk->anggaran,2)}}%</td>
                                                    <td>Rp. {{number_format($sk->keuangan)}}</td>
                                                    <td>{{number_format(($sk->keuangan/$sk->anggaran)*100,2)}}%</td>
                                                    <td>Rp.{{number_format($sk->anggaran - $sk->keuangan,2)}}</td>
                                                
                                                    <td class="nowrap">
                                                        <a href="{{ route('realisasi.sub', $sk->id) }}" target="_blank" class="btn btn-sm btn-primary"> <i class="fa fa-eye text-white"></i> </a>
                                                    </td>
                                                </tr>
                                            @endif
                                        @else
                                            <tr class="collapse program_{{ $pm->program_id }}">
                                                <td></td>
                                                <td></td>
                                                <td>{{ $sk->subKegiatan->kode }}</td>
                                                <td>{{ $sk->subKegiatan->nama_sub_kegiatan }}</td>
                                                <td></td>
                                                <td>{{ $sk->bagian }}</td>
                                                <td>{{ $sk->kpa->nama??"-" }}</td>
                                                <td>{{ $sk->pptk->nama }}</td>
                                                
                                                <td>Rp. {{ number_format($sk->anggaran) }}</td>
                                                <td>Rp.{{ number_format($sk->paguberjalan) }}</td>
                                                <td>Rp.{{ number_format($sk->kontrak) }}</td>
                                                <td>Rp. {{number_format($sk->paguberjalan - $sk->kontrak)}}</td>
                                                <td>{{ number_format($sk->percentfisik/$sk->anggaran,2)}}%</td>
                                                <td>Rp. {{number_format($sk->keuangan)}}</td>
                                                <td>{{number_format(($sk->keuangan/$sk->anggaran)*100,2)}}%</td>
                                                <td>Rp.{{number_format($sk->anggaran - $sk->keuangan,2)}}</td>
                                            
                                                <td class="nowrap">
                                                    <a href="{{ route('realisasi.sub', $sk->id) }}" target="_blank" class="btn btn-sm btn-primary"> <i class="fa fa-eye text-white"></i> </a>
                                                </td>
                                            </tr>
                                        @endif
                                        @endforeach --}}
                                        {{-- Akhir Proker Sub Kegiatan --}}

                                        {{-- @endforeach --}}
                                        {{-- Akhir Proker Kegiatan --}}

                                        @endforeach
                                        {{-- Akhir Proker Program --}}
                                @empty
                                    <tr>
                                        <td class="text-center" colspan="17">{{ $request->get('pd') == null ? "Mohon Pilih OPD Terlebih Dahulu" : 'Tidak Ada Data' }}</td>
                                    </tr>
                                @endforelse
                                {{-- Akhir Proker --}}

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
    </div>
</div>

@endsection

@push('js')
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="{{asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.2.5/jquery.floatThead.min.js" integrity="sha512-131fDtJKn0jUOqN1sfcHkBZHRmTCP0gmcpztVNuE3M8toiuIv8V9I+tpL/1t3GFDBcigLyB2hWJ3ZNjYwEO4bg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    var $table = $('.sticky-header');
    $table.floatThead({
            top: 70,
            responsiveContainer: function($table){
            return $table.closest('.table-responsive');
        }
    });

    $('#vertical-menu-btn').on('click', function () {
        // Delay sedikit untuk memastikan animasi selesai (jika ada)
        setTimeout(function () {
            $table.floatThead('reflow'); // refresh posisi
        }); // sesuaikan delay-nya jika perlu
    });
</script>

<script type="text/javascript">
    $('.select-opd').select2({
       // width:'100%',
    });

    $('body').on('click','.btn-program',function(){
        var ini  = $(this);
        var loc = '.view_kegiatan_'+ini.attr('id');
        var progEl = $(".program_"+ini.attr('id'));
        var check = [];
        $.each(progEl,function(index){
            check.push(index);
        });
        if(check.length < 2){
            $.ajax({
                url: ini.attr('url'),
                method: "POST",
                dataType: 'json',
                data: {_token: "{{ csrf_token() }}"},
            }).done(function(data){
                $(loc).replaceWith(data);
            }).fail(function(data){
                $(loc).replaceWith('<tr><td colspan="16"><div align="center">Terjadi kegagalan!</div></td></tr>');
            });
        }
    });

    $('body').on('click','.btn-kegiatan',function(){
        var ini  = $(this);
        var loc = '.view_subkegiatan_'+ini.attr('id');
        var progEl = $(".subkegiatan_"+ini.attr('id'));
        var check = [];
        $.each(progEl,function(index){
            check.push(index);
        });
        if(check.length < 2){
            $.ajax({
                url: ini.attr('url'),
                method: "POST",
                dataType: 'json',
                data: {_token: "{{ csrf_token() }}"},
            }).done(function(data){
                if(data.length > 0){
                    $(loc).replaceWith (data);
                }else{
                    $(loc).find('div').html('Tidak ditemukan data!');
                }
            }).fail(function(data){
                $(loc).replaceWith('<tr><td colspan="16"><div align="center">Terjadi kegagalan!</div></td></tr>');
            });
        }
    });
</script>
<script>

    $('.date').datepicker({
        format:'yyyy-mm-dd',
        autoclose:true,
    });

	$(document).ready(function () {
		// $.each($(".select2-container"), function (i, v) {
		// 	$(v).attr("style", "width:100%;")
		// });

		$(".tombolTambahKegiatan").click(function (e) {
			$('input[name="proker_program_id"]').val($(this).attr('data-proker-program-id'))
		});

		$(".tombolTambahSubKegiatan").click(function (e) {
			$('input[name="proker_kegiatan_id"]').val($(this).attr('data-proker-kegiatan-id'))
		});


		// Edit
		$(".tombolEditProgram").click(function (e) {
			let prokerProgramId = $(this).attr('data-proker-program-id')
			let programId = $(this).attr('data-program-id')
			var route = '{{ route("proker.editProgram", ":id") }}';
			route = route.replace(':id', prokerProgramId);

			$('#editProgram').modal('show');
			$('#editProgram').find('select[name="program_id"]').val(programId).trigger('change')
			$('#editProgram').find('form').attr('action', route)
		});

		$(".tombolEditKegiatan").click(function (e) {
			let prokerKegiatanId = $(this).attr('data-proker-kegiatan-id')
			let kegiatanId = $(this).attr('data-kegiatan-id')
			var route = '{{ route("proker.editKegiatan", ":id") }}';
			route = route.replace(':id', prokerKegiatanId);

			$('#editKegiatan').modal('show');
			$('#editKegiatan').find('select[name="kegiatan_id"]').val(kegiatanId).trigger('change')
			$('#editKegiatan').find('form').attr('action', route)
		});

		$(".tombolEditSubKegiatan").click(function (e) {
			let prokerSubKegiatanId = $(this).attr('data-proker-sub-kegiatan-id')
			let subKegiatanId = $(this).attr('data-sub-kegiatan-id')
			let kpaId = $(this).attr('data-kpa-id')
			let userId = $(this).attr('data-pptk-id')
			let sumberDanaId = $(this).attr('data-sumber-dana-id')
			let bagianId = $(this).attr('data-bagian-id')
			var route = '{{ route("proker.editSubKegiatan", ":id") }}';
			route = route.replace(':id', prokerSubKegiatanId);

			$('#editSubKegiatan').modal('show');
			$('#editSubKegiatan').find('select[name="sub_kegiatan_id"]').val(subKegiatanId).trigger('change')
			$('#editSubKegiatan').find('select[name="kpa_id"]').val(kpaId).trigger('change')
			$('#editSubKegiatan').find('select[name="pptk_id"]').val(userId).trigger('change')
			$('#editSubKegiatan').find('select[name="sumber_dana_id"]').val(sumberDanaId).trigger('change')
			$('#editSubKegiatan').find('input[name="bagian"]').val(bagianId)
			$('#editSubKegiatan').find('form').attr('action', route)
		});




		// Hapus
		$(".tombolHapusProgram").click(function (e) {
			var confirm = window.confirm("Apakah anda yakin ingin menghapus Program ini ?");
				if(confirm){
					let prokerProgramId = $(this).attr('data-proker-program-id')

					$.ajaxSetup({
							headers: {
								'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
							}
					});

					$.ajax({
							'type': 'DELETE',
							'url': `{{ url("proker/delete-program") }}/${prokerProgramId}`,
							'data': {
								'prokerProgramId': prokerProgramId,
								_token: '{!! csrf_token() !!}',
							},
							success: (res) => {
								alert(res.message)
								window.location.reload();
							},
					});
				}

		});

		$(".tombolHapusKegiatan").click(function (e) {
			var confirm = window.confirm("Apakah anda yakin ingin menghapus Kegiatan ini ?");
				if(confirm){
					let prokerKegiatanId = $(this).attr('data-proker-kegiatan-id')

					$.ajaxSetup({
							headers: {
								'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
							}
					});

					$.ajax({
							'type': 'DELETE',
							'url': `{{ url("proker/delete-kegiatan") }}/${prokerKegiatanId}`,
							'data': {
								'prokerKegiatanId': prokerKegiatanId,
								_token: '{!! csrf_token() !!}',
							},
							success: (res) => {
								alert(res.message)
								window.location.reload();
							},
					});
				}

		});


		$(".tombolHapusSubKegiatan").click(function (e) {
			var confirm = window.confirm("Apakah anda yakin ingin menghapus Sub Kegiatan ini ?");
				if(confirm){
					let prokerSubKegiatanId = $(this).attr('data-proker-sub-kegiatan-id')

					$.ajaxSetup({
							headers: {
								'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
							}
					});

					$.ajax({
							'type': 'DELETE',
							'url': `{{ url("proker/delete-sub-kegiatan") }}/${prokerSubKegiatanId}`,
							'data': {
								'prokerSubKegiatanId': prokerSubKegiatanId,
								_token: '{!! csrf_token() !!}',
							},
							success: (res) => {
								alert(res.message)
								window.location.reload();
							},
					});
				}

		});


		$("body").on('click','.sub',function(){
            if($(this).find('i').hasClass("fa-arrow-down")){
                $(this).find('i').removeClass('fa-arrow-down')
                $(this).find('i').addClass('fa-arrow-up')
            }else{
                $(this).find('i').removeClass('fa-arrow-up')
                $(this).find('i').addClass('fa-arrow-down')
            }
        });

	});
</script>
@endpush