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

                            <!-- Start::row-1 -->
                            <div class="grid grid-cols-12 gap-x-5">
                                <div class="col-span-12 md:col-span-6 xxl:col-span-3">
                                    <div class="box">
                                    <div class="box-body relative">
                                        <a aria-label="anchor" href="javascript:void(0);" class="absolute w-full h-full inset-0"></a>
                                        <div class="flex items-center">
                                        <a aria-label="anchor" href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 block">
                                            <span class="avatar rounded-sm bg-primary/20 text-primary p-3"><i
                                                class="ti ti-wallet text-2xl leading-none"></i></span>
                                        </a>
                                        <div class="flex-1 font-medium">
                                            <h4 class="text-2xl text-gray-800 dark:text-white font-medium">$98,450</h4>
                                            <div class="flex justify-between items-center">
                                            <span class="text-gray-500 dark:text-white/70 text-xs">YTD Earning</span>
                                            <span class="text-success text-xs inline-flex"><i
                                                class="ti ti-trending-up text-base ltr:mr-1 rtl:ml-1"></i><span class="my-auto">+2.02%</span></span>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 md:col-span-6 xxl:col-span-3">
                                    <div class="box">
                                    <div class="box-body relative">
                                        <a aria-label="anchor" href="javascript:void(0);" class="absolute w-full h-full inset-0"></a>
                                        <div class="flex items-center">
                                        <a aria-label="anchor" href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 block">
                                            <span class="avatar rounded-sm bg-secondary/20 text-secondary p-3"><i
                                                class="ti ti-users  text-2xl leading-none"></i></span>
                                        </a>
                                        <div class="flex-1 font-medium">
                                            <h4 class="text-2xl text-gray-800 dark:text-white font-medium">15,379</h4>
                                            <div class="flex justify-between items-center">
                                            <span class="text-gray-500 dark:text-white/70 text-xs">Total Students</span>
                                            <span class="text-danger text-xs inline-flex">
                                                <i class="ti ti-trending-down text-base ltr:mr-1 rtl:ml-1"></i>
                                                <span class="my-auto">+2.02%</span>
                                            </span>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 md:col-span-6 xxl:col-span-3">
                                    <div class="box">
                                    <div class="box-body relative">
                                        <a aria-label="anchor" href="javascript:void(0);" class="absolute w-full h-full inset-0"></a>
                                        <div class="flex items-center">
                                        <a aria-label="anchor" href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 block">
                                            <span class="avatar rounded-sm bg-warning/20 text-warning p-3"><i
                                                class="ti ti-id text-2xl leading-none"></i></span>
                                        </a>
                                        <div class="flex-1 font-medium">
                                            <h4 class="text-2xl text-gray-800 dark:text-white font-medium">377</h4>
                                            <div class="flex justify-between items-center">
                                            <span class="text-gray-500 dark:text-white/70 text-xs">Total Instructors</span>
                                            <span class="text-danger text-xs inline-flex"><i
                                                class="ti ti-trending-down text-base ltr:mr-1 rtl:ml-1"></i><span class="my-auto">+2.02%</span></span>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 md:col-span-6 xxl:col-span-3">
                                    <div class="box">
                                    <div class="box-body relative">
                                        <a aria-label="anchor" href="javascript:void(0);" class="absolute w-full h-full inset-0"></a>
                                        <div class="flex items-center">
                                        <a aria-label="anchor" href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 block">
                                            <span class="avatar rounded-sm bg-danger/20 text-danger p-3"><i
                                                class="ti ti-gift text-2xl leading-none"></i></span>
                                        </a>
                                        <div class="flex-1 font-medium">
                                            <h4 class="text-2xl text-gray-800 dark:text-white font-medium">11,016</h4>
                                            <div class="flex justify-between items-center">
                                            <span class="text-gray-500 dark:text-white/70 text-xs">Total Courses</span>
                                            <span class="text-success text-xs inline-flex"><i
                                                class="ti ti-trending-up text-base ltr:mr-1 rtl:ml-1"></i><span class="my-auto">+2.02%</span></span>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-1 -->

                            <!-- Start::row-2 -->
                            <div class="grid grid-cols-12 gap-x-5">
                                <div class="col-span-12 xl:col-span-7">
                                    <div class="box">
                                    <div class="box-header">
                                        <div class="sm:flex justify-between sm:space-y-0 space-y-2">
                                        <h5 class="box-title my-auto">Earnings Report</h5>
                                        <div class="inline-flex rounded-md shadow-sm">
                                            <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary">
                                            1D
                                            </button>
                                            <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary">
                                            1W
                                            </button>
                                            <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary">
                                            1M
                                            </button>
                                            <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary">
                                            3M
                                            </button>
                                            <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-soft-primary">
                                            6M
                                            </button>
                                            <button type="button" class="ti-btn-group text-xs !border-0 py-2 px-3 ti-btn-primary">
                                            1Y
                                            </button>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="box-body">
                                        <div id="earningsReport"></div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xl:col-span-5">
                                    <div class="box">
                                    <div class="box-header flex">
                                        <h5 class="box-title my-auto">New Students</h5>
                                        <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 p-0">
                                        <div class="overflow-auto">
                                        <table class="ti-custom-table ti-custom-table-head">
                                            <thead>
                                            <tr>
                                                <th scope="col" class="text-center !p-[0.65rem]">Name</th>
                                                <th scope="col" class="!p-[0.65rem]">Courses</th>
                                                <th scope="col" class="!p-[0.65rem]">Completed</th>
                                                <th scope="col" class="!p-[0.65rem]">Actions</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="!p-[0.65rem]">
                                                <div class="flex items-center min-w-[200px]">
                                                    <div class="ltr:mr-2 rtl:ml-2 leading-none">
                                                    <img src="{{asset('build/assets/img/users/11.jpg')}}" alt=""
                                                        class="avatar avatar-xs rounded-full bg-gray-100 dark:bg-black/20">
                                                    </div>
                                                    <div class="items-center">
                                                    <p class="text-sm mb-0 text-gray-800 dark:text-white">Richard Dom</p>
                                                    <span class="text-xs text-gray-500 dark:text-white/70">richarddom1116@demo.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td class="!p-[0.65rem] text-center">9</td>
                                                <td class="!p-[0.65rem] text-center">1</td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse !p-[0.65rem]">
                                                <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"
                                                        role="tooltip">
                                                        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>
                                                <td class="!p-[0.65rem]">
                                                <div class="flex items-center min-w-[200px]">
                                                    <div class="ltr:mr-2 rtl:ml-2 leading-none">
                                                    <img src="{{asset('build/assets/img/users/4.jpg')}}" alt=""
                                                        class="avatar avatar-xs rounded-full bg-gray-100 dark:bg-black/20">
                                                    </div>
                                                    <div class="items-center">
                                                    <p class="text-sm mb-0 text-gray-800 dark:text-white">Jonathan Ion</p>
                                                    <span class="text-xs text-gray-500 dark:text-white/70">john.ion@demo</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td class="!p-[0.65rem] text-center">1</td>
                                                <td class="!p-[0.65rem] text-center">0</td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse !p-[0.65rem]">
                                                <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"
                                                        role="tooltip">
                                                        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>
                                                <td class="!p-[0.65rem]">
                                                <div class="flex items-center min-w-[200px]">
                                                    <div class="ltr:mr-2 rtl:ml-2 leading-none">
                                                    <img src="{{asset('build/assets/img/users/3.jpg')}}" alt=""
                                                        class="avatar avatar-xs rounded-full bg-gray-100 dark:bg-black/20">
                                                    </div>
                                                    <div class="items-center">
                                                    <p class="text-sm mb-0 text-gray-800 dark:text-white">Mary Curie</p>
                                                    <span class="text-xs text-gray-500 dark:text-white/70">mary.11@demo.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td class="!p-[0.65rem] text-center">15</td>
                                                <td class="!p-[0.65rem] text-center">0</td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse !p-[0.65rem]">
                                                <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"
                                                        role="tooltip">
                                                        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>
                                                <td class="!p-[0.65rem]">
                                                <div class="flex items-center min-w-[200px]">
                                                    <div class="ltr:mr-2 rtl:ml-2 leading-none">
                                                    <img src="{{asset('build/assets/img/users/13.jpg')}}" alt=""
                                                        class="avatar avatar-xs rounded-full bg-gray-100 dark:bg-black/20">
                                                    </div>
                                                    <div class="items-center">
                                                    <p class="text-sm mb-0 text-gray-800 dark:text-white">Richard Nike</p>
                                                    <span class="text-xs text-gray-500 dark:text-white/70">richard.16@demo.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td class="!p-[0.65rem] text-center">16</td>
                                                <td class="!p-[0.65rem] text-center">3</td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse !p-[0.65rem]">
                                                <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"
                                                        role="tooltip">
                                                        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>
                                                <td class="!p-[0.65rem]">
                                                <div class="flex items-center min-w-[200px]">
                                                    <div class="ltr:mr-2 rtl:ml-2 leading-none">
                                                    <img src="{{asset('build/assets/img/users/2.jpg')}}" alt=""
                                                        class="avatar avatar-xs rounded-full bg-gray-100 dark:bg-black/20">
                                                    </div>
                                                    <div class="items-center">
                                                    <p class="text-sm mb-0 text-gray-800 dark:text-white">Socrates Itumay</p>
                                                    <span class="text-xs text-gray-500 dark:text-white/70">socratesitumay@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td class="!p-[0.65rem] text-center">10</td>
                                                <td class="!p-[0.65rem] text-center">5</td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse !p-[0.65rem]">
                                                <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"
                                                        role="tooltip">
                                                        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>
                                                <td class="!p-[0.65rem]">
                                                <div class="flex items-center min-w-[200px]">
                                                    <div class="ltr:mr-2 rtl:ml-2 leading-none">
                                                    <img src="{{asset('build/assets/img/users/12.jpg')}}" alt=""
                                                        class="avatar avatar-xs rounded-full bg-gray-100 dark:bg-black/20">
                                                    </div>
                                                    <div class="items-center">
                                                    <p class="text-sm mb-0 text-gray-800 dark:text-white">Charlie Davieson</p>
                                                    <span class="text-xs text-gray-500 dark:text-white/70">charliedavieson@gmail.com</span>
                                                    </div>
                                                </div>
                                                </td>
                                                <td class="!p-[0.65rem] text-center">10</td>
                                                <td class="!p-[0.65rem] text-center">5</td>
                                                <td class="font-medium space-x-2 rtl:space-x-reverse !p-[0.65rem]">
                                                <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"
                                                        role="tooltip">
                                                        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>
                                </div>
                            </div>
                            <!-- End::row-2 -->

                            <!-- Start::row-3 -->
                            <div class="grid grid-cols-12 gap-x-5">
                                <div class="col-span-12 xxl:col-span-3">
                                    <div class="box">
                                    <div class="box-header">
                                        <div class="flex justify-between">
                                        <h5 class="box-title my-auto">Top Instructors</h5>
                                        <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>
                                    <div class="box-body">
                                        <ul class="flex flex-col">
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <div class="leading-none">
                                                <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/2.jpg')}}" alt="image">
                                                </div>
                                                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                                                <p class="text-sm font-semibold mb-0">John Hny</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal">M.tech</p>
                                                </div>
                                                <div class="block text-end">
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">321 Courses</span>
                                                <p class="text-xs text-gray-500 dark:text-white/70 !font-normal">Digital Marketing</p>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <div class="leading-none">
                                                <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/12.jpg')}}" alt="image">
                                                </div>
                                                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                                                <p class="text-sm font-semibold mb-0">Mortal Yun</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal">Phd</p>
                                                </div>
                                                <div class="block text-end">
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">25 Courses</span>
                                                <p class="text-xs text-gray-500 dark:text-white/70 !font-normal">Stocks &amp; Trading</p>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <div class="leading-none">
                                                <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/13.jpg')}}" alt="image">
                                                </div>
                                                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                                                <p class="text-sm font-semibold mb-0">Trex Con</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal">MBBS</p>
                                                </div>
                                                <div class="block text-end">
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">39 Courses</span>
                                                <p class="text-xs text-gray-500 dark:text-white/70 !font-normal">Science</p>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <div class="leading-none">
                                                <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/3.jpg')}}" alt="image">
                                                </div>
                                                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                                                <p class="text-sm font-semibold mb-0">Saiu Sarah</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal">Phd</p>
                                                </div>
                                                <div class="block text-end">
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">11 Courses</span>
                                                <p class="text-xs text-gray-500 dark:text-white/70 !font-normal">Science</p>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <div class="leading-none">
                                                <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}" alt="image">
                                                </div>
                                                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                                                <p class="text-sm font-semibold mb-0">Ion Hao</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal">M.tech</p>
                                                </div>
                                                <div class="block text-end">
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">124 Courses</span>
                                                <p class="text-xs text-gray-500 dark:text-white/70 !font-normal">Web Development</p>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <div class="leading-none">
                                                <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/14.jpg')}}" alt="image">
                                                </div>
                                                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                                                <p class="text-sm font-semibold mb-0">Roman Killon</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal">M.tech</p>
                                                </div>
                                                <div class="block text-end">
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">163 Courses</span>
                                                <p class="text-xs text-gray-500 dark:text-white/70 !font-normal">Ui / Ux Designing</p>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <div class="leading-none">
                                                <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/5.jpg')}}" alt="image">
                                                </div>
                                                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                                                <p class="text-sm font-semibold mb-0">Suzika Stallone</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal">Phd</p>
                                                </div>
                                                <div class="block text-end">
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">110 Courses</span>
                                                <p class="text-xs text-gray-500 dark:text-white/70 !font-normal">Machine Leadning</p>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <div class="leading-none">
                                                <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/15.jpg')}}" alt="image">
                                                </div>
                                                <div class="flex-auto ltr:ml-2 rtl:mr-2">
                                                <p class="text-sm font-semibold mb-0">Robert Lewis</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0 !font-normal">Phd</p>
                                                </div>
                                                <div class="block text-end">
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">150 Courses</span>
                                                <p class="text-xs text-gray-500 dark:text-white/70 !font-normal">Java Development</p>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        </ul>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xxl:col-span-6">
                                    <div class="box">
                                    <div class="box-header">
                                        <div class="flex justify-between">
                                        <h5 class="box-title my-auto">Popular Courses</h5>
                                        <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>
                                    <div class="box-body">
                                        <ul class="flex flex-col">
                                        <li class="mb-6 !rounded-sm ti-list-group text-gray-800 dark:text-white w-full">
                                            <div class="sm:flex items-center w-full">
                                            <a href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 inline-block">
                                                <img src="{{asset('build/assets/img/media/1.jpg')}}" alt="img" class="avatar w-28 h-28 rounded-sm">
                                            </a>
                                            <div class="mt-4 sm:mt-0 flex-1 font-semibold">
                                                <a href="javascript:void(0);"
                                                class="text-gray-500 dark:text-white/70 block mb-1 font-medium text-xs" title="Category"><i
                                                    class="ri-price-tag-3-line text-xs"></i>&nbsp;UI/UX</a>
                                                <a href="javascript:void(0);" class="block mb-3 text-sm font-semibold">CSS Zero to Hero
                                                Class-11: What are Pseudo Classes In CSS? How To Write Pseudo Classes?</a>
                                                <div class="md:flex justify-between items-center">
                                                <div class="flex items-center" title="Instructor">
                                                    <a href="javascript:void(0);" class="ltr:pr-2 rtl:pl-2">
                                                    <img src="{{asset('build/assets/img/users/3.jpg')}}" alt="img" class="avatar avatar-xs rounded-full">
                                                    </a>
                                                    <a href="javascript:void(0);" class="flex-1 text-gray-500 dark:text-white/70">Natasha
                                                    Sil</a>
                                                </div>
                                                <div class="min-w-fit text-xs text-gray-500 dark:text-white/70 inline-flex">
                                                    <span class="ltr:mr-2 rtl:ml-2 my-auto">2,189 Views</span>
                                                    <span><i class="ri-star-fill text-warning"></i>&nbsp;(4.2)</span>
                                                </div>
                                                </div>
                                            </div>
                                            </div>
                                        </li>
                                        <li class="mb-6 !rounded-sm ti-list-group text-gray-800 dark:text-white w-full">
                                            <div class="sm:flex items-center w-full">
                                            <a href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 inline-block">
                                                <img src="{{asset('build/assets/img/media/4.jpg')}}" alt="img" class="avatar w-28 h-28 rounded-sm">
                                            </a>
                                            <div class="mt-4 sm:mt-0 flex-1 font-semibold">
                                                <a href="javascript:void(0);"
                                                class="text-gray-500 dark:text-white/70 block mb-1 font-medium text-xs" title="Category"><i
                                                    class="ri-price-tag-3-line text-xs"></i>&nbsp; Marketing</a>
                                                <a href="javascript:void(0);" class="block mb-3 text-sm font-semibold">Marketing Class-27: What
                                                Is Marketing? How Marketing Helpful To Business? Basic Introduction To Marketing.</a>
                                                <div class="md:flex justify-between items-center">
                                                <div class="flex items-center" title="Instructor">
                                                    <a href="javascript:void(0);" class="ltr:pr-2 rtl:pl-2">
                                                    <img src="{{asset('build/assets/img/users/4.jpg')}}" alt="img" class="avatar avatar-xs rounded-full">
                                                    </a>
                                                    <a href="javascript:void(0);" class="flex-1 text-gray-500 dark:text-white/70">Mosh Nah</a>
                                                </div>
                                                <div class="min-w-fit text-xs text-gray-500 dark:text-white/70 inline-flex">
                                                    <span class="ltr:mr-2 rtl:ml-2 my-auto">1,116 Views</span>
                                                    <span><i class="ri-star-fill text-warning"></i>&nbsp;(4.5)</span>
                                                </div>
                                                </div>
                                            </div>
                                            </div>
                                        </li>
                                        <li class="mb-0 !rounded-sm ti-list-group text-gray-800 dark:text-white w-full">
                                            <div class="sm:flex items-center w-full">
                                            <a href="javascript:void(0);" class="ltr:pr-4 rtl:pl-4 inline-block">
                                                <img src="{{asset('build/assets/img/media/23.jpg')}}" alt="img" class="avatar w-28 h-28 rounded-sm">
                                            </a>
                                            <div class="mt-4 sm:mt-0 flex-1 font-semibold">
                                                <a href="javascript:void(0);"
                                                class="text-gray-500 dark:text-white/70 block mb-1 font-medium text-xs" title="Category"><i
                                                    class="ri-price-tag-3-line text-xs"></i>&nbsp; Programming</a>
                                                <a href="javascript:void(0);" class="block mb-3 text-sm font-semibold">Learn Python-16: What Is
                                                The Difference Between Shallow Copy and Deep Copy? Implementing Deep Copy In Python.</a>
                                                <div class="md:flex justify-between items-center">
                                                <div class="flex items-center" title="Instructor">
                                                    <a href="javascript:void(0);" class="ltr:pr-2 rtl:pl-2">
                                                    <img src="{{asset('build/assets/img/users/12.jpg')}}" alt="img" class="avatar avatar-xs rounded-full">
                                                    </a>
                                                    <a href="javascript:void(0);" class="flex-1 text-gray-500 dark:text-white/70">Telsko
                                                    Navin</a>
                                                </div>
                                                <div class="min-w-fit text-xs text-gray-500 dark:text-white/70 inline-flex">
                                                    <span class="ltr:mr-2 rtl:ml-2 my-auto">2,125 Views</span>
                                                    <span><i class="ri-star-fill text-warning"></i>&nbsp;(4.8)</span>
                                                </div>
                                                </div>
                                            </div>
                                            </div>
                                        </li>
                                        </ul>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-span-12 xxl:col-span-3">
                                    <div class="box">
                                    <div class="box-header">
                                        <div class="flex justify-between">
                                        <h5 class="box-title my-auto">Top Categories</h5>
                                        <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>
                                    <div class="box-body">
                                        <ul class="flex flex-col">
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <span class="avatar rounded-sm bg-primary/20 text-primary p-3"><i
                                                    class="ri-dashboard-line text-2xl leading-none"></i></span>
                                                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                                                <p class="text-sm font-semibold mb-0">UI / UX Design</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0">10,000 + Courses</p>
                                                </div>
                                                <div>
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">$199.99</span>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <span class="avatar rounded-sm bg-secondary/20 text-secondary p-3"><i
                                                    class="ri-advertisement-line text-2xl leading-none"></i></span>
                                                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                                                <p class="text-sm font-semibold mb-0">Digital Marketing</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0">90 + Courses</p>
                                                </div>
                                                <div>
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">$599.99</span>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <span class="avatar rounded-sm bg-success/20 text-success p-3"><i
                                                    class="ri-code-box-line text-2xl leading-none"></i></span>
                                                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                                                <p class="text-sm font-semibold mb-0">Web Development</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0">250 + Courses</p>
                                                </div>
                                                <div>
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">$299.99</span>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <span class="avatar rounded-sm bg-warning/20 text-warning p-3"><i
                                                    class="ri-bar-chart-2-line text-2xl leading-none"></i></span>
                                                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                                                <p class="text-sm font-semibold mb-0">Stocks &amp; Trading</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0">100 + Courses</p>
                                                </div>
                                                <div>
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">$999.99</span>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <span class="avatar rounded-sm bg-danger/20 text-danger p-3"><i
                                                    class="ri-angularjs-line text-2xl leading-none"></i></span>
                                                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                                                <p class="text-sm font-semibold mb-0">Angular Course</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0">300 + Courses</p>
                                                </div>
                                                <div>
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">$399.99</span>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-6 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <span class="avatar rounded-sm bg-info/20 text-info p-3"><i
                                                    class="ri-reactjs-line text-2xl leading-none"></i></span>
                                                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                                                <p class="text-sm font-semibold mb-0">React Course</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0">150 + Courses</p>
                                                </div>
                                                <div>
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">$599.99</span>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        <li class="p-0 mb-0 ti-list-group border-0 text-gray-800 dark:text-white">
                                            <a href="javascript:void(0);" class="w-full">
                                            <div class="flex items-center">
                                                <span class="avatar rounded-sm bg-pink-500/20 text-pink-500 p-3"><i
                                                    class="ri-database-2-line text-2xl leading-none"></i></span>
                                                <div class="flex-auto ltr:ml-3 rtl:mr-3">
                                                <p class="text-sm font-semibold mb-0">Full Stack Course</p>
                                                <p class="text-xs text-gray-500 dark:text-white/70 mb-0">500 + Courses</p>
                                                </div>
                                                <div>
                                                <span class="text-sm text-gray-800 dark:text-white font-semibold">$199.99</span>
                                                </div>
                                            </div>
                                            </a>
                                        </li>
                                        </ul>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End::row-3 -->

                            <!-- Start::row-4 -->
                            <div class="grid grid-cols-12 gap-x-5">
                                <div class="col-span-12">
                                    <div class="box">
                                    <div class="box-header">
                                        <div class="flex">
                                        <h5 class="box-title my-auto">Course List</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">Course</th>
                                                <th scope="col" class="dark:text-white/80">Category</th>
                                                <th scope="col" class="dark:text-white/80">Classes</th>
                                                <th scope="col" class="dark:text-white/80">Last Updated</th>
                                                <th scope="col" class="dark:text-white/80">Instructor</th>
                                                <th scope="col" class="dark:text-white/80">Students</th>
                                                <th scope="col" class="dark:text-white/80">Actions</th>
                                            </tr>
                                            </thead>
                                            <tbody class="">
                                            <tr class="">
                                                <td>1</td>
                                                <td>
                                                <div class="flex space-x-3 rtl:space-x-reverse text-start">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/media/1.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="  block text-sm font-semibold my-auto text-gray-800 dark:text-white min-w-[400px]">CSS Zero to Hero Master Class</p>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>UI/UX</td>
                                                <td>51</td>
                                                <td>22-06-2023</td>
                                                <td>Burak Oin</td>
                                                <td>252</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="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 hidden" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        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">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/media/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 min-w-[400px]">Digital Marketing Course From Scratch</p>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>Marketing</td>
                                                <td>115</td>
                                                <td>21-06-2023</td>
                                                <td>Stuart Little</td>
                                                <td>1,189</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="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 hidden" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        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">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/media/10.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="  block text-sm font-semibold my-auto text-gray-800 dark:text-white min-w-[400px]">Data Structures &amp; Algorithms For Beginners</p>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>Programming</td>
                                                <td>30</td>
                                                <td>15-06-2023</td>
                                                <td>Boran Ray</td>
                                                <td>3,365</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="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 hidden" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        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">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/media/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 min-w-[400px]">Master Linear Algebra Medium Level</p>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>Mathematics</td>
                                                <td>90</td>
                                                <td>11-06-2023</td>
                                                <td>Arya Neo</td>
                                                <td>773</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="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 hidden" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        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">
                                                    <img class="avatar avatar-sm rounded-sm" src="{{asset('build/assets/img/media/23.jpg')}}" alt="Image Description">
                                                    <div class="block my-auto">
                                                    <p class="  block text-sm font-semibold my-auto text-gray-800 dark:text-white min-w-[400px]">Learn How to Trade &amp; Invest - For Absolute Beginners</p>
                                                    </div>
                                                </div>
                                                </td>
                                                <td>Stocks &amp; Trading</td>
                                                <td>161</td>
                                                <td>10-06-2023</td>
                                                <td>Sia Niu</td>
                                                <td>51</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="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 hidden" role="tooltip" data-popper-placement="top" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1686px, -243px);">
                                                        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-4 -->

                        </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-12.js')
        

@endsection