@extends('layouts.frontapp')

@section('title', 'Quiz')

@section('content')

<!--Main Content Start-->
   <div class="main-content innerpagebg wf100 p30">
      <!--News Large Page Start--> 
      <!--Start-->
      <div class="news-large">
         <div class="container">
            <div class="row">
               <!--News Start-->
               <div class="col-lg-3">
                  <div class="widget sidebar-ad" id="sidebar"> <img class="img-responsive" src="{{url('/')}}/assets/frontend/images/ad-vert.jpg" alt="" style="box-shadow: 0 4px 24px -5px rgba(0, 0, 0, 0.4);"> </div>
               </div>

               <div class="col-lg-6" id="story">
                  @if($noofquestions==0)
                      <h2 class="col-12 text-center text-dark mb-4">Quiz on <strong>{{$quizdta->quiz_name}}</strong></h2>
                      <div class="box mb-4">
                          <div class="col-12 text-center">
                              <img src="{{url('/')}}/assets/images/nodata.png">
                              <br>
                              <h3 class="mb-4">No questions have been added yet!</h3> @if(count($next)>0) Click <a href="{{url('/quizlist')}}/{{$next->id}}">here</a> to take quiz on {{$next->quiz_name}}. @endif
                              <a href="{{url('/quizlist')}}"><button class="btn btn-danger font-weight-bold" style="height:40px;font-size:20px">Go to Quiz Category</button></a>
                          </div>
                      </div>
                  @else
                        <!-- Main page -->
                        <h2 class="col-12 text-center text-dark mb-4">Quiz on <strong>{{$quizdta->quiz_name}}</strong></h2>
                        <div class="main mb-4">
                           <!-- Quiz Question -->
                           @if(count($qdata)==0)
                           <div class="quiz-questions row" id="display-area">
                           <div id="image-quiz" class="col-12 mb-2 text-center"></div>
                           <div class="col-12 d-flex">
                             <div class="d-flex align-items-start">
                              <span id="quizNumber"></span>
                             </div>
                             <div>
                              <p id="question"></p>
                             </div>
                            <div class="d-flex align-items-center" id="app"></div>
                           </div>
                           <div class="col-12">
                              <ul class="options p-0" id="answer">
                              </ul>
                           </div>   
                           </div>
                           @endif
                           <div id="quiz-results">
                             @if(count($qdata)>0)
                              @php 
                                $percentage = ($qdata->points / $noofquestions)*100;
                                $text_color = 'text-success';
                                $smile = 'fa-frown-open';
                              
                                if($percentage >= 40) {
                                  $text_color = 'text-success';
                                  $smile = 'fa-smile';
                                }
                              @endphp
  
                              <h2 class='text-success mb-4' style='font-style:oblique;text-align:center'>Well done! You've completed the quiz.</h2>
                              <h3 class='text-dark mb-4' style='text-align:center'>Your Score is: <strong class='{{$text_color}}' style='font-size:40px'>{{$qdata->points}}</strong>/<strong style='font-size:24px'>{{$noofquestions}}</strong>&nbsp&nbsp&nbsp&nbsp<!-- <i id='share' class='fas fa-share-alt'></i> --></h3>
                              <h3 class='text-dark mb-2' style='text-align:center'>Points Earned: <strong class='{{$text_color}}' style='font-size:36px'>{{$qdata->points}}</strong><div class='mt-3'><i class='far {{$smile}} {{$text_color}}' style='font-size:6rem'></i></div></h3>
                              @endif
                           </div>
                        </div>

                        @if(count($qdata)>0)
                          
                        @else 
                        <div class="text-center mb-3" style="display: none;" id="showbutton1">
                          @if(count($next)>0) <a href="{{url('/quizlist')}}/{{$next->id}}"><button class="btn btn-danger mr-3 font-weight-bold" style="height:40px;font-size:20px">Next Quiz on {{date("M d, Y",strtotime($next->enable_date)).' '.$next->enable_time }}</button></a> @endif
                          <a href="{{url('/quizlist')}}"><button class="btn btn-danger font-weight-bold" style="height:40px;font-size:20px">Go to Quiz Category</button></a>
                        </div> 
                        @endif
                   @endif
                        <img style="box-shadow: 0 4px 24px -5px rgba(0, 0, 0, 0.4);" class="mt-4 mb-4" src="{{url('/')}}/assets/frontend/images/ad-big.jpg" alt="" height="90px" class="img-responsive"  width="100%">                                     
                     </div>
               <div class="col-lg-3 sidebar">
                  <div class="widget sidebar-ad" id="sidebar1"> <img style="box-shadow: 0 4px 24px -5px rgba(0, 0, 0, 0.4);" class="img-responsive" src="{{url('/')}}/assets/frontend/images/ad-vert.jpg" alt=""> </div>
               </div>
            </div>
         </div>
      </div>
      <!--End--> 
   </div>
   <!--Main Content End-->

@endsection