@extends('theme.master')
@section('title',"Show Report")
@section('content')
<section id="business-home" class="business-home-main-block">
    <div class="container">
        <h1 class="font-weight-semibold">{{ __('frontstaticword.scorecard') }}</h1>
    </div>
</section>
 <section class="main-wrapper finish-main-block">
   <div class="container">
   
  @if ($auth)
    <div class="row justify-content-center">
      <div class="col-md-12">
        <div class="">
          <div class="question-block">
           

          @if($topics->show_ans==1)
        
          <div class="question-block">
            <h3 class="text-center main-block-heading">{{ __('frontstaticword.answerreoprt') }}</h3>
            <br/>
            <table class="table table-bordered result-table">
              <thead>
                <tr>
                  <th>{{ __('frontstaticword.Question') }}</th> 
                  <th style="color: red;">{{ __('frontstaticword.YourAnswer') }}</th>
                  <th style="color: #48A3C6;">{{ __('frontstaticword.CorrectAnswer') }}</th>
                </tr>
              </thead>
              <tbody>
                
                @php
                $x = $count_questions;               
                $y = 1;
                @endphp
                @foreach($ans as $key=> $a)
                    <tr>
                      <td>{{ $a->quiz->question }}</td>
                       <td>{{ $a->user_answer }}</td>
                      <td>{{ $a->answer }}</td>
                     
                    
                    </tr>
                    @php                
                      $y++;
                      if($y > $x){                 
                        break;
                      }
                    @endphp
                 
                @endforeach              
               
              </tbody>
            </table>
            
          </div>

          @endif


          <div id="printableArea">
 <table class="table table-bordered result-table" style="display: none">
              <thead>
                <tr>
                  <th>{{ __('frontstaticword.TotalQuestion') }}</th>
                  <th>Total  Questions Attempted</th>
                  <th>Correct Questions</th>
                  <th>InCorrect Questions</th>
                  <th>Mark Per Question </th>
                  <th>{{ __('frontstaticword.TotalMarks') }} Obtained</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{$count_questions}}</td>
                  <td>{{count($ans)}}</td>
                  <td>
                    @php
                      $mark = 0;
                      $ca=0;
                      $inca=0;
                      $correct = collect();
                    @endphp
                    @foreach ($ans as $answer)
                      @if (strtolower($answer->answer) == strtolower($answer->user_answer))
                      
                        @php
                          $mark++;
                          $ca++;
                        @endphp
                        @else
                         @php
                          $inca++;
                        @endphp
                      @endif
                    @endforeach
                    {{$ca}}
                  </td>
                  
                   <td>{{$inca}}</td>
                  <td>{{$topics->per_q_mark}}</td>
                    @php
                    if($user_exam_id)
                    {
                          $correct1  = $mark*$topics->per_q_mark;
                          if(isset($course->minus_mark))
                          {

                            $mmark = $inca * $course->minus_mark;
                              $correct = $correct1  - $mmark;
                          }else
                          {

                            $correct =  $correct1;

                          }
                          
                          \DB::table('quiz_answers')
                          ->where('topic_id',$topics->id )  
                          ->where('user_id',$user_exam_id)    
                          ->update(array('score_card' => $correct));

                    }else
                    {


                    $correct1  = $mark*$topics->per_q_mark;
                    if(isset($course->minus_mark))
                    {

                    $mmark = $inca * $course->minus_mark;
                    $correct = $correct1  - $mmark;
                    }else
                    {

                    $correct =  $correct1;

                    }


                    \DB::table('quiz_answers')
                    ->where('topic_id',$topics->id )  
                    ->where('user_id',$auth->id )    
                    ->update(array('score_card' => $correct));
                    }

                        
                    @endphp
                  <td>{{$correct}}</td>
                </tr>
              </tbody>
            </table>
           <!--<h3 class="text-center main-block-heading">{{ __('frontstaticword.scorecard') }} </h3>
            <br/>-->

<!--<style type="text/css">
@media screen and (max-width: 1200px){
 .mobile_txt{
  font-size: 14px !important;
   font-weight: 100 !important;
 }
 .mobile_score{
 font-size: 18px !important;
 }
 .mobile_img{
 width: 69px !important;
 }
 .mobile_div{
  height: 80px !important;
 }
}
</style>-->

<div class="row">
    <div class="col-md-12">
        <p class="mobile_txt mb-0"> <b>Note :</b> Negetive Mark Per InCorrect Questions  </p>
         <p class="mobile_score">{{$course->minus_mark}} </p>
    </div>
