@extends('user.template')
@section('title', $title)
@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')

<div class="row">
  <div class="col-md-12 grid-margin">
    <div class="row">
      <div class="col-12 col-xl-9 mb-4 mb-xl-0">
        <h3 class="font-weight-bold">{{$title}}</h3>
        <h6 class="font-weight-normal mb-0">Rancangan Awal Renstra </h6>
      </div>
      <div class="col-12 col-xl-3">
      </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.renstra')}}">Renstra</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{$data->periode}}</li>
          </ol>
      </nav>
  </div>
</div>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-borderless">
            <tbody>
              <tr class="data{{$data->id}}">
                <td><b>Periode</b></td>
                <td><b>{{$data->periode}}</b><br><small>{{$data->entitas}}</small></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="ml-4 mt-4 mr-4">
        <b>Sasaran Renstra</b> <br>
        <button  class="btn btn-success btn-sm" data-toggle="modal" data-name="Tambah Sasaran {{$title}} Baru" data-ket="tambah" href="#modalSasaran">Buat Sasaran {{$title}} Baru</button>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-borderless ">
            <thead>
              <tr class="text-center">
                <th>No</th>
                <th>Sasaran</th>
                <td></td>
              </tr>  
            </thead>
            <tbody>
              @foreach ($sasarans as $noSasaran => $sasaran)
              <tr class="sasaran{{$sasaran->id}}">
                <td>{{$noSasaran+1}}</td>
                <td>{{$sasaran->sasaran}}</td>
                <td>
                  <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-name="Edit {{$title}} Sasaran" data-ket="edit" href="#modalSasaran" data-id="{{$sasaran->id}}" data-sasaran="{{$sasaran->sasaran}}">Edit</button>
                  <a class="btn btn-danger btn-sm" href="#" onclick="hapus('{{route('user.renstra.sasaran.delete',['id'=>$sasaran->id])}}', 'sasaran{{$sasaran->id}}', 'Hapus {{$title}} Sasaran ?')" >Hapus</a>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="modalSasaran" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title"></h4>
          </div>
          <form method="post" id="formActionSasaran" class="form-horizontal"> @csrf
          <input type="hidden" name="renstra_id" value="{{$data->id}}">
          <div class="modal-body">
              <div id="inputHiddenSasaran"></div>
              <div class="form-group">
                <label for="sasaran">Sasaran</label>
                <textarea  name="sasaran" class="form-control" required id="sasaran" placeholder="Sasaran"></textarea>
              </div>
          </div>
          <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Save changes</button>
              <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
          </div>
          </form>
      </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="ml-4 mt-4 mr-4">
        <b>Renstra IKU</b> <br>
        <button  class="btn btn-success btn-sm" data-toggle="modal" data-name="Tambah {{$title}} IKU Baru" data-ket="tambah" href="#modalIku">Buat {{$title}} IKU Baru</button>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-borderless ">
            <thead>
              <tr class="text-center">
                <th>No</th>
                <th>Iku</th>
                <th>Target</th>
                <td></td>
              </tr>  
            </thead>
            <tbody>
              @foreach ($ikus as $noIku => $iku)
              <tr class="iku{{$iku->id}}">
                <td>{{$noIku+1}}</td>
                <td>{{$iku->iku}}</td>
                <td class="text-center">{{$iku->keterangan}}</td>
                <td>
                  <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-name="Edit {{$title}} Iku" data-ket="edit" href="#modalIku" data-id="{{$iku->id}}" data-iku="{{$iku->iku}}" data-keterangan="{{$iku->keterangan}}">Edit</button>
                  <a class="btn btn-danger btn-sm" href="#" onclick="hapus('{{route('user.renstra.iku.delete',['id'=>$iku->id])}}', 'iku{{$iku->id}}', 'Hapus {{$title}} IKU ?')" >Hapus</a>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalIku" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title"></h4>
          </div>
          <form method="post" id="formActionIku" class="form-horizontal"> @csrf
          <input type="hidden" name="renstra_id" value="{{$data->id}}">
          <div class="modal-body">
              <div id="inputHiddenIku"></div>
              <div class="form-group">
                <label for="iku">IKU</label>
                <input type="text" name="iku" class="form-control" required id="iku" placeholder="IKU">
              </div>
              <div class="form-group">
                <label for="keterangan">Target</label>
                <input type="text" name="keterangan" class="form-control" required id="keterangan" placeholder="Keterangan">
              </div>
          </div>
          <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Save changes</button>
              <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
          </div>
          </form>
      </div>
  </div>
</div>



@endsection

@section('script')
<script src="{{asset('js/sweetalert2.js')}}"></script>
    
<script>
  $('#modalIku').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var name = button.data('name') 
      var ket = button.data('ket')
  
      var modal = $(this)
      modal.find('.modal-title').text(name)
  
      if (ket == 'tambah') {
          modal.find('#formActionIku').attr('action', "{{route('user.renstra.iku.store')}}")
          modal.find('#inputHiddenIku').html('')
  
          modal.find('#iku').val('')
          modal.find('#keterangan').val('')
          modal.find('#renstra_id').val('')
      }else{
          var id = button.data('id') 
  
          modal.find('#iku').val(button.data('iku'))
          modal.find('#keterangan').val(button.data('keterangan'))
          modal.find('#renstra_id').val(button.data('renstra_id'))

          modal.find('#inputHiddenIku').html('<input type="hidden" name="id" value="'+id+'"><input type="hidden" name="_method" value="put">')
          modal.find('#formActionIku').attr('action', "{{route('user.renstra.iku.update')}}")
  
      }
  })

  $('#modalSasaran').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var name = button.data('name') 
      var ket = button.data('ket')
  
      var modal = $(this)
      modal.find('.modal-title').text(name)
  
      if (ket == 'tambah') {
          modal.find('#formActionSasaran').attr('action', "{{route('user.renstra.sasaran.store')}}")
          modal.find('#inputHiddenSasaran').html('')
  
          modal.find('#sasaran').val('')
          modal.find('#renstra_id').val('')
      }else{
          var id = button.data('id') 
  
          modal.find('#sasaran').val(button.data('sasaran'))
          modal.find('#renstra_id').val(button.data('renstra_id'))

          modal.find('#inputHiddenSasaran').html('<input type="hidden" name="id" value="'+id+'"><input type="hidden" name="_method" value="put">')
          modal.find('#formActionSasaran').attr('action', "{{route('user.renstra.sasaran.update')}}")
  
      }
  })
</script>
@endsection