@extends('layouts.app')

@section('breadcrumb')
<ul class="breadcrumb">
  <li class="active"><a href="/lms_agency">{!! trans('messages.lms_report') !!}</a></li>
</ul>
@stop


@section('content')
<style>
.table-reco > tbody > tr > td{
  text-align: center;
}
.table-reco > tbody > tr > td img {
  width:40px;
}
.purple_highlight{
  color:#9e009e;
}
.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 #ddd;
  font-weight: bold;
}
#progress > tbody > tr > td{
  text-align: center;
}
#remedial table{
  table-layout: fixed;
}
#remedial td{
  width:16%;
}
#performance table{
  table-layout: fixed;
}
#questionattempt td{
  text-align: center;
}
#performance td{
  width:50%;
  text-align: center;
}
#attempts td{
  text-align: center;
}
.header_left_underline{
  font-weight: bold;
  text-decoration: underline;
}
.coursetitle_header{
  font-size: 13px;
  text-align: center;
  padding: 5px;
  margin: 0 auto;
  line-height: 1!important;
}
.course_header span{
  /*font-size: 9px;*/
  font-weight: bold;
}
.coursetitle_header span{
  /*font-size: 9px;*/
  font-weight: bold;
}
.assquiz_holder{
  background-color: #f9e1e1;
  margin: : 10px 0 10px 0;
  /* display: flex; */
}
.assquiz{
  /* background-color: #f9e1e1; */
  padding: 0 20px 20px 20px;
}
.assquiz .pheader{
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}
</style>
<div class="container">
  <h1 class="pull-left">LMS Agency Report</h1>
  <div class="clearfix"></div>

  <div class="clearfix"></div>
  <div class="panel panel-default panel-info class ">
    <div class="panel-heading">
      <h4>
        {!! Form::label('', 'Course:') !!} {!! count($result) > 1 ? $result[0]->coursename  : '-' !!}
      </h4>
    </div>
    <div class="panel-body">
      {!! Form::open(['id' => 'lms-search', 'url' => 'lms_agency', 'files'=>true, 'data-submit' => 'noAjax']) !!}
      <div class="form-group col-sm-6">
        {!! 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-3">
        {!! Form::label('', 'Start Date:') !!}
        {!! Form::date('start_date' , \Carbon::now()->subYear()->month(6)->day(1) , ['class' => 'form-control']) !!}
      </div>
      <div class="form-group col-sm-3">
        {!! Form::label('', 'End Date:') !!}
        {!! Form::date('end_date' , \Carbon::now()->month(5)->day(31) , ['class' => 'form-control']) !!}
        {!! Form::hidden('agencyid' , getCurrentCompany(true) , ['class' => 'form-control']) !!}
      </div>
      <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($result && !$result->isEmpty())
      <a id="genReport" class="btn btn-primary">
        <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
        Download Report
      </a>

      <br>
      <div class="coursetitle_header" style="font-size:18px;">
        <span>
          {!! $result[0]->coursename !!}
        </span>
      </div>

      <h5 class="header_left_underline">
        1) Overall Training Progress
      </h5>
      <div class="coursetitle_header">
        <span>
          As of {!!  Carbon::now()->format('d F Y') !!}, there are {!! count($result)  !!} candidates registered for the {!! $result[0]->coursename !!} E-Learning.
        </span>
      </div>

      <div class="col-md-12 col-sm-12 col-xs-12" style="text-align:center;margin-bottom:20px;">
        <div class="col-md-4 col-sm-4 col-xs-12 col-md-offset-4 col-sm-offset-4">
          <canvas id="chart-area" width="1132" height="1132" style="display: block; height: 1132; width: 1132;"/>
        </div>
      </div>

      <table class="table table-bordered table-striped" id="performance">
        <theader>
          <tr>
            <td>
              <b>STATISTICS</b>
            </td>
            <td>
              <b>NUMBER OF CANDIDATES</b>
            </td>
          </tr>
        </theader>
        <tbody>
          <tr>
            <td style="text-align:left;">
              Registered
            </td>
            <td>
              <b>{!! count($result) !!}</b>
            </td>
          </tr>
          <tr>
            <td style="text-align:left;">
              Completed
            </td>
            <td>
              <b>{!! $trained_count !!}</b>
            </td>
          </tr>
          <tr>
            <td style="text-align:left;">
              Not Yet Completed
            </td>
            <td>
              <b>{!! $untrained_count !!}</b>
            </td>
          </tr>
        </tbody>
      </table>

      <h5 class="header_left_underline">
        2) Performance of candidates to achieve full marks
      </h5>
      <span class="tab">
        a) Attempts taken by candidates to achieve Full Marks:
      </span>
      <br />
      <div style="text-align:center;">
        <div class="col-md-4 col-sm-4 col-xs-12 col-md-offset-4 col-sm-offset-4">
          <canvas id="barchart-area" width="1132" height="1132" style="display: block; height: 1132; width: 1132;"/>
        </div>
      </div>

      <br />

      <table class="table table-bordered table-striped" id="performance">
        <tbody>
          <tr>
            <td>
              <b>STATISTICS</b>
            </td>
            <td>
              <b>NUMBERS OF CANDIDATES</b>
            </td>
          </tr>
          <tr>
            <td style="text-align:left;">
              i) Total Number of officers who PASSED in 1st attempt
            </td>
            <td>
              <b>{!! $pass_attempt1 !!}</b>
            </td>
          </tr>
          <tr>
            <td style="text-align:left;">
              ii) Total Number of officers who PASSED in 2nd attempt
            </td>
            <td>
              <b>{!! $pass_attempt2 !!}</b>
            </td>
          </tr>
          <tr>
            <td style="text-align:left;">
              ii) Total Number of officers who PASSED in 3rd attempt
            </td>
            <td>
              <b>{!! $pass_attempt3 !!}</b>
            </td>
          </tr>
        </tbody>
      </table>
      <div>
        <span>
          Please download the excel file (from the report page) for the details of the training.
        </span>
      </div>
      <br>
      <br>

      <div>
        <span>
          b) Performance of candidates for each E-Assessment question
        </span>
      </div>

      @if(count($questions))
      <div class="col-md-12 col-sm-12 col-xs-12 assquiz_holder">
        <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>
      @endif

      @if(count($chart_qn))
      <table class="table table-bordered table-striped" id="questionattempt">
        <tbody>
          <tr style="text-align:center;">
            <td>
            </td>
            <td>
              <b>1st Attempt</b>
            </td>
            <td>
              <b>2nd Attempt</b>
            </td>
            <td>
              <b>3rd Attempt</b>
            </td>
          </tr>
          @foreach($chart_qn as $index => $qn)
          <tr>
            <td>
              <b>
                {!! $qn !!}
              </b>
            </td>
            <td>
              {!! $attempt_1[$index] !!}
            </td>
            <td>
              {!! $attempt_2[$index] !!}
            </td>
            <td>
              {!! $attempt_3[$index] !!}
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
      @else
      <table id="progress" class="table table-bordered table-striped">
        <tbody>
          <tr>
            <td>
              No attempts
            </td>
          </tr>
        </tbody>
      </table>
      @endif

    </br>
    <div>
      <span>
        c) Recommendation based on overall performance:
      </span>
    </div>
    <br />
    <div>
      @if($attempt_2_percent < 25)
      <span>
        The overall performance result obtained from {!! $result[0]->coursename !!} E-Learning is fairly good and the candidates have exhibited sufficient security knowledge on the topic.
        <!-- Additional E-Learning training may include: -->
      </span>
      @else
      <span>
        The overall performance result obtained from {!! count($result) > 1 ? $result[0]->coursename  : '-' !!} E-Learning requires Candidates to upgrade their security knowledge as
        @if($result->whereIn('attempts',[1,2,3])->count() > 0)
        {!! $attempt_2_percent !!}
        @else
        0
        @endif
        % of them require at least 2 or more attempts to score full marks.
        <!-- Additional E-Learning training may include: -->
      </span>
      @endif
    </div>
    <br />

    <div class="col-md-12 col-sm-12 col-xs-12">
      <table class="table-reco" style="width:100%">
        <tr>
          <td>
            <img style="width:40px;height:auto" src="{{ asset('images/pdf/individual_person.png') }}" /><br>
          </td>
          <td>
            <img style="width:40px;height:auto" src="{{ asset('images/pdf/individual_camera.png') }}" /><br>
          </td>
          <td>
            <img style="width:40px;height:auto" src="{{ asset('images/pdf/individual_suspiciousBag.png') }}" /><br>
          </td>
          <td>
            <img style="width:40px;height:auto" src="{{ asset('images/pdf/individual_car.png') }}" /><br>
          </td>
          <td>
            <img style="width:40px;height:auto" src="{{ asset('images/pdf/individual_accident.png') }}" /><br>
          </td>
          <td>
            <img style="width:40px;height:auto" src="{{ asset('images/pdf/individual_fight.png') }}" /><br>
          </td>
          <td>
            <img style="width:40px;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>.
          </td>
          <td>
            <span>Detecting and responding to <span class="purple_highlight">unattended suspicious baggage</span>.
          </td>
          <td>
            <span>Responding to <span class="purple_highlight">unattended stationary vehicles</span>.
          </td>
          <td>
            <span>Responding to <span class="purple_highlight">vehicular attacks</span>.
          </td>
          <td>
            <span>Responding to <span class="purple_highlight">disorderly behaviour in public</span>.
          </td>
          <td>
            <span>Responding to <span class="purple_highlight">fire emergency</span>.
          </td>
        </tr>
      </table>
    </div>
    <br />

    <table id="lms_agency" class="table table-hover table-striped"
    data-toggle="table"
    data-show-export="true"
    data-search="true"
    data-show-pagination-switch="false"
    data-mobile-responsive="true"
    data-check-on-init="true"
    data-detail-formatter="detailFormatter"
    data-side-pagination="client"
    data-pagination="false"
    data-page-list="[50, 100, 200, 400, 800]"
    data-page-size="50"
    data-sort-name="Attempt_time"
    data-sort-order="desc">
    <thead>
      <tr>
        <th data-field="NRIC" data-sortable="true">NRIC</th>
        <th data-field="Firstname" data-formatter="actionFormatterTrainee" data-sortable="true">Name</th>
        <th data-field="Companyname" data-sortable="true">Company Name</th>
        <th data-field="coursename" data-sortable="true">Course</th>
        <th data-field="Attempt_time" data-formatter="actionFormatterCompleted" data-sortable="true">Completed</th>
        <th data-field="attempts" data-sortable="true">Attempts</th>
        <th data-field="Pass" data-sortable="true">Pass</th>
        <th data-align="center" data-field="view" data-formatter="actionFormatterView" data-sortable="true">individual</th>
      </tr>
    </thead>
    <script type="text/javascript">
    </script>
  </table>
  @else
  No trainings
  @endif
