@extends('template_absen')

@section('title')
	ATTENDANCE | Alokasi Waktu Kerja
@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"> 
                                    <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-12 m-b-xs"> 
                            <div class="input-group">
                                <span class="input-group-addon bg-dark" style="font-size: 11px; font-weight: bold; color:#fff">Tanggal</span>
                                <input type="text" placeholder="Tgl Mulai" name="mulai" data-date-format="dd-mm-yyyy" value="{{ format_date('d-m-Y') }}" class="datepicker-input input-sm form-control">
                                <span class="input-group-addon" style="font-size: 11px">s/d</span>
                                <input type="text" placeholder="Tgl Berakhir" name="berakhir" data-date-format="dd-mm-yyyy" value="{{ format_date('d-m-Y') }}" class="datepicker-input input-sm form-control">
                            <!-- </div>
                        </div>
                        <div class="col-sm-3 m-b-xs">
                            <div class="input-group"> -->
                                <span class="input-group-addon bg-dark" style="font-size: 11px; font-weight: bold; color:#fff">Batas</span>
                                <input class="form-control input-sm" name="batas_masuk" type="text" placeholder="Awal Absen" data-original-title="<button type='button' class='close pull-right' data-dismiss='popover'>×</button>Awal Absen" title="" data-content="<div class='scrollable' style='width:200px;height:60px'>Silahkan masukkan angka (jam) untuk batas awal absen untuk jadwal tersebut. Ex : Jadwal masuk jam 07.00 dan angka yang anda dimasukkan <strong>3</strong> maka batas awal absen untuk jadwal tersebut 04.00</div>" data-placement="bottom" data-html="true" data-toggle="popover">
                                <span class="input-group-addon" style="font-size: 11px">s/d</span>
                                <input class="form-control input-sm" name="batas_pulang" type="text" placeholder="Akhir Absen" data-original-title="<button type='button' class='close pull-right' data-dismiss='popover'>×</button>Akhir Absen" title="" data-content="<div class='scrollable' style='width:200px;height:60px'>Silahkan masukkan angka (jam) untuk batas akhir absen untuk jadwal tersebut. Ex : Jadwal pulang jam 19.00 dan angka yang anda dimasukkan <strong>3</strong> maka batas akhir absen untuk jadwal tersebut 22.00</div>" data-placement="bottom" data-html="true" data-toggle="popover">
                            <!-- </div>
                        </div>
                        <div class="col-sm-2 m-b-xs">
                            <div class="input-group"> -->
                                <span class="input-group-addon bg-dark" style="font-size: 11px; font-weight: bold; color:#fff">Start</span>
                                <input class="form-control input-sm" name="start_from" type="text" placeholder="Start Hari" data-original-title="<button type='button' class='close pull-right' data-dismiss='popover'>×</button>Awal Absen" title="" data-content="<div class='scrollable' style='width:200px;height:60px'>Silahkan masukkan angka (hari ke) untuk start awal shift. Ex : Pola shift tersedia 6 hari dan angka yang anda masukkan <strong>3</strong>, dan jadwal dimulai dari hari ke 3." data-placement="bottom" data-html="true" data-toggle="popover">
                            <!-- </div>
                        </div>
                        <div class="col-sm-4 m-b-xs">
                            <div class="input-group"> -->
                                <span class="input-group-addon bg-dark" style="font-size: 11px; font-weight: bold; color:#fff">Shift</span>
                                <select name="id_shift" class="select2-option" style="width:100%">
                                    <option value=""></option>
                                    @foreach ($shift->get() as $key => $value)
                                        <option value="{{ $value->id }}" data-model="{{ $value->model }}">{{ $value->nama }}</option>
                                    @endforeach
                                </select> 
                                <span class="input-group-btn"> <button id="penjadwalan" class="btn btn-sm btn-success" type="button">Simpan</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="background-color: #fff; font-size: 11px">
                                <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>
@stop

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