@extends('layouts.main')
@section('content')
@push('head')
    <title>{{ __('System Settings')}} | {{ __('PT KAI ERMS')}}</title>
    <link rel="stylesheet" href="{{ asset('plugins/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/jquery-minicolors/jquery.minicolors.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.min.css') }}">
 
    <link rel="stylesheet" href="{{ asset('plugins/jquery-ui/jquery-ui.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2/dist/css/select2.min.css') }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <style>
        .kriteria1 {
          background-color: rgb(0,173,0);
        }
        .kriteria2 {
          background-color: rgb(245,256,0);
        }
        .kriteria3 {
          background-color: rgb(203,0,0);
        }
        .kriteria4 {
          background-color: rgb(150,0,0);
        }
        body {
          margin-top: 40px;
          margin-left: 40px;
        }
        table {
        border: none;
        }
 
        .vertical {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 5px;
 
            position: absolute;
            bottom: 0;
            left: 0;
            margin-left: 150px;
            margin-bottom: 120px;
 
            transform-origin: 0 0;
            transform: rotate(270deg);
        }
 
        .horizontal {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 5px;
            padding-top: 50px;
            text-align: center;
        }
 
    </style>
@endpush
 
<div class="col-md-12">
    <div class="card card-primary card-tabs">
        @include('include.tab-erm')
        <div class="card-body">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="form-inline">
                            <label for="">Skala Penilaian Risiko :</label>
                            <select class="form-control ml-3" name="skala" id="skala" style="width:60px;">
                                <option value="" selected disabled></option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                            </select>
                            <!-- <label for="" class="pl-3">Dari Tanggal :</label>
                            <input type="date" class="form-control ml-2">
                            <label for="" class="pl-3">Sampai Tanggal :</label>
                            <input type="date" class="form-control ml-2"> -->
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                                <div class="col-md-4">
                                    <table class="mx-auto" id="tblMain" border="1">
                                        @php
                                            $criteria = App\Models\Criteria::all();
                                        @endphp

                                        @foreach ($criteria as $item)
                                        <tr>
                                            @php
                                                $matrix = json_decode( $item->matrix ,);
                                                // dd( $item->matrix,$matrix );
                                            @endphp

                                            @foreach ($matrix as $key => $value)
                                        <td id="box1" class="m-2" width="120" height="120" style="text-align:center;background:{{$value->color}}">{{ $value->level }}</td>
                                            @endforeach

                                        </tr>
                                        @endforeach
                                        
                                    <label for="" class="float-left">Kemungkinan :</label><br/>
                                    <ol class="pl-3 pt-2" id="formKemungkinan">
                                        <li>
                                            <div class="form-group ml-2">
                                                <input type="text" class="form-control" placeholder="Pilih skala dahulu..." readonly>
                                            </div>
                                        </li>
                                    </ol>
                                </div>
 
                                <div class="col-md-4">
                                    <label for="" class="float-left">Dampak :</label><br/>
                                    <ol class="pl-3 pt-2" id="formDampak">
                                        <li>
                                            <div class="form-group ml-2">
                                                <input type="text" class="form-control" placeholder="Pilih skala dahulu..." readonly>
                                            </div>
                                        </li>
                                    </ol>
                                </div>
 
                                <div class="col-md-4">
                                    <label for="" class="float-left">Level Resiko :</label><br/>
                                    <ol class="pl-3 pt-2" id="levelRisiko">
                                    </ol>
                                    <button type="button" class="btn btn-danger float-right" id="removeLevel"><i class="ik ik-trash-2"></i></button>
                                    <button class="btn btn-primary" style="margin-left: 25px;" data-toggle="modal" data-target="#modalLevel" id="btnLevel"><i class="fa fa-plus"></i></button>
                                </div>
                            <!-- <table id="myHeade" border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                    <tr>
                                        <td>
                                            <p>Dampak (Picklist RCSA 7)</p>
                                        </td>
                                        <td>
                                            <p>Kemungkinan (Picklist RCSA 8)</p>
                                        </td>
                                        <td>
                                            <p>Level Resiko</p>
                                        </td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tboddy>
                                    <tr>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">1</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Minor" aria-label="Minor" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">1</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Hampir Tidak Mungkin" aria-label="Hampir Tidak Mungkin" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group mb-3">
                                                <p id="p1" onclick="q1Function()" style="color:#FFFFFF"; class="form-control kriteria1">Rendah</p>
                                            </div>
                                        </td>
                                        <td>
                                            &nbsp;&nbsp;&nbsp;<p id="q1" class="form-control"></p>&nbsp;&nbsp;&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">2</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Kurang Signifikan" aria-label="Kurang Signifikan" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">2</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Kemungkinan Sangat Kecil" aria-label="Kemungkinan Sangat Kecil" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group mb-3">
                                                <p id="p2" onclick="q2Function()" style="color:#000000"; class="form-control kriteria2">Sedang</p>
                                            </div>
                                        </td>
                                        <td>
                                            &nbsp;&nbsp;&nbsp;<p id="q2" class="form-control"></p>&nbsp;&nbsp;&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">3</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Sedang" aria-label="Sedang" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">3</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Kemungkinan Kecil" aria-label="Kemungkinan Kecil" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group mb-3">
                                                <p id="p3" onclick="q3Function()" style="color:#FFFFFF"; class="form-control kriteria3">Tinggi</p>
                                            </div>
                                        </td>
                                        <td>
                                            &nbsp;&nbsp;&nbsp;<p id="q3" class="form-control"></p>&nbsp;&nbsp;&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">4</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Signifikan" aria-label="Signifikan" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">4</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Kemungkinan Besar" aria-label="Kemungkinan Besar" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group mb-3">
                                                <p id="p4" onclick="q4Function()" style="color:#FFFFFF"; class="form-control kriteria4">Extreme</p>
                                            </div>
                                        </td>
                                        <td>
                                                &nbsp;&nbsp;&nbsp;<p id="q4" class="form-control"></p>&nbsp;&nbsp;&nbsp;
                                        </td>
                                        <td>
                                            <div class="input-group mb-3">
                                                <button class="form-control">
                                                    <i class="fa fa-plus"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">5</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Sangat Signifikan" aria-label="Sangat Signifikan" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">5</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Kemungkinan Sangat Besar" aria-label="Kemungkinan Sangat Besar" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">6</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Extreme" aria-label="Extreme" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">6</span>
                                                </div>
                                                <input type="text" size="28" class="form-control" placeholder="Hampir Pasti" aria-label="Hampir Pasti" aria-describedby="basic-addon1">
                                            </div>
                                        </td>
                                        <td>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        </td>
                                    </tr>
                                </tboddy>
                            </table> -->
                        </div>
                    </div>
 
                    <div class="card-body">
                        <div class="row">                                            
                            <!-- <p id="matrix"> -->
                            <div class="col-md-12">
                                <h3 class="vertical">KEMUNGKINAN (LIKELIHOOD)</h3>
 
 
                                <table class="mx-auto" id="tblMain" border="1">
                                    <tbody>
                                        <tr>
                                            <td width="75" height="75" style="text-align:center">NULL</td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                        </tr>
                                        <tr>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                        </tr>
                                        <tr>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                        </tr>
                                        <tr>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                        </tr>
                                        <tr>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                        </tr>
                                        <tr>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                            <td width="75" height="75" style="text-align:center"></td>
                                        </tr>
                                    </tbody>
                                </table>
 
                                <h3 class="horizontal">DAMPAK (IMPACT)</h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div>
                            <button type="button" class="btn btn-primary float-right">Simpan</button>
                            <button onclick="resetTbl()" type="button" class="btn btn-secondary float-right mr-2">Reset</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<!-- Modal -->
