@extends('layouts.admin')
@section('title')
  Indikator Kinerja |
@endsection
@section('css')
  <style>
  .list-kontak{
    list-style: none;
    margin:0px;
    padding:0px
  }
  </style>
@endsection
@section('content')
  <h1 class="df-title mg-b-10">Indikator Kinerja</h1>
  <ol class="breadcrumb df-breadcrumbs">
    <li class="breadcrumb-item"><a href="">Admin</a></li>
    <li class="breadcrumb-item"><a href="">Data Master</a></li>
    <li class="breadcrumb-item active" aria-current="page">Indikator Kinerja</li>
  </ol>
  <div class="card card-table mg-t-50">
    <div class="card-body">
      <div class="pd-20">
        <div class="row row-sm">
          <div class="col-md-10">
            <form action="" method="get">
              <div class="search-form">
                <input type="search" class="form-control" name="search" value="{{$search}}" placeholder="Search">
                <button class="btn" type="submit"><i data-feather="search"></i></button>
              </div>
            </form>
          </div>
          <div class="col-md-2">
            <button type="button" class="btn btn-block btn-dark" onclick="add_indikator()" >Tambah</button>
          </div>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table table-bordered table-vertical-middle">
          <thead class="thead-light">
            <tr>
              <th width="20px" style="border-left:0">No</th>
              {{-- <th class="center">ID DDP</th> --}}
              <th>Nama Indikator</th>
              <th class="center" >Satuan</th>
              <th class="center" >Nama Satker</th>
              <th style="border-right:0"></th>
            </tr>
          </thead>
          <tbody>
            @foreach ($data['indikator'] as $key => $value)
              <tr>
                <td style="border-left:0">{{$data['indikator']->firstItem() + $key}}</td>
                {{-- <td class="center">{{$value->id_ddp}}</td> --}}
                <td>{{$value->nama_indikator}}</td>
                <td class="center">{{$value->satuan}}</td>
                <td class="center">{{$value->singkatan_satker}}</td>
                <td style="width:1px;white-space:nowrap;border-right:0">
                  <a href="javascript:;" onclick="edit_indikator('{{$value->id}}')" class="button green ripple-effect ico">
                    <i data-feather="edit" class="tx-white-8 wd-20 ht-20 "></i>
                  </a>
                  <a href="javascript:;" onclick="confirmDelete({{$value->id}})" class="button red ripple-effect ico">
                    <i data-feather="trash" class="tx-white-8 wd-20 ht-20 "></i>
                  </a>
                  <form action="{{ route('admin.proses_indikator_kinerja') }}" method="post" id="hapus{{$value->id}}">
                    {{ csrf_field() }}
                    <input type="hidden" name="id" value="{{$value->id}}">
                    <input type="hidden" name="action" value="delete">
                  </form>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <div class="pd-20">
        {{ $data['indikator']->links('admin.include.pagination', ['pagination' => $data['indikator']] ) }}
      </div>
    </div>
  </div>

  <div class="modal fade" role="dialog" id="modal-indikator">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="title"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="{{ route('admin.proses_indikator_kinerja') }}" method="POST">
          {{ csrf_field() }}
          <div class="modal-body">
            <div class="row row-sm">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Nama Indikator</label>
                  <textarea class="form-control" name="nama_indikator" id="nama_indikator" required style="height:80px" ></textarea>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Nama Data</label>
                  <textarea class="form-control" name="nama_data" id="nama_data" required style="height:80px" ></textarea>
                </div>
              </div>
            </div>
            <div class="row row-sm">
              <div class="col-md-3">
                <div class="form-group">
                  <label>ID DPP</label>
                  <input type="text" class="form-control" name="id_ddp" id="id_ddp" >
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Kode Indikator</label>
                  <input type="text" class="form-control" name="kode" id="kode" >
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Sumber Referensi</label>
                  <input type="text" class="form-control" name="sumber_referensi" id="sumber_referensi" >
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Satuan</label>
                  <input type="text" class="form-control" name="satuan" id="satuan" >
                </div>
              </div>
            </div>
            <div class="row row-sm">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Satuan Kerja</label>
                  <select class="select2" id="satker" name="satker" style="width:100%">
                    @foreach ($data['satker'] as $key => $value)
                      <option value="{{$value->id}}">{{$value->nama_satker}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Keterangan</label>
                 <input type="text" class="form-control" name="keterangan" id="keterangan" >
                </div>
              </div>
            </div>

            <div class="row row-sm">
              <div class="col-md-3">
                <div class="form-group">
                  <label>Status Prioritas</label>
                  <select class="select2" id="status_prioritas" name="status_prioritas" style="width:100%">
                    <option value="Prioritas">Prioritas</option>
                    <option value="Non Prioritas">Non Prioritas</option>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Jenis Data</label>
                  <select class="select2" id="jenis_data" name="jenis_data" style="width:100%">
                    <option value="Statistik">Statistik</option>
                    <option value="Geospasial">Geospasial</option>
                    <option value="Keuangan">Keuangan</option>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Indikator Variabel</label>
                  <select class="select2" id="indikator_variabel" name="indikator_variabel" style="width:100%">
                    <option value="Variabel">Variabel</option>
                    <option value="Variabel Pembentuk">Variabel Pembentuk</option>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Klasifikasi Risiko</label>
                  <select class="select2" id="klasifikasi_risiko" name="klasifikasi_risiko" style="width:100%">
                    <option value="Akses Terbuka">Akses Terbuka</option>
                    <option value="Akses Tertutup">Akses Tertutup</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="row row-sm">
              <div class="col-md-3">
                <div class="form-group">
                  <label>Klasifikasi Penyajian</label>
                  <select class="select2" id="klasifikasi_penyajian" name="klasifikasi_penyajian" style="width:100%">
                    <option value="Kabupaten">Kabupaten</option>
                    <option value="Desa/Kelurahan">Desa/Kelurahan</option>
                    <option value="Jenis Kelamin">Jenis Kelamin</option>
                    <option value="Kategori Tertentu">Kategori Tertentu</option>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Jadwal Pemutakhiran</label>
                  <select class="select2" id="jadwal_pemutakhiran" name="jadwal_pemutakhiran" style="width:100%">
                    <option value="Tahunan">Tahunan</option>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Kategori RAD</label>
                  <select class="select2" id="kategori_rad" name="kategori_rad" style="width:100%">
                    <option value=""></option>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Kode Standar Data</label>
                  <input type="text" class="form-control" name="kode_standar_data" id="kode_standar_data" >
                </div>
              </div>
            </div>
            <div class="form-group">
              <label>Definisi</label>
              <textarea class="form-control" name="definisi" id="definisi" style="height:80px" ></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <input type="hidden" id="id" name="id">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
            <button type="submit" class="btn btn-primary" id="action" name="action" value="add">Tambahkan</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection
@section('js')
  <script>

  function add_indikator(){
    $('#nama_indikator').val('');
    $('#nama_data').val('');
    $('#id_dpp').val('');
    $('#kode').val('');
    $('#sumber_referensi').val('');
    $('#satuan').val('');
    
    $('#keterangan').val('');
    $('#status_prioritas').val('');
    $('#jenis_data').val('');
    $('#indikator_variabel').val('');
    $('#klasifikasi_risiko').val('');
    $('#klasifikasi_penyajian').val('');
    $('#jadwal_pemutakhiran').val('');
    $('#kategori_rab').val('');
    $('#kode_standar_data').val('');
    $('#definisi').val('');
    $('#id').val(0);
    $('#title').html('Tambah Indikator Kinerja');
    $('#action').val('add');
    $('#action').html('Tambahkan');
    $('#modal-indikator').modal('show');
  }

  function edit_indikator(id){
    $.get("{{ url('api/find_indikator') }}/"+id,function(result){
      $('#nama_indikator').val(result.nama_indikator);
      $('#nama_data').val(result.nama_data);
      $('#id_ddp').val(result.id_ddp);
      $('#kode').val(result.kode);
      $('#sumber_referensi').val(result.sumber_referensi);
      $('#satuan').val(result.satuan);
      $('#kode_standar_data').val(result.kode_standar_data);
      $('#definisi').val(result.definisi);
      $('#keterangan').val(result.keterangan);

      $('#satker').val(result.fid_satker);
      $('#satker').select2();
      
      $('#status_prioritas').val(result.status_prioritas);
      $('#status_prioritas').select2();

      $('#jenis_data').val(result.jenis_data);
      $('#jenis_data').select2();

      $('#indikator_variabel').val(result.indikator_variabel);
      $('#indikator_variabel').select2();

      $('#klasifikasi_risiko').val(result.klasifikasi_risiko);
      $('#klasifikasi_risiko').select2();

      $('#klasifikasi_penyajian').val(result.klasifikasi_penyajian);
      $('#klasifikasi_penyajian').select2();

      $('#jadwal_pemutakhiran').val(result.jadwal_pemutakhiran);
      $('#jadwal_pemutakhiran').select2();

      $('#kategori_rad').val(result.kategori_rad);
      $('#kategori_rad').select2();

      $('#id').val(id);
      $('#title').html('Edit Indikator Kinerja');
      $('#action').val('edit');
      $('#action').html('Simpan');
      $('#modal-indikator').modal('show');
    });
  }

  </script>
@endsection