{% load static %}
{% load custom_filters %}
<section class="mt-4">
    <input type="hidden" id="section_id" value="{{section_id}}"/>
    <input type="hidden" id="student_id" value="{{student_id}}"/>
    {% if exam_id %}
    <input type="hidden" id="exam_id" value="{{exam_id}}"/>
    {% else %}
    <input type="hidden" id="exam_id" value=""/>
    {% endif %}
    <div>
        <div class="row">
            <div class="row">
              {% for exam_stat in section_stats %}
              <style>
                  .progress-bar {
                    width: 90px;
                    height: 90px;
                    border-radius: 50%;
                    background: 
                      radial-gradient(closest-side, white 79%, transparent 80% 100%),
                      conic-gradient(#40910d {{exam_stat.percentile}}%, #40910d6e 0);    
                  }
              </style>
                <div class="col-md-3 mt-4">
                   <div class="card shadow">
                      <div class="card-body text-center">
                        <div class="row">
                          <div class="col-md-5">
                            <img src="{% static 'website/assets/img/analysis/speedometer.png' %}" class="images"/>
                          </div>
                          <div class="col-md-7">
                            <h2 class="text-center fw-bold mb-2">{{exam_stat.marks}}</h2>
                         <h6 class="text-center ">Score</h6>
                          </div>
                        </div>
                        
                      </div>
                   </div>
                </div>
                <div class="col-md-3 mt-4">
                   <div class="card shadow">
                      <div class="card-body text-center">
                        <div class="row">
                          <div class="col-md-5">
                            <img src="{% static 'website/assets/img/analysis/top-three.png' %}" class="images"/>
                          </div>
                          <div class="col-md-7">
                            <h2 class="text-center fw-bold mb-2">{{exam_stat.rank}}</h2>
                         <h6 class="text-center ">Rank</h6>
                          </div>
                        </div>
                      </div>
                   </div>
                </div>
                <div class="col-md-3 mt-4">
                   <div class="card shadow">
                      <div class="card-body text-center">
                        <div class="row">
                          <div class="col-md-5">
                            <div class="progress-bar">
                              <progress value="{{exam_stat.percentile}}" min="0" max="100" style="visibility:hidden;height:0;width:0;">75%</progress>
                            </div>
                          </div>
                          <div class="col-md-7">
                           
                            <h2 class="text-center fw-bold mb-2">{{exam_stat.percentile}}</h2>
                         <h6 class="text-center ">Percentile</h6>
                          </div>
                        </div>
                      </div>
                   </div>
                </div>
                <div class="col-md-3 mt-4">
                   <div class="card shadow">
                      <div class="card-body text-center">
                        <div class="row">
                          <div class="col-md-5">
                            <img src="{% static 'website/assets/img/analysis/1-minute.png' %}" class="images"/>
                          </div>
                          <div class="col-md-7">
                            <h2 class="text-center fw-bold mb-2">{{exam_stat.marks_per_minute}}</h2>
                         <h6 class="text-center ">MPM</h6>
                          </div>
                        </div>
                      </div>
                   </div>
                </div>
                {% endfor %}
              </div>
            
           </div><br>
           <div class="row">
            <div class="col-md-12">
              <div class="card card-body">
                <h4>Diffliculty Level Wise Analysis</h4><br><br>
                <canvas id="easyChart1" style="width:100%"></canvas>
              </div>
            </div>
          </div><br>
       <div class="row mt-4">
       
       
       <div class="col-md-12">
        <div class="table-responsive">
            <table class="table table-bordered">
               <thead>
                  <tr>
                    <th scope="col">
                        <select class="form-control" id="filter_type">
                            <option>Sub-section</option>
                            <option>Topic</option>
                        </select>
                    </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">Overall MPM</th>
                  </tr>
                </thead>
                <tbody id="filter_data">
                  {% for exam_stat in section_statistics %}
                     <tr>
                        <td>{{exam_stat.question__sub_section__sub_section_name}} </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|seconds_to_hms}}</td>
                        <td>{{exam_stat.right_accuracy}}</td>
                        <td>{{exam_stat.marks_per_minute}}</td>
                     </tr>
                  {% endfor %}
                </tbody>
            </table>
          </div>
       </div>
          
       </div>
    
       
    </div>
    
 
 </section>
 <script>
  var stotal=[0,0,0];
var scorrect=[0,0,0];
var swrong=[0,0,0];
var sskipped=[0,0,0];
{% for stats in difficulty_wise_statistics %}
  {% if stats.question__difficulty_level == 'Hard' %}
  stotal[2]={{stats.total_question}};
  scorrect[2]={{stats.right}};
  swrong[2]={{stats.wrong}};
  sskipped[2]={{stats.total_question}}-{{stats.wrong}}-{{stats.right}}-{{stats.attempted}};
    {% endif %}        // Add score to data
    {% if stats.question__difficulty_level == 'Medium' %}
  stotal[1]={{stats.total_question}};
  scorrect[1]={{stats.right}};
  swrong[1]={{stats.wrong}};
  sskipped[1]={{stats.total_question}}-{{stats.wrong}}-{{stats.right}}-{{stats.attempted}};
    {% endif %}        // Add score to data
    {% if stats.question__difficulty_level == 'Easy' %}
  stotal[0]={{stats.total_question}};
  scorrect[0]={{stats.right}};
  swrong[0]={{stats.wrong}};
  sskipped[0]={{stats.total_question}}-{{stats.wrong}}-{{stats.right}}-{{stats.attempted}};
    {% endif %}       // Add score to data
  {% endfor %}
  console.log(total);
