@extends('layouts.app')
@section('content')
    <div class="content-wrapper">
        <div class="container-fluid">
        <!-- Breadcrumb-->
        <div class="row pt-2 pb-2">
            <div class="col-sm-9">
                <h4 class="page-title">{{$breadcrumb}}</h4>
            </div>
        </div>
        <!-- End Breadcrumb-->
    <div class="row">
        <div class="col-lg-12">
            <div class="card-body">
                  <form id="form-permission">
                  <div class="card">
                    <div class="card-header">
                       Setting Menu
                    </div>
                    <div class="card-body col-sm-4">
                        <input type="hidden" name="role_id" value="{{(isset($_GET['id'])) ? $_GET['id'] : ""}}">
                        <div id="tree_1" class="tree-demo">
                            <ul>
                                @foreach($menu as $m)
                                    <li data-jstree='{ "opened" : true }' id="{{$m->menu_id}}">
                                         {{$m->menu_name}}
                                        @php
                                            $menu = \App\Models\M_Menu::where('menu_parent',$m->menu_id)->get();                    
                                            if(!empty($menu))
                                            {   

                                                foreach ($menu as  $value)  
                                                {
                                                  $sub_menu = \App\Models\M_Menu::where('menu_parent',$value->menu_id)->get();
                                                  
                                                    echo  $telo ="<ul>
                                                        <li data-jstree='{  selected : true,opened : false }' id='".$value->menu_id."'>
                                                              ".$value->menu_name." ";
                                                          if(!empty($sub_menu))
                                                          {
                                                              foreach ($sub_menu as  $value) 
                                                              {
                                                                   echo  "<ul>
                                                                            <li  id='".$value->menu_id."'>".$value->menu_name."</li>
                                                                          </ul>";
                                                              }
                                                          }    
                                                     echo "</li>
                                                        </ul>";
                                                }
                                            }       
                                        @endphp
                                    </li>
                                @endforeach
                            </ul>
                        </div> 
                    </div>

                    <div class="col-sm-10">
                      <h3 class="m-b-20" style="color:#000 "> Permisson </h3>
                      <div class="table-responsive">
                          <table class="table  custom-table" id="table-permission">
                               <tr>
                                  <td> Silahkan pilih menu terlebih dahulu </td>
                              </tr>
                          </table>
                      </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="fa fa-dot-circle-o"></i> Submit
                        </button>
                        <button type="reset" class="btn btn-danger btn-sm">
                            <i class="fa fa-ban"></i> Reset
                        </button>
                    </div>
                    </form>
                  </div>
                </div>
            </div>
        </div><!-- .animated -->
    <!-- </div>.content -->

@endsection
@section('js')
<script type="text/javascript">
    var data_selected;
    var role_id = $('[name="role_id"]').val();
    form = $("#index");
    $('#tree_1').jstree({
        "core" : {
            "themes" : {
                "responsive": true
            }            
        },
        "checkbox": {       
          three_state : false, // to avoid that fact that checking a node also check others
        },
        "plugins": ["checkbox"]
    });

    $('#tree_1').on('ready.jstree', function(e,data) {
        $("#tree_1").jstree("open_all");   
         $.ajax({
              type    : 'GET',
              url     : '/get-menu',
              data    : {role_id:role_id},
              success: function(values)
              {
                $.each(values.data.data,function(i,v){
                    $('#tree_1').jstree(true).select_node(v.menu_id);   
                    // console.log(v.menu_id);
                })
                 
              },
        }); 
    });

    $('#tree_1').on('ready.jstree', function(e,data) {
        $("#tree_1").jstree("open_all");   
         $.ajax({
              type    : 'GET',
              url     : '/get-menu',
              data    : {role_id:role_id},
              success: function(values)
              {
                $.each(values.data.data,function(i,v){
                    $('#tree_1').jstree(true).select_node(v.menu_id);   
                    console.log(v.menu_id);
                })
                 
              },
        }); 
    });

    $('#tree_1').on("changed.jstree", function (e, data) {
         data_selected = data.selected;
         var table = $('#table-permission');
         $.ajax({
              type    : 'GET',
              url     : '/get-permission',
              data    : {id:data.selected,role_id:role_id},
              success: function(values)
              {
                table.empty();
                table.append(values)
              },
        });
    });

    //save ke database
    $('#form-permission').submit(function(event){
    
        event.preventDefault(); //prevent default action 
        data =     $('#table-permission').find('input[type="checkbox"]:checked');

        var role_id = $('[name="role_id"]').val(); 
        var permission = new Array(); 
        $("#table-permission input[type=checkbox]:checked").each(function () {
            if(this.value != "")
            {
                permission.push(this.value);    
            }    
        });
      swal({
        title: "Apakah anda yakin ?",
        text: "Input data ini",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      })
      .then((willDelete) => {
        if (willDelete) {
            $.ajax({
                  type    : 'POST',
                  url     : '/save-permission',
                   headers : {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                  },
                  data    : {
                                'menu_id':data_selected,
                                'permission_id':permission,
                                'role_id':role_id
                            },
                  success: function(values)
                  {
                    swal({
                      title: "Success!",
                      text: "Data berhasil diinput",
                      icon: "success",
                      button: "Ok!",
                    }).then(function(){
                        location.reload(true)
                    });  
                  },
            }).fail(function(data) {  
                    var dt = data.responseJSON;
                    console.log(dt.status.message);  
                    swal({
                      title: dt.status.message,
                      type: "error"
                    })
                    
            }); 
        }
      });

    })
function checkAll(e,id)
{   
    console.log(e);
    $("."+id).prop('checked', $(e).prop("checked")); //change all ".checkbox" checked status

}
</script>
@endsection