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

		<form id="myform" method='POST' action='{!!url("admin/quizzes")!!}' enctype='multipart/form-data'>
			<input type='hidden' name='_token' value='{{Session::token()}}'>
			<input type="hidden" name="formation_id" value='{{$id}}'>
			<input type="hidden" name="chapter_id" value='{{$id2}}'>
			<div class="col-md-12">
			<input type="text" name="title" class='form-control' placeholder="Titre de quizz" required><br>
				<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
					<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="#collapse0" aria-expanded="false"
								 aria-controls="collapseThree">
									Question #1
								</a>
							</h4>
						</div>
						<div id="collapse0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
							<div class="panel-body">
								<div class='form-group'>
									<input id='' name='question[0][content]' type='text' class='form-control' required>
								</div>

								<div class='form-group'>
									<label for='titre'>Réponse</label>
									<input id='' name='question[0][answer][0][content]' type='text' class='form-control' required>
								</div>
								<label>
									<input type='checkbox' class='answer-check' name='question[0][answer][0][correct]'> La vraie réponse
								</label>
								<a class='remove_nested_fields' href='#'>Supprimer la réponse</a>
							</div>
							<div class="">
								<button class="btn btn-custom  add_answer_m" type='button' onclick="addAnswer.call(this)" id="0">Ajouter une reponse</button>
							</div>

						</div>
						<a class='remove_nested_fields add_answer_m' href='#'>Supprimer la Question</a>
					</div>

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

<script>
	a = 1;
q = 1;
function addAnswer(){
  

    $('#collapse'+this.id+' .panel-body').append(
      "\
      <div class='form-group'>\
        <label for='titre'>Réponse</label>\
        <input name = 'question["+this.id+"][answer]["+a+"][content]' type='text' class='form-control' required>\
        <label>\
          <input type='checkbox' class='answer-check' name='question["+this.id+"][answer]["+a+"][correct]'> La vraie réponse\
        </label>\
        <a class='remove_nested_fields' href='#' >Supprimer la réponse</a>\
      </div>\
      "
    )
    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"+q+"' aria-expanded='false' aria-controls='collapseThree'>Question #"+(q+1)+"</a>\
                        </h4>\
                      </div>\
                      <div id='collapse"+q+"' class='panel-collapse collapse' role='tabpanel' aria-labelledby='heading1'>\
                        <div class='panel-body'>\
                          <div class='form-group'>\
                            <input id='' name = 'question["+q+"][content]' type='text' class='form-control' required>\
                          </div>\
                          <div class='form-group'>\
                            <label for='titre'>Réponse</label>\
                            <input id='' name = 'question["+q+"][answer]["+a+"][content]' type='text' class='form-control' required>\
                          </div>\
                          <label>\
                           <input type='checkbox' class='answer-check' name='question["+q+"][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='addAnswer.call(this)' id='"+q+"'>Ajouter une reponse</button>\
                        </div>\
                      </div>\
                      <a class='remove_nested_fields add_answer_m' href='#' >Supprimer la Question</a>\
                    </div>\
        "
      )
      a++;
      q++
  
  };

</script>