@extends('Layout.master')

@section('title', 'Employees')

@section('header-include')
    <style>
        #import_file{
            -webkit-appearance:none;
            position:absolute;
            top:0;
            left:0;
            opacity:0;
            width: 100%;
            height: 100%;
        }

        .r-action i{
            padding:5px 5px;
            background:white;
            border-radius:5px;
            border:1px solid rgba(0,0,0,0.1);
        }

        .r-action i.fa-trash{
            color:rgb(220,0,0);
        }

        table tbody tr:last-child td{
            border-bottom:1px solid rgba(0,0,0,0.08);
        }

        .sortable,
        table tbody td{
            white-space:nowrap;
        }
    </style>
@endsection

@section('content')

    <section id="content">
        <section class="vbox">
            <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>Employees</li>
                    <li class="active">All employees</li>
                </ul>
                @include('Layout.messages')
                <section class="panel panel-default">
                    <header class="panel-heading font-bold">
                        Employees
                    </header>
                    <div class="panel-body">
                        <div class="row clearfix" style="padding-bottom:5px;">
                            <div class="col-sm-4 m-t-xs m-b-xs">
                                <div class="input-group search datagrid-search">
                                    <input type="text" class="input-sm form-control" placeholder="Search">
                                    <div class="input-group-btn">
                                        <button class="btn btn-default btn-sm"><i class="fa fa-search"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="pull-right" style="margin:5px 10px 0 0;">
                                <a href="{{ route('employees.create') }}" class="btn btn-info btn-sm"><i class="fa fa-plus"></i>Create</a>
                                <a href="{{ route('employees.index') }}" class="btn btn-info btn-sm"><i class="fa fa-refresh"></i>Refresh</a>
                            </div>
                        </div>
                        <div class="row" style="overflow-x:auto;">
                            <table class="table table-striped m-b-sm">
                                <thead>
                                    <tr>
                                        <th class="sortable">Action</th>
                                        <th class="sortable">Employee ID</th>
                                        <th class="sortable">F. Name</th>
                                        <th class="sortable">L. Name</th>
                                        <th class="sortable">Email</th>
                                        <th class="sortable">Business Unit</th>
                                        <th class="sortable">Department</th>
                                        <th class="sortable">User Status</th>
                                        <th class="sortable">Work Phone</th>
                                        <th class="sortable">Job Title</th>
                                        <th class="sortable">Reporting Manager</th>
                                        <th class="sortable">Contact Number</th>
                                        <th class="sortable">Employment Status</th>
                                        <th class="sortable">Role</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($users as $user)
                                        <tr>
                                            <td class="r-action">
                                                <i class="fa fa-edit" data-user-id="{{ $user->id }}"></i>
                                                <i class="fa fa-eye" data-user-id="{{ $user->id }}"></i>
                                                <i class="fa fa-trash" data-user-id="{{ $user->id }}"></i>
                                            </td>
                                            <td>{{ $user->employee_id }}</td>
                                            <td>{{ $user->first_name }}</td>
                                            <td>{{ $user->last_name }}</td>
                                            <td>{{ $user->email_address }}</td>
                                            <td>{{ $user->business_unit }}</td>
                                            <td>{{ $user->department_name }}</td>
                                            <td>{{ ($user->is_active == 0)?'Inactive':'Active' }}</td>
                                            <td>{{ $user->work_phone }}</td>
                                            <td>{{ $user->job_title }}</td>
                                            <td>{{ $user->reporting_manager }}</td>
                                            <td>{{ $user->personal_phone }}</td>
                                            <td>{{ $user->employee_type }}</td>
                                            <td>{{ $user->role }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="pull-right" style="padding-right:10px;">
                        {{ $users->render() }}
                    </div>
                </section>
            </section>
        </section>
        <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
    </section>

@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 -->
@endsection

@section('j-script')
    <!-- Jquery -->
    <script>

        $(document).on('ready', function(){
            var form = document.getElementById('importForm');
            var input = document.getElementById('import_file');
            var change_running = false;
            input.addEventListener('change', function(){
                if(!change_running){
                    setTimeout(function(){
                        change_running = true;
                        form.submit();
                        change_running = false;
                    }, 300);
                }
            });
        });
       
    </script>

@endsection