@extends('Layout.Payslipmaster')

@section('title', 'Process payroll')

@section('header-include')
    <link rel="stylesheet" href="/js/select2/css/select2.min.css">
@endsection

@section('content')

    <section id="content">
        <form method="POST" action="/process_payroll" role="form" class="vbox form-horizontal clearfix">
            {{ csrf_field() }}
            <section class="scrollable padder">
                <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                    <li><a href="."><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="/process_payroll">Payroll</a></li>
                    <li class="active">Process payroll</li>
                </ul>
                <section class="panel panel-default col-md-8 no-padder col-md-offset-2" style="margin-right:30px;">
                    <header class="panel-heading font-semibold">
                        Process payroll
                    </header>
                    <div class="panel-body pull-in">
                        @include('Layout.errors')
                        <div class="col-md-2">
                            <label class="control-label">Year</label>
                            <select class="form-control {{ ($errors->has('income-type'))?'input-danger':'' }}" name="income-type">
                                <option value="">Year</option>

                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">Month</label>
                            <select class="form-control {{ ($errors->has('tabulation-type'))?'input-danger':'' }}" name="tabulation-type" id="tabulation-type">
                                <option value="">Month</option>

                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label">Business unit</label>
                            <select class="form-control multi-select {{ ($errors->has('tax-option'))?'input-danger':'' }}" name="business-units[]" multiple="multiple">
                                <option value="" selected>All business units</option>

                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label">Department</label>
                            <select class="form-control multi-select {{ ($errors->has('range'))?'input-danger':'' }}" name="departments[]" multiple="multiple">
                                <option value="" selected>All departments</option>
                                @foreach($departments as $department)
                                    <option value="{{ $department->id }}">{{ $department->department_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12" style="margin-top:20px;text-align:center;border-top:1px dashed rgba(0,0,0,0.2);">
                            <div style="margin-top:20px;">
                                <button type="submit" class="btn btn-success"><i class="fa fa-database"></i>Process</button>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
            <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
        </form>
    </section>
    <aside class="bg-light lter b-l aside-md hide" id="notes">
        <div class="wrapper">Notification</div>
    </aside>

@endsection

@section('footer-include')
    <!-- fuelux -->
    <script src="/js/libs/underscore-min.js"></script>
    <script src="/js/fuelux/fuelux.js"></script>
    {{--<script src="js/fuelux/demo.datagrid.js"></script>--}}
    <!-- select2 -->
    <script src="/js/select2/js/select2.min.js"></script>
@endsection

@section('j-script')
    <!-- Jquery -->
    <script>
        $(document).on('ready', function(){
            $('.multi-select').select2();
        });
    </script>
@endsection