@extends('layouts.admin')

@section('content')




<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">



   <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4>Sellers List</h4>
        <form action="{{ route('sellers.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 Seller 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">

        <table class="table table-striped table-fixed table-hover align-middle text-center">
            <thead class="table-dark">
                <tr>
                    <th>Role</th>
                    <th>Shop Name</th>
                    <th>Email</th>
                    <th>Phone No</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $item)
                @if ($item->role_as == 2 || $item->role_as == 5)
                <tr class="seller-row">
                    <td>Seller</td>
                    <td>{{ optional($item->shop)->shop_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>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
   {!! $users->appends(['search' => $searchQuery])->links('pagination::bootstrap-4') !!}

</body>
   <style>
        /* Define different row styles based on role_as */
        .seller-row { background-color: #ffebcc; }
   </style>
@endsection