@extends('admin.layout')
@section('content')
<style type="text/css">
	.required-mark
	{
		color: red;
	}
	.answer-formgroup{
		background: #efffd9;
    padding-top: 5px;
    padding-bottom: 5px
	}
	.form-control[readonly]{
		background-color: #f2f2f2;
	}
	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;
	}
	#watermarked::before {
	position: fixed;
	top: -75%;
	left: -75%;
	display: block;
	width: 300%;
	height: 300%;
	transform: rotate(-45deg);
	content: attr(data-watermark);
	font-size: 30px;
	opacity: 0.15;
	line-height: 4em;
	letter-spacing: 2px;
	color: #ff0523;
	z-index:0;
	}
	.content-wrapper, .right-side{
		background: #FFF;
	}
	.box {
		background: transparent;
		z-index: 1; 
	}
</style>
<div class="search-list">
	<div class="content-wrapper search-result-list"> 	
  <section class="content-header">
    <h1> {{ trans('Quiz Answers Details of') }} <strong>{{$result['AnswerData'][0]['userdetail']['first_name']}} {{$result['AnswerData'][0]['userdetail']['last_name']}}</strong><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 Answers Details of') }}</li>
    </ol>
  </section>
  <section class="content"> 
	@php
		$getUserRoleData = userRoleData();
		$LeadSources		= explode(",",$getUserRoleData->LeadSources);
	@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 class="box-body">			 	
                        {!! Form::open(array('url' => route('check-quiz-info-for-update', [$result['questiondata'][0]['quiz_type']]), 'method'=>'post', 'class' => 'form-horizontal', 'id' => 'updateLeadSources', 'enctype'=>'multipart/form-data')) !!}
                        		@php $i=1; $j=0; @endphp
                        			 <h5></h5>
                        			 {!! Form::hidden('totalqution',count($result['questiondata']), array('class'=>'form-control', 'id'=>'totalqution' )) !!}
                         		<div class="form-group">
                        	 <label for="quiz_name" class="col-sm-2 col-md-2 control-label">{{ trans('Quiz Name') }}  <span class="required-mark"></span></label>
                        	 <div class="col-sm-10 col-md-10">
                           {!! Form::text('quiz_name',$result['questiondata'][0]['quiz_type'], array('class'=>'form-control', 'id'=>'quiz_name'.$i,'required'=>'required', 'readonly' )) !!}
                         </div></div>
                         @foreach($result['questiondata'] as $val) 
                         {!! Form::hidden('Qid'.$i,$val['id'], array('class'=>'form-control', 'id'=>'Qid'.$i )) !!}
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-2 control-label">{{ trans('Question Title') }}  <span class="required-mark"></span></label>
									<div class="col-sm-10 col-md-10">
										{!! Form::text('question_name'.$i,  $val['question_name'], array('class'=>'form-control', 'id'=>'question_name'.$i, 'required'=>'required', 'readonly')) !!}
									</div>
								</div>
								@php $answers=explode("|",$val['answer_options']);@endphp
								 <div class="form-group">
                                  <label for="A" class="col-sm-2 control-label">{{ trans('A') }}  <span class="required-mark"></span></label>
								       	
                                 <div class="col-sm-4 col-md-4">
                                    <!-- {!! Form::text('A'.$i,$answers['0'], array('class'=>'form-control', 'id'=>'A'.$i, 'required'=>'required', 'readonly')) !!}--->
									<h5>{{$answers['0']}}</h5>
                                  </div>
                                   <label for="B" class="col-sm-1 control-label">{{ trans('B') }}  <span class="required-mark"></span></label>
                                  <div class="col-sm-5 col-md-5">
                                   <!-- {!! Form::text('B'.$i,$answers['1'], array('class'=>'form-control', 'id'=>'B'.$i, 'required'=>'required', 'readonly')) !!}-->
									
									<h5>{{$answers['1']}}</h5>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="C" class="col-sm-2 control-label">{{ trans('C') }}  <span class="required-mark"></span></label>
                                  <div class="col-sm-4 col-md-4">
                                    <!--{!! Form::text('C'.$i,$answers['2'], array('class'=>'form-control', 'id'=>'C'.$i, 'required'=>'required', 'readonly')) !!}-->
									
									<h5>{{$answers['2']}}</h5>
                                  </div>
                                   <label for="D" class="col-sm-1 control-label">{{ trans('D') }}  <span class="required-mark"></span></label>
                                  <div class="col-sm-5 col-md-5">
                                  <!---  {!! Form::text('D'.$i,$answers['3'], array('class'=>'form-control', 'id'=>'D'.$i, 'required'=>'required', 'readonly')) !!}-->
									
									<h5>{{$answers['3']}}</h5>
                                  </div>
                                </div>
                                <div class="form-group answer-formgroup">
 

