@extends('template')

@section('title')
	HRIS | Rekomendasi Berkala 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;
	    }
	    .dataTables_filter {
	        float: right !important;
	        padding-right:0 !important;
	    }
	    .dataTables_length {
	        float: left !important;
	    }
	    .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;
	    }
	</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">Rekomendasi Kenaikan berkala pegawai</li>
    </ul>
	<div class="m-b-md text-center" style="margin-bottom: 10px !important">
        <h5 class="m-b-none"><strong>REKOMENDASI</strong> KENAIKAN BERKALA PEGAWAI<strong>[ DATA BELUM MEMPENGARUHI APA APA | Rumus belum FIX ]</strong></h5>
        <span style="font-size: 11px">Fitur untuk merekomendasikan kenaikan berkala pegawai</span>
    </div>
	<section class="panel panel-info">
		<header class="panel-heading text-right bg-light" style="padding-right:0px">
			<div class="row">
				<div class="col-md-12">
					<ul class="nav nav-tabs pull-left">
						<li class="active"><a href="#rekomendasi-berkala" onclick="data()" data-toggle="tab"><i class="fa fa-star text-default"></i> Rekomendasi kenaikan berkala</a></li>
                        <li><a href="#pengajuan-berkala" onclick="data_pengajuan()" data-toggle="tab"><i class="fa fa-th-list text-default"></i> Pengajuan</a></li>
					</ul>
				</div>
			</div>
		</header>
		<div class="panel-body" style="padding:0px">
            <div class="tab-content">
                <div class="tab-pane fade active in" id="rekomendasi-berkala">
					<section class="panel panel-default portlet-item" style="margin-bottom:0px">
						<section class="panel-body text-center">
							<form role="form" class="form-inline" id="rekomendasi-form">
								<div class="form-group">
                                    <label>Target Tanggal : </label>
                                </div>
                                <div class="form-group">
									<input type="date" class="form-control" name="tanggalTarget" />
								</div>
                                <button class="btn btn-success btn-sm" type="submit">Tampilkan Data</button>
                                <button class="btn btn-info btn-sm" type="button" id="ajukan">Ajukan</button>
							</form>
						</section>
						<section class="panel-body" style="padding: 0; border-top: 2px dotted #ccc;">
							<div class="table-responsive">
                                <span class="msg_table"></span>
                                <table id="data-rekomendasi-berkala" class="table table-striped m-b-none" width="2000px" style="font-size: 11px; max-width:7000px">
                                    <thead style="background-color:azure">
                                        <tr>
											<th style="width:40px; text-align: center"><input type="checkbox" id="check-all" style="width:15px;height:12px"></th>
											<th style="width:100px; text-align: center">NIP</th>
											<th style="width:200px; text-align: center">NAMA</th>
                                            <th style="width:250px; text-align: center">BAGIAN</th>
                                            <th style="width:200px; text-align: center">PANGKAT</th>
                                            <th style="width:150px; text-align: center">TANGGAL TARGET</th>
                                            <th style="width:150px; text-align: center">TMT BERKALA</th>
                                            <th style="width:150px; text-align: center">TMT PANGKAT</th>
                                            <th style="width:150px; text-align: center">TMT DASAR GAJI</th>
                                            <th style="width:150px; text-align: center">SK DASAR GAJI</th>
                                            <th style="width:150px; text-align: center">TANGGAL SANKSI</th>
                                            <th style="width:150px; text-align: center">KATEGORI 1</th>
                                            <th style="width:100px; text-align: center">NILAI 1</th>
                                            <th style="width:150px; text-align: center">KATEGORI 2</th>
                                            <th style="width:100px; text-align: center">NILAI 2</th>
                                            <th style="width:150px; text-align: center">KATEGORI 3</th>
                                            <th style="width:100px; text-align: center">NILAI 3</th>
                                            <th style="width:75px; text-align: center">MKT</th>
                                            <th style="width:75px; text-align: center">MKB</th>
                                            <th style="width:75px; text-align: center">NMKT</th>
                                            <th style="width:75px; text-align: center">NMKB</th>
                                            <th style="width:150px; text-align: center">Gaji</th>
                                            <th style="width:300px; text-align: center">Terbilang Gaji</th>
                                            <th style="width:150px; text-align: center">Gaji Naik Berkala</th>
                                            <th style="width:300px; text-align: center">Terbilang Gaji Naik Berkala</th>
                                            <th style="width:150px; text-align: center">KET BERKALA</th>
                                            <th style="width:100px; text-align: center">NMKT P</th>
                                            <th style="width:150px; text-align: center">Gaji Naik Pangkat</th>
                                            <th style="width:300px; text-align: center">Terbilang Gaji Naik Pangkat</th>
                                            <th style="width:150px; text-align: center">KET PANGKAT</th>
                                            <th style="width:100px; text-align: center">KODE</th>
                                            <th style="width:100px; text-align: center">LAYER</th>
                                            <th style="width:100px; text-align: center">URUT 1</th>
                                            <th style="width:200px; text-align: center">MASA KERJA</th>
                                        </tr>
                                        <tr>
											<th style="padding:0"></th>
											<th style="padding:0"><input type="text" class="cari" name="nip" placeholder="NIP" style="width:100px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="nama" placeholder="Nama" style="width:250px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="unit" placeholder="Unit" style="width:250px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="pangkat" placeholder="Pangkat" style="width:200px;"></th>
											<th style="padding:0"><input type="text" name="tgl_target" placeholder="Tanggal Target" style="width:150px;" disabled></th>
											<th style="padding:0"><input type="text" name="tmt_berkala" placeholder="YYYY-MM-DD" style="width:150px;"></th>
											<th style="padding:0"><input type="text" name="tmt_pangkat" placeholder="YYYY-MM-DD" style="width:150px;"></th>
											<th style="padding:0"><input type="text" name="tmt_dasar_gaji" placeholder="YYYY-MM-DD" style="width:150px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="sk_dasar_gaji" placeholder="SK" style="width:150px;"></th>
											<th style="padding:0"><input type="text" name="tgl_sanksi" placeholder="YYYY-MM-DD" style="width:150px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="kategori1" placeholder="Kategori 1" style="width:150px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="nilai1" placeholder="Nilai 1" style="width:100px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="kategori2" placeholder="Kategori 2" style="width:150px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="nilai2" placeholder="Nilai 2" style="width:100px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="kategori3" placeholder="Kategori 3" style="width:150px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="nilai3" placeholder="Nilai 3" style="width:100px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="mkt" placeholder="MKT" style="width:75px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="mkb" placeholder="MKB" style="width:75px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="nmkt" placeholder="NMKT" style="width:75px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="nmkb" placeholder="NMKB" style="width:75px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="gj" placeholder="Gaji" style="width:150px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="t_gj" placeholder="Terbilang Gaji" style="width:300px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="gjn_b" placeholder="Gaji Naik Berkala" style="width:150px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="t_gjn_b" placeholder="Terbilang Gaji Naik Berkala" style="width:300px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="ket_b" placeholder="Ket Berkala" style="width:150px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="nmkt_p" placeholder="NMKT P" style="width:100PX;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="gjn_p" placeholder="Gaji Naik Pangkat" style="width:150px;"></th>
											<th style="padding:0"><input type="text" class="cari" name="t_gjn_p" placeholder="Terbilang Gaji Naik Pangkat" style="width:300px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="ket_p" placeholder="Ket Pangkat" style="width:150px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="kode" placeholder="Kode" style="width:100px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="layer" placeholder="Layer" style="width:100px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="urut1" placeholder="Urut 1" style="width:100px;" disabled></th>
											<th style="padding:0"><input type="text" class="cari" name="masa_kerja" placeholder="Masa Kerja" style="width:200px;"></th>
										</tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
						</section>
					</section>
				</div>
				<div class="tab-pane fade" id="pengajuan-berkala">
					<section class="panel panel-default portlet-item" style="margin-bottom:0px">
						<section class="panel-body text-center">
							<form role="form" class="form-inline" id="rekomendasi-form">
                                <button class="btn btn-info btn-sm" type="button" id="approve">Setujui</button>
                                <button class="btn btn-warning btn-sm" type="button" id="cancel">Batalkan</button>
							</form>
						</section>
						<section class="panel-body" style="padding: 0; border-top: 2px dotted #ccc;">
							<div class="table-responsive">
                                <span class="msg_table"></span>
                                <table id="data-pending-rekomendasi-berkala" class="table m-b-none" width="2000px" style="font-size: 11px; max-width:7000px">
                                    <thead style="background-color:azure">
                                        <tr>
											<th style="width:40px; text-align: center"><input type="checkbox" id="check-all2" style="width:15px;height:12px"></th>
											<th style="width:100px; text-align: center">NIP</th>
											<th style="width:200px; text-align: center">NAMA</th>
                                            <th style="width:250px; text-align: center">BAGIAN</th>
                                            <th style="width:200px; text-align: center">PANGKAT</th>
                                            <th style="width:150px; text-align: center">TANGGAL TARGET</th>
                                            <th style="width:150px; text-align: center">TMT BERKALA</th>
                                            <th style="width:150px; text-align: center">TMT PANGKAT</th>
                                            <th style="width:150px; text-align: center">TMT DASAR GAJI</th>
                                            <th style="width:150px; text-align: center">SK DASAR GAJI</th>
                                            <th style="width:150px; text-align: center">TANGGAL SANKSI</th>
                                            <th style="width:150px; text-align: center">KATEGORI 1</th>
                                            <th style="width:100px; text-align: center">NILAI 1</th>
                                            <th style="width:150px; text-align: center">KATEGORI 2</th>
                                            <th style="width:100px; text-align: center">NILAI 2</th>
                                            <th style="width:150px; text-align: center">KATEGORI 3</th>
                                            <th style="width:100px; text-align: center">NILAI 3</th>
                                            <th style="width:75px; text-align: center">MKT</th>
                                            <th style="width:75px; text-align: center">MKB</th>
                                            <th style="width:75px; text-align: center">NMKT</th>
                                            <th style="width:75px; text-align: center">NMKB</th>
                                            <th style="width:150px; text-align: center">Gaji</th>
                                            <th style="width:300px; text-align: center">Terbilang Gaji</th>
                                            <th style="width:150px; text-align: center">Gaji Naik Berkala</th>
                                            <th style="width:300px; text-align: center">Terbilang Gaji Naik Berkala</th>
                                            <th style="width:150px; text-align: center">KET BERKALA</th>
                                            <th style="width:100px; text-align: center">NMKT P</th>
                                            <th style="width:150px; text-align: center">Gaji Naik Pangkat</th>
                                            <th style="width:300px; text-align: center">Terbilang Gaji Naik Pangkat</th>
                                            <th style="width:150px; text-align: center">KET PANGKAT</th>
                                            <th style="width:100px; text-align: center">KODE</th>
                                            <th style="width:100px; text-align: center">LAYER</th>
                                            <th style="width:100px; text-align: center">URUT 1</th>
                                            <th style="width:200px; text-align: center">MASA KERJA</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
						</section>
					</section>
				</div>
			</div>
		</div>
	</section>
