@extends('layouts.app')
@section('content')
<style>
i{
color: white !important;
}
</style>
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h4 class="mb-sm-0">Indikator Pemerintah</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">IKU</a></li>
<li class="breadcrumb-item active">Indikator Pemerintah</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
{{-- <h4 class="card-title">Pengguna</h4> --}}
{{-- <p class="card-title-desc">DataTables has most features enabled by
default, so all you need to do to use it with your own tables is to call
the construction function: <code>$().DataTable();</code>.
</p> --}}
<div class="row justify-content-end mb-2">
<div class="col-md-12 d-flex justify-content-start">
@php
$tahunDipilih = isset($_GET['tahun']) ? $_GET['tahun'] : date('Y');
@endphp
<select name="tahun" id="tahun" class="form-control">
@foreach($tahunArray as $tahun)
<option value="{{$tahun}}" {{ $tahunDipilih == $tahun ? 'selected' : '' }}>{{$tahun}}</option>
@endforeach
</select>
</div>
</div>
<table id="table" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
@foreach ($sasaranRpjmd as $item)
<thead>
<tr style="background:#f5f2c4">
<th colspan="10">
<div class="d-flex justify-content-between align-items-center">
Sasaran: {{$item->nama}}
</div>
</th>
<th>
<button class="w-100 btn btn-mod" id="{{$item->id}}" style="background: #42d408"><i class="mdi mdi-plus"></i></button>
</th>
<th>
<button class="w-100 btn show-data" id="{{$item->id}}" status="false" style="background: grey"><i class="mdi mdi-arrow-down"></i></button>
</th>
</tr>
</thead>
{{-- <td>{{$itemIndikator->parameter}}</td> --}}
{{-- <td>Parameter Pengukuran</td> --}}
<tbody id="sasaran_{{$item->id}}">
{{-- <tr style="background:#cccccc">
<td rowspan="2">No</td>
<td rowspan="2">SKPD Penanggung Jawab</td>
<td rowspan="2">Indikator Kinerja Utama</td>
<td rowspan="2">Satuan</td>
<td rowspan="2">Kondisi Awal</td>
<td rowspan="2">Target Kerja</td>
<td colspan="4">Capaian Kinerja</td>
<td rowspan="2">Catatan</td>
<td rowspan="2">Aksi</td>
</tr>
<tr>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
</tr>
@foreach ($item->IndikatorPemerintah as $key => $itemIndikator)
<tr>
<td>{{$key + 1}}</td>
<td>{{$itemIndikator->IndukOpd->nama}}</td>
<td>{{$itemIndikator->nama}}</td>
<td>{{$itemIndikator->satuan}}</td>
<td>{{$itemIndikator->kondisi_awal}}</td>
<td>{{$itemIndikator->target_kerja}}</td>
<td>{{$itemIndikator->capaian_satu}}</td>
<td>{{$itemIndikator->capaian_dua}}</td>
<td>{{$itemIndikator->capaian_tiga}}</td>
<td>{{$itemIndikator->capaian_empat}}</td>
<td>{{ $itemIndikator->catatan ? $itemIndikator->catatan : '-' }}</td>
<td><form action="{{ route($route.'.destroy',$itemIndikator->id) }}" method="POST" class="delete-data">
@csrf
<div class="btn-group" role="group" aria-label="Action Button">
<input type="hidden" name="_method" value="DELETE">
<a type="button" class="btn btn-sm btn-warning m-2 btn-mod2" id="{{$itemIndikator->id}}"><i class="fa fa-edit"></i></a>
<button type="submit" class="m-2 btn btn-sm btn-danger text-white delete-data"><i class="fa fa-trash"></i></button>
</div>
</form></td>
</tr>
@endforeach --}}
</tbody>
@endforeach
</table>
</div>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
</div>
<div class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="title">Tambah Misi</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<input type="submit" value="Submit" class="btn" style="background: #f7ac42" id="submitButton" form="storeForm">
</div>
{!! Form::close() !!}
</div>
</div>
</div>
@push('scripts')
<!-- Required datatable js -->
<script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<!-- Buttons examples -->
<script src="{{asset('assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('assets/libs/jszip/jszip.min.js')}}"></script>
<script src="{{asset('assets/libs/pdfmake/build/pdfmake.min.js')}}"></script>
<script src="{{asset('assets/libs/pdfmake/build/vfs_fonts.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.colVis.min.js')}}"></script>
<!-- Responsive examples -->
<script src="{{asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js')}}"></script>
@endpush
@push('scripts')
<script>
$(document).on('click', '.show-data', function() {
let id = $(this).attr('id');
let tahun = "{{$tahunDipilih}}";
if($(this).attr('status') == 'false') {
$(this).hide();
let tbody = `
<tr style="background:#cccccc" class="indikator-pemerintah-${id}"><td colspan="12">Sedang Memproses data....</td></tr>
`;
$(`#sasaran_${id}`).after(tbody);
$.ajax({
type: "get",
url: `{{url('')}}/apiindikatorpemerintah/${id}/${tahun}`,
success: (res) => {
if (res.status == "success") {
console.log(res);
$(`.indikator-pemerintah-${res.id}`).remove();
tbody = '';
tbody += `<tr style="background:#cccccc" class="indikator-pemerintah-${res.id}">
<td rowspan="2">No</td>
<td rowspan="2">SKPD Penanggung Jawab</td>
<td rowspan="2">Indikator Kinerja Utama</td>
<td rowspan="2">Satuan</td>
<td rowspan="2">Kondisi Awal</td>
<td rowspan="2">Target Kerja</td>
<td colspan="4">Capaian Kinerja</td>
<td rowspan="2">Catatan</td>
<td rowspan="2">Aksi</td>
</tr>
<tr class="indikator-pemerintah-${res.id}">
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
</tr>`;
// $(`#visi-data-${$(this).attr('visi_id')}`).after(tbody);
// tbody = '';
res.data.forEach((item, index) => {
tbody += `
<tr class="indikator-pemerintah-${res.id}">
<td>${index + 1}</td>
<td>${item.induk_opd.nama}</td>
<td>${item.nama}</td>
<td>${item.satuan}</td>
<td>${item.kondisi_awal}</td>
<td>${item.target_kerja}</td>
<td>${item.capaian_satu}</td>
<td>${item.capaian_dua}</td>
<td>${item.capaian_tiga}</td>
<td>${item.capaian_empat}</td>
<td>${ item.catatan ? item.catatan : '-' }</td>
<td><form action="{{url('indikator_pemerintah')}}/${item.id}" method="POST" class="delete-data">
@csrf
<div class="btn-group" role="group" aria-label="Action Button">
<input type="hidden" name="_method" value="DELETE">
<a type="button" class="btn btn-sm btn-warning m-2 btn-mod2" id="${item.id}"><i class="fa fa-edit"></i></a>
<button type="submit" class="m-2 btn btn-sm btn-danger text-white delete-data"><i class="fa fa-trash"></i></button>
</div>
</form></td>
</tr>
`;
});
$(`#sasaran_${res.id}`).after(tbody);
$(this).show();
$(this).html('<i class="mdi mdi-arrow-up"></i>');
$(this).attr('status', 'true');
} else {
alert("Ada Yang salah saat pengambilan data");
}
}
});
} else {
$(`.indikator-pemerintah-${id}`).remove();
$(this).html('<i class="mdi mdi-arrow-down"></i>');
$(this).attr('status', 'false');
}
});
$('#tahun').on('change', function() {
var url = "{{ url('/') }}" + '/indikator_pemerintah?tahun=' + $(this).val();
if (url) {
window.location.href = url;
}
});
$('#table').on('click', '.btn-mod2', function(){
let induk_opd_id = $(this).attr('induk_opd_id');
let induk_jabatan_id = $(this).attr('induk_jabatan_id');
let jenis_jabatan_id = $(this).attr('jenis_jabatan_id');
let id = $(this).attr('id');
$.ajax({
type: "get",
url: `{{url('apiEdit/indikator_pemerintah')}}/${id}`,
success: (res) => {
if(res.status == "success"){
let option = "<option value='0'>Pilih SKPD</option>"
let textNama = `<input type="text" name="nama" id="nama" class="form-control" value="${res.data.nama}">`
let textKondisiAwal = `<input type="text" name="kondisi_awal" id="nama" class="form-control" value="${res.data.kondisi_awal}">`
let textParameter = `<input type="hidden" name="parameter" id="nama" class="form-control" value="${res.data.parameter}">`
let textSatuan = `<input type="text" name="satuan" id="nama" class="form-control" value="${res.data.satuan}">`
let textKeterangan = `<input type="text" name="keterangan" id="nama" class="form-control" value="${res.data.keterangan}">`
let textTargetKerja = `<input type="text" name="target_kerja" id="nama" class="form-control" value="${res.data.target_kerja}">`
let textCapaianSatu = `<input type="text" name="capaian_satu" id="nama" class="form-control" value="${res.data.capaian_satu}">`
let textCapaianDua = `<input type="text" name="capaian_dua" id="nama" class="form-control" value="${res.data.capaian_dua}">`
let textCapaianTiga = `<input type="text" name="capaian_tiga" id="nama" class="form-control" value="${res.data.capaian_tiga}">`
let textCapaianEmpat = `<input type="text" name="capaian_empat" id="nama" class="form-control" value="${res.data.capaian_empat}">`
let textCatatan = `<textarea name="catatan" id="nama" class="form-control">${res.data.catatan}</textarea>`
for(const key in res.IndukOpd){
if(res.data.induk_opd_id == res.IndukOpd[key].id){
option += `<option value="${res.IndukOpd[key].id}" selected>${res.IndukOpd[key].nama}</option>`
} else {
option += `<option value="${res.IndukOpd[key].id}">${res.IndukOpd[key].nama}</option>`
}
}
let template = `
{!! Form::open(['route'=>$route.'.store','method'=>'POST', 'id'=>'EditForm']) !!}
<input name="_method" type="hidden" value="PUT">
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Indikator Kerja Utama</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="nama_field">
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Kondisi Awal</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="kondisi_awal_field">
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Satuan</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="satuan_field">
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Keterangan</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="keterangan_field">
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Pilih SKPD</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="">
<select name="induk_opd_id" id="skpd_select" class="form-control">
</select>
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Target Kerja</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="target_kerja_field">
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Triwulan 1</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="capaian_satu_field">
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Triwulan 2</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="capaian_dua_field">
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Triwulan 3</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="capaian_tiga_field">
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Triwulan 4</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="capaian_empat_field">
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Catatan</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="catatan">
</div>
</div>
`
$('.modal-body').html(template)
$('#nama_field').html(textNama)
$('#kondisi_awal_field').html(textKondisiAwal)
$('#parameter_field').html(textParameter)
$('#keterangan_field').html(textKeterangan);
$('#satuan_field').html(textSatuan);
$('#target_kerja_field').html(textTargetKerja);
$('#capaian_satu_field').html(textCapaianSatu);
$('#capaian_dua_field').html(textCapaianDua);
$('#capaian_tiga_field').html(textCapaianTiga);
$('#capaian_empat_field').html(textCapaianEmpat);
$('#catatan').html(textCatatan);
$('#skpd_select').html(option);
$('#EditForm').attr('action', `/indikator_pemerintah/${id}`)
$('#submitButton').attr('form', 'EditForm')
$('#title').html('Ubah data Indikator');
$('.modal').modal('toggle');
alert(res.data.nama);
} else {
alert("Ada Yang salah saat pengambilan data");
}
}
})
})
$('.btn-mod').click(function(){
let id = $(this).attr('id');
let template = `
{!! Form::open(['route'=>$route.'.store','method'=>'POST', 'id'=>'storeForm']) !!}
<div id="misi_field">
<input name="sasaran_rpjmd_id" type="hidden" value="${id}">
<div class="mb-3 row">
<label for="tahun" class="col-md-2 col-form-label">Tahun</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::text('tahun', $tahunDipilih,['class'=>'form-control','id'=>"tahun", 'readonly'=>true]) !!}
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Indikator Kinerja Utama</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::text('nama',null,['class'=>'form-control','id'=>"nama"]) !!}
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Kondisi Awal</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::text('kondisi_awal',null,['class'=>'form-control','id'=>"nama"]) !!}
</div>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::hidden('parameter',"-",['class'=>'form-control','id'=>"nama"]) !!}
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Satuan</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::text('satuan',null,['class'=>'form-control','id'=>"nama"]) !!}
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">SKPD Penanggung Jawab</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::select('induk_opd_id',$induk_opd_arr,"",['class'=>'form-control daerah', 'form'=>'storeForm','required'=>'required','placeholder'=>'Pilih SKPD', 'id'=>'induk_opd']) !!}
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Keterangan</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::text('keterangan',null,['class'=>'form-control','id'=>"nama"]) !!}
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Target Kerja</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::text('target_kerja',null,['class'=>'form-control','id'=>"nama"]) !!}
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Capaian Satu</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::text('capaian_satu',null,['class'=>'form-control','id'=>"nama"]) !!}
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Capaian Dua</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::text('capaian_dua',null,['class'=>'form-control','id'=>"nama"]) !!}
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Capaian Tiga</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::text('capaian_tiga',null,['class'=>'form-control','id'=>"nama"]) !!}
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Capaian Empat</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::text('capaian_empat',null,['class'=>'form-control','id'=>"nama"]) !!}
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Catatan</label>
</div>
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::textarea('catatan', null, ['class' => 'form-control', 'id' => 'nama']) !!}
</div>
</div>
</div>
`
$('.modal-body').html(template)
$('.modal').modal('toggle');
});
$(".modal").on("click", '#tambah_misi', function(){
let template = `
<div class="mb-3 row">
<div class="col-md-10">
{!! Form::text('nama[]',null,['class'=>'form-control','id'=>"nama"]) !!}
</div>
</div>
`
$("#misi_field").append(template);
})
</script>
@endpush
@endsection
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell