@extends('body')

@section('title')
    Roles
@endsection

@section('breadcrumbs')
  <li><a href="{{ url('/') }}">Home</a></li>
  <li>Roles</li>
@endsection

@section('pageScripts')
    <style>
        @media screen and (max-width: 600px) {
            th, td {
                white-space: nowrap;
            }
            .table-wrapper {
                overflow-x: scroll;
                width: 475px;
                margin: 0 auto;
            }
            .btn
            {
                font-size: 0.9rem;
                font-weight: bold;
                /* width: 100%; */
            }
        }
    </style>
@endsection

@section('content')
<section id="about" class="about">
    <div class="container" data-aos="fade-up">
        <legend><center><h2><b>Access Rights</b></h2></center></legend>
    </div>
    

<div class="container" data-aos="fade-up">

    {{-- <div class="modal-header" style="display: {{Auth::user()->isAuthorized('users.create') ? '' : 'none'}}" >
        <a class="btn btn-primary" href="{!! route('users.create')!!}" role="button">New User</a>
    </div> --}}

    @if (count($roles) < 1)
        <legend><center><h6>No Roles available</h6></center></legend>
    @else

    <div class="modal-header">
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search ..." class="form-control">
        <span class="glyphicon glyphicon-search"></span>
    </div>

    <div class="table-wrapper">
        <table class="table" id="myTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Role</th>
                    <th>Description</th>
                    <th>Created at</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($roles as $role)
                    @if ($role->id > Auth::user()->role && Auth::user()->role != 1 )
                        <tr>   
                            <td>{{ $role->id }}</td>    
                            <td>{{ $role->name }}</td>    
                            <td>{{ $role->description }}</td>        
                            <td>{{ $role->created_at }}</td>
                            <td style="display: {{Auth::user()->isAuthorized('rights.show') ? '' : 'none'}}" ><a href="{!! route('rights.show',$role->id) !!}" class="btn">View Access</a></td>
                        </tr>
                    @endif
                    @if (Auth::user()->role == 1)
                        <tr>   
                            <td>{{ $role->id }}</td>    
                            <td>{{ $role->name }}</td>    
                            <td>{{ $role->description }}</td>        
                            <td>{{ $role->created_at }}</td>
                            <td style="display: {{Auth::user()->isAuthorized('rights.show') ? '' : 'none'}}" ><a href="{!! route('rights.show',$role->id) !!}" class="btn">View Access</a></td>
                        </tr> 
                    @endif          
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- {{ $roles->links() }} --}}
    @endif
</div>

<script>
    function myFunction() 
    {
        // Declare variables 
        var input = document.getElementById("myInput");
        var filter = input.value.toUpperCase();
        var table = document.getElementById("myTable");
        var trs = table.tBodies[0].getElementsByTagName("tr");
        // Loop through first tbody's rows
        for (var i = 0; i < trs.length; i++) 
        {
            // define the row's cells
            var tds = trs[i].getElementsByTagName("td");
            // hide the row
            trs[i].style.display = "none";
            // loop through row cells
            for (var i2 = 0; i2 < tds.length; i2++) 
            {
                // if there's a match
                if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) 
                {
                    // show the row
                    trs[i].style.display = "";
                    // skip to the next row
                    continue;
                }
            }
        }
    }
</script>

</section>
@endsection