@extends('layouts.master')

@section('content')
    <div class="container">
      @include('layouts.page-header')
      @include('pages.auth.user.delete-modal')
      @include('pages.auth.user.search-modal')
      <div class="table-responsive">
        <div class="row">
          <div class="col">
            <a href="/user/create" title="Create New">
              <i class="bi-file-plus" style="font-size: 2rem; color: #FF6308; margin-right: 10px; "></i>
            </a>
            <a href="#" title="Search" data-bs-toggle="modal" data-bs-target="#searchModal">
              <i class="bi-search" style="font-size: 2rem; color: #FF6308;"></i>
            </a>
          </div>
          <div class="col text-end">
            <div class="dropdown mb-2">
              <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                Results Per Page: {{ $limit ?? 50 }}
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="?limit=25&page={{ $page ?? 1 }}">25</a></li>
                <li><a class="dropdown-item" href="?limit=50&page={{ $page ?? 1 }}">50</a></li>
                <li><a class="dropdown-item" href="?limit=100&page={{ $page ?? 1 }}">100</a></li>
                <li><a class="dropdown-item" href="?limit=500&page={{ $page ?? 1 }}">500</a></li>
                <li><a class="dropdown-item" href="?limit=1000&page={{ $page ?? 1 }}">1000</a></li>
              </ul>
            </div>
          </div>
        </div>
        
        <table data-toggle="table" class="table table-sm table-striped">
          <thead>
            <tr>
              <th scope="col">&nbsp;&nbsp;&nbsp;&nbsp;Actions&nbsp;&nbsp;&nbsp;&nbsp;</th>
              <th scope="col" data-sortable="true">Username</th>
              <th scope="col" data-sortable="true">Client</th>
              <th scope="col" data-sortable="true">Email</th>
              <th scope="col" data-sortable="true">Last Name</th>
              <th scope="col" data-sortable="true">First Name</th>
              <th scope="col" data-sortable="true">Created By</th>
              <th scope="col" data-sortable="true">User Type</th>
              <th scope="col" data-sortable="true">Date Created</th>
              <th scope="col" data-sortable="true">Last Activity</th>
              <th scope="col" data-sortable="true">Account Status</th>
            </tr>
          </thead>
          <tbody>
            @foreach($users as $user)
              <tr>
                <th scope="row" class="text-center">
                  <a href="/user/edit/{{ $user->id }}" title="Edit User">
                    <i class="bi-pencil-square" style="font-size: 1rem; color: green; margin-right: 10px;"></i>
                  </a>
                  <a href="#" class="delete-user" userId="{{ $user->id }}">
                    <i class="bi-trash" style="font-size: 1rem; color: green"></i>
                  </a>
                </th>
                <td class="userLogin{{ $user->id }}">{{ $user->login }}</td>
                <td>{{ $user->hiring_organization }}</td>
                <td>{{ $user->email }}</td>
                <td>{{ $user->last_name }}</td>
                <td>{{ $user->first_name }}</td>
                <td>{{ $user->creator_login }}</td>
                <td>{{ App\Models\User::getRolesDescriptions($user->role) }}</td>
                <td>{{ date('m/d/y g:iA', strtotime($user->created)) }}</td>
                <td>{{ date('m/d/y g:iA', strtotime($user->last_activity)) }}</td>
                <td class="text-center">
                  @if($user->status === 'active')
                    <a href="/user/status/{{ $user->id }}/deactive">Deactive</a>
                  @elseif($user->status === 'deactive')
                    <a href="/user/status/{{ $user->id }}/activate">Activate</a>
                  
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
        {{ $users->links() }}
      </div>
    </div>
@stop

@section('footer-scripts')
  <script type="text/javascript">
    jQuery(function() {
      $('.delete-user').on('click', function() {
        var userId = $(this).attr('userId')
        $('#userIdDelete').val(userId)
        $('#textUserId').html('Are you sure you want to delete ' + $('.userLogin' + userId).text())
        $('#deleteUserModal').modal('show')
      })
    })
  </script>
@endsection