@extends('template')

@section('title')
	HRIS | Jabatan
@stop

@section('top_script')
	@include('organisasi::layouts.top_script')
@stop

@section('content')
<section id="content">
    <section class="vbox">
        <section class="scrollable padder">
            <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                <li><a href="{{ url('home') }}"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#">Organisasi</a></li>
                <li class="active">Jabatan</li>
            </ul>
            <section class="panel panel-info">
                <header class="panel-heading font-bold" style="padding: 0">
					<div class="row">
						<div class="col-md-12" style="padding: 5px 25px">
							Kelola Data Jabatan
						</div>
					</div>
				</header>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12 col-xs-12"><span class="msg_form"></span></div>
                        <div class="col-md-6 col-xs-12">
                            <div class="col-md-12" style="margin-bottom:15px;">
                                <form id="enter-tree">
                                    <input type="text" class="form-control" name="search" placeholder="Cari Data Jabatan">
                                </form>
                            </div>
                            <div class="col-md-12 col-xs-12" style="margin-bottom:15px; text-align:right ">
                                <button type="button" class="btn btn-info btn-xs" id="tree-deselect"><i class="fa fa-warning"></i> Deselect</button>
                                @can('organisasi.jabatan.create')
                                    <button type="button" class="btn btn-success btn-xs" id="tree-create"><i class="fa fa-check"></i> Tambah</button>
                                @endcan
                                @can('organisasi.jabatan.edit')
                                    <button type="button" class="btn btn-warning btn-xs" id="tree-update"><i class="fa fa-pencil"></i> Ubah</button>
                                @endcan
                                @can('organisasi.jabatan.delete')
                                    <button type="button" class="btn btn-danger btn-xs" id="tree-delete"><i class="fa fa-times"></i> Hapus</button>
                                @endcan
                            </div>
                            <div class="col-md-12" id="jabatan-tree" style="overflow-x:auto"></div>
                        </div>
                        <div class="col-md-6 col-xs-12" id="form-tree">
                            <form id="insertJabatan">
                                <input name="id" type="hidden" disabled>
                                <div class="form-group">
                                    <label class="control-label">Unit</label>
                                    <select name="unit_id" class="select2-option" style="width:100%" data-placeholder="Pilih Unit" disabled>
                                        {!! $data['opt_unit'] !!}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Atasan :</label>
                                    <input name="sub_id" type="hidden" disabled>
                                    <div class="input-group">
                                        <input name="nama_jabatan" data-required="true" type="text" class="form-control" placeholder="Pilih Atasan" disabled>
                                        <span class="input-group-btn"> 
                                            <button class="btn btn-warning" id="button-modal-atasan" type="button" data-toggle="modal" data-target="#modal-jabatan" disabled>Pilih Jabatan</button> 
                                        </span> 
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Kode Jabatan</label>
                                    <input name="kode" type="text" class="form-control" placeholder="Isikan Kode Jabatan" disabled>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Layer</label>
                                    <input name="layer" type="text" class="form-control" placeholder="Isikan Layer" disabled>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Nama Jabatan</label>
                                    <input name="nama" type="text" class="form-control" placeholder="Isikan Nama Jabatan" disabled> 
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Lokasi</label>
                                    <select name="lokasi" class="select2-option" style="width:100%" data-placeholder="Pilih Lokasi" disabled>
                                        {!! $data['opt_lokasi'] !!}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Keterangan</label>
                                    <textarea name="keterangan" class="form-control" placeholder="Isikan Keterangan Jabatan" disabled></textarea>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Jenis Jabatan</label>
                                    <select name="jenis" class="select2-option" style="width:100%" data-placeholder="Pilih Jenis Jabatan" disabled>
                                        <option value=""></option>
                                        <option value="struktural">Struktural</option>
                                        <option value="fungsional">Fungsional</option>
                                    </select>
                                </div>
								<div class="form-group">
                                    <label class="control-label">PP</label>
									<select name="pp_id" class="select2-option" style="width:100%" data-placeholder="Pilih PP" disabled>
										<option value=""></option>
										@foreach ($data['pp_master'] AS $k => $v)
											<option value="{{ $v->id }}">{{ $v->no_pp }} {{ (empty($v->keterangan) ? '':'('.$v->keterangan.')') }}</option>
										@endforeach
									</select>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Aktif</label>
                                    <select name="aktif" class="select2-option" style="width:100%" data-placeholder="Pilih Status Aktif" disabled>
                                        <option value=""></option>
                                        <option value="1">Aktif</option>
                                        <option value="0">Tidak Aktif</option>
                                    </select>
                                </div>
                                @canatleast(['organisasi.jabatan.create', 'organisasi.jabatan.edit'])
                                    <div class="form-group pull-right" id="button-submit" style="display:none">
                                        <button type="reset" class="btn btn-sm btn-danger">Batal</button>
                                        <button id="save" type="submit" class="btn btn-sm btn-primary">Simpan</button>
                                    </div>
                                @endcanatleast
                            </form>
                        </div>    
                    </div>
                </div>
            </section>
            <section class="panel panel-danger">
                <header class="panel-heading font-bold">Data Jabatan Non-Aktif<i class="fa fa-info-sign text-muted" data-toggle="tooltip" data-placement="bottom" data-title="ajax to load the data."></i> </header>
                <div class="table-responsive">
                    <span class="msg_table"></span>
                    <table id="jabatan-data" class="table table-striped m-b-none table-hover" width="100%" style="font-size: 11px">
                        <thead>
                            <tr>
                                <th class="text-center">UNIT</th>
                                <th class="text-center">JABATAN</th>
                                <th class="text-center">LOKASI</th>
                                <th width="15%" class="text-center">AKSI</th>
                            </tr>
                        </thead>
                        <tbody> </tbody>
                    </table>
                </div>
            </section>
        </section>
    </section>
    <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
</section>

<div id="modal-jabatan" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:70%;">
        <div class="modal-content">
            <div class="modal-header" style="border-radius:6px;color:#3a87ad; background-color:#f5f5f5">
                <button class="close" data-dismiss="modal" type="button">×</button>
                <h4 class="modal-title">Daftar Jabatan</h4>
            </div>
            <div class="modal-body">
                <form class="col-md-12" id="submit_search">
                    <input type="text" class="form-control" name="cari" placeholder="Cari">
                </form>
            </div>
            <div class="modal-body" style="max-height:430px; overflow-y:auto;">
                <div class="col-md-12">
                    <div id="atasan"></div>
                </div>
            </div>
            <div class="modal-footer" style="border-radius:6px;color:#3a87ad; background-color:#f5f5f5">
                <a class="btn btn-danger" data-dismiss="modal" href="#">Close</a>
            </div>
        </div>
    </div>
</div>

@stop

@section('bottom_script')
	@include('organisasi::layouts.bottom_script')
@stop