@extends('welcom3')

@section('content')
<h2>Edit Roles</h2>

<label for=fname>Roles Name:</label></label><label style="color:red">*</label>
  <input type=text id=fname name=fname class=form-control style=width:18rem;text-transform:uppercase value="{{$ggs}}"><br>
  
<!--@foreach(json_decode($gg) as $kink)-->
<!--      <input type=checkbox id="vehicle1{{$kink->name}}" name=vehicle1 value=Bike checked><label for=vehicle1>{{$kink->name}}</label><br>-->
<!--      @endforeach-->

<!--<button class="btn btn-primary" onClick=myfunctiontoselect() id="selectallbutton"><i class="fa fa-check"></i>Select All</button><br>-->
<br>
<div class="container-fluid">
            <div class = "row">
@foreach($ff as $link)
<div class="card ml-2" id="{{$link->name}}">
     <div class="card border-left-primary shadow h-100 pt-1" >
        <div class="card-body py-2">
            <h6 class="text-primary"><b>{{$link->name}}&nbsp;</b><button type="button" onClick="myFunction4('{{$link->name}}')" class="btn btn-primary btn-sm"><i class="fa fa-check"></i></button></h6>
@foreach($link->groups as $lol)
<input type=checkbox id="vehicle3{{$lol->name}}" name="vehicle3{{$link->name}}" value=Bike><label for=vehicle3>{{$lol->name}}</label><br>
@endforeach
</div>
</div>
</div>
@endforeach
</div>
</div>
<br>
<button type="button" onClick="goBack()" class="btn btn-secondary btn-xs">Back</button>
<button onClick="myFunction()" class="btn btn-primary" value="0" id="subbutton">Update</button>

<script type = "text/javascript" src = "/jquery/jquery.min.js">
      </script>
        <script  type="text/javascript">
        function goBack(){
            window.location.replace("roleset");
        }
        
      
        function myFunction4(data){
            //console.log(data);
            var item = document.getElementsByName("vehicle3"+data);
            console.log(item.length);
            
            for (var i=0; i < item.length; i++) {
                item[i].setAttribute("checked","true");
            }
     
            
                
            
        }
        
    
        var sites = {!! $gg !!};
    var result = sites.map(function(a) {return a.name;});
    console.log(result);
    var i=0;
    for(i=0;i<sites.length;i++){
        document.getElementById("vehicle3"+result[i]).checked = true;
    }
    




    var h=0;
    function myfunctiontoselect(){
        if(h==0){
        var sites = {!! json_encode($ff->toArray(), JSON_HEX_TAG) !!}
        var result = sites.map(function(a) {return a.name;});
        var i = 0;
        for(i=0;i<result.length;i++){
            document.getElementById("vehicle2"+result[i]).checked = true;
        }
        document.getElementById("selectallbutton").style.background='#2C53C5';
        h=1;
        }else{
           var sites = {!! json_encode($ff->toArray(), JSON_HEX_TAG) !!}
        var result = sites.map(function(a) {return a.name;});
        var i = 0;
        for(i=0;i<result.length;i++){
            document.getElementById("vehicle2"+result[i]).checked = false;
        }
        var sites = {!! $gg !!};
    var result = sites.map(function(a) {return a.name;});
    var i=0;
    for(i=0;i<sites.length;i++){
        document.getElementById("vehicle2"+result[i]).checked = true;
    }
    document.getElementById("selectallbutton").style.background='#808080';
        h=0;
        }
    }
    function myFunction(){
        var rolename = document.getElementById("fname").value;
        var sites = {!! json_encode($ff2->toArray(), JSON_HEX_TAG) !!}
        var result = sites.map(function(a) {return a.name;});
        var arr = [];
         var obj = {};
    for(i=0;i<sites.length;i++){
        var h = document.getElementById("vehicle3"+result[i]);
        var k = h.checked;
        obj[result[i]] = k;
    }
    
    arr.push(obj);
    console.log(arr);
    var sites2 = {!! json_encode($ggs, JSON_HEX_TAG) !!}
        //console.log(sites2);
    $.ajax({ 
        url: 'updateroles?rolename='+sites2+'&rolename2='+rolename+'&data='+JSON.stringify(arr),
        type: 'GET',
        success: function (data) {
		
			window.location.replace('roleset')
            
        }
    });
    }
        
        </script>
@endsection