@extends('layouts.dashboard',['title'=> "Users"])
@section('statusmenue')
<div class="lg:flex lg:flex-row px-4 mt-4 w-full">


    <div class="w-full lg:w-1/4 md:w-full mx-2 p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">

        <img class="w-14 h-14 text-gray-500 dark:text-gray-400 mb-3 border-2 border-solid rounded-xl border-gray-300" src="/icons/breafecase.png" />
        <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Total Workforce</p>

        <h5 class=" mt-6 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">583</h5>

    </div>



    <div class="w-full lg:w-1/4 mx-2 p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">

        <img class="w-14 h-14 text-gray-500 dark:text-gray-400 mb-3 border-2 border-solid rounded-xl border-gray-300" src="/icons/chear.png" />
        <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Total Client</p>

        <h5 class=" mt-6 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">583</h5>

    </div>




    <div class="w-full lg:w-1/4 mx-2 p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <img class="w-14 h-14 text-gray-500 dark:text-gray-400 mb-3 border-2 border-solid rounded-xl border-gray-300" src="/icons/alert.png" />

        <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">New Workforce</p>

        <h5 class=" mt-6 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">583</h5>

    </div>




    <div class="w-full lg:w-1/4 mx-2 p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <img class="w-14 h-14 text-gray-500 dark:text-gray-400 mb-3 border-2 border-solid rounded-xl border-gray-300" src="/icons/clock2.png" />

        <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">New Client</p>


        <h5 class=" mt-6 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">583</h5>


    </div>

</div>
@stop
@section('content')

