@extends('admin.layout.master')
@section('title','ROLE MANAGEMENT')
@section ('content') 
<style>
                              
  .tree {
    margin: 2% auto;
    width: 80%;
  }
  
  .tree ul {
    display: none;
    margin: 4px auto;
    margin-left: 6px;
    border-left: 1px dashed #dfdfdf;
  }
  
  
  .tree li {
    padding: 12px 18px;
    cursor: pointer;
    vertical-align: middle;
    
  }
  
  .tree li:first-child {
    border-radius: 3px 3px 0 0;
  }
  
  .tree li:last-child {
    border-radius: 0 0 3px 3px;
  }
  
  .tree .active,
  .active li {
    background: #efefef;
  }
  
  .tree label {
    cursor: pointer;
  }
  
  .tree input[type=checkbox] {
    margin: -2px 6px 0 0px;
  }
  
  .has > label {
    color: #000;
  }
  
  .tree .total {
    color: #e13300;
  }
  
  li{
    list-style: none !important;
  }
  
  
  
  
    .table thead th {
        border-bottom: 2px solid #bababa;
        padding-top: 6px; 
        padding-bottom: 2px; 
        vertical-align: middle;
    }
    .table-bordered th, .table-bordered td {
        border: 1px solid #bababa;
    }
    .table td, .table th {
                    color: #000000;
                }
    /* for checkbox */
    .cb-table .vh {position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden;}
    .cb-table .sp-label label:before {content: ''; width: 20px; height: 20px; background: #f2f2f2; border: 1px solid rgba(75, 101, 132, 0.3); display: inline-block;}
    .cb-table input[type="checkbox"]:checked ~ label:before {background: #20bf6b no-repeat center; background-size: 12px 12px; background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ1LjcwMSA0NS43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NS43MDEgNDUuNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMC42ODcsMzguMzMyYy0yLjA3MiwyLjA3Mi01LjQzNCwyLjA3Mi03LjUwNSwwTDEuNTU0LDI2LjcwNGMtMi4wNzItMi4wNzEtMi4wNzItNS40MzMsMC03LjUwNCAgICBjMi4wNzEtMi4wNzIsNS40MzMtMi4wNzIsNy41MDUsMGw2LjkyOCw2LjkyN2MwLjUyMywwLjUyMiwxLjM3MiwwLjUyMiwxLjg5NiwwTDM2LjY0Miw3LjM2OGMyLjA3MS0yLjA3Miw1LjQzMy0yLjA3Miw3LjUwNSwwICAgIGMwLjk5NSwwLjk5NSwxLjU1NCwyLjM0NSwxLjU1NCwzLjc1MmMwLDEuNDA3LTAuNTU5LDIuNzU3LTEuNTU0LDMuNzUyTDIwLjY4NywzOC4zMzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);}
</style>
        <div class="card sina-card"> 
            <div class="card-header card-header-s d-flex flex-wrap align-items-center">
                <h4 class="col-6 pl-0">ROLES CREATE</h4> 
            </div> 
            <div class="card-body"> 
                <form action="{{route('role.store')}}" method="post">
                    @csrf
                    <div class="row justify-content-center mt-2">
                     
                        <div class="col-4 text-right">
                        </div>
                        <div class="col-6">
                            <label for="name" class="text-right">Role Name:</label>
                            <input type="text" name="name" id="name" class="form-control" required>
                        </div>
                       <button style="position: fixed;bottom:10%;right:2px;z-index:2;" class="btn-sina-submit" type="submit"><i class="fa fa-save"></i> Save </button>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-4 px-0">
                          <ul class="tree ml-0 pl-0">
                            @php($i=1)
                            @forelse ($modules as $module)
                              <li class="has pl-1">
                                {{-- <input type="checkbox" name="domain[]" onchange="module_change(this,{{$module->id}})"> --}}
                                <label>&nbsp;&nbsp;{{$i++}} . &nbsp;&nbsp;&nbsp;{{$module->name}} <span class="total">({{count($permissionsByModule[$module->id]->groupBy('code'))}})</span></label>
                                <ul class="pl-0">
                                @forelse ($permissionsByModule[$module->id]->groupBy('code') as $code=>$subModule)
                                  @if($code)
                                    <li class="">
                                      <input type="checkbox" name="subdomain[]" onchange="sub_module_change(this,{{$code}})">
                                      <label>{{ucfirst(getMenuGroup()[$code])}} </label>
                                      {{-- <label>{{$code}} </label> --}}
                                    </li>
                                  @endif
                                    
                                @empty  
                                @endforelse
                                </ul>
                                
                            @empty
                                
                            @endforelse
                                
                            
                          </ul>
                           
                        </div>
                        <div class="col-8 pl-0">
                        
                            <table class="table table-bordered cb-table">
                                <thead>
                                  <tr>
                                    <th>Group</th>
                                    <th>
                                        <div class="d-flex flex-wrap ">
                                            <div class="col-12 px-0 sp-label text-center">
                                                <input type="checkbox" id="index_head" class="vh" onchange="column_head(this,0)">
                                                <label for="index_head"></label>
                                            </div>
                                            <div class="col-12 px-0 text-center">
                                                <label for="index_head">Index</label>
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="d-flex flex-wrap ">
                                            <div class="col-12 px-0 sp-label text-center">
                                                <input type="checkbox" id="create_head" class="vh" onchange="column_head(this,1)">
                                                <label for="create_head"></label>
                                            </div>
                                            <div class="col-12 px-0 text-center">
                                                <label for="create_head">Create</label>
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="d-flex flex-wrap ">
                                            <div class="col-12 px-0 sp-label text-center">
                                                <input type="checkbox" id="edit_head" class="vh" onchange="column_head(this,2)">
                                                <label for="edit_head"></label>
                                            </div>
                                            <div class="col-12 px-0 text-center">
                                                <label for="edit_head">Edit</label>
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="d-flex flex-wrap ">
                                            <div class="col-12 px-0 sp-label text-center">
                                                <input type="checkbox" id="delete_head" class="vh" onchange="column_head(this,3)">
                                                <label for="delete_head"></label>
                                            </div>
                                            <div class="col-12 px-0 text-center">
                                                <label for="delete_head">Delete</label>
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="d-flex flex-wrap ">
                                            <div class="col-12 px-0 sp-label text-center">
                                                <input type="checkbox" id="print_head" class="vh" onchange="column_head(this,4)">
                                                <label for="print_head"></label>
                                            </div>
                                            <div class="col-12 px-0 text-center">
                                                <label for="print_head">Print</label>
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="d-flex flex-wrap ">
                                            <div class="col-12 px-0 sp-label text-center">
                                                <input type="checkbox" id="others" class="vh" onchange="column_head(this,5)">
                                                <label for="others"></label>
                                            </div>
                                            <div class="col-12 px-0 text-center">
                                                <label for="others">Others</label>
                                            </div>
                                        </div>
                                    </th>
                             
                                  </tr>
                                </thead>
                                <tbody id="tbody">
                                 
                                </tbody>
                            </table>

                            
                        </div>
                    </div>


                  
                  
                
                </form>
            </div> 
        </div> 
@endsection
@section('script')



<script>
  var submodule_data=@json(getMenuGroup());
     function row_head(t,rn){
      if(t.checked) {
        $('.'+rn).prop("checked", true);
      }else{
        $('.'+rn).prop("checked", false);
      }
    
     }

     function column_head(t,cn){
      if(t.checked) {
        $('.'+cn).prop("checked", true);
      }else{
        $('.'+cn).prop("checked", false);
      }
    
     }

     function module_change(t,n){
      alert(n)
     }
     function sub_module_change(t,n){
      if(t.checked) {
        $.ajax({
                  type: "POST",
                  url: "{{route('default.permission_by_submodule')}}",
                  data: {
                      _token:"{{csrf_token()}}",
                      sub_module_id:n,
                  },
                  success: function (permission_groups) {
                   var returnTr=`<tr id="module_1_sub_1" class="tr`+n+`"><th colspan="7" class="text-center">`+submodule_data[n]+`</th></tr>`;
                   for (let i = 0; i < permission_groups.length; i++) {
                    returnTr+=`<tr id="module_1_sub_1" class="tr`+n+`">
                                     <td>
                                         <div class="d-flex flex-wrap ">
                                             <div class="col-3 pl-0 sp-label">
                                                <input type="checkbox" id="`+permission_groups[i][0].group_name+`" class="vh" onchange="row_head(this,'`+permission_groups[i][0].group_name+`')" >
                                                <label for="`+permission_groups[i][0].group_name+`"></label>
                                             </div>
                                             <div class="col-9 pl-0  ">
                                                 <label for="`+permission_groups[i][0].group_name+`">`+permission_groups[i][0].group_name+`</label>
                                             </div>
                                         </div>
                                     </td>`;
                                     var task0=[];
                                     var task1=[];
                                     var task2=[];
                                     var task3=[];
                                     var task4=[];
                                     var task5=[];
                                     var permissions=permission_groups[i];
                                     for (let index = 0; index < permissions.length; index++) {
                                        if(permissions[index].task==0){
                                            var id =permissions[index].id;
                                            var group_name =permissions[index].group_name;
                                            var task_no =permissions[index].task;
                                            var name =permissions[index].name;
                                            task0.push({'id':id,'group_name':group_name,'task_no':task_no,'name':name});
                                        }
                                        if(permissions[index].task==1){
                                            var id =permissions[index].id;
                                            var group_name =permissions[index].group_name;
                                            var task_no =permissions[index].task;
                                            var name =permissions[index].name;
                                            task1.push({'id':id,'group_name':group_name,'task_no':task_no,'name':name});
                                        }
                                        if(permissions[index].task==2){
                                            var id =permissions[index].id;
                                            var group_name =permissions[index].group_name;
                                            var task_no =permissions[index].task;
                                            var name =permissions[index].name;
                                            task2.push({'id':id,'group_name':group_name,'task_no':task_no,'name':name});
                                        }
                                        if(permissions[index].task==3){
                                            var id =permissions[index].id;
                                            var group_name =permissions[index].group_name;
                                            var task_no =permissions[index].task;
                                            var name =permissions[index].name;
                                            task3.push({'id':id,'group_name':group_name,'task_no':task_no,'name':name});
                                        }
                                        if(permissions[index].task==4){
                                            var id =permissions[index].id;
                                            var group_name =permissions[index].group_name;
                                            var task_no =permissions[index].task;
                                            var name =permissions[index].name;
                                            task4.push({'id':id,'group_name':group_name,'task_no':task_no,'name':name});
                                        }
                                        if(permissions[index].task==5){
                                            var id =permissions[index].id;
                                            var group_name =permissions[index].group_name;
                                            var task_no =permissions[index].task;
                                            var name =permissions[index].name;
                                            task5.push({'id':id,'group_name':group_name,'task_no':task_no,'name':name});
                                        }
                                      }
                                      var totalTask=[task0,task1,task2,task3,task4,task5];
                                      console.log(totalTask);
                                      for (let p = 0; p < totalTask.length; p++) {
                                            returnTr+=`<td><div class="col-12 px-0 sp-label text-center">`;
                                              var singletask=totalTask[p];
                                              for (let q = 0; q < singletask.length; q++) {
                                                 returnTr+=`<input type="checkbox" id="`+singletask[q].id+`" class="vh `+singletask[q].group_name+` `+singletask[q].task_no+`" name="asigned_permission[]" value="`+singletask[q].id+`">
                                                                 <label for="`+singletask[q].id+`">`+singletask[q].name+`</label>`;
                                              }
                                            returnTr+=`</div></td>`;
                                        
                                      }
                                      returnTr+=`</tr>`;
                   }
                  //  $.each( data, function( permission_group, permissions ) 
                  //  {
                  //     // $( "#" + i ).append( document.createTextNode( " - " + val ) );
                  //     returnTr+=`<tr id="module_1_sub_1" class="tr`+n+`">
                  //                    <td>
                  //                        <div class="d-flex flex-wrap ">
                  //                            <div class="col-3 pl-0 sp-label ">
                  //                               <input type="checkbox" id="`+permission_group+`" class="vh" onchange="row_head(this,'`+permission_group+`')" >
                  //                               <label for="`+permission_group+`"></label>
                  //                            </div>
                  //                            <div class="col-9 pl-0  ">
                  //                                <label for="`+permission_group+`">`+permission_group+`</label>
                  //                            </div>
                  //                        </div>
                  //                    </td>`;
                  //                    for (let index = 0; index < permissions.length; index++) {
                  //                      console.log(permissions[index]);
                  //                      returnTr+=`<td>`;
                  //                       if(permissions[index].task==0){
                  //                         returnTr+=`<div class="col-12 px-0 sp-label text-center">
                  //                                         <input type="checkbox" id="`+permissions[index].id+`" class="vh `+permission_group+` `+permissions[index].task+`" name="asigned_permission[]" value="`+permissions[index].id+`">
                  //                                         <label for="`+permissions[index].id+`">`+permissions[index].name+`</label>
                  //                                     </div>`;
                  //                                   }
                  //                     returnTr+=`</td>`;
                  //                     returnTr+=`<td>`;
                  //                       if(permissions[index].task==1){
                  //                         returnTr+=`<div class="col-12 px-0 sp-label text-center">
                  //                                         <input type="checkbox" id="`+permissions[index].id+`" class="vh `+permission_group+` `+permissions[index].task+`" name="asigned_permission[]" value="`+permissions[index].id+`">
                  //                                         <label for="`+permissions[index].id+`">`+permissions[index].name+`</label>
                  //                                     </div>`;
                  //                                   }
                  //                     returnTr+=`</td>`;
                  //                     returnTr+=`<td>`;
                  //                       if(permissions[index].task==2){
                  //                         returnTr+=`<div class="col-12 px-0 sp-label text-center">
                  //                                         <input type="checkbox" id="`+permissions[index].id+`" class="vh `+permission_group+` `+permissions[index].task+`" name="asigned_permission[]" value="`+permissions[index].id+`">
                  //                                         <label for="`+permissions[index].id+`">`+permissions[index].name+`</label>
                  //                                     </div>`;
                  //                                   }
                  //                     returnTr+=`</td>`;
                  //                     returnTr+=`<td>`;
                  //                       if(permissions[index].task==3){
                  //                         returnTr+=`<div class="col-12 px-0 sp-label text-center">
                  //                                         <input type="checkbox" id="`+permissions[index].id+`" class="vh `+permission_group+` `+permissions[index].task+`" name="asigned_permission[]" value="`+permissions[index].id+`">
                  //                                         <label for="`+permissions[index].id+`">`+permissions[index].name+`</label>
                  //                                     </div>`;
                  //                                   }
                  //                     returnTr+=`</td>`;
                  //                     returnTr+=`<td>`;
                  //                       if(permissions[index].task==4){
                  //                         returnTr+=`<div class="col-12 px-0 sp-label text-center">
                  //                                         <input type="checkbox" id="`+permissions[index].id+`" class="vh `+permission_group+` `+permissions[index].task+`" name="asigned_permission[]" value="`+permissions[index].id+`">
                  //                                         <label for="`+permissions[index].id+`">`+permissions[index].name+`</label>
                  //                                     </div>`;
                  //                                   }
                  //                     returnTr+=`</td>`;
                  //                   };
                                     
                                   
                  //                   returnTr+=`</tr>`;
                      
                    
                  //   });
                
                   console.log(returnTr);
                   $('#tbody').append(returnTr);
                  },
                  error: function (response) {
                  },
          });
       
      }else{
        $('.tr'+n).remove();
      }
     }









     $(document).on('click', '.tree label', function(e) {
  $(this).next('ul').fadeToggle();
  e.stopPropagation();
});

$(document).on('change', '.tree input[type=checkbox]', function(e) {
  $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
  $(this).parentsUntil('.tree').children("input[type='checkbox']").prop('checked', this.checked);
  e.stopPropagation();
});

$(document).on('click', 'button', function(e) {
  switch ($(this).text()) {
    case 'Collepsed':
      $('.tree ul').fadeOut();
      break;
    case 'Expanded':
      $('.tree ul').fadeIn();
      break;
    case 'Checked All':
      $(".tree input[type='checkbox']").prop('checked', true);
      break;
    case 'Unchek All':
      $(".tree input[type='checkbox']").prop('checked', false);
      break;
    default:
  }
});


</script>







    <!-- page script -->
    <script type="text/javascript">
    // function checkAll(lebel_group){
    //     var consd=$("."+lebel_group+"-select").attr('checked');
    //     if(consd){
    //          $("."+lebel_group+"-select").attr('checked', false);
    //          }else{
    //             $("."+lebel_group+"-select").attr('checked', true);
    //          }
               
    //     }
    </script>

  
@endsection