@extends('layout.default') @section('content')
<!--begin::Content-->
<!--Begin::Row-->

<div class="row">
    <div class="col-lg-12">
        <div class="card card-custom card-stretch gutter-b">
            <!--begin::Header-->
            <div class="card-header border-0 py-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">GENERAL DATA</span>
                </h3> </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-0 pb-3">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card card-custom pt-10 gutter-b">
                            <div class="card-header">
                                <div class="col-sm-6">
                                    <h3 class="card-label">Sales Chart</h3> </div>
                                <div class="col-sm-6">
                                    <div class='input-group' id='kt_daterangepicker1'>
                                        <input id="item_range" type='text' class="form-control" readonly placeholder="Select date range" />
                                        <div class="input-group-append"> <span class="input-group-text"><i class="la la-calendar-check-o"></i></span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <!--begin::Chart-->
                                <div id="sales_chart"></div>
                                <!--end::Chart-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="display:none;">
                    
                         <div class="col-sm-6">
                              <p class="text-dark mt-3 font-weight-bold font-size-lg"> Most Attempted Quizzes </p>
                         </div>

                            <div class="col-sm-6">
                                    <div class='input-group' id='daterangepicker'>
                                        <input id="item_range" type='text' class="form-control" readonly placeholder="Select date range" />
                                        <div class="input-group-append"> <span class="input-group-text"><i class="la la-calendar-check-o"></i></span> </div>
                                    </div>
                            </div>
                        <div class="col-xl-12">    
                        <!--begin::Table-->
                        <div class="table-responsive">
                          
                            <table class="table table-head-custom table-head-bg table-borderless table-vertical-center" id="quizdataTables"  style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Rank</th>
                                        <th>Video number</th>
                                        <th>Video name</th>
                                        <th>Curriculum</th>
                                        <th>Subject</th>
                                        <th>Topic</th>
                                        <th>Chapter</th>
                                        <th width="5%">Number of times QUIZ has been attempted</th>
                                        <th width="5%">Average percentage answered correctly</th>
                                    </tr>
                                </thead>
                                <tbody>
                                   
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="4"><a href="admin/most_attempt_quiz" class="btn btn-xs btn-primary" style="float:right;" title="View More">View More >></a></td>
                                </tr>
                              </tfoot>
                            </table>
                        </div>
                        <!--end::Table-->
                     
                    </div>
                   
                </div>
                <br>
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card card-custom pt-10 gutter-b">
                            <div class="card-header">
                                <div class="col-sm-6">
                                    <h3 class="card-label">Student Chart</h3> </div>
                                <div class="col-sm-6">
                                    <div class='input-group' id='kt_daterangepicker'>
                                        <input id="item_range" type='text' class="form-control" readonly placeholder="Select date range" />
                                        <div class="input-group-append"> <span class="input-group-text"><i class="la la-calendar-check-o"></i></span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <!--begin::Chart-->
                                <div id="student_chart"></div>
                                <!--end::Chart-->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="row">
            <div class="col-xl-6">
                <div class="card card-custom bg-light-info card-stretch gutter-b">
                    <div class="card-body d-flex align-items-center py-0 mt-8">
                        <div class="d-flex flex-column flex-grow-1 py-2 py-lg-5">
                            <a class="card-title font-weight-bolder text-dark-75 font-size-h5 mb-2 text-hover-primary"></a>
                            <span class="font-weight-bold text-dark  font-size-sm">Least Attempted Quizzes</span>
                        </div>
                        <img src="assets/media/svg/avatars/029-boy-11.svg"  alt="" class="align-self-end h-100px"/>
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="card card-custom bg-light-warning card-stretch gutter-b">
                    <div class="card-body d-flex align-items-center py-0 mt-8">
                        <div class="d-flex flex-column flex-grow-1 py-2 py-lg-5">
                            <a class="card-title font-weight-bolder text-dark-75 font-size-h5 mb-2 text-hover-primary"></a>
                            <span class="font-weight-bold text-dark  font-size-sm">Least Watched Videos</span>
                        </div>
                        <img src="assets/media/svg/avatars/014-girl-7.svg"  alt="" class="align-self-end h-100px"/>
                    </div>
                </div>
            </div>
        </div> --></div>
            <!--end::Body-->
        </div>
    </div>
</div>

