@extends('layout.layout')
@php
    $title='Users List';
    $subTitle = 'Users List';
    $script = '<script>
                        $(".delete-btn").on("click", function() {
                            $(this).closest(".user-grid-card").addClass("d-none")
                        });
                </script>';
@endphp

@section('content')

            <div class="card h-100 p-0 radius-12">
                <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center flex-wrap gap-3 justify-content-between">
                    <div class="d-flex align-items-center flex-wrap gap-3">
                        <span class="text-md fw-medium text-secondary-light mb-0">Show</span>
                        <select class="form-select form-select-sm w-auto ps-12 py-6 radius-12 h-40-px">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                        </select>
                        <form class="navbar-search">
                            <input type="text" class="bg-base h-40-px w-auto" name="search" placeholder="Search">
                            <iconify-icon icon="ion:search-outline" class="icon"></iconify-icon>
                        </form>
                    </div>
                    <a  href="{{ route('viewProfile') }}" class="btn btn-primary text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center gap-2">
                        <iconify-icon icon="ic:baseline-plus" class="icon text-xl line-height-1"></iconify-icon>
                        Add New User
                    </a>
                </div>
                <div class="card-body p-24">
                    <div class="row gy-4">
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg1.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img1.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Jacob Jones</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg2.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img2.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Darrell Steward</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg3.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img3.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Jerome Bell</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg4.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img4.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Eleanor Pena</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg5.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img5.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Ralph Edwards</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg6.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img6.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Annette Black</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg7.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img7.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Robert Fox</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg8.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img8.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Albert Flores</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg9.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img9.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Dianne Russell</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg10.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img10.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Esther Howard</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg11.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img11.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Marvin McKinney</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-md-6 user-grid-card   ">
                            <div class="position-relative border radius-16 overflow-hidden">
                                <img src="{{ asset('assets/images/user-grid/user-grid-bg12.png') }}" alt="" class="w-100 object-fit-cover">

                                <div class="dropdown position-absolute top-0 end-0 me-16 mt-16">
                                    <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="bg-white-gradient-light w-32-px h-32-px radius-8 border border-light-white d-flex justify-content-center align-items-center text-white">
                                        <iconify-icon icon="entypo:dots-three-vertical" class="icon "></iconify-icon>
                                    </button>
                                    <ul class="dropdown-menu p-12 border bg-base shadow">
                                        <li>
                                            <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"  href="#">
                                                Edit
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="delete-btn dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10">
                                                Delete
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <div class="ps-16 pb-16 pe-16 text-center mt--50">
                                    <img src="{{ asset('assets/images/user-grid/user-grid-img12.png') }}" alt="" class="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover">
                                    <h6 class="text-lg mb-0 mt-4">Guy Hawkins</h6>
                                    <span class="text-secondary-light mb-16">ifrandom@gmail.com</span>

                                    <div class="center-border position-relative bg-danger-gradient-light radius-8 p-12 d-flex align-items-center gap-4">
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">Design</h6>
                                            <span class="text-secondary-light text-sm mb-0">Department</span>
                                        </div>
                                        <div class="text-center w-50">
                                            <h6 class="text-md mb-0">UI UX Designer</h6>
                                            <span class="text-secondary-light text-sm mb-0">Designation</span>
                                        </div>
                                    </div>
                                    <a  href="{{ route('viewProfile') }}" class="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-16 fw-medium gap-2 w-100">
                                        View Profile
                                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon text-xl line-height-1"></iconify-icon>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-24">
                        <span>Showing 1 to 10 of 12 entries</span>
                        <ul class="pagination d-flex flex-wrap align-items-center gap-2 justify-content-center">
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md"  href="javascript:void(0)">
                                    <iconify-icon icon="ep:d-arrow-left" class=""></iconify-icon>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md bg-primary-600 text-white"  href="javascript:void(0)">1</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px"  href="javascript:void(0)">2</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md"  href="javascript:void(0)">3</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md"  href="javascript:void(0)">4</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md"  href="javascript:void(0)">5</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md"  href="javascript:void(0)">
                                    <iconify-icon icon="ep:d-arrow-right" class=""></iconify-icon>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

@endsection