<div class="modal fade" id="modalLevel" role="dialog">
    <div class="modal-dialog">
 
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Tambah Level</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
        <label for="" class="float-left">Level Risiko :</label><br>
        <input type="text" id="level" class="form-control" value=""><br>
        <label for="" class="float-left">Warna Level Risiko :</label><br>
        <input type="hidden" id="warna" class="demo" value="#27d187">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
          <button type="button" onclick="tambahLevel(this)" class="btn btn-primary" data-dismiss="modal">Tambah</button>
        </div>
      </div>
 
    </div>
  </div>
 
@push('script')
 
    <script>
        function resetTbl() {                                                           
            document.getElementById("q1").innerHTML = "";
            document.getElementById("q2").innerHTML = "";
            document.getElementById("q3").innerHTML = "";
            document.getElementById("q4").innerHTML = "";
            var tbl = document.getElementById("tblMain");
                if (tbl != null) {
                for (var i = 0; i < tbl.rows.length; i++) {
                        for (var j = 0; j < tbl.rows[i].cells.length; j++) {
                        var prow = j + 1;
                        var pcol = i + 1;
                        tbl.rows[i].cells[j].innerHTML = prow.toString() + pcol.toString();
                        tbl.rows[i].cells[j].style.backgroundColor = "#FFFFFF"
                        tbl.rows[i].cells[j].style.color = "black";
                    }
                }                                                               
            }                                                           
        }
    </script>
 
    <script>
      var tbl = document.getElementById("tblMain");
      if (tbl != null) {
          for (var i = 0; i < tbl.rows.length; i++) {
              for (var j = 0; j < tbl.rows[i].cells.length; j++)
                  tbl.rows[i].cells[j].onclick = function () { getval(this); };
          }
      }
 
      function getval(cel) {
        //   alert(cel.innerHTML);
          if (document.getElementById("q1").innerHTML == "√") {
            cel.innerHTML = "Rendah";
            cel.style.color = "#FFFFFF";
            cel.style.backgroundColor = "rgb(0,173,0)";
          }
          else if (document.getElementById("q2").innerHTML == "√") {
            // alert(cel.innerHTML);
            cel.style.color = "#000000";
            cel.innerHTML = "Sedang";
            cel.style.backgroundColor = "rgb(245,256,0)";
          }
          else if (document.getElementById("q3").innerHTML == "√") {
            // alert(cel.innerHTML);
            cel.style.color = "#FFFFFF";
            cel.innerHTML = "Tinggi";
            cel.style.backgroundColor = "rgb(203,0,0)";
          }
          else if (document.getElementById("q4").innerHTML == "√") {
            // alert(cel.innerHTML);
            cel.style.color = "#FFFFFF";
            cel.innerHTML = "Extreme";
            cel.style.backgroundColor = "rgb(150,0,0)";
          }
      }
    </script>
 
    <script>
        function q1Function(element) {
          $('#w1').addClass('bg-primary');
        }
        function q2Function() {
          document.getElementById("q1").innerHTML = "";
          document.getElementById("q2").innerHTML = "";
          document.getElementById("q3").innerHTML = "";
          document.getElementById("q4").innerHTML = "";
          document.getElementById("q2").innerHTML = "√";
        }
        function q3Function() {
          document.getElementById("q1").innerHTML = "";
          document.getElementById("q2").innerHTML = "";
          document.getElementById("q3").innerHTML = "";
          document.getElementById("q4").innerHTML = "";
          document.getElementById("q3").innerHTML = "√";
        }
        function q4Function() {
          document.getElementById("q1").innerHTML = "";
          document.getElementById("q2").innerHTML = "";
          document.getElementById("q3").innerHTML = "";
          document.getElementById("q4").innerHTML = "";
          document.getElementById("q4").innerHTML = "√";
        }
    </script>
 
    <script>
        $(function(){
            $("#btnLevel").hide();
            $("#removeLevel").hide();
            $('#skala').click(function(){
                var skala = $('#skala').val();
                $("#btnLevel").show();
                $("#formKemungkinan").empty();
                $("#formDampak").empty();
                $("#tblMain").empty();
 
                var i;
                var b;
                for(i = 1; i <= skala; i++){
                    $("#formKemungkinan").append("<li class='mb-2'><div class='form-group ml-2'><input type='text' class='form-control' name='kemungkinan[]' id='kemungkinan" + i +"'></div></li>");
                    $("#formDampak").append("<li class='mb-2'><div class='form-group ml-2'><input type='text' class='form-control' name='dampak[]' id='dampak" + i +"'></div></li>");
                    $("#tblMain").append("<tr>");
                    for(b = 1; b <=skala; b++){
                        if(skala == 4){
                            $("#tblMain").append("<td id='box"+ b +"' class='bg-secondary m-2' width='120' height='120' style='text-align:center'></td>");
                        }else if(skala == 5){
                            $("#tblMain").append("<td id='box"+ b +"' class='bg-secondary m-2' width='100' height='100' style='text-align:center'></td>");
                        }else{
                            $("#tblMain").append("<td id='box"+ b +"' class='bg-secondary m-2' width='80' height='80' style='text-align:center'></td>");
                        }
 
                    }
                    $("#tblMain").append("</tr>");
                }
 
            });
        });
    </script>
 
    <script>
       function tambahLevel(element) {
 
                var level = $('#level').val();
                var warna = $('#warna').val();
                var skala = $('#skala').val();
                var notFind = $("#levelRisiko").not($('input[name^="fieldLevel[]"]'));
 
                if(notFind){
 
                    $("#levelRisiko").append("<li class='mb-3'><input type='text' class='form-control text-center text-white font-weight-bold ml-2'  style='background-color:"+ warna +";' id='fieldLevel' name='fieldLevel[]' value='"+ level +"' readonly></li>");
 
                }else{
 
                    var li = $('input[name^="fieldLevel[]"]').length;
 
                    console.log(li);
 
                    if(li < skala){
                    var last = $('input[id^="fieldLevel"]:last');
 
                    var num = (parseInt(last.prop("id").match(/\d+/g), 10 ) || 0 )+1;
 
                    //$("#levelRisiko").append("<li class='mb-2'><input type='text' class='form-control ml-2'  style='background-color:"+ warna +";' name='fieldLevel[]' value='"+ level +"' readonly></li>");
 
                    var newLevel = last.appendTo('#levelRisiko').prop('id', 'fieldLevel'+num );
 
                    }else{
                        alert('Jumlah level risiko sudah maksimal.');
                    }
                }
 
        }
    </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/moment/moment.js') }}"></script>
    <script src="{{ asset('plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') }}"></script>
    <script src="{{ asset('plugins/jquery-minicolors/jquery.minicolors.min.js') }}"></script>
    <script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script>
    <script src="{{ asset('js/form-picker.js') }}"></script>
 
@endpush
 
@endsection