{%include "header.html"%}
{% load static %}
{% load custom_filters %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<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 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">Sections</li>
                            <li class="breadcrumb-item">Sub Sections/</li>
                            <li class="breadcrumb-item">Topic/</li>
                            <li class="breadcrumb-item active" aria-current="page">Question Bank</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div class="container-fluid">
                <div class="card card-body">
                    <div class="row">
                        <input type="hidden" name="exam_id" id="aexam_id" value="{{test_id}}"/>
                        <input type="hidden" name="student_id" id="astudent_id" value="{{student.0.id}}"/>
                        <div class="col-md-9">
                            <a href=""><h5>{{student.0.first_name}} {{student.0.last_name}}</h5></a>
                            <p><i class="fa fa-phone-alt"></i> {{student.0.mobile}}&nbsp;&nbsp; <i class="fa fa-envelope"></i> {{student.0.email}} &nbsp;&nbsp;<i class="fa fa-calendar"></i> Attempted Date:  {{exam_wise_stats.0.attempted_at}}</p>
                        
                        </div>
                        <div class="col-md-3">
                            <a href="{{SITE_URL}}/admin/view-solution?exam_id={{test_id}}&student_id={{student.0.id}}&section_id=" class="btn btn-warning">View Solution</a>
                        </div>
                    </div>
                </div>
<style>
  .form-control {
    padding: 5px !important;
  }
  .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: #ffe8e0;
    color: white;
  }
  .images {
    height: 90px;
    width: 90px;
  }
</style>
<section class="mt-4">
   <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 %}
      {% if section.id != 23 %}
      <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>
      {% endif %}
      {% endfor %}
      <li class="nav-item" role="presentation">
        <button class="nav-link border abc_analysis" 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="">
    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
         <section class="mt-4">
            <div>
               <div class="row">
                {% for exam_stat in exam_wise_stats %}
                <style>
                    .progress-bar {
                      width: 93px;
                      height: 93px;
                      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|floatformat:2}}</h2>
                           <h6 class="text-center ">MPM</h6>
                            </div>
                          </div>
                        </div>
                     </div>
                  </div>
                  {% endfor %}
               </div><br>
               
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="card card-body">
                  <h4>Diffliculty Level Wise Analysis</h4><br><br>
                  <canvas id="easyChart"  style="width:100%"></canvas>
                </div>
              </div>
            </div><br>
            <div class="card card-body">
              <div class="table-responsive">
                <table class="table 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|seconds_to_hms }}</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 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-2 mt-4">
               
                <input type="hidden" id="section" value=""/>
            </div>
           </div>
            <div id="section_data"></div>
         </div>
         <div class="tab-pane fade" id="abc_analysis" role="tabpanel" aria-labelledby="lr-tab">
            <div class="row">
              <div class="col-md-9"></div>
              <div class="col-md-2">
                <select class="form-control" id="abc_section">
                  <option value="">Select Section</option>
                  {% for section in sections %}
                  {% if section.id != 23 %}
                  <option value="{{section.id}}">{{section.section_name}}</option>
                  {% endif %}
                  {% endfor %}
                </select>
              </div>
            </div><br>
              <div class="row" id="abc_data">
              </div>
           
           </div>
    </div>
  </div>
</section>



</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>
    $(document).ready(function() {
    $.ajaxSetup({
      headers: {
         
        'X-CSRFToken':  '{{ csrf_token }}'
      }
    });

$('.abc_analysis').click(function(){
   $('#section').val($(this).data('id'));
   abc_analysis();
});

$('#abc_section').change(function(){
  abc_analysis();
});
function abc_analysis(){
  $.ajax({
            url: '{{SITEURL}}/admin/abc-analysis',

            type: 'POST',
            // dataType: 'json',
            data: {'section_id':$('#abc_section').val(),'exam_id':$('#aexam_id').val(),'student_id':$('#astudent_id').val()},
            success: function (response) {
                $('#abc_data').html(response);
            }
        });
}
});
    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}}],
    }
  }
});
var total=[0,0,0];
var correct=[0,0,0];
var wrong=[0,0,0];
var skipped=[0,0,0];
{% for stats in difficulty_wise_statistics %}
  {% if stats.question__difficulty_level == 'Hard' %}
  total[2]={{stats.total_question}};
  correct[2]={{stats.right}};
  wrong[2]={{stats.wrong}};
  skipped[2]={{stats.total_question}}-{{stats.wrong}}-{{stats.right}}-{{stats.attempted}};
    {% endif %}        // Add score to data
    {% if stats.question__difficulty_level == 'Medium' %}
  total[1]={{stats.total_question}};
  correct[1]={{stats.right}};
  wrong[1]={{stats.wrong}};
  skipped[1]={{stats.total_question}}-{{stats.wrong}}-{{stats.right}}-{{stats.attempted}};
    {% endif %}        // Add score to data
    {% if stats.question__difficulty_level == 'Easy' %}
  total[0]={{stats.total_question}};
  correct[0]={{stats.right}};
  wrong[0]={{stats.wrong}};
  skipped[0]={{stats.total_question}}-{{stats.wrong}}-{{stats.right}}-{{stats.attempted}};
    {% endif %}       // Add score to data
  {% endfor %}
  console.log(correct);
var bValues = ["Easy Questions"];
var eyValues = [total[0], correct[0], wrong[0], skipped[0]];
  console.log(eyValues);
var barColors = ["red", "green","blue","orange"];
var data = {
            labels: ["Easy("+total[0]+")", "Medium("+total[1]+")", "Hard("+total[2]+")"],
            datasets: [
                {
                    label: "Right Answers",
                    backgroundColor: "rgba(75, 192, 192, 0.2)",
                    borderColor: "rgba(75, 192, 192, 1)",
                    borderWidth: 1,
                    data: correct, // 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: wrong, // Replace with your wrong answer counts
                },
                // {
                //     label: "Total Questions",
                //     backgroundColor: "rgb(33, 150, 243, 0.2)",
                //     borderColor: "rgb(33, 150, 243, 1)",
                //     borderWidth: 1,
                //     data: total, // Replace with your total question counts
                // },
                {
                    label: "Skipped Questions",
                    backgroundColor: "rgba(255, 223, 86, 0.2)",
                    borderColor: "rgba(255, 223, 86, 1)",
                    borderWidth: 1,
                    data: skipped, // Replace with your skipped question counts
                },
            ],
        };

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

        var myBarChart = new Chart(ctx, {
            type: "bar",
            data: data,
            options: {
    legend: {display: false},
    scales: {
      yAxes: [{ticks: {min: Math.min.apply(Math,correct), max:Math.max.apply(Math,total)}}],
    }
  }
            // options: {
            //     scales: {
            //         y: {
            //             beginAtZero: true,
            //         },
            //     },
            // },
        });
</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>
 

</script>
 
<script>



$(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: "{{SITE_URL}}/admin/exam_section_analysis",

            type: 'POST',
            data: {'student_id':{{student.0.id}},'section_id':$('#section').val(),'exam_id':{{test_id}}},
            success: function (response) {
                $('#section_data').html(response);
            }
        });

}
});



</script>
</body>

</html>