<!-- BEGIN SCHOOL DATA -->
<div class="row">
    <div class="col-lg-12">
        <!--begin::Advance Table Widget 4-->
        <div class="card card-custom card-stretch gutter-b">
            <!--begin::Header-->
            <div class="card-header border-0 py-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">SCHOOL DATA</span>
                </h3> </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-0">
                <div class="row pb-5">
                    <div class="row col-xl-9">
                        <div class="col-xl-6 pb-5">
                            <!--begin::Stats Widget 25-->
                            <a class="card shadow card-custom bg-white">
                                <!--begin::Body-->
                                <div class="card-body card-pad d-flex bg-blbl align-items-center"> <span class="card-title card-h-size font-weight-bolder text-black mb-0">{{ $school_payment_recieved }}</span>&nbsp;&nbsp;&nbsp;&nbsp; <span class="font-weight-bold text-black font-size-h6 font-size-sm">Payments received</span> </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stats Widget 25-->
                        </div>
                        <div class="col-xl-6 pb-5">
                            <!--begin::Stats Widget 28-->
                            <a class="card shadow card-custom bg-white">
                                <!--begin::Body-->
                                <div class="card-body card-pad d-flex bg-blbl align-items-center"> <span class="card-title card-h-size font-weight-bolder text-black mb-0">{{ $avg_no_teachers_per_school }}</span>&nbsp;&nbsp;&nbsp;&nbsp; <span class="font-weight-bold text-black font-size-h6 font-size-sm">Avg no. of teachers per school</span> </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stat: Widget 28-->
                        </div>
                       {{-- <div class="col-xl-6 pb-5">
                            <!--begin::Stats Widget 25-->
                            <a class="card shadow card-custom bg-white">
                                <!--begin::Body-->
                                <div class="card-body card-pad d-flex bg-blbl align-items-center"> <span class="card-title card-h-size font-weight-bolder text-black mb-0">{{ $avg_no_students_per_school }}</span>&nbsp;&nbsp;&nbsp;&nbsp; <span class="font-weight-bold text-black font-size-h6 font-size-sm">Avg no. of students per school</span> </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stats Widget 25-->
                        </div>
                        <div class="col-xl-6 pb-5">
                            <!--begin::Stats Widget 25-->
                            <a class="card shadow card-custom bg-white">
                                <!--begin::Body-->
                                <div class="card-body card-pad d-flex bg-blbl align-items-center"> <span class="card-title card-h-size font-weight-bolder text-black mb-0">{{ $avg_no_students_per_school }}</span>&nbsp;&nbsp;&nbsp;&nbsp; <span class="font-weight-bold text-black font-size-h6 font-size-sm">Avg no. of students per school</span> </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stats Widget 25-->
                        </div>--}}
                    </div>
                    <div class="row col-xl">
                        <div class="col-xl">
                            <!--begin::Stats Widget 29-->
                            <a  href="{{ url('/admin/school/pending/filter')}}" class="card card-custom bg-danger card-stretch gutter-b">
                                <!--begin::Body-->
                                <div class="card-body"><span class="card-title font-weight-bolder text-white font-size-h2 mb-0 mt-6 d-block">{{ $school_activation_pending }}</span> <span class="font-weight-bold text-white font-size-h6">School Activation Pending</span> </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stats Widget 29-->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="row col-xl-12">
                        <div class="col-xl-3">
                            <!--begin::Stats Widget 29-->
                            <a href="{{ url('admin/school') }}" class="card card-custom card-hi bg-kay2 card-stretch gutter-b">
                                <!--begin::Body-->
                                <div class="card-body d-flex flex-row"> <span class="svg-icon svg-icon-2x svg-icon-white">
                                    </span> <span class="font-weight-bolder text-white font-size-h2">{{ $registered_schools_count }}&nbsp;&nbsp;&nbsp;
                                        <span class="font-weight-bold text-white font-size-h6">Registered Schools</span></span>
                                </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stats Widget 29-->
                        </div>
                        <div class="col-xl-3">
                            <!--begin::Stats Widget 29-->
                            <a href="{{ url('admin/teachers') }}" class="card card-custom bg-kay2 card-stretch gutter-b">
                                <!--begin::Body-->
                                <div class="card-body d-flex flex-row"> <span class="svg-icon svg-icon-2x svg-icon-white">
                                    </span> <span class="font-weight-bolder text-white font-size-h2">{{ $registered_teachers_count }}&nbsp;&nbsp;&nbsp;
                                        <span class="font-weight-bold text-white font-size-h6">Registered Teachers</span></span>
                                </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stats Widget 29-->
                        </div>
                        <div class="col-xl-3">
                            <!--begin::Stats Widget 32-->
                            <a href="{{ url('/admin/students/type/teacher')}}" class="card card-custom bg-kay2 card-stretch gutter-b">
                                <!--begin::Body-->
                                <div class="card-body d-flex flex-row"> <span class="svg-icon svg-icon-2x svg-icon-white">
                                    </span> <span class="font-weight-bolder text-white font-size-h2">{{ $school_students_count }} &nbsp;&nbsp;&nbsp;
                                        <span class="font-weight-bold text-white font-size-h6 font-size-sm">Total School Students</span></span>
                                </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stats Widget 32-->
                        </div>
                        <div class="col-xl-3">
                            <!--begin::Stats Widget 27-->
                            <a href="{{ url('admin/enquiries') }}" class="card card-custom bg-kay2 card-stretch gutter-b">
                                <!--begin::Body-->
                                <div class="card-body d-flex flex-row"> <span class="svg-icon svg-icon-2x svg-icon-white">
                                    </span> <span class="font-weight-bolder text-white font-size-h2">{{ $school_enquiries }}&nbsp;&nbsp;&nbsp;
                                        <span class="font-weight-bold text-white font-size-h6 font-size-sm">School Enquiries</span></span>
                                </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stats Widget 27-->
                        </div>
                    </div>
                </div>
               
                <!--end::Body-->
            </div>
            <!--end::Advance Table Widget 4-->
        </div>
    </div>
