@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('employeeList')}}" 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 class="col-md-4 col-12 text-right">
                    <a class="add-employee" href="#" data-toggle="modal" data-target="#addEmployee">
                        Add Employee <i class="fa fa-plus" aria-hidden="true"></i>
                    </a>
                </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">
                                            @if($edit_emp_access)
                                                <a class="btn btn-light edit_employee" data-id="{{$employee['emp_id']}}"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                                            @endif
                                            @if($delete_emp_access)
                                                <a class="btn btn-light delete" d="{{$employee['emp_id']}}"><i class="fa fa-trash" aria-hidden="true"></i> </a>
                                                @if($employee['status'] == 1)
                                                    <button type="button" data-id="{{$employee['emp_id']}}" class="btn btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="off">
                                                @elseif($employee['status'] == 2)
                                                    <span>Deactivate Request Sent</span>
                                                @elseif($employee['status'] == 3)
                                                    <button type="button" class="btn btn-toggle" data-id="{{$employee['emp_id']}}" data-toggle="button" aria-pressed="false" autocomplete="off">
                                                @endif

                                                <div class="handle"></div>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {!! $employees_->links() !!}
        <div id="editEmployeeModal"></div>
        @include('layouts.employee_modal')
        @include('layouts.modals')
    </section>
@endsection

@section('script')
    <script>
        $('.btn-toggle').on('click', function (){
            let btn = $(this);
            if($(btn).hasClass('active')){
                loading();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                var empid = $(btn).data('id');
                $.ajax({
                    url: '{{$action_deactivate}}/'+empid ,
                    type: "GET",
                    cache: false,
                    success: function( response ) {
                        unLoading();
                        // success message should appear
                        if(response.status){
                            $(".invalid-feedback").css('color','green').html("<strong>"+response.msg+"</strong>" );
                            $(".invalid-feedback").show();
                            $("#successModal").modal("show");
                            $(btn).after('<span>Deactivate Request Sent</span>').remove();
                            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);
                        }
                    }
                });
            }
            else{
                loading();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                var empid = $(btn).data('id');
                $.ajax({
                    url: '{{$action_activate}}/'+empid ,
                    type: "GET",
                    cache: false,
                    success: function( response ) {
                        unLoading();
                        // success message should appear
                        if(response.status){
                            $(".invalid-feedback").css('color','green').html("<strong>"+response.msg+"</strong>" );
                            $(".invalid-feedback").show();
                            $("#successModal").modal("show");
                            $(btn).after('<span>Activate Request Sent</span>').remove();
                            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);
                        }
                    }
                });
            }
        })

        $(".edit_employee").on('click', function (e) {
            e.preventDefault();
            loading();
            var empid = $(this).data('id');
            $('#editEmployeeModal').load("addEmployee/"+empid, function(){
                $('#addEmployee').modal('show');
                unLoading();
            });
        });

        $('#editEmployeeModal').on("click", ".close_modal", function (e){
            $('#addEmployee').modal('hide');
            $(".modal-backdrop").hide();
            $('#editEmployeeModal').empty();
            $("body").removeClass("modal-open");
        });
    </script>

    <script src="{{asset('js/dropify.js')}}"></script>
    <script>
        // add dropify
        $('.dropify').dropify();
    </script>

    <script>
        $('.employeeList').on('click', '.save_form', function() {
            $(this).closest('.save_employee').validate({
                rules: {
                    'occupation': {
                        required: true,
                    },
                    'emp_name': {
                        required: true,
                        maxlength: 50
                    }
                },
                messages: {
                    'occupation': {
                        required: "Please Select Occupation",
                    },
                    'emp_name': {
                        required: "Please Enter employee name",
                        maxlength: "Employee Name maxlength should be 50 characters long."
                    }
                },
                submitHandler: function(form) {
                    loading();
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    var form = new FormData($('.save_employee')[0]);
                    form.append('view_type','addtemplate');

                    $.ajax({
                        url: '{{$action}}' ,
                        type: "POST",
                        data: form,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function( response ) {
                            unLoading();
                            // success message should appear
                            if(response.status){
                                setTimeout(function(){
                                    window.location.href= "{{env('APP_URL')}}" + "employeeList";
                                },300);
                            } else {
                                // error should appear
                                $(".invalid-feedback").html("<strong>"+response.msg+"</strong>" );
                                $(".invalid-feedback").show();
                            }
                        }
                    });
                }
            });
        });

        $(".employee_Row").on('click touchstart','.delete',function(){
            $(".deleteHeader").text('Delete Employee');
            $("#deleteSetting").modal("show");
            $("#setting_id").val($(this).attr('d'));
        });

        $("#deleteSetting").on('click touchstart','.delete',function(){
            var id = $('#setting_id').val();
            var th = $("#row_"+id);
            if(id){
                loading();
                $.ajax({
                    type:"GET",
                    cache:false,
                    url:'{{$delete_employee_link}}/'+id,
                    success: function (response) {
                        unLoading();
                        if(response.status){
                            // success message
                            th.closest('tr').remove();
                            $("#deleteSetting").modal("hide");
                            $(".invalid-feedback").css('color','green').html("<strong>"+response.msg+"</strong>" );
                            $(".invalid-feedback").show();
                            $("#successModal").modal("show");
                            setTimeout(function(){
                                $("#successModal").modal("hide");
                            },1500);
                        }
                        else {
                            $("#deleteSetting").modal("hide");
                            $(".invalid-feedback").css('color','red').html("<strong>"+response.msg+"</strong>" );
                            $(".invalid-feedback").show();
                            $("#errorModal").modal("show");
                            setTimeout(function(){
                                $("#errorModal").modal("hide");
                            },3000);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        unLoading();
                    }
                });
            }
        });
    </script>
@endsection