@extends('user.template')
@section('title',$title)
@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 Operasional OPD</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 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 Operasional OPD <br> <small>{{$mr->pemda}}</small></h4>
        <form id="forms-sample" action="{{route('user.operasional.opd.store',['id'=>$dinasTerkait->id])}}" method="POST"> @csrf
        <input type="hidden" name="konteks_pemda_id" value="{{$dinasTerkait->konteks_pemda_id}}">
        <table class="table table-sm">
          <tr>
            <td>Nama Pemda</td>
            <td>{{$mr->pemda}}</td>
          </tr>
          <tr>
            <td>Tahun Penilaian</td>
            <td><b>{{$mr->tahun}}</b></td>
          </tr>
          <tr>
            <td>Periode yang Dinilai</td>
            <td><b>{{$mr->periode}}</b></td>
          </tr>
          <tr>
            <td style="width: 200px">Urusan Pemerintahan</td>
            <td>{{$selectUrusan}} </td>
          </tr>
          <tr>
            <td>OPD yang Dinilai</td>
            <td>
              <input type="hidden" name="entitas_id" value="{{$dinasTerkait->entitas_id}}">
              {{$dinasTerkait->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}}" data-label="Renja {{$sumber->entitas.' '.$sumber->periode}}">Renja {{$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 id="titleRenja" class="align-top"></td>
            <td>
              <ol id="ProgramRenja"></ol>
            </td>
          </tr>
          <tr>
            <td class="align-top">Keluaran/Hasil Kegiatan</td>
            <td id="dataKeluaran"></td>
          </tr>
          <tr>
            <td class="align-top">Kegiatan, dan indikator keluaran yang akan dilakukan penilaian risiko</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>
            </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>

    $('#sumberData').change(function() {
      $( "#sumberData" ).removeClass( "is-invalid" );

      if ($(this).val() == '') {
        $('#sasaranRenstra').empty();
        $('#dataIku').empty();
      }else{
        var label = $(this).find(':selected').data('label')
        $('#titleRenja').html("Program Dinas "+label);
        getSumberData($(this).val());
      }
    });

    function getSumberData(id){
      $.get( "{{route('user.renja.data')}}?id="+id, function( data ) {
        console.log(data)
          $('#ProgramRenja').empty();
          $.each( data['data']['programs'], function( key, value ) {
            $('#ProgramRenja').append("<li>"+value+"</li>")
          });

          $('#dataKeluaran').empty();
          $('#dataKeluaran').append("<tr class='border-0'><td class='border-0 text-center'></td><td class='border-0'>Kegiatan</td><td class='border-0 text-center'>Peserta</td></tr>")
          $.each( data['data']['kegiatans'], function( key, kegiatan ) {
            $('#dataKeluaran').append("<tr><td>"+(key+1)+"</td><td>"+kegiatan.kegiatan+"</td><td class='text-center'>"+kegiatan.peserta+"</td></tr>")
          });
      });
    }

    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()
      }
    }
    
  </script>
@endsection