@extends('layouts.default')
@section('content')

<style type="text/css">
.timer {
    background: none repeat scroll 0 0 #2a3f54;
    border-radius: 5px;
    float: left;
    width: 100%;
}

.timer .image {
	background: #e2e2e2 none repeat scroll 0 0;
	border: 5px solid #fff;
	border-radius: 100%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	float: left;
	height: 70px;
	overflow: hidden;
	width: 70px;
}

/*media all*/
.timer-img img {
    border-radius: 5px;
    border: 2px #fff solid;
    margin: 10px 0px 0px 10px;
}

/*media all*/
.timer-img-con {
    padding: 23px 0px;
    float: left;
    color: #fff;
}

/*media all*/
.awareness-view-hed {
    font-size: 15px;
    padding: 10px;
    font-weight: 500;
    line-height: 25px;
    color: #fff;
    border-bottom: 1px solid #fff;
    text-transform: none;
}
/*media all*/
.answered {
    background: none repeat scroll 0 0 #079452;
    border-bottom: 3px solid #000000;
    margin: -14px 0 0;
    padding: 0px 10px;
}
/*media all*/
.not-answered {
    background: none repeat scroll 0 0 #ff0000;
    border-bottom: 3px solid #000000;
    margin: -14px 0 0;
    padding: 0px 10px;
}
/*media all*/
.review {
    background: none repeat scroll 0 0 #ff7900;
    border-bottom: 3px solid #000000;
    margin: 15px 1px 15px;
    padding: 0px 10px;
    color: #fff;
}
/*media all*/
.not-visited {
    background-color: #60bae3 !important;
    color: #fff;
    border-bottom: 3px solid #000000;
    margin: 0;
    padding: 0px 10px;
}
/*media all*/
.z-answered {
    background-color: #60bae3 !important;
    color: #fff;
    border-bottom: 3px solid #000000;
    margin: 0;
    padding: 3px 10px;
}
/*media all*/
.numbers {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 3px solid #000000;
    color: #fff;
    float: left;
    margin: 10px;
    min-height: 35px;
    padding: 5px 0;
    width: 38px;
}

.q-answered {
    background-color: #079452 !important;
    color: #fff;
    border-bottom: 3px solid #000000;
    margin: 0;
    padding: 3px 10px;
}

.n-answered {
    background-color: #ff0000 !important;
    color: #fff;
    border-bottom: 3px solid #000000;
    margin: 0;
    padding: 3px 10px;
}

.m-answered {
    background-color: #ff7900 !important;
    color: #fff;
    border-bottom: 3px solid #000000;
    margin: 0;
    padding: 3px 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	for(var i=1;i<='0';i++){
		if(i>1){
			$(".list"+i).hide();
		}
	}
});
</script>

<div class="right_col" role="main">
  	<div class="">
	    <div class="page-title">
	      	<div class="title_left">
	        	<h3>Exam Information</h3>
	      	</div>
	    </div>
		<div class="row">
        	<div class="col-md-12 col-sm-12 col-xs-12">
            	<div class="x_panel">
	            	<div class="x_content">
						<div class="col-sm-8">
							<form id="myform" class="form-horizontal form-label-left" method="post" action="{{ url('studentValidateExam') }}" role="form">
								<ul class="list-group" id="">
																	</ul>
								<div class="row">
									<div class="col-md-8 btn-group">
										<button id="prev" type="button" class="btn bg-primary" style="margin: 5px;border-radius: 5px;display: none;" value="1">Previous</button>
										<button id="mnext" type="button" class="btn bg-primary" style="margin: 5px;border-radius: 5px">Mark for Review &amp; Next</button>
										<button id="next" type="button" class="btn bg-primary" style="margin: 5px;border-radius: 5px" value="1">Next</button>
										<button id="clearAnswer" type="button" class="btn bg-primary" style="margin: 5px;border-radius: 5px">Clear Answer</button>
									</div>
									<div class="col-md-4">
										<input type="hidden" name="quiz_id" value="">
										<input type="hidden" name="quiz_name" value="">
										<input type="hidden" name="total_questions" value="0">
										<input type="hidden" name="subject_name" value="">
										<input type="hidden" name="form_mins" id="form_mins">
										<input type="hidden" name="form_seconds" id="form_seconds">
										<input type="hidden" name="quiz_time" value="">
										<input type="submit" id="finish" class="btn bg-primary finished" value="finish" name="finish" onclick="return confirm('Are you sure you want to submit the quiz?')"  style="margin: 5px;border-radius: 5px;background: #079452 none repeat scroll 0 0">
									</div>
								</div>
								{{ csrf_field() }}
							</form>
						</div>
						<div class="col-sm-4">
							<div class="timer">
								<div class="col-sm-3">
								<img src="{{ url('assets/images/picture.jpg') }}" width="69" height="68" style="margin: 10px 0px 10px 0px;border-radius: 5px;border: 2px #fff solid;">
								</div>
								<div class="col-sm-9">
									<h4 style="padding: 20px 0px;color: #fff;font-size: 15px;font-weight: 500">