@extends('layouts.main')
@section('title')
    Employees
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Human Resources</a> <span class="divider">/</span></li>
        <li class="active">Employees</li>
    </ul>
@stop
@section('msghead_menu')
    <li class="right btn-group">
     <button style="padding-left : 30px; margin-right: 2px" class="btn " onclick="openAdvancedSearch('employees_filters')" style="margin-left: 2px">
             <span class="icon-search"></span> &nbsp; FILTER
      </button>
        <button class="btn" style="margin-right: 2px" onclick="create('{!! route('employees.employees-create') !!}')"><span
                    class=""></span>New Employee
        </button>
    </li>

@stop
@section('contentinner')
            <br/><br/>
            <div id="employees_filters" class="sidenav">
                <a href="javascript:void(0)" class="closebtn"
                   onclick="closeAdvancedSearch('employees_filters')">&times;</a>
                <form target="_blank" class="form-inline form-filter" method="get"
                      action="#">

                    <label class="control-label" for="truck_id">Employee Code</label>
                    <input type="text" name="employee_code" width="100%" id="employee_code" class=""/>

                    <label class="control-label" for="Type">Employee</label>
                    <select name="select" width="100%" id="employee_id" class="searchable_select">
                        <option value="">All</option>
                        @foreach($employees as $employee)
                        <option value="{{$employee->employee_id}}">{{$employee->full_name}}</option>
                        @endforeach
                    </select>
                    <label class="control-label" for="Type">Employee</label>
                    <select name="select" width="100%" id="department_id" class="searchable_select">
                        <option value="">All</option>
                        @foreach($departments as $department)
                        <option value="{{$department->dept_id}}">{{$department->dept_name}}</option>
                        @endforeach
                    </select>
                    <label class="control-label" for="phone">Phone</label>
                    <input type="text" name="phone" width="100%" id="phone" class=""/>
                    <label class="control-label" for="Type">Type</label>
                    <select name="select" width="100%" id="type" class="searchable_select">
                        <option value="">All</option>
                        <option value="DRIVER">DRIVER</option>
                        <option value=OTHERS">OTHERS</option>
                        <option value="CONTRACTOR">CONTRACTOR</option>
                    </select>


                    <button class="btn" style="" id="filter_employees">FILTER</button>

                </form>

            </div>
            <br/>
    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered table-condensed" id="employees-lists">
                <thead>
                <tr>
                    <th style="width: 02%" class="nosort"></th>
                    <th  style="width: 20px">#</th>
                    <th>Employee Code</th>
                    <th>Full Name</th>
                    <th>Department</th>
                    <th>Phone # </th>
                    <th>Gender</th>
                    <th style="width: 10%">Action </th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    <script>
        $('.searchable_select').select2();
        var oTable = jQuery('#employees-lists').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No any employee records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{route('employees.employees-datatable')}}',
                    data: function (d) {
                            d.employee_code = $('#employee_code').val();
                            d.type = $('#type').val();
                            d.employee_id = $('#employee_id').val();
                            d.department_id = $('#department_id').val();
                            d.phone_no = $('#phone').val();
                        }
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[0,'asc']],
                "columns": [
                    {data: 'checkbox'},
                    {"class": "link", data: 'id'},
                     {"class": "link number", data: 'code'},
                    {"class": "link", data: 'full_name'},
                    {"class": "link", data: 'department'},
                    {"class": "link number", data: 'phone'},
                    {"class": "link", data: 'gender'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });

        $('#filter_employees').on('click', function (e) {
            e.preventDefault();
            
            oTable.draw();
        });

    </script>
@stop