@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">
        <div class="block-header clearfix">
            <h2 class="pull-left">
                <i class="material-icons btn btn-sm btn-warning">list</i> <span>&nbsp; Timesheet 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 Timesheets</h4>
                    </div>
                    <div class="modal-body">
                        {!! Form::open(['url'=>url('module/timesheet'), 'method'=>'get', 'class'=>'form']) !!}
                        <div class="row">
                            <div class="col-xs-4">
                                <label for="employee_name">Employee Name</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">person</i>
                                    </span>
                                    <div class="form-line">
                                        {!! Form::text('employee_name', request()->employee_name, ['class' => 'form-control', 'placeholder' => 'Enter Employee Name']) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-4">
                                <label for="from_date">From Date</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">date_range</i>
                                    </span>
                                    <div class="form-line">
                                        {!! Form::text('from_date', request()->from_date, ['class' => 'form-control datepicker', 'placeholder' => 'Select From Date']) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-4">
                                <label for="to_date">To Date</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">date_range</i>
                                    </span>
                                    <div class="form-line">
                                        {!! Form::text('to_date', request()->to_date, ['class' => 'form-control datepicker', 'placeholder' => 'Select To Date']) !!}
                                    </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>Employee Name</th>
                                <th>Work Date</th>
                                <th>Contract No</th>
                                <th>Company Name</th>
                                <th>Work Classification</th>
                                <th>SSN (Last 4 Digits)</th>
                                <th>Time In</th>
                                <th>Time Out</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($timesheets as $timesheet)
                                <tr class="font-13">
                                    <td>{!! $timesheet->employee_name !!}</td>
                                    <td>{!! $timesheet->work_date !!}</td>
                                    <td>{!! $timesheet->contract_no !!}</td>
                                    <td>{!! $timesheet->company_name !!}</td>
                                    <td>{!! $timesheet->work_classification !!}</td>
                                    <td>{!! $timesheet->ssn !!}</td>
                                    <td>{!! $timesheet->time_in !!}</td>
                                    <td>{!! $timesheet->time_out !!}</td>
                                    <td>
                                        <a data-toggle="tooltip" data-title="Edit & Preview" class="btn btn-xs btn-warning" href="{!! URL::to('module/timesheet/'.$timesheet->id,'edit') !!}"><i class="material-icons">edit</i></a>

                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    {!! $timesheets->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