@extends('layouts.app')

@section('content')

<style>
.purple_highlight{
  color:#9e009e;
}
span{
  font-size: 12px;
}
.table {
  border: 0.5px solid #000000;
  width: auto
}
.table-bordered > tbody > tr > td{
  text-align: center;
}
.coy_header{
  text-align: center;
  margin: 0 auto;"
}
.coy_title{
  display: -webkit-inline-box;
  font-size:22px;
  background-color: #ffc729;
  padding: 20px;
}
.course_header{
  font-size: 15px;
  border: 0.5px solid #000000;
  text-align: center;
  padding: 5px;
  /*width: 50%;*/
  /*margin: 0 auto;*/
}
.div_border{
  border: 0.5px solid #000000;
  padding:5px 5px 5px 10px;
}
.assquiz{
  background-color: #f9e1e1;
  padding: 0 20px 20px 20px;
}
.photo .pheader{
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  margin-bottom: 0;
}
.assquiz .pheader{
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}
.header_left{
  font-weight: bold;
  text-decoration: underline;
}
.personal{
  background-color: #ff9d9d;
  padding: 1px 10px 9px 10px;
}
.personal .pheader{
  font-size: 12px;
  font-weight: bold;
  text-decoration: underline;
}
.personal .pvalue{
  font-size: 13px;
  font-weight: bold;
}
.attempt_table{
  width:100%;
  margin-bottom: 10px;
}
.attempt_table_div{
  background-color: #e8e7e7;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.chartarea{
  text-align: center;
  background-color: white;
  padding: 30px;
  /*margin: 10px;*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 0.5px solid #000000;
}
.table-bordered > thead > tr > td{
  background-color: #f3c5f3;
}
hr {
  border-top: 1px solid #000000 !important;
  margin-bottom:5px !important;
  margin-top:5px !important;
}
.table-reco > tbody > tr > td{
  text-align: center;
}
.table-reco > tbody > tr > td img {
  width: 70px;
}
.table-reco > tbody > tr > td span{
  line-height: normal;
}
</style>
<meta name="csrf_token" content="{{ csrf_token() }}" />
<div class="container">
  <h1 class="pull-left">LMS Individual Report</h1>
  <div class="clearfix"></div>

  @include('flash::message')
  <div class="panel panel-default panel-info class ">
    <div class="panel-body">
      {!! Form::open(['url' => 'lms/individual', 'files'=>true]) !!}

      <div class="form-group col-sm-4">
        {!! Form::label('', 'Course:') !!}

        <select class="form-control select2-lms-course select2-hidden-accessible" style="width: 100%;" id="select2-lms-course" name="courseid" required>
          <option></option>
        </select>
      </div>

      <div class="form-group col-sm-4">
        {!! Form::label('', 'User:') !!}

        <select class="form-control select2-lms-trainer select2-hidden-accessible" style="width: 100%;" id="select2-lms-trainer" name="userid" required>
          <option></option>
        </select>
      </div>

      <br />
      <br />
      <div class="form-group col-sm-12">
        {!! Form::submit('Search', ['id' => 'm-submit', 'class' => 'btn btn-primary']) !!}
      </div>

      {!! Form::close() !!}
    </div>
  </div>
  <div class="clearfix"></div>
  <div class="panel panel-default">
    <div class="panel-body">
      @if(isset($result))
      @if(count($result) && is_array($result) && array_key_exists(0, $result) && $result)

      <a id="genReport" class="btn btn-primary">Download PDF</a><br>
      <div class="coy_header">
        <img style="width:100px;padding:10px;" src="{!! config('config.lms_logo') !!}"/>
        <span class="coy_title">{!! config('config.lms_report_name') ?: '' !!}</span>
      </div>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="course_header">
          <b>Candidate’s E-Learning Statistic and Analysis Report</b>
          <br />
          <b>{!! ($result[0]->Course_Title) !!}</b>
          <br />
          <b>Training Date</b>: {!! gmdate("d/m/Y", ($result[0]->Quiz_attempt_time_start)) !!}
          <br />
          <b>Training Duration</b>: 2 hours
        </div>

        <div class="personal">
          <h4 class="pheader">Personal Data: </h4>
          <span class="ptitle">Name of Officer :</span>
          <span class="pvalue">{!! $officer= strtoupper($result[0]->Firstname.' '.$result[0]->Lastname ) !!}</span><br>
          <span >NRIC / FIN : </span>
          <span class="pvalue">{!! strtoupper($result[0]->NRIC) !!}</span><br>
          <span class="ptitle">Site Name : </span>
          <span class="pvalue">{!! str_replace($result[0]->Company.'-', '',$result[0]->Venue) !!}</span>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6 photo">
        <div class="course_header">
          <h4 class="pheader">INVIGILATION OF E-ASSESSMENT</h4>
          <span>
            Photograph: Officer attempting the E-Assessment
          </span>
          <br />
          <span>
            Date: {!! gmdate("d/m/Y", ($result[0]->Quiz_attempt_time_start)) !!}
          </span>
          <div>
            @if($invigilationImg)
            <img id="invigilation" height="180px" width="auto" src="{!! $invigilationImg->file_api !!}" />
            @endif
          </div>
        </div>
      </div>

      <div class="col-md-12 col-sm-12 col-xs-12" style="display: flex;">
        <div class="col-md-6 col-sm-6 col-xs-6 assquiz">
          <h4 class="pheader">Assessment Quiz: </h4>
          @for($key = 0; $key < 5; $key++)
          <span class="value">{!! $key+1 !!}.  {!! strip_tags($questions[$key]->questiontext) !!}</span><br>
          @endfor
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6 assquiz" style="padding-top:30px;">
          @for($key = 5; $key < count($questions); $key++)
          <span class="value">{!! $key+1 !!}.  {!! strip_tags($questions[$key]->questiontext) !!}</span><br>
          @endfor
        </div>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12">
        <h5 class="header_left">
          Result Achieved:
        </h5>
        <div class="div_border">
          @if($pass)
          <span>1. <b>{!! $officer !!}</b> has successfully completed the E-Learning programme and {!! count($questions) !!} questions designed for this quiz.</span>
          @else
          <span>1. <b>{!! $officer !!}</b> has not completed the E-Learning programme and {!! count($questions) !!} questions designed for this quiz.</span>
          @endif
        </div>

        <h5 class="header_left">Analysis: </h5>
        @if($pass && count($sortedAttempts) == 1 )
        <div class="div_border">
          <span>1. <b>{!! $officer !!}</b> completed and passed the criteria with only 1 attempt.</span>
        </div>
        @endif
        @if($pass && count($sortedAttempts) > 1 )
        <div class="div_border">
          <span>
            1.	1st attempt: <b>Answered correctly</b>: {!! $wrongCorrects[0]['correctCount'] !!} questions. <b>Answered wrongly: </b>
            {!! $wrongCorrects[0]['wrongs'] !!}.
            @if($wrongCorrects[0]['noattempt'])
            <b>No Attempt: </b>
            {!! $wrongCorrects[0]['noattempt'] !!}
            @endif
          </span>
          <br>
          @if(count($sortedAttempts) >= 2)
          <span>
            2.	2nd attempt: Tested on
            {!! $wrongCorrects[0]['wrongs'] !!}
            @if($wrongCorrects[0]['noattempt'])
            and
            {!! $wrongCorrects[0]['noattempt'] !!}.
            @else
            .
            @endif
            @if($wrongCorrects[1]['newCorrects'] )
            <b>Answered correctly:</b>
            {!! $wrongCorrects[1]['newCorrects'] !!}.
            @endif
            @if($wrongCorrects[1]['wrongs'])
            <b>Answered wrongly:</b>
            {!! $wrongCorrects[1]['wrongs'] !!}.
            @endif
          </span>
          @endif
          <br>
          @if(count($sortedAttempts) == 3)
          <span>3.	3rd attempt: Tested on {!! $wrongCorrects[0]['wrongs'] !!}
            @if($wrongCorrects[1]['noattempt'])
            and
            {!! $wrongCorrects[1]['noattempt'] !!}.
            @else
            .
            @endif
            <b>Answered correctly:</b>
            @if(isset($wrongCorrects[2]['newCorrects']))
            {!! $wrongCorrects[2]['newCorrects'] !!}
            @endif
          </span>
          <br>
          @endif
          <span>{!! count($sortedAttempts)+1 !!}.	<b>{!! $officer !!}</b> has understood the topic has answered all questions in the assessment and is deemed competent.</span>
        </div>
        @endif
        @if(!$pass)
        <div class="div_border">
          <span>1.	In the last attempt, <b>{!! $officer !!}</b> still gets the same question(s) wrong. <b>{!! $officer !!}</b> will have to attend the training again.</span>
        </div>
        @endif

        <div class="col-md-12 col-sm-12 col-xs-12 attempt_table_div">
          <table class="table table-bordered attempt_table">
            <thead>
              <td style="background-color:white;">
              </td>
              @for($i =0; $i< $questionperattemptscount; $i++)
              <td style="text-align:center">
                <span><b> {!! $i+1 !!}</b></span>
              </td>
              @endfor
            </thead>
            <tbody>
              @for($i =0; $i< count($sortedAttempts); $i++)
              <tr>
                <td style="background-color:#9e009e;color:white;">
                  <b>
                    <span>{!! $i+1 !!}@if($i == 0)<sup>st</sup>@elseif($i == 1)<sup>nd</sup>@else<sup>rd</sup>@endif</span>
                    Attempt
                  </b>
                </td>
                @for ($q =0; $q < $questionperattemptscount; $q++)
                <td>
                  @if(isset($sortedAttempts[$i][$q]))
                  @if(($sortedAttempts[$i][$q]->State) == 'gradedpartial' )
                  <span><i class="fa fa-times" style="color:#ff4136;" aria-hidden="true"></i></span>
                  @elseif(($sortedAttempts[$i][$q]->State) == 'gradedwrong')
                  <span><i class="fa fa-times" style="color:#ff4136;" aria-hidden="true"></i></span>
                  @elseif(($sortedAttempts[$i][$q]->State) == 'gradedright')
                  <span><i class="fa fa-check" style="color:#77b300" aria-hidden="true"></i></span>
                  @else
                  <span><i class="fa fa-times" style="color:#ff4136;" aria-hidden="true"></i></span>
                  @endif
                  @else
                  <span><i class="fa fa-times" style="color:#ff4136;" aria-hidden="true"></i></span>
                  @endif
                </td>
                @endfor
              </tr>
              @endfor
            </tbody>
          </table>

          <div class="col-md-3 col-sm-3 col-xs-3 chartarea">
            <canvas id="chart-area" width="200" height="200" />
          </div>
          @if(count($sortedAttempts)>=2)
          <div class="col-md-3 col-sm-3 col-xs-3 chartarea">
            <canvas id="chart-area2" width="200" height="200" />
          </div>
          @endif
          @if(count($sortedAttempts)>=3)
          <div class="col-md-3 col-sm-3 col-xs-3 chartarea">
            <canvas id="chart-area3" width="200" height="200" />
          </div>
          @endif
          <div class="col-md-3 col-sm-3 col-xs-3 chartarea pull-right" style="background-color:none;">
            <img class="pull-right" style="width: 137px;" src="{{ asset('images/pdf/charts_legend.png') }}"/>
          </div>
        </div>

        <br>
        <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
          <div class="col-md-10 col-sm-10 col-xs-10 no-padding">
            @if(count($explaination) > 0)
            <span>The trainer has explained the reason why the candidate has answered wrongly. </span>
            <br>
            @foreach($explaination as $explain)
            <span>{!! $explain !!}</span><br>
            @endforeach
            @endif
            <br />
            <span>It is recommended that the candidate should attempt the following modules to gain holistic security knowledge.</span>
          </div>
          <div class="col-md-2 col-sm-2 col-xs-2">
            <img class="pull-right" style="height:60px" src="{{ asset('images/logo.png') }}"/>
          </div>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12">
          <table class="table-reco" style="width:100%">
            <tr>
                <td>
                  <img style="width:50px;height:auto" src="{{ asset('images/pdf/individual_person.png') }}"/><br>
                </td>
                <td>
                  <img style="width:50px;height:auto" src="{{ asset('images/pdf/individual_camera.png') }}"/><br>
                </td>
                <td>
                  <img style="width:50px;height:auto" src="{{ asset('images/pdf/individual_suspiciousBag.png') }}" /><br>
                </td>
                <td>
                  <img style="width:50px;height:auto" src="{{ asset('images/pdf/individual_car.png') }}" /><br>
                </td>
                <td>
                  <img style="width:50px;height:auto" src="{{ asset('images/pdf/individual_accident.png') }}" /><br>
                </td>
                <td>
                  <img style="width:50px;height:auto" src="{{ asset('images/pdf/individual_fight.png') }}"/><br>
                </td>
                <td>
                  <img style="width:50px;height:auto" src="{{ asset('images/pdf/individual_Layer 11.png') }}"/><br>
                </td>
              </tr>
            <tr>
              <td>
                <span>Detecting and responding to <span class="purple_highlight">suspicious</span> situations.</span>
              </td>
              <td>
                <span>Recognising <span class="purple_highlight">threat-based surveillance</span>.<span>
                </td>
                <td>
                  <span>Detecting and responding to <span class="purple_highlight">unattended suspicious baggage</span>.<span>
                  </td>
                  <td>
                    <span>Responding to <span class="purple_highlight">unattended stationary vehicles</span>.<span>
                    </td>
                    <td>
                      <span>Responding to <span class="purple_highlight">vehicular attacks</span>.<span>
                      </td>
                      <td>
                        <span>Responding to <span class="purple_highlight">disorderly behaviour in public</span>.<span>
                        </td>
                        <td>
                          <span>Responding to <span class="purple_highlight">fire emergency</span>.<span>
                          </td>
                        </tr>
                      </table>
                    </div>
                  </div>
                  @elseif(is_array($result) && count($result) == 0)
                  This officer have not attend this Course.
                  @endif
                  @endif
                </div>
              </div>

              @section('js')

              <!-- Select2 -->
              {!! Html::style('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css') !!}
              {!! Html::script('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js') !!}

              <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
              <script>
              var course = '';

              function downloadPDF(formData)
              {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', '{!! url('lms/individual') !!}?courseid={!! $courseid !!}&download=true&userid={!! $userid !!}');
                xhr.responseType = "blob";
                xhr.setRequestHeader('X-CSRF-Token', '{{ csrf_token() }}');
                xhr.send(formData);
                xhr.onload = function () {
                  if (this.status === 200) {
                    var blob = new Blob([xhr.response], {type: "application/pdf"});
                    var blobUrl = window.URL.createObjectURL(blob);
                    var anchor = document.createElement('a');
                    anchor.download = 'download.pdf';
                    anchor.href = blobUrl;
                    anchor.click();

                    document.getElementById("genReport").innerText = 'Download PDF';
                    $('#genReport').removeAttr('disabled');
                  }
                };
              }
              var dlText = 'Downloading. Please wait...';
              $('#genReport').click(function () {
                if(document.getElementById("genReport").innerText != dlText)
                {
                  document.getElementById("genReport").innerText = dlText;
                  $('#genReport').attr('disabled','disabled');
                  if({!! $courseid !!}!=0)
                  {
                    var formData = new FormData();
                    formData.append('chart1', document.getElementById("chart-area").toDataURL());
                    if(document.getElementById("chart-area2") != null)
                    {
                      formData.append('chart2', document.getElementById("chart-area2").toDataURL());
                    }
                    if(document.getElementById("chart-area3") != null)
                    {
                      formData.append('chart3', document.getElementById("chart-area3").toDataURL());
                    }
                    downloadPDF(formData);
                  }
                }
              });
              // $(".select2-lms-course").select2({
              //   tags: false,
              //   allowClear: true,
              //   data: {!! json_encode(App\LMS::getCourses(NULL)) !!},
              //   placeholder: "Search for a Course",
              //   allowClear: true,
              //   quietMillis: 300,
              // });
              // $(".select2-lms-course").on("select2:select", function(event) {
              //   course = $(".select2-lms-course").val();
              // });
              $('.select2-lms-course').on("change", function(e) {
                course = $(".select2-lms-course").val();
              });
              $(".select2-lms-course").val({!! empty($courseid) ? "'4'" : $courseid !!}).trigger("change");

              $(".select2-lms-trainer").select2({
                tags: false,
                allowClear: true,
                ajax: {
                  delay: 200,
                  url: '{!! url('lms/getUser') !!}',
                  data: function (params) {
                    var query = {
                      search: params.term,
                      type: 'public',
                      course: course,
                      institution: '{!! isset($company) ? $company->id : 0 !!}',
                    }
                    return query;
                  },
                  processResults: function (data) {
                    return {
                      results: data
                    };
                  }
                },
                placeholder: "Search with Name or NRIC",
                minimumInputLength: 3,
                allowClear: true,

              });

              var colorp = [
                'rgb(36, 106, 210)','rgb(224, 138, 53)'];
                @if(count($sortedAttempts)>=1)
                var ctx = document.getElementById("chart-area").getContext("2d");
                var setting = {
                  type: 'doughnut',data: {datasets: [{data: [],backgroundColor: colorp,label: ''}],labels: []},options: {
                    elements: {
                      arc: {
                        borderWidth: 0
                      }
                    },
                    animation: {
                      duration: 0,
                      onComplete: function () {
                        var self = this,
                        chartInstance = this.chart,
                        ctx = chartInstance.ctx;

                        ctx.font = '15px Arial';
                        ctx.textAlign = "center";
                        ctx.fillStyle = "#ffffff";

                        Chart.helpers.each(self.data.datasets.forEach((dataset, datasetIndex) => {
                          var meta = self.getDatasetMeta(datasetIndex),
                          total = 0, //total values to compute fraction
                          labelxy = [],
                          offset = Math.PI / 2, //start sector from top
                          radius,
                          centerx,
                          centery,
                          lastend = 0; //prev arc's end line: starting with 0

                          for (var val of dataset.data) { total += val; }

                          Chart.helpers.each(meta.data.forEach((element, index) => {
                            radius = 0.9 * element._model.outerRadius - element._model.innerRadius;
                            centerx = element._model.x;
                            centery = element._model.y;
                            var thispart = dataset.data[index],
                            arcsector = Math.PI * (2 * thispart / total);
                            if (element.hasValue() && dataset.data[index] > 0) {
                              labelxy.push(lastend + arcsector / 2 + Math.PI + offset);
                            }
                            else {
                              labelxy.push(-1);
                            }
                            lastend += arcsector;
                          }), self)

                          var lradius = radius * 3 / 4;
                          for (var idx in labelxy) {
                            if (labelxy[idx] === -1) continue;
                            var langle = labelxy[idx],
                            dx = centerx + lradius * Math.cos(langle),
                            dy = centery + lradius * Math.sin(langle),
                            val = Math.round(dataset.data[idx] / total * 100);
                            ctx.fillText(val + '%', dx, dy);
                          }

                        }), self);
                      }
                    }
                    ,responsive: true,legend: {position: 'top'},title: {display: true,text: '',fontSize: 18},cutoutPercentage:0}};
                    setting.data.datasets[0].data = [
                      @if(count($sortedAttempts)>=1)
                      {!! $sortedAttempts[0][0]->Quiz_attempt_sum !!},{!! $sortedAttempts[0][0]->Quiz_sum_grade - $sortedAttempts[0][0]->Quiz_attempt_sum !!}
                      @endif
                    ];
                    setting.options.title.text = "First Attempts ("+
                    @if(count($sortedAttempts)>=1)
                    {!! floor($sortedAttempts[0][0]->Quiz_attempt_sum)  !!}+"/"+{!! $sortedAttempts[0][0]->Quiz_sum_grade !!}
                    @endif
                    +")";
                    window.myDoughnut = new Chart(ctx, setting);
                    @endif

                    @if(count($sortedAttempts)>=2)
                    var ctx2 = document.getElementById("chart-area2").getContext("2d");
                    var setting2 = {
                      type: 'doughnut',data: {datasets: [{data: [],backgroundColor: colorp,label: ''}],labels: []},options: {
                        elements: {
                          arc: {
                            borderWidth: 0
                          }
                        },
                        animation: {
                          duration: 0,
                          onComplete: function () {
                            var self = this,
                            chartInstance = this.chart,
                            ctx = chartInstance.ctx;

                            ctx.font = '15px Arial';
                            ctx.textAlign = "center";
                            ctx.fillStyle = "#ffffff";

                            Chart.helpers.each(self.data.datasets.forEach((dataset, datasetIndex) => {
                              var meta = self.getDatasetMeta(datasetIndex),
                              total = 0, //total values to compute fraction
                              labelxy = [],
                              offset = Math.PI / 2, //start sector from top
                              radius,
                              centerx,
                              centery,
                              lastend = 0; //prev arc's end line: starting with 0

                              for (var val of dataset.data) { total += val; }

                              Chart.helpers.each(meta.data.forEach((element, index) => {
                                radius = 0.9 * element._model.outerRadius - element._model.innerRadius;
                                centerx = element._model.x;
                                centery = element._model.y;
                                var thispart = dataset.data[index],
                                arcsector = Math.PI * (2 * thispart / total);
                                if (element.hasValue() && dataset.data[index] > 0) {
                                  labelxy.push(lastend + arcsector / 2 + Math.PI + offset);
                                }
                                else {
                                  labelxy.push(-1);
                                }
                                lastend += arcsector;
                              }), self)

                              var lradius = radius * 3 / 4;
                              for (var idx in labelxy) {
                                if (labelxy[idx] === -1) continue;
                                var langle = labelxy[idx],
                                dx = centerx + lradius * Math.cos(langle),
                                dy = centery + lradius * Math.sin(langle),
                                val = Math.round(dataset.data[idx] / total * 100);
                                ctx.fillText(val + '%', dx, dy);
                              }

                            }), self);
                          }
                        }
                        ,responsive: true,legend: {position: 'top'},title: {display: true,text: '',fontSize: 18},cutoutPercentage:0}};
                        setting2.data.datasets[0].data = [
                          @if(count($sortedAttempts)>=2)
                          {!! $sortedAttempts[1][0]->Quiz_attempt_sum !!},{!! $sortedAttempts[1][0]->Quiz_sum_grade - $sortedAttempts[1][0]->Quiz_attempt_sum !!}
                          @endif
                        ];
                        setting2.options.title.text = "Second Attempts ("+
                        @if(count($sortedAttempts)>=2)
                        {!! round($sortedAttempts[1][0]->Quiz_attempt_sum)  !!}+"/"+{!! $sortedAttempts[1][0]->Quiz_sum_grade !!}
                        @endif
                        +")" ;
                        window.myDoughnut2 = new Chart(ctx2, setting2);
                        @endif
                        @if(count($sortedAttempts)>=3)
                        var ctx3 = document.getElementById("chart-area3").getContext("2d");
                        var setting3 = {
                          type: 'doughnut',data: {datasets: [{data: [],backgroundColor: colorp,label: ''}],labels: []},options: {
                            elements: {
                              arc: {
                                borderWidth: 0
                              }
                            },
                            animation: {
                              duration: 0,
                              onComplete: function () {
                                var self = this,
                                chartInstance = this.chart,
                                ctx = chartInstance.ctx;

                                ctx.font = '15px Arial';
                                ctx.textAlign = "center";
                                ctx.fillStyle = "#ffffff";

                                Chart.helpers.each(self.data.datasets.forEach((dataset, datasetIndex) => {
                                  var meta = self.getDatasetMeta(datasetIndex),
                                  total = 0, //total values to compute fraction
                                  labelxy = [],
                                  offset = Math.PI / 2, //start sector from top
                                  radius,
                                  centerx,
                                  centery,
                                  lastend = 0; //prev arc's end line: starting with 0

                                  for (var val of dataset.data) { total += val; }

                                  Chart.helpers.each(meta.data.forEach((element, index) => {
                                    radius = 0.9 * element._model.outerRadius - element._model.innerRadius;
                                    centerx = element._model.x;
                                    centery = element._model.y;
                                    var thispart = dataset.data[index],
                                    arcsector = Math.PI * (2 * thispart / total);
                                    if (element.hasValue() && dataset.data[index] > 0) {
                                      labelxy.push(lastend + arcsector / 2 + Math.PI + offset);
                                    }
                                    else {
                                      labelxy.push(-1);
                                    }
                                    lastend += arcsector;
                                  }), self)

                                  var lradius = radius * 3 / 4;
                                  for (var idx in labelxy) {
                                    if (labelxy[idx] === -1) continue;
                                    var langle = labelxy[idx],
                                    dx = centerx + lradius * Math.cos(langle),
                                    dy = centery + lradius * Math.sin(langle),
                                    val = Math.round(dataset.data[idx] / total * 100);
                                    ctx.fillText(val + '%', dx, dy);
                                  }

                                }), self);
                              }
                            }
                            ,responsive: true,legend: {position: 'top'},title: {display: true,text: '',fontSize: 18},cutoutPercentage:0}};
                            setting3.data.datasets[0].data = [
                              @if(count($sortedAttempts)>=3)
                              {!! $sortedAttempts[2][0]->Quiz_attempt_sum !!},{!! $sortedAttempts[2][0]->Quiz_sum_grade - $sortedAttempts[2][0]->Quiz_attempt_sum !!}
                              @endif
                            ];
                            setting3.options.title.text = "Third Attempts ("+
                            @if(count($sortedAttempts)>=3)
                            {!! round($sortedAttempts[2][0]->Quiz_attempt_sum)  !!}+"/"+{!! $sortedAttempts[2][0]->Quiz_sum_grade !!}
                            @endif
                            +")" ;
                            window.myDoughnut3 = new Chart(ctx3, setting3);
                            @endif


                            </script>
                            @endsection
                          </div>

                          @endsection