@extends('dinas.template')

@section('head')
<style>
  tr>td{
    padding: 5px;
  }
  tr>th{
    padding: 5px;
  }
  .i-mini{
    font-size: 8px
  }
  .btn-mini{
    padding: 3px;
  }
  .px8{
    font-size: 8px;
  }
</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.operasional.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">{{$strategis->dinas}}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row justify-content-md-center">
  <div class="col-sm-8">
    <div class="card">
      <div class="card-body">
        <form action="{{route('dinas.konteks.operasional.opd.update',['strategis_id'=> $strategis->id])}}" method="post" onkeydown="return event.key != 'Enter';" >@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 OPERASIONAL OPD</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>Periode Yang Dinilai</th>
              <td colspan="3">{{$strategis->konteks_risiko}}</td>
            </tr>
            <tr>
              <th>Program {{$strategis->dinas}}
                dan Kegiatan Utama</th>
              <td colspan="3">
                <div id="programDinas">
                  @foreach ($program_dinas as $no=> $ss)
                    <div id="dt{{$no}}">
                      <button type="button" class="close" onclick="removeInput('ss{{$no}}')" style="position: absolute; right: 30px;">
                        <span aria-hidden="true">&times;</span>
                      </button>
                      <input type="text" class="form-control form-control-sm mb-1" id="program_dinas" name="program_dinas[]" placeholder="Program {{$strategis->dinas}} dan Kegiatan Utama" value="{{$ss}}">
                    </div>
                  @endforeach
                </div>
                <a href="#!" class="btn btn-sm btn-outline-info btn-block" onclick="addInputText('#programDinas','program_dinas','program_dinas[]','Program {{$strategis->dinas}} dan Kegiatan Utama')" >Tambah Sasaran Strategis</a>
              </td>
            </tr>
            <tr class="text-center">
              <th class="text-left">Keluaran/Hasil Kegiatan </th>
              <th>Kegiatan</th>
              <th style="width: 100px">Peserta</th>
              <td style="width: 35px"></td>
            </tr>
            <tbody id="roomRenstra">
              @if ($keluaran['pelatihan'] != null)
              @for ($i = 0; $i < count($keluaran['pelatihan']); $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="{{$keluaran['pelatihan'][$i] ?? ''}}" name="pelatihan[]">
                </td> 
                <td style="width: 100px">
                  <input type="text" class="form-control form-control-sm" value="{{$keluaran['peserta'][$i] ?? ''}}" name="peserta[]">
                </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="btn btn-outline-info btn-sm btn-mini" onclick="addRenstra()">
                  <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="btn btn-outline-info btn-sm btn-mini" onclick="addInformasiLain()"><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>

@endsection

@section('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="pelatihan[]"></td> <td style="width: 100px"><input type="text" class="form-control form-control-sm" value="'+resentaTargetData+'" name="peserta[]"></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();
  }
</script>
@endsection