@extends('user.template')
@section('title',$title)
@section('head')
<link rel="stylesheet" href="{{asset('vendors/skydash/vendors/select2/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('vendors/skydash/vendors/select2-bootstrap-theme/select2-bootstrap.min.css')}}">
@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">Tambah Konteks Strategis Pemda</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 active" aria-current="page">{{$mr->pemda}}</li>
              <li class="breadcrumb-item"><a href="{{route('user.strategis.opd',['id'=>$dinasTerkait->id])}}">Konteks Strategis Pemda</a></li>
              <li class="breadcrumb-item active" aria-current="page">Edit</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row justify-content-md-center">
  <div class="col-sm-8">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title text-center mb-5">Tambah Konteks Strategis Pemda <br> <small>{{$mr->pemda}}</small></h4>
        <form id="forms-sample" action="{{route('user.strategis.opd.update',['id'=>$dinasTerkait->id])}}" method="POST"> @csrf @method('put')
        <input type="hidden" name="konteks_id" value="{{$konteks->id}}">
        <table class="table table-sm">
          <tr>
            <td>Nama Pemda</td>
            <td>{{$mr->pemda}}</td>
          </tr>
          <tr>
            <td>Tahun Penilaian</td>
            <td>{{$mr->tahun}}</td>
          </tr>
          <tr>
            <td>Periode yang Dinilai</td>
            <td>{{$mr->periode}}</td>
          </tr>
          <tr>
            <td style="width: 200px">Urusan Pemerintahan</td>
            <td>
              <select class="form-control" id="urusanMr" onchange="uP(this)" multiple style="width: 100%">
                @foreach ($urusans as $urusan)
                    <option value="{{$urusan->id}}" {{in_array($urusan->id, $urusanSelect) ? 'selected': ''}}>{{$urusan->urusan}}</option>
                @endforeach
              </select>
              <input type="hidden" name="konteks_id" value="{{$konteks->id}}">
              <input type="hidden" name="urusan_pemerintahan_id">
            </td>
          </tr>
          <tr>
            <td>OPD yang Dinilai</td>
            <td> {{$konteks->entitas}} </td>
          </tr>
          <tr>
            <td>Sumber Data</td>
            <td>
              <select name="renstra_id" required id="sumberData" class="form-control form-control-sm">
                <option value="">Pilih Sumber</option>
                @foreach ($sumberDatas as $sumber)
                    <option value="{{$sumber->id}}" {{$sumber->id == $konteks->sumber_data_id ? 'selected' : ''}}>Rancangan Awal Renstra {{$sumber->entitas.' '.$sumber->periode}}</option>
                @endforeach
              </select>
            </td>
          </tr>
          <tr>
            <td class="align-top">Tujuan Strategis</td>
            <td>{{$mr->tujuan_strategis}}</td>
          </tr>
          <tr>
            <td class="align-top">Sasaran Strategis</td>
            <td id="sasaranRenstra"></td>
          </tr>
          <tr>
            <td class="align-top">IKU Renstra OPD</td>
            <td id="dataIku"></td>
          </tr>
          <tr>
            <td class="align-top">Tujuan</td>
            <td> <textarea class="form-control" id="tujuan" name="tujuan" placeholder="Tujuan">{{$konteks->tujuan}}</textarea> </td>
          </tr>
          <tr>
            <td class="align-top">Sasaran</td>
            <td> <textarea class="form-control" id="sasaran" name="sasaran" placeholder="Sasaran">{{$konteks->sasaran}}</textarea> </td>
          </tr>
          <tr>
            <td class="align-top">IKU Strategis</td>
            <td>
              <div id="programs">
                @foreach (json_decode($konteks->program,true) as $program)
                <input type="text" class="form-control mb-1" id="program" name="program[]" placeholder="Program" value="{{$program}}">
                @endforeach
              </div>
              <a href="#!" class="btn btn-sm btn-outline-success mt-2 btn-block" onclick="addInputText('#programs','program','program[]','Program')" style="border-radius: 5px">Tambah</a>
            </td>
          </tr>
          <tr>
            <td>
            </td>
            <td><button type="button" onclick="validateMyForm();" class="btn btn-primary  btn-block me-2">Simpan</button></td>
          </tr>
        </table>
        </form>
        <hr>
          

          
      </div>
    </div>
  </div>
</div>

  
@endsection

@section('script')
<script src="{{asset('vendors/skydash/vendors/select2/select2.min.js')}}"></script>
<script src="{{asset('js/action.js')}}"></script>
  <script>
    function addTextarea(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><textarea class="form-control  mb-1" id="'+id+'" name="'+name+'" placeholder="'+menu+'"></textarea></div>';
      $(roomId).append(html);
    }
    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 mb-1" id="'+id+'" name="'+name+'" placeholder="'+menu+'"></div>'
      $(roomId).append(html);
    }
    function removeInput(id) {
      console.log(id);
      $("#"+id).remove();
    }

    $('#sumberData').change(function() {
      $( "#sumberData" ).removeClass( "is-invalid" );
      if ($(this).val() == '') {
        $('#sasaranRenstra').empty();
        $('#dataIku').empty();
      }else{
        getSumberData($(this).val());
      }
    });

    function getSumberData(id){
      $.get( "{{route('user.renstra.data')}}?id="+id, function( data ) {
          $('#dataIku').empty();
          $('#dataIku').append("<tr class='border-0'><td class='border-0 text-center'></td><td class='border-0'>IKU</td><td class='border-0 text-center'>Ket</td></tr>")
          $.each( data['data']['iku'], function( key, iku ) {
            $('#dataIku').append("<tr><td>"+(key+1)+"</td><td>"+iku.iku+"</td><td class='text-center'>"+iku.keterangan+"</td></tr>")
          });
          $('#sasaranRenstra').empty();
          $.each( data['data']['sasaran'], function( key, value ) {
            $('#sasaranRenstra').append("<li>"+value+"</li>")
          });
      });
    }

    function addDinasTerkait() {
      var html = $( "#dinasTerkaits" ).clone('#dinasTerkaits');
      $("#roomDinasTerkait").append(html);
    }

    function validateMyForm(){
      var sumberData = $('#sumberData option').filter(':selected').val();
      if (sumberData == '') {
        // window.location='#sumberData'
        scrollToTargetAdjusted('sumberData');
        $( "#sumberData" ).addClass( "is-invalid" );
      }else{
        document.getElementById('forms-sample').submit()
      }
    }

    window.addEventListener('load', function () {
      var sumber = $('#sumberData').val()
      getSumberData(sumber);
    })

    $("#urusanMr").select2();

    function uP(val) {
        var up = [];
        $.each($("#urusanMr option:selected"), function(){            
            up.push($(this).val());
        });
        $('[name=urusan_pemerintahan_id]').val(up)
    }
    </script>
@endsection