@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">
        <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)
                <tr>   
                    <td>{{ $user->name }}</td>    
                    <td>{{ $user->email }}</td>    
                    <td>{{ $user->role }}</td>    
                    <td>{{ $user->created_at }}</td>
                    <td><a href="{!! route('home.edit',$user->id) !!}" class="btn">View</a></td>
                    <td><a href="{!! route('users.edit',$user->id) !!}" class="btn">Edit</a></td>
                </tr>                
                @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