{% extends 'layout/backEndLayout.html.twig' %}

{% block content %}
        	{% form_theme form 'bootstrap_4_layout.html.twig' %}
			  <div class="col-12 jumbotron" >
               
	 				<div class="row mt-4  mx-auto box-shadow">
						<div class="card-header">
                                        <h3 class="my-0 text-center text-justify text-uppercase">  Nouvelle fiche d evaluation</h3>
                        </div>
						<div class="mt-4 col-md-12 col-sm-12 table-responsive">

							<div class="row">
								<div class="col-2   table-responsive"></div>
								<div class="col-8  table-responsive">

									{{ form_start(form, {action: path('admin_evaluations_create'),'attr': {'id': 'formEvaluation', 'class':'evaluation'} }) }}


									<p>
										{{ form_widget(form.sequence ,{'attr':{'class':'ChoiceSequence'} } ) }}
									</p>


									<p>
										{{ form_widget(form.classRoom,{'attr':{'class':'ChoiceClassRoom', 'name' :'ChoiceClassRoom', 'id':'ChoiceClassRoom'} }) }}
									</p>
									<p>
										{{ form_widget(form.competence,{'attr':{'class':'form form-control'} }) }}
									</p>

								</div>
								<div class="col-2  table-responsive"></div>
							</div>
						</div>
						<div id="ficheBodyStudents" class=" col-md-12  row">
							{% include "evaluation/liststudents.html.twig" %}
						</div>
					</div>
					<div class="row mt-2 mx-auto">
							<div class=" col-3">
							</div>
							<div class=" col-3 mx-auto btn-group d-inline-flex p-2 bd-highlight">
								<button class="btn btn-danger" type="submit">
									<b>
										<i class="fa fa-balance-scale"></i>submit</b>
								</button>
                            </div>
							<div class="  col-3 mx-auto btn-group d-inline-flex p-2 bd-highligh">
								<a class="btn btn-info" href="{{ path('admin_evaluations') }}">
									<i class="fa fa-list"></i>
									{{ 'Back to the list'|trans({}, 'admin') }}
								</a>
								
							</div>
							<div class=" col-3">
							</div>
					</div>
				
			{{ form_end(form) }}
		</div>
				
{% endblock %}
{% block footer %}
	{{ parent() }}
{% endblock %}

{% block javascripts %}
	{{parent()}}

	<script type="text/javascript">
		var classRoom = document.getElementById("evaluation_classRoom"),
			competence = document.getElementById("evaluation_competence"),
			idclassroom,
			idcourse,
			idsequence,
			formEval = document.getElementById("formEvaluation");
			classRoom.setAttribute('name', 'ChoiceClassRoom');

			
			
			$(".ChoiceSequence").change(function () {
				idsequence = $("select.ChoiceSequence option:selected").val();
			});
			
			$(".ChoiceClassRoom").change(function () {
				idclassroom = $("select.ChoiceClassRoom option:selected").val();

				$.ajax({
					type: "POST",
					url: "{{ path('admin_classroom_students') }}",
					data: {
					idclassroom: idclassroom,
					idsequence: idsequence
					},
					datatype: "json",
					success: function (data) {
						$("#ficheBodyStudents").html(data).show();
					}
				});
			});


	var marksJson = [],
	postData;

		$(function () {
			$(document).on('submit', 'form', function (e) { // il est impératif de commencer avec cette méthode qui va empêcher le navigateur d'envoyer le formulaire lui-même
			e.preventDefault();
			

			$("input[max=20]").each(function (index) {
				marksJson.push({"matricule": $(this).attr('id'), "note": $(this).val(), "appreciation": $(this).parent().next().children().val(), "weight": $(this).parent().next().next().children().val()});
			});
			idcourse = $("select.ChoiceCourse option:selected").val();
			postData = {
				"marks": JSON.stringify(marksJson),
				"idroom": idclassroom,
				"idcourse": idcourse,
				"idsequence": idsequence,
				"competence": competence.value
			};
			
		$.ajax({
			type: "POST",
			url: "{{ path('admin_evaluations_create') }}",
			data: postData,
			datatype: "json",
			success: function (data) {
				alert("Enregistre avec succes.");
			},
			error: function (e) {
				console.log(e.message);
				alert("Echec.");
			}
			});
		});
		});
	</script>

{% endblock javascripts %}