@extends('welcom3')

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

<label for=fname>Role Name:</label></label><label style="color:red">*</label>
  <input type=text id=fname name=fname class=form-control style=width:18rem;text-transform:uppercase><br>
  
<br>
<div class="container-fluid">
            <div class = "row">
@foreach($ff2 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}}</b></h6>
@foreach($link->groups as $lol)
<input type=checkbox id="vehicle3{{$lol->name}}" name=vehicle1 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">Submit</button>

<script type = "text/javascript" src = "/jquery/jquery.min.js">
      </script>
        <script  type="text/javascript">
        function goBack(){
            window.location.replace("roleset")
        }
        
        function myFunction(){
           var sites = {!! json_encode($ff->toArray(), JSON_HEX_TAG) !!};
           var result = sites.map(function(a) {return a.name;});
           console.log(result);
           var length = sites.length;
           console.log(length);
           var i=0;
           var arr = [];
          var sel = {};
           for(i=0;i<length;i++){
               sel[result[i]] = document.getElementById("vehicle3"+result[i]).checked;
           }

           arr.push(sel);
           console.log(arr);
           var rolename = document.getElementById("fname").value;
           if(rolename != ""){
          $.ajax({ 
        url: 'createroles?rolename='+rolename+'&perm='+JSON.stringify(arr),
        type: 'GET',
        success: function (data) {
			//
			window.setInterval(openses,2000);
            
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
        //alert("Status: " + textStatus); alert("Error: " + errorThrown); 
        window.setInterval(openses,2000);
    } 
    });
     function openses(){
              window.location.replace("roleset");
          }
           }else{
               alert("Empty Role Name")
           }
        }
        </script>
@endsection