@extends('layouts.user.app')
@section('page_title','Dashboard')
@push('content')
   
    <div class="row">
        <div class="col-lg-8 mt-4">
            <div>
                <div class="d-none d-md-flex justify-content-between align-items-end">
                    <div>
                        <h3>Welcome, {{ getAuthUser("name") }}</h4>
                            <p class="text-muted mb-0">Let’s learn something new today!</p>
                    </div>
                    <div class="">
                        <button class="btn btn-primary">Add Course</button>
                    </div>
                </div>
                <div class="card mt-5">
                    <div class="card-body d-flex statistics_board">
                        <div class="flex-grow-1 border-right px-4 flex-shrink-0 flex-lg-shrink-1" style="width: 280px;">
                            <div>
                                <p class="border-bottom pb-3 bolder">Total Courses</p>
                            </div>
                            <div class="d-flex justify-content-between align-items-center p-2">
                                <div>
                                    <p class="bolder h4">2</p>
                                    <p class="mb-0 small">Total Course </p>
                                </div>
                                <div class="rounded-circle p-3" style="background: #FFF6E8;">
                                    <img src="./assets/img/icon/course-book.svg">
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-1 border-right px-4 flex-shrink-0 flex-lg-shrink-1" style="width: 280px;">
                            <div>
                                <p class="border-bottom pb-3 bolder">Inbox</p>
                            </div>
                            <div class="d-flex justify-content-between align-items-center p-2">
                                <div>
                                    <p class="bolder h4">8</p>
                                    <p class="mb-0 small">Messages</p>
                                </div>
                                <div>
                                    <img src="./assets/img/icon/evelop.svg">
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-1 px-4 flex-shrink-0 flex-lg-shrink-1" style="width: 280px;">
                            <div>
                                <p class="border-bottom pb-3 bolder">Enrollment</p>
                            </div>
                            <div class="d-flex justify-content-between align-items-center p-2">
                                <div>
                                    <p class="bolder h4">52</p>
                                    <p class="mb-0 small">Training</p>
                                </div>
                                <div class="rounded-circle p-3" style="background: #E1D7FA;">
                                    <img src="./assets/img/icon/users.svg">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="card mt-3 d-none d-lg-block">
                    <div class="card-body">
                        <div class="m-auto" style="max-width: 500px;">
                            <div class="d-flex justify-content-between">
                                <h4 class="bolder mb-0">November 2023</h4>
                                <button class="btn border">View All <i class="fa fa-arrow-right"></i></button>
                            </div>
                            <div class="calendar-grid mt-4">
                                <div class="bolder">Sunday</div>
                                <div class="bolder">Monday</div>
                                <div class="bolder">Tuesday</div>
                                <div class="bolder">Wednesday</div>
                                <div class="bolder">Friday</div>
                                <div class="bolder">Saturday</div>
                            </div>
                            <div class="calendar-item mt-4">
                                <p>1</p>
                                <p>2</p>
                                <p>3</p>
                                <p>4</p>
                                <p>5</p>
                                <p>6</p>
                                <p>7</p>
                                <p>8</p>
                                <p>9</p>
                                <p>10</p>
                                <p>11</p>
                                <p>12</p>
                                <p>13</p>
                                <p>14</p>
                                <p>15</p>
                                <p>16</p>
                                <p class="active">17</p>
                                <p>18</p>
                                <p>19</p>
                                <p>20</p>
                                <p>21</p>
                                <p>22</p>
                                <p>23</p>
                                <p class="current">24</p>
                                <p>25</p>
                                <p>26</p>
                                <p>27</p>
                                <p>28</p>
                                <p>29</p>
                                <p>30</p>
                                <p>31</p>
                                <p class="off"></p>
                                <p class="off"></p>
                                <p class="off"></p>
                                <p class="off"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mt-4 position-relative">
           @include('incs.user.aside_profile')
            <div class="card mt-3 d-block d-lg-none">
                <div class="card-body">
                    <div class="calender m-auto">
                        <div class="vanilla-calendar" id="calendar1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-lg-8">
            <div>
                <h4>Courses List</h4>
            </div>
            <div>
                <div class="row">
                    <div class="col-sm-6 course mt-2">
                        <div class="card  py-2">
                            <div class="card-body">
                                <div class="img position-relative">
                                    <img src="{{ url('') }}/assets/img/courses/course1.jpg" class="w-100">
                                    <div class="level_">
                                        <span class="small">Beginner</span>
                                        <div class="range">
                                            <span class="active_green"></span>
                                            <span></span>
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <p class="bolder">Creating Beautiful Landing Page in 1 Hour</p>
                                    <div class="mt-2 d-flex justify-content-between align-items-center">
                                        <div class="profile d-flex align-items-center">
                                            <img src="{{ url('') }}/assets/img/profiles/user2.png">
                                            <p class="mb-0 text-muted" style="margin-left: 10px;">Simon Bola
                                            </p>
                                        </div>
                                        <p><i class="fa fa-star text-warning"></i> 4.5</p>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2">
                                        <p class="text-muted small mb-0"><i class="fa fa-user"></i> 500
                                            Student
                                        </p>
                                        <p class="text-muted small mb-0"><i class="ri-article-line"></i> 5
                                            Modules</p>
                                        <p class="text-muted small mb-0"><i class="fa fa-clock"></i> 1h 30m
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 course mt-2">
                        <div class="card py-2">
                            <div class="card-body">
                                <div class="img">
                                    <img src="{{ url('') }}/assets/img/courses/course2.jpg" class="w-100">
                                    <div class="level_">
                                        <span class="small">Beginner</span>
                                        <div class="range">
                                            <span class="active_red"></span>
                                            <span class="active_red"></span>
                                            <span class="active_red"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <p class="bolder">Creating Beautiful Landing Page in 1 Hour</p>
                                    <div class="mt-2 d-flex justify-content-between align-items-center">
                                        <div class="profile d-flex align-items-center">
                                            <img src="{{ url('') }}/assets/img/profiles/user3.png">
                                            <p class="mb-0 text-muted" style="margin-left: 10px;">Simon Bola
                                            </p>
                                        </div>
                                        <p><i class="fa fa-star text-warning"></i> 4.5</p>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2">
                                        <p class="text-muted small mb-0"><i class="fa fa-user"></i> 500
                                            Student
                                        </p>
                                        <p class="text-muted small mb-0"><i class="ri-article-line"></i> 5
                                            Modules</p>
                                        <p class="text-muted small mb-0"><i class="fa fa-clock"></i> 1h 30m
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endpush