@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-->
             
             @include('includes.frontleft')

             <div class="col-lg-6" id="story">

                <h2 class="text-center text-dark mb-5">Complete Quiz from all categories to earn more points &amp; get a chance to win upto Rs.2000</h2>

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                	@if(count($quiz_category)>0)           
                        @foreach($quiz_category as $k => $value)

                        	@php
			                    $quizlist = DB::table('quiz_category')->where("category_id",$value->id)->where("status",'1')->get();
			                @endphp

                           <div class="panel panel-default mb-3">
                             <div class="panel-heading" role="tab" id="headingThree">
                               <h4 class="panel-title">
                               <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree{{$value->id}}" aria-expanded="false" aria-controls="collapseThree{{$value->id}}">
                                 {{$value->menu_name}}
                               </a>
                             </h4>
                             </div>
                             <div id="collapseThree{{$value->id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree{{$value->id}}">
                               <div class="panel-body">
                                 <div class="row">
                                 	@if(count($quizlist)>0)           
                        				      @foreach($quizlist as $key => $item)
		                                    <div class="col-lg-4 col-md-6 mt-3">
		                                       <div class="player-box with-extra-info">
		                                          @if($item->quiz_image)
		                                          	<div class="player-thumb"><img class="img-responsive" src="{{url('/')}}/uploads/quiz_image/{{$item->quiz_image}}" alt=""></div>
		                                          @else
		                                          	<div class="player-thumb"><img class="img-responsive" src="{{url('/')}}/assets/images/gallery/profile-gallery-3.jpg" alt=""></div>
		                                          @endif
		                                          <div class="player-txt text-center">
		                                            <p>Quiz On <br> <strong style="font-size: 20px;">{{$item->quiz_name}}</strong> </p>
		                                           <button class="btn btn-danger btn-block font-weight-bold" onclick="takeQuiz('{{$item->id}}')">Take Quiz</button>
		                                          </div>
		                                        </div> 
		                                    </div>
		                                @endforeach
		                            @else
		                            	<div class="col-lg-12 col-md-12 mt-3">No records to display!</div>
		                            @endif
                                 </div>
                               </div>
                             </div>
                           </div>
                        @endforeach
                    @endif

                 </div>                                 
             </div>

             @include('includes.frontright')
             
          </div>
       </div>
    </div>
    <!--End--> 
 </div>
 <!--Main Content End--> 

 <script type="text/javascript">
 	
 </script>

<style>  
.panel-default>.panel-heading {
  color: #333;
  background-color: #fff;
  border-color: #e4e5e7;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panel-default>.panel-heading a {
  display: block;
  padding: 10px 15px;
}

.panel-default>.panel-heading a:after {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  transition: transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
   background-color: #20273f;
   color: #d0d4df;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
  content: "\2212";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
  content: "\002b";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
      </style>
@endsection