@extends('layouts.main')
@section('title')
  Data Pegawai |
@endsection
@section('css')
  <style>
  .form-control:disabled, .form-control[readonly] {
    background-color: #ffffff;
  }
  </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>
  <form action="{{ route('proses_pegawai') }}" method="post" enctype="multipart/form-data" data-parsley-validate >
    {{ csrf_field() }}
    <div class="card mg-t-50">
      <div class="card-header">
        <h5>{{(($action=='add') ? 'Tambah' : 'Edit')}} Pegawai</h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-auto">
            <div class="image-wrapper" id="image_icon" style="width:150px;aspect-ratio:1/1;padding:5px" >
              <img src="{{(!empty($data['pegawai']->avatar) ? $data['pegawai']->avatar : asset('assets/images/user-avatar-placeholder.png') )}}" alt="" />
              {{-- <div class="upload-button" onclick="changeImage('image_icon')"></div>
              <input class="file-upload" type="file" name="image_icon" accept="image/*"/> --}}
            </div>
          </div>
          <div class="col">
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label>NIP</label>
                  <input type="text" class="form-control" name="nip" value="{{(!empty($data['pegawai']) ? $data['pegawai']->nip : '' )}}" autocomplete="off" required >
                </div>
              </div>
              <div class="col-md-8">
                <div class="form-group">
                  <label>Nama Lengkap</label>
                  <input type="text" class="form-control" value="{{(!empty($data['pegawai']) ? $data['pegawai']->nama_lengkap : '' )}}" name="nama_lengkap" autocomplete="off" required >
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label>NIK</label>
                  <input type="text" class="form-control" name="nik" value="{{(!empty($data['pegawai']) ? $data['pegawai']->nik : '' )}}" autocomplete="off" >
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label>Jenis Kelamin</label>
                  <select class="select2" name="jenis_kelamin" style="width:100%">
                    <option value="L" {{((!empty($data['pegawai']) && $data['pegawai']->jenis_kelamin=='L' ) ? 'selected' : '' )}} >Laki-Laki</option>
                    <option value="P" {{((!empty($data['pegawai']) && $data['pegawai']->jenis_kelamin=='P' ) ? 'selected' : '' )}}>Perempuan</option>
                  </select>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label>Status Pegawai</label>
                  <select class="select2" name="status_pegawai" style="width:100%">
                    <option value="PNS" {{((!empty($data['pegawai']) && $data['pegawai']->status_pegawai=='PNS' ) ? 'selected' : '' )}} >PNS</option>
                    <option value="CPNS" {{((!empty($data['pegawai']) && $data['pegawai']->status_pegawai=='CPNS' ) ? 'selected' : '' )}}>CPNS</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label>Nama Jabatan</label>
                  <input type="text" class="form-control" name="nama_jabatan" value="{{(!empty($data['pegawai']) ? $data['pegawai']->nama_jabatan : '' )}}" autocomplete="off" required >
                </div>
              </div>
              <div class="col-md-8">
                <div class="form-group">
                  <label>Satuan Kerja</label>
                  <div class="search-form">
                    <input type="text" class="form-control"  id="nama_satker" value="{{(!empty($data['pegawai']) ? $data['pegawai']->nama_satker : '' )}}" disabled required>
                    <button class="btn" type="button"  data-target="#modal-filter" data-toggle="modal"><i data-feather="search"></i></button>
                  </div>
                  <input type="hidden" id="id_satker" name="satker" value="{{(!empty($data['pegawai']) ? $data['pegawai']->fid_satker : '' )}}">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label>Pangkat / Golongan</label>
                  <select class="select2" name="gol_ruang" style="width:100%">
                    @foreach ($data['pangkat'] as $key => $value)
                    <option value="{{$value->golongan}}/{{$value->ruang}}" {{((!empty($data['pegawai']) && $data['pegawai']->gol_ruang==$value->golongan.'/'.$value->ruang ) ? 'selected' : '' )}} >{{$value->pangkat}} ({{$value->golongan}}/{{$value->ruang}})</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group">
                  <label>Eselon</label>
                  <select class="select2" name="eselon" style="width:100%">
                    @foreach ($data['eselon'] as $key => $value)
                    <option value="{{$value->eselon}}" {{((!empty($data['pegawai']) && $data['pegawai']->eselon==$value->eselon ) ? 'selected' : '' )}} >{{$value->eselon}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Jenis Jabatan</label>
                  <select class="select2" name="jenis_jabatan" style="width:100%">
                    <option value="JPT" {{((!empty($data['pegawai']) && $data['pegawai']->jenis_jabatan=='JPT' ) ? 'selected' : '' )}} >Jabatan Pimpinan Tinggi (JPT)</option>
                    <option value="JPTK" {{((!empty($data['pegawai']) && $data['pegawai']->jenis_jabatan=='JPTK' ) ? 'selected' : '' )}} >Jabatan Pimpinan Tinggi (JPT) Khusus</option>
                    <option value="JA" {{((!empty($data['pegawai']) && $data['pegawai']->jenis_jabatan=='JA' ) ? 'selected' : '' )}} >Jabatan Administrasi (JA)</option>
                    <option value="JF" {{((!empty($data['pegawai']) && $data['pegawai']->jenis_jabatan=='JF' ) ? 'selected' : '' )}} >Jabatan Fungsional (JF)</option>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Jumlah Hari Kerja</label>
                  <select class="select2" name="hari_kerja" style="width:100%">
                    <option value="5" {{((!empty($data['pegawai']) && $data['pegawai']->hari_kerja==5 ) ? 'selected' : '' )}} >5 Hari Kerja</option>
                    <option value="6" {{((!empty($data['pegawai']) && $data['pegawai']->hari_kerja==6 ) ? 'selected' : '' )}} >6 Hari Kerja</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <input type="hidden" name="id" value="{{$id}}">
        <div class="pull-right">
          @if($nip==Session::get('useractive')->nip)
          <a class="btn btn-dark" href="{{route('cuti.dashboard')}}" >Batalkan</a>
          @else
          <a class="btn btn-dark" href="{{route('cuti.pegawai')}}" >Batalkan</a>
          @endif
          <button class="btn btn-primary" type="submit" name="action" value="{{$action}}">Simpan</button>
        </div>
      </div>
    </div>
  </form>

  <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) {
    $('#nama_satker').val(data.node.original.text);
    $('#id_satker').val(data.node.original.kode);
    $('#modal-filter').modal('hide')
  });
  $('#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