@extends('dashboard.layouts.default')
@section('content')
<section class="top-section">
  <div class="container-fluid">
    <div class="row g-3">

      @include('layout.top-ads')
      <div class="col-lg-12">
        <div class="manage-sec">
          <a class="btn btn-manage active" href="{{ url('teacher/performance') }}"><i class="bx bxs-star me-1"></i>Performance</a>
         <!-- <a class="btn btn-manage" href="{{ url('teacher/performances') }}"><i class="bx bxs-star me-1"></i>Performance New</a> -->
          <a class="btn btn-manage" href="{{ url('teacher/quiz_tracker') }}"><i class="bx bxs-message-rounded-dots me-1"></i>Quiz Tracker</a>
          <a class="btn btn-manage d-none" href="{{ url('teacher/quiz_tracker') }}"><i class="bx bx-video-recording me-1"></i>Video Tracker</a>
          @if(isset($tuition_status) && $tuition_status != '')
          <a class="btn btn-manage" href="{{ url('teacher/tuition_attendance') }}"><i class="bx bx-badge-check me-1"></i>Tuition Attendance</a>
          @endif 
        </div>
        <div class="card border-rad-left-0">
          <div class="card-body">
            <div class="row">
              <div class="col-md-8">
                <div class="d-flex align-items-center overflow-auto" id="yearDiv">
                  @foreach($years_filter as $key=>$year)
                  <input type="checkbox" class="btn-check checkyear selector_class_button_check" name="year_id[]" value="{{ $year->id }}" id="year_id-{{ $year->id }}" onclick="getClasses({{ $year->id }}, 0)" autocomplete="off">
                  <label class="btn btn-year me-1 mb-1 checkyear selector_class_button_check" for="year_id-{{ $year->id }}">{{ $year->year }}</label>
                  @endforeach
                </div>
                <div class="d-flex align-items-center overflow-auto" id="classes_div">
                </div>
                <div id="subject_div" style="display: none;">
                  <div class="d-flex align-items-center overflow-auto">
                    @foreach($subjects as $key=>$subject)
                    <input type="checkbox" class="btn-check checksubject selector_class_button_check" name="subject_id[]" value="{{ $subject->id }}" id="subject_id-{{ $subject->id }}" onclick="checkSubjects({{ $subject->id }})" autocomplete="off">
                    <label class="btn btn-year me-1 mb-1 checksubject selector_class_button_check" for="subject_id-{{ $subject->id }}">{{ $subject->name }}</label>
                    @endforeach
                  </div>
                </div>
                <input type="hidden" name="searched_value" id="searched_value" value=""/>
              </div>
              <div class="col-md-4">
                <div class="input-group mb-3" id="kt_daterangepicker1">
                  <input type="text" class="form-control drpicker" id="item_range" readonly placeholder="Select date range">
                  <span class="input-group-text" for="item_range"><i class='bx bxs-calendar'></i></span>
                </div>
              </div>
            </div>
            <div class="">
              <table class="table table-striped table-hover display" id="dataTables" style="width:100%">
                <thead>
                  <tr>                    
                    <!-- <th class="no-export" style="display:none;"></th> -->
                    <th class="text-start fw-semibold">First Name</th>
                    <th class="text-start fw-semibold">Last Name</th>
                    <th style="display: none;" class="no-export fw-semibold">S name</th>
                    <th class="no-export text-start fw-semibold" style="display: none;">Pupil name</th>
                    <th class="fw-semibold no-export ">Enter student account</th>
                    <th class="fw-semibold">Class</th>
                    <th class="fw-semibold">Days since last login</th>
                    <th class="fw-semibold">Total minutes watched</th>
                    <!--<th class="fw-semibold">Average % of each video watched</th> -->
                   <!-- <th class="fw-semibold">Total videos watched</th> -->
                    <th class="fw-semibold">Total questions answered</th>
                    <th class="fw-semibold">% of questions correct</th>
                    @if($school_id == 6161 || $school_id == 9)
                    <th class="fw-semibold">Retrieval Quizzes Completed</th>
                    @endif
                    <!-- <th class="fw-semibold">Total correct answers</th> -->
                    <th style="display: none;" class="no-export fw-semibold">Class Name</th>
                   <!-- <th class="fw-semibold">Total points</th> -->
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
            <input id="from" type='hidden' value="" />
            <input id="to" type='hidden' value="" />
            <input id="first_date" type='hidden' value="{{$first_date}}" />
            <input id="firstdate" type='hidden' value="{{$firstdate}}" />
          </div>
        </div>
      </div>
      @include('layout.bottom-ads')
    </div>
  </div>