var bValues = ["Easy Questions"];
var eyValues = [stotal[0], scorrect[0], swrong[0], sskipped[0]];
  console.log(eyValues);
var barColors = ["red", "green","blue","orange"];
var data = {
  labels: ["Easy("+total[0]+")", "Medium("+total[1]+")", "Hard("+total[2]+")"],
            datasets: [
                // {
                //     label: "Total Questions",
                //     backgroundColor: "rgba(255, 205, 86, 0.2)",
                //     borderColor: "rgba(255, 205, 86, 1)",
                //     borderWidth: 1,
                //     data: stotal, // Replace with your total question counts
                // },
                {
                    label: "Right Answers",
                    backgroundColor: "rgba(75, 192, 192, 0.2)",
                    borderColor: "rgba(75, 192, 192, 1)",
                    borderWidth: 1,
                    data: scorrect, // Replace with your right answer counts
                },
                {
                    label: "Wrong Answers",
                    backgroundColor: "rgba(255, 99, 132, 0.2)",
                    borderColor: "rgba(255, 99, 132, 1)",
                    borderWidth: 1,
                    data: swrong, // Replace with your swrong answer counts
                },
                {
                    label: "sSkipped Questions",
                    backgroundColor: "rgba(54, 162, 235, 0.2)",
                    borderColor: "rgba(54, 162, 235, 1)",
                    borderWidth: 1,
                    data: sskipped, // Replace with your sskipped question counts
                },
            ],
        };

        var ctx = document.getElementById("easyChart1").getContext("2d");

        var myBarChart = new Chart(ctx, {
            type: "bar",
            data: data,
            options: {
    legend: {display: false},
    scales: {
      yAxes: [{ticks: {min: Math.min.apply(Math,scorrect), max:Math.max.apply(Math,stotal)}}],
    }
  
            },
        });
     labels = [];
          s_scores = [];
          s_attempted = [];
          s_right = [];
          s_wrong = [];
          s_mpm = [];
          s_percentile = [];
 
          s_xValues = [];
       // Use a for loop to extract data from the exam_data dictionary
       {% for exam in section_stats %}
          s_xValues.push("{{ exam.mock_test__mock_title }}");  // Add exam name to labels
          s_scores.push({{ exam.marks }});  
          s_attempted.push({{ exam.attempted }}); 
          s_right.push({{ exam.right }});        
          s_wrong.push({{ exam.wrong }});        
          s_mpm.push({{ exam.marks_per_minute }});  
          
          s_percentile.push({{ exam.percentile }});         // Add score to data
       {% endfor %}
    new Chart("sectionchart", {
      type: "line",
      data: {
        labels: s_xValues,
        datasets: [
        { 
          data: s_attempted,
          borderColor: "blue",
          fill: false,
          label: "Attempted",
        },
        { 
          data: s_right,
          borderColor: "green",
          fill: false,
          label: "Correct",
        }, 
          { 
          data: s_wrong,
          //data:[{{overall_test.0.attempted}}]
          borderColor: "red",
          fill: false,
          label: "Not_correct",
          
        },]
      },
      options: {
        legend: {display: true}
      }
    });
 
 new Chart("sectionchart5", {
   type: "line",
   data: {
     labels: s_xValues,
     datasets: [{
       fill: false,
       lineTension: 0,
       backgroundColor: "rgba(0,0,255,1.0)",
       borderColor: "rgba(0,0,255,0.1)",
       data: s_mpm
     }]
   },
   options: {
     legend: {display: false},
     scales: {
       yAxes: [{ticks: {min: Math.min.apply(Math,s_mpm), max:Math.max.apply(Math,s_mpm)}}],
     }
   }
 });
 
//  const yValues3 = [0,114,101,108];
 new Chart("sectionchart3", {
   type: "line",
   data: {
     labels: s_xValues,
     datasets: [{
       fill: false,
       lineTension: 0,
       backgroundColor: "rgba(0,0,255,1.0)",
       borderColor: "rgba(0,0,255,0.1)",
       data: s_scores
     }]
   },
   options: {
     legend: {display: false},
     scales: {
       yAxes: [{ticks: {min: Math.min.apply(Math,s_scores), max:Math.max.apply(Math,s_scores)}}],
     }
   }
 });
     
     var yValues4 = [0,151, 151, 155];
     var barColors = "blue";
 
     new Chart("sectionchart4", {
         type: "bar",
         data: {
             labels: s_xValues,
             datasets: [{
                 backgroundColor: barColors,
                 data: s_percentile
             }]
         },
         options: {
             legend: { display: false },
             title: {
                 display: true,
                 text: "Percentile"
             }, 
             scales: {
              yAxes: [{ticks: {min: Math.min.apply(Math,s_percentile), max:Math.max.apply(Math,s_percentile)}}],
                }
             
         }
         
     });    
 </script>
 <script>
    $(document).ready(function() {
    $.ajaxSetup({
      headers: {
         
        'X-CSRFToken':  '{{ csrf_token }}'
      }
    });
$('#filter_type').change(function(){
   $.ajax({
            url: '{{SITE_URL}}/admin/exam_filter_analysis',

            type: 'POST',
            data: {'student_id':$('#student_id').val(),'section_id':$('#section_id').val(),'exam_id':$('#exam_id').val(),'filter_type':$('#filter_type').val()},
            success: function (response) {
                $('#filter_data').html(response);
            }
        });
})
});
 </script>