@extends('layouts.master')

@section('styles')

        <!-- CHOICES CSS -->
        <link rel="stylesheet" href="{{asset('build/assets/libs/choices.js/public/assets/styles/choices.min.css')}}">

@endsection

@section('content')

                    <div class="content">

                        <!-- Start::main-content -->
                        <div class="main-content">

                            <!-- Page Header -->
                            <div class="block justify-between page-header sm:flex">
                                <div>
                                    <h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium"> Contacts</h3>
                                </div>
                                <ol class="flex items-center whitespace-nowrap min-w-0">
                                    <li class="text-sm">
                                        <a class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate" href="javascript:void(0);">
                                        Pages
                                        <i class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"></i>
                                        </a>
                                    </li>
                                    <li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page">
                                        Contacts
                                    </li>
                                </ol>
                            </div>
                            <!-- Page Header Close -->

                            <!-- Start::row-1 -->
                            <div class="grid grid-cols-12 gap-x-5">
                            <div class="col-span-12 xxl:col-span-9">
                                <div class="box">
                                <div class="box-header">
                                    <div class="grid grid-cols-12 gap-6">
                                    <div class="col-span-12 lg:col-span-4">
                                        <div class="relative sm:max-w-xs max-w-[210px]">
                                        <label for="hs-table-search" class="sr-only">Search</label>
                                        <div
                                            class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-4 rtl:pl-4">
                                            <i class="ti ti-search"></i>
                                        </div>
                                        <input type="text" name="hs-table-search" id="hs-table-search"
                                            class="p-2 ltr:pr-10 rtl:pl-10 ti-form-input" placeholder="Search Contact">
                                        </div>
                                    </div>
                                    <div class="col-span-12 lg:sm:col-span-8">
                                        <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 lg:justify-end team-right rtl:space-x-reverse">
                                        <div class="hs-dropdown ti-dropdown">
                                            <button id="hs-dropdown-custom-icon-trigger2" type="button"
                                            class="hs-dropdown-toggle ti-btn ti-btn-primary m-0">Sort By<i
                                                class="ri-arrow-down-s-line align-middle"></i></button>
                                            <div class="hs-dropdown-menu ti-dropdown-menu hidden"
                                            aria-labelledby="hs-dropdown-custom-icon-trigger2">
                                            <a class="ti-dropdown-item" href="javascript:void(0)">A To Z</a>
                                            <a class="ti-dropdown-item" href="javascript:void(0)">Z To A</a>
                                            <a class="ti-dropdown-item" href="javascript:void(0)">Favorites</a>
                                            <a class="ti-dropdown-item" href="javascript:void(0)">All</a>
                                            </div>
                                        </div>
                                        <a href="javascript:void(0);" class="team-add-btn m-0 ti-btn ti-btn-secondary whitespace-nowrap">
                                            <i class="ti ti-circle-plus leading-none"> </i>Add New Contact
                                        </a>
                                        <div class="hs-dropdown ti-dropdown">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                            class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                            <i class="ri ri-more-2-line text-lg leading-none"></i>
                                            </a>
                                            <div class="hs-dropdown-menu ti-dropdown-menu">
                                            <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                class="ri-folder-shared-line me-2 align-middle"></i>Move To</a>
                                            <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                class="ri-file-copy-line me-2 align-middle"></i>Copy All</a>
                                            <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                class="ri-delete-bin-5-line me-2 align-middle"></i>Delete All</a>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="box-body">
                                    <div class="sm:grid sm:space-y-0 space-y-6 xl:!grid-cols-3 md:grid-cols-2 gap-6">
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Julia Walker</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                juliawalker@gmail.com</p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 2525252352</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-danger hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/11.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Ben Dover</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                BenDover@gmail.com</p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 9585652655</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-gray-300 dark:text-white/70 hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/12.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Eos Tempor</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                EosTempor@gmail.com</p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 9585652655</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-gray-300 dark:text-white/70 hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/1.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Json Taylor</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                JsonTaylor2023@gmail.com
                                                </p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 9585652655</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-gray-300 dark:text-white/70 hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/2.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Socrates Itumay</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                SocratesItumay2023@gmail.com</p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 9585652655</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-danger hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/3.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Wiley Waites</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                WileyWaites2023@gmail.com
                                                </p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 9585652655</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-gray-300 dark:text-white/70 hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/4.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Alica Nestle</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                AlicaNestle2023@gmail.com
                                                </p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 9585652655</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-gray-300 dark:text-white/70 hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/21.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Edgardo Huel</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                EdgardoHuel2023@gmail.com
                                                </p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 9585652655</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-gray-300 dark:text-white/70 hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/5.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Willie Makit</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                Williemakit2023@gmail.com
                                                </p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 9585652655</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-danger hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/6.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Katherina Kat</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                KatherinaKat2023@gmail.com
                                                </p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 9585652655</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-gray-300 dark:text-white/70 hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/13.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Wiley Dover</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                Wileydover2023@gmail.com
                                                </p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 9585652655</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-danger hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box mb-0">
                                        <div class="box-body space-y-5">
                                        <div class="flex">
                                            <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
                                            <img class="avatar avatar-lg rounded-sm" src="{{asset('build/assets/img/users/21.jpg')}}"
                                                alt="Image Description">
                                            <div class="space-y-1 my-auto">
                                                <h5 class="font-semibold text-base leading-none">Benz Makit</h5>
                                                <p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
                                                BenzMakit2023@gmail.com
                                                </p>
                                                <p class="text-primary dark:text-primary text-xs font-semibold">+121 9585652655</p>
                                            </div>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                            <a aria-label="anchor" href="javascript:void(0);"><i
                                                class="ri ri-heart-fill text-base text-danger hover:text-danger"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="box-footer">
                                        <div class="grid grid-cols-12 gap-x-3">
                                            <div class="sm:col-span-2 col-span-4">
                                            <a aria-label="anchor" href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-phone-line text-lg leading-none"></i>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-8 col-span-4">
                                            <a href="javascript:void(0);"
                                                class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri-chat-2-line text-lg leading-none"></i> <span
                                                class="text-sm leading-none hidden sm:block">Message</span>
                                            </a>
                                            </div>
                                            <div class="sm:col-span-2 col-span-4">
                                            <div class="hs-dropdown ti-dropdown flex justify-end">
                                                <a aria-label="anchor" href="javascript:void(0);"
                                                class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
                                                <i class="ri ri-more-2-line text-lg leading-none"></i>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-share-line me-2 align-middle"></i>Share</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);"><i
                                                    class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                    <nav class="mt-6 flex justify-end items-center space-x-2 rtl:space-x-reverse">
                                    <a class="text-gray-500 dark:text-white/70 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm"
                                        href="javascript:void(0);">
                                        <span aria-hidden="true">Prev</span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="bg-primary text-white py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
                                        href="javascript:void(0);" aria-current="page">1</a>
                                    <a class="text-gray-500 dark:text-white/70 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
                                        href="javascript:void(0);">2</a>
                                    <a class="text-gray-500 dark:text-white/70 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
                                        href="javascript:void(0);">3</a>
                                    <a class="text-gray-500 dark:text-white/70 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm"
                                        href="javascript:void(0);">
                                        <span class="sr-only">Next</span>
                                        <span aria-hidden="true">Next</span>
                                    </a>
                                    </nav>
                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xxl:col-span-3">
                                <div class="box">
                                <div class="box-body">
                                    <div class="relative">
                                    <div
                                        class="flex relative before:bg-black/50 before:absolute before:w-full before:h-full before:rounded-sm">
                                        <img src="{{asset('build/assets/img/png-images/14.jpg')}}" alt="" class="h-[150px] w-full rounded-sm" id="profile-img2">
                                        <span
                                        class="absolute top-5 ltr:right-5 rtl:left-5 flex p-2 rounded-sm ring-1 ring-black/10 text-white bg-black/10 leading-none">
                                        <i class="ri ri-pencil-line"></i>
                                        <input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                                            id="profile-change2">
                                        </span>
                                    </div>
                                    <div class="absolute top-[5.5rem] inset-x-0 text-center space-y-3">
                                        <div class="flex justify-center w-full">
                                        <div class="relative">
                                            <img src="{{asset('build/assets/img/users/1.jpg')}}" class="w-24 h-24 rounded-full ring-4 ring-white/10 mx-auto"
                                            id="profile-img" alt="pofile-img">
                                            <span
                                            class="absolute top-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white/10 text-white bg-white/10 dark:bg-bgdark leading-none">
                                            <i class="ri ri-pencil-line"></i>
                                            <input type="file"
                                                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="profile-change">
                                            </span>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                    <div class="mt-14 space-y-5">
                                    <div class="mt-4  text-center">
                                        <h2 class="text-xl font-semibold">Airi Satou</h2>
                                        <p class="text-sm text-gray-500 dark:text-white/70 font-semibold">Team Lead</p>
                                    </div>
                                    <h5 class="box-title my-3">Contact Information</h5>
                                    <div class="flex space-x-3 rtl:space-x-reverse">
                                        <i
                                        class="ri ri-phone-line text-lg leading-none p-3 avatar avatar-sm bg-gray-100 dark:bg-black/20 rounded-sm"></i>
                                        <div class="my-auto">
                                        <h5 class="text-sm font-semibold">Phone Number</h5>
                                        <a href="javascript:void(0);" class="text-xs text-gray-500 dark:text-white/70">+121 9585652655</a>
                                        </div>
                                    </div>
                                    <div class="flex space-x-3 rtl:space-x-reverse">
                                        <i
                                        class="ri ri-mail-line text-lg leading-none p-3 avatar avatar-sm bg-gray-100 dark:bg-black/20 rounded-sm"></i>
                                        <div class="my-auto">
                                        <h5 class="text-sm font-semibold">Email Id</h5>
                                        <a href="javascript:void(0);"
                                            class="text-xs text-gray-500 dark:text-white/70">juliawalker@gmail.com</a>
                                        </div>
                                    </div>
                                    <h5 class="box-title my-3">WebSite Information</h5>
                                    <div class="flex space-x-3 rtl:space-x-reverse">
                                        <i
                                        class="ri ri-github-line text-lg leading-none p-3 avatar avatar-sm bg-primary/20 dark:bg-primary/20 text-primary dark:text-primary rounded-sm"></i>
                                        <div class="my-auto">
                                        <h5 class="text-sm font-semibold">Github Id</h5>
                                        <a href="javascript:void(0);"
                                            class="text-xs text-gray-500 dark:text-white/70">https://github.com/</a>
                                        </div>
                                    </div>
                                    <div class="flex space-x-3 rtl:space-x-reverse">
                                        <i
                                        class="ri ri-facebook-line text-lg leading-none p-3 avatar avatar-sm bg-secondary/20 dark:bg-secondary/20 text-secondary dark:text-secondary rounded-sm"></i>
                                        <div class="my-auto">
                                        <h5 class="text-sm font-semibold">Facebook Id</h5>
                                        <a href="javascript:void(0);"
                                            class="text-xs text-gray-500 dark:text-white/70">https://facebook.com/</a>
                                        </div>
                                    </div>
                                    <div class="flex space-x-3 rtl:space-x-reverse">
                                        <i
                                        class="ri ri-instagram-line text-lg leading-none p-3 avatar avatar-sm bg-danger/20 dark:bg-danger/20 text-danger dark:text-danger rounded-sm"></i>
                                        <div class="my-auto">
                                        <h5 class="text-sm font-semibold">instagram Id</h5>
                                        <a href="javascript:void(0);"
                                            class="text-xs text-gray-500 dark:text-white/70">https://instagram.com/</a>
                                        </div>
                                    </div>
                                    <div class="flex space-x-3 rtl:space-x-reverse">
                                        <i
                                        class="ri ri-twitter-line text-lg leading-none p-3 avatar avatar-sm bg-info/20 dark:bg-info/20 text-info dark:text-info rounded-sm"></i>
                                        <div class="my-auto">
                                        <h5 class="text-sm font-semibold">twitter Id</h5>
                                        <a href="javascript:void(0);"
                                            class="text-xs text-gray-500 dark:text-white/70">https://twitter.com/</a>
                                        </div>
                                    </div>
                                    <div class="flex space-x-3 rtl:space-x-reverse">
                                        <i
                                        class="ri ri-linkedin-line text-lg leading-none p-3 avatar avatar-sm bg-warning/20 dark:bg-warning/20 text-warning dark:text-warning rounded-sm"></i>
                                        <div class="my-auto">
                                        <h5 class="text-sm font-semibold">linkedin Id</h5>
                                        <a href="javascript:void(0);"
                                            class="text-xs text-gray-500 dark:text-white/70">https://linkedin.com/</a>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="box-footer">
                                    <button type="button" class="w-full ti-btn ti-btn-primary">
                                    <i class="ti ti-report"></i>Report
                                    </button><button type="button"
                                    class="w-full ti-btn font-medium border-gray-200 bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
                                    <i class="ti ti-ban"></i>Block
                                    </button>
                                </div>
                                </div>
                            </div>
                            </div>
                            <!-- End::row-1 -->

                        </div>
                        <!-- Start::main-content -->

                    </div>

@endsection

@section('scripts')

        <!-- CHOICES JS -->
        <script src="{{asset('build/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script>

        <!-- CONTACTS JS -->
        @vite('resources/assets/js/contacts.js')


@endsection