@extends('layouts.app') @section('title','Editer quizz') @section('content')
<div class="col-md-12">
	<div class="box">
		<div class="col-md-6">
			<p>@yield('title')</p>
		</div>
		<div class="col-md-6">
	
		</div>
	</div>
</div>

<div class="col-md-12">
	<div class="box">
		<form id="myform" method='POST' action='{!!url("admin/quizzes/update")!!}' enctype='multipart/form-data'>
			<input type='hidden' name='_token' value='{{Session::token()}}'>
			<input type='hidden' name='quiz_id' value='{{$quiz->id}}'>
			<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
			<input type="text" name="title" class='form-control' placeholder="Titre de quizz" value="{{$quiz->title}}" required><br>
				@foreach($quiz->questions as $index => $q)
				<div class="panel panel-default">
					<div class="panel-heading" role="tab" id="headingThree">
						<h4 class="panel-title">
							<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index}}" aria-expanded="false"
							 aria-controls="collapseThree">
								Question #{{$index+1}}
							</a>
						</h4>
					</div>
					<div id="collapse{{$index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
						<div class="panel-body">
							<div class='form-group'>
								<input type='hidden' name='question[{{$index}}][id]' value='{{$q->id}}'>
								<input id='' name='question[{{$index}}][content]' type='text' class='form-control' value="{{$q->content}}" required>
							</div>
							@foreach($q->answers as $index2 => $a)
							<div class='form-group'>
								<label for='titre'>Réponse</label>
								<input id='' name='question[{{$index}}][answer][{{$index2}}][id]' type='hidden' value="{{$a->id}}">
								<input id='' name='question[{{$index}}][answer][{{$index2}}][content]' type='text' class='form-control' value="{{$a->content}}" required>
							</div>
							<label>
								<input type='checkbox' class='answer-check' name='question[{{$index}}][answer][{{$index2}}][correct]' @if($a->correct == 1) checked @endif> La vraie réponse
							</label>
							<a class='remove_nested_fields' href='#'>Supprimer la réponse</a>
							@endforeach
						</div>

						<div>
							<button class="btn btn-custom  add_answer_m" type='button' onclick="addAnswer.call(this, {{$index2}}, {{$index}})" id="{{$index}}">Ajouter une reponse</button>
						</div>
					</div>
					<a class='remove_nested_fields add_answer_m' href='#' onclick="remoteRemoveQuestion.call(this, {{$q->id}})">Supprimer la Question</a>
				</div>

				@endforeach
				
			</div>
			<button class="btn btn-custom pull-left no_margin" type='button' onclick="addQuestion()">Ajouter une question</button>
	</div>
	</form>
</div>
<button class="btn btn-custom pull-right no_margin" type='submit' form="myform">Valider</button>
</div>

@endsection

∂

<script type="text/javascript">
	
		i = {{$index}}+1;

	a = 00;
	aN = 00;
q = 00;

function remoteRemoveQuestion (id){
	var button = this;
	var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
			$.ajax({
					/* the route pointing to the post function */
					url: '/admin/quizzes/'+id+'/destroyQuestion',
					type: 'GET',
					/* send the csrf-token and the input to the controller */
					data: {_token: CSRF_TOKEN},
					dataType: 'JSON',
					success: function () { 
							console.log('deleted');
					}
			}); 
	};

function addAnswer(aa,qq){
    if (a == 00 || aa > a) {
        a = aa;
    }
    if (q != qq) {
        a = aa;
        q = qq;
    }
    $('#collapse'+this.id+' .panel-body').append(
      "\
      <div class='form-group'>\
        <label for='titre'>Réponse</label>\
        <input name = 'question["+this.id+"][answer]["+(a+1)+"][content]' type='text' class='form-control' required>\
        <label>\
          <input type='checkbox' class='answer-check' name='question["+this.id+"][answer]["+(a+1)+"][correct]'> La vraie réponse\
        </label>\
        <a class='remove_nested_fields' href='#' >Supprimer la réponse</a>\
      </div>\
      "
    )
    a++;
    console.log(a);    
};
function addAnswerN(aaN){
	if (aN == 00 || aaN > aN) {
		aN = aaN;
}
	$('#collapse'+this.id+' .panel-body').append(
		"\
		<div class='form-group'>\
			<label for='titre'>Réponse</label>\
			<input name = 'questionNew["+this.id+"][answer]["+(aN+1)+"][content]' type='text' class='form-control' required>\
			<label>\
				<input type='checkbox' class='answer-check' name='questionNew["+this.id+"][answer]["+(aN+1)+"][correct]'> La vraie réponse\
			</label>\
			<a class='remove_nested_fields' href='#' >Supprimer la réponse</a>\
		</div>\
		"
	)
	console.log(a); 
aN++;
	console.log(a);    
};
function addQuestion(){
	$('.panel-group').append(
	  "\
	  <div class='panel panel-default'>\
					<div class='panel-heading' role='tab' id='headingThree'>\
					  <h4 class='panel-title'>\
						<a class='collapsed' role='button' data-toggle='collapse' data-parent='#accordion' href='#collapse"+i+"' aria-expanded='false' aria-controls='collapseThree'>Question #"+(i+1)+"</a>\
					  </h4>\
					</div>\
					<div id='collapse"+i+"' class='panel-collapse collapse' role='tabpanel' aria-labelledby='heading1'>\
					  <div class='panel-body'>\
						<div class='form-group'>\
						  <input id='' name = 'questionNew["+i+"][content]' type='text' class='form-control' required>\
						</div>\
						<div class='form-group'>\
						  <label for='titre'>Réponse</label>\
						  <input id='' name = 'questionNew["+i+"][answer]["+a+"][content]' type='text' class='form-control' required>\
						</div>\
						<label>\
						 <input type='checkbox' class='answer-check' name='questionNew["+i+"][answer]["+a+"][correct]'> La vraie réponse\
						</label>\
						<a class='remove_nested_fields' href='#' >Supprimer la réponse</a>\
					  </div>\
					  <div>\
					  <button class='btn btn-custom no_margin add_answer_m' type ='button' onclick='addAnswerN.call(this,"+a+")' id='"+i+"'>Ajouter une reponse</button>\
					  </div>\
					</div>\
					<a class='remove_nested_fields add_answer_m' href='#' >Supprimer la Question</a>\
				  </div>\
	  "
	)
	a++;
	i++

};
</script>