@extends('admin.layouts.form')

@section('custom_page_style')
    <style>
        .header .input-group {
            margin-bottom: 0 !important;
        }
        table th, table td {
            vertical-align: middle !important;
            white-space: nowrap;
        }
        .searchable_dropdown.open .dropdown-menu.inner{
            padding-left: 30px!important;
            margin-left: 10px!important;
        }

        .bootstrap-select .bs-searchbox, .bootstrap-select .bs-actionsbox, .bootstrap-select .bs-donebutton{
            padding: 0 0 5px 10px;
            border-bottom: 1px solid #e9e9e9;
            margin-left: 37px;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <!-- Display success message -->
        @if(session('success'))
            <div class="alert alert-success alert-dismissible">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Success!</strong> {{ session('success') }}
            </div>
        @endif
        <div class="block-header clearfix">
            <h2 class="pull-left">
                <i class="material-icons btn btn-sm btn-warning">list</i> <span>&nbsp; Employee List</span>
            </h2>
            <a href="#" class="btn btn-default waves-effect pull-right" data-toggle="modal" data-target="#filterModal">Filter</a>
        </div>

        <!-- Search/Filter Modal -->
        <div class="modal fade" id="filterModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="filterModalLabel">Filter Employees</h4>
                    </div>
                    <div class="modal-body">
                        {!! Form::open(['url'=>url('module/employee/search'),'class'=>'form']) !!}
                        <div class="row">
                            <div class="col-xs-4">
                                <label for="class">Class</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">class</i>
                                    </span>
                                    <div class="form-line">
                                        {!! Form::select('class', $classes, request()->class, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%', 'data-live-search'=>'true', 'placeholder' => '--Select Class--']) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-4">
                                <label for="state">State</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">location_on</i>
                                    </span>
                                    <div class="form-line">
                                        {!! Form::select('state', $states, request()->state, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%', 'data-live-search'=>'true', 'placeholder' => '--Select State--']) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-4">
                                <label for="zip">ZIP</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">location_on</i>
                                    </span>
                                    <div class="form-line">
                                        {!! Form::select('zip', $zip_codes, request()->zip, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%', 'data-live-search'=>'true', 'placeholder' => '--Select ZIP--']) !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-4">
                                <label for="rate_type">Rate Type</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">attach_money</i>
                                    </span>
                                    <div class="form-line">
                                        {!! Form::select('rate_type', $rate_types, request()->rate_type, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%', 'data-live-search'=>'true', 'placeholder' => '--Select Rate Type--']) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-4">
                                <label for="apt">APT</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">home</i>
                                    </span>
                                    <div class="form-line">
                                        {!! Form::text('apt', request()->apt, ['class' => 'form-control', 'placeholder' => 'APT']) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <label for="zip">Dependant</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">location_on</i>
                                    </span>
                                    <div class="form-line">
                                        {!! Form::select('dependant', $dependants, request()->dependant, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%', 'data-live-search'=>'true', 'placeholder' => '--Select Dependant--']) !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-4">
                                {!! Form::submit('SEARCH',['class'=>'btn btn-md btn-success btn-block']) !!}
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row clearfix" id="app">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="body table-container">
                        <table class="table table-condensed table-bordered">
                            <thead class="bg-teal">
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Class</th>
                                <th>State</th>
                                <th>ZIP</th>
                                <th>Dependant</th>
                                <th>SSN</th>
                                <th>LAST Digit</th>
                                <th>APT</th>
                                <th>Rate Type</th>
                                <th>Regular Rate</th>
                                <th>Benefit Rate</th>
                                <th>Option</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($employees as $employee)
                                <tr class="font-13">
                                    <td>{!! $employee->first_name !!}</td>
                                    <td>{!! $employee->last_name !!}</td>
                                    <td>{!! $employee->class !!}</td>
                                    <td>{!! $employee->state !!}</td>
                                    <td>{!! $employee->zip !!}</td>
                                    <td>{!! $employee->dependant !!}</td>
                                    <td>{!! $employee->ssn !!}</td>
                                    <td>{!! $employee->last_four_digit !!}</td>
                                    <td>{!! $employee->apt !!}</td>
                                    <td>{!! $employee->rate_type !!}</td>
                                    <td>{!! $employee->regular_rate !!}</td>
                                    <td>{!! $employee->benefit_rate !!}</td>
                                    <td>
                                        <a data-toggle="tooltip" data-title="Edit & Preview" class="btn btn-xs btn-warning" href="{!! URL::to('module/employee/'.$employee->id,'edit') !!}"><i class="material-icons">edit</i></a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    {!! $employees->appends(request()->all())->links() !!}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom_page_script')
    <script type="text/javascript">
        $(document).ready(function(){
            $('.datepicker').bootstrapMaterialDatePicker({
                format: 'YYYY-MM-DD',
                clearButton: true,
                weekStart: 1,
                time: false
            });
            $('[data-toggle=tooltip]').tooltip();
        });
    </script>
@endsection