{%include "header.html"%}
{% load static %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<style>
  .nav-link {
    min-width: 150px;
    color: black;
  }
  .nav-link:hover {
    min-width: 150px;
    color: black;
  }
  input[type="radio"] {
    accent-color: black;
    height:18px;
    width: 18px;
  }
  .exam-title {
    color: black;
    font-size: 18px;
    margin-right: 20px;
  }
  .card-bg {
    background-color: aliceblue;
    
  }
  .card {
    border: none;
  }
  thead {
    background: #233568;
    color: white;
  }
</style>
 <!-- Header Layout Content -->
 <div class="mdk-header-layout__content">

  <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
      <div class="mdk-drawer-layout__content page">

          <div class="container-fluid page__heading-container">
              <div class="page__heading">
                  <nav aria-label="breadcrumb">
                      <ol class="breadcrumb mb-0">
                          <li class="breadcrumb-item"><a href="#"><i
                                      class="material-icons icon-20pt">home</i></a></li>
                          <!-- <li class="breadcrumb-item">Exam Module</li> -->
                          <li class="breadcrumb-item active" aria-current="page">Create Course</li>
                      </ol>
                  </nav>
              </div>

              <div class="row mb-3">
                  <div class="col-6">
                      <h1 class="heading">Create Course</h1>
                  </div>
                  <div class="col-6">
                      <div class="d-flex justify-content-end">
                          <button type="button" class="add-btn" data-toggle="modal"
                              data-target="#exam-category-modal">Add Course</button>
                      </div>
                  </div>
              </div>
          </div>



          <div class="container-fluid page__container exam-module">
              <div class="card card-form">
<section class="mt-4">
  <h3><img src="{% static 'website/assets/img/analysis.png' %}" alt="practice"
    title="practice" style="width: 25px;"> Analysis</h3><br>

   <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active border" id="all-tab" data-bs-toggle="pill" data-bs-target="#all" type="button" role="tab" aria-controls="all" aria-selected="true">Overall</button>
      </li>
      {% for section in sections %}
      <li class="nav-item" role="presentation">
        <button class="nav-link border ms-2 section" data-id="{{section.id}}" id="lr-tab" data-bs-toggle="pill" data-bs-target="#subject_tab" type="button" role="tab" aria-controls="lr" aria-selected="false">{{section.section_name}}</button>
      </li>
      {% endfor %}
      <li class="nav-item" role="presentation">
        <button class="nav-link border ms-2" id="all-tab" data-bs-toggle="pill" data-bs-target="#abc_analysis" type="button" role="tab" aria-controls="all" aria-selected="true">ABC Analysis</button>
      </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
        <div class="card card-body card-bg">
        <section class="mt-4">
            <div>
               <!-- <div class="row">
                  <div class="col-md-4 mt-4">
                     <div class="card">
                        <div class="card-body text-center">
                           <h3 class="text-center ">Accuracy</h3>
                           <h2 class="text-center fw-bold m-4">{{overall_accuracy}}%</h2>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4 mt-4">
                     <div class="card">
                        <div class="card-body text-center">
                           <h3 class="text-center ">Average Attempted</h3>
                           <h2 class="text-center fw-bold m-4">72 %</h2>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4 mt-4">
                     <div class="card">
                        <div class="card-body text-center">
                           <h3 class="text-center ">Percentile</h3>
                           <h2 class="text-center fw-bold m-4">{{percentile}} %</h2>
                        </div>
                     </div>
                  </div>
               </div> -->
               <div class="row">
                  <div class="col-md-6 mt-4">
                     <div class="m-2">
                        <h6 class="text-center fw-bold">Over all Test Performance</h6>
                        <div class="card mt-2">
                           <div class="card-body">
                              <canvas id="myChart" class="p-2"></canvas>
                           </div>
                        </div>
                       
                     </div>
                     
                  </div>
                  <div class="col-md-6 mt-4">
                     <div class="m-2">
                        <h6 class="text-center fw-bold">Overall Percentile</h6>
                        <div class="card mt-2">
                           <div class="card-body">
                              <canvas id="myChart4" class="p-2"></canvas>
                           </div>
                        </div>  
                     </div> 
                  </div>
                  <div class="col-md-6 mt-4">
                     <div class="m-2">
                        <h6 class="text-center fw-bold">Test Wise MPM</h6>
                        <div class="card mt-2">
                           <div class="card-body">
                              <canvas id="mpm" class="p-2"></canvas>
                           </div>
                        </div> 
                     </div>
                  </div>
               
                  <div class="col-md-6 mt-4">
                     <div class="m-2">
                        <h6 class="text-center fw-bold">Scores by Test</h6>
                        <div class="card mt-2">
                           <div class="card-body">
                              <canvas id="myChart3" class="p-2"></canvas>
                           </div>
                        </div>  
                     </div> 
                  </div>
                  
               </div>
            
               
            </div>
            <br><br>
            <div class="card card-body">
              <div class="table-responsive">
                <table class="table table-striped table-bordered">
                   <thead>
                      <tr>
                        <th scope="col">Sr.No</th>
                        <th scope="col">Test Name</th>
                        <th scope="col">Total Question</th>
                        <th scope="col">Attempted</th>
                        <th scope="col">Right Answered</th>
                        <th scope="col">Wrong Answered</th>
                        <th scope="col">Time Taken</th>
                        <th scope="col">Accuracy(%)</th>
                        <th scope="col">Percentile(%)</th>
                        <th scope="col">Overall MPM</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for exam_stat in exam_wise_stats %}
                         <tr>
                            <td>{{forloop.counter}}</td>
                            <td>{{exam_stat.mock_test__mock_title}}</td>
                            <td>{{exam_stat.total_question}}</td>
                            <td>{{exam_stat.attempted}}</td>
                            <td>{{exam_stat.right}}</td>
                            <td>{{exam_stat.wrong}}</td>
                            <td>{{exam_stat.time_taken}}</td>
                            <td>{{exam_stat.right_accuracy}}</td>
                            <td>{{exam_stat.percentile}}</td>
                            <td>{{exam_stat.marks_per_minute}}</td>
                         </tr>
                      {% endfor %}
                    </tbody>
                </table>
              </div>
            </div>


         
         </section></div>
      </div>
     
         <div class="tab-pane fade" id="subject_tab" role="tabpanel" aria-labelledby="lr-tab">
          <div class="row">
            <!-- <div class="col-md-2 mt-4"><br><label>Select exam</label></div> -->
            <div class="col-md-12 mt-4">
                <!-- <select class="form-control" id="exam">
                  {% for exam_stat in exam_wise_stats %}
                  <option value="">All</option>
                  <option value="{{exam_stat.mock_test__id}}">{{exam_stat.mock_test__mock_title}}</option>
                  {% endfor %}
                </select> -->
                <input type="radio" name="exam" class="exam" value="" checked> <span class="exam-title">All</span>
                  {% for exam_stat in exam_wise_stats %}
                  <input type="radio" name="exam" class="exam" value="{{exam_stat.mock_test__id}}"> <span class="exam-title">{{exam_stat.mock_test__mock_title}}</span>
                  {% endfor %}
                <input type="hidden" id="section" value=""/>
            </div>
           </div><br>
          <div class="card card-body card-bg">
            
              <div id="section_data"></div>
           </div>
         </div>
         <div class="tab-pane fade" id="abc_analysis" role="tabpanel" aria-labelledby="lr-tab">
          
         </div>
            
    </div>

