@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"> CRM Dashboard</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);">
                                        Dashboards
                                        <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">
                                        CRM Dashboard
                                    </li>
                                </ol>
                            </div>
                            <!-- Page Header Close -->

                            <!-- Start::row-1 -->
                            <div class="grid grid-cols-12 gap-x-5">
                                <div class="col-span-12 xxl:col-span-9">
                                    <div class="grid grid-cols-12 gap-x-5">
                                    <div class="col-span-12 xl:col-span-4">
                                        <div class="box">
                                        <div class="box-body space-y-4">
                                            <div class="flex space-x-4 rtl:space-x-reverse justify-between items-center">
                                            <div>
                                                <p class="text-gray-500 dark:text-white/70 text-base mb-2">Total Customers</p>
                                                <div class="flex items-center">
                                                <h5 class="text-gray-800 dark:text-white text-2xl font-semibold">1,1125</h5>
                                                <span class="text-success text-sm ltr:ml-2 rtl:mr-2"><i
                                                    class="ti ti-arrow-up-right"></i>+12.86%</span>
                                                </div>
                                            </div>
                                            <div>
                                                <span class="avatar rounded-sm bg-primary/20 p-3 text-primary">
                                                <i class="ti ti-users text-xl leading-none"></i>
                                                </span>
                                            </div>
                                            </div>
                                            <div class="flex items-center">
                                            <div class="ti-main-progress  h-2 bg-gray-200 dark:bg-black/20">
                                                <div class="ti-main-progress-bar bg-primary text-xs text-white text-center" role="progressbar" style="width:50%"
                                                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <span class="font-semibold text-sm ltr:ml-2 rtl:mr-2">50%</span>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="col-span-12 xl:col-span-4">
                                        <div class="box">
                                        <div class="box-body space-y-4">
                                            <div class="flex space-x-4 rtl:space-x-reverse justify-between items-center">
                                            <div>
                                                <p class="text-gray-500 dark:text-white/70 text-base mb-2">Total Deals</p>
                                                <div class="flex items-center">
                                                <h5 class="text-gray-800 dark:text-white text-2xl font-semibold">968</h5>
                                                <span class="text-success text-sm ltr:ml-2 rtl:mr-2"><i
                                                    class="ti ti-arrow-up-right"></i>+5.46%</span>
                                                </div>
                                            </div>
                                            <div>
                                                <span class="avatar rounded-sm bg-secondary/20 p-3 text-secondary">
                                                <i class="ti ti-briefcase  text-xl leading-none"></i>
                                                </span>
                                            </div>
                                            </div>
                                            <div class="flex items-center">
                                            <div class="ti-main-progress  h-2 bg-gray-200 dark:bg-black/20">
                                                <div class="ti-main-progress-bar bg-secondary text-xs text-white text-center" role="progressbar" style="width:80%"
                                                aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <span class="font-semibold text-sm ltr:ml-2 rtl:mr-2">80%</span>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="col-span-12 xl:col-span-4">
                                        <div class="box">
                                        <div class="box-body space-y-4">
                                            <div class="flex space-x-4 rtl:space-x-reverse justify-between items-center">
                                            <div>
                                                <p class="text-gray-500 dark:text-white/70 text-base mb-2">Conversion Ratio</p>
                                                <div class="flex items-center">
                                                <h5 class="text-gray-800 dark:text-white text-2xl font-semibold">12.08%</h5>
                                                <span class="text-success text-sm ltr:ml-2 rtl:mr-2"><i
                                                    class="ti ti-arrow-up-right"></i>+3.20%</span>
                                                </div>
                                            </div>
                                            <div>
                                                <span class="avatar rounded-sm bg-info/20 p-3 text-info">
                                                <i class="ti ti-wave-square text-xl leading-none"></i>
                                                </span>
                                            </div>
                                            </div>
                                            <div class="flex items-center">
                                            <div class="ti-main-progress  h-2 bg-gray-200 dark:bg-black/20">
                                                <div class="ti-main-progress-bar bg-info text-xs text-white text-center" role="progressbar" style="width:65%"
                                                aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <span class="font-semibold text-sm ltr:ml-2 rtl:mr-2">65%</span>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="col-span-12 lg:col-span-5">
                                        <div class="box">
                                        <div class="box-header">
                                            <div class="flex">
                                            <h5 class="box-title my-auto">Top Deals</h5>
                                            <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto">
                                                <button type="button" aria-label="button" class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100  focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10">
                                                <i class="text-sm leading-none ti ti-dots-vertical"></i> </button>
                                                <div class="hs-dropdown-menu ti-dropdown-menu">
                                                <a class="ti-dropdown-item" href="javascript:void(0)">Download</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0)">Import</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0)">Export</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        <div class="box-body">
                                            <ul class="flex flex-col">
                                            <li class="px-0 pt-0 ti-list-group border-0 text-gray-800 dark:text-white">
                                                <a href="javascript:void(0);" class="flex  justify-between items-center w-full">
                                                <div class="flex space-x-3 rtl:space-x-reverse w-full">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                                    <div class="flex w-full">
                                                    <div class="block my-auto">
                                                        <p class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto  dark:text-white dark:hover:text-gray-200">
                                                        Socrates Itumay</p>
                                                        <p class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal">
                                                        socratesitumay@gmail.com</p>
                                                    </div>
                                                    </div>
                                                </div>
                                                <div class=""><span class="text-sm font-bold">$1,835</span></div>
                                                </a>
                                            </li>
                                            <li class="px-0 pt-2 ti-list-group border-0 text-gray-800 dark:text-white">
                                                <a href="javascript:void(0);" class="flex  justify-between items-center w-full">
                                                <div class="flex space-x-3 rtl:space-x-reverse w-full">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/3.jpg')}}" alt="Image Description">
                                                    <div class="flex w-full">
                                                    <div class="block my-auto">
                                                        <p class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto  dark:text-white dark:hover:text-gray-200">
                                                        Json Taylor</p>
                                                        <p class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal">
                                                        jsontaylor2416@gmail.com</p>
                                                    </div>
                                                    </div>
                                                </div>
                                                <div class=""><span class="text-sm font-bold">$2,415</span></div>
                                                </a>
                                            </li>
                                            <li class="px-0 pt-2 ti-list-group border-0 text-gray-800 dark:text-white">
                                                <a href="javascript:void(0);" class="flex  justify-between items-center w-full">
                                                <div class="flex space-x-3 rtl:space-x-reverse w-full">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                                    <div class="flex w-full">
                                                    <div class="block my-auto">
                                                        <p class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto  dark:text-white dark:hover:text-gray-200">
                                                        Suzika Stallone</p>
                                                        <p class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal">
                                                        suzikastallone3214@gmail.com</p>
                                                    </div>
                                                    </div>
                                                </div>
                                                <div class=""><span class="text-sm font-bold">$2,341</span></div>
                                                </a>
                                            </li>
                                            <li class="px-0 pt-2 ti-list-group border-0 text-gray-800 dark:text-white">
                                                <a href="javascript:void(0);" class="flex  justify-between items-center w-full">
                                                <div class="flex space-x-3 rtl:space-x-reverse w-full">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/5.jpg')}}" alt="Image Description">
                                                    <div class="flex w-full">
                                                    <div class="block my-auto">
                                                        <p class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto  dark:text-white dark:hover:text-gray-200">
                                                        Angelina Hose</p>
                                                        <p class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal">
                                                        AngelinaHose3214@gmail.com</p>
                                                    </div>
                                                    </div>
                                                </div>
                                                <div class=""><span class="text-sm font-bold">2,624</span></div>
                                                </a>
                                            </li>
                                            <li class="px-0 pt-2 ti-list-group border-0 text-gray-800 dark:text-white">
                                                <a href="javascript:void(0);" class="flex  justify-between items-center w-full">
                                                <div class="flex space-x-3 rtl:space-x-reverse w-full">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/6.jpg')}}" alt="Image Description">
                                                    <div class="flex w-full">
                                                    <div class="block my-auto">
                                                        <p class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto  dark:text-white dark:hover:text-gray-200">
                                                        Selena Deoyl</p>
                                                        <p class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal">
                                                        selenadeoyl114@gmail.com</p>
                                                    </div>
                                                    </div>
                                                </div>
                                                <div class=""><span class="text-sm font-bold">$1,035</span></div>
                                                </a>
                                            </li>
                                            <li class="px-0 pt-2 pb-0 ti-list-group border-0 text-gray-800 dark:text-white">
                                                <a href="javascript:void(0);" class="flex  justify-between items-center w-full">
                                                <div class="flex space-x-3 rtl:space-x-reverse w-full">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/10.jpg')}}" alt="Image Description">
                                                    <div class="flex w-full">
                                                    <div class="block my-auto">
                                                        <p class="block text-sm font-semibold text-gray-800 hover:text-gray-900 my-auto  dark:text-white dark:hover:text-gray-200">
                                                        Charlie Davieson</p>
                                                        <p class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal">
                                                        charliedavieson@gmail.com</p>
                                                    </div>
                                                    </div>
                                                </div>
                                                <div class=""><span class="text-sm font-bold">$1,835</span></div>
                                                </a>
                                            </li>
                                            </ul>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="col-span-12 lg:col-span-7">
                                        <div class="box">
                                        <div class="box-header">
                                            <div class="flex">
                                            <h5 class="box-title my-auto">Revenue</h5>
                                            <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto">
                                                <button type="button" class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200  dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10">
                                                This Year <i class="ti ti-chevron-down"></i></button>
                                                <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                                                <a class="ti-dropdown-item" href="javascript:void(0)">This Week</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0)">This Month</a>
                                                <a class="ti-dropdown-item" href="javascript:void(0)">This Year</a>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        <div class="box-body">
                                            <ul class="md:flex block flex-wrap md:space-x-6 rtl:space-x-reverse">
                                            <li>
                                                <p class="inline-flex items-center">
                                                <span class="block w-3 h-3 rounded-full ltr:mr-2 rtl:ml-2 border-4 border-primary pointer-events-none"></span>
                                                <span class="flex items-center">
                                                    <span class="text-2xl text-gray-800 dark:text-white font-medium ltr:mr-2 rtl:ml-2 pointer-events-none">$12.36K</span>
                                                    <span class="text-sm text-gray-400 dark:text-white/80">/ Current Period</span>
                                                </span>
                                                </p>
                                            </li>
                                            <li>
                                                <p class="inline-flex items-center">
                                                <span class="block w-3 h-3 rounded-full ltr:mr-2 rtl:ml-2 border-4 border-gray-200 pointer-events-none"></span>
                                                <span class="flex items-center">
                                                    <span class="text-2xl text-gray-800 dark:text-white font-medium ltr:mr-2 rtl:ml-2 pointer-events-none">$8.25K</span>
                                                    <span class="text-sm text-gray-400 dark:text-white/80">/ Previous Period</span>
                                                </span>
                                                </p>
                                            </li>
                                            </ul>
                                            <div id="revenue"></div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xxl:col-span-3">
                                    <div class="box">
                                    <div class="box-header flex justify-between">
                                        <div class="box-title my-auto">
                                        Recent Activities
                                        </div>
                                        <div class=" block ltr:ml-auto rtl:mr-auto my-auto">
                                        <button type="button"
                                            class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200  dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10">
                                            View All</button>
                                        </div>
                                    </div>
                                    <div class="box-body">
                                        <ul class="list-unstyled mb-0 crm-recent-activity">
                                        <li class="crm-recent-activity-content">
                                            <div class="flex items-top">
                                                <div class="ltr:mr-3 rtl:ml-3">
                                                    <span class="avatar w-5 h-5 text-primary rounded-full inline-flex">
                                                        <i class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"></i>
                                                    </span>
                                                </div>
                                                <div class="crm-timeline-content">
                                                    <span class="font-semibold text-dark dark:text-white">Update of calendar events &amp;</span><span><a href="javascript:void(0);" class="text-primary font-semibold"> Added new events in next week.</a></span>
                                                </div>
                                                <div class="flex-auto text-end">
                                                    <span class="block text-gray-500 dark:text-white/70 text-xs opacity-70">4:45PM</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="crm-recent-activity-content">
                                            <div class="flex items-top">
                                                <div class="ltr:mr-3 rtl:ml-3">
                                                    <span class="avatar w-5 h-5 text-secondary rounded-full inline-flex">
                                                        <i class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"></i>
                                                    </span>
                                                </div>
                                                <div class="crm-timeline-content">
                                                    <span>New theme for <span class="font-semibold text-dark dark:text-white">Spruko Website</span> completed</span>
                                                    <span class="block fs-12 text-muted">Lorem ipsum, dolor sit amet.</span>
                                                </div>
                                                <div class="flex-auto text-end">
                                                    <span class="block text-gray-500 dark:text-white/70 text-xs opacity-70">3 hrs</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="crm-recent-activity-content">
                                            <div class="flex items-top">
                                                <div class="ltr:mr-3 rtl:ml-3">
                                                    <span class="avatar w-5 h-5 text-success rounded-full inline-flex">
                                                        <i class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"></i>
                                                    </span>
                                                </div>
                                                <div class="crm-timeline-content">
                                                    <span>Created a <span class="text-success font-semibold">New Task</span> today <span class="avatar w-5 h-5 bg-purple-transparent rounded-full inline-flex ms-1"><i class="ri-add-fill text-purple fs-12"></i></span></span>
                                                </div>
                                                <div class="flex-auto text-end">
                                                    <span class="block text-gray-500 dark:text-white/70 text-xs opacity-70">22 hrs</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="crm-recent-activity-content">
                                            <div class="flex items-top">
                                                <div class="ltr:mr-3 rtl:ml-3">
                                                    <span class="avatar w-5 h-5 text-danger rounded-full inline-flex">
                                                        <i class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"></i>
                                                    </span>
                                                </div>
                                                <div class="crm-timeline-content">
                                                    <span>New member <span class="badge bg-primary/20 text-primary p-1 rounded-sm">@andreas gurrero</span> added today to AI Summit.</span>
                                                </div>
                                                <div class="flex-auto text-end">
                                                    <span class="block text-gray-500 dark:text-white/70 text-xs opacity-70">Today</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="crm-recent-activity-content">
                                            <div class="flex items-top">
                                                <div class="ltr:mr-3 rtl:ml-3">
                                                    <span class="avatar w-5 h-5 text-warning rounded-full inline-flex">
                                                        <i class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"></i>
                                                    </span>
                                                </div>
                                                <div class="crm-timeline-content">
                                                    <span>32 New people joined summit.</span>
                                                </div>
                                                <div class="flex-auto text-end">
                                                    <span class="block text-gray-500 dark:text-white/70 text-xs opacity-70">22 hrs</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="crm-recent-activity-content">
                                            <div class="flex items-top">
                                                <div class="ltr:mr-3 rtl:ml-3">
                                                    <span class="avatar w-5 h-5 text-info rounded-full inline-flex">
                                                        <i class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"></i>
                                                    </span>
                                                </div>
                                                <div class="crm-timeline-content">
                                                    <span>Neon Tarly added <span class="text-info font-semibold">Robert Bright</span> to AI summit project.</span>
                                                </div>
                                                <div class="flex-auto text-end">
                                                    <span class="block text-gray-500 dark:text-white/70 text-xs opacity-70">12 hrs</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="crm-recent-activity-content">
                                            <div class="flex items-top">
                                                <div class="ltr:mr-3 rtl:ml-3">
                                                    <span class="avatar w-5 h-5 text-pink-500 rounded-full inline-flex">
                                                        <i class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"></i>
                                                    </span>
                                                </div>
                                                <div class="crm-timeline-content">
                                                    <span>Replied to new support request <i class="ri-checkbox-circle-line text-success fs-16 align-middle"></i></span>
                                                </div>
                                                <div class="flex-auto text-end">
                                                    <span class="block text-gray-500 dark:text-white/70 text-xs opacity-70">4 hrs</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="crm-recent-activity-content">
                                            <div class="flex items-top">
                                                <div class="ltr:mr-3 rtl:ml-3">
                                                    <span class="avatar w-5 h-5 text-primary rounded-full inline-flex">
                                                        <i class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"></i>
                                                    </span>
                                                </div>
                                                <div class="crm-timeline-content">
                                                    <span class="font-semibold text-dark dark:text-white">Update of calendar events &amp;</span><span><a href="javascript:void(0);" class="text-primary font-semibold"> Added new events in next week.</a></span>
                                                </div>
                                                <div class="flex-auto text-end">
                                                    <span class="block text-gray-500 dark:text-white/70 text-xs opacity-70">4:45PM</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="crm-recent-activity-content">
                                            <div class="flex items-top">
                                                <div class="ltr:mr-3 rtl:ml-3">
                                                    <span class="avatar w-5 h-5 text-secondary rounded-full inline-flex">
                                                        <i class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"></i>
                                                    </span>
                                                </div>
                                                <div class="crm-timeline-content">
                                                    <span>New theme for <span class="font-semibold text-dark dark:text-white">Spruko Website</span> completed</span>
                                                    <span class="block fs-12 text-muted">Lorem ipsum, dolor sit amet.</span>
                                                </div>
                                                <div class="flex-auto text-end">
                                                    <span class="block text-gray-500 dark:text-white/70 text-xs opacity-70">3 hrs</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="crm-recent-activity-content">
                                            <div class="flex items-top">
                                                <div class="ltr:mr-3 rtl:ml-3">
                                                    <span class="avatar w-5 h-5 text-success rounded-full inline-flex">
                                                        <i class="ri-checkbox-blank-circle-fill leading-none text-xs opacity-50 mx-auto my-auto"></i>
                                                    </span>
                                                </div>
                                                <div class="crm-timeline-content">
                                                    <span>Created a <span class="text-success font-semibold">New Task</span> today <span class="avatar w-5 h-5 bg-purple-transparent rounded-full inline-flex ms-1"><i class="ri-add-fill text-purple fs-12"></i></span></span>
                                                </div>
                                                <div class="flex-auto text-end">
                                                    <span class="block text-gray-500 dark:text-white/70 text-xs opacity-70">22 hrs</span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-1 -->

                            <!-- Start::row-2 -->
                            <div class="grid grid-cols-12 gap-x-5">
                                <div class="col-span-12 md:col-span-6 xxl:col-span-4">
                                    <div class="box">
                                    <div class="box-header">
                                        <div class="flex">
                                        <h5 class="box-title my-auto">Leads By Source</h5>
                                        <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto">
                                            <button type="button" class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200  dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10">
                                            This Week <i class="ti ti-chevron-down"></i></button>
                                            <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                                            <a class="ti-dropdown-item" href="javascript:void(0)">This Week</a>
                                            <a class="ti-dropdown-item" href="javascript:void(0)">This Month</a>
                                            <a class="ti-dropdown-item" href="javascript:void(0)">This Year</a>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box-body p-0">
                                        <div class="px-3">
                                        <div id="leads"></div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 md:col-span-6 xxl:col-span-5">
                                    <div class="box">
                                    <div class="box-header flex">
                                        <h5 class="box-title my-auto">Deals Overview</h5>
                                        <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto">
                                        <button type="button" aria-label="button" class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-2 bg-white !border border-gray-200 text-gray-500 hover:bg-gray-100  focus:ring-gray-200 dark:bg-black/20 dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10">
                                            <i class="text-sm leading-none ti ti-dots-vertical"></i> </button>
                                        <div class="hs-dropdown-menu ti-dropdown-menu">
                                            <a class="ti-dropdown-item" href="javascript:void(0)">Action</a>
                                            <a class="ti-dropdown-item" href="javascript:void(0)">Another Action</a>
                                            <a class="ti-dropdown-item" href="javascript:void(0)">Something else
                                            here</a>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box-body p-0">
                                        <div class="overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col" class="text-center">Deal</th>
                                                <th scope="col" class="">Amount</th>
                                                <th scope="col" class="">Probability</th>
                                                <th scope="col" class="">Status</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="leading-none !text-gray-800 dark:!text-white">
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Socrates
                                                        Itumay</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto  min-w-[180px]">socratesitumay@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td class="">$54,900</td>
                                                <td class="">24%</td>
                                                <td class=" text-sm"><span class="badge leading-none bg-primary/10 text-primary rounded-sm">Qualified</span></td>
                                            </tr>
                                            <tr>
                                                <td class="leading-none !text-gray-800 dark:!text-white">
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/3.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Json Taylor</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">jsontaylor2416@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td class="">$16,800</td>
                                                <td class="">70%</td>
                                                <td class=" text-sm"><span class="badge leading-none bg-warning/10 text-warning rounded-sm">Review</span></td>
                                            </tr>
                                            <tr>
                                                <td class="leading-none !text-gray-800 dark:!text-white">
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/logos/1.png')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Inferno Tech Et.</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">InfernoTech@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td class="">$12,000</td>
                                                <td class="">90%</td>
                                                <td class=" text-sm"><span class="badge leading-none bg-success/10 text-success rounded-sm">Closed Won</span></td>
                                            </tr>
                                            <tr>
                                                <td class="leading-none !text-gray-800 dark:!text-white">
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/13.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Andrew Garfield</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">andrewgarfield@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td class="">$16,800</td>
                                                <td class="">70%</td>
                                                <td class=" text-sm"><span class="badge leading-none bg-danger/10 text-danger rounded-sm">Closed Lost</span></td>
                                            </tr>
                                            <tr>
                                                <td class="leading-none !text-gray-800 dark:!text-white">
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/logos/8.png')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Jack Pvt.Ltd</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">JackTech@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td class="">$12,000</td>
                                                <td class="">90%</td>
                                                <td class=" text-sm"><span class="badge leading-none bg-success/10 text-success rounded-sm">Closed Won</span></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xxl:col-span-3">
                                    <div class="box">
                                    <div class="box-header flex justify-between">
                                        <div class="box-title my-auto">
                                        Leads Response
                                        </div>
                                        <div class=" block ltr:ml-auto rtl:mr-auto my-auto">
                                        <button type="button" class="ti-btn m-0 rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200  dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10">
                                            View All</button>
                                        </div>
                                    </div>
                                    <div class="box-body">
                                        <div class="flex items-center">
                                        <div class="ltr:mr-3 rtl:ml-3">
                                            <div class="text-primary"><i class="ti ti-clock-hour-4 text-3xl"></i></div>
                                        </div>
                                        <div class="flex-1">
                                            <h5 class="text-xl text-gray-800 dark:text-white font-semibold">3.54</h5>
                                            <p class="text-sm text-gray-500 dark:text-white/70">Average Lead Response Time</p>
                                        </div>
                                        </div>
                                        <ul class="flex flex-col mt-6">
                                        <li class="px-0 pt-0 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="flex  justify-between items-center w-full">
                                            <div class="flex space-x-3 rtl:space-x-reverse w-full">
                                                <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                                <div class="w-full">
                                                <div class="flex items-center justify-between mb-1 text-sm">
                                                    <p class="mb-0">Helen Beth</p>
                                                    <span>2.7</span>
                                                </div>
                                                <div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20">
                                                    <div class="ti-main-progress-bar bg-primary text-xs text-white text-center" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="px-0 pt-3 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="flex  justify-between items-center w-full">
                                            <div class="flex space-x-3 rtl:space-x-reverse w-full">
                                                <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/12.jpg')}}" alt="Image Description">
                                                <div class="w-full">
                                                <div class="flex items-center justify-between mb-1 text-sm">
                                                    <p class="mb-0">Bickle Travis</p>
                                                    <span>1.7</span>
                                                </div>
                                                <div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20">
                                                    <div class="ti-main-progress-bar bg-primary text-xs text-white text-center" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="px-0 pt-3 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="flex  justify-between items-center w-full">
                                            <div class="flex space-x-3 rtl:space-x-reverse w-full">
                                                <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/3.jpg')}}" alt="Image Description">
                                                <div class="w-full">
                                                <div class="flex items-center justify-between mb-1 text-sm">
                                                    <p class="mb-0">Json Taylor</p>
                                                    <span>1.8</span>
                                                </div>
                                                <div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20">
                                                    <div class="ti-main-progress-bar bg-primary text-xs text-white text-center" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="px-0 pt-3 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="flex  justify-between items-center w-full">
                                            <div class="flex space-x-3 rtl:space-x-reverse w-full">
                                                <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/13.jpg')}}" alt="Image Description">
                                                <div class="w-full">
                                                <div class="flex items-center justify-between mb-1 text-sm">
                                                    <p class="mb-0">Andrew Garfield</p>
                                                    <span>2.5</span>
                                                </div>
                                                <div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20">
                                                    <div class="ti-main-progress-bar bg-primary text-xs text-white text-center" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="px-0 pt-3 pb-0 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="flex  justify-between items-center w-full">
                                            <div class="flex space-x-3 rtl:space-x-reverse w-full">
                                                <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                                <div class="w-full">
                                                <div class="flex items-center justify-between mb-1 text-sm">
                                                    <p class="mb-0">Socrates Itumay</p>
                                                    <span>2.1</span>
                                                </div>
                                                <div class="ti-main-progress h-2 bg-gray-200 dark:bg-black/20">
                                                    <div class="ti-main-progress-bar bg-primary text-xs text-white text-center" role="progressbar" style="width: 30%" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        </ul>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-2 -->

                            <!-- Start::row-3 -->
                            <div class="grid grid-cols-12 gap-x-6">
                                <div class="col-span-12">
                                    <div class="box">
                                    <div class="box-header">
                                        <div class="flex">
                                        <h5 class="box-title my-auto">Leads Report</h5>
                                        <div class="hs-dropdown ti-dropdown block ltr:ml-auto rtl:mr-auto my-auto">
                                            <button type="button" class="hs-dropdown-toggle ti-dropdown-toggle rounded-sm p-1 px-3 !border border-gray-200 text-gray-400 hover:text-gray-500 hover:bg-gray-200 hover:border-gray-200 focus:ring-gray-200  dark:hover:bg-black/30 dark:border-white/10 dark:hover:border-white/20 dark:focus:ring-white/10 dark:focus:ring-offset-white/10">
                                            View All <i class="ti ti-chevron-down"></i></button>
                                            <div class="hs-dropdown-menu ti-dropdown-menu hidden">
                                            <a class="ti-dropdown-item" href="javascript:void(0)">Download</a>
                                            <a class="ti-dropdown-item" href="javascript:void(0)">Import</a>
                                            <a class="ti-dropdown-item" href="javascript:void(0)">Export</a>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box-body">
                                        <div class="table-bordered rounded-sm ti-custom-table-head overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head whitespace-nowrap">
                                            <thead class="bg-gray-50 dark:bg-black/20">
                                            <tr class="">
                                                <th scope="col" class="dark:text-white/80">S.no</th>
                                                <th scope="col" class="dark:text-white/80">Lead</th>
                                                <th scope="col" class="dark:text-white/80">Phone Number</th>
                                                <th scope="col" class="dark:text-white/80">Company Name</th>
                                                <th scope="col" class="dark:text-white/80">Location</th>
                                                <th scope="col" class="dark:text-white/80">date</th>
                                                <th scope="col" class="dark:text-white/80">Status</th>
                                                <th scope="col" class="dark:text-white/80">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody class="">
                                            <tr class="">
                                                <td>1</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start min-w-[200px]">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Socrates
                                                        Itumay</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">socratesitumay@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>+1(555) 354 2345</td>
                                                <td>Beckle Heth Corp.</td>
                                                <td>
                                                <div class="inline-flex items-center">
                                                    <i class="ri-map-pin-fill text-gray-500 dark:text-white/70 text-xs"></i>
                                                    <span class="ltr:ml-1 rtl:mr-1">Germany</span>
                                                </div>
                                                </td>
                                                <td>02-04-2023</td>
                                                <td><span class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-success/10 text-success/80">Won Lead</span>
                                                </td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse">
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary">
                                                    <i class="ti ti-eye"></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 hidden" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        View
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary">
                                                    <i class="ti ti-pencil"></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">
                                                        Edit
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger">
                                                    <i class="ti ti-trash"></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">
                                                        Delete
                                                    </span>
                                                    </a>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="">
                                                <td>2</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start min-w-[200px]">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/12.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Luke Cooper</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">LukeCooper@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>+1(555) 873 8923</td>
                                                <td>Lackme Info Et.</td>
                                                <td>
                                                <div class="inline-flex items-center">
                                                    <i class="ri-map-pin-fill text-gray-500 dark:text-white/70 text-xs"></i>
                                                    <span class="ltr:ml-1 rtl:mr-1">London</span>
                                                </div>
                                                </td>
                                                <td>03-04-2023</td>
                                                <td><span class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-primary/10 text-primary/80">New Lead</span>
                                                </td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse">
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary">
                                                    <i class="ti ti-eye"></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 hidden" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        View
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary">
                                                    <i class="ti ti-pencil"></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">
                                                        Edit
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger">
                                                    <i class="ti ti-trash"></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">
                                                        Delete
                                                    </span>
                                                    </a>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="">
                                                <td>3</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start min-w-[200px]">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/14.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Rony Brad</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">RonyBrad@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>+1(555) 347 0923</td>
                                                <td>Mevengo Tech Et Sed</td>
                                                <td>
                                                <div class="inline-flex items-center">
                                                    <i class="ri-map-pin-fill text-gray-500 dark:text-white/70 text-xs"></i>
                                                    <span class="ltr:ml-1 rtl:mr-1">Usa</span>
                                                </div>
                                                </td>
                                                <td>04-04-2023</td>
                                                <td><span class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-primary/10 text-primary/80">New Lead</span>
                                                </td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse">
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary">
                                                    <i class="ti ti-eye"></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 hidden" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        View
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary">
                                                    <i class="ti ti-pencil"></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">
                                                        Edit
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger">
                                                    <i class="ti ti-trash"></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">
                                                        Delete
                                                    </span>
                                                    </a>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="">
                                                <td>4</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start min-w-[200px]">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Sophia Khud</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">RonyBrad@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>+1(555) 674 7824</td>
                                                <td>Jeveda Group En.</td>
                                                <td>
                                                <div class="inline-flex items-center">
                                                    <i class="ri-map-pin-fill text-gray-500 dark:text-white/70 text-xs"></i>
                                                    <span class="ltr:ml-1 rtl:mr-1">Canada</span>
                                                </div>
                                                </td>
                                                <td>05-04-2023</td>
                                                <td><span class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-danger/10 text-danger/80">Lost Lead</span>
                                                </td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse">
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary">
                                                    <i class="ti ti-eye"></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 hidden" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        View
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary">
                                                    <i class="ti ti-pencil"></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">
                                                        Edit
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger">
                                                    <i class="ti ti-trash"></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">
                                                        Delete
                                                    </span>
                                                    </a>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="">
                                                <td>5</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start min-w-[200px]">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/3.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Cooper Hard</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">CooperHard@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>+1(555) 985 2893</td>
                                                <td>Neveia Exp Sid</td>
                                                <td>
                                                <div class="inline-flex items-center">
                                                    <i class="ri-map-pin-fill text-gray-500 dark:text-white/70 text-xs"></i>
                                                    <span class="ltr:ml-1 rtl:mr-1">England</span>
                                                </div>
                                                </td>
                                                <td>06-04-2023</td>
                                                <td><span class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-primary/10 text-primary/80">New Lead</span>
                                                </td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse">
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary">
                                                    <i class="ti ti-eye"></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 hidden" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        View
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary">
                                                    <i class="ti ti-pencil"></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">
                                                        Edit
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);" class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger">
                                                    <i class="ti ti-trash"></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">
                                                        Delete
                                                    </span>
                                                    </a>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="">
                                                <td>6</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start min-w-[200px]">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/5.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Chad Xic</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">ChadXic@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>+1(555) 238 2342</td>
                                                <td>Ixin Corp.</td>
                                                <td>
                                                <div class="inline-flex items-center">
                                                    <i class="ri-map-pin-fill text-gray-500 dark:text-white/70 text-xs"></i>
                                                    <span class="ltr:ml-1 rtl:mr-1">Australia</span>
                                                </div>
                                                </td>
                                                <td>07-04-2023</td>
                                                <td><span
                                                    class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-primary/10 text-primary/80">New
                                                    Lead</span>
                                                </td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse">
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary">
                                                    <i class="ti ti-eye"></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 hidden"
                                                        role="tooltip" data-popper-placement="top"
                                                        style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        View
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary">
                                                    <i class="ti ti-pencil"></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">
                                                        Edit
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger">
                                                    <i class="ti ti-trash"></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">
                                                        Delete
                                                    </span>
                                                    </a>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="">
                                                <td>7</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start min-w-[200px]">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/15.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Rover Imo</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">RoverImo@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>+1(555) 972 9883</td>
                                                <td>Myami Group &amp; Tech.</td>
                                                <td>
                                                <div class="inline-flex items-center">
                                                    <i class="ri-map-pin-fill text-gray-500 dark:text-white/70 text-xs"></i>
                                                    <span class="ltr:ml-1 rtl:mr-1">Spain</span>
                                                </div>
                                                </td>
                                                <td>08-04-2023</td>
                                                <td><span
                                                    class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-success/10 text-success/80">Won
                                                    Lead</span>
                                                </td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse">
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary">
                                                    <i class="ti ti-eye"></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 hidden"
                                                        role="tooltip" data-popper-placement="top"
                                                        style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        View
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary">
                                                    <i class="ti ti-pencil"></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">
                                                        Edit
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger">
                                                    <i class="ti ti-trash"></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">
                                                        Delete
                                                    </span>
                                                    </a>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="">
                                                <td>8</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start min-w-[200px]">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/11.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Helen Sha</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">HelenSha@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>+1(555) 890 5687</td>
                                                <td>Inferno Xo</td>
                                                <td>
                                                <div class="inline-flex items-center">
                                                    <i class="ri-map-pin-fill text-gray-500 dark:text-white/70 text-xs"></i>
                                                    <span class="ltr:ml-1 rtl:mr-1">China</span>
                                                </div>
                                                </td>
                                                <td>09-04-2023</td>
                                                <td><span
                                                    class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-primary/10 text-primary/80">New
                                                    Lead</span>
                                                </td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse">
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary">
                                                    <i class="ti ti-eye"></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 hidden"
                                                        role="tooltip" data-popper-placement="top"
                                                        style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        View
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary">
                                                    <i class="ti ti-pencil"></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">
                                                        Edit
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger">
                                                    <i class="ti ti-trash"></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">
                                                        Delete
                                                    </span>
                                                    </a>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="">
                                                <td>9</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start min-w-[200px]">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/8.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Shakira Neo</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">ShakiraNeo@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>+1(555) 765 8937</td>
                                                <td>Ideal IT Sol.</td>
                                                <td>
                                                <div class="inline-flex items-center">
                                                    <i class="ri-map-pin-fill text-gray-500 dark:text-white/70 text-xs"></i>
                                                    <span class="ltr:ml-1 rtl:mr-1">Italy</span>
                                                </div>
                                                </td>
                                                <td>10-04-2023</td>
                                                <td><span
                                                    class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-danger/10 text-danger/80">Lost
                                                    Lead</span>
                                                </td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse">
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary">
                                                    <i class="ti ti-eye"></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 hidden"
                                                        role="tooltip" data-popper-placement="top"
                                                        style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        View
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary">
                                                    <i class="ti ti-pencil"></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">
                                                        Edit
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger">
                                                    <i class="ti ti-trash"></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">
                                                        Delete
                                                    </span>
                                                    </a>
                                                </div>
                                                </td>
                                            </tr>
                                            <tr class="">
                                                <td>10</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start min-w-[200px]">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/users/13.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="block text-sm font-semibold my-auto text-gray-800 dark:text-white">Shaggy Yt</p>
                                                    <span class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto">ShaggyYt@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>+1(555) 675 4680</td>
                                                <td>Xenon Tech. Ed.</td>
                                                <td>
                                                <div class="inline-flex items-center">
                                                    <i class="ri-map-pin-fill text-gray-500 dark:text-white/70 text-xs"></i>
                                                    <span class="ltr:ml-1 rtl:mr-1">Europe</span>
                                                </div>
                                                </td>
                                                <td>11-04-2023</td>
                                                <td><span
                                                    class="truncate whitespace-nowrap inline-block py-1 px-3 rounded-full text-xs font-medium bg-primary/10 text-primary/80">New
                                                    Lead</span>
                                                </td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse">
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-primary">
                                                    <i class="ti ti-eye"></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 hidden"
                                                        role="tooltip" data-popper-placement="top"
                                                        style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        View
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="customer-edit m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary">
                                                    <i class="ti ti-pencil"></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">
                                                        Edit
                                                    </span>
                                                    </a>
                                                </div>
                                                <div class="hs-tooltip ti-main-tooltip">
                                                    <a href="javascript:void(0);"
                                                    class="m-0 hs-tooltip-toggle relative w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger">
                                                    <i class="ti ti-trash"></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">
                                                        Delete
                                                    </span>
                                                    </a>
                                                </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                    <div class="box-footer">
                                        <div class="sm:flex items-center">
                                            <div class="">
                                                showing 5 Entries <i class="ri-arrow-right-line ml-2 font-semibold"></i>
                                            </div>
                                            <div class="ltr:ml-auto rtl:mr-auto">
                                                <nav class="flex justify-center items-center space-x-2 rtl:space-x-reverse">
                                                    <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm" href="javascript:void(0);">
                                                        <span aria-hidden="true">Prev</span>
                                                        <span class="sr-only">Previous</span>
                                                    </a>
                                                    <a class="bg-primary text-white py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm" href="javascript:void(0);" aria-current="page">1</a>
                                                    <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm" href="javascript:void(0);">2</a>
                                                    <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm" href="javascript:void(0);">3</a>
                                                    <a class="text-gray-500 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm" href="javascript:void(0);">
                                                        <span class="sr-only">Next</span>
                                                        <span aria-hidden="true">Next</span>
                                                    </a>
                                                </nav>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-3 -->

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

                    </div>

@endsection

@section('scripts')

        <!-- APEX CHARTS JS -->
        <script src="{{asset('build/assets/libs/apexcharts/apexcharts.min.js')}}"></script>

        <!-- INDEX JS -->
        @vite('resources/assets/js/index-9.js')


@endsection