@extends('layouts.default', ['appTopMenu' => true])
@section('title', 'Menu Management')
@push('scripts')
 <meta name="csrf-token" content="{{ csrf_token() }}" />
 <script src="/assets/plugins/jstree/dist/jstree.min.js" defer></script>
 <link href="/assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

function disable(node_id) {
  var node = $("#jstree-checkable").jstree().get_node( node_id );
  $("#jstree-checkable").jstree().disable_node(node); 
  node.children.forEach( function(child_id) {            
    disable( child_id );
  })
} 
function enable(node_id) {
  var node = $("#jstree-checkable").jstree().get_node( node_id );
  $("#jstree-checkable").jstree().enable_node(node); 
  node.children.forEach( function(child_id) {            
    enable( child_id );
  })
} 

function getMenusByRoles() {
	
    var postUrl = "{{ url('loadMenusByRoles')}}";
    var username=$('#username').val();
if(username.indexOf('#') !== -1){
    $.ajax({
        url: "{{ url('getUserRoles')}}",
        type: 'GET',
        cache: false,
        async: true, 
        data: {username: username},
        beforeSend:function(){
        },
        success: function (data, status)
        {
            var roles='';
$.each(data, function (index, element) {
    roles += '<li class="list-group-item">' + element.role_name + " - " + element.post_name + " - " + element.section_name + "</li>";

                          });
                $("#user_roles").html('<div class="mb-7px fs-10px mt-10px"><b class="text-dark">Permitted Roles</b></div><div class="card mb-0 border-1"><ul class="list-group list-group-flush">' + roles + '</ul></div>');
                          },
        error: function (xhr) {
            alert("Error:" + xhr.status + ' ' + xhr.statusText);
        }
    });


    $.ajax({
        url: postUrl,
        type: 'GET',
        cache: false,
        async: true, 
        data: {username: username},
        beforeSend:function(){

        },
        success: function (data, status)  
        {
      
            $("#jstree-checkable").jstree(true).deselect_all(true);
            $('#jstree-checkable li').each( function() {
     
    disable( this.id );

})
$.each(data, function (index, element) {
                 $("#jstree-checkable").jstree(true).enable_node(element.menuid);
                 if(element.revoked=='R'){
                 $("#jstree-checkable").jstree(true).select_node(element.menuid);
                 }
                 $("#jstree-checkable").jstree(true)._open_to(element.menuid);
                          });

                $("#menu_head").html("Menu Tree (Select Menus to Revoke Permission)");
                $("#revoke_div").removeClass("d-none");
        },
        error: function (xhr) {
            alert("Error:" + xhr.status + ' ' + xhr.statusText);
        }
    });
    $("#user_div").removeClass("d-none");
}
else{
alert('Select User');
return false;
}

}
function disableMenusByRoles() {
	
    var postUrl = "{{ url('loadMenusByRoles')}}";
    var username=$('#username').val();
if(username.indexOf('#') !== -1){
      $.ajax({
        url: postUrl,
        type: 'GET',
        cache: false,
        async: false, 
        data: {username: username},
        beforeSend:function(){

        },
        success: function (data, status)  
        {
            $("#jstree-checkable").jstree(true).deselect_all(true);
            $('#jstree-checkable li').each( function() {
                enable( this.id );

})
$.each(data, function (index, element) {
                 $("#jstree-checkable").jstree(true).disable_node(element.menuid);
                 
// var parents =  $("#jstree-checkable").jstree("get_path",$("#"+element.menuid+"_anchor"),true);
// alert(parents);
// for(var i=0; i<parents.length; i++){
// var obj = parents[i];
// alert(obj);
// $("#jstree-checkable").jstree(true).disable_node(obj);

// } 

               //  alert($("#jstree-checkable").jstree(true).get_parent(element.menuid).text);
                //  if(element.revoked=='R'){
                //  $("#jstree-checkable").jstree(true).select_node(element.menuid);
                //  }
                //  $("#jstree-checkable").jstree(true)._open_to(element.menuid);
                          });

                // $("#menu_head").html("Menus by Roles");
        },
        error: function (xhr) {
            alert("Error:" + xhr.status + ' ' + xhr.statusText);
        }
    });
    // $("#user_div").removeClass("d-none");
}
else{
alert('Select User');
return false;
}

}
function getMenus() {
	
    var postUrl = "{{ url('loadMenusByUser')}}";
    var username=$('#username').val();
if(username.indexOf('#') !== -1){
    $.ajax({
        url: postUrl,
        type: 'GET',
        cache: false,
        async: false, 
        data: {username: username},
        beforeSend:function(){
            // $("#jstree-checkable").jstree(true).deselect_all(true);
            disableMenusByRoles();
            
        },
        success: function (data, status)
        {
            // var model = $('#post');
            //     model.empty();
            $("#menu_head").html("Menu Tree (Select Menus to Grant Permission)");
            
            $.each(data, function (index, element) {
                // alert(element.menuid);
                $("#jstree-checkable").jstree(true).select_node(element.menuid);
                
                          });
        },
        error: function (xhr) {
            alert("Error:" + xhr.status + ' ' + xhr.statusText);
        }
    });
}
else{
alert('Select User');
return false;
}

}

  $("#username").autocomplete({
    minLength: 3,
    source: function(query, result)
  {
   $.ajax({
    url:"auto_user_profile",
    method:"POST",
    data:{query:query,usertype:$("#usertype").val(), wr:'', call_from:'', estb_code:$("#estb_code").val()},
    dataType:"json",
    success:function(data)
    {
     result($.map(data, function(item)
	 {
      return item;
     }));
    }
   })
  },
  autoFocus: true,
  select: function(event, ui) { 
    $(event.target).val(ui.item.value);
    $('#username').val(ui.item.value);
           getMenusByRoles();
           $('#setMenuOptions').removeClass('hide');
        },
  });

		</script>