</section>


 <!-- add  exam Category modal  -->
 <div id="question_list" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"  data-dismiss="modal">
   <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
       <div class="modal-content">
           <div class="modal-body">
               <div class="px-3">
                   <h4 class="modal-heading heading">Questions List</h4>
               </div>
               <div class="row mt-2">
                  <div class="card">
                     <div class="card-body">
                        <div class="table-responsive overflow-auto">
                           <table class="table">
                              <thead>
                                 <tr>
                                   <th class="">Sr.No</th>
                                   <th class="" >Questions</th>  
                                  
                                 </tr>
                               </thead>
                               <tbody>
                                 <tr>
                                    <td>1</td>
                                    <td>
                                       <div>
                                          Let ABCD be a parallelogram such that the coordinates of its three vertices A, B, C are (1, 1), (3, 4), and (−2, 8), respectively. Then, the coordinates of the
                                          vertex D are
                                       </div>
                                       <div>
                                          <ol class="options">
                                             <li>A. (−2, 4)</li>
                                             <li>B. (4, 5)  <i class="fa-solid fa-circle-xmark ms-2" style="color: #e01a24;"></i></li>
                                             <li>C. (−3, 4) <i class="fa-solid fa-circle-check ms-2" style="color: #4da85f;"></i></li>
                                             <li>D. (0, 11)</li>
                                         </ol>
                                       </div> 
                                   </td>
                                 </tr>
                                 <tr>
                                    <td>2</td>
                                    <td> 
                                       <div>
                                          The number of ways of distributing 20 identical balloons among 4 children such that each child gets some balloons but no child gets an odd number of
                                          balloons, is
                                       </div>
                                       <div>
                                          <ol class="options">
                                             <li>A. (2, 4) <i class="fa-solid fa-circle-check ms-2" style="color: #4da85f;"></i></li>
                                             <li>B. (4, 5)</li>
                                             <li>C. (3, 4) </li>
                                             <li>D. (0, 11)</li>
                                         </ol>
                                       </div> 
                                   </td>
                                   
                                    
                                 </tr>
                                 <tr>
                                    <td>3</td>
                                    <td>
                                       <div>
                                          A mixture contains lemon juice and sugar syrup in equal proportion. If a  new mixture is created by adding this mixture and sugar syrup in the ratio 1 : 3, then
                                          the ratio of lemon juice and sugar syrup in the new mixture is
                                       </div>
                                       <div>
                                          <ol class="options">
                                             <li>A. 1 : 6</li>
                                             <li>B. 2 : 7</li>
                                             <li>C. 1 : 5</li>
                                             <li>D. 3 : 2  <i class="fa-solid fa-circle-check ms-2" style="color: #4da85f;"></i></li>
                                         </ol>
                                       </div>  
                                        </td> 
                                 </tr>
                                 <tr>
                                   <td>4</td>
                                   <td> 
                                    <div>
                                       For natural numbers x,y, and z, if xy+yz=19 and yz+xz=51, then the minimum possible value of xyz is
                                    </div>
                                    <div>
                                       <ol class="options">
                                          <li>A. 20 </li>
                                          <li>B. 22 </li>
                                          <li>C. 33 <i class="fa-solid fa-circle-check ms-2" style="color: #4da85f;"></i></li>
                                          <li>D. 44</li>
                                      </ol>
                                    </div> 
                                    </td> 
                                   
                                </tr>
                                <tr>
                                   <td>5</td>
                                   <td> 
                                    <div>
                                       Trains A and B start traveling at the same time towards each other with
                                       constant speeds from stations X and Y, respectively. Train A reaches station Y in 10
                                       minutes while train B takes 9 minutes to reach station X after meeting train A. Then
                                       the total time taken, in minutes, by train B to travel from station Y to station X is
                                    </div>
                                       <div>
                                          <ol class="options">
                                             <li>A. 20 </li>
                                             <li>B. 22 </li>
                                             <li>C. 33 </li>
                                             <li>D. 44 <i class="fa-solid fa-circle-check ms-2" style="color: #4da85f;"></i></li>
                                         </ol>
                                       </div> 
                                    </td>
                                        
                                </tr>
                                <tr>
                                   <td>6</td>
                                   <td>The average of three integers is 13 . When a natural number n is included,  the average of these four integers remains an odd integer. The minimum possible value of n is 
                                    <div>
                                       <ol class="options">
                                          <li>A. 24 </li>
                                          <li>B. 45 <i class="fa-solid fa-circle-check ms-2" style="color: #4da85f;"></i></li>
                                          <li>C. 34 </li>
                                          <li>D. 44 <i class="fa-solid fa-circle-xmark ms-2" style="color: #e01a24;"></i></li>
                                      </ol>
                                    </div> 
                                   </td> 
                                   
                                </tr>
                               </tbody>
                           </table>
                         </div>
                         
                     </div>
                  </div>
               </div>
           </div> 
       </div> 
   </div>