</div>
<!-- END SCHOOL DATA -->
<!-- BEGIN PRIVATE STUDENT DATA -->
<div class="row">
    <div class="col-lg-12">
        <!--begin::Advance Table Widget 4-->
        <div class="card card-custom card-stretch gutter-b">
            <!--begin::Header-->
            <div class="card-header border-0 py-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">PRIVATE STUDENT DATA</span>
                </h3> 
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-0 pb-3">
                <div class="row pb-5">
                    <div class="col-xl">
                        <!--begin::Stats Widget 25-->
                        <a  class="card card-custom bg-white shadow">
                            <!--begin::ody-->
                            <div class="card-body bg-blbl px-10 pb-5 pt-3">
                                <span class="card-title card-h-size font-weight-bolder text-black mb-0 d-block">{{ $private_students_count }}</span> <span class="font-weight-bold text-black font-size-h6 font-size-sm">Private student count</span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 25-->
                    </div>
                    <div class="col-xl">
                        <!--begin::Stats Widget 26-->
                        <a  class="card card-custom bg-white shadow">
                            <!--begin::ody-->
                            <div class="card-body bg-blbl px-10 pb-5 pt-3"> 
                                <span class="card-title card-h-size font-weight-bolder text-black mb-0 d-block">{{ $private_payment_recieved }}</span> <span class="font-weight-bold text-black font-size-h6 font-size-sm">Payments received</span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 26-->
                    </div>
                    <div class="col-xl">
                        <!--begin::Stats Widget 26-->
                        <a class="card card-custom bg-white shadow">
                            <!--begin::ody-->
                            <div class="card-body bg-blbl px-10 pb-5 pt-3">
                                <span class="card-title card-h-size font-weight-bolder text-black mb-0 d-block">{{ $private_free_accounts }}</span> <span class="font-weight-bold text-black font-size-h6 font-size-sm">Free Accounts</span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 26-->
                    </div>
                    <div class="col-xl">
                        <!--begin::Stats Widget 32-->
                        <a class="card card-custom bg-danger">
                            <!--begin::Body-->
                            <div class="card-body bg-blbl px-5 pb-5 pt-3">
                                <span class="card-title card-h-size font-weight-bolder text-white mb-0 d-block">{{ $private_student_deleted_accounts }}</span> <span class="font-weight-bold text-white font-size-h6 font-size-sm">Cancelled / Deleted Accounts</span> 
                            </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 32-->
                    </div>
                  
                </div>
                <div class="row">
                    <div class="row col-xl-12"> 
                        <div class="col-xl-4">
                            <!--begin::Stats Widget 29-->
                            <a href="{{ url('admin/students') }}" class="card card-custom card-hi bg-kay2 card-stretch gutter-b">
                                <!--begin::Body-->
                                <div class="card-body d-flex flex-row"> <span class="svg-icon svg-icon-2x svg-icon-white">
                                    </span> <span class="font-weight-bolder text-white font-size-h2">{{ $dau }}&nbsp;&nbsp;&nbsp;
                                        <span class="font-weight-bold text-white font-size-h6">Daily active user count                                        </span></span>
                                </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stats Widget 29-->
                        </div>
                        <div class="col-xl-4">
                            <!--begin::Stats Widget 29-->
                            <a href="{{ url('admin/students') }}" class="card card-custom card-hi bg-kay2 card-stretch gutter-b">
                                <!--begin::Body-->
                                <div class="card-body d-flex flex-row"> <span class="svg-icon svg-icon-2x svg-icon-white">
                                    </span> <span class="font-weight-bolder text-white font-size-h2">{{ $wau }}&nbsp;&nbsp;&nbsp;
                                        <span class="font-weight-bold text-white font-size-h6">Weekly active user count                                        </span></span>
                                </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stats Widget 29-->
                        </div>
                        <div class="col-xl-4">
                            <!--begin::Stats Widget 29-->
                            <a href="{{ url('admin/students') }}" class="card card-custom card-hi bg-kay2 card-stretch gutter-b">
                                <!--begin::Body-->
                                <div class="card-body d-flex flex-row"> <span class="svg-icon svg-icon-2x svg-icon-white">
                                    </span> <span class="font-weight-bolder text-white font-size-h2">{{ $mau }}&nbsp;&nbsp;&nbsp;
                                        <span class="font-weight-bold text-white font-size-h6">Monthly active user count                                        </span></span>
                                </div>
                                <!--end::Body-->
                            </a>
                            <!--end::Stats Widget 29-->
                        </div>
                    </div>    
                </div>
               <div class="row">
                    <div class="col-xl-12">
                        <div class="card card-custom pt-10 gutter-b">
                            <div class="card-header">
                                <div class="col-sm-6">
                                    <h3 class="card-label">Student Sales Chart</h3> </div>
                                <div class="col-sm-6">
                                    <div class='input-group' id='kt_daterangepicker2'>
                                        <input id="item_range" type='text' class="form-control" readonly placeholder="Select date range" />
                                        <div class="input-group-append"> <span class="input-group-text"><i class="la la-calendar-check-o"></i></span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <!--begin::Chart-->
                                <div id="private_student_chart"></div>
                                <!--end::Chart-->
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Body-->
            </div>
            <!--end::Advance Table Widget 4-->
        </div>
    </div>
