
<div class="course_view_tital">Course View </div>

{{#tableData}}
<div id="accordion" class="acoordionTable">
  <div class="card">
    <div class="card-header collapsed" id="headingOne" data-toggle="collapse" data-target="#collapse{{index}}" aria-expanded="true" aria-controls="collapseOne">
      <div class="header-content">
        <div class="col-lg-4">
            <h3><!--<span>Course {{{index}}} : </span>--> <span>{{{courseName}}}</span></h3>
             <!--<div class="grade_progress_bar">
               <div class="grade_progress_status">
                  <div class="progress w-100">
                    <div class="progressbar zeropercent" style="width:{{{progress}}}" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                    </div>
                  </div>
                </div>
                <div class="course_per_div black-light-color d-flex align-items-center">
                  <span class="course_per_grid numperclass font-w-600 font-16 d-block">{{progress}} </span><span class="courseProgress"> course progress</span>
                </div>
            </div>-->
        </div>
        <div class="gradeHeaderDetail col-lg-8">
            <div>
                <h3>Quiz Submission Rate</h3>
                <div class="showProgress">
                    <span>{{mandatoryQuiz_percent}}</span>
                </div>
            </div>
            <div>
                <h3>Assignment Submission Rate</h3>
                <div class="showProgress">
                    <span>{{mandatoryAssignment_percent}}</span>
                </div>
            </div>
            <div>
                <h3>Course Weightage</h3>
                <div class="showProgress">
                    <span>{{weightage}}</span>
                </div>
            </div>
            <div>
                <h3>Course Grade</h3>
                <div class="showProgress">
                    <span>{{grade}}</span>
                </div>
            </div>
        </div>
      </div>
      <!-- <i class="fa fa-sort-desc" aria-hidden="true"></i>  -->
      <div class="courses_arrows">
        <img class="bottom-arrow" src="../attendenceandgrade/px/Bottom_arrow.svg" alt="">
        <img class="top-arrow" src="../attendenceandgrade/px/top_arrow.svg" alt="">
      </div>     
    </div>

    <div id="collapse{{index}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <div class="acoordionTableTab">
            <ul class="nav nav-tabs" id="myTab">
                <li class="nav-item">
                    <a href="#batches{{index}}" class="nav-link active" id="v-pills-nav-batches" data-toggle="tab">Assignment </a>
                </li>
                <li class="nav-item">
                    <a href="#electivepaths{{index}}" class="nav-link" id="v-pills-nav-electivepaths" data-toggle="tab">Quiz </a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="batches{{index}}" class="tab-pane fade show active">
                    <!-- Mandatory Assignment -->
                    <div class="Table_Outer_DIV">
                      <label class="table_top_text">Mandatory Assignment</label>
                      <p class="no-assinment-sec"><img src="../attendenceandgrade/px/Weightage_ico.svg" alt="">No Assignments in this section! </p>
                      <div id="assignmentMandatory{{index}}"  class="TableParentDiv_ma gradestbl"></div>
                    </div>

                    <!-- Practice Assignment -->
                    <div class="Table_Outer_DIV">
                      <label class="table_top_text">Practice Assignment</label>
                      <p class="no-assinment-sec"><img src="../attendenceandgrade/px/Weightage_ico.svg" alt="">No Assignments in this section! </p>
                      <div id="assignmentPractice{{index}}" class="TableParentDiv_pa gradestbl"></div>
                    </div>

                </div>
                <div id="electivepaths{{index}}" class="tab-pane fade">
                    <!-- Mandatory Quiz -->
                    <div class="Table_Outer_DIV">
                      <label class="table_top_text">Mandatory Quiz</label>
                      <p class="no-assinment-sec"><img src="../attendenceandgrade/px/Weightage_ico.svg" alt="">No Quiz in this section! </p>
                      <div id="quizMandatory{{index}}" class="TableParentDiv_mq gradestbl"></div>
                    </div>

                    <!-- Practice Quiz -->
                    <div class="Table_Outer_DIV">
                      <label class="table_top_text">Practice Quiz</label>
                      <p class="no-assinment-sec"><img src="../attendenceandgrade/px/Weightage_ico.svg" alt="">No Quiz in this section! </p>
                      <div id="quizPractice{{index}}" class="TableParentDiv_pq gradestbl"></div>
                    </div>

                </div>
            </div>
        </div>       
      </div>
    </div>
  </div>  
</div>

<script type="text/javascript">
  var jsonQuizMandatory = {{{mandatoryQuizzes}}};
  var jsonQuizPractice = {{{practiceQuizzes}}};
  var jsonDataMandatory = {{{mandatoryAssignments}}};
  var jsonDataPractice =  {{{practiceAssignments}}};

  document.querySelector(`#${(assignmentMandatory{{index}}).id}`).appendChild(makeTable(jsonDataMandatory));
  document.querySelector(`#${(assignmentPractice{{index}}).id}`).appendChild(makeTable(jsonDataPractice));
  document.querySelector(`#${(quizMandatory{{index}}).id}`).appendChild(makeTable(jsonQuizMandatory));
  document.querySelector(`#${(quizPractice{{index}}).id}`).appendChild(makeTable(jsonQuizPractice));


  // return html table element from array of objects
  function makeTable(json_objects_arr) {
    var table = document.createElement('table');
    var keys = getKeysFromArray(json_objects_arr);
    table.appendChild(makeTHEAD(keys));
    table.appendChild(makeTBODY(json_objects_arr, keys));
    return table;
  }

  // make header row from array of keys
  function makeTHEAD(keys) {
    var newArray = [];
    for(let i =0; i<keys.length; i++) {
      const result = keys[i].replace(/([A-Z])/g, " $1");
      const finalResult = result.charAt(0).toUpperCase() + result.slice(1);
      newArray.push(finalResult);
    }
    var thead = document.createElement('thead');
    var tr = document.createElement('tr');
    newArray.forEach(function(key) {
      var th = document.createElement('th');
      var imgico = document.createElement('img'); // for thead icon
      var Weightagetxt = document.createElement('div'); // content for Weightage
      th.textContent = key;
      tr.appendChild(th);
      if(key == "Weightage") { // condition for Weightage head 
        imgico.src = "../../local/attendenceandgrade/px/Weightage_ico.svg";
        th.appendChild(imgico);
        Weightagetxt.innerText = ('This indicates the weight that the activity carries. This means that a higher weight item will contribute more to the total score and vice-versa.');
        th.appendChild(Weightagetxt);
      } 
      if(key == "Feedback") { // condition for Feedback head
        imgico.src = "../../local/attendenceandgrade/px/Weightage_ico.svg";
        th.appendChild(imgico);
        th.appendChild(imgico);Weightagetxt.innerText = ('This section will show the comments given by the faculty on your work. It will help you to improve your performance.');
        th.appendChild(Weightagetxt);
      } 
    });
      thead.appendChild(tr);
      return thead;
  }

  // make rows from key values in json
  function makeTBODY(json, keys) {
    var tbody = document.createElement('tbody');
    json.forEach(function(object){
      let tr = document.createElement('tr');
      keys.forEach(function(key) {
        var td = document.createElement('td');
        if(key == "feedback") {
          td.innerHTML = object[key];
        } else {
          td.textContent = object[key];
        }
        tr.appendChild(td);
      });
        tbody.appendChild(tr);
    });
      return tbody;
  }

  // return alphabetized array of keys from all objects in an array
  function getKeysFromArray(json_objects_arr) {
    var array_of_keys = [];
    json_objects_arr.forEach(function(obj){
      Object.keys(obj).forEach(function(key){
        if (!(array_of_keys.includes(key))) {
            if(key != "scoredMarks" && key != "maxMarks"){
              array_of_keys.push(key);
            }
        }
      });
    });
    let a = array_of_keys.slice(2,4); 
    let actualKey = [...array_of_keys,...a];
    let c = actualKey.splice(2,2);
    return actualKey;
  }
        
  // js for empty states
  $(".Table_Outer_DIV table").each(function() {
      $("table tbody tr td").parent().parent().parent().parent().parent().addClass('remove_table_label');
  });

  // js for view more
  $('.gradestbl').each(function(){
    var LiN = $(this).find('.gradesitem').length;
    if( LiN > 2){    
      $('.gradesitem', this).eq(1).nextAll().hide().addClass('toggleable');
      $(this).append('<tr class="more"><td>View More<td></tr>');  
        $('.more').css("height", "100px").css("width", "100px").css("background-color", "yellow"); 
    }  
  });
        
  $('.gradestbl').on('click','.more', function(){
    if( $(this).hasClass('less') ){    
      $(this).text('View More').removeClass('less');    
    }else{
      $(this).text('View Less').addClass('less'); 
    }
    $(this).siblings('.toggleable').slideToggle(); 
  }); 
  
</script>
{{/tableData}}