</div>
</div>


@section('js')
<!-- Bootstrap-table JS -->
{!! Html::script('vendor/bootstrap-table/dist/bootstrap-table.min.js',[], env("HTTPS",false)) !!}

<!-- Bootstrap-table-editable JS -->
{!! Html::script('vendor/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min.js',[], env("HTTPS",false)) !!}
<script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">

<!-- Bootstrap-table-export JS -->
{!! Html::script('vendor/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js',[], env("HTTPS",false)) !!}
<script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>

<!-- Bootstrap-table-mobile-responsive -->
{!! Html::script('vendor/bootstrap-table/dist/extensions/mobile/bootstrap-table-mobile.min.js',[], env("HTTPS",false)) !!}

<!-- Bootstrap-table-toolbar -->
{!! Html::script('vendor/bootstrap-table/dist/extensions/toolbar/bootstrap-table-toolbar.min.js',[], env("HTTPS",false)) !!}
{!! HTML::style('vendor/bootstrap-table/src/bootstrap-table.css') !!}

{!! Html::script('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js') !!}

{!! 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>
$(function () {
  $('#lms_agency').bootstrapTable('destroy');
  $('#lms_agency').bootstrapTable({
    data: {!! json_encode($result) !!}
  });
});
function actionFormatterTrainee(value, row, index) {
  if(value)
  {
    return [
      row.Firstname.toUpperCase()+" "+row.Lastname.toUpperCase(),
    ].join('');
  }
};
function actionFormatterCompleted(value, row, index) {
  if(value)
  {
    return [
      moment.unix(value).format('DD MMM YYYY HH:mm A')
    ].join('');
  }
};
function actionFormatterView(value, row, index){
  var link ='{!! url('individual') !!}'+'?userid='+row.userid+'&courseid='+row.courseid+'&coy='+row.Companyname;
  return [
    '<a style="text-decoration:none;" target="_blank" href="'+link+'">',
    '<span style="display: block!important;" class="fa fa-eye"></span>',
    '</a>'
  ].join('');
};

$('#dlExcel').click(function () {
  document.getElementById("dlExcel").innerText = 'Downloading..';
  $('#dlExcel').attr('disabled','disabled');
});
$('#dlCerts').click(function () {
  document.getElementById("dlCerts").innerText = 'Downloading..';
  $('#dlCerts').attr('disabled','disabled');
});
$('#genReport').click(function () {
  document.getElementById("genReport").innerText = 'Downloading..';
  $('#genReport').attr('disabled','disabled');
  if('{!! $courseid !!}'!='')
  {
    var formData = new FormData();
    formData.append('chart1', document.getElementById("chart-area").toDataURL());
    formData.append('chart2', document.getElementById("barchart-area").toDataURL());

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '{!! url('lms_agency') !!}?courseid={!! $courseid !!}&download=true&start_date={!! isset($start_date) ? $start_date : '' !!}&end_date={!! isset($end_date) ? $end_date : '' !!}');
    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 = 'agency-{!! $courseid !!}.pdf';
        anchor.href = blobUrl;
        anchor.click();

        document.getElementById("genReport").innerText = 'Download PDF';
        $('#genReport').removeAttr('disabled');
      }
    };
  }
});

