@extends('layouts.admin')
<style>
    .panel-heading{
        padding-left: 25px;
    }
</style>
@section('content')
    <div class="row">
        <div class="col-xs-12 col-sm-12 column col-sm-offset-0 ">
            <div class="panel panel-default panel-frm">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel-heading">
                            <h3>Employee Permission </h3>
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="panel-body">
                    <div class="clearfix"></div>
                    <div class="x_panel">
                        <div class="x_content">
                          <div class="row">
                            <div class="col-md-12">
                            <form method="post" action="{{route('user.role.create')}}" id="role_permission_form" autocomplete="off" class="input-form-section">
                                @csrf

                                <div class="form-group">
                                    <label for="employee">Employees</label>
                                    <select name="employee_id" id="employee_dropdown"  class="form-control" >
                                        <option value="">Select Employee</option>
                                        @foreach($employees as $employee)
                                            <option value="{{$employee['id']}}">{{$employee['first_name'].' '.$employee['last_name']}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="row" style="margin-left: 2px">
                                    <div class="col-md-8 col-xs-12" >
                                        @include('partials.permission',['moduleSubmoduleAssoc'=>$moduleSubmoduleAssoc])
                                    </div>
                                </div>

                                @if(isShowContent('user.role.create'))
                                    <div class="col-sm-12 text-center">
                                        <input class="btn btn-success btn2" type="submit" value="Save Changes">
                                    </div>
                                @endif
                            </form>
                        </div>
                         </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('script')
    <script>
        $('#employee_dropdown').change(function (){
           let employee_id = $('#employee_dropdown').val();
            $("#sub_module_panel input").prop('checked', false);
           if(employee_id > 0)
           {
               let url = '{{route('user.role.get')}}';
               let action = 'GET_USER_PERMISSION';
               common_helper.globalAjaxRequestAsync( url,'GET',{ id : employee_id, action : action},user_permission_callback);
           }

        });

        const user_permission_callback = (result)=>{
            if(result.status)
            {
                let permitted_ids = result.data;

                $.each(permitted_ids, function(i, val){

                    $("#sub_module_panel input[value='" + val + "']").prop('checked', true);

                });

            }

        }

            $('#role_permission_form').validate({
            rules: {
            'employee_id': 'required',
            'userRole': 'required',
        },
            messages: {
            'employee_id': {
                   required: "Please select an employee"
             },
            'userRole': {
                required: "Please select permission"
             },

        },
            highlight: function (element) {
            $(element).parent().addClass("has-error");
             },
            submitHandler: function (form) {
            form.submit();
        }
        });
    </script>
@endpush