@extends('layouts.app')
@section('content')
    <section class="contnet employeeList">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-8 col-12">
                    <h1 class="page-title">Employee list</h1>
                    <form action="{{url('unapprovedEmployees')}}" method="post" enctype="multipart/form-data" id="search_employee" class="search-form">
                        @csrf
                        <div class="form-row ">
                            <div class="form-group col-xl-4 col-lg-5 col-md-6 col-7">
                                <input type="text" name="emp_name" class="form-control" value="{{$emp_name}}" id="search" placeholder="Search">
                            </div>
                            <div class="form-group col-xl-3 col-lg-4 col-md-5 col-5">
                                <button type="submit" class="btn btn-info searchBtn">SEARCH</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <input type="hidden" id="setting_id" value="">
            <!--Start Employee List Tabel -->
            <div class="row employee_Row">
                <div class="col-12">
                    <hr>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th scope="col">Employee name</th>
                                <th scope="col">Occupation</th>
                            </tr>
                            </thead>
                            <tbody>
                            @if(count($employees_) > 0)
                                @foreach($employees_ as $employee)
                                    <tr id="row_{{$employee['emp_id']}}">
                                        <td class="group">{{$employee['emp_name']}}</td>
                                        <td class="group">
                                            @switch($employee['occupation'])
                                                @case(1) Designer @break
                                                @case(2) Account Manager @break
                                                @case(3) Project Officer @break
                                                @default Not occupied
                                            @endswitch
                                        </td>

                                        <td class="action">
                                            <a class="btn btn-light approve_employee" data-id="{{$employee['emp_id']}}"><i class="fa fa-check-circle" aria-hidden="true"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {!! $employees_->links() !!}
        @include('layouts.modals')
    </section>
@endsection

@section('script')
    <script>
        $(".approve_employee").on('click', function (e) {
            e.preventDefault();
            loading();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var empid = $(this).data('id');
            $.ajax({
                url: '{{$action}}/'+empid ,
                type: "GET",
                cache: false,
                success: function( response ) {
                    unLoading();
                    // success message should appear
                    if(response.status){
                        $('#row_'+empid).remove();
                        $(".invalid-feedback").css('color','green').html("<strong>"+response.msg+"</strong>" );
                        $(".invalid-feedback").show();
                        $("#successModal").modal("show");
                        setTimeout(function(){
                            $("#successModal").modal("hide");
                        },2000);
                    } else {
                        $(".invalid-feedback").css('color','red').html("<strong>"+response.msg+"</strong>" );
                        $(".invalid-feedback").show();
                        $("#errorModal").modal("show");
                        setTimeout(function(){
                            $("#errorModal").modal("hide");
                        },3000);
                    }
                }
            });
        });
    </script>
@endsection