@extends('layouts.adminlayout')

@section('content')

<style>
    a:hover
    {
        text-decoration:none;
    }
    a{
        text-decoration:none;
    }
    .relative svg
    {
        width:30px;
    }
    .hidden
    {
            margin-top: 20px;
    }
</style>
<section class="color-bg">
<div class="container ">
  <form method="get" class="search" action="{{ url('/searchuser') }}">
          @csrf
    <div class="row py-4">
        <div class="col-3">
            <input class="form-control" type="text" name="name" value="{{ app('request')->name }}" placeholder="Search By Name" aria-label="default input example">
        </div>
        <div class="col-3 offset-2">
            <select class="form-select" name="dept" aria-label="Default select example">
              <option value disabled selected>Choose A Department</option>

              @foreach($depts as $dept)
              <option value="{{ $dept->id }}" {{ app('request')->dept == $dept->id ? 'selected' : ''  }}>{{ $dept->deptName }}</option>
              @endforeach
            </select>
        </div>
        <div class="col-3">
            <select class="form-select" name="role" aria-label="Default select example">
              <option value disabled selected>Choose A Role</option>
              <option value="0" {{ app('request')->role == 0 ? 'selected' : ''  }}>Admin</option>
          <option value="4" {{ app('request')->role == 4 ? 'selected' : ''  }}>Safety Officer</option>
          <option value="1" {{ app('request')->role == 1 ? 'selected' : ''  }}>Dept Manager</option>
          <option value="3" {{ app('request')->role == 3 ? 'selected' : ''  }}>Executor</option>
          <option value="2" {{ app('request')->role == 2 ? 'selected' : ''  }}>Reporter</option>
          <option value="-1" {{ app('request')->role == -1 ? 'selected' : ''  }}>Unapprove</option>
            </select>
        </div>
        <div class="col-1">
            <button type="submit" class="btn butono  w-100">Filter</button>
        </div>
    </div>
  </form>
</div>
</section>
<div class="container">
    <div class="row">
        <div class="col-12 my-4">
            <div class="shadw br p-4">
         
                <table class="table caption-top">
                  
                  <thead>
                    <tr>
                      <th scope="col" class="bdr">ID</th>
                      <th scope="col" class="bdr">NAME</th>
                      <th scope="col" class="bdr">EMAIL</th>
                      <th scope="col" class="bdr">USERNAME</th>
                      <th scope="col" class="bdr">USER ROLE</th>
                      <th scope="col" class="bdr">DEPARTMENT</th>
                      <th scope="col" class="bdr">ACTION</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($users as $index => $user)
                      <tr>
                        <td scope="row" class="bdr">
                          {{$index+1}}
                        </td>
                        <td class="bdr">
                          {{$user->name}}
                        </td>
                        <td class="bdr">
                            {{$user->email}}
                        </td>
                        <td class="bdr">
                            {{$user->username}}
                        </td>
                        <td class="bdr">
                          {{$user->role()}}
                        </td>
                        <td class="bdr">
                          {{$user->deptName()}} 
                        </td>
                        <td>
                             <a href="{{ url('/user/edit') }}/{{ $user->id}}" class="btn butono px-4">Edit</a>
                      </td>
                    <tr>
                      @endforeach
                  
                  
                  </tbody>
                      
                </table>
                {{ $users->links() }}
               
            </div>
        </div>
        <!--<div class="col-12">-->
        <!--        <nav aria-label="Page navigation ">-->
        <!--          <ul class="pagination">-->
        <!--            <li class="page-item pe-1">-->
        <!--              <a class="page-link" href="#" aria-label="Previous">-->
        <!--                <span aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ffa91a" class="bi bi-caret-left-fill" viewBox="0 0 16 16"><path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg> -->
        <!--                </span>-->
        <!--              </a>-->
        <!--            </li>-->
        <!--            <li class="page-item pe-1"><a class="page-link" href="#">1</a></li>-->
        <!--            <li class="page-item pe-1"><a class="page-link" href="#">2</a></li>-->
        <!--            <li class="page-item pe-1"><a class="page-link" href="#">3</a></li>-->
        <!--            <li class="page-item">-->
        <!--              <a class="page-link" href="#" aria-label="Next">-->
        <!--                <span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ffa91a" class="bi bi-caret-right-fill" viewBox="0 0 16 16"><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>-->
        <!--                </span>-->
        <!--              </a>-->
        <!--            </li>-->
        <!--          </ul>-->
        <!--        </nav>-->
        <!--</div>-->
    </div>
</div>

@endsection