</div>
<!-- END PRIVATE STUDENT DATA -->
<!-- BEGIN TUTOR DATA -->
<div class="row">
    <div class="col-lg-12">
        <!--begin::Advance Table Widget 4-->
        <div class="card card-custom card-stretch gutter-b">
            <!--begin::Header-->
            <div class="card-header border-0 py-5">
                <h3 class="card-title align-items-start flex-column">
                        <span class="card-label font-weight-bolder text-dark">TUTOR DATA</span>
                    </h3>
            </div>
            <!--end::Header-->

            <!--begin::Body-->
            <div class="card-body pt-0 pb-3">
                <div class="row">
                    <div class="col-xl">
                        <!--begin::Stats Widget 29-->
                        <a href="{{ url('admin/tutors') }}" class="card card-custom bg-white shadow card-stretch gutter-b">
                            <!--begin::Body-->
                            <div class="card-body bg-blbl"> <span class="card-title font-weight-bolder text-black font-size-h2 mb-0 mt-6 d-block">{{ $registered_tutors_count }}</span> <span class="font-weight-bold text-black font-size-h6">Registered Tutors</span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 29-->
                    </div>
                    <div class="col-xl">
                        <!--begin::Stats Widget 27-->
                        <a class="card card-custom bg-white shadow card-stretch gutter-b">
                            <!--begin::Body-->
                            <div class="card-body bg-blbl"> <span class="card-title font-weight-bolder text-black font-size-h2 mb-0 mt-6 d-block">{{ $active_free_students }}</span> <span class="font-weight-bold text-black font-size-h6 font-size-sm">Active free students</span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 27-->
                    </div>
                    <div class="col-xl">
                        <!--begin::Stats Widget 27-->
                        <a class="card card-custom bg-white shadow card-stretch gutter-b">
                            <!--begin::Body-->
                            <div class="card-body bg-blbl"> <span class="card-title font-weight-bolder text-black font-size-h2 mb-0 mt-6 d-block">{{ $active_paid_students }}</span> <span class="font-weight-bold text-black font-size-h6 font-size-sm">Active paid students</span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 27-->
                    </div>
                    <div class="col-xl">
                        <!--begin::Stats Widget 27-->
                        <a class="card card-custom bg-white shadow card-stretch gutter-b">
                            <!--begin::Body-->
                            <div class="card-body bg-blbl"> <span class="card-title font-weight-bolder text-black font-size-h2 mb-0 mt-6 d-block">{{ $active_free_students }}</span> <span class="font-weight-bold text-black font-size-h6 font-size-sm">Expired free students </span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 27-->
                    </div>
                    <div class="col-xl">
                        <!--begin::Stats Widget 27-->
                        <a class="card card-custom bg-white shadow card-stretch gutter-b">
                            <!--begin::Body-->
                            <div class="card-body bg-blbl"> <span class="card-title font-weight-bolder text-black font-size-h2 mb-0 mt-6 d-block">{{ $active_free_students }}</span> <span class="font-weight-bold text-black font-size-h6 font-size-sm">Expired paid students</span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 27-->
                    </div>
                   
                 </div>   
                 <div class="row">   
                    <div class="col-xl">
                        <!--begin::Stats Widget 29-->
                        <a class="card card-custom bg-white shadow card-stretch gutter-b">
                            <!--begin::Body-->
                            <div class="card-body bg-blbl"> <span class="card-title font-weight-bolder text-black font-size-h2 mb-0 mt-6 d-block">{{ $tutor_payment_recieved }}</span> <span class="font-weight-bold text-black font-size-h6">Payments received</span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 29-->
                    </div>
                    <div class="col-xl">
                        <!--begin::Stats Widget 27-->
                        <a class="card card-custom bg-white shadow card-stretch gutter-b">
                            <!--begin::Body-->
                            <div class="card-body bg-blbl"> <span class="card-title font-weight-bolder text-black font-size-h2 mb-0 mt-6 d-block">{{ $deleted_tutor_account }}</span> <span class="font-weight-bold text-black font-size-h6 font-size-sm">Active trial accounts </span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 27-->
                    </div>
                    <div class="col-xl">
                        <!--begin::Stats Widget 32-->
                        <a class="card card-custom bg-danger card-stretch gutter-b">
                            <!--begin::Body-->
                            <div class="card-body"> <span class="card-title font-weight-bolder text-white font-size-h2 mb-0 mt-6 text-hover-primary d-block">{{ $tutor_deleted_accounts }}</span> <span class="font-weight-bold text-white font-size-h6 font-size-sm">Expired trial accounts </span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 32-->
                    </div>
                    <div class="col-xl">
                        <!--begin::Stats Widget 32-->
                        <a class="card card-custom bg-danger card-stretch gutter-b">
                            <!--begin::Body-->
                            <div class="card-body"> <span class="card-title font-weight-bolder text-white font-size-h2 mb-0 mt-6 text-hover-primary d-block">{{ $deleted_tutor_account }}</span> <span class="font-weight-bold text-white font-size-h6 font-size-sm">Cancelled/deleted tutor accounts </span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 32-->
                    </div>
                    <div class="col-xl">
                        <!--begin::Stats Widget 32-->
                        <a class="card card-custom bg-danger card-stretch gutter-b">
                            <!--begin::Body-->
                            <div class="card-body"> <span class="card-title font-weight-bolder text-white font-size-h2 mb-0 mt-6 text-hover-primary d-block">{{ $deleted_student_account }}</span> <span class="font-weight-bold text-white font-size-h6 font-size-sm">Cancelled/deleted student accounts</span> </div>
                            <!--end::Body-->
                        </a>
                        <!--end::Stats Widget 32-->
                    </div>
                  </div>  
                  
                </div>
             <div class="row">
                        <div class="col-xl-12">
                            <div class="card card-custom pt-10 gutter-b">
                                <div class="card-header">
                                    <div class="col-sm-6">
                                        <h3 class="card-label">Tutor Sales Chart</h3> </div>
                                    <div class="col-sm-6">
                                        <div class='input-group' id='kt_daterangepicker3'>
                                            <input id="item_range" type='text' class="form-control" readonly placeholder="Select date range" />
                                            <div class="input-group-append"> <span class="input-group-text"><i class="la la-calendar-check-o"></i></span> </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <!--begin::Chart-->
                                    <div id="tutor_chart"></div>
                                    <!--end::Chart-->
                                </div>
                            </div>
                        </div>
                    </div>
                
            </div>
        </div>
     </div>

