@extends('template')

@section('title')
	HRIS | Kelengkapan Kontrak 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;
        }
        .select2-container .select2-choice > .select2-chosen {
            font-size: 11px;
            font-weight: normal;
            color: #717171;
        }
        tbody td {
            vertical-align: middle !important;
        }
        .table thead tr th {
            background-color: #2e3e4e;
            color: #f5f5f5;
            font-size: 10px !important;
        }
        .table thead tr th input {
            border-radius: 0px;
            line-height: 16px;
        }
        /*.dataTables_scrollBody > table > thead > tr > th {
            line-height: 5px;
        }*/
        .panel .table td {
            padding: 2px 5px;
            vertical-align: middle;
        }
		#modal-atasan .table td {
			padding: 5px;
            vertical-align: middle;
		}
	</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">Kelengkapan Kontrak Pegawai</li>
    </ul>
    <div class="m-b-md" style="margin-bottom: 10px !important">
        @can('kepegawaian.kontrak.edit_gaji')
        @if(format_date('m') == '01' && format_date('d') <= 10)
        <a id="config-gp" class="btn btn-sm btn-info pull-right" href="#modal-config" data-toggle="modal" data-target="#modal-config"><i class="fa fa-cog"></i> Ubah GP Kontrak</a>
        @endif
        @endcan
        <h5 class="m-b-none"><strong>DATA</strong> PEGAWAI KONTRAK</h5>
        <span style="font-size: 11px">Fitur untuk merubah data anggaran dan nominal gaji bagi pegawai kontrak</span>
    </div>
    <section class="panel panel-info">
        <header class="panel-heading text-right bg-light" style="padding:13px 16px; padding-top: 11px;">
            <ul class="nav nav-tabs pull-left" style="font-size: 10px; font-weight: bold">
                <li class="active"><a href="#per-bulan" data-toggle="tab" style="padding:5px 10px"><i class="fa fa-calendar text-default"></i> PER BULAN</a></li>
                <li><a href="#all-pegawai" data-toggle="tab" style="padding:5px 10px"><i class="fa fa-group text-default"></i> SEMUA PEGAWAI</a></li>
            </ul>
        </header>
        <div class="panel-body" style="padding:0px">
            <div class="tab-content">
                <div class="tab-pane fade active in" id="per-bulan">
                    <section class="panel panel-default portlet-item" style="margin-bottom:0px">
                        <section class="panel-body text-center">
                            <form role="form" class="form-inline" id="kelengkapan-form">
                                <div class="form-group">
                                    <label>Filter : </label>
                                </div>
                                <div class="form-group">
                                    <select id="select-bulan" style="width:200px" name="bulan">
                                        <option value="01" @if(format_date('m') == '01') selected @endif>Januari</option>
                                        <option value="02" @if(format_date('m') == '02') selected @endif>Februari</option>
                                        <option value="03" @if(format_date('m') == '03') selected @endif>Maret</option>
                                        <option value="04" @if(format_date('m') == '04') selected @endif>April</option>
                                        <option value="05" @if(format_date('m') == '05') selected @endif>Mei</option>
                                        <option value="06" @if(format_date('m') == '06') selected @endif>Juni</option>
                                        <option value="07" @if(format_date('m') == '07') selected @endif>Juli</option>
                                        <option value="08" @if(format_date('m') == '08') selected @endif>Agustus</option>
                                        <option value="09" @if(format_date('m') == '09') selected @endif>September</option>
                                        <option value="10" @if(format_date('m') == '10') selected @endif>Oktober</option>
                                        <option value="11" @if(format_date('m') == '11') selected @endif>November</option>
                                        <option value="12" @if(format_date('m') == '12') selected @endif>Desember</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <select id="select-tahun" style="width:125px" name="tahun">
                                        {!! $tahun !!}
                                    </select>
                                </div>
                                <button class="btn btn-success btn-sm" type="submit">Tampilkan Data</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-pegawai" class="table table-bordered m-b-none" width="100%" style="font-size: 11px">
                                    <thead>
                                        <tr>
                                            <th class="text-center" style="width:100px">NIP</th>
                                            <th class="text-center" style="width:150px">NAMA</th>
                                            <th class="text-center" style="width:200px">JABATAN</th>
                                            <th class="text-center" style="width:150px">KODE PERKIRAAN</th>
                                            <th class="text-center" style="width:150px">GAJI POKOK</th>
                                            <th class="text-center" style="width:450px">ANGGARAN</th>
                                            <th class="text-center" style="width:100px">AKSI</th>
                                        </tr>
										<tr>
											<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
											<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
											<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
											<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
											<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
											<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
											<th style="padding:0"></th>
										</tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </section>
                    </section>
                </div>
                <div class="tab-pane fade" id="all-pegawai">
                    <div class="table-responsive">
                        <span class="msg_table"></span>
                        <table id="semua-pegawai" class="table table-bordered m-b-none" width="100%" style="font-size: 11px">
                            <thead>
                                <tr>
									<th class="text-center" style="width:100px">NIP</th>
									<th class="text-center" style="width:150px">NAMA</th>
									<th class="text-center" style="width:200px">JABATAN</th>
									<th class="text-center" style="width:150px">KODE PERKIRAAN</th>
									<th class="text-center" style="width:150px">GAJI POKOK</th>
									<th class="text-center" style="width:450px">ANGGARAN</th>
									<th class="text-center" style="width:100px">AKSI</th>
								</tr>
								<tr>
									<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
									<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
									<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
									<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
									<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
									<th style="padding:0"><input type="text" placeholder="Enter Here..." style="width:100%"></th>
									<th style="padding:0"></th>
								</tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