</div>
<!-- // END .modal -->


</div>
</div>

</div>
<!-- // END drawer-layout__content -->

<!-- drawer -->
{%include "sidebar.html"%}
<!-- // END drawer -->
</div>
<!-- // END drawer-layout -->

</div>
<!-- // END header-layout__content -->

</div>
<!-- // END header-layout -->


{%include "footer.html"%}

<script>
    var labels = [];
         var s_scores = [];
         var s_attempted = [];
         var s_right = [];
         var s_wrong = [];
         var s_mpm = [];
         var s_percentile = [];
 
         var s_xValues = [];
   var labels = [];
        var scores = [];
        var attempted = [];
        var right = [];
        var wrong = [];
        var mpm = [];
        var percentile = [];

        const xValues = [];
      // Use a for loop to extract data from the exam_data dictionary
      {% for exam in exam_wise_stats %}
         xValues.push("{{ exam.mock_test__mock_title }}");  // Add exam name to labels
         scores.push({{ exam.marks }});  
         attempted.push({{ exam.attempted }}); 
         right.push({{ exam.right }});        
         wrong.push({{ exam.wrong }});        
         mpm.push({{ exam.marks_per_minute }});  
         
         percentile.push({{ exam.percentile }});         // Add score to data
      {% endfor %}
   new Chart("myChart", {
     type: "line",
     data: {
       labels: xValues,
       datasets: [
       { 
         data: attempted,
         borderColor: "blue",
         fill: false,
         label: "Attempted",
       },
       { 
         data: right,
         borderColor: "green",
         fill: false,
         label: "Correct",
       }, 
         { 
         data: wrong,
         //data:[{{overall_test.0.attempted}}]
         borderColor: "red",
         fill: false,
         label: "Not_correct",
         
       },]
     },
     options: {
       legend: {display: true}
     }
   });

