@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.mr')}}">Manajemen Risiko</a></li>
              <li class="breadcrumb-item"><a href="{{route('user.mr.show',['id'=>$mr->id])}}">{{$mr->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.konteks.pemda.update',['mr_id'=>$mr->id])}}" method="POST" onkeydown="return event.key != 'Enter';"> @csrf @method('put')
        <table class="table table-sm">
          <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>Periode yang Dinilai</td>
            <td><b>{{$mr->periode}}</b></td>
          </tr>
          <tr>
            <td>Tahun Penilaian</td>
            <td><b>{{$mr->tahun}}</b></td>
          </tr>
            <input type="hidden" name="id" value="{{$konteksPemda->id}}">
          <tr>
            <td>Sumber Data</td>
            <td>
              <select name="rpjmd_id" id="sumberData" class="form-control form-control-sm" required>
                <option>Pilih Sumber</option>
                @foreach ($sumberDatas as $sumber)
                    <option value="{{$sumber->id}}" {{$sumber->id == $rpjmd->id ? 'selected' : ''}}>{{$sumber->entitas.' '.$sumber->periode}}</option>
                @endforeach
              </select>
            </td>
          </tr>
          <tr>
            <td class="align-top">Tujuan Strategis RPJMD</td>
            <td id="tujuanRPJMD">
              @foreach ($rpjmdData as $tujuan)
                <li>{{$tujuan->tujuan}}</li>
              @endforeach
            </td>
          </tr>
          <tr>
            <td class="align-top">Penetapan konteks Risiko Strategis Pemda</td>
            <td>
              <textarea class="form-control" id="konteks_risiko" name="konteks_risiko" placeholder="Penetapan konteks Risiko Strategis Pemda">{{$konteksPemda->konteks_risiko}}</textarea>
            </td>
          </tr>
          <div style="display: none">
          <select id="dinasTerkaits" name="dinas_terkait[]" class="selectDinas form-control form-control-sm mb-2">
            <option value="0">Tidak Ada</option>
            @foreach ($entitass as $entitas)
                <option value="{{$entitas->id}}">{{$entitas->entitas}}</option>
            @endforeach
          </select>
          </div>
          <tr>
            <td class="align-top">Nama Dinas Terkait</td>
            <td>
              <div id="roomDinasTerkait">
                @foreach ($dinasTerkait as $dinas)
                <select name="dinas_terkait[]" class="selectDinas form-control form-control-sm mb-2">
                  <option value="0">Tidak Ada</option>
                  @foreach ($entitass as $entitas)
                      <option value="{{$entitas->id}}" {{$entitas->id == $dinas->entitas_id ? 'selected' : ''}}>{{$entitas->entitas}}</option>
                  @endforeach
                </select>
                @endforeach
              </div>
              <button class="btn btn-outline-success btn-sm btn-block mt-2" type="button" onclick="addDinasTerkait()">Tambah</button>
            </td>
          </tr>
          <tr>
            <td class="align-top">Sasaran RPJMD</td>
            <td id="sasaranRPJMD">
              @foreach ($rpjmdSasaran as $sasaran)
                <li>{{$sasaran}}</li>
              @endforeach
            </td>
          </tr>
          <tr>
            <td>IKU Sasaran RPJMD</td>
            <td id="sasaranIkuRPJMD">{{$rpjmd->sasaran_iku}}</td>
          </tr>
          <tr>
            <td class="align-top">Prioritas pembangunan dan program unggulan</td>
            <td>
              <div id="PrioritasPembangunan"></div>
              <a href="#!" class="btn btn-sm btn-outline-success mt-2 btn-block" onclick="addInputText('#PrioritasPembangunan','prioritas','prioritas[]','Prioritas pembangunan dan program unggulan')" style="border-radius: 5px">Tambah</a>
            </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="submit" class="btn btn-primary  btn-block me-2">Update</button></td>
          </tr>
        </table>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@section('script')
  <script src="{{asset('vendors/skydash/vendors/select2/select2.min.js')}}"></script>
  <script>
    @foreach (json_decode($konteksPemda->prioritas_program,true) as $program)
    addInputText('#PrioritasPembangunan','prioritas','prioritas[]','Prioritas pembangunan dan program unggulan', '{{$program}}')
    @endforeach

    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, value= null) {
      var rand = Math.floor(Math.random()* (9999 - 1) + 1);
      var value = value == null ? '' : value;
      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" value="'+value+'" 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() {
      $.get( "{{route('user.rpjmd.data')}}?id="+$(this).val(), function( data ) {

        $('#tujuanRPJMD').empty();
        $.each( data['data']['tujuan'], function( key, value ) {
          $('#tujuanRPJMD').append("<li>"+value+"</li>")
        });
        $('#sasaranRPJMD').empty();
        $.each( data['data']['sasaran'], function( key, value ) {
          $('#sasaranRPJMD').append("<li>"+value+"</li>")
        });
        $('#sasaranIkuRPJMD').empty();
        $('#sasaranIkuRPJMD').append(data['data']['sasaran_iku'])
        
      });
    });

    function addDinasTerkait() {
      $( "#dinasTerkaits" ).clone().appendTo( "#roomDinasTerkait" );
    }

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

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