@foreach($items as $index=> $item)
    
    <tr>
        <td>
            <div class="checkbox-item">
            <label>
                <input type="checkbox" name="permission" value="{{ $item->id }}">
                <span class="checkmark"></span>
            </label>
            </div>
        </td>
        <td><span class="td">{{ ++$index }}</span></td>
        <td data-width="80">
            <img
                class="table-thumb-80"
                src="{{ showPhoto($item->photo) }}"
                alt="slider img" >
        </td>
        <td><span class="td">{{ $item->name }}</span></td>
        <td><span class="td">{{ $item->email }}</span></td>
        <td><span class="td">{{ $item->phone }}</span></td>
        <td><span class="td">{{ $item->role?->name }}</span></td>

        <td>
            <x-global.status
                model="admin"
                :id="$item->id"
                :status="$item->status"
            />
        </td>

        <td>
            <div class="d-flex gap-4">
                <buttion type="button" class="edit-icon-btn edit" 
                        data-route="{{ route('admin.staff.update', $item->id) }}"
                        data-item="{{ $item }}" data-bs-toggle="modal"
                        data-bs-target="#gs-dash-edit-staff"
                        data-image="{{ showPhoto($item->photo) }}"
                        >
                        
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                    <g clip-path="url(#clip0_5222_68569)">
                        <path
                        d="M17.2992 11.0399C16.8015 11.0399 16.3992 11.4432 16.3992 11.9398V19.1399C16.3992 19.6358 15.996 20.0398 15.4993 20.0398H2.89922C2.40236 20.0398 1.99927 19.6358 1.99927 19.1399V6.53984C1.99927 6.04398 2.40236 5.6399 2.89922 5.6399H10.0993C10.597 5.6399 10.9992 5.23665 10.9992 4.73995C10.9992 4.2431 10.597 3.83984 10.0993 3.83984H2.89922C1.41063 3.83984 0.199219 5.05125 0.199219 6.53984V19.1399C0.199219 20.6285 1.41063 21.8399 2.89922 21.8399H15.4993C16.9879 21.8399 18.1993 20.6285 18.1993 19.1399V11.9398C18.1993 11.4422 17.7968 11.0399 17.2992 11.0399Z"
                        fill="white" />
                        <path
                        d="M8.63939 10.2224C8.57644 10.2853 8.53409 10.3654 8.51613 10.4517L7.87985 13.6343C7.85019 13.7818 7.89699 13.9339 8.00312 14.041C8.08865 14.1265 8.20384 14.1723 8.32183 14.1723C8.35051 14.1723 8.38034 14.1697 8.41 14.1634L11.5915 13.5271C11.6797 13.509 11.7598 13.4668 11.8219 13.4037L18.9427 6.28293L15.7612 3.10156L8.63939 10.2224Z"
                        fill="white" />
                        <path
                        d="M21.1419 0.900337C20.2645 0.0228042 18.8371 0.0228042 17.9604 0.900337L16.7148 2.14586L19.8964 5.32739L21.1419 4.0817C21.5667 3.65785 21.8007 3.0926 21.8007 2.49143C21.8007 1.89026 21.5667 1.32501 21.1419 0.900337Z"
                        fill="white" />
                    </g>
                    <defs>
                        <clipPath id="clip0_5222_68569">
                        <rect width="21.6" height="21.6" fill="white" transform="translate(0.199219 0.199219)" />
                        </clipPath>
                    </defs>
                    </svg>
                </buttion>

                <x-global.delete-button :href="route('admin.staff.destroy', $item->id)" />
            </div>
        </td>
    </tr>

@endforeach