@extends('admin.layouts.master')

@section('title') Starter Page @endsection
@section('css')

    <link rel="stylesheet" href="{{asset("backend/assets/vendor/libs/apex-charts/apex-charts.css")}}" />
@endsection
@section('content')


    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        <!-- Hour chart  -->
        <div class="card bg-transparent shadow-none my-6 border-0" dir="rtl">
            <div class="card-body row p-0 pb-6 g-6">
                <div class="col-12 col-lg-8 card-separator">
                    <h5 class="mb-2">مرحبًا بعودتك، <span class="h4">{{auth()->user()->name}} 👋🏻</span></h5>
                    <div class="col-12 col-lg-5">
                        {{-- <p>تقدمك هذا الأسبوع رائع! لنواصل بهذا الأداء ونكسب الكثير من النقاط كمكافأة!</p> --}}
                    </div>
                    <div class="d-flex justify-content-between flex-wrap gap-4 ms-12">
                        <div class="d-flex align-items-center gap-4 ms-6 ms-sm-0">
                            <div class="avatar avatar-lg">
                                <div class="avatar-initial bg-label-primary rounded">
                                    <div class="text-primary">
                                        <i class="fa fa-laptop"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="content-right">
                                <p class="mb-0 fw-medium">عدد الساعات</p>
                                <h4 class="text-primary mb-0">34 ساعة</h4>
                            </div>
                        </div>
                        <div class="d-flex align-items-center gap-4">
                            <div class="avatar avatar-lg">
                                <div class="avatar-initial bg-label-info rounded">
                                    <div class="text-info">
                                        <i class="fa fa-file-pdf"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="content-right">
                                <p class="mb-0 fw-medium">نتائج الاختبارات</p>
                                <h4 class="text-info mb-0">82%</h4>
                            </div>
                        </div>
                        <div class="d-flex align-items-center gap-4">
                            <div class="avatar avatar-lg">
                                <div class="avatar-initial bg-label-warning rounded">
                                    <div class="text-warning">
                                        <i class="fa fa-check"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="content-right">
                                <p class="mb-0 fw-medium">الدورات المكتملة</p>
                                <h4 class="text-warning mb-0">14</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-4 pe-md-4 pe-lg-6">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div>
                                <h5 class="mb-1">الوقت المستغرق</h5>
                                <p class="mb-9">تقرير أسبوعي</p>
                            </div>
                            <div class="time-spending-chart">
                                <h4 class="mb-2">231<span class="text-body">س</span> 14<span class="text-body">د</span></h4>
                                <span class="badge bg-label-success">+18.4%</span>
                            </div>
                        </div>
                        <div id="leadsReportChart"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Hour chart End  -->

        <!-- Topic and Instructors -->
        <div class="row mb-6 g-6">
            <div class="col-12 col-xl-8">
                <div class="card h-100">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="card-title m-0 me-2">نسبة الحضور في مواد اليوم</h5>
                        <div class="dropdown">
                            <button
                                    class="btn p-0"
                                    type="button"
                                    id="topic"
                                    data-bs-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false">
                                <i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="topic">
                                <a class="dropdown-item" href="javascript:void(0);">Highest Views</a>
                                <a class="dropdown-item" href="javascript:void(0);">See All</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body row g-3">
                        <div class="col-md-8">
                            <div id="horizontalBarChart"></div>
                        </div>
                        <div class="col-md-4 d-flex justify-content-around align-items-center">
                            <div>
                                <div class="d-flex align-items-baseline">
                            <span class="text-primary me-2"
                            ><i class="icon-base ti tabler-circle-filled icon-12px"></i
                                ></span>
                                    <div>
                                        <p class="mb-0">الرياضيات</p>
                                        <h5>35%</h5>
                                    </div>
                                </div>
                                <div class="d-flex align-items-baseline my-12">
                            <span class="text-success me-2"
                            ><i class="icon-base ti tabler-circle-filled icon-12px"></i
                                ></span>
                                    <div>
                                        <p class="mb-0">العربية</p>
                                        <h5>14%</h5>
                                    </div>
                                </div>
                                <div class="d-flex align-items-baseline">
                            <span class="text-danger me-2"
                            ><i class="icon-base ti tabler-circle-filled icon-12px"></i
                                ></span>
                                    <div>
                                        <p class="mb-0">الفرنسية</p>
                                        <h5>10%</h5>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div class="d-flex align-items-baseline">
                            <span class="text-info me-2"
                            ><i class="icon-base ti tabler-circle-filled icon-12px"></i
                                ></span>
                                    <div>
                                        <p class="mb-0">الانقليزية</p>
                                        <h5>20%</h5>
                                    </div>
                                </div>
                                <div class="d-flex align-items-baseline my-12">
                            <span class="text-secondary me-2"
                            ><i class="icon-base ti tabler-circle-filled icon-12px"></i
                                ></span>
                                    <div>
                                        <p class="mb-0">العلوم</p>
                                        <h5>12%</h5>
                                    </div>
                                </div>
                                <div class="d-flex align-items-baseline">
                            <span class="text-warning me-2"
                            ><i class="icon-base ti tabler-circle-filled icon-12px"></i
                                ></span>
                                    <div>
                                        <p class="mb-0">الرياضة</p>
                                        <h5>9%</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-xl-4 col-md-6">
                <div class="card h-100">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <div class="card-title mb-0">
                            <h5 class="m-0 me-2">الأساتذة</h5>
                        </div>
                        <div class="dropdown">
                            <button
                                    class="btn text-body-secondary p-0"
                                    type="button"
                                    id="popularInstructors"
                                    data-bs-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false">
                                <i class="icon-base ti tabler-dots-vertical icon-22px"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="popularInstructors">
                                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
                                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
                                <a class="dropdown-item" href="javascript:void(0);">Share</a>
                            </div>
                        </div>
                    </div>
                    <div class="px-5 py-4 border border-start-0 border-end-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <p class="mb-0 text-uppercase">الأساتذة</p>
                            <p class="mb-0 text-uppercase">الدروس</p>
                        </div>
                    </div>
                    <div class="card-body">
                        {{-- <div class="d-flex justify-content-between align-items-center mb-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar me-4">
                                    <img src="{{asset('backend/assets/img/avatars/1.png')}}" alt="الصورة الرمزية" class="rounded-circle" />
                                </div>
                                <div>
                                    <div>
                                        <h6 class="mb-0 text-truncate">محمد التومي</h6>
                                        <small class="text-truncate text-body">رياضيات</small>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <h6 class="mb-0">33</h6>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar me-4">
                                    <img src="{{asset('backend/assets/img/avatars/3.png')}}" alt="الصورة الرمزية" class="rounded-circle" />
                                </div>
                                <div>
                                    <div>
                                        <h6 class="mb-0 text-truncate">آمنة بن ناصر</h6>
                                        <small class="text-truncate text-body">علوم</small>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <h6 class="mb-0">52</h6>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar me-4">
                                    <img src="{{asset('backend/assets/img/avatars/1.png')}}" alt="الصورة الرمزية" class="rounded-circle" />
                                </div>
                                <div>
                                    <div>
                                        <h6 class="mb-0 text-truncate">خالد العياري</h6>
                                        <small class="text-truncate text-body">فرنسية</small>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <h6 class="mb-0">12</h6>
                            </div>
                        </div> --}}

                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar me-4">
                                    <img src="{{asset('backend/assets/img/avatars/2.png')}}" alt="الصورة الرمزية" class="rounded-circle" />
                                </div>
                                <div>
                                    <div>
                                        <h6 class="mb-0 text-truncate">اماني التيزاوي</h6>
                                        <small class="text-truncate text-body">أستاذة</small>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <h6 class="mb-0">18</h6>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar me-4">
                                    <img src="{{asset('backend/assets/img/avatars/2.png')}}" alt="الصورة الرمزية" class="rounded-circle" />
                                </div>
                                <div>
                                    <div>
                                        <h6 class="mb-0 text-truncate">يسر العرقوبي</h6>
                                        <small class="text-truncate text-body">أستاذة</small>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <h6 class="mb-0">18</h6>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar me-4">
                                    <img src="{{asset('backend/assets/img/avatars/2.png')}}" alt="الصورة الرمزية" class="rounded-circle" />
                                </div>
                                <div>
                                    <div>
                                        <h6 class="mb-0 text-truncate">سنية العسكري</h6>
                                        <small class="text-truncate text-body">أستاذة</small>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <h6 class="mb-0">18</h6>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar me-4">
                                    <img src="{{asset('backend/assets/img/avatars/2.png')}}" alt="الصورة الرمزية" class="rounded-circle" />
                                </div>
                                <div>
                                    <div>
                                        <h6 class="mb-0 text-truncate">هاجر العمري</h6>
                                        <small class="text-truncate text-body">أستاذة</small>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <h6 class="mb-0">18</h6>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

            <div class="col-12 col-xl-8 col-md-12">
                <div class="card h-100">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="card-title m-0 me-2">أفضل الدورات</h5>
                        <div class="dropdown">
                            <button
                                    class="btn text-body-secondary p-0"
                                    type="button"
                                    id="topCourses"
                                    data-bs-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false">
                                <i class="fas fa-ellipsis-v icon-lg"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="topCourses">
                                <a class="dropdown-item" href="javascript:void(0);">تحديث</a>
                                <a class="dropdown-item" href="javascript:void(0);">تحميل</a>
                                <a class="dropdown-item" href="javascript:void(0);">عرض الكل</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li class="mb-3 d-flex mb-6 align-items-center">
                                <div class="avatar flex-shrink-0 me-4">
                        <span class="avatar-initial rounded bg-label-primary">
                            <i class="fas fa-square-root-alt fa-lg"></i>
                        </span>
                                </div>
                                <div class="row w-100 align-items-center">
                                    <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
                                        <h6 class="mb-0">دورة أساسيات الرياضيات</h6>
                                    </div>
                                    <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
                                        <div class="badge bg-label-secondary">1.2k مشاهدة</div>
                                    </div>
                                </div>
                            </li>
                            <hr>
                            <li class="mb-3 d-flex mb-6 align-items-center">
                                <div class="avatar flex-shrink-0 me-4">
                        <span class="avatar-initial rounded bg-label-info">
                            <i class="fas fa-flask fa-lg"></i>
                        </span>
                                </div>
                                <div class="row w-100 align-items-center">
                                    <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
                                        <h6 class="mb-0">مقدمة في العلوم الطبيعية</h6>
                                    </div>
                                    <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
                                        <div class="badge bg-label-secondary">834 مشاهدة</div>
                                    </div>
                                </div>
                            </li>
                            <hr>
                            <li class="mb-3 d-flex mb-6 align-items-center">
                                <div class="avatar flex-shrink-0 me-4">
                        <span class="avatar-initial rounded bg-label-success">
                            <i class="fas fa-language fa-lg"></i>
                        </span>
                                </div>
                                <div class="row w-100 align-items-center">
                                    <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
                                        <h6 class="mb-0">أساسيات اللغة الفرنسية</h6>
                                    </div>
                                    <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
                                        <div class="badge bg-label-secondary">3.7k مشاهدة</div>
                                    </div>
                                </div>
                            </li>
                            <hr>
                            <li class="mb-3 d-flex mb-6 align-items-center">
                                <div class="avatar flex-shrink-0 me-4">
                        <span class="avatar-initial rounded bg-label-warning">
                            <i class="fas fa-book-open fa-lg"></i>
                        </span>
                                </div>
                                <div class="row w-100 align-items-center">
                                    <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
                                        <h6 class="mb-0">مهارات القراءة باللغة الإنجليزية</h6>
                                    </div>
                                    <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
                                        <div class="badge bg-label-secondary">2.5k مشاهدة</div>
                                    </div>
                                </div>
                            </li>
                            <hr>
                        </ul>
                    </div>
                </div>
            </div>




            <div class="col-12 col-xl-4 col-md-6">
                <div class="card h-100">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="card-title m-0 me-2">تقدّم الواجبات</h5>
                        <div class="dropdown">
                            <button
                                    class="btn text-body-secondary p-0"
                                    type="button"
                                    id="assignmentProgress"
                                    data-bs-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false">
                                <i class="fas fa-ellipsis-v icon-lg"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="assignmentProgress">
                                <a class="dropdown-item" href="javascript:void(0);">تحديث</a>
                                <a class="dropdown-item" href="javascript:void(0);">تحميل</a>
                                <a class="dropdown-item" href="javascript:void(0);">عرض الكل</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="p-0 m-0">
                            <li class="d-flex mb-4 pb-1">
                                <div class="chart-progress me-4" data-color="primary" data-series="72" data-progress_variant="true"></div>
                                <div class="row w-100 align-items-center">
                                    <div class="col-9">
                                        <div class="me-2">
                                            <h6 class="mb-1">الرياضيات</h6>
                                            <p class="mb-0 small">120 مهمة</p>
                                        </div>
                                    </div>
                                    <div class="col-3 text-end">
                                        <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
                                            <i class="fas fa-chevron-right icon-20px scaleX-n1-rtl"></i>
                                        </button>
                                    </div>
                                </div>
                            </li>
                            <li class="d-flex mb-4 pb-1">
                                <div class="chart-progress me-4" data-color="success" data-series="48" data-progress_variant="true"></div>
                                <div class="row w-100 align-items-center">
                                    <div class="col-9">
                                        <div class="me-2">
                                            <h6 class="mb-1">العلوم</h6>
                                            <p class="mb-0 small">32 مهمة</p>
                                        </div>
                                    </div>
                                    <div class="col-3 text-end">
                                        <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
                                            <i class="fas fa-chevron-right icon-20px scaleX-n1-rtl"></i>
                                        </button>
                                    </div>
                                </div>
                            </li>
                            <li class="d-flex mb-4 pb-1">
                                <div class="chart-progress me-4" data-color="danger" data-series="15" data-progress_variant="true"></div>
                                <div class="row w-100 align-items-center">
                                    <div class="col-9">
                                        <div class="me-2">
                                            <h6 class="mb-1">اللغة الإنجليزية</h6>
                                            <p class="mb-0 small">182 مهمة</p>
                                        </div>
                                    </div>
                                    <div class="col-3 text-end">
                                        <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
                                            <i class="fas fa-chevron-right icon-20px scaleX-n1-rtl"></i>
                                        </button>
                                    </div>
                                </div>
                            </li>
                            <li class="d-flex">
                                <div class="chart-progress me-4" data-color="info" data-series="24" data-progress_variant="true"></div>
                                <div class="row w-100 align-items-center">
                                    <div class="col-9">
                                        <div class="me-2">
                                            <h6 class="mb-1">الموسيقى</h6>
                                            <p class="mb-0 small">56 مهمة</p>
                                        </div>
                                    </div>
                                    <div class="col-3 text-end">
                                        <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
                                            <i class="fas fa-chevron-right icon-20px scaleX-n1-rtl"></i>
                                        </button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <!--  Topic and Instructors  End-->


    </div>
    <!-- / Content -->


@endsection
@section('script')
    <script src="{{asset('backend/assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>

    <!-- Main JS -->

    <!-- Page JS -->
    <script src="{{asset('backend/assets/js/app-academy-dashboard.js')}}"></script>
@endsection