@extends('template_absen')

@section('title')
    HRIS | Data Surat Ijin
@stop

@section('top_script')
    @include('notifikasi::layouts.top_script_absen')
@stop

@section('content')
<style type="text/css">
    .select2-search input{
        z-index: 10 !important;
    }
    table.surat td {
        background-color: #ededed;
        font-size: 10px;
    }
</style>
<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: left !important;
        padding-right:0 !important;
    }
    .dataTables_length {
        float: right !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;
    }
    /*.bootstrap-tagsinput {
        line-height: 11px;
        padding: 3px 6px;
        width: 1000px;
    }
    .bootstrap-tagsinput .label {
        font-size: 80% !important;
        line-height:2.5 !important;
    }*/
</style>
<section class="scrollable padder">
    <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
        <li><a href="{{ url('home/absen') }}"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#">Notifikasi</a></li>
        <li class="active">Perijinan</li>
    </ul>
    <div class="m-b-md text-center">
        <h3 class="m-b-none"><strong>DATA</strong> SURAT IJIN</h3>
        <span>Fitur untuk menampilkan data surat ijin yang belum di-approve</span>
    </div>
    <section class="panel panel-success">
        <div class="table-responsive">
            <span class="msg_table"></span>
            <table id="ijin-data" class="table table-striped m-b-none table-hover" width="100%">
                <thead>
                    <tr>
                        <th class="text-center" id="kode" width="10%">KODE</th>
                        <th class="text-center" id="nip" width="12%">NIP</th>
                        <th class="text-center" id="nama" width="32%">NAMA</th>
                        <th class="text-center" id="mulai" width="12%">MULAI</th>
                        <th class="text-center" id="berakhir" width="12%">BERAKHIR</th>
                        <th class="text-center" id="jenis" width="12%">JENIS</th>
                        <th class="text-center" width="10%">AKSI</th>
                    </tr>
                    <tr>
                        <th style="padding:0"><input type="text" class="cari" name="kode" placeholder="KODE FORM" style="width: 100%"></th>
                        <th style="padding:0"><input type="text" class="cari" name="nip" placeholder="NIP" style="width: 100%"></th>
                        <th style="padding:0"><input type="text" class="cari" name="nama" placeholder="Nama" style="width: 100%"></th>
                        <th style="padding:0"><input type="text" class="cari" name="mulai" placeholder="YYYY-MM-DD" style="width: 100%"></th>
                        <th style="padding:0"><input type="text" class="cari" name="berakhir" placeholder="YYYY-MM-DD" style="width: 100%"></th>
                        <th style="padding:0">
                            <select name="jenis" class="select2-option cari" style="width:100%;overflow-x:hidden">
                                <option value=""></option>
                                <option value="cuti">cuti</option>
                                <option value="biasa">biasa</option>
                            </select>
                        </th>
                        <th style="padding:0"><input type="text" class="cari" style="width: 100%" disabled=""></th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </section>
</section>
<div id="modal-approval" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:80%">
        <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">DETAIL IJIN/CUTI</h4>
            </div>
            <div class="modal-body">
                <div class="col-sm-12" style="display: none">
                    <div class="input-group m-b">
                        <span class="input-group-addon" style="background-color:#ffc333; color:#fff; border-color:#ffc333">Kode Form</span>
                        <input class="form-control" type="text" name="kode_form" placeholder="Kode Form">
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="submit">TAMPILKAN</button>
                        </span>
                    </div>
                </div>
                <div class="col-md-12 text-center">
                    <div class="input-group m-b">
                        <span class="input-group-btn">
                            
                        </span>
                    </div>
                </div>
                <table width="100%" cellpadding="3" cellspacing="3">
                    <tr>
                        <td rowspan="4" style="background-color: #ddd; padding:10px; width: 15%">
                            <button class="btn btn-sm btn-info approve" type="button" style="height: 65px; width: 100%">APPROVE IJIN</button>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px; background-color:#ededed; width: 10%">Pegawai</td>
                        <td style="background-color:#ededed; width: 1%">:</td>
                        <td style="background-color:#ededed; width: 74%" class="data-pegawai"></td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px; background-color:#ededed;">Kode Form</td>
                        <td style="background-color:#ededed;">:</td>
                        <td style="background-color:#ededed;" class="kode-form"></td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px; background-color:#ededed;">Tanggal</td>
                        <td style="background-color:#ededed;">:</td>
                        <td style="background-color:#ededed;" class="tanggal"></td>
                    </tr>
                </table>
                <table id="data-approval" class="table table-striped table-hover" width="100%">
                    <thead>
                        <tr>
                            <th width="25px" style="text-align: center"><input class="select-approve" type="checkbox" style="width: 0; height:0"></th>
                            <th style="text-align:center" width="125px">TANGGAL</th>
                            <th style="text-align:center" width="75px">J_MASUK</th>
                            <th style="text-align:center" width="75px">J_PULANG</th>
                            <th style="text-align:center" width="75px">H_MASUK</th>
                            <th style="text-align:center" width="75px">H_PULANG</th>
                            <th style="text-align:center" width="40px">A</th>
                            <th style="text-align:center" width="40px">T</th>
                            <th style="text-align:center" width="40px">PA</th>
                            <th style="text-align:center">KET_IJIN</th>
                            <th style="text-align:center">APRV</th>
                            <th style="text-align:center" width="10%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div id="modal-config" class="modal fade in" tabindex="-1" 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">UBAH DATA KETIDAKHADIRAN</h4>
            </div>
            <form id="form-change">
                <div class="modal-body">
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">Pegawai</span>
                            <input name="id" type="hidden">
                            <input name="id_detail" type="hidden">
                            <input name="workday" type="hidden">
                            <input type="text" name="pegawai" placeholder="Pegawai" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">Jabatan</span>
                            <input type="text" name="jabatan" placeholder="Jabatan" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">Alasan</span>
                            <input type="text" name="alasan" placeholder="Alasan" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group m-b">
                            <span class="input-group-addon">Keterangan</span>
                            <input type="text" name="keterangan" placeholder="Keterangan" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom:0px">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" name="tanggal_mulai_k" placeholder="Mulai Tanggal" data-date-format="dd-mm-yyyy" data-date-autoclose="true" value="{{ format_date('d-m-Y') }}" size="16" class="input-s datepicker-input form-control">
                            <span class="input-group-addon">s/d</span>
                            <input type="text" name="tanggal_berakhir_k" placeholder="Sampai Tanggal" data-date-format="dd-mm-yyyy" data-date-autoclose="true" value="" size="16" class="input-s datepicker-input form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="border-radius:0 0 6px 6px; color:#3a87ad; background-color:#f5f5f5; margin-top:0px">
                    <button type="reset" class="btn btn-danger" data-dismiss="modal" >Close</button>
                    <button type="submit" class="btn btn-info" >Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@stop

@section('bottom_script')
    @include('notifikasi::layouts.bottom_script_absen')
@stop