{% 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'abscences</h3>
</div>
<div class="mt-4 col-md-12 col-sm-12 table-responsive">
<div class="row">
<div class="col-3 table-responsive"></div>
<div class="col-6 table-responsive">
{{ form_start(form, {action: path('admin_abscences_sheet_create'),'attr': { 'class':'evaluation'} }) }}
<p>
{{ form_widget(form.sequence ,{'attr':{'class':'ChoiceSequence'} } ) }}
</p>
<p>
{{ form_widget(form.classRoom,{'attr':{ 'name' :'ChoiceClassRoom'} }) }}
</p>
<div class="row">
<div class="col-6">
{{ form_widget(form.startDate,{'attr':{ 'name' :'StartDate'} }) }}
</div>
<div class="col-6">
{{ form_widget(form.endDate,{'attr':{ 'name' :'EndDate'} }) }}
</div>
</div>
</div>
<div class="col-3 table-responsive"></div>
</div>
</div>
<div id="ficheBodyStudents" class=" col-md-12 row">
{% include "abscence_sheet/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_abscences_sheet_index') }}">
<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 = $("#abscence_sheet_classRoom");
var idClassRoom, idSequence=$("#abscence_sheet_sequence").val(), startDate, endDate;
classRoom.change(function () {
idClassRoom = $("#abscence_sheet_classRoom option:selected").val();
$.ajax({
type: "POST",
url: "{{ path('admin_abscence_list_students') }}",
data: {
idClassRoom: idClassRoom
},
datatype: "json",
success: function (data) {
$("#ficheBodyStudents").html(data).show();
}
});
});
$("#abscence_sheet_sequence").change(function () {
idSequence = $(this).val();
});
$("#abscence_sheet_startDate").change(function () {
startDate = $(this).val();
});
$("#abscence_sheet_endDate").change(function () {
endDate = $(this).val();
});
$(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();
console.log(idClassRoom, idSequence, startDate, endDate);
var abscencesJson = [];
if(startDate < endDate) {
$("input[max=180]").each(function (index) {
abscencesJson.push({"matricule": $(this).attr('id'), "weight": $(this).val(), "raison": $(this).parent().next().children().val()});
});
console.log(abscencesJson);
postData = {
"abscences": JSON.stringify(abscencesJson),
"idRoom": idClassRoom,
"idSequence": idSequence,
"startDate": startDate,
"endDate": endDate
};
if(abscencesJson.length>0){
$.ajax({
type: "POST",
url: "{{ path('admin_abscences_sheet_create') }}",
data: postData,
datatype: "json",
success: function (data) {
alert("Enregistre avec succes.");
},
error: function (e) {
console.log(e.message);
alert("Echec.");
}
});
} else {
alert("Aucune abscence enregistree");
}
} else {
alert("La date de debut doit etre anterieure a la date de fin");
}
});
});
</script>
{% endblock javascripts %}