@extends('template')

@section('title')
	HRIS | Data Pegawai
@stop

@section('top_script')
	@include('kepegawaian::layouts.top_script')
	<style type="text/css">
	    .select2-default {
	        font-size: 11px !important;
	        padding-left: auto !important;
	    }
	    .dataTables_wrapper select, .dataTables_wrapper input {
	        height: auto !important;
	        font-size: 11px !important;
	        padding: 6px 10px;
	    }
	    .select2-container-multi .select2-choices .select2-search-field input {
	        margin:0 !important;
	        font-size: 11px !important;
	    }
	    .select2-container-multi .select2-choices .select2-search-choice {
	        margin: 2px 0 2px 2px;
	    }
	    .select2-container .select2-choice {
	        height: auto !important;
	        font-size: 11px;
	    }
	    .select2-container-multi.select2-container-active .select2-choices {
	        width: auto;
	    }
	    .select2-container-multi .select2-choices {
	        width: 1000px;
	    }
	    #filter-layer > .select2-container-multi .select2-choices {
	        width: 100% !important;
	    }
	    .select2-container .select2-choice > .select2-chosen {
	        font-size: 11px;
	        font-weight: normal;
	        color: #717171;
	    }
	    .tagsinput {
	        min-height: 30px !important;
	        height: 30px !important;
	        padding: 0 !important;
	        width: 175px !important
	    }
	    div.tagsinput span.tag {
	        padding:0 5px !important;
	        font-size: 11px !important;
	        margin:5px !important;
	    }
	    div.tagsinput input {
	        font-size: 11px !important;
	        width: 85px !important;
	    }
	    .ColVis {
	        margin: 0;
	        padding: 15px;
	    }
	    .ColVis_collection {
	        height: 350px;
	        overflow: scroll !important;
	        overflow-x: hidden !important;
	        background-color: #fff;
	        border: 1px solid #ccc;
	        padding-left: 15px;
	        list-style-type: none;
	    }
	    .show-button-column {
	        display: block !important;
	    }
	    .hide-button-column {
	        display: none !important;   
	    }
	    .checkbox {
	        margin-bottom:0;
	        margin-top:0;
	    }
	    .order-option > .select2-choices {
	        width: 100% !important;
	    }
	    .dataTables_wrapper select, .dataTables_wrapper input {
	    	padding: 6.5px 10px;
	    }
	    .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
	    	vertical-align: middle;
	    }
	    .table>thead>tr>td.j_new, .table>tbody>tr>td.j_new, .table>tfoot>tr>td.j_new {
	    	padding: 0px;
	    }
		.autocomplete-suggestions {
			overflow: scroll;
		}
		.autocomplete-suggestion {
			width: 500px;
		}
	</style>
@stop

@section('content')
<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="#">Kepegawaian</a></li>
		<li class="active">Perencanaan Mutasi</li>
		<!-- <li class="pull-right ref">
			<button class="btn btn-xs btn-primary" type="button"><i class="fa fa-refresh"></i></button>
		</li> -->
	</ul>
	<section class="panel panel-success" style="margin-bottom: 0px">
		<div class="row">
			<div class="col-md-12">
				<button type="button" class="btn btn-sm btn-info pull-right refresh" style="border-radius: 0"><i class="fa fa-refresh"></i> Refresh</button>
				<button type="button" class="btn btn-sm btn-primary pull-right struktur-modal" style="border-radius: 0; margin-right: 5px"><i class="fa fa-search"></i> Struktur Baru</button> 
			</div>
		</div>
	</section>
	<section class="panel panel-success">
		<div class="table-responsive">
			<span class="msg_table"></span>
			<table id="data" class="table table-hover table-bordered" style="font-size: 11px; margin-bottom: 0px !important">
				<thead>
					<tr style="background-color: #00262d; color: #fff">
						<th class="text-center" style="width: 75px">NIP</th>
						<th class="text-center" style="width: 150px">Nama</th>
						<th class="text-center" style="width: 100px">Layer</th>
						<th class="text-center" style="width: 250px">Jabatan</th>
						<th class="text-center" style="width: 250px">Bagian</th>
						<th class="text-center" style="width: 100px">Layer Baru</th>
						<th class="text-center" style="width: 250px">Jabatan Baru</th>
						<th class="text-center" style="width: 250px">Bagian Baru</th>
						<th class="text-center" style="width: 25px">Fix</th>
					</tr>
					<tr>
						<th class="text-center" style="padding: 0; width: 75px">
							<input type="text" class="form-control" placeholder="Enter Here..." style="width: 100%">
						</th>
						<th class="text-center" style="padding: 0; width: 150px">
							<input type="text" class="form-control" placeholder="Enter Here..." style="width: 100%">
						</th>
						<th class="text-center" style="padding: 0; width: 100px">
							<select class="select2" data-placeholder="Choose Here..." style="width: 100%">
								<option value=""></option>
								<option value="1">Direktur Utama</option>
								<option value="2">Direktur Bidang</option>
								<option value="3">Manajer Senior</option>
								<option value="4">Manajer</option>
								<option value="5">Supervisor</option>
								<option value="6">Staf Senior</option>
								<option value="7">Staf</option>
							</select>
						</th>
						<th class="text-center" style="padding: 0; width: 250px">
							<input type="text" class="form-control" placeholder="Enter Here..." style="width: 100%">
						</th>
						<th class="text-center" style="padding: 0; width: 250px">
							<input type="text" class="form-control" placeholder="Enter Here..." style="width: 100%">
						</th>
						<th class="text-center" style="padding: 0; width: 100px">
							<select class="select2" data-placeholder="Choose Here..." style="width: 100%">
								<option value=""></option>
								<option value="1">Direktur Utama</option>
								<option value="2">Direktur Bidang</option>
								<option value="3">Manajer Senior</option>
								<option value="4">Manajer</option>
								<option value="5">Supervisor</option>
								<option value="6">Staf Senior</option>
								<option value="7">Staf</option>
							</select>
						</th>
						<th class="text-center" style="padding: 0; width: 250px">
							<input type="text" class="form-control" placeholder="Enter Here..." style="width: 100%">
						</th>
						<th class="text-center" style="padding: 0; width: 250px">
							<input type="text" class="form-control" placeholder="Enter Here..." style="width: 100%">
						</th>
						<th class="text-center" style="padding: 0; width: 25px">
							<select class="select2" data-placeholder="Choose Here..." style="width: 100%">
								<option value=""></option>
								<option value="sudah">Sudah</option>
								<option value="belum">Belum</option>
							</select>
						</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</section>
</section>
<div id="modal" 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">Struktur Jabatan Baru</h4>
            </div>
            <div class="modal-body">
                <form class="col-md-12" id="submit_search">
                    <input type="text" class="form-control" name="search" placeholder="Cari">
                </form>
            </div>
            <div class="modal-body" style="max-height:430px; overflow-y:auto;">
                <div class="col-md-12">
                    <div id="tree"></div>
                </div>
            </div>
            <div class="modal-footer" style="border-radius:6px;color:#3a87ad; background-color:#f5f5f5">
                <button class="btn btn-danger btn-sm close-modal" type="button">Close</button>
            </div>
        </div>
    </div>
</div>
@stop

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