@extends('Layout.Employeesmaster')

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

@section('content')
    <section id="content">
        <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 class="active">Employees</li>
            </ul>
            <div class=container-fluid>
                <div class=row style="float:right;position:relative">
                    <div class=col-md-3 style=width:49.5%>
                        <a href="{{ route('export') }}">
                            <button class="btn btn-success">Download Excel xls</button>
                        </a>
                    </div>
                    <div class=col-md-3 style=width:49.5%>
                        <form action="{{ route('import') }}" method="POST" enctype="multipart/form-data"
                              id="importForm">
                            {{ csrf_field() }}
                            <input type="file" name="file" class="form-control" id="import_file">
                            <input type="submit" class="btn btn-success" value="Import File">
                        </form>
                    </div>
                </div>
                <div class=row>
                    <legend style="padding:25px 5px 5px 10px">Employees</legend>
                    <div class="pull-right" style="margin:5px 20px 5px 10px;">
                        <a href="{{ route('employees.create') }}" class="btn btn-info btn-sm"><i class="fa fa-plus"></i>Add
                            Employee</a>
                    </div>
                </div>
                <div class=row style="padding:0px 5px 5px 10px">
                    <div class="table-responsive" style="padding:0px 5px 5px 10px">
                        <table class="table table-striped m-b-sm datagrid">
                            <thead>
                            <tr>
                                <th>Action</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email</th>
                                <th>Phone No.</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach(\App\EmployeeTest::all() as $employee)
                            <tr>
                                <td>
                                    <a href=""><span class="btn btn-default btn-sm"><i class="fa fa-eye no-margin"></i></span></a>
                                    <a href=""><span class="btn btn-default btn-sm"><i class="fa fa-edit no-margin"></i></span></a>

                                </td>
                                <td>{{ $employee->firstname }} {{ $employee->middlename }} </td>
                                <td>{{ $employee->lastname }}</td>
                                <td>{{ $employee->email ?? '' }}</td>
                                <td>{{ $employee->phonenumber }}</td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </section>
    <script>
        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