</div>

<div class="row scorecard-row">
    <div class="col-sm-6 col-md-4">
        <div class="card card-body border-0 scorecard-box">
            <div class="d-block">
                <div class="mobile_score mb-3"><div class="mobile_score-bg"><img src="{{url('public/quiz/question.gif')}}" class="mobile_img img-fluid"></div></div>
                <div class="">
                     <p class="mobile_txt font-weight-medium mb-0"> Total  Questions Attempted  </p>
                     <h4 class="mobile_score count">{{$count_questions}}</h4>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-6 col-md-4">
        <div class="card card-body border-0 scorecard-box">
            <div class="d-block">
                <div class="mobile_score mb-3"><div class="mobile_score-bg"><img src="{{url('public/quiz/total.gif')}}" class="mobile_img img-fluid"></div></div>
                <div class="">
                     <p class="mobile_txt font-weight-medium mb-0"> Total  Questions Attempted  </p>
                     <h4 class="mobile_score count">{{$inca}}</h4>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-6 col-md-4">
        <div class="card card-body border-0 scorecard-box">
            <div class="d-block">
                <div class="mobile_score mb-3"><div class="mobile_score-bg"><img src="{{url('public/quiz/right-decision.gif')}}" class="mobile_img img-fluid"></div></div>
                <div class="">
                     <p class="mobile_txt font-weight-medium mb-0"> Correct Questions  </p>
                     <h4 class="mobile_score count">{{$ca}}</h4>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-6 col-md-4">
        <div class="card card-body border-0 scorecard-box">
                <div class="mobile_score mb-3"><div class="mobile_score-bg"><img src="{{url('public/quiz/wrong-decision.gif')}}" class="mobile_img img-fluid"></div></div>
                <div class="d-block">
                     <p class="mobile_txt font-weight-medium mb-0">In Correct Questions </p>
                     <h4 class="mobile_score count">{{$inca}}</h4>
                </div>
            </div>
        </div>
    
    
    <div class="col-sm-6 col-md-4">
        <div class="card card-body border-0 scorecard-box">
            <div class="d-block">
                <div class="mobile_score mb-3"><div class="mobile_score-bg"><img src="{{url('public/quiz/user.gif')}}" class="mobile_img img-fluid"></div></div>
                <div class="">
                     <p class="mobile_txt font-weight-medium mb-0">Mark Per Question </p>
                     <h4 class="mobile_score count">{{$topics->per_q_mark}}</h4>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-6 col-md-4">
        <div class="card card-body border-0 scorecard-box">
            <div class="d-block">
                <div class="mobile_score mb-3"><div class="mobile_score-bg"><img src="{{url('public/quiz/like.gif')}}" class="mobile_img img-fluid"></div></div>
                <div class="">
                     <p class="mobile_txt font-weight-medium mb-0">Total Marks Obtained </p>
                     <h4 class="mobile_score count">{{$correct}}</h4>
                </div>
            </div>
        </div>
    </div>
    </div>

<div class="row py-4 my-lg-1">
  <div class="col-md-12"><hr></div>
 </div>

<div class="row">
  <div class="col-md-6">
      <div class="bg-white p-3 graf">
        <div id="chartContainer" style="height: 500px; width: 100%;"></div>
        <!--<div style="background: #fff; width: 100%; height: 10px; margin-top: -10px;    z-index: 999999999999999; position: relative;"></div>-->
    </div>
  </div>

 <div class="col-md-6 mt-4 mt-md-0">
     <div class="bg-white p-3 graf">
        <div id="chartContainer2" style="height: 500px; width: 100%;"></div>
        <!--<div style="background: #fff; width: 100%; height: 10px; margin-top: -10px;    z-index: 999999999999999; position: relative;"></div>-->
    </div>
  </div>
</div>


<!--<div class="col-md-12" style="float: left;
    background: #fff;
    padding-top: 16px;
    padding-bottom: 16px;
    border-radius: 14px;
    -webkit-box-shadow: -7px -1px 18px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: -7px -1px 18px -4px rgba(0,0,0,0.75);
    box-shadow: -7px -1px 18px -4px rgb(0 0 0 / 21%);">
    <div class="col-md-12 mobile_div" style="float: left;height: 112px; border: 1px solid #ccc;">