<div class="w-full mt-4 relative  shadow-md sm:rounded-lg overflow-auto ">

    <div class="w-full mt-4 relative  shadow-md sm:rounded-lg overflow-auto ">
        <div class="flex items-center justify-between flex-column flex-wrap md:flex-row space-y-4 md:space-y-0 pb-4 bg-white dark:bg-gray-900">

            <div class="mt-2 mx-4">
                <div class="Imprest">
                    Users
                </div>
                <div class="pettyCash">
                    You can search any user or personal
                </div>
            </div>
            <div class="mt-2 mx-4">
                <label for="table-search" class="sr-only">Search</label>
                <div class="relative">
                    <div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none">
                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                        </svg>
                    </div>
                    <input type="text" id="table-search-users" class="block p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for users">
                </div>
            </div>
        </div>
        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>

                    <th scope="col" class="px-6 py-3">
                        Name/ Created At
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Phone/ Email
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Status
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Country/ State
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Action
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">

                    <th scope="row" class="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white">
                        <a href="/profile" class="">
                            <img class="w-10 h-10 rounded-full" src="/images/profilepictur.png" alt="Jese image">
                        </a>

                        <a href="/profile" class="">
                            <div class="ps-3">
                                <div class="text-base font-semibold">Neil Sims</div>
                                <div class="font-normal text-gray-500">2025-02-01</div>
                            </div>
                        </a>
                    </th>
                    <td class="px-6 py-4">
                        <a href="/profile" class="">
                            <div class="text-base font-semibold">+1 555-123-4567</div>
                            <div class="font-normal text-gray-500">neilsims@email.com</div>
                        </a>

                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> verified
                        </div>
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> verified
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-base font-semibold">Nigeria</div>
                        <div class="font-normal text-gray-500">Lagos</div>
                    </td>
                    <td class="flex px-6 py-4">
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonSettings.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonEdit.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/lock-open.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonTrash.png" alt="" srcset="">
                        </button>
                    </td>
                </tr>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">

                    <th scope="row" class="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white">
                        <a href="/profile" class="">
                            <img class="w-10 h-10 rounded-full" src="/images/profilepictur.png" alt="Jese image">
                        </a>

                        <a href="/profile" class="">
                            <div class="ps-3">
                                <div class="text-base font-semibold">Neil Sims</div>
                                <div class="font-normal text-gray-500">2025-02-01</div>
                            </div>
                        </a>
                    </th>
                    <td class="px-6 py-4">
                        <a href="/profile" class="">
                            <div class="text-base font-semibold">+1 555-123-4567</div>
                            <div class="font-normal text-gray-500">neilsims@email.com</div>
                        </a>

                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> verified
                        </div>
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> verified
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-base font-semibold">Nigeria</div>
                        <div class="font-normal text-gray-500">Lagos</div>
                    </td>
                    <td class="flex px-6 py-4">
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonSettings.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonEdit.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/lock-open.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonTrash.png" alt="" srcset="">
                        </button>
                    </td>
                </tr>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">

                    <th scope="row" class="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white">
                        <a href="/profile" class="">
                            <img class="w-10 h-10 rounded-full" src="/images/profilepictur.png" alt="Jese image">
                        </a>

                        <a href="/profile" class="">
                            <div class="ps-3">
                                <div class="text-base font-semibold">Neil Sims</div>
                                <div class="font-normal text-gray-500">2025-02-01</div>
                            </div>
                        </a>
                    </th>
                    <td class="px-6 py-4">
                        <a href="/profile" class="">
                            <div class="text-base font-semibold">+1 555-123-4567</div>
                            <div class="font-normal text-gray-500">neilsims@email.com</div>
                        </a>

                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> verified
                        </div>
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> verified
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-base font-semibold">Nigeria</div>
                        <div class="font-normal text-gray-500">Lagos</div>
                    </td>
                    <td class="flex px-6 py-4">
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonSettings.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonEdit.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/lock-open.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonTrash.png" alt="" srcset="">
                        </button>
                    </td>
                </tr>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">

                    <th scope="row" class="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white">
                        <a href="/profile" class="">
                            <img class="w-10 h-10 rounded-full" src="/images/profilepictur.png" alt="Jese image">
                        </a>

                        <a href="/profile" class="">
                            <div class="ps-3">
                                <div class="text-base font-semibold">Neil Sims</div>
                                <div class="font-normal text-gray-500">2025-02-01</div>
                            </div>
                        </a>
                    </th>
                    <td class="px-6 py-4">
                        <a href="/profile" class="">
                            <div class="text-base font-semibold">+1 555-123-4567</div>
                            <div class="font-normal text-gray-500">neilsims@email.com</div>
                        </a>

                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> verified
                        </div>
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full bg-red-500 me-2"></div> unverified
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-base font-semibold">Nigeria</div>
                        <div class="font-normal text-gray-500">Lagos</div>
                    </td>
                    <td class="flex px-6 py-4">
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonSettings.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonEdit.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/lock-open.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonTrash.png" alt="" srcset="">
                        </button>
                    </td>
                </tr>
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">

                    <th scope="row" class="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white">
                        <a href="/profile" class="">
                            <img class="w-10 h-10 rounded-full" src="/images/profilepictur.png" alt="Jese image">
                        </a>

                        <a href="/profile" class="">
                            <div class="ps-3">
                                <div class="text-base font-semibold">Neil Sims</div>
                                <div class="font-normal text-gray-500">2025-02-01</div>
                            </div>
                        </a>
                    </th>
                    <td class="px-6 py-4">
                        <a href="/profile" class="">
                            <div class="text-base font-semibold">+1 555-123-4567</div>
                            <div class="font-normal text-gray-500">neilsims@email.com</div>
                        </a>

                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full bg-red-500 me-2"></div> unverified
                        </div>
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> verified
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-base font-semibold">Nigeria</div>
                        <div class="font-normal text-gray-500">Lagos</div>
                    </td>
                    <td class="flex px-6 py-4">
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonSettings.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonEdit.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/lock-open.png" alt="" srcset="">
                        </button>
                        <button class="mx-1 h-10 w-10">
                            <img class="h-10 w-10 rounded-lg" src="/icons/ButtonTrash.png" alt="" srcset="">
                        </button>
                    </td>
                </tr>

            </tbody>

        </table>
        <nav class="flex flex-col md:flex-row justify-between items-start md:items-center space-y-3 md:space-y-0 p-4" aria-label="Table navigation">
            <span class="text-sm font-normal text-gray-500 dark:text-gray-400">
                Showing
                <span class="font-semibold text-gray-900 dark:text-white">1-10</span>
                of
                <span class="font-semibold text-gray-900 dark:text-white">1000</span>
            </span>
            <ul class="inline-flex items-stretch -space-x-px">
                <li>
                    <a href="#" class="flex items-center justify-center h-full py-1.5 px-3 ml-0 text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                        <span class="sr-only">Previous</span>
                        <svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
                </li>
                <li>
                    <a href="#" class="flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
                </li>
                <li>
                    <a href="#" aria-current="page" class="flex items-center justify-center text-sm z-10 py-2 px-3 leading-tight text-primary-600 bg-primary-50 border border-primary-300 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
                </li>
                <li>
                    <a href="#" class="flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">...</a>
                </li>
                <li>
                    <a href="#" class="flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">100</a>
                </li>
                <li>
                    <a href="#" class="flex items-center justify-center h-full py-1.5 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                        <span class="sr-only">Next</span>
                        <svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

@stop