@extends('layouts.main')
@section('title')
  Data Pegawai |
@endsection
@section('css')
  <style>

  </style>
@endsection
@section('content')
  <h1 class="df-title mg-b-10">Data Pegawai</h1>
  <ol class="breadcrumb df-breadcrumbs">
    <li class="breadcrumb-item">Dashboard</li>
    <li class="breadcrumb-item">Data Master</li>
    <li class="breadcrumb-item active" aria-current="page">Data Pegawai</li>
  </ol>
  <div class="card card-table mg-t-50">
    <div class="card-header">
      <div class="row">
        <div class="col-md-8">
          <form action="" method="get">
            <input type="hidden" name="satker" value="{{$satker}}">
            <div class="search-form">
              <input type="search" class="form-control" name="search" value="{{$search}}" placeholder="Cari Pegawai">
              <button class="btn" type="submit"><i data-feather="search"></i></button>
            </div>
          </form>
        </div>
        <div class="col-md-4">
{{--          @if(Session::get('useractive')->fid_hak_akses==3)--}}
{{--          <div class="pull-right">--}}
{{--            @if($satker != 'all')--}}
{{--            <a href="javascript:;" onclick="confirm_import()"class="btn btn-primary ">Import Data</a>--}}
{{--            @endif--}}
{{--            <a href="#modal-filter" data-toggle="modal" class="btn btn-secondary ">Filter Data</a>--}}
{{--          </div>--}}
{{--          @endif--}}
        </div>
      </div>
    </div>
    <div class="card-body">
      <div class="bd-b bd-3 pd-30 ">
        <div class="row">
          <div class="col-md-6">
            {!!$data['satker']!!}
          </div>
          <div class="col-md-6">
          </div>
        </div>
      </div>
      <table class="table table-vertical-middle">
        <thead>
          <tr>
            <th>NIP / Nama Pegawai</th>
            <th width="250px">Satuan Kerja</th>
            <th width="250px">Jabatan</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @foreach ($data['pegawai'] as $key => $value)
          <tr>
            <td style="white-space:nowrap">
              <div class="media">
                <div class="media-object wd-60 ht-60 mg-r-10 avatar">

{{--                  <img src="{{(!empty($value->avatar) ? $value->avatar : asset('assets/images/user-avatar-placeholder.png') )}}" alt="" class="avatar-sm rounded-circle">--}}
                    <img src="http://simpeg.bondowosokab.go.id/api/get_photo/{{$value->nip}}" alt="" class="avatar-sm rounded-circle">
                </div>
                <div class="media-body align-self-center">
                  <h6>{{$value->nama_lengkap}}</h6>
                  <p class="text-muted">NIP.{{$value->nip}}</p>
                </div>
              </div>
            </td>
            <td>{!!$value->satuan_kerja!!}</td>
            <td>
              <h6 style="color:#2475c1"></h6>
              <p>{{$value->nama_jabatan}}
            </td>
            <td style="width:1px;white-space:nowrap;">
              <a href="{{ route('detail_pegawai',['nip'=>$value->nip]) }}" 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="card-footer">
      {{ $data['pegawai']->links('include.pagination', ['pagination' => $data['pegawai']] ) }}
    </div>
  </div>

  <div id="modal-filter" class="modal fade right" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <div class="search-form">
            <input type="search" class="form-control" id="search_tree_satker" placeholder="Cari Satuan Kerja">
            <button class="btn" type="button"><i data-feather="search"></i></button>
          </div>
          <hr>
          <div id="tree_satker"></div>
        </div>
      </div>
    </div>
  </div>

@endsection
@section('js')
  <script>
  var to;
  $('#tree_satker').jstree({
    "core" : {
      "themes" : {
        "responsive": true
      },
      "data": {
        url: function (e) {
            return "{{ url('api/get_tree_satker') }}";
        },
        data: function (e) {
            return { parent: e.id };
        },
      },
    },
    "types" : {
      "default" : {
        "icon" : "fa fa-folder m--font-brand"
      },
      "file" : {
        "icon" : "fa fa-file  m--font-brand"
      }
    },
    "plugins" : [ "contextmenu", "dnd", "search", "types" ],
    "search" : { "show_only_matches" : true }
  }).on("select_node.jstree", function (e, data) {
    window.location.href = '{{ route('pegawai') }}?satker='+data.node.original.kode;
  });
  $('#search_tree_satker').keyup(function () {
    if(to){
      clearTimeout(to);
    }
    to = setTimeout(function () {
      var v = $('#search_tree_satker').val();
      $('#tree_satker').jstree(true).search(v);
    }, 250);
  });
  </script>
@endsection