@endpush

@push('head')


    <style>
        /*Custom CSS*/
        span {
            transition: color 0.5s ease-in;
        }

        label:focus-within span {
            color: blue;
        }

        input {
            display: block;
            width: 100%;
        }

        label,
        select {

            display: block;
            width: 100%;
            max-width: 100%;
        }

        /*Profile Pic Start*/
        .picture-container {
            position: relative;
            cursor: pointer;
            text-align: center;
        }

        .picture {
            width: 106px;
            height: 106px;
            background-color: #999999;
            border: 4px solid #CCCCCC;
            color: #FFFFFF;
            border-radius: 50%;
            margin: 0px auto;
            overflow: hidden;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }

        .picture:hover {
            border-color: #2ca8ff;
        }

        .picture input[type="file"] {
            cursor: pointer;
            display: block;
            height: 100%;
            left: 0;
            opacity: 0 !important;
            position: absolute;
            top: 0;
            width: 100%;
        }

        .picture-src {
            width: 100%;

        }

        /*Profile Pic End*/
        .form-control:focus,
        .form-select:focus,
        .form-check-input:focus,
        .select2:focus-within {
            border-color: #6265e4 !important;
            box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
        }
    </style>
@endpush
@section('content')
    <div class="row">
        <div class="col-md-6 mb-2">
            <div class="panel">
                <div class="panel-heading card-bg-color">
                    <h4 class="panel-title">User Name</h4>
                </div>
                @csrf
                <div class="panel-body">
         
                    <div class="row">
                        <div class='col-md-12 mb-2'>
                        <div class="sm-form">
                        <label for="estb_code" class=""><span>Establisment</span>
                            <select id="estb_code" name="estb_code" class="form-control form-select form-select-sm @error('estb_code') is-invalid @enderror" aria-label="Establisment">
                                @foreach ($establishmentData as $key => $value)
                                <option value="{{ $key }}" {{ ( $key == old("estb_code")) ? 'selected' : '' }}>
                                    {{ $value }}
                                </option>
                            @endforeach
                              </select>
                            </label>
                    @error('estb_code')
                    <span class="invalid-feedback d-inline" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                        </div>
                    </div>

                    </div>
                    <div class="row">
                        <div class='col-md-12 mb-2'>
                            <div class='md-form'>
                                <label class="control-label" for="usertype"><b>User Type</b>
                                    
                                        <select class="form-select form-select-sm" name='usertype' id='usertype'>
                                            <option value=''>Select User</option>
                                            @if (!empty($allUserType))
                                                @if (count($allUserType) > 0)
                                                    @foreach ($allUserType as $item)
                                                        <option value='{{ $item->id }}'>
                                                            {{ $item->type_name }}</option>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </select>
                                  
                                </label>
                            </div>
                        </div>
                    </div>      
                    <div class="row">
                        <div class='col-md-12 mb-2'>
                            <div class='md-form'>
                                <label class="control-label" for="username"><b>User Name</b>
                                    <input type="text" class="form-control"  name='username' id='username'  autocomplete="off" />
                                </label>
                            </div>
                        </div>
                    </div>      


                    <div class="card text-center border-0 hide" id="setMenuOptions">
                        <div class="card-header">
                        <ul class="nav nav-pills card-header-pills" role="tablist">
                        <li class="nav-item" role="presentation"><a class="nav-link active" data-bs-toggle="tab" href="#r_per" aria-selected="false" role="tab" tabindex="-1">Revoke Permission</a></li>
                        <li class="nav-item" role="presentation"><a class="nav-link " data-bs-toggle="tab" href="#m_per" aria-selected="true" role="tab">Menu Permission</a></li>
                    
                        </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content p-0 m-0">

                                <div class="tab-pane fade active show" id="r_per" role="tabpanel">

                                    
                    
                    <div class="row">
                                <div class='col-md-12 mb-2'>
                                    <div class='md-form'>
                                        <span id="user_roles"></span>
                                    </div>
                                </div>
                         
                     
                    </div>      

                    <div class="row d-none" id="revoke_div">
                                <div class='col-md-12 mb-2'>
                                    <div class='md-form'>
                                        <label for='pin' class=''><span>&nbsp;</span>
                                            <input type='button' id='srbutton' name='button'
                                                class='btn btn-primary btn-sm form-control' value='REVOKE PERMISSION FOR SELECTED MENUS'>
                                           
                                        </label>
                                    </div>
                                </div>
                         
                     
                    </div>      
                </div>
                <div class="tab-pane fade" id="m_per" role="tabpanel">

                    <div class="row d-none" id="user_div"> 
                                <div class='col-md-12 mb-2'>
                                    <div class='md-form'>
                                        <label for='pin' class=''><span>&nbsp;</span>
                                            <input type='button' id='subutton' name='button'
                                                class='btn btn-primary btn-sm form-control' value='GRANT PERMISSION TO SELECTED MENUS'>
                                           
                                        </label>
                                    </div>
                                </div>
                         
                     
                    </div>      
                </div>  
            </div>
        </div>
        </div>       
                </div>

            </div>
        </div>
        <div class='col-md-6 mb-2'>
            <div class="panel">
                <div class="panel-heading  card-bg-color ">
                    <h4 class="panel-title"><span id="menu_head">Menu Tree</span></h4>

                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="jstree-checkable"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            @php
                            $cntr=0;
                                $array_string = '';
                            @endphp
                            @if (!empty($allMenus))
                                @if (count($allMenus) > 0)
                                    @foreach ($allMenus as $item)
                                        @php
                                            $l2 = '';
                                            $l3 = '';
                                            $l4 = '';
                                            $cntr++;
                                            $temp_m1=explode('#',$item->menu1);
                                            $array_string .= '{ id: "t_'.$temp_m1[0].'", text: "' . $temp_m1[1] . '"';
                                        @endphp
                                        @if (!empty($item->menu2))
                                            @php
                                                $array_string .= ', children: [';
                                                // echo $item->menu2 . '<br><br>';
                                                // $item->menu2 = trim($item->menu2, '|L2|');
                                                $item_menu2 = ltrim($item->menu2, "|LTWO|");
                                                // echo $item_menu2 . '<br><br>';
                                                $arr_l2 = explode('|LTWO|', $item_menu2);
                                                $l2 = '';
                                                if (count($arr_l2) > 0) {
                                                    for ($i = 0; $i < count($arr_l2); $i++) {
 
                                                        $pos = strpos($arr_l2[$i], '|LTHREE|');
                                                        if ($pos === false) {
                                                            $temp_m2=explode('#',$arr_l2[$i]);
                                                            $array_string .= '{id: "t_'.$temp_m2[0].'",text: "'.$temp_m2[1].'"},';
                                                        }
                                                        else{//L3 exist
                                                        $arr_l3 = explode('|LTHREE|', $arr_l2[$i]);
                                                        $temp_m2=explode('#',$arr_l3[0]);
                                                        $array_string .= '{id: "t_'.$temp_m2[0].'",text: "'.$temp_m2[1].'", children:[';
                                                        // echo count($arr_l3) . '-l2B=' . $arr_l2[$i] . '<br>';
                                                        if (count($arr_l3) > 0) {
                                                            for ($j = 1; $j < count($arr_l3); $j++) {
                                                        
                                                        $pos = strpos($arr_l3[$j], '|LFOUR|');
                                                        if ($pos === false) {
                                                            $temp_m3=explode('#',$arr_l3[$j]);

                                                            $array_string .= '{id: "t_'.$temp_m3[0].'",text: "'.$temp_m3[1].'"},';
                                                        }
                                                        else{//L4 exists
                                                            
                                                                    $arr_l4 = explode('|LFOUR|', $arr_l3[$j]);
                                                                    $temp_m3=explode('#',$arr_l4[0]);

                                                                    $array_string .= '{id: "t_'.$temp_m3[0].'",text: "'.$temp_m3[1].'", children:[';
                                                                    if (count($arr_l4) > 1) {
                                                                        for ($k = 1; $k < count($arr_l4); $k++) {
                                                                            $temp_m4=explode('#',$arr_l4[$k]);

                                                                            $array_string .= '{id: "t_'.$temp_m4[0].'",text: "'.$temp_m4[1].'"},';

                                                                        } //endfor k
                                                                    }
                                                                    $array_string=trim($array_string,',');
                                                                    $array_string .= ']},';        
                                                                   
                                                                }


                                                            } //endfor j
                                                        }
                                                        $array_string=trim($array_string,',');
                                                        $array_string .= ']},';   
                                                    }//end else
                                                    } //endfor i
                                                }
                                                // $array_string .= '},';
                                            //end menu2
                                            $array_string=trim($array_string,',');
                                            $array_string .= ']';
                                            @endphp
                                        @endif
                                        @php
                                        $array_string .= '},';
                                        @endphp
                                    @endforeach
                                @endif
                            @endif
                 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(function() {
var member_array = [];


            $("#jstree-checkable").jstree({
                "plugins": ["wholerow", "checkbox", "types"],
                "core": {
                    "themes": {
                        "responsive": false
                    },
                    "data": member_array
                },
                "types": {
                    "default": {
                        "icon": "fa fa-folder text-primary fa-lg"
                    },
                    "file": {
                        "icon": "fa fa-file text-success fa-lg"
                    }
                }
            });


$(document).on('click','#subutton',function() {

    
var username=$('#username').val();

if(username.indexOf('#') !== -1){
   
var selectedMenu=[];
// var result = $('#jstree-checkable').jstree('get_selected'); 
// console.log(result.join('\n'));
var nodes = $("#jstree-checkable").jstree(true).get_selected("full", true);
$.each(nodes,function(i, node){
  if(node.children.length <=0){
    selectedMenu.push(node.id);
  }  
});
var selectedMenuString = JSON.stringify(selectedMenu);

// alert(selectedMenuString);


var postUrl = "{{ url('saveUserMenuPermission')}}";
            $.ajax({
                url: postUrl,
                type: 'POST',
                cache: false,
                async: true, 
                data: {selectedMenuString: selectedMenuString, username: username},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend:function(){
                    // $('#myModal').modal('show');
                    // $('#dv_shw_pdf').html("<div class='text-center'><div class='spinner-border'></div></div>");
                },
                success: function (data, status)
                {
                    alert('Done');
                    // var model = $('#section');
                    //     model.empty();
                    // $.each(data, function (index, element) {
                    //         if(element.post_code=='{{ old("section")}}')
                    //         var selOption=" selected=selected ";
                    //         else
                    //         var selOption='';
                    //         model.append("<option value='" + element.id + "'" + selOption + ">" + element.section_name + "</option>");
                    //     });
                },
                error: function (xhr) {
                    alert("Error:" + xhr.status + ' ' + xhr.statusText);
                }
            });

        }
        else{
        alert('Select User');
    return false;
}
});

$(document).on('click','.nav-link',function() {
 
   if($(this).attr('href')=='#r_per'){
    getMenusByRoles();
   }
   if($(this).attr('href')=='#m_per'){
   getMenus();
   }

});
$(document).on('click','#srbutton',function() {

    
var username=$('#username').val();

if(username.indexOf('#') !== -1){
   
var selectedMenu=[];
// var result = $('#jstree-checkable').jstree('get_selected'); 
// console.log(result.join('\n'));
var nodes = $("#jstree-checkable").jstree(true).get_selected("full", true);
$.each(nodes,function(i, node){
  if(node.children.length <=0){
    selectedMenu.push(node.id);
  }  
});
var selectedMenuString = JSON.stringify(selectedMenu);

// alert(selectedMenuString);


var postUrl = "{{ url('saveUserRevokedMenuPermission')}}";
            $.ajax({
                url: postUrl,
                type: 'POST',
                cache: false,
                async: true, 
                data: {selectedMenuString: selectedMenuString, username: username},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend:function(){
                    // $('#myModal').modal('show');
                    // $('#dv_shw_pdf').html("<div class='text-center'><div class='spinner-border'></div></div>");
                },
                success: function (data, status)
                {
                    alert('Done');
                    // var model = $('#section');
                    //     model.empty();
                    // $.each(data, function (index, element) {
                    //         if(element.post_code=='{{ old("section")}}')
                    //         var selOption=" selected=selected ";
                    //         else
                    //         var selOption='';
                    //         model.append("<option value='" + element.id + "'" + selOption + ">" + element.section_name + "</option>");
                    //     });
                },
                error: function (xhr) {
                    alert("Error:" + xhr.status + ' ' + xhr.statusText);
                }
            });

        }
        else{
        alert('Select User');
    return false;
}
});

        })
    </script>
@endpush