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

  </style>
@endsection
@section('content')
  <h1 class="df-title mg-b-10">Satuan Kerja</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">Satuan Kerja</li>
  </ol>
  <div class="card card-table mg-t-50">
    <div class="card-header">
      <div class="row">
        <div class="col-md-8">
          <div class="search-form">
            <input type="search" class="form-control" autocomplete="off" id="search" placeholder="Cari Satuan Kerja">
            <button class="btn" type="submit"><i data-feather="search"></i></button>
          </div>
        </div>
        <div class="col-md-4">
          @if(Session::get('useractive')->level_akses_id==1)
          <div class="pull-right">
            <a href="#modal-satker" data-toggle="modal" class="btn btn-secondary me-2">Tree Satker</a>
            <button class="btn btn-primary" onclick="add_satker()">Tambah</button>
          </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['detail-satker']!!}
          </div>
          <div class="col-md-6">
          </div>
        </div>
      </div>
      <table class="table table-vertical-middle" id="datatable">
        <thead>
          <tr>
            <th>Kode</th>
            <th>Nama Satuan Kerja</th>
            <th>Pimpinan Satker</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @foreach ($data['satker'] as $key => $value)
            <tr>
              <td>{{$value->kode_satuan_kerja}}</td>
              <td>
                <h6>{{$value->satuan_kerja}}</h6>
              <td>
{{--                @if(count($value->kode_satuan_kerja ) == 1 )--}}
{{--                  @if($value->nama_kepala == null )--}}
{{--                  <div style="font-style:italic">Pimpinan Satker tidak Ditemukan</div>--}}
{{--                  @else--}}
{{--                  <div class="text-truncated-1">{{$value->nama_jabatan}}</div>--}}
{{--                  <h6 class="text-truncated-1">{{$value->nama_kepala}}</h6>--}}
{{--                  <div class="tx-gray-700">NIP. {{$value->nip_kepala}}</div>--}}
{{--                  @endif--}}
{{--                @else--}}
{{--                  <div style="font-style:italic">Bukan Satker Induk</div>--}}
{{--                @endif--}}
              </td>
              <td style="width:1px;white-space:nowrap;">
                <a href="{{ route('satker',['parent'=>$value->id]) }}" class="button dark ripple-effect ico">
                  <i data-feather="search" class="tx-white-8 wd-20 ht-20 "></i>
                </a>
{{--                <a href="javascript:;" onclick="edit_satker({{$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('proses_satker') }}" method="post" id="hapus{{$value->id}}">
                  {{ csrf_field() }}
                  <input type="hidden" name="id" value="{{$value->id}}">
{{--                  <input type="hidden" name="parent_id" value="{{$value->parent_id}}">--}}
                  <input type="hidden" name="action" value="delete">
                </form>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  <div class="modal fade" id="form-satker" role="dialog">
    <div class="modal-dialog">
      <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('proses_satker') }}" method="post" enctype="multipart/form-data" data-parsley-validate >
          {{ csrf_field() }}
          <div class="modal-body">
            <div class="form-group">
              <label>Nama Satuan Kerja</label>
              <input type="text" class="form-control" id="nama_satker" name="nama_satker" required >
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Kode Satker</label>
                  <input type="text" class="form-control" id="kode_satker" name="kode_satker" required >
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Jumlah Hari Kerja</label>
                  <select class="select2" style="width:100%" name="hari_kerja" id="hari_kerja">
                    <option value="6">6 Hari Kerja</option>
                    <option value="5">5 Hari Kerja</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="custom-control custom-checkbox mb-3">
              <input type="checkbox" class="custom-control-input" name="is_induk" value="1" id="is_induk">
              <label class="custom-control-label" for="is_induk">Satuan Kerja Induk</label>
            </div>
            <div id="form_satker_induk">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Nama Jabatan</label>
                    <input type="text" class="form-control" id="nama_jabatan" name="nama_jabatan">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label>NIP Kepala</label>
                    <input type="text" class="form-control" id="nip_kepala" name="nip_kepala">
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label>Alamat</label>
                <input type="text" class="form-control" id="alamat" name="alamat" >
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Email</label>
                    <input type="text" class="form-control" id="email" name="email" >
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label>No. Telephone</label>
                    <input type="text" class="form-control" id="no_telp" name="no_telp" >
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label>Website</label>
                <input type="text" class="form-control" id="website" name="website">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <input type="hidden" name="id" id="id" >
            <input type="hidden" name="parent_id" value="{{$parent}}" >
            <button type="button" class="btn btn-dark" data-dismiss="modal">Batalkan</button>
            <button type="submit" class="btn btn-primary" name="action" id="action">Simpan</button>
          </div>
        </form>
      </div>
    </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>
  table = $('#datatable').DataTable({
    "ordering": false,
    "bLengthChange": false,
    "paging": false,
    "bInfo" : false
  });

  $('#search').keyup(function(){
    table.search($(this).val()).draw() ;
  });

  $("#is_induk").click(function () {
    if ($(this).prop("checked") == false) {
      // Sembunyikan form dan hapus atribut required
      $('#form_satker_induk').hide();
      $('#form_satker_induk :input').each(function () {
          $(this).removeAttr('required');
      });
    } else if ($(this).prop("checked") == true) {
      // Tampilkan form dan tambahkan atribut required
      $('#form_satker_induk').show();
      $('#form_satker_induk :input').each(function () {
          $(this).attr('required', 'required');
      });
    }
  });

  function add_satker(){
    $('#kode_satker').val('');
    $('#nama_satker').val('');
    $('#nip_kepala').val('');
    $('#nama_jabatan').val('');
    $('#is_induk').prop("checked",false);
    $('#id').val(0);
    $('#action').val('add');
    $('#title').html('Tambah Satuan Kerja');
    $('#form-satker').modal('show');
  }

  function edit_satker(id){
    $.get("{{ url('api/find_satker') }}/"+id, function (result) {
      $('#kode_satker').val(result.kode);
      $('#nama_satker').val(result.nama_satker);
      $('#nip_kepala').val(result.nip_kepala);
      $('#nama_jabatan').val(result.nama_jabatan);
      $('#alamat').val(result.alamat);
      $('#no_telp').val(result.no_telp);
      $('#email').val(result.email);
      $('#website').val(result.website);
      if(result.is_satker_induk == 1 ){
        $('#is_induk').prop("checked",true);
        $('#form_satker_induk').show();
      }
      else{
        $('#is_induk').prop("checked",false);
        $('#form_satker_induk').hide();
      }
      $('#id').val(id);
      $('#action').val('edit');
      $('#title').html('Edit Satuan Kerja');
      $('#form-satker').modal('show');
    });
  }

  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('satker') }}?parent='+data.node.original.id;
  });
  $('#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