@extends('layouts.main')
@section('title', 'Assessment RCSA')
@section('content')
<!-- push external head elements to head -->
@push('head')
<link rel="stylesheet" href="{{ asset('plugins/select2/dist/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/summernote/dist/summernote-bs4.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/mohithg-switchery/dist/switchery.min.css') }}">
<style>
.line-none td{
border:none;
}
td{
width:50%;
}
</style>
<script src="{{ asset('src/js/vendor/jquery-3.3.1.min.js') }}"></script>
@endpush
<div class="container-fluid">
@include('include.switchery')
<div class="row">
<div class="col-md-12" id="formIdentifikasi">
<form id="formRcsa">
@csrf
<div class="card">
<div class="card-header"><h3 class="m-auto font-weight-bold">{{ __('Indentifikasi')}}</h3></div>
<div class="card-body">
<input name="_token" type="hidden" value="{!! csrf_token() !!}">
<table class="table line-none">
<tr>
<td><label for="">{{ __('Unit Bisnis')}} </label><br></td>
<td><p class="font-weight-bold" id="unitBisnis">Manager Angkutan Barang</p></td>
</tr>
<tr>
<td><label for="">{{ __('Indikator Kinerja Korporate')}}</label></td>
<td>
<select class="form-control select2" multiple="multiple" id="ikKorporate">
<option value="1">{{ __('Dummy 1')}}</option>
<option value="2">{{ __('Dummy 2')}}</option>
</select>
</td>
</tr>
<tr>
<td><label for="">{{ __('Indikator Kinerja Unit')}}</label></td>
<td>
<select class="form-control select2" multiple="multiple" id="ikUnit">
<option value="">{{ __('Dummy 1')}}</option>
<option value="">{{ __('Dummy 2')}}</option>
</select>
</td>
</tr>
<tr>
<td><label for="">{{ __('Kode Risiko')}}</label></td>
<td><p class="font-weight-bold" id="kodeRisiko">Kode Risiko Muncul Otomatis</p></td>
</tr>
<tr>
<td><label for="">{{ __('Uraian Kejadian')}}</label></td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="uraianKejadian">
</div>
</td>
</tr>
<tr>
<td><label for="">{{ __('Kategori Risiko')}}</label></td>
<td>
<select class="form-control" id="kategoriRisiko">
<option value="" selected disabled>{{ __('--Selection--')}}</option>
@foreach($kr as $kr_row)
<option value="{{ $kr_row->parent }}">{{ $kr_row->name }}</option>
@endforeach
</select>
</td>
</tr>
<tr>
<td><label for="" class="ml-3">{{ __('Sub Kategori')}}</label></td>
<td>
<select class="form-control" id="subKategoriRisiko">
</select>
</td>
</tr>
<tr>
<td><label for="">{{ __('Uraian Penyebab')}}</label></td>
<td>
<form class="form-inline repeater" id="inputRepeater">
<div data-repeater-list="group-a">
<div data-repeater-item>
<div class="form-group mb-2 multiisi">
<div class="input-group mb-3 ">
<input type="text" class="form-control" onkeyup="updateMitigasi(this)" id="uraianPenyebab" name="uraianPenyebab[]">
</div>
</div>
<button data-repeater-delete type="button" class="btn btn-danger btn-icon mb-2 float-right" id="removeMitigasi"><i class="ik ik-trash-2"></i></button>
</div>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button data-repeater-create type="button" class="btn btn-info" id="addMitigasi"><i class="fa fa-plus"></i></button>
<button type="button" class="btn btn-secondary" id="openMitigasi"><i class="ik ik-file-text"></i></button>
</div>
</form>
</td>
</tr>
<tr>
<td><label for="">{{ __('Indikator Risiko')}}</label></td>
<td>
<div class="form-group">
<input type="text" class="form-control multi-input" id="indikatorRisiko">
</div>
</td>
</tr>
<tr>
<td><label for="">{{ __('Kontrol Eksisting')}}</label></td>
<td>
<div class="form-group">
<input type="text" class="form-control multi-input">
</div>
</td>
</tr>
<tr>
<td><label for="">{{ __('Kategori Dampak')}}</label></td>
<td>
<select class="form-control" id="kategoriDampak">
<option value="" selected disabled>{{ __('--Selection--')}}</option>
@foreach($kd as $kd_row)
<option value="{{ $kd_row->parent }}">{{ $kd_row->name }}</option>
@endforeach
</select>
</td>
</tr>
<tr>
<td><label for="" class="ml-3">{{ __('Sub Kategori Dampak')}}</label></td>
<td>
<select class="form-control" id="subKategoriDampak">
</select>
</td>
</tr>
<tr>
<td><label for="" class="ml-3">{{ __('Uraian Dampak')}}</label></td>
<td>
<div class="form-group">
<input type="text" class="form-control multi-input" id="uraianDampak">
</div>
</td>
</tr>
</table>
</div>
<hr><p class="m-auto font-weight-bold" style="font-size: 18px;">{{ __('Penilaian Risiko')}}</p><hr>
<div class="card-body">
<table class="table line-none">
<tr>
<td><label for="">{{ __('Kemungkinan (Inherent)')}} </label></td>
<td>
<select class="form-control" id="kemungkinan" name="kemungkinan">
<option value="" selected disabled>{{ __('--Pilihan--')}}</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr>
<td><label for="">{{ __('Dampak (Inherent)')}} </label></td>
<td>
<select class="form-control" id="dampak" name="dampak">
<option value="" selected disabled>{{ __('--Pilihan--')}}</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr>
<td><label for="">{{ __('Nilai Risiko (Inherent)')}} </label><br></td>
<td></td>
</tr>
<tr>
<td><label for="">{{ __('Level Risiko (Inherent)')}} </label><br></td>
<td><p class="font-weight-bold" id="level">Level Risiko</p></td>
</tr>
</table>
</div>
<hr><p class="m-auto font-weight-bold" style="font-size: 18px;">{{ __('Mitigasi Risiko')}}</p><hr>
<div class="card-body" id="bodyMitigasi">
<table class="table line-none" id="formMitigasi">
<tr>
<td><label for="">{{ __('Uraian Penyebab')}}</label><label class="ml-2 font-weight-bold" id="uraianPenyebabMitigasi" name="uraianPenyebabMitigasi[]"></label></td>
<td></td>
</tr>
<tr>
<td><label for="">{{ __('Jenis Mitigasi')}}</label></td>
<td>
<select class="form-control w-100" name="jenisMitigasi[]">
<option value="" selected disabled>{{ __('--Selection--')}}</option>
@foreach($jm as $jm_row)
<option value="{{ $jm_row->id }}">{{ $jm_row->name }}</option>
@endforeach
</select>
</td>
</tr>
<tr>
<td><label for="">{{ __('Tindakan Mitigasi')}}</label></td>
<td>
<select class="form-control w-100" name="tindakanMitigasi[]">
<option value="" selected disabled>{{ __('--Selection--')}}</option>
@foreach($tm as $tm_row)
<option value="{{ $tm_row->id }}">{{ $tm_row->name }}</option>
@endforeach
</select>
</td>
</tr>
<tr>
<td><label for="">{{ __('Uraian Mitigasi')}}</label></td>
<td>
<div class="form-group">
<input type="text" class="form-control" name="uraianMitigasi[]">
</div>
</td>
</tr>
<tr>
<td><label for="">{{ __('Penanggung Jawab (PIC)')}}</label></td>
<td>
<div class="form-group">
<input type="text" class="form-control" name="pic[]">
</div>
</td>
</tr>
<tr>
<td><label for="">{{ __('Target Waktu Realisasi')}}</label></td>
<td>
<div class="input-group">
<input type="date" class="form-control" name="targetWaktu[]" required>
<span class="input-group-append">
<label class="input-group-text"><i class="ik ik-calendar"></i></label>
</span>
</div>
</td>
</tr>
<tr>
<td><label for="">{{ __('Rencana Output Realisasi Mitigasi')}}</label></td>
<td>
<div class="form-group">
<input type="text" class="form-control" name="output[]">
</div>
</td>
</tr>
<tr>
<td><label for="">{{ __('Kemungkinan (Expected Residual)')}} </label></td>
<td>
<select class="form-control" id="kemungkinanMitigasi" name="kemungkinanMitigasi[]" required>
<option value="" selected disabled>{{ __('--Pilihan--')}}</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr>
<td><label for="">{{ __('Dampak (Expected Residual)')}} </label></td>
<td>
<select class="form-control" id="dampakMitigasi" name="dampakMitigasi[]" required>
<option value="" selected disabled>{{ __('--Pilihan--')}}</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr>
<td><label for="">{{ __('Nilai Risiko (Expected Residual)')}} </label></td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="nilaiMitigasi" name="nilaiMitigasi[]" value="65" readonly>
</div>
</td>
</tr>
<tr>
<td><label for="">{{ __('Level Risiko (Expected Residual)')}} </label></td>
<td>
<div class="form-group">
<input type="text" class="form-control" id="levelMitigasi" name="levelMitigasi[]" value="Medium" readonly>
</div>
</td>
</tr>
</table>
</div>
<div class="card-footer" style="border: none;"><hr>
<button class="btn btn-primary float-right" id="submit">{{ __('Submit')}} <i class="fa fa-paper-plane text-white ml-2"></i></button>
<button class="btn btn-info float-right mr-2" id="save">{{ __('Save')}} <i class="fa fa-save text-white ml-2"></i></button>
<button class="btn btn-secondary float-right mr-2" id="cancel">{{ __('Cancel')}} <i class="fa fa-times text-white ml-2"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- push external js -->
@push('script')
<script>
$(function() {
//Get Kategori Risiko
$('#kategoriRisiko').change(function(){
var getKR = $('#kategoriRisiko').val();
route_kr = '{!! route('assessment.getKategoriRisiko','0') !!}';
if(getKR) {
$.ajax({
url: route_kr+getKR,
type: "GET",
dataType: "json",
success:function(data) {
$('#subKategoriRisiko').empty();
$.each(data, function(key, value) {
$('#subKategoriRisiko').append("<option value='" + key + "'>" + value + "</option>");
});
},error:function(){
console.log(response);
}
});
}else{
$('#subKategoriRisiko').empty();
}
});
//Get Kategori Dampak
$('#kategoriDampak').change(function(){
var getKD = $('#kategoriDampak').val();
route_kd = '{!! route('assessment.getKategoriDampak','0') !!}';
if(getKD) {
$.ajax({
url: route_kd+getKD,
type: "GET",
dataType: "json",
success:function(data) {
$('#subKategoriDampak').empty();
$.each(data, function(key, value) {
$('#subKategoriDampak').append("<option value='" + key + "'>" + value + "</option>");
});
},error:function(){
console.log(response);
}
});
}else{
$('#subKategoriDampak').empty();
}
});
$("#addMitigasi").click(function(){
// get the last DIV which ID starts with ^= "formMitigasi"
let $mitigasi = $('table[id^="formMitigasi"]:last');
// And increment that number by 1
let num = (parseInt( $mitigasi.prop("id").match(/\d+/g), 10 ) || 0 )+1;
// Clone it and assign the new ID
let $klon = $mitigasi.clone().appendTo('#bodyMitigasi').prop('id', 'formMitigasi'+num );
// get the last DIV which ID starts with ^= "uraianPenyebab"
let $uraian = $('input[id^="uraianPenyebab"]:last');
// And increment that number by 1
num = (parseInt( $uraian.prop("id").match(/\d+/g), 10 ) || 0 )+1;
// Clone it and assign the new ID
$klon = $uraian.clone().appendTo('.multiisi').prop('id', 'uraianPenyebab'+num );
});
$('#submit').click(function(){
//var form = $('#inputRepeater').serialize().split('&');
var dataRcsa = $('#formRcsa').serialize();
CSRF_TOKEN = $('input[name="_token"]').attr('value');
up = [], jenis = [], tindakan = [], um = [], pic = [],
target = [], output = [], kemungkinan = [], dampak = [],
nilai = [], level = [];
$('label[name="uraianPenyebabMitigasi[]"]').each(function(){
up.push(this.text);
});
$('select[name="jenisMitigasi[]"]').each(function(){
jenis.push(this.value);
});
$('select[name="tindakanMitigasi[]"]').each(function(){
tindakan.push(this.value);
});
$('input[name="uraianMitigasi[]"]').each(function(){
um.push(this.value);
});
$('input[name="pic[]"]').each(function(){
pic.push(this.value);
});
$('input[name="targetWaktu[]"]').each(function(){
target.push(this.value);
});
$('input[name="output[]"]').each(function(){
output.push(this.value);
});
$('select[name="kemungkinanMitigasi[]"]').each(function(){
kemungkinan.push(this.value);
});
$('select[name="dampakMitigasi[]"]').each(function(){
dampak.push(this.value);
});
$('input[name="nilaiMitigasi[]"]').each(function(){
nilai.push(this.value);
});
$('input[name="levelMitigasi[]"]').each(function(){
level.push(this.value);
});
$.ajax({
type: 'POST',
url:'{!! route('assessment.mitigasiStore') !!}',
data: { '_token' : CSRF_TOKEN,
'name' : up, 'description' : um, 'type' : jenis,
'action' : tindakan, 'pic' : pic,
'time_target' : target, 'output_plan' : output,
'expected_possibility' : kemungkinan,
'expected_impact' : dampak, 'expected_risk_value' : nilai,
'expected_level' : level
},
success: function(response){
alert('Success');
}
});
});
});
function updateMitigasi(element){
// get id from current selection
let num = (parseInt( $(element).prop("id").match(/\d+/g), 10 ) || '');
// find form mitigasi by id prefix
let $mitigasi_form = $( ('#formMitigasi' + num) ) ;
// find label and update text
$( $($mitigasi_form).find('label')[1] ).text($(element).val());
};
</script>
<script src="{{ asset('plugins/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
<script src="{{ asset('plugins/summernote/dist/summernote-bs4.min.js') }}"></script>
<script src="{{ asset('plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js') }}"></script>
<script src="{{ asset('plugins/jquery.repeater/jquery.repeater.min.js') }}"></script>
<script src="{{ asset('plugins/mohithg-switchery/dist/switchery.min.js') }}"></script>
<script src="{{ asset('js/form-advanced.js') }}"></script>
@endpush
@endsection
Comments