@extends('layouts.master')

@section('styles')

@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"> Mail Inbox</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">
                                        Mail Inbox
                                    </li>
                                </ol>
                            </div>
                            <!-- Page Header Close -->

                            <!-- Start::row-1 -->
                            <div class="grid grid-cols-12 gap-x-6">
                                <div class="col-span-12 xl:col-span-4 xxl:!col-span-3">
                                    <div class="box">
                                        <div class="box-header bg-transparent">
                                        <a href="javascript:void(0);" class="hs-dropdown-toggle py-2 px-3 ti-btn ti-btn-primary w-full" data-hs-overlay="#mail-compose">
                                            <i class="ri ri-edit-line"></i>Compose
                                        </a>
                                        </div>
                                        <div class="box-body">
                                        <ul>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex items-center align-middle justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm bg-gray-100 font-normal hover:bg-gray-200 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-black/20">
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                <i class="ri ri-mail-line"></i>
                                                <span class="">Inbox</span>
                                                </div>
                                                <div>
                                                <span class="">20</span>
                                                </div>
                                            </a>
                                            </li>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal hover:bg-gray-200 focus:bg-gary-800 dark:bg-bgdark dark:hover:bg-black/20">
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                <i class="ri ri-star-line"></i>
                                                <span class="">Starred</span>
                                                </div>
                                            </a>
                                            </li>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal hover:bg-gray-200 focus:bg-gary-800 dark:bg-bgdark dark:hover:bg-black/20">
                                            <div class="flex space-x-3 rtl:space-x-reverse">
                                                <i class="ri ri-time-line"></i>
                                                <span class="">Snoozed</span>
                                            </div>
                                            </a>
                                            </li>
                                            <li >
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal hover:bg-gray-200 focus:bg-gary-800 dark:bg-bgdark dark:hover:bg-black/20">
                                            <div class="flex space-x-3 rtl:space-x-reverse">
                                                <i class="ri ri-price-tag-3-line"></i>
                                                <span class="">Important</span>
                                            </div>
                                            </a>
                                            </li>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal hover:bg-gray-200 focus:bg-gary-800 dark:bg-bgdark dark:hover:bg-black/20">
                                            <div class="flex space-x-3 rtl:space-x-reverse">
                                                <i class="ri ri-send-plane-line"></i>
                                                <span class="">sent</span>
                                            </div>
                                            </a>
                                            </li>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal hover:bg-gray-200 focus:bg-gary-800 dark:bg-bgdark dark:hover:bg-black/20">
                                            <div class="flex space-x-3 rtl:space-x-reverse">
                                                <i class="ri ri-draft-line"></i>
                                                <span class="">Drafts</span>
                                            </div>
                                            <div>
                                                <span class="">2</span>
                                            </div>
                                            </a>
                                            </li>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal hover:bg-gray-200 focus:bg-gary-800 dark:bg-bgdark dark:hover:bg-black/20">
                                            <div class="flex space-x-3 rtl:space-x-reverse">
                                                <i class="ri ri-alert-line"></i>
                                                <span class="">Spam</span>
                                            </div>
                                            <div>
                                                <span class="">12</span>
                                            </div>
                                            </a>
                                            </li>
                                            <li class="py-2 mb-1 justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal">
                                            <a href="javascript:void(0);" class="hs-collapse-toggle inline-flex justify-center items-center gap-2 rounded-sm border border-transparent transition-all text-sm" id="more" data-hs-collapse="#more-heading">
                                                <i class="ri ri-arrow-down-s-line "></i> <span>More</span>
                                            </a>
                                            </li>
                                            <li id="more-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="more">
                                            <ul>
                                                <li>
                                                <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal hover:bg-gray-200 focus:bg-gary-800 dark:bg-bgdark dark:hover:bg-black/20">
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <i class="ri ri-inbox-archive-line"></i>
                                                    <span class="">Archived</span>
                                                </div>
                                                <div>
                                                    <span class="">5</span>
                                                </div>
                                                </a>
                                                </li>
                                                <li>
                                                <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal hover:bg-gray-200 focus:bg-gary-800 dark:bg-bgdark dark:hover:bg-black/20">
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <i class="ri ri-contacts-book-2-line"></i>
                                                    <span class="">Contacts</span>
                                                </div>
                                                <div>
                                                    <span class="">200</span>
                                                </div>
                                                </a>
                                                </li>
                                                <li>
                                                <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal hover:bg-gray-200 focus:bg-gary-800 dark:bg-bgdark dark:hover:bg-black/20">
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <i class="ri ri-delete-bin-line"></i>
                                                    <span class="">Trash</span>
                                                </div>
                                                <div>
                                                    <span class="">25</span>
                                                </div>
                                                </a>
                                                </li>
                                            </ul>
                                            </li>
                                        </ul>
                                        <h3 class="text-gray-500 dark:text-white/70 my-3 font-semibold">Labels+</h3>
                                        <ul>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal dark:hover:bg-black/20">
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                <span class="w-2.5 h-2.5 inline-block bg-primary rounded-full my-auto"></span>
                                                <span class="">Notes</span>
                                                </div>
                                            </a>
                                            </li>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal dark:hover:bg-black/20">
                                            <div class="flex space-x-3 rtl:space-x-reverse">
                                                <span class="w-2.5 h-2.5 inline-block bg-secondary rounded-full my-auto"></span>
                                                <span class="">Personals</span>
                                            </div>
                                            </a>
                                            </li>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal dark:hover:bg-black/20">
                                            <div class="flex space-x-3 rtl:space-x-reverse">
                                                <span class="w-2.5 h-2.5 inline-block bg-warning rounded-full my-auto"></span>
                                                <span class="">Receipts</span>
                                            </div>
                                            </a>
                                            </li>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal dark:hover:bg-black/20">
                                            <div class="flex space-x-3 rtl:space-x-reverse">
                                                <span class="w-2.5 h-2.5 inline-block bg-info rounded-full my-auto"></span>
                                                <span class="">Work</span>
                                            </div>
                                            </a>
                                            </li>
                                        </ul>
                                        <h3 class="text-gray-500 dark:text-white/70 my-3 font-semibold">Settings</h3>
                                        <ul>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal dark:hover:bg-black/20">
                                            <div class="flex space-x-3 rtl:space-x-reverse">
                                                <i class="ri ri-settings-2-line"></i>
                                                <span class="">settings</span>
                                            </div>
                                            </a>
                                            </li>
                                        </ul>
                                        <h3 class="text-gray-500 dark:text-white/70 my-3 font-semibold">Meet</h3>
                                        <ul>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal hover:bg-gray-200 dark:hover:bg-black/20">
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                <i class="ri ri-vidicon-line"></i>
                                                <span class="">Start a Meeting</span>
                                                </div>
                                            </a>
                                            </li>
                                            <li>
                                            <a href="javascript:void(0);" class="p-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal hover:bg-gray-200 dark:hover:bg-black/20">
                                            <div class="flex space-x-3 rtl:space-x-reverse">
                                                <i class="ri ri-add-circle-line"></i>
                                                <span class="">Join a Meeting</span>
                                            </div>
                                            </a>
                                            </li>
                                        </ul>
                                        <h3 class="text-gray-500 dark:text-white/70 my-3 font-semibold">Online</h3>
                                        <ul>
                                            <li>
                                            <a href="javascript:void(0);" class="py-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal">
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                <div class="relative">
                                                    <img class="avatar avatar-xs ring-0 rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}" alt="avatar">
                                                    <span class="online"></span>
                                                </div>
                                                <div>
                                                    <p class="text-slate-700 font-semibold text-xs dark:text-white my-auto">Katherina Kat</p>
                                                    <p class="text-xs xxl:max-w-[250px] max-w-[170px] truncate">Hi! Some quick example text to build</p>
                                                </div>
                                                </div>
                                            </a>
                                            </li>
                                            <li>
                                            <a href="javascript:void(0);" class="py-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal">
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                <div class="relative">
                                                    <span class="avatar avatar-xs ring-0 rounded-full bg-secondary leading-none  p-2 text-center text-lg text-white">B</span>
                                                    <span class="online"></span>
                                                </div>
                                                <div>
                                                    <p class="text-slate-700 font-semibold text-xs dark:text-white my-auto">Ben Dover</p>
                                                    <p class="text-xs xxl:max-w-[250px] max-w-[170px] truncate">Hi! Some quick example text to build</p>
                                                </div>
                                                </div>
                                            </a>
                                            </li>
                                            <li>
                                            <a href="javascript:void(0);" class="py-2 mb-1 flex justify-between text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm font-normal">
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                <div class="relative">
                                                    <img class="avatar avatar-xs ring-0 rounded-full" src="{{asset('build/assets/img/users/11.jpg')}}" alt="avatar">
                                                    <span class="online"></span>
                                                </div>
                                                <div>
                                                    <p class="text-slate-700 font-semibold text-xs dark:text-white my-auto">Benz Makit</p>
                                                    <p class="text-xs xxl:max-w-[250px] max-w-[170px] truncate">&#128526;Hi! Kasd voluptua labore et justo ea &#128079;</p>
                                                </div>
                                                </div>
                                            </a>
                                            </li>
                                        </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-8 xxl:!col-span-9">
                                    <div class="box main-inbox">
                                    <div class="px-4 box-header bg-transparent">
                                        <div class="flex items-center justify-between">
                                        <div class="flex mail-option space-x-5 rtl:space-x-reverse">
                                            <div class="flex">
                                            <input type="checkbox" class="border-gray-500 ti-form-checkbox mt-0.5 check-all" id="hs-default-checkbox">
                                            <label for="hs-default-checkbox" class="text-sm text-gray-500 dark:text-white/70"></label>
                                            </div>
                                            <div class="hs-tooltip ti-main-tooltip">
                                            <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg leading-none text-gray-500 dark:text-white/70">
                                                <i class="ri-refresh-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Refresh
                                                </span>
                                            </a>
                                            </div>
                                            <div class="hs-dropdown ti-dropdown hs-tooltip ti-main-tooltip">
                                            <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg leading-none text-gray-500 dark:text-white/70" id="snooze-drop2">
                                                <i class="ri-more-2-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                            More
                                                </span>
                                            </a>
                                            <div class="hs-dropdown-menu ti-dropdown-menu "
                                                aria-labelledby="snooze-drop2">
                                                <a class="ti-dropdown-item" href="javascript:void(0);">
                                                    Read
                                                </a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);">
                                                    unread
                                                </a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);">
                                                    Mark as Read
                                                </a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);">
                                                    Spam
                                                </a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);">
                                                    Delete
                                                </a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);">
                                                    None
                                                </a>
                                            </div>
                                            </div>
                                        </div>
                                        <div class="flex space-x-4 rtl:space-x-reverse">
                                            <div class=" text-gray-500 dark:text-white/70 leading-[0] my-auto inline-flex">
                                            <span class="current-page text-base leading-[0] font-semibold">1</span>
                                            <span class="mx-1">Of</span>
                                            <span class="total text-base leading-[0] font-semibold">10</span>
                                            </div>
                                            <div class="hs-tooltip ti-main-tooltip">
                                            <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg leading-none text-gray-500 dark:text-white/70 opacity-60 flex">
                                                <i class="ri-arrow-left-s-line rtl:rotate-180"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Prev
                                                </span>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip ti-main-tooltip">
                                            <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg leading-none text-gray-500 dark:text-white/70 flex">
                                                <i class="ri-arrow-right-s-line rtl:rotate-180"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Next
                                                </span>
                                            </a>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box-body p-0  overflow-hidden">
                                        <div class="overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <tbody>
                                            <tr class="mail-list bg-gray-100 hover:bg-gray-100 dark:bg-black/20 dark:hover:bg-black/20" onclick="changeTheInfo('1','Json Taylor','JsonTaylor2022@gmail.com','casual Leave','Tue 30-09-2022 05:30')">
                                                <td class="py-3 ltr:!pl-4 rtl:!pr-4 ltr:!pr-3 rtl:!pl-3">
                                                <div class="flex items-center h-5 mail-checkbox">
                                                    <input id="hs-table-checkbox-12" type="checkbox" class="border-gray-500 ti-form-checkbox">
                                                    <label for="hs-table-checkbox-12" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-star-line text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3"><i class="ri ri-price-tag-3-line  text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-xs ring-0 rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="avatar">
                                                    <p class="text-slate-700 font-semibold text-sm dark:text-white my-auto">
                                                    Json Taylor
                                                    </p>
                                                </div>
                                                </td>
                                                <td class="font-medium !px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                    <p class="text-xs text-gray-500 dark:text-white/70 mail-main">
                                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. &#128522; Cumque optio reiciendis ullam assumenda sapiente. Porro facere alias perspiciatis velit iure, ea quas magnam nisi architecto possimus maiores. Aliquam, quae corporis!.
                                                    </p>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-attachment-2 text-gray-500 dark:text-white/70"></i></td>
                                                <td class="!px-3 w-44">
                                                <div class="icons-mail2 text-gray-500 dark:text-white/70">
                                                    <span>30 sept,2022</span>
                                                    <span class="ltr:ml-3 rtl:mr-3">3:01pm</span>
                                                </div>
                                                <div class="icons-mail">
                                                    <div class="flex justify-end items-center space-x-4 rtl:space-x-reverse">
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-mail-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            mark as read
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-delete-bin-6-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            delete
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-time-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            Snooze
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-archive-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            archive
                                                        </span>
                                                        </a>
                                                    </div>
                                                    </div>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="mail-list bg-gray-100 hover:bg-gray-100 dark:bg-black/20 dark:hover:bg-black/20" onclick="changeTheInfo('2','Socrates Itumay','SocratesItumay2022@gmail.com','Sick Leave','Mon 29-09-2022 15:20')">
                                                <td class="py-3 ltr:!pl-4 rtl:!pr-4 ltr:!pr-3 rtl:!pl-3">
                                                <div class="flex items-center h-5 mail-checkbox">
                                                    <input id="hs-table-checkbox-13" type="checkbox" class="border-gray-500 ti-form-checkbox">
                                                    <label for="hs-table-checkbox-13" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-star-line text-yellow-500 dark:text-yellow-500 hover:text-yellow-500"></i></td>
                                                <td class="!px-3"><i class="ri ri-price-tag-3-line  text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-xs ring-0 rounded-full" src="{{asset('build/assets/img/users/2.jpg')}}" alt="avatar">
                                                    <p class="text-slate-700 font-semibold text-sm dark:text-white my-auto">
                                                    Socrates Itumay
                                                    </p>
                                                </div>
                                                </td>
                                                <td class="font-medium !px-3 relative overflow-hidden">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                    <p class="text-xs text-gray-500 dark:text-white/70 mail-main truncate">
                                                    &#128077;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus cumque explicabo ea libero itaque nam placeat ipsum expedita, consequuntur nihil ad nulla voluptate beatae eius necessitatibus asperiores sunt! Rem, nihil.
                                                    </p>
                                                </td>
                                                <td class="!px-3"></td>
                                                <td class="!px-3 w-44">
                                                <div class="icons-mail2 text-gray-500 dark:text-white/70">
                                                    <span>29 sept,2022</span>
                                                    <span class="ltr:ml-3 rtl:mr-3">3:01pm</span>
                                                </div>
                                                <div class="icons-mail">
                                                    <div class="flex justify-end items-center space-x-4 rtl:space-x-reverse">
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-mail-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            mark as read
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-delete-bin-6-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            delete
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-time-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            Snooze
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-archive-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            archive
                                                        </span>
                                                        </a>
                                                    </div>
                                                    </div>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="mail-list hover:bg-gray-100 dark:hover:bg-black/20" onclick="changeTheInfo('3','Wiley Waites','WileyWaites2022@gmail.com','Heres What You Missed This Task','Mon 29-09-2022 20:15')">
                                                <td class="py-3 ltr:!pl-4 rtl:!pr-4 ltr:!pr-3 rtl:!pl-3">
                                                <div class="flex items-center h-5 mail-checkbox">
                                                    <input id="hs-table-checkbox-14" type="checkbox" class="border-gray-500 ti-form-checkbox">
                                                    <label for="hs-table-checkbox-14" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-star-line text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3"><i class="ri ri-price-tag-3-line text-yellow-500 dark:text-yellow-500 hover:text-yellow-500"></i></td>
                                                <td class="!px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-xs ring-0 rounded-full" src="{{asset('build/assets/img/users/3.jpg')}}" alt="avatar">
                                                    <p class="text-slate-700 font-semibold text-sm dark:text-white my-auto">
                                                    Wiley Waites
                                                    </p>
                                                </div>
                                                </td>
                                                <td class="font-medium !px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-2 rtl:space-x-reverse mail-main">
                                                    <span class="whitespace-nowrap inline-block py-0 px-2 rounded-sm text-xs font-medium border border-primary bg-primary/30 text-primary">Celebration</span>
                                                    <span class="text-xs text-gray-500 dark:text-white/70">
                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque porro id&#128523;&#128526;, laboriosam, laudantium corporis voluptatum aliquid temporibus accusamus inventore accusantium necessitatibus repellendus natus ipsam quasi, vitae itaque dolorum animi quod!
                                                    </span>
                                                </div>
                                                </td>
                                                <td class="!px-3"></td>
                                                <td class="!px-3 w-44">
                                                <div class="icons-mail2 text-gray-500 dark:text-white/70">
                                                    <span>29 sept,2022</span>
                                                    <span class="ltr:ml-3 rtl:mr-3">5:30am</span>
                                                </div>
                                                <div class="icons-mail">
                                                    <div class="flex justify-end items-center space-x-4 rtl:space-x-reverse">
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-mail-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            mark as read
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-delete-bin-6-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            delete
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-time-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            Snooze
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-archive-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            archive
                                                        </span>
                                                        </a>
                                                    </div>
                                                    </div>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="mail-list hover:bg-gray-100 dark:hover:bg-black/20" onclick="changeTheInfo('4','Alica Nestle','AlicaNestle2022@gmail.com',' Travel by spruko','Sun 28-09-2022 02:15')">
                                                <td class="py-3 ltr:!pl-4 rtl:!pr-4 ltr:!pr-3 rtl:!pl-3">
                                                <div class="flex items-center h-5 mail-checkbox">
                                                    <input id="hs-table-checkbox-15" type="checkbox" class="border-gray-500 ti-form-checkbox">
                                                    <label for="hs-table-checkbox-15" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-star-line text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3"><i class="ri ri-price-tag-3-line  text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-xs ring-0 rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}" alt="avatar">
                                                    <p class="text-slate-700 font-semibold text-sm dark:text-white my-auto">
                                                    Alica Nestle
                                                    </p>
                                                </div>
                                                </td>
                                                <td class="font-medium !px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mail-main truncate mb-2">
                                                &#129321;&#129321;Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis neque enim magnam eum molestias dolore, repudiandae ipsa voluptate sapiente, ullam maiores? Culpa rerum obcaecati tenetur provident dignissimos nobis enim omnis.
                                                </p>
                                                <div class="flex space-x-3 rtl:space-x-reverse mt-2">
                                                    <a class="py-1 px-3 space-x-2 rtl:space-x-reverse relative inline-flex flex-shrink-0 justify-center items-center rounded-full border font-normal bg-gray-100 text-gray-700 shadow-sm align-middle hover:bg-gray-50 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:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" href="javascript:void(0);">
                                                    <i class="ri ri-image-line text-xs"></i>
                                                    <span>Image01..._jpg</span>
                                                    </a>
                                                    <a class="py-1 px-3 space-x-2 rtl:space-x-reverse relative inline-flex flex-shrink-0 justify-center items-center rounded-full border font-normal bg-gray-100 text-gray-700 shadow-sm align-middle hover:bg-gray-50 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:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" href="javascript:void(0);">
                                                    <i class="ri ri-file-line text-xs"></i>
                                                    <span>Document.docx</span>
                                                    </a>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-send-plane-line text-gray-500 dark:text-white/70"></i></td>
                                                <td class="!px-3 w-44">
                                                <div class="icons-mail2 text-gray-500 dark:text-white/70">
                                                    <span>27 sept,2022</span>
                                                    <span class="ltr:ml-3 rtl:mr-3">6:30pm</span>
                                                </div>
                                                <div class="icons-mail">
                                                    <div class="flex justify-end items-center space-x-4 rtl:space-x-reverse">
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-mail-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            mark as read
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-delete-bin-6-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            delete
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-time-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            Snooze
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-archive-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            archive
                                                        </span>
                                                        </a>
                                                    </div>
                                                    </div>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="mail-list hover:bg-gray-100 dark:hover:bg-black/20" onclick="changeTheInfo('21','Edgardo Huel','EdgardoHuel2022@gmail.com',' Metting by spruko','Sat 27-09-2022 02:15')">
                                                <td class="py-3 ltr:!pl-4 rtl:!pr-4 ltr:!pr-3 rtl:!pl-3">
                                                <div class="flex items-center h-5 mail-checkbox">
                                                    <input id="hs-table-checkbox-16" type="checkbox" class="border-gray-500 ti-form-checkbox">
                                                    <label for="hs-table-checkbox-16" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-star-line text-yellow-500 dark:text-yellow-500 hover:text-yellow-500"></i></td>
                                                <td class="!px-3"><i class="ri ri-price-tag-3-line  text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <span class="avatar avatar-xs ring-0 rounded-full bg-primary leading-none p-2 text-center text-lg text-white">E</span>
                                                    <p class="text-slate-700 font-semibold text-sm dark:text-white my-auto">
                                                    Edgardo Huel
                                                    </p>
                                                </div>
                                                </td>
                                                <td class="font-medium !px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-2 rtl:space-x-reverse mail-main">
                                                    <span class="whitespace-nowrap inline-block py-0 px-2 rounded-sm text-xs font-medium border border-success bg-success/30 text-success">Clients</span>
                                                    <span class="text-xs text-gray-500 dark:text-white/70">
                                                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo in repellendus ipsum, deleniti nobis asperiores natus quidem possimus, harum dicta autem. Sequi eaque, eligendi quis recusandae voluptatem dignissimos a facere?
                                                    </span>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-links-line text-gray-500 dark:text-white/70"></i></td>
                                                <td class="!px-3 w-44">
                                                <div class="icons-mail2 text-gray-500 dark:text-white/70">
                                                    <span>27 sept,2022</span>
                                                    <span class="ltr:ml-3 rtl:mr-3">6:30pm</span>
                                                </div>
                                                <div class="icons-mail">
                                                    <div class="flex justify-end items-center space-x-4 rtl:space-x-reverse">
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-mail-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            mark as read
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-delete-bin-6-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            delete
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-time-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            Snooze
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-archive-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            archive
                                                        </span>
                                                        </a>
                                                    </div>
                                                    </div>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="mail-list hover:bg-gray-100 dark:hover:bg-black/20" onclick="changeTheInfo('5','Willie Makit','Williemakit2022@gmail.com',' Celebration With spruko','Fri 26-09-2022 15:15')">
                                                <td class="py-3 ltr:!pl-4 rtl:!pr-4 ltr:!pr-3 rtl:!pl-3">
                                                <div class="flex items-center h-5 mail-checkbox">
                                                    <input id="hs-table-checkbox-17" type="checkbox" class="border-gray-500 ti-form-checkbox">
                                                    <label for="hs-table-checkbox-17" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-star-line text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3"><i class="ri ri-price-tag-3-line text-yellow-500 dark:text-yellow-500 hover:text-yellow-500"></i></td>
                                                <td class="!px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-xs ring-0 rounded-full" src="{{asset('build/assets/img/users/5.jpg')}}" alt="avatar">
                                                    <p class="text-slate-700 font-semibold text-sm dark:text-white my-auto">
                                                    Willie Makit
                                                    </p>
                                                </div>
                                                </td>
                                                <td class="font-medium !px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mail-main truncate mb-2">
                                                    &#127874; Lorem ipsum dolor sit amet consectetur adipisicing elit. Error itaque officiis officia recusandae sapiente nam cupiditate voluptatibus dolorum voluptas commodi veritatis fuga inventore ipsam, illo nulla modi ipsa qui obcaecati.
                                                </p>
                                                <div class="flex mt-2">
                                                    <a class="py-1 px-3 space-x-2 rtl:space-x-reverse relative inline-flex flex-shrink-0 justify-center items-center rounded-full border font-normal bg-gray-100 text-gray-700 shadow-sm align-middle hover:bg-gray-50 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:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" href="javascript:void(0);">
                                                    <i class="ri ri-image-line text-xs"></i>
                                                    <span>Image02..._jpg</span>
                                                    </a>
                                                </div>
                                                </td>
                                                <td class="!px-3"></td>
                                                <td class="!px-3 w-44">
                                                <div class="icons-mail2 text-gray-500 dark:text-white/70">
                                                    <span>27 sept,2022</span>
                                                    <span class="ltr:ml-3 rtl:mr-3">6:30pm</span>
                                                </div>
                                                <div class="icons-mail">
                                                    <div class="flex justify-end items-center space-x-4 rtl:space-x-reverse">
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-mail-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            mark as read
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-delete-bin-6-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            delete
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-time-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            Snooze
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-archive-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            archive
                                                        </span>
                                                        </a>
                                                    </div>
                                                    </div>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="mail-list hover:bg-gray-100 dark:hover:bg-black/20" onclick="changeTheInfo('6','Katherina Kat','KatherinaKat2022@gmail.com',' Cilents for spruko','Fri 26-09-2022 15:15')">
                                                <td class="py-3 ltr:!pl-4 rtl:!pr-4 ltr:!pr-3 rtl:!pl-3">
                                                <div class="flex items-center h-5 mail-checkbox">
                                                    <input id="hs-table-checkbox-18" type="checkbox" class="border-gray-500 ti-form-checkbox">
                                                    <label for="hs-table-checkbox-18" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-star-line text-yellow-500 dark:text-yellow-500 hover:text-yellow-500"></i></td>
                                                <td class="!px-3"><i class="ri ri-price-tag-3-line   text-yellow-500 dark:text-yellow-500 hover:text-yellow-500"></i></td>
                                                <td class="!px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-xs ring-0 rounded-full" src="{{asset('build/assets/img/users/6.jpg')}}" alt="avatar">
                                                    <p class="text-slate-700 font-semibold text-sm dark:text-white my-auto">
                                                    Katherina Kat
                                                    </p>
                                                </div>
                                                </td>
                                                <td class="font-medium !px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mail-main truncate">
                                                    &#128589;&#128092; Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum impedit accusantium iste praesentium culpa ipsa sequi molestiae tenetur, consequatur natus aliquid quos eum. Ratione, pariatur recusandae! Labore obcaecati laborum aut.
                                                </p>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-attachment-2 text-gray-500 dark:text-white/70"></i></td>
                                                <td class="!px-3 w-44">
                                                <div class="icons-mail2 text-gray-500 dark:text-white/70">
                                                    <span>27 sept,2022</span>
                                                    <span class="ltr:ml-3 rtl:mr-3">6:30pm</span>
                                                </div>
                                                <div class="icons-mail">
                                                    <div class="flex justify-end items-center space-x-4 rtl:space-x-reverse">
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-mail-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            mark as read
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-delete-bin-6-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            delete
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-time-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            Snooze
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-archive-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            archive
                                                        </span>
                                                        </a>
                                                    </div>
                                                    </div>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="mail-list bg-gray-100 hover:bg-gray-100 dark:bg-black/20 dark:hover:bg-black/20" onclick="changeTheInfo('21','Ben Dover','BenDover2022@gmail.com','Socail activites by spruko','Thurs 25-09-2022 20:15')">
                                                <td class="py-3 ltr:!pl-4 rtl:!pr-4 ltr:!pr-3 rtl:!pl-3">
                                                <div class="flex items-center h-5 mail-checkbox">
                                                    <input id="hs-table-checkbox-19" type="checkbox" class="border-gray-500 ti-form-checkbox">
                                                    <label for="hs-table-checkbox-19" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-star-line text-yellow-500 dark:text-yellow-500 hover:text-yellow-500"></i></td>
                                                <td class="!px-3"><i class="ri ri-price-tag-3-line  text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <span class="avatar avatar-xs ring-0 rounded-full bg-secondary leading-none  p-2 text-center text-lg text-white">B</span>
                                                    <p class="text-slate-700 font-semibold text-sm dark:text-white my-auto">
                                                    Ben Dover
                                                    </p>
                                                </div>
                                                </td>
                                                <td class="font-medium !px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-2 rtl:space-x-reverse mail-main">
                                                    <p class="text-xs text-gray-500 dark:text-white/70">
                                                    Kasd voluptua labore et justo ea &#128079; clita sit justo, rebum eos elitr duo sit et.
                                                    </p>
                                                    <span class="whitespace-nowrap inline-block py-0 px-2 rounded-sm text-xs font-medium border border-info bg-info/30 text-info">Social</span>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-send-plane-line text-gray-500 dark:text-white/70"></i></td>
                                                <td class="!px-3 w-44">
                                                <div class="icons-mail2 text-gray-500 dark:text-white/70">
                                                    <span>27 sept,2022</span>
                                                    <span class="ltr:ml-3 rtl:mr-3">6:30pm</span>
                                                </div>
                                                <div class="icons-mail">
                                                    <div class="flex justify-end items-center space-x-4 rtl:space-x-reverse">
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-mail-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            mark as read
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-delete-bin-6-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            delete
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-time-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            Snooze
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-archive-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            archive
                                                        </span>
                                                        </a>
                                                    </div>
                                                    </div>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="mail-list bg-gray-100 hover:bg-gray-100 dark:bg-black/20 dark:hover:bg-black/20" onclick="changeTheInfo('11','Benz Makit','BenzMakit2022@gmail.com','Socail activites by spruko','Thurs 25-09-2022 20:15')">
                                                <td class="py-3 ltr:!pl-4 rtl:!pr-4 ltr:!pr-3 rtl:!pl-3">
                                                <div class="flex items-center h-5 mail-checkbox">
                                                    <input id="hs-table-checkbox-2" type="checkbox" class="border-gray-500 ti-form-checkbox">
                                                    <label for="hs-table-checkbox-2" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-star-line text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3"><i class="ri ri-price-tag-3-line  text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-xs ring-0 rounded-full" src="{{asset('build/assets/img/users/11.jpg')}}" alt="avatar">
                                                    <p class="text-slate-700 font-semibold text-sm dark:text-white my-auto">
                                                    Benz Makit
                                                    </p>
                                                </div>
                                                </td>
                                                <td class="font-medium !px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                    <p class="text-xs text-gray-500 dark:text-white/70 mail-main">
                                                    Some quick example text to build on the card title and make up the card's content&#128522;.
                                                    </p>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-attachment-2 text-gray-500 dark:text-white/70"></i></td>
                                                <td class="!px-3 w-44">
                                                <div class="icons-mail2 text-gray-500 dark:text-white/70">
                                                    <span>27 sept,2022</span>
                                                    <span class="ltr:ml-3 rtl:mr-3">6:30pm</span>
                                                </div>
                                                <div class="icons-mail">
                                                    <div class="flex justify-end items-center space-x-4 rtl:space-x-reverse">
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-mail-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            mark as read
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-delete-bin-6-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            delete
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-time-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            Snooze
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-archive-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            archive
                                                        </span>
                                                        </a>
                                                    </div>
                                                    </div>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="mail-list bg-gray-100 hover:bg-gray-100 dark:bg-black/20 dark:hover:bg-black/20" onclick="changeTheInfo('12','Kat Itumay','KatItumay2022@gmail.com','Socail activites by spruko','Thurs 25-09-2022 20:15')">
                                                <td class="py-3 ltr:!pl-4 rtl:!pr-4 ltr:!pr-3 rtl:!pl-3">
                                                <div class="flex items-center h-5 mail-checkbox">
                                                    <input id="hs-table-checkbox-3" type="checkbox" class="border-gray-500 ti-form-checkbox">
                                                    <label for="hs-table-checkbox-3" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-star-line text-yellow-500 dark:text-yellow-500 hover:text-yellow-500"></i></td>
                                                <td class="!px-3"><i class="ri ri-price-tag-3-line  text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-xs ring-0 rounded-full" src="{{asset('build/assets/img/users/12.jpg')}}" alt="avatar">
                                                    <p class="text-slate-700 font-semibold text-sm dark:text-white my-auto">
                                                    Kat Itumay
                                                    </p>
                                                </div>
                                                </td>
                                                <td class="font-medium !px-3 relative overflow-hidden">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                    <p class="text-xs text-gray-500 dark:text-white/70 mail-main truncate">
                                                    &#128077;Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae doloremque tenetur? Velit, cum odit minima praesentium quia vel pariatur sapiente esse repellat fuga molestias libero provident qui nihil mollitia.
                                                    </p>
                                                </td>
                                                <td class="!px-3"></td>

                                                <td class="!px-3 w-44">
                                                <div class="icons-mail2 text-gray-500 dark:text-white/70">
                                                    <span>27 sept,2022</span>
                                                    <span class="ltr:ml-3 rtl:mr-3">6:30pm</span>
                                                </div>
                                                <div class="icons-mail">
                                                    <div class="flex justify-end items-center space-x-4 rtl:space-x-reverse">
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-mail-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            mark as read
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-delete-bin-6-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            delete
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-time-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            Snooze
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-archive-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            archive
                                                        </span>
                                                        </a>
                                                    </div>
                                                    </div>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="mail-list hover:bg-gray-100 dark:hover:bg-black/20" onclick="changeTheInfo('8','Wiley Dover','Wileydover2022@gmail.com','Socail activites by spruko','Thurs 25-09-2022 20:15')">
                                                <td class="py-3 ltr:!pl-4 rtl:!pr-4 ltr:!pr-3 rtl:!pl-3">
                                                <div class="flex items-center h-5 mail-checkbox">
                                                    <input id="hs-table-checkbox-1" type="checkbox" class="border-gray-500 ti-form-checkbox">
                                                    <label for="hs-table-checkbox-1" class="sr-only">Checkbox</label>
                                                </div>
                                                </td>
                                                <td class="!px-3"><i class="ri ri-star-line text-gray-500 dark:text-white/70 hover:text-yellow-500"></i></td>
                                                <td class="!px-3"><i class="ri ri-price-tag-3-line text-yellow-500 dark:text-yellow-500 hover:text-yellow-500"></i></td>
                                                <td class="!px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-3 rtl:space-x-reverse">
                                                    <img class="avatar avatar-xs ring-0 rounded-full" src="{{asset('build/assets/img/users/8.jpg')}}" alt="avatar">
                                                    <p class="text-slate-700 font-semibold text-sm dark:text-white my-auto">
                                                    Wiley Dover
                                                    </p>
                                                </div>
                                                </td>
                                                <td class="font-medium !px-3 relative">
                                                <a aria-label="anchor" class="mail-link before:absolute before:inset-x-0 before:top-0 before:bottom-0 before:z-1" href="javascript:void(0);"></a>
                                                <div class="flex space-x-2 rtl:space-x-reverse mail-main">
                                                    <span class="whitespace-nowrap inline-block py-0 px-2 rounded-sm text-xs font-medium border border-danger bg-danger/30 text-danger">Work</span>
                                                    <span class="text-xs text-gray-500 dark:text-white/70">
                                                        Lorem consetetur nonumy sed dolores eos dolores dolores, &#127881; sit et labore.
                                                    </span>
                                                </div>
                                                </td>
                                                <td class="!px-3"></td>
                                                <td class="!px-3 w-44">
                                                <div class="icons-mail2 text-gray-500 dark:text-white/70">
                                                    <span>27 sept,2022</span>
                                                    <span class="ltr:ml-3 rtl:mr-3">6:30pm</span>
                                                </div>
                                                <div class="icons-mail">
                                                    <div class="flex justify-end items-center space-x-4 rtl:space-x-reverse">
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-mail-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            mark as read
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-delete-bin-6-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            delete
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-time-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            Snooze
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="hs-tooltip ti-main-tooltip">
                                                        <a href="javascript:void(0);" class="hs-tooltip-toggle text-base text-gray-500 dark:text-white/70">
                                                        <i class="ri-archive-line"></i>
                                                        <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                            archive
                                                        </span>
                                                        </a>
                                                    </div>
                                                    </div>
                                                </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                    <div class="box-footer bg-transparent">
                                        <nav class="flex justify-end items-center space-x-2 rtl:space-x-reverse">
                                        <a class="w-10 h-10 text-gray-500 dark:text-white/70 text-sm justify-center bg-gray-100 dark:bg-black/20 hover:text-primary p-2 inline-flex items-center gap-2 rounded-full" href="javascript:void(0);">
                                            <span aria-hidden="true">«</span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="w-10 h-10 bg-primary text-white p-2 inline-flex items-center text-sm justify-center font-medium rounded-full" href="javascript:void(0);" aria-current="page">1</a>
                                        <a class="w-10 h-10 bg-gray-100 dark:bg-black/20 text-gray-500 dark:text-white/70 hover:text-primary p-2 inline-flex items-center text-sm justify-center font-medium rounded-full" href="javascript:void(0);">2</a>
                                        <a class="w-10 h-10 bg-gray-100 dark:bg-black/20 text-gray-500 dark:text-white/70 hover:text-primary p-2 inline-flex items-center text-sm justify-center font-medium rounded-full" href="javascript:void(0);">3</a>
                                        <a class="w-10 h-10 text-gray-500 dark:text-white/70 text-sm justify-center bg-gray-100 dark:bg-black/20 hover:text-primary p-2 inline-flex items-center gap-2 rounded-full" href="javascript:void(0);">
                                            <span class="sr-only">Next</span>
                                            <span aria-hidden="true">»</span>
                                        </a>
                                        </nav>
                                    </div>
                                    </div>
                                    <div class="box mail-view hidden">
                                    <div class="px-4 box-header bg-transparent">
                                        <div class="md:flex items-center justify-between">
                                        <div class="sm:flex space-x-5 rtl:space-x-reverse">
                                            <div class="sm:flex space-x-5 rtl:space-x-reverse">
                                            <div class="hs-tooltip ti-main-tooltip">
                                                <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70 mail-btn">
                                                <i class="ri-arrow-left-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Back To Inbox
                                                </span>
                                                </a>
                                            </div>
                                            <div class="hs-tooltip ti-main-tooltip">
                                                <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70">
                                                <i class="ri-inbox-archive-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Archive
                                                </span>
                                                </a>
                                            </div>
                                            <div class="hs-tooltip ti-main-tooltip">
                                                <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70">
                                                <i class="ri-spam-2-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Report Spam
                                                </span>
                                                </a>
                                            </div>
                                            <div class="hs-tooltip ti-main-tooltip">
                                                <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70">
                                                <i class="ri-delete-bin-6-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Move To Trash
                                                </span>
                                                </a>
                                            </div>
                                            <div class="hs-tooltip ti-main-tooltip">
                                                <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70">
                                                <i class="ri-mail-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Unread
                                                </span>
                                                </a>
                                            </div>
                                            <div class="hs-dropdown ti-dropdown hs-tooltip ti-main-tooltip">
                                                <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70" id="snooze-drop1">
                                                <i class="ri-time-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Snooze
                                                </span>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu "
                                                aria-labelledby="snooze-drop1">
                                                <div class="ti-dropdown-divider">
                                                    <span class="ti-dropdown-title">
                                                        Snooze Untill
                                                    </span>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        Today
                                                    </a>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        Tomorrow
                                                    </a>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        This week
                                                    </a>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        This weekend
                                                    </a>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        Next weekend
                                                    </a>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        Select Date
                                                    </a>
                                                </div>
                                                </div>
                                            </div>
                                            <div class="hs-tooltip ti-main-tooltip">
                                                <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70">
                                                <i class="ri-add-circle-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Add Task
                                                </span>
                                                </a>
                                            </div>
                                            <div class="hs-dropdown ti-dropdown hs-tooltip ti-main-tooltip">
                                                <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70" id="move-drop">
                                                <i class="ri-share-box-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Move-to
                                                </span>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu "
                                                aria-labelledby="move-drop">
                                                <div class="ti-dropdown-divider">
                                                    <span class="ti-dropdown-title">
                                                        Move-to
                                                    </span>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        <i class="ri-inbox-line"></i> Inbox
                                                    </a>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        <i class="ri-archive-line"></i> Archive
                                                    </a>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        <i class="ri-draft-line"></i> Drafts
                                                    </a>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        <i class="ri-send-plane-line"></i>Sent
                                                    </a>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        <i class="ri-mail-star-line"></i>Starred
                                                    </a>
                                                    <a class="ti-dropdown-item" href="javascript:void(0);">
                                                        <i class="ri-delete-bin-line"></i>Trash
                                                    </a>
                                                </div>
                                                </div>
                                            </div>
                                            <div class="hs-dropdown ti-dropdown hs-tooltip ti-main-tooltip">
                                                <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70" id="label-drop">
                                                <i class="ri-price-tag-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1771px, -358px);">
                                                Label
                                                </span>
                                                </a>
                                                <div class="hs-dropdown-menu ti-dropdown-menu"
                                                aria-labelledby="label-drop">
                                                <div class="ti-dropdown-divider">
                                                    <span class="ti-dropdown-title">
                                                        Label as
                                                    </span>
                                                    <div class="relative flex items-start py-2 px-3 rounded-sm hover:bg-gray-100 dark:hover:bg-black/20">
                                                        <div class="flex items-center h-5 mt-1">
                                                            <input id="mail-label" name="mail-label" type="checkbox" class="ti-form-checkbox">
                                                        </div>
                                                        <label for="mail-label" class="ltr:ml-3.5 rtl:mr-3.5 my-auto">
                                                            <span class="block text-sm font-semibold text-gray-800 dark:text-white/70">Notes</span>
                                                        </label>
                                                    </div>
                                                    <div class="relative flex items-start py-2 px-3 rounded-sm hover:bg-gray-100 dark:hover:bg-black/20">
                                                        <div class="flex items-center h-5 mt-1">
                                                            <input id="mail-label2" name="mail-label2" type="checkbox" class="ti-form-checkbox">
                                                        </div>
                                                        <label for="mail-label2" class="ltr:ml-3.5 rtl:mr-3.5 my-auto">
                                                            <span class="block text-sm font-semibold text-gray-800 dark:text-white/70">Personals</span>
                                                        </label>
                                                    </div>
                                                    <div class="relative flex items-start py-2 px-3 rounded-sm hover:bg-gray-100 dark:hover:bg-black/20">
                                                        <div class="flex items-center h-5 mt-1">
                                                            <input id="mail-label3" name="mail-label3" type="checkbox" class="ti-form-checkbox">
                                                        </div>
                                                        <label for="mail-label3" class="ltr:ml-3.5 rtl:mr-3.5 my-auto">
                                                            <span class="block text-sm font-semibold text-gray-800 dark:text-white/70">Receipts</span>
                                                        </label>
                                                    </div>
                                                    <div class="relative flex items-start py-2 px-3 rounded-sm hover:bg-gray-100 dark:hover:bg-black/20">
                                                        <div class="flex items-center h-5 mt-1">
                                                            <input id="mail-label4" name="mail-label4" type="checkbox" class="ti-form-checkbox">
                                                        </div>
                                                        <label for="mail-label4" class="ltr:ml-3.5 rtl:mr-3.5 my-auto">
                                                            <span class="block text-sm font-semibold text-gray-800 dark:text-white/70">Work</span>
                                                        </label>
                                                    </div>
                                                </div>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        <div class="flex space-x-5 rtl:space-x-reverse">
                                            <div class=" text-gray-500 dark:text-white/70 leading-[0] my-auto">
                                            <span class="current-page text-base leading-[0] font-semibold">1</span>
                                            <span class="mx-1">Of</span>
                                            <span class="total text-base leading-[0] font-semibold">10</span>
                                            </div>
                                            <div class="opacity-60 text-gray-500 dark:text-white/70 leading-[0]">
                                            <button aria-label="button" type="button" class="ti-btn p-0 m-0 focus:ring-0 focus:shadow-none focus:ring-offset-0">
                                            <i class="ri ri-arrow-left-s-line rtl:rotate-180 leading-none text-lg"></i>
                                            </button>
                                            </div>
                                            <div class=" text-gray-500 dark:text-white/70 leading-[0]">
                                            <button aria-label="button" type="button" class="ti-btn p-0 m-0 focus:ring-0 focus:shadow-none focus:ring-offset-0">
                                            <i class="ri ri-arrow-right-s-line leading-none text-lg rtl:rotate-180"></i>
                                            </button>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box-header border-b-0 pb-0 bg-transparent">
                                        <div class="sm:flex justify-between mb-3">
                                        <div class="flex items-center space-x-4 rtl:space-x-reverse">
                                            <div class="flex">
                                                <img class="avatar avatar-lg ring-0 rounded-sm mail-img" src="{{asset('build/assets/img/users/1.jpg')}}" alt="avatar">
                                            </div>
                                            <div>
                                            <p class="text-slate-700 text-xs dark:text-white/50 mail-date">
                                            Mon 26-09-2022 15:56
                                            </p>
                                            <p class="text-lg">
                                                <span class="mail-name">Json Taylor</span>
                                                <span class="text-xs text-gray-500 dark:text-white/70 mail-email">(JsonTaylor2022@gmail.com)</span>
                                            </p>
                                            <p class="text-sm font-semibold text-primary mail-subject">
                                            Important Notice
                                            </p>
                                            </div>
                                        </div>
                                        <div class="flex space-x-4 rtl:space-x-reverse my-auto">
                                            <div class="hs-tooltip ti-main-tooltip">
                                            <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70">
                                                <i class="ri-printer-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip">
                                                Printer
                                                </span>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip ti-main-tooltip">
                                            <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70">
                                                <i class="ri-reply-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip">
                                                Reply
                                                </span>
                                            </a>
                                            </div>
                                            <div class="hs-tooltip ti-main-tooltip">
                                            <a href="javascript:void(0);" class="hs-tooltip-toggle text-lg text-gray-500 dark:text-white/70">
                                                <i class="ri-star-line"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip">
                                                Starred
                                                </span>
                                            </a>
                                            </div>
                                            <div class="hs-dropdown ti-dropdown hs-tooltip ti-main-tooltip">
                                            <button id="hs-dropdown-custom-icon-trigger" type="button" class="hs-tooltip-toggle text-lg text-gray-500 hs-dropdown-toggle p-0 ti-dropdown-toggle border-0 shadow-none focus:ring-0 focus:shadow-none">
                                                <i class="ri-more-2-fill"></i>
                                                <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip">
                                                View More
                                                </span>
                                            </button>
                                            <div class="hs-dropdown-menu ti-dropdown-menu" aria-labelledby="hs-dropdown-custom-icon-trigger">
                                                <a class="ti-dropdown-item" href="javascript:void(0);">
                                                    Read
                                                </a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);">
                                                    Unread
                                                </a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);">
                                                    Spam
                                                </a>
                                                <a class="ti-dropdown-item" href="javascript:void(0);">
                                                    None
                                                </a>
                                            </div>
                                        </div>
                                        </div>
                                        </div>
                                        <div class="flex space-x-4 rtl:space-x-reverse">
                                        <span class="text-xs font-semibold">To : </span>
                                        <span class="text-xs">WileyWaites@gmail.com</span>
                                        </div>
                                        <div class="flex space-x-4 rtl:space-x-reverse">
                                        <span class="text-xs font-semibold">CC : </span>
                                        <span class="text-xs">SocratesItumay@gmail.com</span>
                                        </div>
                                    </div>
                                    <div class="box-body">
                                        <h3 class="text-lg mb-3">Hi Sir/Madam</h3>
                                        <p class="mb-5 text-sm">Clita est et no tempor tempor aliquyam, et aliquyam voluptua duo labore. Sanctus sed magna et amet. Ipsum ipsum consetetur consetetur labore est sadipscing et ea eirmod. Rebum amet consetetur duo no gubergren sanctus. Erat.</p>
                                        <p class="mb-5 text-sm">Erat takimata no sea ut diam voluptua et, lorem ut consetetur eirmod sadipscing et dolore vero accusam, labore nonumy no takimata clita at magna et. Dolores aliquyam ipsum est elitr. Et ipsum voluptua ut sea diam sanctus no elitr ipsum aliquyam, dolor et amet sit eirmod labore stet, sed sit.</p>
                                        <p class="mb-5 text-sm">Voluptua erat et duo consetetur et et tempor. Lorem sed sed et labore duo, amet aliquyam rebum aliquyam sed kasd. Ea ut invidunt vero et.</p>
                                        <p class="mb-5">Thanking you</p>
                                        <hr class="border-gray-200 dark:border-white/10 mb-5">
                                        <div class="sm:grid grid-cols-12 gap-6 sm:space-y-0 space-y-5">
                                        <div class="col-span-12 xxl:col-span-2 md:col-span-4">
                                            <div class="border dark:border-white/10 rounded-sm overflow-hidden">
                                            <a href="javascript:void(0);" class="p-3 relative block text-center">
                                                <img src="{{asset('build/assets/img/gallery/3.jpg')}}" class="rounded-sm w-full" alt="Image Description">
                                                <div class="mt-3 inline-flex">
                                                <span>Download</span><i class="ri ri-download-2-line ltr:ml-3 rtl:mr-3"></i>
                                                </div>
                                            </a>
                                            </div>
                                        </div>
                                        <div class="col-span-12 xxl:col-span-2 md:col-span-4">
                                            <div class="border dark:border-white/10 rounded-sm overflow-hidden">
                                            <a href="javascript:void(0);" class="p-3 relative block text-center">
                                                <img src="{{asset('build/assets/img/gallery/1.jpg')}}" class="rounded-sm w-full" alt="Image Description">
                                                <div class="mt-3 inline-flex">
                                                <span>Download</span><i class="ri ri-download-2-line ltr:ml-3 rtl:mr-3"></i>
                                                </div>
                                            </a>
                                            </div>
                                        </div>
                                        <div class="col-span-12 xxl:col-span-2 md:col-span-4">
                                            <div class="border dark:border-white/10 rounded-sm overflow-hidden">
                                            <a href="javascript:void(0);" class="p-3 relative block text-center">
                                                <img src="{{asset('build/assets/img/gallery/2.jpg')}}" class="rounded-sm w-full" alt="Image Description">
                                                <div class="mt-3 inline-flex">
                                                <span>Download</span><i class="ri ri-download-2-line ltr:ml-3 rtl:mr-3"></i>
                                                </div>
                                            </a>
                                        </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box-footer bg-transparent flex justify-between">
                                        <button type="submit" class="py-2 px-3 ti-btn ti-btn-primary">
                                        <i class="ri ri-arrow-go-back-line ltr:mr-2 rtl:ml-2"></i>Reply
                                    </button>
                                        <button type="button" class="py-2 px-3 ti-btn ti-btn-danger">
                                        <i class="ri ri-arrow-go-forward-line ltr:mr-2 rtl:ml-2"></i>Forward
                                        </button>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-1 -->

                            <!--  Start:: Mail Compose Modal-->
                            <div id="mail-compose" class="hs-overlay hidden ti-modal">
                                <div class="hs-overlay-open:!mt-7 !mt-14 ease-out ti-modal-box">
                                    <div class="ti-modal-content">
                                    <div class="ti-modal-header">
                                        <h3 class="ti-modal-title">
                                        New message
                                        </h3>
                                        <div class="">
                                        <button aria-label="button" type="button" class="ti-modal-max-screen">
                                            <i class="ri-fullscreen-line"></i>
                                        </button>
                                        <button aria-label="button" type="button" class="ti-modal-min-screen">
                                            <i class="ri-fullscreen-exit-line"></i>
                                        </button>
                                        <button type="button" class="hs-dropdown-toggle ti-modal-close-btn"
                                            data-hs-overlay="#mail-compose">
                                            <span class="sr-only">Close</span>
                                            <i class="ri-close-line"></i>
                                        </button>
                                        </div>
                                    </div>
                                    <div class="ti-modal-body">
                                        <div class="space-y-3">
                                        <div class="flex rounded-sm shadow-sm mail-to">
                                            <input type="email" class="ti-form-input  ltr:rounded-r-none rtl:rounded-l-none focus:z-10" placeholder="To" required>
                                            <div class="btn-cc px-4 inline-flex items-center min-w-fit border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10">
                                            <span class="text-sm text-gray-500 dark:text-white/70">CC</span>
                                            </div>
                                            <div class="btn-bcc px-4 inline-flex items-center min-w-fit  ltr:rounded-r-sm rtl:rounded-l-sm border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10">
                                            <span class="text-sm text-gray-500 dark:text-white/70">BCC</span>
                                            </div>
                                        </div>
                                        <div class="flex rounded-sm shadow-sm hidden mail-cc">
                                            <input type="email" class="ti-form-input  ltr:rounded-r-none rtl:rounded-l-none focus:z-10" placeholder="CC" required>
                                            <div class="btn-cc-bcc px-4 inline-flex items-center min-w-fit  ltr:rounded-r-sm rtl:rounded-l-sm border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10">
                                            <span class="text-sm text-gray-500 dark:text-white/70">BCC</span>
                                            </div>
                                        </div>
                                        <div class="flex rounded-sm shadow-sm hidden mail-bcc">
                                            <input type="email" class="ti-form-input  ltr:rounded-r-none rtl:rounded-l-none focus:z-10" placeholder="Bcc" required>
                                            <div class="btn-bcc-cc px-4 inline-flex items-center min-w-fit  ltr:rounded-r-sm rtl:rounded-l-sm border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10">
                                            <span class="text-sm text-gray-500 dark:text-white/70">Cc</span>
                                            </div>
                                        </div>
                                        <input type="text" id="input-label" class="ti-form-input focus-visible:outline-none" placeholder="Subject">
                                        <textarea class="ti-form-input" rows="10" placeholder="Type Your Message Here ......."></textarea>
                                        </div>
                                    </div>
                                    <div class="ti-modal-footer !block">
                                        <div class="sm:flex items-center justify-between">
                                        <div class="flex items-center space-x-1 rtl:space-x-reverse">
                                            <a aria-label="anchor" href="javascript:void(0);" class="text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i class="text-lg ri ri-attachment-2"></i></a>
                                            <a aria-label="anchor" href="javascript:void(0);" class="text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i class="text-lg ri ri-links-line"></i></a>
                                            <a aria-label="anchor" href="javascript:void(0);" class="text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i class="text-lg ri ri-image-line"></i></a>
                                            <a aria-label="anchor" href="javascript:void(0);" class="text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i class="text-lg ri ri-printer-line"></i></a>
                                            <a aria-label="anchor" href="javascript:void(0);" class="text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-sm bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i class="text-lg ri ri-delete-bin-6-line"></i></a>
                                        </div>
                                        <div class="">
                                            <button type="submit" class="py-2 px-3 ti-btn ti-btn-primary ltr:float-right rtl:float-left">
                                            Send
                                        </button>
                                        <button type="button" class="hs-dropdown-toggle ti-btn ti-border font-medium 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"
                                            data-hs-overlay="#mail-compose">
                                            Cancel
                                        </button>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!--  End:: Mail Compose Modal-->

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

                    </div>

@endsection

@section('scripts')

        <!-- MAIL INBOX JS -->
        @vite('resources/assets/js/mail-inbox.js')
        
@endsection