<div class="right_col mt-sm-3" role="main">
  <div class="max-w-1440">
    <div class="card-block mb-20">
      <h2 class="title-text">Filter Report</h2>
      <ul class="filter-row">
        <li class="filter-col">
          <select
            class="form-control select2"
            id="student"
            tabindex="-1"
            data-placeholder="Select Students"
          >
            <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">
          <input
            type="text"
            name="date"
            class="form-control"
            placeholder="Enter Date"
            id="datepicker"
          />
          <span></span> <b class="caret"></b>
        </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="resultBoxCard" ID="resultBoxCard">
      <div class="result-section" style="display: none">
        <div class="x_panel">
          <div class="flex-panel">
            <h2 class="title-text mb-0">Searched Results</h2>
            <button class="btn theme-btn filter w-auto downloadBtn">
              <span><img src="/images/download.svg" alt="" /></span> 
              Export to PDF
            </button>
          </div>
          <div class="x_content bodypart">
            <div class="card-box tableresponsive">
              <div class="innerbody">
                <div class="innerbody_area">
                  <div class="tableHeader greenZone">
                    Sound Knowledge achieved (Scored 80 - 100%)
                  </div>
                  <div class="table-responsive">
                    <table
                      id="assessment-result"
                      class="table table-striped align-middle table-bordered dt-responsive nowrap"
                      cellspacing="0"
                      width="100%"
                    >
                      <tbody class="firstTable">
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="innerbody_area">
                  <div class="tableHeader yelloBox">
                    Working towards achieving these skills (Scored 50 - 79%)
                  </div>
                  <div class="table-responsive">
                    <table
                      id="assessmentTable"
                      class="table table-striped align-middle table-bordered dt-responsive nowrap"
                      cellspacing="0"
                      width="100%"
                    >
                      <tbody class="secondTable">
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="innerbody_area">
                  <div class="tableHeader redBox">
                    Experiencing difficulty achieving these skills (Scored 0 -
                    49%)
                  </div>
                  <div class="table-responsive">
                    <table
                      id="assessmentTable"
                      class="table table-striped align-middle table-bordered dt-responsive nowrap"
                      cellspacing="0"
                      width="100%"
                    >
                      <tbody class="thirdTable">
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 col-sm-12 loader-section" style="text-align: center; display: none">
        <img src="/images/loader-data.gif" alt="" srcset="" />
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.1/html2pdf.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script>
  $(document).ready(function () {
      const defaultStart = moment().subtract(29, 'days');
      const defaultEnd = moment();
      
      function updateDatePickerDisplay(start, end) {
          $('#datepicker span').html(`${start.format('YYYY-MM-DD')} / ${end.format('YYYY-MM-DD')}`);
      }
      
      function initializeDatePicker(start, end) {
          $('#datepicker').daterangepicker({
              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')]
              }
          }, updateDatePickerDisplay);
      }
      
      initializeDatePicker(defaultStart, defaultEnd);
      updateDatePickerDisplay(defaultStart, defaultEnd);
      
      $('.filter').click(function(){
          const studentId = $('#student').val();
          const tutorId = $('#tutor').val();
          const selectedDateRange = $('#datepicker').val();
          fetchSingleStudentResult(studentId, tutorId, selectedDateRange);
          $('.result-section').show();
      });
      
      $('.reset').click(function(){
          $('#student, #tutor').val(null).trigger('change.select2');
          initializeDatePicker(defaultStart, defaultEnd);
          updateDatePickerDisplay(defaultStart, defaultEnd);
          fetchSingleStudentResult(null, null, null);
          $('.result-section').hide();
      });

      $('.downloadBtn').click(function(){
          $(this).hide();
          const options = {
              margin: 0.3,
              filename: 'student-result.pdf',
              image: {
                  type: 'jpeg',
                  quality: 0.98
              },
              html2canvas: {
                  scale: 2
              },
              jsPDF: {
                  unit: 'in',
                  format: 'a4',
                  orientation: 'portrait'
              }
          }
          var element = document.getElementById('resultBoxCard');
          html2pdf().from(element).set(options).save().then((result) => {
              $(this).show();
          }).catch((err) => {
              console.log(err);
          });
      })

      $(".select2").select2({
        allowClear: false,
      });

  });
  function setTodayTomorrow() {
   
  }
  function fetchSingleStudentResult(studentId,tutorId,selectedDateRange){
      $.ajax({
          type: "POST",
          url: '/attempted-assessments/filter-report',
          dataType: 'json',
          data: {
              student_id: studentId,
              date_range: selectedDateRange,
              tutor_id: tutorId,
          },
          success: function (response) {
              if(response.result){
                  /* ---------------first level table-----------------*/
                  let firstLevelData = response.data.level_1;
                  let htmlFirst = '';
                  if(firstLevelData.length > 0){
                      for(let levelFirst in firstLevelData){
                          htmlFirst += `<tr>
                              <td>
                                  <div class="matchtitle">${firstLevelData[levelFirst].name}</div>
                              </td>
                              <td>${firstLevelData[levelFirst].date}</td>
                              <td>${firstLevelData[levelFirst].percentage} %</td>
                              <td>${firstLevelData[levelFirst].correct_answer} / ${firstLevelData[levelFirst].total_question}</td>
                          </tr>`;
                      }
                  }else{
                      htmlFirst = `<tr> <td><div class="none">No records were found.</div></td></tr>`;
                  }
                  $('.firstTable').html(htmlFirst);

                  /* ---------------second level table-----------------*/

                  let secondLevelData = response.data.level_2;
                  let htmlSecond = '';
                  if(secondLevelData.length > 0){
                      for(let levelSecond in secondLevelData){
                          htmlSecond += `<tr>
                              <td>
                                  <div class="matchtitle">${secondLevelData[levelSecond].name}</div>
                              </td>
                              <td>${secondLevelData[levelSecond].date}</td>
                              <td>${secondLevelData[levelSecond].percentage} %</td>
                              <td>${secondLevelData[levelSecond].correct_answer} / ${secondLevelData[levelSecond].total_question}</td>
                          </tr>`;
                      }
                  }else{
                      htmlSecond = `<tr> <td><div class="none">No records were found.</div></td></tr>`;
                  }
                  $('.secondTable').html(htmlSecond);

                  /* ---------------third level table-----------------*/
                  let htmlThird = '';
                  let thirdLevelData = response.data.level_3;
                  if(thirdLevelData.length > 0){
                      for(let levelThird in thirdLevelData){
                          htmlThird += `<tr>
                              <td>
                                  <div class="matchtitle">${thirdLevelData[levelThird].name}</div>
                              </td>
                              <td>${thirdLevelData[levelThird].date}</td>
                              <td>${thirdLevelData[levelThird].percentage} %</td>
                              <td>${thirdLevelData[levelThird].correct_answer} / ${thirdLevelData[levelThird].total_question}</td>
                          </tr>`;
                      }
                  }else{
                      htmlThird = `<tr> <td><div class="none">No records were found.</div></td></tr>`;
                  }
                  $('.thirdTable').html(htmlThird);
              }
          },
      })
  }
</script>
