@extends('template')

@section('title')
	HRIS | Pegawai Teladan
@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;
        }
        .table thead tr th {
            background-color: #2e3e4e;
            color: #f5f5f5;
            vertical-align: middle;
        }
        .table thead tr td {
            vertical-align: middle;
        }
        .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;
        }
        .select2-container-multi .select2-choices {
            width: 100%;
        }
        .form-control {
            font-size: 11px;
            height: 30px;
        }
        /*.panel-heading {
            padding: 5px 15px;
        }*/
        .panel-heading .nav {
            font-size: 11px;
            font-weight: bold;
        }
        .panel-heading .nav-tabs>li>a {
            line-height: 0.5;
        }
        .panel-heading .nav-tabs>li.active>a, .panel-heading .nav-tabs>li.active>a:hover, .panel-heading .nav-tabs>li.active>a:focus {
            color: #f5f5f5;
            background: #5db2ff;
        }
        .jstree-default .jstree-search {
            color: #468847;
        }
        .nav-tabs.nav-justified>li {
            border: 0.5px solid #ccc;
            border-bottom: 0.5px solid #fff;
        }
        .link-a {
            color: blue;
            text-decoration: underline;
        }
		.link-a:hover {
            color: red;
            text-decoration: underline;
        }
    </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">Pemilihan Pegawai Teladan</li>
    </ul>
    <section class="panel panel-default">
        <!-- <header class="panel-heading bg-light">
            <ul class="nav nav-tabs nav-justified">
                <li class="active"><a class="jabatan" href="#jabatan" data-toggle="tab">Profil</a></li>
                <li style="background-color: #eee"><a class="seleksi" href="#seleksi" data-toggle="tab">Seleksi</a></li>
                <li style="background-color: #eee"><a class="hasil" href="#hasil" data-toggle="tab">Hasil</a></li>
            </ul>
        </header> -->
        <div class="panel-body" style="padding:0px">
            <div class="tab-content">
                <div class="tab-pane active" id="jabatan">
                    <div class="col-md-12" style="border-bottom: 1px dashed #ccc;">
                        <div class="row" style="padding: 5px">
                            <button class="btn btn-primary btn-sm pull-right tambah" type="button"><i class="fa fa-plus"></i> Tambah</button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="profile-data" class="table table-bordered m-b-none table-hover" width="100%" style="font-size: 11px">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 175px">Profil</th>
                                    <th class="text-center" style="width: 100px">Tgl Penetapan</th>
                                    <th class="text-center" style="width: 150px">Appraisal</th>
                                    <th class="text-center" style="width: 150px">Jabatan</th>
                                    <th class="text-center" style="width: 50px">Sanksi</th>
                                    <th class="text-center" style="width: 50px">T</th>
                                    <th class="text-center" style="width: 50px">A</th>
                                    <th class="text-center" style="width: 50px">TAD</th>
                                    <th class="text-center" style="width: 50px">TAP</th>
                                    <th class="text-center" style="width: 50px">PA</th>
                                    <th class="text-center" style="width: 75px">Status</th>
                                    <th class="text-center" style="width: 150px">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;">
                                        <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>
                                </tr> -->
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="tab-pane" id="seleksi">
                    <form id="form-seleksi">
                        <div class="form-group col-md-12" id="filter-select">
                            <!-- <label class="control-label">Filter By Profile</label>
                            <select name="filter_id" data-placeholder="Pilih Profil" style="width: 100%"></select> -->
                        </div>
                        
                        <div class="form-group col-md-12">
                            <label class="control-label">Untuk Jabatan</label>
                            <div class="input-group">
                                <input name="jabatan_id" type="hidden">
                                <input name="nama_jabatan" type="text" class="form-control" placeholder="Pilih Jabatan" readonly>
                                <span class="input-group-btn"> 
                                    <button class="btn btn-danger clear-jab" type="button" style="font-size: 11.5px"><i class="fa fa-times"></i> Hapus</button> 
                                    <button class="btn btn-info" type="button" data-toggle="modal" data-target="#modal-jabatan" style="font-size: 11.5px">Pilih Jabatan</button> 
                                </span> 
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <label class="control-label">Nama Project</label>
                            <input name="nama" type="text" class="form-control" placeholder="Nama Project">
                        </div>
                        <div class="form-group col-md-12 text-center">
                            <button type="button" class="btn btn-danger cancel">Cancel</button>
                            <button type="button" class="btn btn-primary submit">Submit</button>
                        </div>
                    </form>
                </div>
                <div class="tab-pane" id="hasil">
                    <div class="table-responsive">
                        <table id="hasil-data" class="table table-bordered m-b-none table-hover" style="font-size: 11px; width: 100%">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 35%">Nama</th>
                                    <th class="text-center" style="width: 35%">Untuk Jabatan</th>
                                    <th class="text-center" style="width: 30%">Aksi</th>
                                </tr>
                                <tr>
                                    <th style="padding: 0; width: 35%">
                                        <input type="text" placeholder="Enter Here..." style="width: 100%">
                                    </th>
                                    <th style="padding: 0; width: 35%">
                                        <input type="text" placeholder="Enter Here..." style="width: 100%">
                                    </th>
                                    <th style="padding: 0; width: 30%"></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</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="search_jabatan">
                    <input type="text" class="form-control" name="search_jabatan" placeholder="Cari">
                </form>
            </div>
            <div class="modal-body" style="max-height:430px; overflow-y:auto;">
                <div class="col-md-12">
                    <div id="jabatan-tree"></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>

