@extends('layouts.default', ['appTopMenu' => true])
@section('title', 'Menu Management')
<script src="/assets/plugins/jstree/dist/jstree.min.js" defer></script>
<link href="/assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />
@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">Roles/Post/Section</h4>
                </div>
                @csrf
                <div class="panel-body">
                    <div class="row">
                        <div class='col-md-6 mb-2'>
                            <div class='md-form'>
                                <label class="control-label" for="roles"><b>Roles</b>
                                    <select class="form-select form-select-sm" name='roles' id='roles'>
                                        <option value=''>Select Role</option>
                                        @if (!empty($allRoles))
                                            @if (count($allRoles) > 0)
                                                @foreach ($allRoles as $item)
                                                    <option value='{{ $item->id }}'>
                                                        {{ $item->role_name }}</option>
                                                @endforeach
                                            @endif
                                        @endif
                                    </select>
                                </label>
                            </div>
                        </div>
                        
                    </div>


                    <div class="row">
                        <div class='col-md-6 mb-2'>
                            <div class='md-form'>
                                <label class="control-label" for="post"><b>Post</b>
                                    <select class="form-select form-select-sm" name='post' id='post'>
                                        <option value=''>Select Post</option>
                                    
                                    </select>
                                </label>
                            </div>
                        </div>
                    </div>                    


                    <div class="row">
                        <div class='col-md-6 mb-2'>
                            <div class='md-form'>
                                <label class="control-label" for="section"><b>Section</b>
                                    <select class="form-select form-select-sm" name='section' id='section'>
                                        <option value=''>Select Section</option>
                                    
                                    </select>
                                </label>
                            </div>
                        </div>
                    </div>      

                    <div class="row">
                                <div class='col-md-2 mb-2'>
                                    <div class='md-form'>
                                        <label for='pin' class=''><span>&nbsp;</span>
                                            <input type='button' id='sbutton' name='button'
                                                class='btn btn-primary btn-sm form-control' value='SUBMIT'>
                                            <input type='button' id='tdata' style='display:none' name='tbutton'
                                                class='btn btn-primary btn-sm form-control' value='SUBMIT'>
                                        </label>
                                    </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">Menus</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("change", '#roles', function () {
            var postUrl = "{{ url('loadPosts')}}";
            $.ajax({
                url: postUrl,
                type: 'GET',
                cache: false,
                async: true, 
                data: {roleid: $(this).val()},
                beforeSend:function(){
                    // $('#myModal').modal('show');
                    // $('#dv_shw_pdf').html("<div class='text-center'><div class='spinner-border'></div></div>");
                },
                success: function (data, status)
                {
                    var model = $('#post');
                        model.empty();
                        // model.append("<option></option>");
                    $.each(data, function (index, element) {
                            if(element.post_code=='{{ old("post")}}')
                            var selOption=" selected=selected ";
                            else
                            var selOption='';
                            model.append("<option value='" + element.post_code + "'" + selOption + ">" + element.post_name + "</option>");
                        });
                },
                error: function (xhr) {
                    alert("Error:" + xhr.status + ' ' + xhr.statusText);
                }
            });

            var sectionUrl = "{{ url('loadSections')}}";
            $.ajax({
                url: sectionUrl,
                type: 'GET',
                cache: false,
                async: true, 
                data: {roleid: $(this).val()},
                beforeSend:function(){
                    // $('#myModal').modal('show');
                    // $('#dv_shw_pdf').html("<div class='text-center'><div class='spinner-border'></div></div>");
                },
                success: function (data, status)
                {
                    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);
                }
            });
        });

        $(document).on("change", '#post, #section', function () {
            var postUrl = "{{ url('loadMenus')}}";
            var roles=$('#roles').val();
            var post=$('#post').val();
            var section=$('#section').val();
            $.ajax({
                url: postUrl,
                type: 'GET',
                cache: false,
                async: true, 
                data: {roles: roles, post: post, section: section},
                beforeSend:function(){

                },
                success: function (data, status)
                {
                    // var model = $('#post');
                    //     model.empty();
               
                    $("#jstree-checkable").jstree(true).deselect_all(true);
                    $.each(data, function (index, element) {
                        $("#jstree-checkable").jstree(true).select_node(element.menuid);
                                  });
                },
                error: function (xhr) {
                    alert("Error:" + xhr.status + ' ' + xhr.statusText);
                }
            });


        });

$(document).on('click','#sbutton',function() {
var roles=$('#roles').val();
var post=$('#post').val();
var section=$('#section').val();
if(section==''){
    alert('Select Section');
    return false;
}
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('saveMenuPermission')}}";
            $.ajax({
                url: postUrl,
                type: 'POST',
                cache: false,
                async: true, 
                data: {selectedMenuString: selectedMenuString, roles: roles, post: post, section: section},
                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);
                }
            });


});


$('#roles').change();
        })
    </script>
@endpush