<!-- END TUTOR DATA -->

<!-- BEGIN HEAR ABOUT US DATA -->
<div class="row">
    <div class="col-lg-12">
        <!--begin::Advance Table Widget 4-->
        <div class="card card-custom card-stretch gutter-b">
            <!--begin::Header-->
            <div class="card-header border-0 py-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">HEAR ABOUT US DATA</span>
                </h3> </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-0">
                <div class="row pb-5">
                    <div class="row col-xl-12"> 
                        <div class="col-xl-4">                            
                         <div class="col-sm-6">
                              <p class="font-weight-bold text-black font-size-h6 font-size-sm"> Institute </p>
                         </div>                          
                        <div class="col-xl-12">    
                        <!--begin::Table-->
                            <div class="table-responsive">                          
                                <table class="table table-hover display nowrap order-column" id="institutetable"  style="width:100%">
                                    <thead>
                                        <tr>
                                            <th width="20%">Title</th>
                                            <th width="4%">Count</th>                                       
                                        </tr>
                                    </thead>
                                    <tbody>                                   
                                    </tbody>
                                </table>
                            </div>
                        <!--end::Table-->
                        </div>
                        </div>
                      
                        <div class="col-xl-4">                            
                         <div class="col-sm-6">
                              <p class="font-weight-bold text-black font-size-h6 font-size-sm"> Tutor </p>
                         </div>                          
                        <div class="col-xl-12">    
                        <!--begin::Table-->
                            <div class="table-responsive">                          
                                <table class="table table-hover display nowrap order-column" id="tutortable"  style="width:100%">
                                    <thead>
                                        <tr>
                                            <th width="20%">Title</th>
                                            <th width="4%">Count</th>                                    
                                        </tr>
                                    </thead>
                                    <tbody>                                   
                                    </tbody>
                                </table>
                            </div>
                        <!--end::Table-->
                        </div>
                        </div>

                        <div class="col-xl-4">                            
                         <div class="col-sm-6">
                              <p class="font-weight-bold text-black font-size-h6 font-size-sm"> Student </p>
                         </div>                          
                        <div class="col-xl-12">    
                        <!--begin::Table-->
                            <div class="table-responsive">                          
                                <table class="table table-hover display nowrap order-column" id="studenttable"  style="width:100%">
                                    <thead>
                                        <tr>
                                            <th width="20%">Title</th>
                                            <th width="4%">Count</th>                             
                                        </tr>
                                    </thead>
                                    <tbody>                                   
                                    </tbody>
                                </table>
                            </div>
                        <!--end::Table-->
                        </div>
                        </div>

                    </div>                  
                </div>               
                <!--end::Body-->
            </div>
            <!--end::Advance Table Widget 4-->
        </div>
    </div>
</div>
<!-- END HEAR ABOUT US DATA -->
</div>
</div>
 @endsection
 @section('styles')
<link href="{{ url('plugins/custom/datatables/datatables.bundle.css?v=7.0.6')}}" rel="stylesheet" type="text/css"/>
@endsection

@section('scripts')
<script src="{{ url('plugins/custom/datatables/datatables.bundle.js?v=7.0.6')}}"></script>
<script src="{{ url('assets/js/pages/widgets.js?v=7.0.6') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<!-- <script src="assets/js/pages/features/charts/apexcharts.js?v=7.0.6"></script> -->
<script>
    const primary = '#6993FF';
    const success = '#1BC5BD';
    const info = '#8950FC';
    const warning = '#FFA800';
    const danger = '#F64E60';