@can('kepegawaian.kontrak.detail')
<div id="modal-kelengkapan" class="modal fade in" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:60%">
        <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">DATA KELENGKAPAN KONTRAK</h4>
            </div>
            <form id="form-kelengkapan">
                <div class="modal-body">
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">PEGAWAI</span>
                            <input name="keyword" type="text" class="form-control" placeholder="Cari NO SK" readonly>
                            <input name="id" type="hidden">
                            <input name="pegawai_id" type="hidden">
                            <input name="sk_id" type="hidden">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">UNIT</span>
                            <input name="unit" type="text" class="form-control" readonly>
                            <span class="input-group-addon">JABATAN</span>
                            <input name="jabatan" type="text" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">KODE PERKIRAAN</span>
                            <input name="kode_perkiraan" type="text" class="form-control" placeholder="Kode Perkiraan">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">ANGGARAN <span style="color: #fa5542">*</span></span>
                            <select name="anggaran" data-required="true" class="select2-option" style="width:100%" data-placeholder="Pilih Anggaran">
                                {!! $opt_unit !!}
                            </select> 
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom: 0px">
                        <div class="input-group m-b">
                            <span class="input-group-addon">GAJI POKOK <span style="color: #fa5542">*</span></span>
                            <input name="gaji_show" type="text" class="form-control" placeholder="Gaji Pokok" readonly>
                            <input name="nama_gaji" class="nama_gaji" type="hidden">
                            <input name="gaji_pokok" class="gaji_pokok" type="hidden">
                            <input name="gaji_id" type="hidden">
                            @can('kepegawaian.kontrak.detail_gaji')
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" id="salary-picker">Pilih Gaji</button>
                                </span>
                            @endcan
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">KEGIATAN <span style="color: #fa5542">*</span></span>
                            <input name="kegiatan" type="text" class="form-control" placeholder="Kode Kegiatan">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">KETERANGAN</span>
                            <!--<textarea name="keterangan" class="form-control" placeholder="Keterangan" rows="2"></textarea>-->
							<select name="keterangan" data-required="true" class="select2-option" style="width:100%" data-placeholder="Pilih Keterangan Kontrak">
								<option value="">- Pilih Keterangan Kontrak -</option>
                                <option value="KONTRAK I - Perjanjian Kerja">KONTRAK I - Perjanjian Kerja</option>
								<option value="KONTRAK I - Addendum">KONTRAK I - Addendum</option>
                                <option value="KONTRAK II - Perpanjangan Perjanjian Kerja">KONTRAK II - Perpanjangan Perjanjian Kerja</option>
								<option value="KONTRAK II - Addendum">KONTRAK II - Addendum</option>
                                <option value="KONTRAK III - Pembaharuan Perjanjian Kerja">KONTRAK III - Pembaharuan Perjanjian Kerja</option>
								<option value="KONTRAK III - Addendum">KONTRAK III - Addendum</option>
								<option value="KONTRAK IV - Istimewa">KONTRAK IV - Istimewa</option>
								<option value="KONTRAK IV - Addendum">KONTRAK IV - Addendum</option>
                            </select>
                        </div>
                        @can('kepegawaian.kontrak.edit')
                            <span class="help-block m-b-none" style="color:#fa5542">* wajib diisi</span>
                        @endcan
                    </div>
                </div>
                <div class="modal-footer" style="border-radius:0 0 6px 6px; color:#3a87ad; background-color:#f5f5f5; margin-top:0px">
                    <button class="btn btn-danger" data-dismiss="modal">Close</button>
                    @can('kepegawaian.kontrak.edit')
                        <button type="submit" class="btn btn-info">Simpan</button>
                    @endcan
                </div>
            </form>
        </div>
    </div>
</div>
@endcan
@can('kepegawaian.kontrak.detail_gaji')
<div id="modal-gp" class="modal fade in" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <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">DATA GAJI POKOK KONTRAK</h4>
            </div>
            <div class="modal-body">
                @canatleast(['kepegawaian.kontrak.create_gaji', 'kepegawaian.kontrak.edit_gaji'])
                    <form id="form-gp">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">NAMA</span>
                                <input name="nama_gaji" type="text" class="form-control">
                                <span class="input-group-addon">NOMINAL</span>
                                <input name="gaji_pokok" type="text" class="form-control">
                                <input type="hidden" name="id"></input>
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="submit" id="salary-picker">Simpan</button>
                                    <button class="btn btn-primary" type="button" id="clear-salary">Clear</button>
                                </span>
                            </div>
                            <span class="help-block m-b-none" style="font-size:10px">Gunakan <span class="label bg-primary">Clear</span> untuk menghapus data sebelum melakukan penambahan data gaji</span>
                        </div>
                    </form>
                @endcanatleast
                <table id="gp-data" class="table table-hover table-bordered m-b-none" width="100%" style="font-size: 11px">
                    <thead>
                        <tr>
                            <th class="text-center">NO</th>
                            <th class="text-center">NAMA GP</th>
                            <th class="text-center">NOMINAL GP</th>
                            <th class="text-center">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endcan

<div id="modal-config" class="modal fade in" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <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">UPDATE GAJI POKOK KONTRAK</h4>
            </div>
            <div class="modal-body">
				<div class="alert alert-info alert-block">
					<button type="button" class="close" data-dismiss="alert">×</button>
					<p>Update gaji pokok pegawai kontrak dilakukan apabila ada perubahan besaran UMK. Silahkan masukkan besaran gaji pokok sesuai jenjang dibawah ini.</p>
				</div>
                <form id="form-config-gp">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">SMA</span>
                            <input name="gp_sma" type="text" class="form-control">
                            <span class="input-group-addon">D3</span>
                            <input name="gp_d3" type="text" class="form-control">
                            <span class="input-group-addon">S1</span>
                            <input name="gp_s1" type="text" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-success" type="submit" id="salary-picker">Simpan</button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@stop

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