@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">Tambah</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.store',['mr_id'=>$mr->id])}}" method="POST"> @csrf
        <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}}">{{$urusan->urusan}}</option>
                @endforeach
              </select>
              <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>
          <tr>
            <td>Sumber Data</td>
            <td>
              <select name="rpjmd_id" required id="sumberData" class="form-control form-control-sm">
                <option value="">Pilih Sumber</option>
                @foreach ($sumberDatas as $sumber)
                    <option value="{{$sumber->id}}">{{$sumber->entitas.' '.$sumber->periode}}</option>
                @endforeach
              </select>
            </td>
          </tr>
          <tr>
            <td class="align-top">Tujuan Strategis RPJMD</td>
            <td id="tujuanRPJMD"></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">{{env('APP_ENV') != 'production' ? 'Penetapan Konteks' : ''}}</textarea>
            </td>
          </tr>
          <tr>
            <td class="align-top">Nama Dinas Terkait</td>
            <td>
              <div id="roomDinasTerkait">
                <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>
              <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"></td>
          </tr>
          <tr>
            <td>IKU Sasaran RPJMD</td>
            <td id="sasaranIkuRPJMD"></td>
          </tr>
          <tr>
            <td class="align-top">Prioritas pembangunan dan program unggulan</td>
            <td>
              <div id="PrioritasPembangunan">
                <input type="text" class="form-control mb-1" id="prioritas" name="prioritas[]" placeholder="Prioritas pembangunan dan program unggulan" value="{{env('APP_ENV') != 'production' ? 'Prioritas' : ''}}">
              </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">{{env('APP_ENV') != 'production' ? 'Tujuan 3.2 Meningkatnya derajat kesehatan masyarakat' : ''}}</textarea> </td>
          </tr>
          <tr>
            <td class="align-top">Sasaran</td>
            <td> <textarea class="form-control" id="sasaran" name="sasaran" placeholder="Sasaran">{{env('APP_ENV') != 'production' ? 'Sasaran 3.2.2 Meningkatnya kualitas kesehatan masyarakat' : ''}}</textarea> </td>
          </tr>
          <tr>
            <td class="align-top">IKU Strategis</td>
            <td> 
              <div id="programs">
                <input type="text" class="form-control mb-1" id="program" name="program[]" placeholder="Program" value="{{env('APP_ENV') != 'production' ? 'Program Peningkatan Keselamatan Ibu Melahirkan dan Anak' : ''}}">
              </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('js/action.js')}}"></script>
<script src="{{asset('vendors/skydash/vendors/select2/select2.min.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() == '') {
        $('#tujuanRPJMD').empty();
        $('#sasaranRPJMD').empty();
        $('#sasaranIkuRPJMD').empty();
      }else{
        $.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() {
      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()
      }

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

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