@extends('template_absen')

@section('title')
	ATTENDANCE | Home
@stop

@section('top_script')
	@include('home::layouts.absen_top_script')
@stop

@section('content')
<section class="scrollable padder">
    <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
        <li><i class="fa fa-user"></i> <small>Selamat Datang, <b class="text-danger">{{ $user->nama }}</b></small></li>
    </ul>
    <section class="panel panel-danger">
        <header class="panel-heading" style="font-weight:bold; padding: 5px">
            <div class="row text-sm wrapper" style="padding:0">
                <div class="col-sm-3"> 
                    <div class="input-group"> 
                        <select name="filter_action" class="input-sm form-control" style="width:100%;">
                            <option value="ringkas">Cetak Ringkas</option> 
                            <option value="lembur_libnas">Cetak Lembur S/M & LIBNAS</option>
                            <option value="lembur_hari_kerja">Cetak Lembur Hari Kerja</option>
                        </select>
                        <span class="input-group-btn"> 
                            <button class="btn btn-sm btn-success" type="button" id="apply">apply</button> 
                        </span> 
                    </div>
                </div>
                <div class="col-sm-7">
                    <div class="input-group"> 
                        <select name="option" class="input-sm form-control" style="width:100%;">
                            <option value="ringkas">Ringkas</option>
                            <option value="monitoring">Monitoring</option>
                        </select>
                        <span class="input-group-addon" style="background-color:#ffc333; color:#fff; border-color:#ffc333">
                            option
                        </span> 
                        <input type="text" name="filter_from" class="input-sm form-control datepicker-input" data-date-format="dd-mm-yyyy" data-date-autoclose="true" placeholder="Dari Tanggal (dd-mm-yyyy)">
                        <span class="input-group-addon" style="background-color:#4cc0c1; color:#fff; border-color:#4cc0c1"> 
                            to
                        </span> 
                        <input type="text" name="filter_to" class="input-sm form-control datepicker-input" data-date-format="dd-mm-yyyy" data-date-autoclose="true" placeholder="Sampai Tanggal (dd-mm-yyyy)"> 
                        <span class="input-group-btn"> 
                            <button class="btn btn-sm btn-success" type="button" id="go">Go!</button> 
                        </span> 
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="btn-group pull-right" data-toggle="buttons"> 
                        <label class="btn btn-sm btn-default"> <input type="radio" name="filter_radio" value="pusat"> Pusat </label> 
                        <label class="btn btn-sm btn-default"> <input type="radio" name="filter_radio" value="all"> All </label> 
                        <label class="btn btn-sm btn-default"> <input type="radio" name="filter_radio" value="luar"> Luar </label> 
                    </div>
                </div>
            </div>
        </header>
        
        <div class="table-responsive">
            <table class="table table-display table-bordered table-hover text-sm nowrap" id="shortcut">
                <thead>
                    <tr id="header">
                        <th width="50px" class="text-center"><input style="width:25px" type="checkbox" id="check-all"></th>
                        <th width="60px">KODE</th>
                        <th width="100px">NIP</th>
                        <th width="175px">NAMA</th>
                        <th width="250px">JABATAN</th>
                        <th width="250px">UNIT</th>
                        <th width="60px" class="text-center">KERJA</th>
                        <th width="60px" class="text-center">LIBUR</th>
                        <th width="60px" class="text-center">SD</th>
                        <th width="60px" class="text-center">IR</th>
                        <th width="60px" class="text-center">IT</th>
                        <th width="60px" class="text-center">CR</th>
                        <th width="60px" class="text-center">TR</th>
                        <th width="60px" class="text-center">IP</th>
                        <th width="60px" class="text-center">A</th>
                        <th width="60px" class="text-center">T</th>
                        <th width="60px" class="text-center">PA</th>
                        <th width="60px" class="text-center">TAD</th>
                        <th width="60px" class="text-center">TAP</th>
                        <th width="100px" class="text-center">PULANG AWAL</th>
                        <th width="100px" class="text-center">TERLAMBAT</th>
                        <th width="100px" class="text-center">EFEKTIF</th>
                        <th width="100px" class="text-center">AKSI</th>
                    </tr>
                    <tr id="search" style="background-color:#eee;">
                        <th width="50px" style="padding:0">CHECKBOX</th>
                        <th width="60px" style="padding:0">KODE</th>
                        <th width="100px" style="padding:0">NIP</th>
                        <th width="175px" style="padding:0">NAMA</th>
                        <th width="250px" style="padding:0">JABATAN</th>
                        <th width="250px" style="padding:0">UNIT</th>
                        <th width="60px" style="padding:0">KERJA</th>
                        <th width="60px" style="padding:0">LIBUR</th>
                        <th width="60px" style="padding:0">SD</th>
                        <th width="60px" style="padding:0">IR</th>
                        <th width="60px" style="padding:0">IT</th>
                        <th width="60px" style="padding:0">CR</th>
                        <th width="60px" style="padding:0">TR</th>
                        <th width="60px" style="padding:0">IP</th>
                        <th width="60px" style="padding:0">A</th>
                        <th width="60px" style="padding:0">T</th>
                        <th width="60px" style="padding:0">PA</th>
                        <th width="60px" style="padding:0">TAD</th>
                        <th width="60px" style="padding:0">TAP</th>
                        <th width="100px" style="padding:0">PULANG AWAL</th>
                        <th width="100px" style="padding:0">TERLAMBAT</th>
                        <th width="100px" style="padding:0">EFEKTIF</th>
                        <th width="100px" style="padding:0">AKSI</th>
                    </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <th width="50px"></th>
                        <th width="60px"></th>
                        <th width="100px"></th>
                        <th width="175px"></th>
                        <th width="250px"></th>
                        <th width="250px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="60px"></th>
                        <th width="100px"></th>
                        <th width="100px"></th>
                        <th width="100px"></th>
                        <th width="100px"></th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </section>
</section>

<!-- Modal -->
<div id="lembur-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Lembur Option</h4>
            </div>
            <div class="modal-body">
                <div class="input-group m-b">
                    <span class="input-group-addon" style="color:#grey;">Lembur Pagi</span>
                    <input type="text" name="mulai_lembur_pagi" class="form-control" placeholder="Mulai lembur">
                    <span class="input-group-addon" style="color:#grey;">satuan</span>
                    <select class="form-control" name="satuan_pagi">
                        <option value="HOUR">Jam</option>
                        <option value="MINUTE">Menit</option>
                    </select>
                </div>
				<div class="input-group m-b">
                    <span class="input-group-addon" style="color:#grey;">Lembur Pulang</span>
                    <input type="text" name="mulai_lembur" class="form-control" placeholder="Mulai lembur">
                    <span class="input-group-addon" style="color:#grey;">satuan</span>
                    <select class="form-control" name="satuan">
                        <option value="HOUR">Jam</option>
                        <option value="MINUTE">Menit</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="lembur-button">submit</button>
            </div>
        </div>

    </div>
</div>

<!-- Modal -->
<div id="per-hari-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Detail Per-Hari Option</h4>
            </div>
            <div class="modal-body">
                <div class="input-group m-b">
                    <span class="input-group-addon" style="color:#grey;">Tanggal</span>
                    <input type="text" name="tanggal_per_hari" class="form-control datepicker-input" data-date-format="dd-mm-yyyy" data-date-autoclose="true" placeholder="Dari Tanggal (dd-mm-yyyy)">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="per-hari-button">submit</button>
            </div>
        </div>

    </div>
</div>
@stop

@section('bottom_script')
	@include('home::layouts.absen_bottom_script')
@stop