<span style="text-align: center; ">
 <p style=" font-size: 19px;
    margin-top: 18px;
    margin-bottom: 0;    font-weight: 500;" class="mobile_txt"> Note : Negetive Mark Per InCorrect Questions  </p>
 <p style="    font-size: 37px;
    font-weight: bold;" class="mobile_score">{{$course->minus_mark}}</p>
</span>
</div>


<div class="col-md-4 mobile_div" style="float: left;height: 112px; border: 1px solid #ccc;">
<img src="{{url('public/quiz/question.gif')}}" style="width: 100px; float: left;" class="mobile_img">
<span style="float: left; margin-left: 10px;">
 <p style=" font-size: 19px;
    margin-top: 18px;
    margin-bottom: 0;    font-weight: 500;" class="mobile_txt"> Total No. of Questions  </p>
 <p style="    font-size: 37px;
    font-weight: bold;" class="mobile_score">{{$count_questions}}</p>
</span>
</div>

<div class="col-md-4 mobile_div" style="float: left;height: 112px; border: 1px solid #ccc;">
<img src="{{url('public/quiz/total.gif')}}" style="width: 90px; float: left;" class="mobile_img">
<span style="float: right; margin-left: 8px;">
 <p style=" font-size: 16px;
    margin-top: 18px;
    margin-bottom: 0;    font-weight: 500;" class="mobile_txt"> Total  Questions Attempted  </p>
 <p style="    font-size: 37px;
    font-weight: bold;" class="mobile_score">{{count($ans)}}</p>
</span>
</div>

<div class="col-md-4 mobile_div" style="float: left; height: 112px;  border: 1px solid #ccc;">
<img src="{{url('public/quiz/right-decision.gif')}}" style="width: 100px; float: left;" class="mobile_img">
<span style="float: left; margin-left: 10px;">
 <p style=" font-size: 18px;
    margin-top: 18px;
    margin-bottom: 0;    font-weight: 500;" class="mobile_txt"> Correct Questions  </p>
 <p style="    font-size: 37px;
    font-weight: bold;" class="mobile_score">{{$ca}}</p>
</span>
</div>


<div style="clear: both;"></div>
<br/>
<div class="col-md-4 mobile_div" style="float: left;height: 112px; border: 1px solid #ccc;">
<img src="{{url('public/quiz/wrong-decision.gif')}}" style="width: 100px; float: left;" class="mobile_img">
<span style="float: left; margin-left: 10px;">
 <p style=" font-size: 19px;
    margin-top: 18px;
    margin-bottom: 0;    font-weight: 500;" class="mobile_txt"> InCorrect Questions  </p>
 <p style="    font-size: 37px;
    font-weight: bold;" class="mobile_score">{{$inca}}</p>
</span>
</div>

<div class="col-md-4 mobile_div" style="float: left;height: 112px; border: 1px solid #ccc;">
<img src="{{url('public/quiz/user.gif')}}" style="width: 100px; float: left;" class="mobile_img">
<span style="float: left; margin-left: 8px;">
 <p style=" font-size: 18px;
    margin-top: 18px;
    margin-bottom: 0;    font-weight: 500;" class="mobile_txt"> Mark Per Question  </p>
 <p style="    font-size: 37px;
    font-weight: bold;" class="mobile_score">{{$topics->per_q_mark}}</p>
</span>
</div>


<div class="col-md-4 mobile_div" style="float: left; height: 112px;  border: 1px solid #ccc;" >
<img src="{{url('public/quiz/like.gif')}}" style="width: 100px; float: left;" class="mobile_img">
<span style="float: left; margin-left: 10px;">
 <p style=" font-size: 18px;
    margin-top: 18px;
    margin-bottom: 0;    font-weight: 500;" class="mobile_txt"> Total Marks Obtained  </p>
 <p style="    font-size: 37px;
    font-weight: bold;" class="mobile_score">{{$correct}}</p>
</span>
</div>

</div>-->

           
           
<!--<div style="clear: both;"></div>
<br/><br/><br/><br/>



<div class="">
  <div class="col-md-6" style="     border-right: 1px solid #ccc; float: left;   background: #fff;
    padding: 5px;">
<div id="chartContainer" style="height: 500px; width: 100%;"></div>
<div style="background: #fff; width: 100%; height: 10px; margin-top: -10px;    z-index: 999999999999999; position: relative;"></div>
  </div>

 <div class="col-md-6" style="  float: left;   background: #fff;
    padding: 5px;">
