@extends('layouts.admin')
@section('title')
  Monitoring Data |
@endsection
@section('css')
  <style>
  .list-kontak{
    list-style: none;
    margin:0px;
    padding:0px
  }
  </style>
@endsection
@section('content')
  <h1 class="df-title mg-b-10">Monitoring Data</h1>
  <ol class="breadcrumb df-breadcrumbs">
    <li class="breadcrumb-item"><a href="">Admin</a></li>
    <li class="breadcrumb-item active" aria-current="page">Monitoring Data</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-2">
            <form action="">
              <input type="text" class="form-control yearpicker" autocomplete="off" name="periode" value="{{$periode}}" onchange="javascript:submit()">
            </form>
          </div>
          <div class="col-md-5">
            <form action="">
              <select class="select2" name="jenis" style="width:100%" onchange="javascript:submit()">
                @foreach ($data['jenis'] as $key => $value)
                  <option value="{{$value->id}}" {{($jenis==$value->id ? 'selected' : '')}} >{{$value->jenis_laporan}}</option>
                @endforeach
              </select>
            </form>
          </div>
          <div class="col-md-5">
            <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>
      </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>Nama Indikator</th>
              <th class="center">Target</th>
              <th class="center">Realisasi</th>
              <th class="center" >Satuan</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>{{$value->nama_indikator}}</td>
                <td class="center">{{$value->target}}</td>
                <td class="center">{{$value->realisasi}}</td>
                <td class="center">{{$value->satuan}}</td>
                <td style="width:1px;white-space:nowrap;border-right:0">
                  <a href="{{  route('admin.detail_penilaian_indikator',['title'=>GlobalHelper::postTitle($value->nama_indikator).'-'.$value->id]) }}" class="button dark ripple-effect ico">
                    <i data-feather="search" class="tx-white-8 wd-20 ht-20 "></i>
                  </a>
                </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-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_penilaian_indikator',['periode'=>$periode]) }}" method="POST">
          {{ csrf_field() }}
          <div class="modal-body">
            <div class="form-group">
              <label>Nama Indikator</label>
              <h6 id="nama_indikator"></h6>
            </div>
            <div class="row row-sm">
              <div class="col-md-4">
                <div class="form-group">
                  <label>Target</label>
                  <input type="text" class="form-control" name="target" id="target" >
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label>Realisasi</label>
                  <input type="text" class="form-control" name="realisasi" id="realisasi" >
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label>Satuan</label>
                  <input type="text" class="form-control" name="satuan" id="satuan" readonly >
                </div>
              </div>
            </div>
            <div class="form-group">
              <label>Sumber Data</label>
              <input type="text" class="form-control" name="sumber_data" id="sumber_data" >
            </div>
            <div class="form-group">
              <label>Attachmnet</label>
              <input type="file" class="form-control dropify" data-height="120" name="attachment" id="attachment" >
            </div>
            <div class="form-group">
              <label>Keterangan</label>
              <textarea class="form-control" name="keterangan" id="keterangan" 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 penilaian_indikator(id){
    $.get("{{ url('api/find_penilaian_indikator/'.$periode) }}/"+id,function(result){
      $('#nama_indikator').html(result.nama_indikator);
      $('#target').val(result.target);
      $('#realisasi').val(result.realisasi);
      $('#satuan').val(result.satuan);
      $('#sumber_data').val(result.sumber_data);
      $('#keterangan').val(result.keterangan);
      $('#id').val(id);
      $('#title').html('Penilaian Indikator Kinerja');
      $('#action').val('edit');
      $('#action').html('Simpan');
      $('#modal-indikator').modal('show');
    });
  }

  </script>
@endsection