@extends('layouts.admin')

@section('content')




<div class="card">

    <div class="card-header d-flex justify-content-between align-items-center">
        <h4>Riders List</h4>
        <form action="{{ route('riders.index') }}" method="GET" class="d-flex align-items-center">
            <div class="input-group">
                <input type="text" class="form-control form-control-sm" name="search" placeholder="Search Rider by Name or Email" aria-label="Search" value="{{ $searchQuery ?? '' }}">
                <button class="btn btn-primary btn-sm" type="submit">Search</button>
            </div>
        </form>

    </div>
    
    <div class="card-body">
    <div class="table-responsive">

    <a href="{{ route('riders.add') }}" class="btn btn-success btn-sm">Add Rider</a>

        <table class="table table-striped table-fixed table-hover align-middle text-center">

            <thead class="table-dark">
                <tr>
                    <th>Role</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone No</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $item)
                @if ($item->role_as == 3)
                <tr class="rider-row">
                    <td>Rider</td>
                    <td>{{$item->name}}</td>
                    <td>{{$item->email}}</td>
                    <td>{{$item->phone}}</td>
                    <td>
    <a class="btn btn-primary" href="{{url('view-user/'.$item->id)}}">
        <i class="fas fa-eye"></i> <!-- Font Awesome icon for "View" -->
    </a>
  
</td>

                </tr>
                @endif
                @endforeach
            </tbody>
        </table>
    </div>
</div>
   </div>
   {!! $users->appends(['search' => $searchQuery])->links('pagination::bootstrap-4') !!}
   <style>
        .rider-row { background-color: #ffcc99; }
   </style>
@endsection