$(".select2-lms-course").select2({
  tags: false,
  allowClear: true,
  placeholder: "Search for a Course",
  minimumInputLength: 0,
  minimumResultsForSearch: -1,
});

// $(".select2-lms-course").val({!! empty($courseid) ? "'ReAcT'" : "'".$courseid."'" !!}).trigger("change");
@if(isset($courses) && $courses)
@foreach($courses as $course)
var $user_option = $("<option></option>").val("{!! $course->id !!}").text("{!! $course->text !!}");
$('.select2-lms-course').append($user_option);
@endforeach
@endif

// @if(isset($courseid) && $courseid)
// var $user_option = $("<option selected></option>").val("{!! $courseid !!}").text("{!! $courseid !!}");
// $('.select2-lms-course').append($user_option).trigger('change');
// @endif

$(".select2-lms-course").on("select2:select", function(event) {
  course = $(".select2-lms-course").val();
});


// $(".select2-lms-agency").on("select2:select", function(event) {
//   agency_id = $(".select2-lms-agency").val();
//   $(".select2-lms-course").select2('data', null);
// });
var colorp = [
  'rgb(255, 159, 64)','#1F618D','#28B463','rgb(255, 205, 86)'];
  function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;
    while (0 !== currentIndex) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }
    return array;
  }

  window.onload = function() {
    if({!! count($result)!!} > 0)
    {
      var ctx4 = document.getElementById("chart-area").getContext("2d");
      var ctx2 = document.getElementById("barchart-area").getContext("2d");
      var v1 = {!! $trained_count !!};
      var v2 = {!! $untrained_count !!};

      //init first graph
      var setting4 = {
        type: 'doughnut',data: {datasets: [{data: [],backgroundColor:colorp,label: ''}],labels: []},options:{elements: {arc: {borderWidth: 0}},responsive: true,legend: {position: 'bottom'},title: {display: true,text: '',fontSize: 18},cutoutPercentage:0 , animation: {
          duration: 0,
          onComplete: function () {
            var self = this,
            chartInstance = this.chart,
            ctx = chartInstance.ctx;

            ctx.font = '20px Arial';
            ctx.textAlign = "center";
            ctx.fillStyle = "#fff";

            Chart.helpers.each(self.data.datasets.forEach((dataset, datasetIndex) => {
              var meta = self.getDatasetMeta(datasetIndex),
              total = 0,
              labelxy = [],
              offset = Math.PI / 2,
              radius,
              centerx,
              centery,
              lastend = 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);
          }
        }}};
        setting4.data.datasets[0].data = [
          v2,v1
        ];
        setting4.data.labels = [v2+' Not Completed', v1+' Completed'];
        setting4.options.title.text = "No. of Candidates who completed the E-Learning";
        window.myDoughnut4 = new Chart(ctx4, setting4);

        //init chart
        var setting2 = {
          type: 'doughnut',data: {datasets: [{data: [],backgroundColor:colorp,label: ''}],labels: []},options:{elements: {arc: {borderWidth: 0}},responsive: true,legend: {position: 'bottom'},title: {display: true,text: '',fontSize: 18},cutoutPercentage:0 , animation: {
            duration: 0,
            onComplete: function () {
              var self = this,
              chartInstance = this.chart,
              ctx = chartInstance.ctx;

              ctx.font = '20px Arial';
              ctx.textAlign = "center";
              ctx.fillStyle = "#fff";

              Chart.helpers.each(self.data.datasets.forEach((dataset, datasetIndex) => {
                var meta = self.getDatasetMeta(datasetIndex),
                total = 0,
                labelxy = [],
                offset = Math.PI / 2,
                radius,
                centerx,
                centery,
                lastend = 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);
            }
          }}};
          setting2.data.datasets[0].data = [
            {!! $result->where('attempts', 1)->count() !!},
            {!! $result->where('attempts', 2)->count() !!},
            // {!! $result->where('attempts', 3)->count() !!},
          ];
          setting2.data.labels = ['1st Attempt', '2nd Attempt'];
          setting2.options.title.text = "Candidates";
          window.myBarChart2 = new Chart(ctx2, setting2);



        }

      };
      </script>
      @endsection
    </div>

    @endsection