</section>
@endsection
@section('scripts')
<script>
  function getAttemptedQuiz(fromDt, toDt, year_id, class_id, subject_id) {
  
  
  $(".selector_class_button_check").attr("disabled", true);
  $(".selector_class_button").removeClass('disableActiveButton');
  $(".selector_class_button").addClass('disableActiveButton');
  
  //$('label.checkyear span').attr('style', 'background-color: #dfdfdf !important');
  //$('label.checkclass span').attr('style', 'background-color: #dfdfdf !important');
  //$('label.checksubject span').attr('style', 'background-color: #dfdfdf !important');
  
  
  
  var table;  
  var subject_ids = [];
  var class_ids = [];
  var year_ids = [];
  
  if ( $.fn.DataTable.isDataTable('#dataTables') )
  {
   $('#dataTables').DataTable().destroy();
     $('#dataTables tbody').empty(); 
    
  }
  
  $('input:checkbox.checksubject').each(function () {
                var sThisVal = (this.checked ? subject_ids.push($(this).val()) : "");
            });
  
            $('input:checkbox.checkclass').each(function () {
                var sThisVal = (this.checked ? class_ids.push($(this).val()) : "");
            });
  
            var year_ids = [];
            $('input:checkbox.checkyear').each(function () {
                if (this.checked) {
                    year_ids.push(this.value);
                }
  
            });
            if(year_ids.length == 0){
                year_ids.push('');
            }
  
  table = $('#dataTables').DataTable({
    searching: true,
    paging: true, 
    // info: false,
    bSearchable: true,
    pagination: true,
    // pageLength: 5,
    searchDelay: 500,
    processing: true,
    serverSide: true,
    responsive: true,
  
    fixedHeader: true,
   // scrollY: "55vh",
  //  scrollX: true,
  //  scrollCollapse: true,
    /*bSearchable: true,
            pagination: true,
            // pageLength: 10,
            responsive: true,
  
            fixedHeader: true,
      //      scrollY: "55vh",
       //     scrollX: true,
    //        scrollCollapse: true,
  
            searchDelay: 500,
            processing: true,
            serverSide: true,
            deferLoading: 0,*/
    language: {
                "emptyTable": "No results found",
                "search": "Search student:"
  
            },
    initComplete: function (settings, json) {  
        $("#dataTables").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
    },
    "aLengthMenu": [[25, 50, 100, 500, -1], [25, 50, 100, 500, "All"]],
            "pageLength": 25,
          dom: "<'row g-2 align-items-center justify-content-between'<'col text-start'l><'col-auto'f><'col-auto'B>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-12 col-md-5 text-start'i><'col-sm-12 col-md-7'p>>",
        buttons: [
            {
              extend: 'excel',
              text: '<i class="bx bx-export fs-6"></i> Export',
              title: 'Performance',
              className: 'btn btn-primary btn-sm w-100 quiz-export',
              exportOptions: {
                  columns: ':not(.no-export)'
              },
              action: newexportaction
            }
        ],
        order: [[ 8, "desc" ]],
            ajax: {
                url: "{{ url('teacher/performance/lists') }}",
                data: {'from':fromDt,'to':toDt,'limit':5,'year_ids':year_ids,'class_ids':class_ids,'subject_ids':subject_ids},
                
            },
  
  
            columns: [
                // {data: 'row_id', name: 'row_id',visible: false},
                {data: 'first_name', name: 'first_name',sClass: 'text-start text-nowrap fw-semibold'},
                {data: 'last_name', name: 'last_name',sClass: 'text-start text-nowrap fw-semibold'},
                {data: 'sName', name: 'sName',visible: false},
                {data: 'studentName', name: 'studentName', sClass: 'text-start text-nowrap fw-semibold',visible: false},
                {data: 'switch_student', name: 'switch_student', searchable: false},
                {data: 'class', name: 'class', searchable: false},
                {data: 'last_login', name: 'last_login', searchable: false},
                {
                    data: 'min_video_watched',
                    name: 'min_video_watched',
                    searchable: false,
                    orderSequence: ["desc", "asc"]
                },
             //   {
               //     data: 'percentage_video_watched',
                 //   name: 'percentage_video_watched',
                //    searchable: false,
                //    orderSequence: ["desc", "asc"]
              //  },
             //   {
               //     data: 'video_watched_count',
                 //   name: 'video_watched_count',
                 //   searchable: false,
                 //   orderSequence: ["desc", "asc"]
              //  },
                {data: 'noOfAnswered', name: 'noOfAnswered', searchable: false, orderSequence: ["desc", "asc"]},
                {
                    data: 'noOfCorrectAnswered',
                    name: 'noOfCorrectAnswered',
                    searchable: false,
                    orderSequence: ["desc", "asc"]
                },
                @if($school_id == 6161 || $school_id == 9)
                {data: 'retrieval_completed', name: 'retrieval_completed', searchable: false, orderSequence: ["desc", "asc"]},
                @endif
               // {data: 'totalCorrectAnswers', name: 'totalCorrectAnswers', searchable: false, orderSequence: ["desc", "asc"]},
                {data: "class_firstname",name:'class_firstname', visible:false},
              //  {data: 'totalPoints', name: 'totalPoints', searchable: false, orderSequence: ["desc", "asc"]},
  
            ],
            "columnDefs": [
                        {
                            "targets": [ 0 ],
                            "searchable": false,
                            orderData: [ 0 ]
  
                        },
                        {
                            targets: [ 1 ],
                            orderData: [ 1 ]
                        },
                        {
                            "targets": [5],
                          //  orderData: [ 10 ],
                        }
                ],
            initComplete: function (settings, json) {  
                    $("#dataTables").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
  
                setTimeout(
                  function() 
                  {
                    $(".selector_class_button_check").attr("disabled", false);
                    $(".selector_class_button").removeClass('disableActiveButton');
                    //$('label.checkyear span').attr('style', 'background-color: #187DE4 !important');
                    //$('label.checkclass span').attr('style', 'background-color: #187DE4 !important');
                    //$('label.checksubject span').attr('style', 'background-color: #187DE4 !important');
                    //do something special
                  }, 100);
                
            },
    });
  }    
    //jQuery(document).ready(function () {
        //KTApexChartsDemo.init();
       // KTWidgetsS.init();
       var first_date = $('#first_date').val();
       var firstdate = $('#firstdate').val();
       var firstdatestart = moment(firstdate);
        var start = moment(first_date);//.subtract(30, 'days');
        var end = moment();
  
                    
                    currentYr = (new Date).getFullYear();
                    const d = new Date(); 
                    var month = d. getMonth() + 1; // Month [mm] (1 - 12)
                    //zmonth = ("0"+(d.getMonth()+1)).slice(-2);
                    //console.log(currentYr+'-'+month+'-'+zm);
  
                    if(month<9)
                    {
                        academicyear = currentYr-1;
                    }else{
                        academicyear = currentYr;
                    }
  
                    nxtYear = academicyear+1;
  
                    
  
        $('#kt_daterangepicker1').daterangepicker({
            buttonClasses: ' btn'
            , applyClass: 'btn-primary'
            , cancelClass: 'btn-secondary'
            , startDate: start
            , endDate: end
            , ranges: {
                'Last 7 Days': [moment().subtract(6, 'days'), moment()]
                , 'Last 14 Days': [moment().subtract(13, 'days'), moment()]
                , 'Last 30 Days': [moment().subtract(29, 'days'), moment()]
                , 'Last 60 Days': [moment().subtract(59, 'days'), moment()]
                , 'This Academic Year': [moment( academicyear+'-09-01'), moment(nxtYear+'-08-31')]
                , 'Show All': [moment(firstdate),moment()]
            }
        }, function (start, end, label) {
            if(start.format('MMMM D, YYYY')!='Invalid date' && start.format('MMMM D, YYYY')!='Invalid date')
            {
                $('#kt_daterangepicker1 .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
            }else{
                $('#kt_daterangepicker1').data('daterangepicker').setStartDate(moment(firstdate));
                $('#kt_daterangepicker1').data('daterangepicker').setEndDate(moment());
                $('#kt_daterangepicker1 .form-control').val(moment(firstdate).format('MMMM D, YYYY') + ' / ' + moment().format('MMMM D, YYYY'));
            }
            
        });
        if(start.format('MMMM D, YYYY')!='Invalid date' && start.format('MMMM D, YYYY')!='Invalid date')
        {
            $('#kt_daterangepicker1 .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        }
        else{
        // Set default value to "Show All" on initialization
            $('#kt_daterangepicker1').data('daterangepicker').setStartDate(moment(firstdate));
            $('#kt_daterangepicker1').data('daterangepicker').setEndDate(moment());
            $('#kt_daterangepicker1 .form-control').val(moment(firstdate).format('MMMM D, YYYY') + ' / ' + moment().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");
            
            if (!picker.startDate.isValid() || !picker.endDate.isValid()) {
                $(this).val('')
                $('#from').val('');
                $('#to').val('');
            }else{
               // $('#from').val(from);
               // $('#to').val(to);
            }
            
            getAttemptedQuiz(from, to);
            //        table.ajax.reload();
  
            //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');
        if(from!='Invalid date' || end!='Invalid date')
        {
            $('#from').val(from);
            $('#to').val(to);
        }else{
            $('#from').val('');
                $('#to').val('');
        }
        getAttemptedQuiz(from, to);
        
   // });
  
  
</script>
<script>
  $(function () {