@extends('admin.layout')
@section('content')
<style type="text/css">
	.required-mark
	{
		color: red;
	}
  .mr-1{
        margin-right: 0.01rem !important;
    }
    .mt-0{
        margin-top: 0 !important;
    }
	hr {
		margin-left: 15px;
		margin-bottom:-3px;
	}
	.hr-primary{
		border: 1px solid #3c8dbc;
	}
	.bootstrap-select.btn-group .dropdown-menu li {
	    border-bottom: 1px solid #6c6c6cde;
	}	
	.my-current
	{
		color: #00c0ef;
	}


.reating {
  padding: 14px 20px;
  border: 1px solid #ddd3d3;
}
               .reating li {
    list-style: none;
    display: inline-block;
    margin-right: 20px;
    width: 100%;
    text-align: left;
}
.reating li input {
    display: inline;
    text-align: left;
    width: 16px;
    margin-right: 5px;
}

</style>
<div class="search-list">
	<div class="content-wrapper search-result-list"> 	
  <section class="content-header">
    <h1> {{ trans('Quiz Start') }} <small></small> </h1>
    <ol class="breadcrumb">
      <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('Quiz Start') }}</li>
    </ol>
  </section>
  <section class="content"> 
	@php
		$getUserRoleData = userRoleData();
		$LeadSources		= explode(",",$getUserRoleData->LeadSources);
      if(isset($_REQUEST['date'])) {
           $from_date = $_REQUEST['date'];
         }
	@endphp

    <div class="row">
      <div class="col-md-12">
        <div class="box box-info"> 
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
              		<div class="">                        
						<div class="row">
							@if(session()->has('message'))
								<div class="alert alert-success alert-dismissible">
								   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
								   <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
									{{ session()->get('message') }}
								</div>
							@endif
							@if(session()->has('error'))
								<div class="alert alert-warning alert-dismissible">
								   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
								   <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
									{{ session()->get('error') }}
								</div>
							@endif
						</div>
                         <div id="quiz-questionlist" class="box-body  modal fade">
                           <div class="modal-dialog" style="width: 65%;">
                             <div class="modal-content" style="overflow:hidden !important;">
                              <div class="modal-body">
                              <span  id="startquiz">Hi <strong>{{ auth()->guard('admin')->user()->first_name . ' ' .  auth()->guard('admin')->user()->last_name }}</strong>,</h3> <button type="button" onclick="getstarttime({{auth()->guard('admin')->user()->myid}})" class="btn btn-primary">{{ trans('Click here to Continue') }}</button></span>
                              <div id="questionpop"	style="display: none;" >
                                <i class="fa fa-clock-o" aria-hidden="true"></i>

                             <span id="display"></span><div id="submitted"></div>
                        	{!! Form::open(array('url' => route('save-quiz-answer'), 'method'=>'post', 'class' => 'form-horizontal', 'id' => 'addNewLeadSources', 'enctype'=>'multipart/form-data')) !!}

	
			
			
<div class="form-row">
   <strong class="pending-task-countdown-timer"></strong>
  @php $i=1; @endphp
  @if(count((array) $result['questiondata'])>0)
   @foreach ($result['questiondata'] as $key => $rsVal)
      <input type="hidden" name="qaquestion{{$i}}" id="qaquestion{{$rsVal['id']}}" value=""/>
  @php $answer_options=explode("|",$rsVal['answer_options']);
          // dd($answer_options);
          @endphp
      <div class="form-group col-md-12 d-inline mb-0" style="margin-bottom:0px !important;">
         
          <ul class="reating border border-secondary " id="checkq{{$rsVal['id']}}" @if($i>1)style="display:none;" @endif>
            <h4><strong>{{ $i.'.'. $rsVal['question_name']}}</strong></h4>
            @foreach($answer_options as $key =>$val1)
            <li style="margin-bottom:1px !important;"> 
            <input class="form-check-input chkradio ansval{{$rsVal['id']}}{{$key}}"  type="radio" name="inlineRadio{{$rsVal['id']}}" id="{{$rsVal['id']}}-{{$key}}" value=""
             onchange="mysumfunction(this.id)"><span>{{$val1}}</span> </li>
            @endforeach
           
          </ul>   

      </div>
      @php $i++; @endphp 
   
    @endforeach 
    @endif
          
    </div>
     <input type="hidden" name="no_of_attampt" id="no_of_attampt" value="{{$result['no_of_attampt']+1}}"> 
      <input type="hidden" name="qid" id="qid" value="{{$result['qid']}}"> 
     <input type="hidden" name="time" id="totalstime" value="{{$result['quiztime']}}">
     <input type="hidden" value="{{$i}}" id="total" name="total"/>
 
     

          <div class="text-center" style="float: left; margin-bottom:20px;">
          <button  type="submit" id="btn" style="display:none;"  class="btn btn-primary">{{ trans('Final Submit Your Quiz') }}</button>
                                
                              </div>
  
                        	{!! Form::close() !!}	
                        </div>
                      </div>
                      </div>
                    </div>
                   </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
