@extends('template_satgas')

@section('title')
	ATTENDANCE | Pembuatan Kartu
@stop

@section('top_script')
	@include('absen::layouts.top_script_absen')
    <style type="text/css">
        .nav > li > a {
            padding: 5px;
        }
    </style>
@stop

@section('content')
<section id="content">
    <section class="hbox stretch">
        <aside class="bg-light lter b-r" style="width:225px">
            <div class="wrapper b-b header">
                <strong>DAFTAR UNIT</strong>
            </div>
            <section class="vbox">
                <section class="scrollable" style="margin-bottom:50px">
                    <div>
                        <ul class="nav" style="height:100%; margin-bottom:50px;">
                            <li class="b-b b-light" style="padding:10px"><input name="unit_search" class="form-control input-sm" placeholder="Cari Data Unit"></li>
                            <li class="b-b b-light"><a style="font-size:11px;"><input class="all_unit" type="checkbox" style="vertical-align:middle; margin:-3px 5px 0"> <span style="font-size:11px; font-weight:bold">Select All</span></a></li>
                            <li class="b-b b-light" style="margin-top:1px;">
                                <a class="col-md-4" style="font-size:11px; border-bottom:1px solid #eee">
                                    <span style="font-size:11px; font-weight:bold">Filter : </span>
                                </a>
                                <a class="col-md-4" style="font-size:11px; padding-left: 0; padding-right: 0; border-bottom:1px solid #eee">
                                    <input type="checkbox" id="pusat_checkbox" class="unit" value="pusat" style="vertical-align:middle; margin:-3px 5px 0" checked> 
                                    <span style="font-size:11px;font-weight:bold">Pusat</span>
                                </a>
                                <a class="col-md-4" style="font-size:11px; padding-left: 0; padding-right: 0; border-bottom:1px solid #eee">
                                    <input type="checkbox" id="luar_checkbox" class="unit" value="luar" style="vertical-align:middle; margin:-3px 5px 0"> 
                                    <span style="font-size:11px;font-weight:bold">Luar</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </section>
                <section class="scrollable" style="margin-bottom:50px; margin-top:105px; border-top:1px solid #eee">
                    <div>
                        <ul class="nav data-unit" style="height:100%; margin-bottom:50px;">
                            @foreach ($unit->get() as $key => $value)
                                <li class="b-b b-light"><a style="font-size:11px;"><input type="checkbox" class="unit" value="{{ $value->id }}" style="vertical-align:middle; margin:-3px 5px 0"> <span style="font-size:11px;">{{ $value->nama }}</span></a></li>
                            @endforeach
                        </ul>
                    </div>
                </section>
            </section>
        </aside>
        <aside>
            <section class="vbox">
                <header class="header bg-white b-b clearfix">
                    <div class="row m-t-sm">
                        <div class="col-sm-6 m-b-xs"> 
                            <div class="input-group">
                                <input type="text" placeholder="Tgl Mulai" name="tanggal_mulai" data-date-format="dd-mm-yyyy" value="{{ '01'.format_date('-m-Y') }}" class="datepicker-input input-sm form-control" required>
                                <span class="input-group-addon" >s/d</span>
                                <input type="text" placeholder="Tgl Berakhir" name="tanggal_berakhir" data-date-format="dd-mm-yyyy" value="" class="datepicker-input input-sm form-control">
                                <span class="input-group-btn"> <button id="penjadwalan" class="btn btn-sm btn-success" type="button">TerapKan!</button> </span> 
                            </div>
                        </div>
                        </header>
                        <section class="scrollable wrapper w-f" style="bottom:10px; padding: 5px !important">
                            <div class="table-responsive">
                                <table class="table table-striped m-b-none" id="data-absen" style="font-size:11px; background-color: #fff">
                                    <thead>
										<tr>
											<th valign="bottom" style="width:25px; height:12px">
												<input type="checkbox" id="top-checkbox">
											</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 input-sm" placeholder="Cari NIP" style="width:100%"></td>
											<td style="padding: 0"><input name="nama" type="text" class="form-control input-sm" placeholder="Cari Nama" style="width:100%"></td>
											<td style="padding: 0"><input name="jabatan" type="text" class="form-control input-sm" placeholder="Cari Jabatan" style="width:100%"></td>
											<td style="padding: 0"><input name="unit" type="text" class="form-control input-sm" 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>
        <aside class="bg-light lter b-l aside-md hide" id="notes">
            <div class="wrapper">Notification</div>
        </aside>
    </section>
</section>
<div id="loading-bar" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <span class="pull-right"><span id="loading-bar-index"></span> / <span id="loading-bar-total"></span></span>
                <span>Total Data : </span>
                <div class="progress progress-striped m-t-sm active">
                    <div id="loading-bar-value" class="progress-bar progress-bar-success" style="width: 0%" data-original-title="0%" data-toggle="tooltip"></div>
                </div>
                <p align="center">Permintaan anda sedang diproses.</p>
            </div>
        </div>
    </div>
</div>
@stop

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