<div id="modal-profil" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:75%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">×</button>
                <h4 class="modal-title">Kelola Profil</h4>
            </div>
            <form id="profile-form" class="form" >
                <div class="modal-body">
                    <div class="row">
                        <input type="hidden" name="id">
                        <div class="form-group col-sm-6">
                            <label class="control-label">Nama Profil <span class="abang">*</span></label>
                            <input type="text" name="nama" class="form-control" placeholder="Masukkan Nama">
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="control-label">Tanggal Penetapan <span class="abang">*</span></label>
                            <!-- <input type="text" name="tanggal_penetapan" class="form-control" placeholder="Isi tanggal penetapan profil"> -->
                            <input name="tanggal_penetapan" data-required="true" data-type="dateIso" type="text" data-date-format="dd-mm-yyyy" class="form-control required group2 datepicker-input" placeholder="Masukkan Tgl Penetapan Profil"> 
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="control-label">Jabatan <span class="abang">*</span></label>
                            <select name="layer[]" class="select2-option" data-placeholder="Masukkan Jabatan" multiple="multiple" 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>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="control-label">MAX Jumlah Sanksi <span class="abang">*</span></label>
                            <input type="text" name="sanksi" class="form-control" placeholder="Masukkan Sanksi">
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="control-label">Appraisal <span class="abang">*</span></label>
                            <select name="appraisal[]" class="select2-option" data-placeholder="Masukkan Nilai Appraisal" multiple="multiple" style="width: 100%" >
                                <option value=""></option>
                                <option value="MT">MT</option>
                                <option value="M">M</option>
                                <option value="PMK">PMK</option>
                                <option value="PMP">PMP</option>
                                <option value="PMPK">PMPK</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="control-label">Tahun Appraisal <span class="abang">*</span></label>
                            <select name="tahun_appraisal[]" class="select2-option" data-placeholder="Masukkan Tahun Appraisal" multiple="multiple" style="width: 100%" >
                                <option value=""></option>
                                @for($i=format_date('Y')-5; $i < format_date('Y'); $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                        
                        <div class="form-group col-sm-6">
                            <label class="control-label">MAX Jumlah Terlambat <span class="abang">*</span></label>
                            <input type="text" name="jumlah_terlambat" class="form-control" placeholder="Masukkan Jumlah Terlambat">
                        </div>
                        <!-- <div class="form-group col-sm-6">
                            <label class="control-label">Toleransi Terlambat <span class="abang">*</span></label>
                            <input type="text" name="menit_toleransi" class="form-control" placeholder="Masukkan Toleransi Terlambat">
                        </div>     -->
                        <div class="form-group col-sm-6">
                            <label class="control-label">MAX Jumlah Alpa <span class="abang">*</span></label>
                            <input type="text" name="jumlah_alpa" class="form-control" placeholder="Masukkan Jumlah Alpa">
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="control-label">MAX Jumlah TAD (Tidak Absen Datang) <span class="abang">*</span></label>
                            <input type="text" name="jumlah_tad" class="form-control" placeholder="Masukkan Jumlah TAD">
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="control-label">MAX Jumlah TAP (Tidak Absen Pulang) <span class="abang">*</span></label>
                            <input type="text" name="jumlah_tap" class="form-control" placeholder="Masukkan Jumlah TAP">
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="control-label">MAX Jumlah PA (Pulang Awal) <span class="abang">*</span></label>
                            <input type="text" name="jumlah_pa" class="form-control" placeholder="Masukkan Jumlah PA">
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="control-label">Maksimum Pilihan <span class="abang">*</span></label>
                            <input type="text" name="max_pilihan" class="form-control" placeholder="Masukkan Angka">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
					<span class="pull-left">NB : Tanda (<span class="abang">*</span>) wajib diisi.</span>
                    <button type="button" class="btn btn-danger close-data">Close</button>
                    <button type="submit" class="btn btn-success submit-data">save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-detail" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:80%">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">×</button>
                <h4 class="modal-title">Detail</h4>
            </div>
            <div class="modal-body" style="padding:0px">
                <div class="table-responsive" id="data-peserta">
                    <table class="table table-bordered m-b-none" width="100%">
                        <tr>
                            <td class="text-center">Pilih Profil diatas terlebih dahulu.</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

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