@extends('user.template')
@section('title',$title)
@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('content')
  
<div class="row">
    <div class="col-md-12 grid-margin">
      <div class="row">
        <div class="col-12 col-xl-8 mb-4 mb-xl-0">
          <h3 class="font-weight-bold">Kertas Kerja Strategis Opd</h3>
          <h6 class="font-weight-normal mb-0">{{$mr->pemda}}</h6>
        </div>
        <div class="col-12 col-xl-4">
         <div class="justify-content-end d-flex">
          <div class="flex-md-grow-1 flex-xl-grow-0">
          </div>
         </div>
        </div>
      </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 mb-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="{{route('user.dinas.terkait')}}">Dinas Terkait</a></li>
              <li class="breadcrumb-item"><a href="{{route('user.dinas.terkait.show', ['mr_id'=> $mr->id])}}">{{$mr->pemda}}</a></li>
              <li class="breadcrumb-item"><a href="{{route('user.dinas.terkait.dinas.show', ['mr_id'=> $mr->id, 'dinas_id'=> $dinas->id])}}">{{$dinas->entitas}}</a></li>
              <li class="breadcrumb-item active" aria-current="page">{{$title}}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row justify-content-md-center">
  <div class="col-sm-12">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title text-center mb-5">Kertas Kerja Strategis OPD <br> <small>{{$mr->pemda}}</small></h4>
        <table class="table table-sm">
            <tr>
                <td>Nama Pemda</td>
                <td><b>{{$mr->pemda}}</b></td>
            </tr>
            <tr>
              <td>Nama OPD</td>
              <td>{{$dinas->entitas}}</td>
            </tr>
            <tr>
                <td>Tahun Penilaian</td>
                <td><b>{{$mr->tahun}}</b></td>
            </tr>
            <tr>
                <td>Periode yang Dinilai</td>
                <td><b>{{$mr->periode}}</b></td>
            </tr>
            <tr>
              <td>Tujuan Strategis</td>
              <td>{{$konteks->tujuan}}</td>
            </tr>
            <tr>
                <td style="width: 200px">Urusan Pemerintahan</td>
                <td><b>{{$selectUrusan}}</b></td>
            </tr>
            <tr>
              <td>OPD yang dinilai</td>
              <td>{{$dinas->entitas}}</td>
            </tr>
            <tr>
                <td>Tujuan Strategis Pemerintah</td>
                <td>{{$konteks->tujuan}}</td>
            </tr>
            <tr>
                <td>Sasaran</td>
                <td>{{$konteks->sasaran}}</td>
            </tr>
        </table>

        <table class="table table-sm mt-4 table-bordered">
            <tr class="text-center">
                <td rowspan="2">No</td>
                <td rowspan="2">Indikator Kinerja</td>
                <td colspan="3">Risiko</td>
                <td colspan="2">Sebab</td>
                <td rowspan="2">C/UC</td>
                <td colspan="2">Dampak</td>
                <td rowspan="2">Action</td>
            </tr>
            <tr class="text-center">
                <td>Uraian</td>
                <td>Kode <br>Risiko</td>
                <td>Pemilik</td>
                <td>Uraian</td>
                <td>Sumber</td>
                <td>Uraian</td>
                <td>Pihak yang Terkena</td>
            </tr>
            @foreach ($kertasKerjas as $n=> $kk)
                <tr class="kertasKerja{{$kk->id}}">
                    <td class="text-center align-top">{{$n+1}}</td>
                    <td class="align-top">{{$kk->indikator_kinerja}}</td>
                    <td class="align-top">{{$kk->risiko_uraian}}</td>
                    <td class="align-top">{{$kk->risiko_kode}}</td>
                    <td class="align-top">{{$kk->risiko_pemilik}}</td>
                    <td class="align-top">
                      @if (count(json_decode($kk->sebab_uraian,true))> 1)
                      <ol>
                        @foreach (json_decode($kk->sebab_uraian,true) as $sebabUraian)
                          <li>{{$sebabUraian}}</li>
                        @endforeach
                      </ol>
                      @else 
                      {{json_decode($kk->sebab_uraian,true)[0]}}
                      @endif
                    </td>
                    <td class="align-top">{{$kk->sebab_sumber}}</td>
                    <td class="text-center align-top">{{$kk->c_or_uc}}</td>
                    <td class="align-top">
                      @if (count(json_decode($kk->dampak_uraian,true))> 1)
                      <ol>
                        @foreach (json_decode($kk->dampak_uraian,true) as $dampak)
                          <li>{{$dampak}}</li>
                        @endforeach
                      </ol>
                      @else 
                      {{json_decode($kk->dampak_uraian,true)[0]}}
                      @endif
                    </td>
                    <td class="align-top">{{$kk->dampak_pihak_terkena}}</td>
                    <td class="align-top">
                        <button  class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-name="Edit {{$title}}" data-ket="edit" href="#modalData" data-id="{{$kk->id}}" data-indikator_kinerja="{{$kk->indikator_kinerja}}" data-risiko_tahap="{{$kk->risiko_tahap}}" data-risiko_uraian="{{$kk->risiko_uraian}}" data-risiko_kode="{{$kk->risiko_kode}}" data-risiko_pemilik="{{$kk->risiko_pemilik}}" data-sebab_uraian="{{$kk->sebab_uraian}}" data-sebab_sumber="{{$kk->sebab_sumber}}" data-c_or_uc="{{$kk->c_or_uc}}" data-dampak_uraian="{{$kk->dampak_uraian}}" data-dampak_pihak_terkena="{{$kk->dampak_pihak_terkena}}"  >Edit</button>
                        <a class="btn btn-danger btn-sm" href="#" onclick="hapus('{{route('user.kertas.kerja.delete',['id'=>$kk->id])}}', 'kertasKerja{{$kk->id}}', 'Hapus {{$title}} ?')" >Hapus</a>
                    </td>
                </tr>
            @endforeach
            
        </table>
        <hr>
        <button  class="btn btn-success btn-block" data-toggle="modal" data-name="Tambah {{$title}} Baru" data-ket="tambah" href="#modalData">Buat {{$title}} Baru</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="modalData" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
            </div>
            <form method="post" id="formAction" class="form-horizontal"> @csrf
            <input type="hidden" name="konteks_id" value="{{$konteks->id}}">
            <input type="hidden" name="dinas_terkait_id" value="{{$dinas->id}}">
            <input type="hidden" name="menu" value="kk_strategis_opd">
            <div class="modal-body">
                <div id="inputHidden"></div>
                <div class="form-group">
                  <label for="indikator_kinerja">Indikator Kinerja</label>
                  <input type="text" name="indikator_kinerja" class="form-control" required id="indikator_kinerja" placeholder="Indikator Kinerja">
                </div>
                <div class="form-group">
                  <label for="risiko_uraian">Uraian Risiko</label>
                  <input type="text" name="risiko_uraian" class="form-control" required id="risiko_uraian" placeholder="Uraian Risiko">
                </div>
                <div class="form-group">
                  <label for="risiko_kode">Kode Risiko</label>
                  <input type="text" name="risiko_kode" class="form-control" required id="risiko_kode" placeholder="Kode Risiko">
                </div>
                <div class="form-group">
                  <label for="risiko_pemilik">Pemilik Risiko</label>
                  <input type="text" name="risiko_pemilik" class="form-control" required id="risiko_pemilik" placeholder="Pemilik Risiko">
                </div>
                <div class="form-group">
                  <label for="dampak_uraian">Sebab Uraian</label>
                  <div id="sebab_uraians">
                  </div>
                  <a href="#!" class="btn btn-sm btn-outline-success mt-2 btn-block" onclick="addInputText('#sebab_uraians','sebab_uraian','sebab_uraian[]','Sebab Uraian','')" style="border-radius: 5px">Tambah Sebab Uraian</a>
                </div>
                <div class="form-group">
                  <label for="sebab_sumber">Sumber Sebab</label>
                  <input type="text" name="sebab_sumber" class="form-control" required id="sebab_sumber" placeholder="Sumber Sebab">
                </div>
                <div class="form-group">
                  <label for="c_or_uc">C/UC</label>
                  <select name="c_or_uc" id="c_or_uc" class="form-control">
                    <option value="C" selected>C</option>
                    <option value="UC">UC</option>
                  </select>
                </div>
                
                <div class="form-group">
                  <label for="dampak_uraian">Dampak Uraian</label>
                  <div id="dampak_uraians">
                  </div>
                  <a href="#!" class="btn btn-sm btn-outline-success mt-2 btn-block" onclick="addInputText('#dampak_uraians','dampak_uraian','dampak_uraian[]','Dampak Uraian','')" style="border-radius: 5px">Tambah Dampak Uraian</a>
                </div>
                <div class="form-group">
                  <label for="dampak_pihak_terkena">Dampak Pihak Terkena</label>
                  <input type="text" name="dampak_pihak_terkena" class="form-control" required id="dampak_pihak_terkena" placeholder="Dampak Pihak Terkena">
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
            </div>
            </form>
        </div>
    </div>
  </div>
