@extends('backend.master')

@section('title')
    {{ ___('common.LMS') }}
@endsection

@section('content')
    <div class="page-content">

        <!-- Cart Design Two -->
        <div class="row">
            <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6">
                <div class="cart-two bg-soft-gradient ot-card wave-animated mb-24">
                    <div class="icons">
                        <!--icon -->
                        <div class="icon ">
                            <i class="las la-chart-bar"></i>
                        </div>
                        <!--icon -->
                        <div class="icon2">
                            <i class="las la-angle-right"></i>
                        </div>

                    </div>
                    <div class="cartCaption">
                        <h6 class="cart-title">{{ ___('common.total_open_deal') }} </h6>
                        <div class="counts d-flex">
                            <!-- Counter -->
                            <div class="single-counter mb-10">
                                <span class="counter odometer" data-count="100000"></span>
                                <p class="countPlus ">+</p>
                            </div>
                            <span class="countPersent">42%</span>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6">
                <div class="cart-two bg-beguni-gradient ot-card wave-animated mb-24">
                    <div class="icons">
                        <!--icon -->
                        <div class="icon ">
                            <i class="las la-chart-bar"></i>
                        </div>
                        <!--icon -->
                        <div class="icon2">
                            <i class="las la-angle-right"></i>
                        </div>

                    </div>
                    <div class="cartCaption">
                        <h6 class="cart-title">{{ ___('common.task_in_progress') }}</h6>
                        <div class="counts d-flex">
                            <!-- Counter -->
                            <div class="single-counter mb-10">
                                <span class="counter odometer" data-count="100000"></span>
                                <p class="countPlus ">+</p>
                            </div>
                            <span class="countPersent">42%</span>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6">
                <div class="cart-two bg-blue-gradient ot-card wave-animated mb-24">
                    <div class="icons">
                        <!--icon -->
                        <div class="icon ">
                            <i class="las la-chart-bar"></i>
                        </div>
                        <!--icon -->
                        <div class="icon2">
                            <i class="las la-angle-right"></i>
                        </div>

                    </div>
                    <div class="cartCaption">
                        <h6 class="cart-title">{{ ___('common.completed_task') }}</h6>
                        <div class="counts d-flex">
                            <!-- Counter -->
                            <div class="single-counter mb-10">
                                <span class="counter odometer" data-count="100000"></span>
                                <p class="countPlus ">+</p>
                            </div>
                            <span class="countPersent">42%</span>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6">
                <div class="cart-two bg-tea-gradient ot-card wave-animated mb-24">
                    <div class="icons">
                        <!--icon -->
                        <div class="icon ">
                            <i class="las la-chart-bar"></i>
                        </div>
                        <!--icon -->
                        <div class="icon2">
                            <i class="las la-angle-right"></i>
                        </div>

                    </div>
                    <div class="cartCaption">
                        <h6 class="cart-title">{{ ___('common.completed_task') }}</h6>
                        <div class="counts d-flex">
                            <!-- Counter -->
                            <div class="single-counter mb-10">
                                <span class="counter odometer" data-count="100000"></span>
                                <p class="countPlus ">+</p>
                            </div>
                            <span class="countPersent">42%</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>


        <div class="row">

            <div class="col-xxl-8 col-xl-12 ">
                <div class="ot-card chart-card2 ot_heightFull mb-24">

                    {{-- Tittle --}}
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title">
                            <h4>{{ ___('common.learner_insight') }}</h4>
                        </div>

                        {{-- Dropdown --}}
                        <div class="dropdown card-button">
                            <button class="btn btn-secondary ot-dropdown-btn dropdown-toggle" type="button" id="revenueBtn1"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                <span>{{ ___('common.september') }}</span>
                                <i class="fa fa-chevron-down"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="revenueBtn1">
                                <li>
                                    <a class="dropdown-item" href="#">october</a>
                                </li>
                                <li><a class="dropdown-item" href="#">November</a>
                                </li>
                                <li><a class="dropdown-item" href="#">january</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- Chart --}}
                    <div id="line-adwords" class=""></div>
                </div>
            </div>
            <div class="col-xxl-4">
                <!-- Timeline -->
                <div class="card ot-card height-490 niceScroll mb-24">
                    <div class="card-header">
                        <h4>{{ ___('common.recent_activity') }}</h4>
                    </div>

                    <div class="card-body">
                        <ul class="timeline timeline-basic">
                            <li class="timeline-item">
                                <div class="timeline-info">
                                    <span class="info-details"> Ux Design LIve Class</span>
                                </div>
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h3 class="timeline-title">Esther Howard</h3>
                                    <ul class="class-time">
                                        <li class="list"><i class="las la-calendar-alt"></i> Today | 4.00PM</li>
                                    </ul>
                                </div>
                            </li>

                            <li class="timeline-item">
                                <div class="timeline-info">
                                    <span class="info-details">Web Design Course</span>
                                </div>
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h3 class="timeline-title">Jenny Willon</h3>
                                    <ul class="class-time">
                                        <li class="list"><i class="las la-calendar-alt"></i> Today | 1.00PM</li>
                                    </ul>
                                </div>
                            </li>

                            <li class="timeline-item">
                                <div class="timeline-info">
                                    <span class="info-details"> Fimga for Intermidiate Course</span>
                                </div>
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h3 class="timeline-title">Wade Howard</h3>
                                    <ul class="class-time">
                                        <li class="list"><i class="las la-calendar-alt"></i> Sunday | 1.00PM</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="timeline-item">
                                <div class="timeline-info">
                                    <span class="info-details"> Ux Design LIve Class</span>

                                </div>
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h3 class="timeline-title">Esther Howard</h3>
                                    <ul class="class-time">
                                        <li class="list"><i class="las la-calendar-alt"></i> Today | 4.00PM</li>
                                    </ul>
                                </div>
                            </li>

                            <li class="timeline-item">
                                <div class="timeline-info">
                                    <span class="info-details">Web Design Course</span>
                                </div>
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h3 class="timeline-title">Jenny Willon</h3>
                                    <ul class="class-time">
                                        <li class="list"><i class="las la-calendar-alt"></i> Today | 1.00PM</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- Timeline -->
            </div>

            {{-- Table --}}
            <div class="col-xxl-5 col-xl-6">
                <div class="ot-card chart-card2 ot_heightFull mb-24">

                    {{-- Tittle --}}
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title">
                            <h4>{{ ___('common.top_courses') }}</h4>
                        </div>

                        {{-- Dropdown --}}
                        <div class="dropdown card-button">
                            <button class="btn btn-secondary ot-dropdown-btn dropdown-toggle" type="button"
                                id="revenueBtn1" data-bs-toggle="dropdown" aria-expanded="false">
                                <span>{{ ___('common.september') }}</span>
                                <i class="fa fa-chevron-down"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="revenueBtn1">
                                <li>
                                    <a class="dropdown-item" href="#">october</a>
                                </li>
                                <li><a class="dropdown-item" href="#">November</a>
                                </li>
                                <li><a class="dropdown-item" href="#">january</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- Table --}}
                    <div class="height-300 niceScroll">
                        <div class="table-responsive mt-20">
                            <!-- table start  -->
                            <table class="ot-basic-table ot-table-bg">
                                <thead>
                                    <tr>
                                        <th>{{ ___('common.courses_name') }}</th>
                                        <th>{{ ___('common.instructor') }} </th>
                                        <th>{{ ___('common.students') }}</th>
                                        <th>{{ ___('common.todays_sale') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Master Ui/Ux Design</td>
                                        <td>Arlene McCoy</td>
                                        <td>3567</td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <span>21</span>
                                                <div class="ot-badge-up">
                                                    <span class="badge-basic-text">+13.2%</span>
                                                    <i class="fa fa-arrow-up"></i>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Graphic Design Pratical Projects</td>
                                        <td>Arlene McCoy</td>
                                        <td>1457</td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <span>21</span>
                                                <div class="ot-badge-up">
                                                    <span class="badge-basic-text">+13.2%</span>
                                                    <i class="fa fa-arrow-up"></i>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Web Design</td>
                                        <td>Arlene McCoy</td>
                                        <td>3567</td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <span>21</span>
                                                <div class="ot-badge-up">
                                                    <span class="badge-basic-text">+13.2%</span>
                                                    <i class="fa fa-arrow-up"></i>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>App Design and Development</td>
                                        <td>Arlene McCoy</td>
                                        <td>1457</td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <span>21</span>
                                                <div class="ot-badge-up">
                                                    <span class="badge-basic-text">+13.2%</span>
                                                    <i class="fa fa-arrow-up"></i>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Development Master Course</td>
                                        <td>Robert Fox</td>
                                        <td>1457</td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <span>21</span>
                                                <div class="ot-badge-up">
                                                    <span class="badge-basic-text">+13.2%</span>
                                                    <i class="fa fa-arrow-up"></i>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Development Master Course</td>
                                        <td>Robert Fox</td>
                                        <td>1457</td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <span>21</span>
                                                <div class="ot-badge-up">
                                                    <span class="badge-basic-text">+13.2%</span>
                                                    <i class="fa fa-arrow-up"></i>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- table end  -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-4 col-xl-6 ">
                <div class="ot-card ot_heightFull mb-24">
                    {{-- Tittle --}}
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title">
                            <h4>{{ ___('common.top_mentor') }}</h4>
                        </div>
                    </div>
                    <!-- table container start  -->

                    <div class="height-300 niceScroll">
                        <div class="table-responsive mt-20">
                            <!-- table start  -->
                            <table class="table-color-col">
                                <thead>
                                    <tr>
                                        <th>{{ ___('common.instructor') }}</th>
                                        <th>{{ ___('common.category') }}</th>
                                        <th>{{ ___('common.earning') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="d-flex align-items-center">
                                            <div class="profile-photo">
                                                <img src="{{ asset('backend/assets/images/avater1.png') }}" alt="profile" />
                                            </div>
                                            <span class="ml-10">Brad Simmons</span>
                                        </td>
                                        <td>Graphic</td>
                                        <td>$2367</td>
                                    </tr>
                                    <tr>
                                        <td class="d-flex align-items-center">
                                            <div class="profile-photo">
                                                <img src="{{ asset('backend/assets/images/avater2.png') }}" alt="profile" />
                                            </div>
                                            <span class="ml-10">Brad Simmons</span>
                                        </td>
                                        <td>Graphic</td>
                                        <td>$2367</td>
                                    </tr>
                                    <tr>
                                        <td class="d-flex align-items-center">
                                            <div class="profile-photo">
                                                <img src="{{ asset('backend/assets/images/avater3.png') }}" alt="profile" />
                                            </div>
                                            <span class="ml-10">Brad Simmons</span>
                                        </td>
                                        <td>Graphic</td>
                                        <td>$2367</td>
                                    </tr>
                                    <tr>
                                        <td class="d-flex align-items-center">
                                            <div class="profile-photo">
                                                <img src="{{ asset('backend/assets/images/avater4.png') }}" alt="profile" />
                                            </div>
                                            <span class="ml-10">Brad Simmons</span>
                                        </td>
                                        <td>Graphic</td>
                                        <td>$2367</td>
                                    </tr>
                                    <tr>
                                        <td class="d-flex align-items-center">
                                            <div class="profile-photo">
                                                <img src="{{ asset('backend/assets/images/avater4.png') }}" alt="profile" />
                                            </div>
                                            <span class="ml-10">Brad Simmons</span>
                                        </td>
                                        <td>Graphic</td>
                                        <td>$2367</td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- table end  -->
                        </div>
                        <!-- table container end  -->
                    </div>

                </div>
            </div>

            {{-- Chart --}}
            <div class="col-xxl-3">
                <div class="height-ot-300">
                    <div class="ot-card pb-0">
                        <div class="card-title">
                            <h4> {{ ___('common.growth_overview') }}</h4>
                        </div>
                        <div id="radialBarBottom"></div>
                    </div>
                    <div id="radialBarBottom"></div>
                </div>
            </div>
        </div>

    </div>






@endsection

@push('script')
    <script src="{{ asset('backend') }}/assets/js/apex-chart.js"></script>
@endpush