@extends('dinas.template')
@section('title','PENETAPAN KONTEKS RISIKO STRATEGIS PEMDA')
@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
  tr>td{
    padding: 5px;
  }
  tr>th{
    padding: 5px;
  }
  .i-mini{
    font-size: 8px
  }
  .btn-mini{
    padding: 3px;
  }
  .px8{
    font-size: 8px;
  }

  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) { overflow-y: visible !important; }
  html.swal2-shown,
body.swal2-shown {
  overflow-y: auto !important;
}
</style>
@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">{{$strategis->dinas}}</h3>
          <h6 class="font-weight-normal mb-0">{{$strategis->periode}}</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">
            <a href="{{route('dinas.konteks.strategis.opd.review',['dinas_terkait_id'=>$strategis->dinas_terkait_id])}}" class="btn btn-danger btn-sm">
              <i class="icon-layout mx-0"></i>
              Review
            </a>
          </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('dinas.mr.show',['id'=>$strategis->mr_id])}}">Menejemen Risiko</a></li>
              <li class="breadcrumb-item active" aria-current="page">Konteks Strategis OPD</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row justify-content-md-center">
  <div class="col-sm-8">
    <div class="card bg-info mb-4">
      <div class="card-body text-white ">
        <i class="mdi mdi-information-outline" style=" float: left; font-size: 40px; padding-right: 20px;"></i>
        Hati hati dalam mengedit atau menghapus tujuan maupun sasaran, karena akan berdampak pada form lainnya.
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <form action="{{route('dinas.konteks.strategis.opd.update',['strategis_id'=> $strategis->id])}}" method="post" >@method('put') @csrf
        <table class="display  btn-sm table-bordered" style="width:100%; border: none">
          <tr><td colspan="5" style="border: none; text-align: center"><b>PENETAPAN KONTEKS RISIKO STRATEGIS PEMDA</b></td></tr>
            <tr><td style="border: none" colspan="5">&nbsp;</td></tr>
            <tr>
              <th style="border: none">Nama Pemda</th>
              <td style="border: none" colspan="3">{{$strategis->pemda}}</td>
            </tr>
            <tr>
              <th style="border: none">Tahun Penilaian</th>
              <td style="border: none" colspan="3">{{$strategis->tahun}}</td>
            </tr>
            <tr>
              <th style="border: none">Urusan Pemerintahan</th>
              <td style="border: none" colspan="3">{{$strategis->urusan_pemerintahan}}</td>
            </tr>
            <tr>
              <th style="border: none">Periode</th>
              <td style="border: none" colspan="3">{{$strategis->periode}}</td>
            </tr>
            <tr>
              <th style="border: none">OPD yang Dinilai</th>
              <td style="border: none" colspan="3">{{$strategis->dinas}}</td>
            </tr>
            <tr><td style="border: none" colspan="5">&nbsp;</td></tr>
            <tr>
              <th>Sumber Data</th>
              <td colspan="3">
                <input type="text" class="form-control form-control-sm" id="sumber_data" name="sumber_data" placeholder="Sumber Data" value="{{$strategis->sumber_data ?? NULL}}">
              </td>
            </tr>
            <tr>
              <th>Tujuan Strategis</th>
              <td colspan="3"><a data-toggle="modal"  href="#modalData" data-name="Tambah Data Tujuan Strategis" data-ket="tambahTujuan" class="btn btn-sm btn-outline-success"> Tambah Tujuan Strategis</a></td>
            </tr>
              @foreach ($dinasTerkaitTujuans as $nt => $tujuan)
                  <tr class="tujuan{{$tujuan->id}}">
                    <td></td>
                    <td colspan="3">
                      {{$tujuan->tujuan}}
                      <div class="float-right">
                      <a class="btn btn-outline-info btn-sm" data-toggle="modal"  href="#modalData" data-id="{{$tujuan->id}}" data-tujuan={{$tujuan->tujuan}}  data-name="Update Tujuan" data-ket="updateTujuan">Edit</a>
                      <a class="btn btn-outline-danger btn-sm" href="#" onclick="hapus('{{route('dinas.tujuan.delete',['id'=>$tujuan->id])}}', 'tujuan{{$tujuan->id}}', 'Cee Data Dihapus')" >Hapus</a>
                    </div></td>
                  </tr>
              @endforeach
            <tr>
              <th>Sasaran Strategis</th>
              <td colspan="3"><a data-toggle="modal"  href="#modalData" data-name="Tambah Data Sasaran Strategis" data-ket="tambahSasaran" class="btn btn-sm btn-outline-success"> Tambah Sasaran Strategis</a></td>
            </tr>
            @foreach ($dinasTerkaitSasarans as $nt => $sasaran)
                  <tr class="sasaran{{$sasaran->id}}">
                    <td></td>
                    <td colspan="3">
                      {{$sasaran->sasaran}}
                      <div class="float-right">
                      <a class="btn btn-outline-info btn-sm" data-toggle="modal"  href="#modalData" data-id="{{$sasaran->id}}" data-sasaran={{$sasaran->sasaran}}  data-name="Update Sasaran" data-ket="updateSasaran">Edit</a>
                      <a class="btn btn-outline-danger btn-sm" href="#" onclick="hapus('{{route('dinas.sasaran.delete',['id'=>$sasaran->id])}}', 'sasaran{{$sasaran->id}}', 'Cee Data Dihapus')" >Hapus</a>
                    </div></td>
                  </tr>
              @endforeach
            <tr class="text-center">
              <th class="text-left">IKU Renstra OPD</th>
              <th>Iku</th>
              <th style="width: 100px">{{date('Y')}}</th>
              <td style="width: 35px">
              </td>
            </tr>
            <tbody id="roomRenstra">
              @if ($iku['iku'] != null)
              @for ($i = 0; $i < count($iku['iku']); $i++)
              <tr class="text-center" id="is{{$i}}">
                <th class="text-left"></th> 
                <td class="text-left">
                  <input type="text" class="form-control form-control-sm" value="{{$iku['iku'][$i] ?? ''}}" name="resntra_iku[]">
                </td> 
                <td style="width: 100px">
                  <input type="text" class="form-control form-control-sm" value="{{$iku['target'][$i] ?? ''}}" name="target[]">
                </td> 
                <td style="width: 35px"> 
                  <a href="#!" onclick="removeInput(`is{{$i}}`)" class="btn btn-outline-danger btn-sm btn-mini"><i class="ti-close"></i></a> 
                </td>
              </tr>
              @endfor
              @endif
            </tbody>
            <tr class="text-center" id="rt">
              <th class="text-left"></th>
              <td class="text-left"><input type="text" class="form-control form-control-sm" id="resentaIkuData" placeholder="Tambah Iku Baru"></td>
              <td class="text-left"><input type="text" class="form-control form-control-sm" id="resentaTargetData" placeholder="Tambah Iku Target Baru" ></td>
              <td style="width: 35px">
                <a href="#!" class="simpan btn btn-outline-info btn-sm btn-mini" onclick="addRenstra()" data-toggle="tooltip" data-placement="right" title="Simpan">
                  <i class="ti-save"></i>
                </a>
              </td>
            </tr>
            <tr>
              <th>Informasi Lain</th>
              <td colspan="3"></td>
            </tr>
            <tbody id="roomInformasiLain">
              @if ($info['judul'] != null)
              @for ($l = 0; $l < count($info['judul']); $l++)
              <tr id="il{{$l}}">
                <th> 
                  <input type="text" class="form-control form-control-sm" name="judulInformasi[]" placeholder="Judul Informasi" value="{{$info['judul'][$l] ?? ''}}"> 
                </th> 
                <td colspan="2"> 
                  <input type="text" class="form-control form-control-sm" name="isiInformasi[]" placeholder="Isi Informasi" value="{{$info['isi'][$l] ?? ''}}"> 
                </td> 
                <td style="width: 35px">  
                  <a href="#!" onclick="removeInput(`il{{$l}}`)" class="btn btn-outline-danger btn-sm btn-mini"><i class="ti-close"></i></a> 
                </td>
              </tr>
              @endfor
              @endif
            </tbody>
            <tr>
              <th>
                <input type="text" class="form-control form-control-sm" id="judulInformasi" placeholder="Judul Informasi" value="">
              </th>
              <td colspan="2">
                <input type="text" class="form-control form-control-sm" id="isiInformasi" placeholder="Isi Informasi" value="">
              </td>
              <td style="width: 35px">
                <a href="#!" class="simpan btn btn-outline-info btn-sm btn-mini" onclick="addInformasiLain()"  data-toggle="tooltip" data-placement="right" title="Simpan"><i class="ti-save"></i></a>
              </td>
            </tr>
            <tr>
        </table>
        

        <br>

          <button type="submit" class="btn btn-primary  btn-block me-2">Simpan</button>
        </form>
      </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="dinas_terkait_id" value="{{$strategis->dinas_terkait_id}}">
          <div class="modal-body">
              <div id="inputHidden"></div>
              <div id="inputForm"></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) {
    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 form-control-sm mb-1" id="'+id+'" name="'+name+'" placeholder="'+menu+'"></div>'
    $(roomId).append(html);
  }
  
  function addRenstra(){
    
    var resentaIkuData = $('#resentaIkuData').val();
    var resentaTargetData = $('#resentaTargetData').val();
    var rand = Math.floor(Math.random()* (9999 - 1) + 1);

    var html = '<tr class="text-center" id="ri'+rand+'"> <th class="text-left"></th> <td class="text-left"><input type="text" class="form-control form-control-sm" value="'+resentaIkuData+'" name="resntra_iku[]"></td> <td style="width: 100px"><input type="text" class="form-control form-control-sm" value="'+resentaTargetData+'" name="target[]"></td> <td style="width: 35px"> <a href="#!" onclick="removeInput(`ri'+rand+'`)" class="btn btn-outline-danger btn-sm btn-mini"><i class="ti-close"></i></a> </td></tr>';
    $('#roomRenstra').append(html);

    document.getElementById("resentaIkuData").value = '';
    document.getElementById("resentaTargetData").value = '';
  }

  function addInformasiLain() {
    var judulInformasi = $('#judulInformasi').val();
    var isiInformasi = $('#isiInformasi').val();
    var rand = Math.floor(Math.random()* (9999 - 1) + 1);

    var html = '<tr id="il'+rand+'"><th> <input type="text" class="form-control form-control-sm" name="judulInformasi[]" placeholder="Judul Informasi" value="'+judulInformasi+'"> </th> <td colspan="2"> <input type="text" class="form-control form-control-sm" name="isiInformasi[]" placeholder="Isi Informasi" value="'+isiInformasi+'"> </td> <td style="width: 35px">  <a href="#!" onclick="removeInput(`il'+rand+'`)" class="btn btn-outline-danger btn-sm btn-mini"><i class="ti-close"></i></a> </td></tr>'
    $('#roomInformasiLain').append(html);

    document.getElementById("judulInformasi").value = '';
    document.getElementById("isiInformasi").value = '';
  }

  function removeInput(id) {
    $("#"+id).remove();
  }
  $('.btn').tooltip()


  $('#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 == 'tambahTujuan') {
          modal.find('#inputHidden').html('')
          modal.find('#inputForm').html('<div class="form-group"> <label for="tujuan">Tujuan</label> <input type="text" name="tujuan" class="form-control" required id="tujuan" placeholder="Tujuan" value=""> </div>')
          modal.find('#formAction').attr('action', "{{route('dinas.tujuan.store')}}")
      } else if (ket == 'updateTujuan'){
          var id = button.data('id') 
          modal.find('#inputForm').html('<div class="form-group"> <label for="tujuan">Tujuan</label> <input type="text" name="tujuan" class="form-control" required id="tujuan" placeholder="Tujuan" value="'+button.data('tujuan')+'"> </div>')
          modal.find('#inputHidden').html('<input type="hidden" name="id" value="'+id+'"><input type="hidden" name="_method" value="put">')
          modal.find('#formAction').attr('action', "{{route('dinas.tujuan.update')}}")
      }else if (ket == 'tambahSasaran') {
          modal.find('#inputHidden').html('')
          modal.find('#inputForm').html('<div class="form-group"> <label for="sasaran">Sasaran</label> <input type="text" name="sasaran" class="form-control" required id="sasaran" placeholder="Sasaran" value=""> </div>')
          modal.find('#formAction').attr('action', "{{route('dinas.sasaran.store')}}")
      } else if (ket == 'updateSasaran'){
          console.log(ket);
          var id = button.data('id') 
          modal.find('#inputForm').html('<div class="form-group"> <label for="tujuan">Sasaran</label> <input type="text" name="sasaran" class="form-control" required id="sasaran" placeholder="Sasaran" value="'+button.data('sasaran')+'"> </div>')
          modal.find('#inputHidden').html('<input type="hidden" name="id" value="'+id+'"><input type="hidden" name="_method" value="put">')
          modal.find('#formAction').attr('action', "{{route('dinas.sasaran.update')}}")
      }else{
        console.log(ket);
      }

      
  })
</script>
@endsection