new Chart("mpm", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: mpm
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      yAxes: [{ticks: {min: Math.min.apply(Math,mpm), max:Math.max.apply(Math,mpm)}}],
    }
  }
});

const yValues3 = [0,114,101,108];
new Chart("myChart3", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: scores
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      yAxes: [{ticks: {min: Math.min.apply(Math,scores), max:Math.max.apply(Math,scores)}}],
    }
  }
});
</script>
<script>
    
    var yValues4 = [0,151, 151, 155];
    var barColors = "blue";

    new Chart("myChart4", {
        type: "bar",
        data: {
            labels: xValues,
            datasets: [{
                backgroundColor: barColors,
                data: percentile
            }]
        },
        options: {
            legend: { display: false },
            title: {
                display: true,
                text: "Attempted"
            }, 
            scales: {
             yAxes: [{ticks: {min: Math.min.apply(Math,percentile), max:Math.max.apply(Math,percentile)}}],
               }
            
        }
        
    });    
</script>

<script>
   var pychartxValues = ["LR", "QA/DI", "VARC", "Abstract"];
   var pychartyValues = [55, 49, 74, 64];
   var barColors = [
     "#b91d47",
     "#00aba9",
     "#2b5797",
     "#e8c3b9",
     
   ];
   
   new Chart("subject", {
     type: "pie",
     data: {
       labels: pychartxValues,
       datasets: [{
         backgroundColor: barColors,
         data: pychartyValues
       }]
     },
     options: {
       title: {
         display: true,
         text: "Subject Performance"
       }
     }
   });
</script>

<script>
   // lr subject chart script
   const lrmpmyValues = [0,1.02,0.83,0.95];
new Chart("lrmpm", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: lrmpmyValues
    }]
  },
  options: {
    legend: {display: false},
  }
});


const lrscoreyValues = [0,40,33,42];
// const yValues3 = [""];
new Chart("lrscore", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.2)",
      data: lrscoreyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      yAxes: [{ticks: {min: 0, max:100}}],
    }
  }
});
</script>

<script>
   // varc subject chart script
   const varcmpmyValues = [0,0.85,0.87,1.29];
new Chart("varcmpm", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: varcmpmyValues
    }]
  },
  options: {
    legend: {display: false},
    
  }
});


const varcscoreyValues = [0,27,27,22];
// const yValues3 = [""];
new Chart("varcscore", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.2)",
      data: varcscoreyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      yAxes: [{ticks: {min: 0, max:100}}],
    }
  }
});
</script>

<script>
   // QA/DI subject chart script
   const qadimpmyValues = [0,0.85,0.87,1.29];
new Chart("qadimpm", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: qadimpmyValues
    }]
  },
  options: {
    legend: {display: false},
    
  }
});


const qadiscoreyValues = [0,27,27,22];
// const yValues3 = [""];
new Chart("qadiscore", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.2)",
      data: qadiscoreyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      yAxes: [{ticks: {min: 0, max:100}}],
    }
  }
});
</script>
 
<script>
   // abstract subject chart script
   const abstractmpmyValues = [0,0.85,0.87,1.29];
new Chart("abstractmpm", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: abstractmpmyValues
    }]
  },
  options: {
    legend: {display: false},
    
  }
});


const abstractscoreyValues = [0,27,27,22];
// const yValues3 = [""];
new Chart("abstractscore", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.2)",
      data: abstractscoreyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      yAxes: [{ticks: {min: 0, max:100}}],
    }
  }
});
$(document).ready(function() {
    $.ajaxSetup({
      headers: {
         
        'X-CSRFToken':  '{{ csrf_token }}'
      }
    });
$('.section').click(function(){
   $('#section').val($(this).data('id'));
   section_data();
});
$('#exam').change(function(){
   section_data();
});
function section_data(){
   $.ajax({
            url: '{% url "section_analysis" %}',

            type: 'POST',
            data: {'section_id':$('#section').val(),'exam_id':$('input[name="exam"]:checked').val()},
            success: function (response) {
                $('#section_data').html(response);
            }
        });

}
});

</script>
</body>

</html>