<div class="form-group answer-formgroup">
    <label for="name" class="col-sm-2 col-md-2 control-label" style="padding-top:0">{{ trans('Correct Answer') }}  <span class="required-mark">*</span></label>
    <div class="col-sm-10 col-md-3">
        @php 
            $ans = $val['answer'];  // Correct answer (A, B, C, D)
        @endphp
        <select disabled="true" name="Answer{{$i}}">
            <option value="">Select Answer</option>
            <option value="A" @php if($ans=='A') echo "selected"; @endphp >A</option>
            <option value="B" @php if($ans=='B') echo "selected"; @endphp>B</option>
            <option value="C" @php if($ans=='C') echo "selected"; @endphp>C</option>
            <option value="D" @php if($ans=='D') echo "selected"; @endphp>D</option>
        </select>
    </div>
    
    <label for="name" class="col-sm-2 col-md-2 control-label" style="padding-top:0">{{ trans('Your Answer') }}  <span class="required-mark">*</span></label>
    
    @php
        // Extract only the letter from the user's answer, removing any numbers or other characters.
        $userAnswer = preg_replace("/[^A-D]/", "", $result['AnswerData'][$j]['quiz_answer']);
    @endphp

    <div class="col-sm-10 col-md-3">
        <strong 
            @if($userAnswer == $ans)  
                style="color:white; background: green; display: inline-block; width: 24px; height:24px; text-align: center; line-height: 23px; border-radius: 100%;" 
            @else
                style="color:white; background: darkred; display: inline-block; width: 24px; height:24px; text-align: center; line-height: 23px; border-radius: 100%;" 
            @endif
        >
            {{ $userAnswer }}  
        </strong>
    </div>
</div>
									


                                @php $i++;$j++; @endphp
                                 @endforeach
                              <!-- <div class="text-center">
                                <button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>-->
                                {{-- <a href="{{URL('admin/get-assign-to-user')}}" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a> --}}
                              </div>
                        	{!! Form::close() !!}	
                      </div>
                  </div>
              </div>
            </div>
        </div>
        
		
		  <div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
		</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" />
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
			  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
		  });
  </script>
<script type="text/javascript">
	
	// Alphabets Only
	$.validator.addMethod("alpha", function(value, element) {
		return this.optional(element) || value == value.match(/^[a-zA-Z\s]+$/);
	});	
	
	// Password Check
	$.validator.addMethod("pwcheck", function(value) {
		return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,16}$/.test(value) // consists of only these
	});
	
	// Email Check
	$.validator.addMethod("email", function(value) {
		return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) // consists of only these
	});
	
	// File Size Validation
	jQuery.validator.addMethod("filesize_max", function(value, element, param) {
		var isOptional = this.optional(element),
			file;

		if(isOptional) {
			return isOptional;
		}
		if ($(element).attr("type") === "file") {

			if (element.files && element.files.length) {

				file = element.files[0];            
				return ( file.size && file.size <= param ); 
			}
		}
		return false;
	}, "File size is too large.");
	
	$( "#updateLeadSources" ).validate( {
			rules: {				
				name: {
					required: true,
					rangelength: [3, 100],
					//alpha: true
				},
			},
			messages: {
				name: {
					required: "Please enter name",
					//alpha: "Please enter name alphabets only"
				},
			},
			errorElement: "em",
			errorPlacement: function ( error, element ) {
				// Add the `help-block` class to the error element
				error.addClass( "help-block" );

				// Add `has-feedback` class to the parent div.form-group
				// in order to add icons to inputs
				element.parents( ".col-sm-5" ).addClass( "has-feedback" );

				if ( element.prop( "type" ) === "checkbox" ) {
					error.insertAfter( element.parent( "label" ) );
				} else {
					error.insertAfter( element );
				}

				// Add the span element, if doesn't exists, and apply the icon classes to it.
				if ( !element.next( "span" )[ 0 ] ) {
					$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
				}
			},
			success: function ( label, element ) {
				// Add the span element, if doesn't exists, and apply the icon classes to it.
				if ( !$( element ).next( "span" )[ 0 ] ) {
					$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
				}
			},
			highlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
				$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
			},
			unhighlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
				$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
			}
		} );	
</script>
@endsection