PAMSIMAS_Gumuksari/PAMSIMAS_Petugas/resources/views/users/usersGrid.blade.php

636 lines
50 KiB
PHP

@extends('layout.layout')
@php
$title='Users Grid';
$subTitle = 'Users Grid';
$script = '<script>
$(".delete-btn").on("click", function() {
$(this).closest(".user-grid-card").addClass("hidden")
});
</script>';
@endphp
@section('content')
<div class="card h-full p-0 rounded-xl border-0 overflow-hidden">
<div class="card-header border-b border-neutral-200 dark:border-neutral-600 bg-white dark:bg-neutral-700 py-4 px-6 flex items-center flex-wrap gap-3 justify-between">
<div class="flex items-center flex-wrap gap-3">
<span class="text-base font-medium text-secondary-light mb-0">Show</span>
<select class="form-select form-select-sm w-auto dark:bg-neutral-600 dark:text-white border-neutral-200 dark:border-neutral-500 rounded-lg">
<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-white dark:bg-neutral-700 h-10 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-3 py-3 rounded-lg flex 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-6">
<div class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4 gap-6">
<div class="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg1.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown1" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown1" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Jacob Jones</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg2.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown2" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown2" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Darrell Steward</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg3.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown3" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown3" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Jerome Bell</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg4.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown4" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown4" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Eleanor Pena</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg5.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown5" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown5" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Ralph Edwards</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg6.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown6" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown6" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Annette Black</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg7.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown7" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown7" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Robert Fox</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg8.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown8" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown8" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Albert Flores</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg9.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown9" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown9" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Dianne Russell</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg10.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown10" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown10" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Esther Howard</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg11.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown11" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown11" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Marvin McKinney</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="user-grid-card">
<div class="relative border border-neutral-200 dark:border-neutral-600 rounded-2xl overflow-hidden">
<img src="{{ asset('assets/images/user-grid/user-grid-bg12.png') }}" alt="" class="w-full object-fit-cover">
<div class="dropdown absolute top-0 end-0 me-4 mt-4">
<button data-dropdown-toggle="dropdown12" class="bg-gradient-to-r from-white/50 w-8 h-8 rounded-lg border border-light-white flex justify-center items-center text-white" type="button">
<i class="ri-more-2-fill"></i>
</button>
<div id="dropdown12" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
Edit
</button>
</li>
<li>
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
Delete
</button>
</li>
</ul>
</div>
</div>
<div class="pe-6 pb-4 ps-6 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-[100px] h-[100px] ms-auto me-auto -mt-[50px] rounded-full object-fit-cover">
<h6 class="text-lg mb-0 mt-1.5">Guy Hawkins</h6>
<span class="text-secondary-light mb-4">ifrandom@gmail.com</span>
<div class="center-border relative bg-gradient-to-r from-danger-500/10 to-danger-50/25 rounded-lg p-3 flex items-center gap-4 before:absolute before:w-px before:h-full before:z-[1] before:bg-neutral-200 dark:before:bg-neutral-500 before:start-1/2">
<div class="text-center w-1/2">
<h6 class="text-base mb-0">Design</h6>
<span class="text-secondary-light text-sm mb-0">Department</span>
</div>
<div class="text-center w-1/2">
<h6 class="text-base 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 hover:bg-primary-600 dark:hover:bg-primary-600 hover:text-white dark:hover:text-white dark:bg-primary-600/25 text-primary-600 dark:text-primary-400 bg-hover-primary-600 hover-text-white p-2.5 text-sm btn-sm px-3 py-3 rounded-lg flex items-center justify-center mt-4 font-medium gap-2 w-full">
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="flex items-center justify-between flex-wrap gap-2 mt-6">
<span>Showing 1 to 10 of 12 entries</span>
<ul class="pagination flex flex-wrap items-center gap-2 justify-center">
<li class="page-item">
<a class="page-link bg-neutral-300 dark:bg-neutral-600 text-secondary-light font-semibold rounded-lg border-0 flex items-center justify-center h-8 w-8 text-base" 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 font-semibold rounded-lg border-0 flex items-center justify-center h-8 w-8 text-base bg-primary-600 text-white" href="javascript:void(0)">1</a>
</li>
<li class="page-item">
<a class="page-link bg-neutral-300 dark:bg-neutral-600 text-secondary-light font-semibold rounded-lg border-0 flex items-center justify-center h-8 w-8" href="javascript:void(0)">2</a>
</li>
<li class="page-item">
<a class="page-link bg-neutral-300 dark:bg-neutral-600 text-secondary-light font-semibold rounded-lg border-0 flex items-center justify-center h-8 w-8 text-base" href="javascript:void(0)">3</a>
</li>
<li class="page-item">
<a class="page-link bg-neutral-300 dark:bg-neutral-600 text-secondary-light font-semibold rounded-lg border-0 flex items-center justify-center h-8 w-8 text-base" href="javascript:void(0)">4</a>
</li>
<li class="page-item">
<a class="page-link bg-neutral-300 dark:bg-neutral-600 text-secondary-light font-semibold rounded-lg border-0 flex items-center justify-center h-8 w-8 text-base" href="javascript:void(0)">5</a>
</li>
<li class="page-item">
<a class="page-link bg-neutral-300 dark:bg-neutral-600 text-secondary-light font-semibold rounded-lg border-0 flex items-center justify-center h-8 w-8 text-base" href="javascript:void(0)"> <iconify-icon icon="ep:d-arrow-right" class=""></iconify-icon> </a>
</li>
</ul>
</div>
</div>
</div>
@endsection