@extends('backend.layouts.app')
@section('content')
<style>
</style>
<div class="col-xl-12">
  <div class="breadcrumb-holder">
    <h1 class="main-title float-left">Menu Permission</h1>
    <ol class="breadcrumb float-right">
      <li class="breadcrumb-item"><a href="{{route('dashboard')}}"><strong>Home</strong></a></li>
      <li class="breadcrumb-item"><a href="{{route('user')}}">User</a></li>
      <li class="breadcrumb-item active">Menu Permission</li>
    </ol>
    <div class="clearfix"></div>
  </div>
</div>
<div class="container fullbody">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3>Select Role</h3>
      </div>
      <div class="card-body">
        <form id="permission" class="form-horizontal" action="" method="get">
          <input id="menu_id" type="hidden" value="{{@$menu_id}}"> 
          <div class="form-group row">
            <div class="col-sm-4">
              <label class="control-label">User Role<span class="required">*</span></label>
              <select id="user_role" name="user_role" class="form-control form-control-sm">
                <option value="">Select Role</option>
                @foreach($role as $r)
                <option {{(request()->user_role==$r->id)?'selected':''}} value="{{$r->id}}">{{$r->name}}</option>
                @endforeach
              </select>
            </div>
            <div class="col-sm-4">
              <label class="control-label">Module List</label>
              <select name="menu_id[]" class="form-control form-control-sm select2" multiple="multiple">
                <option value="">Select Module</option>
                @foreach($parent_menu as $m)
                 
                  <option
                  @php
                  if(isset(request()->menu_id)){
                    foreach(request()->menu_id as $id){
                     echo ($id==$m->id)?'selected':'';
                    }
                  }
                  @endphp
                    value="{{$m->id}}">{{$m->name}}</option>                 
                @endforeach
              </select>
            </div>           
            <div class="col-sm-3">              
              <button type="submit" class="btn btn-info btn-sm" style="margin-top:28px">
                <i class="ion-search"></i> Search</button>             
              </div>
            </div>       
          </form>
        </div>
      </div>
      <br>
      @if(isset($menu)&& !empty($menu))
      <div class="card">
        <div class="card-header">       
          <h3><i class="fa fa-folder-open-o"></i> Add Permission</h3>      
        </div>
        <div class="card-body">

         <div class="checkboxesTree">           
          <ul>
            @foreach($menu as $m)          
            {{-- @php dd($m['permission']) @endphp --}}
            <li id="{{'node_'.$m['id']}}" data-jstree='{"opened":true,"icon":"fa fa-folder-open"}'>{{$m['name']}}
              <ul>                    
                <li id="{{$m['route'].'_'.$m['id']}}">
                  <a {{!empty($m['permission'])? (in_array($m['route'],$m['permission']))? 'class=jstree-clicked':'':''}} >
                    View
                  </a>
                </li>
                @if($m['add']!=NULL)
                <li id="{{$m['add'].'_'.$m['id']}}">
                  <a {{!empty($m['permission'])? (in_array($m['add'],$m['permission']))? 'class=jstree-clicked':'':''}} >
                    Add
                  </a>
                </li>
                @endif
                @if($m['edit']!=NULL)
                <li id="{{$m['edit'].'_'.$m['id']}}">
                  <a {{!empty($m['permission'])? (in_array($m['edit'],$m['permission']))? 'class=jstree-clicked':'':''}} >
                    Edit
                  </a>
                </li>
                @endif
                @if($m['delete']!=NULL)
                <li id="{{$m['delete'].'_'.$m['id']}}">
                  <a {{!empty($m['permission'])? (in_array($m['delete'],$m['permission']))? 'class=jstree-clicked':'':''}} >
                    Delete
                  </a>
                </li>
                @endif
              </ul>
            </li>
            @endforeach
          </ul>  
        </div>
      </div>       
    </div>
    <div class="card">
      <div class="card-body">
        <button id="add" class="btn btn-info btn-sm">
          <i class="ion-upload"></i> Add Menu Permission</button>
        </div>      
      </div>  
    </div>
    @endif
  </div>
  <style>
    .preload{
        position:fixed;
        top: 0;
        left:0;
        height:100vh;
        width: 100vw;
        display:flex;
        justify-content:center;
        align-items: center;
        background:rgba(35, 35, 35, 0.8);
    }
  </style>
  <div class="preload">
    <img src="{{url('public/backend/images/loading/loading.gif')}}" class="" alt="Error">
  </div>
<script>
  $(function(){
      $('.preload').hide();
      $('#permission').validate({
        rules:{
            user_role:{
              required: true
            }        
        },
        messages:{
            user_role:{
              required: "Please select a role."
            }        
        } 
         
      });

      var menu='';
      $('.checkboxesTree').on("changed.jstree", function (e, data) {
        menu=data.selected.toString();      
      });

      $('#add').on('click',function(){
          $('.preload').show();
          var url="{{route('user.permission.store')}}";
          var role_id="{{request()->user_role}}";
          var menu_id=$('#menu_id').val();          
          if(menu){
           $.ajax({
              'url':url,
              'type':'get',
              'data':{menu:menu,role_id:role_id,menu_id:menu_id}, //menu is a string
              success:function(response){

                  if(response.status=='success'){
                    $('.preload').hide();
                    window.location.href="{{route('user.permission')}}";
                  }
              }
            });
         }else{
          $('.preload').hide();   
          $.notify("Permission doesn't select","error");
         }     

    });
  });
</script>
  @endsection