@extends('body')

@section('title')
    Users
@endsection

@section('breadcrumbs')
  <li><a href="{{ url('/') }}">Home</a></li>
  <li>Users</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>Users</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($users) < 1)
        <legend><center><h6>No users 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>Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Created at</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $user)
                    @if ($user->role > Auth::user()->role && Auth::user()->role != 1 )
                        <tr>   
                            <td>{{ $user->name }}</td>    
                            <td>{{ $user->email }}</td>    
                            <td>
                                @foreach ($user->roles as $userRole)
                                    {{ $userRole->name }}
                                @endforeach
                            </td>    
                            <td>{{ $user->created_at }}</td>
                            <td style="display: {{Auth::user()->isAuthorized('usersites.edit') ? '' : 'none'}}" ><a href="{!! route('usersites.edit',$user->id) !!}" class="btn">View Sites</a></td>
                            <td style="display: {{Auth::user()->isAuthorized('users.edit') ? '' : 'none'}}" ><a href="{!! route('users.edit',$user->id) !!}" class="btn">Edit</a></td>
                        </tr>
                    @endif

                    @if (Auth::user()->role == 1)
                        <tr>   
                            <td>{{ $user->name }}</td>    
                            <td>{{ $user->email }}</td>    
                            <td>
                                @foreach ($user->roles as $userRole)
                                    {{ $userRole->name }}
                                @endforeach
                            </td>    
                            <td>{{ $user->created_at }}</td>
                            <td style="display: {{Auth::user()->isAuthorized('usersites.edit') ? '' : 'none'}}" ><a href="{!! route('usersites.edit',$user->id) !!}" class="btn">View Sites</a></td>
                            <td style="display: {{Auth::user()->isAuthorized('users.edit') ? '' : 'none'}}" ><a href="{!! route('users.edit',$user->id) !!}" class="btn">Edit</a></td>
                        </tr>
                    @endif       
                @endforeach
            </tbody>
        </table>
    </div>

    {{ $users->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