</div>
<script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script>-->
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />

@if($result['quiz_obtainmark']!=count($result['questiondata']))
<script>

$(document).ready(function() {
$("#quiz-questionlist").modal({
      backdrop: 'static',
      keyboard: false
  });
  });

</script>
@endif
<script>
function getstarttime(userid){
 $.ajax({
           url: "{{URL('admin/quiz-starttime')}}",
                type: 'POST',
                data: {userid},
                success: function(res) 
                {
                  
                        $('#startquiz').hide();
                         $('#questionpop').show();
                       
                   
                   
                    
                },
                error: function(res) 
                {
                    console.log(res);
                }
            });

}
</script>
<script>

	function mysumfunction(myval)
	{ 
		
    var total=0;
    var totalquiz= document.getElementById('total').value;
    var quiztotal =totalquiz-1;
    var str=(myval);
    var result = str.split('-')
    var quizquestionId=result[0];
    var quizanswerKey=result[1];
    if(quizanswerKey==0){
    	var answer='A';
    }else if(quizanswerKey==1){
    	var answer='B';
    }else if(quizanswerKey==2){
    	var answer='C';
    }else {
    	var answer='D';
    }
    $.ajax({
                url: "{{URL('admin/check-Answer')}}",
                 data: {quizquestionId},
                success: function(res) 
                {
                	//alert(res);
                	    $(".ansval"+quizquestionId+quizanswerKey).each(function() { 
                    	if(res==answer){ //alert(quizquestionId);
                        $('#qaquestion'+quizquestionId).val(1+res);
                       }else{//alert(0);
                        $('#qaquestion'+quizquestionId).val(0+answer);
                       }
                      });
                      try{
                    document.getElementById('checkq'+quizquestionId).style.display = 'none';
                    ++quizquestionId;
                    document.getElementById('checkq'+quizquestionId).style.display = 'block';
                    } catch(err){
                       document.getElementById('btn').style.display = 'block';
                    }
                  
                },
                error: function(res) 
                {
                    console.log(res);
                }
            });
	}

	</script>
<script>
 function CountDown(duration, display) {
            if (!isNaN(duration)) {
                var timer = duration, minutes, seconds;
                
              var interVal=  setInterval(function () {
                    minutes = parseInt(timer / 60, 10);
                    seconds = parseInt(timer % 60, 10);

                    minutes = minutes < 10 ? "0" + minutes : minutes;
                    seconds = seconds < 10 ? "0" + seconds : seconds;

                    $(display).html("<b>" + minutes + "m : " + seconds + "s" + "</b>");
                    if (--timer < 0) {
                        timer = duration;
                       SubmitFunction();
                       $('#display').empty();
                       clearInterval(interVal)
                    }
                    },1000);
            }
        }
        
        function SubmitFunction(){
       $('#addNewLeadSources').submit();
        }
    var totalquizmnt= document.getElementById('totalstime').value;
    var totalquizsecnd= parseInt(totalquizmnt*60);
         CountDown(totalquizsecnd,$('#display'));
      
</script>
@endsection