<script>
    $(document).ready(function () {
        $('#example').dataTable();

    });
    var o = document.getElementsByClassName("or");
    for (var i = 0; i < o.length; i++) {
        o[i].innerHTML = (i+1)+".";
    }

    function revokeRole(id){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        if(confirm('Are you sure to Revoke this Role permanently? \nThis action cannot be Reversed!')){
            $.ajax({
                method: 'PUT',
                url: '/revoke-role-for-a-user/{{$user->id}}/' + id,
                data: id,
                success: function (res) {
                    if (res == 'error') {
                        alert('System is unable to perform the Requested action. Please Try Again!');
                    } else if (res == 'success') {
                        alert('Role has been Revoked');
                        location.reload();
                    } else {
                        alert('System Encountered an Error. Please Contact System Admin for Help');
                    }
                }
            });
        }
        return false;
    }
</script>
<style>
    #example th, td {
        text-align: left;
        padding: 5px;
    }
    #example tr:hover {background-color: #d4d8f8;}
</style>
<div class="error" style="text-align: center;">On this Window, You can view a List of Assigned Roles to a User Named: {!! $user->firstName." ".$user->lastName !!}</div>
<div class="guestDetails_inputDivider"></div>
<button type="submit" disabled style="display: none" aria-hidden="true"></button>

<table id="example" class="display" style="width:100%; border-collapse: collapse">
    <thead>
    <tr style="background-color: #a1b5d3">
        <th>No</th>
        <th>Role Name</th>
        <th>Revoke</th>
    </tr>
    </thead>
    <tbody>
    @foreach($user->roles  as $row)
        <tr class="cart-row">
            <td class="or"></td>
            <td>{!! $row->name !!}</td>
            <td><i class="fa fa-trash error" onclick="revokeRole('{{$row->id}}')"  style="font-size: 16px"></i></td>
        </tr>
    @endforeach
    </tbody>
    <tfoot>
    <tr style="background-color: #a1b5d3">
        <th>No</th>
        <th>Role Name</th>
        <th>Revoke</th>
    </tr>
    </tfoot>
</table>
