@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