@extends('layouts.admin')

@section('content')



   <div class="card">
   <div class="card-header d-flex justify-content-between align-items-center">
        <h4>Customers List</h4>
        <form action="{{ route('customers.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 Customer 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>Name</th>
                    <th>Email</th>
                    <th>Phone No</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $item)    
                @if ($item->role_as == 0 || $item->role_as == 5)
                <tr class="customer-row">
                    <td>Customer</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>
        /* Define different row styles based on role_as */
        .customer-row { background-color: #e6f7ff; }
   </style>
@endsection