@extends('template_absen')

@section('title')
	ATTENDANCE | Manual Absen
@stop

@section('top_script')
	@include('absen::layouts.top_script_absen')
	<style type="text/css">
		.dataTables_info, .dataTables_length > label, .dataTables_filter > label {
			color:#3AB23C;
		}
		.table-hover > tbody > tr:hover > td {
			background-color: #DBFFDB;
			font-weight: bold;
		}
	</style>
@stop

@section('content')
<section id="content">
    <section class="hbox stretch">
        <aside>
            <section class="vbox">
                <header class="header bg-white b-b clearfix wrapper">
                    <strong>
                        <button class="btn btn-xs btn-info pull-right" style="font-size: 11px;" data-toggle="modal" data-target="#modal-date">INPUT ABSEN</button>

                    </strong>
                    <strong>DAFTAR PEGAWAI TIDAK PAKAI FINGER</strong>
                </header>
                <div>
                    
                </div>
                <section class="scrollable wrapper w-f" style="bottom:0px; padding: 0px;">
                    <!-- <section class="panel panel-default"> -->
                        <div class="table-responsive" style="background-color: #C0EFBD">
                            <table class="table table-striped table-hover m-b-none" id="list-pegawai" style="background-color: #fff; width: 100%; font-size: 11px">
                                <thead>
									<tr>
										<th valign="bottom" style="width:25px; height:12px">
											<input type="checkbox" id="all-checkbox" style="width:12px; height:12px">
										</th>
										<th class="text-center" style="width:100px">NIP</th>
										<th class="text-center" style="width:200px">NAMA</th>
										<th class="text-center">JABATAN</th>
										<th class="text-center">UNIT</th>
									</tr>
									<tr>
										<td></td>
										<td style="padding: 0"><input name="nip" type="text" class="form-control" placeholder="Cari NIP" style="width:100%"></td>
										<td style="padding: 0"><input name="nama" type="text" class="form-control" placeholder="Cari Nama" style="width:100%"></td>
										<td style="padding: 0"><input name="jabatan" type="text" class="form-control" placeholder="Cari Jabatan" style="width:100%"></td>
										<td style="padding: 0"><input name="unit" type="text" class="form-control" placeholder="Cari Unit" style="width:100%"></td>
									</tr>
								</thead>
                            </table>
                        </div>
                </section>
            </section>
        </aside>
    </section>
    <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
</section>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg" style="width: 98%; padding-top: 20px; padding-bottom: 20px">
        <div class="modal-content">
            <div class="modal-header" style="border:none;min-height:0; padding: 0">
                <button type="button" class="close" data-dismiss="modal" style="background-color:#fff; position: absolute; top:-15px; opacity:1; line-height: 0; font-size: 23px; right: -20px;border:2px solid black; border-radius: 50%; width: 30px; height: 30px;">&times;</button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="timetable" id="timetable" style="width:100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modal-date" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:700px">
        <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">RANGE TANGGAL</h4>
            </div>
            <div class="modal-body">
                <div class="form-group" style="margin-bottom:0px">
                    <div class="input-group">
                        <span class="input-group-addon">TANGGAL</span>
                        <input type="text" id="mulai" name="mulai" placeholder="Mulai Tanggal" data-date-format="yyyy-mm-dd" data-date-autoclose="true" size="16" class="input-s datepicker-input form-control">
                        <span class="input-group-addon">s/d</span>
                        <input type="text" id="berakhir" name="berakhir" placeholder="Sampai Tanggal" data-date-format="yyyy-mm-dd" data-date-autoclose="true" size="16" value="" class="input-s datepicker-input form-control">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </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 id="submit-absen" type="button" class="btn btn-info" >Proses</button>
            </div>
        </div>
    </div>
</div>
@stop

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