function getAttemptedQuiz(fromDt, toDt) {


    var table;  

     if ( $.fn.DataTable.isDataTable('#quizdataTables') )
    {
       $('#quizdataTables').DataTable().destroy();
         $('#quizdataTables tbody').empty(); 
        
    }

    table = $('#quizdataTables').DataTable({
        searching: false,
        paging: false, 
        info: false,
        bSearchable: false,
        pagination: false,
        pageLength: 5,
        searchDelay: 500,
        processing: true,
        serverSide: true,
        initComplete: function (settings, json) {  
    
        $("#quizdataTables").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");},
        ajax: {
            url: "{{ url('admin/most_attempt_quiz/lists') }}",
            data: {'from':fromDt,'to':toDt,'limit':5}
        },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
            {data: 'unit_code', name: 'unit_code'},
            {data: 'name', name: 'name'},
            {data: 'curriculum', name: 'curriculum'},
            {data: 'subject', name: 'subject'},
            {data: 'topic', name: 'topic'},
            {data: 'chapter', name: 'chapter'},
            {data: 'attempt_count', name: 'attempt_count', orderable: false, searchable: false},
            {data: 'ans_percentage', name: 'ans_percentage', orderable: false, searchable: false},
           
        ]
    });
}  

    function showSalesChart(from, to) {
        if (from != null && to != null) {
            $.ajax({
                url: "admin/sales_chart",
                data:{'from':from,'to':to},
                type: "POST"
                , dataType: "html"
            , }).done(function (a) {
                var data = JSON.parse(a);
                console.log(data);
                salesdaywiseChart.updateOptions({
                    xaxis: {
                        categories: data.category
                    }
                });
                salesdaywiseChart.updateSeries([{
                    name: 'Sales Count',
                    data: data.sales
                    
                    }])
            });
        }
    }
    var salesdaywiseChartOptions = {
        series: []
        , chart: {
            height: 350
            , type: 'line'
            , toolbar: {
                show: false
            }
        , }
        , plotOptions: {
            bar: {
                horizontal: false
                , columnWidth: '55%'
                , endingShape: 'rounded'
            }
        , }
        , dataLabels: {
            enabled: true
        }
        , stroke: {
            curve: 'smooth'
        }
        , noData: {
            text: '... No Data ...'
        }
        , xaxis: {
            categories: []
        }
        , yaxis: {
            title: {
                text: 'No. of sales'
            }
            , labels: {
                formatter: function (val) {
                    return val.toFixed(0);
                }
            }
        , }
        , colors: [primary, success, warning]
    };
    var salesdaywiseChart = new ApexCharts(document.querySelector("#sales_chart"), salesdaywiseChartOptions);
    salesdaywiseChart.render();
    
 function showStudentChart(from, to) {
        if (from != null && to != null) {
            $.ajax({
                url: "admin/student_chart/" + from + "/" + to
                , type: "GET"
                , dataType: "html"
            , }).done(function (a) {
                var data = JSON.parse(a);
                // console.log(data.data+'-'+data.category);
                // if (data.flagError == true) {
                //     // showAlert(data.message, "error");
                // } else {
                daywiseChart.updateOptions({
                    xaxis: {
                        categories: data.category
                    }
                });
                daywiseChart.updateSeries([{
                    name: 'School Student Count'
                    , data: data.school
                    }, {
                    name: 'Tutor Student Count'
                    , data: data.tutor
                    }, {
                    name: 'Private Student Count'
                    , data: data.private
                    }])
            });
        }
    }
    var daywiseChartOptions = {
        series: []
        , chart: {
            height: 350
            , type: 'line'
            , toolbar: {
                show: false
            }
        , }
        , plotOptions: {
            bar: {
                horizontal: false
                , columnWidth: '55%'
                , endingShape: 'rounded'
            }
        , }
        , dataLabels: {
            enabled: true
        }
        , stroke: {
            curve: 'smooth'
        }
        , noData: {
            text: '... No Data ...'
        }
        , xaxis: {
            categories: []
        }
        , yaxis: {
            title: {
                text: 'No. of students'
            }
            , labels: {
                formatter: function (val) {
                    return val.toFixed(0);
                }
            }
        , }
        , colors: [primary, success, warning]
    };
    var daywiseChart = new ApexCharts(document.querySelector("#student_chart"), daywiseChartOptions);
    daywiseChart.render();
   


   function showPrivateStudChart(from, to) {
        if (from != null && to != null) {
            $.ajax({
                url: "admin/sales_chart",
                data:{'from':from,'to':to,'type':'private'},
                type: "POST"
                , dataType: "html"
            , }).done(function (a) {
                var data = JSON.parse(a);
                console.log(data);
                priStdSalesDaywiseChart.updateOptions({
                    xaxis: {
                        categories: data.category
                    }
                });
                priStdSalesDaywiseChart.updateSeries([{
                    name: 'Sales Count',
                    data: data.sales
                    
                    }])
            });
        }
    }
    var priStdSalesDaywiseChartOptions = {
        series: []
        , chart: {
            height: 350
            , type: 'line'
            , toolbar: {
                show: false
            }
        , }
        , plotOptions: {
            bar: {
                horizontal: false
                , columnWidth: '55%'
                , endingShape: 'rounded'
            }
        , }
        , dataLabels: {
            enabled: true
        }
        , stroke: {
            curve: 'smooth'
        }
        , noData: {
            text: '... No Data ...'
        }
        , xaxis: {
            categories: []
        }
        , yaxis: {
            title: {
                text: 'No. of sales'
            }
            , labels: {
                formatter: function (val) {
                    return val.toFixed(0);
                }
            }
        , }
        , colors: [primary, success, warning]
    };
    var priStdSalesDaywiseChart = new ApexCharts(document.querySelector("#private_student_chart"), priStdSalesDaywiseChartOptions);
    priStdSalesDaywiseChart.render();


    function showTutorChart(from, to) {
        if (from != null && to != null) {
            $.ajax({
                url: "admin/sales_chart",
                data:{'from':from,'to':to,'type':'tutor'},
                type: "POST"
                , dataType: "html"
            , }).done(function (a) {
                var data = JSON.parse(a);
                console.log(data);
                tutorSalesDaywiseChart.updateOptions({
                    xaxis: {
                        categories: data.category
                    }
                });
                tutorSalesDaywiseChart.updateSeries([{
                    name: 'Sales Count',
                    data: data.sales
                    
                    }])
            });
        }
    }
    var tutorSalesDaywiseChartOptions = {
        series: []
        , chart: {
            height: 350
            , type: 'line'
            , toolbar: {
                show: false
            }
        , }
        , plotOptions: {
            bar: {
                horizontal: false
                , columnWidth: '55%'
                , endingShape: 'rounded'
            }
        , }
        , dataLabels: {
            enabled: true
        }
        , stroke: {
            curve: 'smooth'
        }
        , noData: {
            text: '... No Data ...'
        }
        , xaxis: {
            categories: []
        }
        , yaxis: {
            title: {
                text: 'No. of sales'
            }
            , labels: {
                formatter: function (val) {
                    return val.toFixed(0);
                }
            }
        , }
        , colors: [primary, success, warning]
    };
    var tutorSalesDaywiseChart = new ApexCharts(document.querySelector("#tutor_chart"), tutorSalesDaywiseChartOptions);
    tutorSalesDaywiseChart.render();
    

    jQuery(document).ready(function () {
        //KTApexChartsDemo.init();
       // KTWidgetsS.init();
        var start = moment().subtract(30, 'days');
        var end = moment();
        $('#kt_daterangepicker').daterangepicker({
            buttonClasses: ' btn'
            , applyClass: 'btn-primary'
            , cancelClass: 'btn-secondary'
            , startDate: start
            , endDate: end
            , ranges: {
                'Today': [moment(), moment()]
                , 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
                , 'Last 7 Days': [moment().subtract(6, 'days'), moment()]
                , 'Last 30 Days': [moment().subtract(29, 'days'), moment()]
                , 'This Month': [moment().startOf('month'), moment().endOf('month')]
                , 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, function (start, end, label) {
            $('#kt_daterangepicker .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        });
        $('#kt_daterangepicker .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        $('#kt_daterangepicker').on('apply.daterangepicker', function (ev, picker) {
            var from = picker.startDate.format('YYYY-MM-DD');
            var to = picker.endDate.format('YYYY-MM-DD');
            // $.LoadingOverlay("show");
            showStudentChart(from, to);
        });
        var from = $('#kt_daterangepicker').data('daterangepicker').startDate.format('YYYY-MM-DD');
        var to = $('#kt_daterangepicker').data('daterangepicker').endDate.format('YYYY-MM-DD');
        showStudentChart(from, to);


// Sales chart
         $('#kt_daterangepicker1').daterangepicker({
            buttonClasses: ' btn'
            , applyClass: 'btn-primary'
            , cancelClass: 'btn-secondary'
            , startDate: start
            , endDate: end
            , ranges: {
                'Today': [moment(), moment()]
                , 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
                , 'Last 7 Days': [moment().subtract(6, 'days'), moment()]
                , 'Last 30 Days': [moment().subtract(29, 'days'), moment()]
                , 'This Month': [moment().startOf('month'), moment().endOf('month')]
                , 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, function (start, end, label) {
            $('#kt_daterangepicker1 .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        });
        $('#kt_daterangepicker1 .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        $('#kt_daterangepicker1').on('apply.daterangepicker', function (ev, picker) {
            var from = picker.startDate.format('YYYY-MM-DD');
            var to = picker.endDate.format('YYYY-MM-DD');
            // $.LoadingOverlay("show");
            showSalesChart(from, to);
        });
        var from = $('#kt_daterangepicker1').data('daterangepicker').startDate.format('YYYY-MM-DD');
        var to = $('#kt_daterangepicker1').data('daterangepicker').endDate.format('YYYY-MM-DD');
        showSalesChart(from, to);


        // Private student sales 
         $('#kt_daterangepicker2').daterangepicker({
            buttonClasses: ' btn'
            , applyClass: 'btn-primary'
            , cancelClass: 'btn-secondary'
            , startDate: start
            , endDate: end
            , ranges: {
                'Today': [moment(), moment()]
                , 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
                , 'Last 7 Days': [moment().subtract(6, 'days'), moment()]
                , 'Last 30 Days': [moment().subtract(29, 'days'), moment()]
                , 'This Month': [moment().startOf('month'), moment().endOf('month')]
                , 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, function (start, end, label) {
            $('#kt_daterangepicker2 .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        });
        $('#kt_daterangepicker2 .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        $('#kt_daterangepicker2').on('apply.daterangepicker', function (ev, picker) {
            var from = picker.startDate.format('YYYY-MM-DD');
            var to = picker.endDate.format('YYYY-MM-DD');
            // $.LoadingOverlay("show");
            showPrivateStudChart(from, to);
        });
        var from = $('#kt_daterangepicker2').data('daterangepicker').startDate.format('YYYY-MM-DD');
        var to = $('#kt_daterangepicker2').data('daterangepicker').endDate.format('YYYY-MM-DD');
        showPrivateStudChart(from, to);



        // Tutor sales 
         $('#kt_daterangepicker3').daterangepicker({
            buttonClasses: ' btn'
            , applyClass: 'btn-primary'
            , cancelClass: 'btn-secondary'
            , startDate: start
            , endDate: end
            , ranges: {
                'Today': [moment(), moment()]
                , 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
                , 'Last 7 Days': [moment().subtract(6, 'days'), moment()]
                , 'Last 30 Days': [moment().subtract(29, 'days'), moment()]
                , 'This Month': [moment().startOf('month'), moment().endOf('month')]
                , 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, function (start, end, label) {
            $('#kt_daterangepicker3 .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        });
        $('#kt_daterangepicker3 .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        $('#kt_daterangepicker3').on('apply.daterangepicker', function (ev, picker) {
            var from = picker.startDate.format('YYYY-MM-DD');
            var to = picker.endDate.format('YYYY-MM-DD');
            // $.LoadingOverlay("show");
            showTutorChart(from, to);
        });
        var from = $('#kt_daterangepicker3').data('daterangepicker').startDate.format('YYYY-MM-DD');
        var to = $('#kt_daterangepicker3').data('daterangepicker').endDate.format('YYYY-MM-DD');
        showTutorChart(from, to);


          $('#daterangepicker').daterangepicker({
            buttonClasses: ' btn'
            , applyClass: 'btn-primary'
            , cancelClass: 'btn-secondary'
            , startDate: start
            , endDate: end
            , ranges: {
                'Today': [moment(), moment()]
                , 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
                , 'Last 7 Days': [moment().subtract(6, 'days'), moment()]
                , 'Last 30 Days': [moment().subtract(29, 'days'), moment()]
                , 'This Month': [moment().startOf('month'), moment().endOf('month')]
                , 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, function (start, end, label) {
            $('#daterangepicker .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        });

        $('#daterangepicker .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        $('#daterangepicker').on('apply.daterangepicker', function (ev, picker) {
            var from = picker.startDate.format('YYYY-MM-DD');
            var to = picker.endDate.format('YYYY-MM-DD');
            // $.LoadingOverlay("show");
          //  getAttemptedQuiz(from, to);
        });
        var from = $('#daterangepicker').data('daterangepicker').startDate.format('YYYY-MM-DD');
        var to = $('#daterangepicker').data('daterangepicker').endDate.format('YYYY-MM-DD');
      //  getAttemptedQuiz(from, to);
    });


    $(document).ready(function() {
            getInstituteCount();
            getTutorCount();
            getStudentCount();
    });

    function getInstituteCount() {        
        var itable;  
        if ( $.fn.DataTable.isDataTable('#institutetable') )
        {
        $('#institutetable').DataTable().destroy();
            $('#institutetable tbody').empty(); 
        }
        itable = $('#institutetable').DataTable({
        searching: false,
        paging: true, 
        info: false,
        bSearchable: false,
        pagination: true,
        pageLength: 15,
        searchDelay: 500,
        processing: true,
        serverSide: true,
        "order": [[ 1, "desc" ]],
        "aLengthMenu": [[15, 50, 75, -1], [15, 50, 75, "All"]],
        "iDisplayLength": 15,
        initComplete: function (settings, json) {  
            $("#institutetable").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
        },
        ajax: {
            url: "{{ url('admin/institute_hear_about_us/lists') }}",
            data: {'limit':15}
        },
        columns: [
            {data: 'title', name: 'title'},
            {data: 'count', name: 'count'}                       
        ]
        });
    }

    function getTutorCount() {
        var ttable;  
        if ( $.fn.DataTable.isDataTable('#tutortable') )
        {
        $('#tutortable').DataTable().destroy();
            $('#tutortable tbody').empty(); 
        }
        ttable = $('#tutortable').DataTable({
        searching: false,
        paging: true, 
        info: false,
        bSearchable: false,
        pagination: true,
        pageLength: 15,
        searchDelay: 500,
        processing: true,
        serverSide: true,
        "order": [[ 1, "desc" ]],
        "aLengthMenu": [[15, 50, 75, -1], [15, 50, 75, "All"]],
        "iDisplayLength": 15,
        initComplete: function (settings, json) {  
            $("#tutortable").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
        },
        ajax: {
            url: "{{ url('admin/tutor_hear_about_us/lists') }}",
            data: {'limit':15}
        },
        columns: [
            {data: 'title', name: 'title'},
            {data: 'count', name: 'count'}               
        ]
        });
    }

    function getStudentCount() {          
            var dtable;  
            if ( $.fn.DataTable.isDataTable('#studenttable') )
            {
            $('#studenttable').DataTable().destroy();
                $('#studenttable tbody').empty();             
            }
            dtable = $('#studenttable').DataTable({
            searching: false,
            paging: true, 
            info: false,
            bSearchable: false,
            pagination: true,
            pageLength: 15,
            searchDelay: 500,
            processing: true,
            serverSide: true,
            "order": [[ 1, "desc" ]],
            "aLengthMenu": [[15, 50, 75, -1], [15, 50, 75, "All"]],
            "iDisplayLength": 15,
            initComplete: function (settings, json) {  
                $("#studenttable").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
            },
            ajax: {
                url: "{{ url('admin/student_hear_about_us/lists') }}",
                data: {'limit':15}
            },
            columns: [
                {data: 'title', name: 'title'},
                {data: 'count', name: 'count'}               
            ]
            });   
    }
</script> @endsection