<div id="chartContainer2" style="height: 500px; width: 100%;"></div>
<div style="background: #fff; width: 100%; height: 10px; margin-top: -10px;    z-index: 999999999999999; position: relative;"></div>
  </div>

</div>-->
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<script>
window.onload = function() {

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  title: {
    text: ""
  },
  data: [{
    type: "pie",
    startAngle: 240,
    yValueFormatString: "",
    indexLabel: "{label} {y}",
    dataPoints: [
      {y: "{{$count_questions}}", label: "Total No. of Questions"},
      {y: "{{count($ans)}}", label: "Total Questions Attempted"},
      {y: "{{$ca}}", label: "Correct Questions"},
      {y: "{{$inca}}", label: "InCorrect Questions"},
      {y: "{{$topics->per_q_mark}}", label: "Mark Per Question"},
      {y: "{{$correct}}", label: "Total Marks Obtained"}
    ]
  }]
});
chart.render();




var chart2 = new CanvasJS.Chart("chartContainer2", {
  animationEnabled: true,
  title:{
    text: "",
    horizontalAlign: "left"
  },
  data: [{
    type: "doughnut",
    startAngle: 60,
    //innerRadius: 60,
    indexLabelFontSize: 17,
    indexLabel: "{label}",
    toolTipContent: "<b>{label}:</b> {y} ",
    dataPoints: [
      {y: '{{$count_questions}}', label: "Total No. of Questions"},
      {y: '{{count($ans)}}', label: "Total Questions Attempted"},
      {y: '{{$ca}}', label: "Correct Questions"},
      {y: '{{$inca}}', label: "InCorrect Questions"},
      {y: '{{$topics->per_q_mark}}', label: "Mark Per Question"},
      {y: '{{$correct}}', label: "Total Marks Obtained"}
    ]
  }]
});
chart2.render();





}
</script>
<style type="text/css">
  .canvasjs-chart-credit{
    display: none !important;
  }
</style>
<div style="clear: both;"></div>
<br/><br/><br/>
            <h2 class="text-center">{{ __('frontstaticword.ThankYou') }}</h2>
          </div>

          

            <div class="finish-btn text-center">
              
             <!--  <input type="button" class="btn btn-primary"  onclick="printDiv('printableArea')" value="Print" /> -->
 @if($topics->institute_id == '')
 <a href="{{route('start_quiz_solution',$topics->id)}}" class="btn btn-danger p-2 text-capitalize font-size-15 border-0 line-hight-1 m-1"><span class="d-block px-2 py-1 font-weight-medium">See Solution</span></a>
 @endif


              @if($topics->quiz_again == '1')
              <a href="{{route('tryagain',$topics->id)}}" class="btn btn-danger p-2 text-capitalize font-size-15 border-0 line-hight-1 m-1"><span class="d-block px-2 py-1 font-weight-medium">{{ __('frontstaticword.TryAgain') }}</span></a>
              @endif
              @if($topics->institute_id == '')
              <a href="{{ route('course.content',['id' => $topics->course_id, 'slug' => $topics->courses->slug ]) }}" class="btn btn-danger p-2 text-capitalize font-size-15 border-0 line-hight-1 m-1"><span class="d-block px-2 py-1 font-weight-medium">Go to Test Series</span></a>
              @endif

        

            </div>
 
          </div>
        </div>
      </div>
    </div>
       @php
            $que=[];// =  App\Quiz::where('topic_id',$topics->id)->get();
            @endphp
            
<table class="table table-bordered result-table" style="display:none">
<thead>
<tr>
<th>Question No</th>
<th>Question</th>
<th>Option A</th>
<th>Option B</th>
<th>Option C</th>
<th>Option D</th>
<th>Correct Answer</th>
<th>Solution</th>
</tr>
</thead>
<tbody>
    
 @foreach($que as $key => $equestion)
<tr>
<td>{{$count}}</td>
<td><div style="height:150px; overflow-y:scroll;    width: 400px;">{!! $equestion['question'] !!}</div></td>
<td>{!! $equestion['a'] !!}</td>
<td>{!! $equestion['b'] !!}</td>
<td>{!! $equestion['c'] !!}</td>
<td>{!! $equestion['d'] !!}</td>
<td>{!! $equestion['answer'] !!}</td>
<td><div style="height:150px; overflow-y:scroll;">{!! $equestion['solution'] !!}</div></td>
</tr>
 @endforeach
</tbody>
</table>
  @endif
</div>
</section>

@endsection


@section('custom-script')

<script>
    function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
   }
</script>
@endsection