<div class="right_col mt-sm-3" role="main">
  <div class="max-w-1440">
    <div class="row">
      <div class="col-sm-12 col-md-6 col-lg-4">
          <div class="stcard-box">
              <span class="shade5">
                 <%=topCount.totalAssessment%>
              </span>
              <h3 class="title-text mb-0">Total</h3>
              <img src="/images/favicon-32x32.png" class="hidden-bg">
          </div>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-4">
          <div class="stcard-box">
              <span class="shade1">
                <%=topCount.completedAssessment%>
              </span>
              <h3 class="title-text mb-0">Completed</h3>
              <img src="/images/favicon-32x32.png" class="hidden-bg">
          </div>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-4">
          <div class="stcard-box">
              <span class="shade3">
                <%=topCount.notCompleted%>
              </span>
              <h3 class="title-text mb-0">Not Completed</h3>
              <img src="/images/favicon-32x32.png" class="hidden-bg">
          </div>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-4">
          <div class="stcard-box">
              <span class="shade4"><%=topCount.overallScore%>%</span>
              <h3 class="title-text mb-0">Average Score</h3>
              <img src="/images/favicon-32x32.png" class="hidden-bg">
          </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="x_panel detailed-report-area">
          <div class="filter_top">
            <h3 class="title-text">Filters</h3>
            <ul class="filter-row">
              <li class="filter-col">
                <select class="form-control select2" id="student" tabindex="-1" data-placeholder="Select Student">
                  <option value="">Select Student</option>
                  <% for(student of students) { %>
                    <option value="<%=student.id%>">
                      <%=student.first_name+" "+student.last_name%>
                    </option>
                    <% } %>
                </select>
              </li>
              <li class="filter-col">
                <select class="form-control select2" id="status" tabindex="-1" data-placeholder="Select Status">
                  <option value="">Select status</option>
                    <option value="N/A">N/A</option>
                    <option value="Processing">Processing</option>
                    <option value="Completed">Completed</option>
                </select>
              </li>
              <li class="filter-col percent-filter" style="display: none;">
                <select class="form-control select2" id="percentage" tabindex="-1" data-placeholder="Select percentage">
                  <option value="">Select percentage</option>
                    <option value="0-50">0-50 %</option>
                    <option value="51-80">51-80 %</option>
                    <option value="81-100">81-100 %</option>
                </select>
              </li>
              <li class="filter-col filter-col-btn">
                <button class="btn theme-btn filter">Filter</button>
                <button class="btn theme-btn reset">Reset</button>
              </li>
            </ul>
          </div>
          <div class="x_title">
            <h3 class="title-text mb-0"><%=assessmentDetail.name%></h3>
          </div>
          <div class="x_content">
            <div class="row">
              <div class="col-sm-12">
                <div class="card-box table-responsive">
                  <table id="assessmentReport" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0"
                  width="100%">
                    <thead>
                        <tr>
                        <th>Student Name</th>
                        <th>Status/Percentage</th>
                        <th>Completed At</th>
                        <th>Add Comment</th>
                        <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody> 
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  /**
   * attempted assessment complete detailed report page script.
   * @script starts.
  */ 
  let assessmentId = '<%=assessmentDetail.id%>';
  $(document).ready(function () {
      $(".filter").click(function(){
        let studentId = $("#student").val();
        let status = $("#status").val();
        let percentage = $("#percentage").val();
        $('#assessmentReport').DataTable().destroy();
        dataTable(studentId,status,percentage);
      })

      $(".reset").click(function () {
        $('#assessmentReport').DataTable().destroy();
        $("#student").val(null).trigger("change");
        $("#status").val(null).trigger("change");
        $("#percentage").val(null).trigger("change");
        dataTable();
      });
      $("#status").change(function(){
        let status = $(this).val();
        $('.percent-filter').hide();
        if(status === 'Completed'){
          $('.percent-filter').show();
        }
        $('#percentage').val(null).trigger('change');
      })
      $(".select2").select2({
        allowClear: false,
      });
    dataTable();
  });

    function dataTable(studentId='', status='',percentage='') {
      const assessmentReport = $('#assessmentReport').DataTable({
          "paging": true, 
          "pageLength": 10,
          "language": { 
            "searchPlaceholder": "Search",
            "processing": '<div><div></div><div></div><div></div><div></div></div>'
          },  
          "processing": true,
          "serverSide": true, 
          "searching": false, 
          "order" : [[0, 'asc']], 
          'ajax': {
              'url': '/attempted-assessments/detailed-report/dataTable', 
              'type': 'POST', 
              'data': {
                'assessment_id': assessmentId,
                'student_id':studentId,
                'status':status,
                'percentage': percentage
              },
          }, "drawCallback":
            function (settings) {
                var response=settings.json; 
                let loggedUserRole = '<%=loggedUserInfo.role%>'; 
                $('.dt-select2').select2({
                    placeholder: "Select Lesson",
                });
                if (loggedUserRole != 2) { 
                  $('#assessmentReport').DataTable().column(3).visible(false);
                } 
            }, 'columns': [{
              data: "student_name", "render": function (data, type, row) {
                return row.student_id.first_name +' '+ row.student_id.last_name;
              }
            },
            {
              data: "final_score", "render": function (data, type, row) {
                let status = '';
                if(row.status =='Completed'){
                    status = row.final_score +'%';
                }else {
                    status = row.status;
                }
                  let html =`<div class="d-flex"> <span style="margin-right:20px;">${status}</span></div>`;
                  return html;
              }
            },
            {
              data: "status", "render": function (data, type, row) {
                if(row.status =='Completed'){
                  let completionDate = moment(row.updated_at).format('D MMMM YYYY, h:mmA');
                  return completionDate;
                }else{
                  return 'N/A';
                }
              }
            },
            {
              data: "content", 
              defaultContent: '',
              "render": function (data, type, row) {
                let assessment_id = row.assessment_id._id;
                let student_id = row.student_id._id;
                let lessonList =  getLessonsForTutorComment(assessment_id,student_id);
                let html = '<select class="form-control dt-select2" tabindex="-1" single><option value="">Select Lesson</option>';
                for (lesson of lessonList) {
                    html += `<option value="${lesson.lesson_id}" data-assessment-id="${lesson.assessment_id}" data-student-id="${lesson.student_id}">${lesson.title}</option>`;
                }
                html += `</select>`;
                return html;
              }
            },
            {
              data: "action", "render": function (data, type, row) {
                let html = '';
                if(row.status =='Completed'){
                  html +=`<div class="d-flex"><a href="/attempted-assessments/detailed-report/${row.assessment_id._id}/student/${row.student_id._id}/" class="view-report" data-id="65ebf9fb4ae3559dc9b137a9" data-toggle="tooltip" rel="tooltip" data-placement="top" title="View Result"><button class="badge badge-info complete-result  width-auto">View Result</button></a> </div>`;
                }
                return html;
              }
            },
            ],
          'columnDefs': [{
            'targets': [1, 2, 3, 4], /* column index */
            'orderable': false, /* true or false */
          }],
      });
      assessmentReport.ajax.reload( function() {
        // Reinitialize tooltips after reload
        $('[data-toggle="tooltip"]').tooltip('dispose'); 
        $('[data-toggle="tooltip"]').tooltip();
      });
    }
    
  function getLessonsForTutorComment(assessment_id,student_id){
    let responseAjax = $.ajax({
      type: "POST",
      url: '/attempted-assessments/lessons-for-tutor-comment',
      dataType: 'json',
      async:false,
      data: {
        assessment_id: assessment_id,
        student_id:student_id,
      },
      success: function (response) {
      },
    });

    const arrayUniqueByKey = [...new Map(responseAjax.responseJSON.map(item =>
    [item['lesson_id'], item])).values()];
    return arrayUniqueByKey;
  }

  $(document).on('change','.dt-select2',function(){
    let studentId =   $(this).select2().find(":selected").attr('data-student-id')
    let lessonId = $(this).val();
    var getBUrl = $(location).attr("origin")+`/attempted-assessments/detailed-report/${assessmentId}/student/${studentId}/lesson/${lessonId}`;
    window.location.href = getBUrl;
  });
    /**
   * attempted assessment report page script.
   * @script end.
  */ 
  </script>