@foreach ($service_providers as $key => $service_provider)
    <tr class="">
        <td class="">
            {{ $service_providers->firstitem() + $key }}
        </td>
        <td>{{ $service_provider->category?->name }}</td>
        <td class="max-w300">
            <a class="text-dark media align-items-center gap-2"
                href="{{ route('admin.service-provider.view', [$service_provider['id']]) }}">
                <div class="avatar">
                    <img src="{{ asset('storage/user') }}/{{ $service_provider['image'] }}" class="rounded-circle img-fit"
                        onerror="this.src='{{ asset('assets/admin/img/160x160/img1.jpg') }}'">
                </div>
                <div class="media-body text-truncate">
                    {{ $service_provider['f_name'] . ' ' . $service_provider['l_name'] }}</div>
            </a>
        </td>
        <td>
            <div><a href="mailto:{{ $service_provider['email'] }}"
                    class="text-dark"><strong>{{ $service_provider['email'] }}</strong></a></div>
            <div><a class="text-dark" href="tel:{{ $service_provider['phone'] }}">{{ $service_provider['phone'] }}</a>
            </div>
        </td>
        <td>
            <label class="switcher">
                <input id="{{ $service_provider['id'] }}"
                    data-url="{{ route('admin.service-provider.update_status', ['id' => $service_provider['id']]) }}"
                    onclick="status_change(this)" type="checkbox" class="switcher_input"
                    {{ $service_provider->is_active == 1 ? 'checked' : '' }}>
                <span class="switcher_control"></span>
            </label>
        </td>
        <td>
            <div class="d-flex justify-content-center gap-2">
                <a class="btn btn-outline-success btn-sm square-btn" title="Settings"
                    href="{{ route('admin.service-provider.setting', [$service_provider['id']]) }}">
                    <i class="tio-settings"></i>
                </a>
                <a class="btn btn-outline-warning btn-sm square-btn"
                    href="{{ route('admin.service-provider.edit', [$service_provider['id']]) }}">
                    <i class="tio-pen"></i>
                </a>
                <a class="btn btn-outline-success btn-sm square-btn"
                    href="{{ route('admin.service-provider.view', [$service_provider['id']]) }}">
                    <i class="tio-visible"></i>
                </a>
                <button class="btn btn-outline-danger btn-sm square-btn"
                    onclick="form_alert('service-provider-{{ $service_provider['id'] }}', '{{ translate('delete_this_sp') }}')">
                    <i class="tio-delete"></i>
                </button>
                <form id="service-provider-{{ $service_provider['id'] }}"
                    action="{{ route('admin.service-provider.destroy', ['id' => $service_provider['id']]) }}"
                    method="post">
                    @csrf
                    @method('DELETE')
                </form>
            </div>
        </td>
    </tr>
@endforeach