</section>
<div id="modal-simpan-sk" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:800px">
        <div class="modal-content">
            <div class="modal-header" style="border-radius:6px 6px 0 0; color:#3a87ad; background-color:#f5f5f5">
                <button class="close" data-dismiss="modal" type="button">×</button>
                <h4 class="modal-title">Simpan data SK</h4>
            </div>
            <form id="insertSK">
                <div class="modal-body">
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">NO SK :</span>
                            <input name="no_sk" value='testing berkala' data-required="true" type="text"  class="form-control required" placeholder="Masukkan No SK"> 
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">TGL SK :</span>
                            <input name="tgl_sk" value='01-01-2025' data-required="true" type="text" data-date-format="dd-mm-yyyy" class="form-control datepicker-input required" placeholder="Masukkan Tgl SK"> 
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">TMT :</span>
                            <input name="tmt" value='01-01-2025' data-required="true" type="text" data-date-format="dd-mm-yyyy" class="form-control datepicker-input required" placeholder="Masukkan TMT"> 
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">KETERANGAN :</span>
                            <textarea name="keterangan" class="form-control" placeholder="Masukkan Keterangan">Testing</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                            <input name="foto" type="file" class="filestyle" data-icon="false" data-classButton="btn btn-default" data-classInput="form-control inline input-s" style="display:none"> 
                    </div>
					<input type="hidden" name="sk_id" />
					<table class="table table-striped table-bordered" id="table-list-pending">
						<thead>
							<tr>
								<td style="width: 50px">No</td>
								<td>NIP</td>
								<td>NAMA</td>
								<td>GOLONGAN BARU</td>
								<td>MKG (tahun)</td>
								<td>MKG (bulan)</td>
								<td style="width: 120px">GAJI POKOK</td>
								<td style="width: 165px">SIMPAN</td>
							</tr>
						</thead>
						<tbody id="table-list-pending-tbody">
						</tbody>
					</table>
                </div>
                <div class="modal-footer" style="border-radius:0 0 6px 6px; color:#3a87ad; background-color:#f5f5f5; margin-top:0px">
                    <button type="submit" class="btn btn-info" id="simpan-sk">Simpan SK</button>
                    <button type="reset" class="btn btn-danger" data-dismiss="modal" >Close</button>
                    <button type="reset" class="btn btn-success" id="selesai-sk">Selesai</button>
                </div>
            </form>
        </div>
    </div>
</div>
@stop

@section('bottom_script')
	@include('kepegawaian::layouts.bottom_script')
	<script src="{{ asset('js/datatables/new/js/dataTables.colVis.js') }}"></script>
@stop