@endsection

@section('script')

<script src="{{asset('js/sweetalert2.js')}}"></script>
    
<script>

  function addInputText(roomId, id, name, menu, value = null) {
    var rand = Math.floor(Math.random()* (9999 - 1) + 1);
    var html = '<div id="ss'+rand+'"> <button type="button" class="close" onclick="removeInput(`ss'+rand+'`)" style="position: absolute; right: 30px;"> <span aria-hidden="true">&times;</span> </button><input type="text" class="form-control mb-1" id="'+id+'" name="'+name+'" value="'+value+'" placeholder="'+menu+'"></div>'
    $(roomId).append(html);
  }

  function removeInput(id) {
    console.log(id);
    $("#"+id).remove();
  }

  $('#modalData').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var name = button.data('name') 
      var ket = button.data('ket')
  
      var modal = $(this)
      modal.find('.modal-title').text(name)
  
      if (ket == 'tambah') {
          modal.find('#formAction').attr('action', "{{route('user.kertas.kerja.store')}}")
          modal.find('#inputHidden').html('')
  
          modal.find('#indikator_kinerja').val('')
          modal.find('#indikator_keluaran').val('')
          modal.find('#risiko_tahap').val('')
          modal.find('#risiko_uraian').val('')
          modal.find('#risiko_kode').val('')
          modal.find('#risiko_pemilik').val('')
          modal.find('#sebab_sumber').val('')
          modal.find('#c_or_uc').val('C')
          modal.find('#dampak_pihak_terkena').val('')
          $('#dampak_uraians').empty();
          addInputText('#dampak_uraians','dampak_uraian','dampak_uraian[]','Dampak Uraian','')
          $('#sebab_uraians').empty();
          addInputText('#sebab_uraians','sebab_uraian','sebab_uraian[]','Sebab Uraian','')

      }else{
          var id = button.data('id') 
  
          var dampakUraian = button.data('dampak_uraian');
          $('#dampak_uraians').empty();
          dampakUraian.forEach(element => {
            addInputText('#dampak_uraians','dampak_uraian','dampak_uraian[]','Dampak Uraian', element)
          });

          var SebabUraian = button.data('sebab_uraian');
          $('#sebab_uraians').empty();
          SebabUraian.forEach(element => {
            addInputText('#sebab_uraians','sebab_uraian','sebab_uraian[]','Sebab Uraian', element)
          });

          modal.find('#indikator_kinerja').val(button.data('indikator_kinerja'))
          modal.find('#indikator_keluaran').val(button.data('indikator_keluaran'))
          modal.find('#risiko_tahap').val(button.data('risiko_tahap'))
          modal.find('#risiko_uraian').val(button.data('risiko_uraian'))
          modal.find('#risiko_kode').val(button.data('risiko_kode'))
          modal.find('#risiko_pemilik').val(button.data('risiko_pemilik'))
          modal.find('#sebab_sumber').val(button.data('sebab_sumber'))
          modal.find('#c_or_uc').val(button.data('c_or_uc'))
          modal.find('#dampak_pihak_terkena').val(button.data('dampak_pihak_terkena'))

          modal.find('#inputHidden').html('<input type="hidden" name="id" value="'+id+'"><input type="hidden" name="_method" value="put">')
          modal.find('#formAction').attr('action', "{{route('user.kertas.kerja.update')}}")
  
      }
  })
</script>
@endsection