@extends('master.admin')

@push('header.scripts')
<link rel="stylesheet" href="{{ asset('public/assets/global/plugins/jstree/dist/themes/default/style.min.css') }}">
@stop

@push('footer.scripts')
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<!-- END PAGE LEVEL SCRIPTS -->
<script>
    $(function() {
        $('#tree_2').jstree({
            'plugins': ["wholerow", "checkbox", "types"],
            'core': {
                "themes" : {
                    "responsive": false
                },    
                'data': {!! $treeHtml !!}
            }
        });
        
        /*
         * Submit form for add new Role information
         */
        $("#role_permission_form").submit(function(e){
            $('#addeditrole_error_div').hide();
            $('#addeditrole_success_div').hide();
            
            var checked_ids = []; 
            var getTreeObj = $("#tree_2").jstree('get_json');
            $(getTreeObj).each(function(index, value) {
                if(typeof(value.state) != 'null'){
                    if( value.state.selected ){
                       checked_ids.push(value.id); 
                    }
                }
                if(typeof(value.children) != 'null'){
                    $(value.children).each(function(childIndex, childNode) {
                        if(typeof(childNode.state) != 'null'){
                            if( childNode.state.selected ){
                               checked_ids.push(childNode.id); 
                            }
                        }
                    });
                }
            });
            if( checked_ids.length == 0 ){
                $('#addeditrole_error_div').show();
                $('#addeditrole_error_msg').html('Please select atleast one permission!');
                return false;
            }
            $('#role_permission_form #selected_nodes').val(checked_ids);
            startBlockUI('#role_permission_form', 'animate');
            var token = $('#token_csrf').val();
            var formData = $(this).serialize();
            
            $.ajax({
                url : $(this).attr('action'),
                headers: {'X-CSRF-TOKEN': token},
                type: $(this).attr('method'),
                data : formData,
                dataType: 'json',
                success:function(response) {
                    if(response.status){
                        if( response.status == '0' ){
                            
                            $('#addeditrole_success_div').hide();
                            $('#addeditrole_error_div').show();
                            $('#addeditrole_error_msg').html(response.message);
                            endBlockUI('#addedit_role_form');
                            $("#addeditrole_error_div").fadeTo(0, 1);
                            fadeout_div('addeditrole_error_div');
                            return false;
                        }else{
                            $('#addeditrole_error_div').hide();
                            $('#addeditrole_success_div').show();
                            $('#addeditrole_success_msg').html(response.message);
                            window.setTimeout(function(){
                                endBlockUI('#addedit_role_form');
                                window.location.reload(true); 
                            }, 3000);  
                        }
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    return false;   
                }
            });
            e.preventDefault(); //STOP default action
        });
    });
</script>
@stop

@section('content')
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="#">Administration</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="{{url('admin/roles')}}">Roles</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <span>Manage Permissions</span>
                </li>
            </ul>
        </div>
        <!-- END PAGE BAR -->
        <!-- BEGIN PAGE TITLE-->
        <h3 class="page-title"> </h3>
        <!-- END PAGE TITLE-->
        <div class="row">
            <div class="col-md-12">
                <div id="addeditrole_success_div" class="error-block form-group" style="display:none; ">
                    <div id="addeditrole_success_msg" class="alert alert-success col-md-12"></div>
                </div>
                <div id="addeditrole_error_div" class="error-block form-group" style="display:none; ">
                    <div id="addeditrole_error_msg" class="alert alert-danger col-md-12"></div>
                </div>
                <div class="portlet box blue-hoki">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-plus"></i>Manage Permissions</div>
                        <div class="tools"></div>
                    </div>
                    <div class="portlet-body form">
                        
                        <form id="role_permission_form" action="{!! url('admin/roles/update_permission') !!}"  method="post">
                        <input type="hidden" name="token_csrf" id="token_csrf" value="{{ csrf_token() }}" />
                        <input type="hidden" name="id" value="{{$role->id}}" />
                        <input type="hidden" name="selected_nodes" id="selected_nodes" value="" />
                        <div class="form-body">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label">Name <span class="required">*</span></label>
                                        <input type="text" id="path" name="path" class="form-control" required="" value='{{$role->name}}' >
                                    </div>
                                </div>
                                <!--/span-->
                                <div class="col-md-6">
                                    <div class="portlet light bordered">
                                        <div class="portlet-title">
                                            <div class="caption">
                                                <i class="icon-bubble font-green-sharp"></i>
                                                <span class="caption-subject font-green-sharp bold uppercase">Permission Tree</span>
                                            </div>
                                            <div class="actions"></div>
                                        </div>
                                        <div class="portlet-body">
                                            <div id="tree_2" class="tree-demo"> </div>
                                        </div>
                                    </div>

                                    <!--/span-->
                                </div>
                                <!--/row-->
                                <!-- BEGIN HEADER & CONTENT DIVIDER -->
                                <div class="clearfix"> </div>
                                <!-- END HEADER & CONTENT DIVIDER -->
                                <!--/row-->
                                <div class="form-actions right">
                                    <a href="{{url('admin/roles')}}" class="btn default">Cancel</a>
                                    <button type="submit" class="btn blue">
                                        <i class="fa fa-check"></i> Save
                                    </button>
                                </div>
                            </div>
                          </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- END CONTENT BODY -->
    </div>
    <!-- END CONTENT WRAPPER -->   
    @stop