@extends('layouts.app')

@section('content')
    <!-- page content -->
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>Manage Employees <small></small></h3>
            </div>

            <div class="title_right">
                <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="clearfix"></div>

        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>All employees <small></small></h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30">
                            Employees can be sort and search by their own fields
                        </p>

                        <div class="row">
                            <div class="col-sm-12">
                                @if(count($employees) > 0)
                                <table id="datatable" class="table table-striped table-bordered dataTable no-footer"
                                    role="grid" aria-describedby="datatable_info">
                                    <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0" aria-controls="datatable" rowspan="1"
                                                colspan="1" aria-sort="ascending"
                                                aria-label="Name: activate to sort column descending" style="width: 189px;">
                                                First Name</th>
                                            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1"
                                                colspan="1" aria-label="Position: activate to sort column ascending"
                                                style="width: 309px;">Last Name</th>
                                            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1"
                                                colspan="1" aria-label="Office: activate to sort column ascending"
                                                style="width: 143px;">Email</th>
                                            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1"
                                                colspan="1" aria-label="Age: activate to sort column ascending"
                                                style="width: 76px;">Mobile</th>
                                            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1"
                                                colspan="1" aria-label="Start date: activate to sort column ascending"
                                                style="width: 140px;">Address</th>
                                            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1"
                                                colspan="1" aria-label="Salary: activate to sort column ascending"
                                                style="width: 111px;">Dob</th>
                                                <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1"
                                                colspan="1" aria-label="Salary: activate to sort column ascending"
                                                style="width: 111px;">Position</th>
                                                <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1"
                                                colspan="1" aria-label="Salary: activate to sort column ascending"
                                                style="width: 111px;">Nationaltiy</th>
                                        </tr>
                                    </thead>


                                    <tbody>
                                        @foreach($employees as $employee)
                                        <tr role="row" class="odd">
                                            <td class="sorting_1">{{$employee->firstName}}</td>
                                            <td>{{$employee->lastName}}</td>
                                            <td>{{$employee->email}}</td>
                                            <td>{{$employee->mobile}}</td>
                                            <td>{{$employee->address}}</td>
                                            <td>{{$employee->dob}}</td>
                                            <td>{{$employee->position}}</td>
                                            <td>{{$employee->nationality}}</td>
                                        </tr>
                                        @endforeach
                                </table>
                                @else
                                <p>You have no employees</p>
                            @endif
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection