@extends('layouts.main')
@section('title')
  Sisa Cuti Tahunan |
@endsection
@section('css')
  <style>

  </style>
@endsection
@section('content')
  <h1 class="df-title mg-b-10">Sisa Cuti Tahunan</h1>
  <ol class="breadcrumb df-breadcrumbs">
    <li class="breadcrumb-item">Dashboard</li>
    <li class="breadcrumb-item">Laporan & Monitoring</li>
    <li class="breadcrumb-item active" aria-current="page">Sisa Cuti Tahunan</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">
          <a href="#modal-filter" data-toggle="modal" class="btn btn-secondary pull-right">Filter Data</a>
        </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">
        @php
          $tahun = date('Y');
        @endphp
        <thead>
          <tr>
            <th>NIP / Nama Pegawai</th>
            <th width="250px">Jabatan</th>
            <th class="tx-center">{{ $tahun-2 }}</th>
            <th class="tx-center">{{ $tahun-1 }}</th>
            <th class="tx-center">{{ $tahun }}</th>
            <th class="tx-center">Sisa Cuti</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($data['pegawai'] as $key => $value)
          <tr>
            <td style="white-space:nowrap;width:100px;">
              <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">
                </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>
              <h6 style="color:#2475c1"></h6>
              <p>{{$value->nama_jabatan}}
            </td>
            <td class="tx-center">{{ GlobalHelper::sisa_cuti_tahunan($value->nip,$tahun-2) }}</td>
            <td class="tx-center">{{ GlobalHelper::sisa_cuti_tahunan($value->nip,$tahun-1) }}</td>
            <td class="tx-center">{{ GlobalHelper::sisa_cuti_tahunan($value->nip,$tahun) }}</td>
            <td class="tx-center">{{ GlobalHelper::sisa_cuti_tahunan_komulatif($value->nip,$tahun) }}</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('sisa_cuti_tahunan') }}?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