@extends('layouts/admin/masters.master')

@section('opengraph')
<!-- Search Engine Optimization by Rank Math - http://s.rankmath.com/home -->
@endsection

@section('tittle','VOICES AND BEATS [ EVENTS MANAGEMENT ] | USERS')

@section('content')
 <div class="flex items-center space-x-5">
  <div>
    <h1 class="text-xl font-opensans-bold">Users</h1>
  </div>
  <div class="text-sm border border-lime-500 hover:bg-lime-500 hover:text-white rounded-sm">
   <a href="/Admin/Control-Panel/Add-User" class="block px-2 py-1">
     Add New
   </a>
  </div>
 </div>  

 @if(count($users)>0) 

 <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:items-end sm:justify-between">
  <div class="text-sm">
   Available Users ({{$users->total()}})
  </div>

  <div>
    <div class="space-x-2 flex">
     <div class="grow">
      <input type="text" id="search_term" class="w-full sm:w-40 rounded-sm p-1 focus:outline-none border border-lime-500" value="{{request()->Term}}" placeholder="Enter Firstname or Lastname"> 
     </div>
     <div class="flex items-center rounded-sm border border-lime-500 px-2 py-1 font-opensans-bold text-sm hover:bg-lime-500 hover:text-white cursor-pointer"onclick="getTerm()">
      Search
     </div>
    </div>  
  </div>
 </div>

<div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:items-end sm:justify-between">
 <div class="flex flex-col sm:flex-row sm:space-x-2 space-y-3 sm:space-y-0">
  <div class="">
   <select id="sort" class="w-full sm:w-40 rounded-sm p-1 focus:outline-none border border-lime-500 text-gray-500 capitalize">
      <option value="">Sort</option>
      <option value="Role" {{ request()->Sort == "Role"  ? "selected" : "" }}>Role</option>
      <option value="Random" {{ request()->Sort == "Random"  ? "selected" : "" }}>Random</option>
    </select>
  </div>
  <div class="flex items-center justify-center rounded-sm border border-lime-500 px-2 py-1 font-opensans-bold hover:bg-lime-500 hover:text-white cursor-pointer" onclick="getFilter()">
    Filter
  </div>
 </div>

 <div class="text-sm">
   ({{$users->count()}}) Items
 </div>
</div>

@if(Session::has('success'))
  <div class="capitalize border border-green-600 rounded-sm p-2 text-center text-green-600 text-sm font-opensans-bold">
    {{ Session::get('success') }}
  </div>
@endif

<div class="admin overflow-x-auto rounded-md bg-white">
 <table class="w-full border-collapse">
   <thead>
    <tr class="font-opensans-bold text-white bg-lime-500">
      <th class="w-14">SN</th>
      <th class="w-40">Name</th>
      <th class="w-40">Email</th>
      <th class="w-40">Phone No.</th>
      <th class="w-40">Role</th>
    </tr>   
   </thead>
   <tbody>

   @foreach($users as $user)
   <tr class="capitalize text-sm text-start">
     <td>{{ $users->firstItem() + $loop->index }}</td>
     <td>
       <div class="flex space-x-2">
        <div class="h-12 w-14">
          <img class="h-full w-full rounded-sm" src="{{ asset('assets/images/'.$user->image) }}" onerror="this.src='/assets/images/default_profile.png'">
        </div>
        <div class="grow space-y-3">
          <div class="font-opensans-bold text-sm uppercase">
            {{ $user->firstname }} &nbsp; {{ $user->lastname }}
          </div>
          <div class="">
           <ul class="flex text-xs font-opensans-bold divide-x divide-gray-500">
            <li class="pr-2 edit">
             <a href="/Admin/Control-Panel/Edit-User/{{ $user->id }}">Edit</a>
             </li>
            <li class="px-2 delete">
              <a href="/Admin/Control-Panel/Delete-User/{{ $user->id }}">Trash</a>
            </li>  
           </ul>
          </div>
        </div> 
       </div>
     </td>
     <td class="lowercase">
       {{ $user->email }}
     </td>
     <td>
       {{ $user->phone }}
     </td>
     <td class="">
       <div class="flex space-x-2">
         <div>
           {{ $user->user_role }}
         </div>
         <div class="editTrigger text-green-500 cursor-pointer">
           <i class="fas fa-edit fa-md"></i>
         </div>
       </div>
       <div class="flex space-x-2 hidden justify-center">
        <div>
         <form action="/Admin/Control-Panel/Update-User-Role/{{ $user->id }}" method="post"> 
           @csrf
           <select name="user_role" class="w-40 rounded-sm p-1 focus:outline-none border border-lime-500 capitalize" onchange='if(this.value != 0) { this.form.submit();}'>
               <option value="">Select Role</option>
               @if(old('user_role',$user->user_role) == 'admin')   
                <option value="admin" selected>Admin</option> 
               @else
                <option value="admin">Admin</option> 
               @endif

               @if(old('user_role',$user->user_role) == 'page manager')    
                <option value="page manager" selected>Page Manager</option> 
               @else
                <option value="page manager">Page Manager</option> 
               @endif
            </select>
          </form> 
         </div>

         <div class="cancelTrigger text-sm border border-lime-500 hover:bg-lime-500 hover:text-white rounded-sm py-1 px-2 fit-content cursor-pointer">
           Cancel
         </div>  
       </div>
     </td>
    </tr>
    @endforeach() 
   </tbody>
  </table> 

  {{ $users->appends($_GET)->links('layouts/guest/includes.pagination') }}

  @else
    <div class="w-full p-3 bg-white rounded-lg">
      NO RESULTS FOUND
    </div>
  @endif 
</div>
@endsection 

@section('script')

 <script type="text/javascript">

  var editTrigger = document.getElementsByClassName("editTrigger");
  var cancelTrigger = document.getElementsByClassName("cancelTrigger");


  for (var i = 0; i < editTrigger.length; i++) {
     editTrigger[i].addEventListener("click", function () {
       
        var closeRole = this.parentElement;
        var openEditRole = this.parentElement.nextElementSibling;
        

        closeRole.style.display = "none";
        openEditRole.style.display = "flex";

     });
  }

  for (var i = 0; i < cancelTrigger.length; i++) {
     cancelTrigger[i].addEventListener("click", function () {

      var closeEditRole = this.parentElement;
      var openRole = this.parentElement.previousElementSibling;
      
      closeEditRole.style.display = "none";
      openRole.style.display = "flex";

     });
  }

  // url parameters
  let queryString = window.location.search;  // get url parameters
  let params = new URLSearchParams(queryString);  // create url search params object

   function getTerm() {
        params.delete('Term');
        params.append('Term', document.getElementById("search_term").value);
        document.location.href = "?" + params.toString();
    }


   function getFilter() {
        params.delete('Sort');
        params.append('Sort', document.getElementById("sort").value);
        document.location.href = "?" + params.toString();
    }
     
 </script>

@endsection