{% extends 'base.html.twig' %}

{% block title %}
	Fiche
	{{ student }}
	- ENPC Auto
{% endblock %}

{% block body %}
	<div class="row">
		<div class="col-md-12 grid-margin">
			<div class="d-flex justify-content-between flex-wrap">
				<div class="d-flex align-items-end flex-wrap">
					<div class="d-flex">
						<i class="mdi mdi-home text-muted hover-cursor"></i>
						<p class="text-muted mb-0 hover-cursor">
							&nbsp;/&nbsp;
							{% if is_granted('ROLE_SUPER_ADMIN') == true %}
								<a class="student-dashbord-service" href="{{ "/details/adherent/" ~ student.customer.id ~ "?tab=students-tab" }}">Élèves</a>
							{% else %}
								<a class="student-dashbord-service" href="{{ path("students_list") }}">Élèves</a>
							{% endif %}
							&nbsp;/&nbsp;
						</p>
						<p class="text-primary mb-0 hover-cursor">{{ student }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	{# common flash messages bloc #}
	{{ include('common/flash_messages_bloc.html.twig') }}
	{# user header infos #}
	{{ include('student/includes/header_student_infos.html.twig') }}
	<div class="row">
		<div class="col-md-12 p-0 stretch-card">
			<div class="card">
				<div class="card-body border-0 px-2">
					{{ include('student/includes/_nav_bar_show.html.twig') }}
					<div class="tab-content border py-0 px-0">
						<div class="tab-pane fade show active" role="tabpanel">
							{{ include('student/includes/_nav_applications_type.html.twig') }}
							{{ include('enpc/includes/new/_student_applications.html.twig') }}
							{{ include('enpc/includes/new/_student_registration_applications.html.twig') }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Hidden routs -->
{% if student.id %}
	<input type="hidden" id="route_enpc_extension_application" value="{{ path('enpc_extension_application', {'id' : student.id }) }}">
	<input type="hidden" id="route_enpc_new_register_applications" value="{{ path('enpc_new_register_applications', {'id' : student.id }) }}">
	<input type="hidden" id="route_enpc_student_applications" value="{{ path('enpc_moto_student_card', {'id' : student.id, 'id_customer':student.customer.id }) }}">
	<input type="hidden" id="route_enpc_other_applications" value="{{ path('enpc_other_applications', {'id' : student.id, 'id_customer':student.customer.id }) }}">
	<input type="hidden" id="route_send_access" value="{{path('send_access')}}"/>
	<input type="hidden" id="id_student" value="{{ student.id }}">
{% endif %}
<!-- Modal delete manager -->{% endblock %}{% block pageJavascript %}
<script>
	// copy-clipboard
$(document).on('click', '.copy-clipboard', async function (e) {
const dataValue = $(this).attr('data-value');
await $(".input-to-clipboard-" + dataValue).select();
await document.execCommand('copy');
$(this).html('Copié');
});

// auto-login-btn
$(document).on('click', '.auto-login-btn', async function (e) {
e.stopPropagation()
const url = $(this).attr('data-url');
window.open(url, '_blank', 'noopener');
});

// submit
$(document).on('click', '.enpc_application_submit', async function (e) {
const element = $(this);
const indexElement = $(this).attr('data-index');
const submittedData = {
idStudent: $("#id_student").val(),
idApplication: $("#id_app_" + indexElement).val(),
durationValue: $("#duration_value_" + indexElement).val(),
durationType: $("#duration_type_" + indexElement).val(),
endDate: $("#end_date_" + indexElement).val(),
restCredit: $("#rest_credit_" + indexElement).val(),
usedCredit: $("#used_credit_" + indexElement).val()
};
$(this).html('<i class="fas fa-spinner fa-spin"></i>');
e.preventDefault();
const route = $("#route_enpc_extension_application").val();
await $.ajax({
type: "POST",
header: 'Content-type: application/json',
url: route,
data: submittedData,
cache: false,
success: function (e) {
var response = JSON.parse(e);
if (response.state == 'error') {
$('#alert-message').html(response.message);
$('#show-alert').removeClass('alert-success').addClass('alert-danger')
$('#show-alert').show()
} else {
const arrayMessages = response;
let retrunMessage = '';
if (arrayMessages != null) {
if (arrayMessages != null) {
arrayMessages.forEach(element => {
retrunMessage += element.message + '<br />'
});
}
}
$('#alert-message').html(retrunMessage);
$('#show-alert').removeClass('alert-danger').addClass('alert-success')
$('#show-alert').show()
// reload only div
$("#app_bloc").load(location.href + " #app_bloc>*", "");
} element.html('Valider');
},
error: function () {
element.html('Valider');
}
});
});
// init selected values
let appsSelected = [];
// show or hide validation button
function showHideValidation() { // delete empty items
arr = appsSelected.filter(item => item);
// delete duplicated items
arr.filter((c, index) => {
return arr.indexOf(c) === index;
});

if (jQuery.isEmptyObject(arr)) {
$("#validation_btn").removeClass('btn-success').addClass("disable-links").addClass("btn-secondary").show();
} else {
$("#validation_btn").removeClass('disable-links').addClass('btn-success').show();
} appsSelected = arr;
}
// ready
$(document).ready(function () {
showHideValidation();
})
// deselect applications
$(document).on('click', '.enpc_application_deselect', async function (e) {
const element = $(this);
const indexElement = $(this).attr('data-index');
element.hide();
$('#btn_select_' + indexElement).show();
$('#bloc_app_' + indexElement).removeClass('opacity-75');

// search the index of application if selected
index = appsSelected.findIndex(x => x.idApplication && parseInt(x.idApplication) === parseInt(indexElement));
appsSelected[index] = null;
// await appsSelected.splice(indexElement, 1);
showHideValidation()
return false;
});
// select applications
$(document).on('click', '.enpc_application_select', async function (e) {
const element = $(this);
const indexElement = $(this).attr('data-index');

// check permis
if (!checkPermis(indexElement)) {
return false;
}

const submittedData = {
idApplication: $("#bloc_id_app_" + indexElement).val(),
durationValue: $("#bloc_duration_value_" + indexElement).val(),
durationType: $("#bloc_duration_type_" + indexElement).val(),
drivingCategory: $("#bloc_permis_" + indexElement).val(),
subCategory: $("#bloc_filiere_" + indexElement).val() ? $("#bloc_filiere_" + indexElement).val() : ''
};

element.hide();
$('#btn_deselect_' + indexElement).show();
$('#bloc_app_' + indexElement).addClass('opacity-75');

appsSelected[indexElement] = submittedData;
showHideValidation()

return false;
});
// submit
$(document).on('click', '#validation_btn', async function (e) {
const element = $(this);
// disable buttons clicks
$(this).addClass("disable-links");
//
$(".enpc_application_select").each(function () {
$(this).addClass("disable-links");
});
// disable buttons clicks
$(".enpc_application_deselect").each(function () {
$(this).addClass("disable-links");
});
// add spinner
$(this).html('<i class="fas fa-spinner fa-spin"></i>');
e.preventDefault();
const route = $("#route_enpc_new_register_applications").val();
// send request
await $.ajax({
type: "POST",
header: 'Content-type: application/json',
url: route,
data: {
applications: appsSelected,
'category': 'moto'
},
cache: false,
success: function (e) {
var response = JSON.parse(e);
if (response.state == 'error') {
$('#alert-message').html(response.message);
$('#show-alert').removeClass('alert-success').addClass('alert-danger')
$('#show-alert').show()
} else {
const arrayMessages = response;
let retrunMessage = 'Résumé:<br />';
if (arrayMessages != null) {
// message account creation
// retrunMessage += arrayMessages.account ? arrayMessages.account.message : '';
// message driver license creation
// if(arrayMessages.driverLicense != null){
// arrayMessages.driverLicense.forEach(element => {retrunMessage += ' => '+element.ref + ' : '+element.message+'<br />'});
// }
// message applications creations
if (arrayMessages.applications != null) {
arrayMessages.applications.forEach(element => {
retrunMessage += ' => ' + element[0].ref + ' : ' + element[0].message + '<br />'
});
}
}
$('#alert-message').html(retrunMessage);
$('#show-alert').removeClass('alert-danger').addClass('alert-success')
$('#show-alert').show()
// redirect to student applications
setTimeout(function () {
const redirect_route = $("#route_enpc_student_applications").val();
window.location.href = redirect_route;
}, 500);
} element.html('<b>Inscrire aux applications sélectionnées</b>');
},
error: function () {
element.html('<b>Inscrire aux applications sélectionnées</b>');
$('#alert-message').html("Oups !! Une erreur inattendue, veuillez réessayer s'il vous plaît");
$('#show-alert').removeClass('alert-success').addClass('alert-danger')
$('#show-alert').show()
}
}); // */
});
// Global vars
let drivingContent = '';
let codeContent = '';
// register in new apps
$(document).on('click', '#heading_other_apps_bloc', async function (e) { // If uncollapsed (open)
if ($('#collapse_other_apps_bloc').hasClass('in')) { // close bloc
await $('#collapse_other_apps_bloc').removeClass('in').addClass('collapse');
} else if ($('#collapse_other_apps_bloc').hasClass('collapse')) { // If collapsed (closed)
if ((drivingContent === '' || drivingContent === null) && ((codeContent === '' || codeContent === null))) { // Get student's applications list
let studentApplicationsList = {{ studentApplicationsList|json_encode|raw }};
// add spinner
$('#spinner').html('<i class="fas fa-spinner fa-spin"></i>');
e.preventDefault();
const route = $("#route_enpc_other_applications").val();
// send request
await $.ajax({
type: "POST",
header: 'Content-type: application/json',
url: route,
data: {
studentApplicationsList: studentApplicationsList,
category: 'moto'
},
cache: false,
success: function (e) {
var response = JSON.parse(e);
if (response.state == 'error') {
$('#alert-message-other-bloc').html(response.message);
$('#show-alert-other-bloc').removeClass('alert-success').addClass('alert-danger')
$('#show-alert-other-bloc').show()
} else {
const refsCodeArray = response.refsCodeArray;
const refsDrivingArray = response.refsDrivingArray;
if (refsCodeArray.length > 0 || refsDrivingArray.length > 0) {
$('#message-select').html('<p>Sélectionnez les applications auxquelles vous souhaitez prolonger la durée ou inscrire l\'élève et cliquez sur <button class="btn btn-secondary text-white disable-links" id="validation_btn"> Inscrire aux applications sélectionnées</button></p>');
// Code bloc
if (refsCodeArray.length > 0) {
codeContent += '<h4>Code</h4>';
refsCodeArray.forEach(element => {
const labelProduct = '<p><strong>' + element.produit_libelle + '</strong></p>';
const categoryProduct = '<p><i>Catégorie: ' + element.categorie + '</i></p>';
let typeProduct = '';

let subCategoriesContent = '';
let subCategoriesFilieresContent = '';

if (element.array_sub_categories && element.array_sub_categories.length > 0) {
subCategoriesContent += '<div class="col-md-8 input-permis-application"><select class="mt-2 form-control select_bloc_code_permis" data-index="' + element.id_app + '" id="bloc_permis_' + parseInt(element.id_app) + '">';
subCategoriesContent += '<option value="">Permis</option>';
element.array_sub_categories.forEach(array_sub_category_element => {
subCategoriesContent += '<option value="' + array_sub_category_element.driver_license + '">' + array_sub_category_element.driver_license + '</option>';

// filière
if (array_sub_category_element.sub_categories && array_sub_category_element.sub_categories.length > 0) {
subCategoriesFilieresContent += '<div style="display:none" class="col-md-8 input-filiere-application-common_' + element.id_app + ' input-filiere-application_' + element.id_app + '_' + array_sub_category_element.driver_license + '"><select class="mt-2 form-control select_bloc_filiere"  data-index="' + element.id_app + '" id="bloc_filiere_' + element.id_app + '">';
subCategoriesFilieresContent += '<option value="">Filière</option>';
array_sub_category_element.sub_categories.forEach(sub_category => {
subCategoriesFilieresContent += '<option value="' + sub_category.identifiant + '">' + sub_category.identifiant + '</option>';
})
subCategoriesFilieresContent += '</select></div>';
}
})
subCategoriesContent += '</select></div>';
subCategoriesContent += '<p class="text-danger" id="bloc_permis_error_' + parseInt(element.id_app) + '"></p>';

subCategoriesContent += subCategoriesFilieresContent;
}
if (element.produit_type == "acces") {
typeProduct = '<p><i><b>Stock restant : ' + element.stock_quantite + '</b></i></p>';
} else if (element.produit_type == "abonnement") {
typeProduct = '<p><i><b>Abonnement</b></i></p>';
} else if (element.produit_type == "acces.conso") {
typeProduct = '<p><i><b>À la consommation</b></i></p>';
}
codeContent += '<div class="col-md-3">';
codeContent += '<div class="p-2 mx-0 my-2 text-center shadow-lg bloc-border bloc-radius offset-2" id="bloc_app_' + parseInt(element.id_app) + '">';
codeContent += labelProduct;
codeContent += categoryProduct;
codeContent += typeProduct;
codeContent += '<div class="row form-group justify-content-center">';
codeContent += '<div class="col-sm-4 col-md-12 input-delais-application">';
codeContent += '<input id="bloc_id_app_' + parseInt(element.id_app) + '" type="hidden" value="' + parseInt(element.id_app) + '" />';
codeContent += '<input class="mt-2 form-control bloc_duration_value" data-index="' + element.id_app + '" id="bloc_duration_value_' + parseInt(element.id_app) + '" type="number" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,\'\');" step="1" placeholder="Ex : 5" value="3" >';
codeContent += '</div>';
codeContent += '<div class="col-sm-4 col-md-12 input-delais-application"><select class="mt-2 form-control bloc_duration_type" data-index="' + element.id_app + '" id="bloc_duration_type_' + parseInt(element.id_app) + '"><option value="month">Mois</option><option value="day">Jour(s)</option></select></div>';
codeContent += subCategoriesContent;
codeContent += '<div class="col-sm-12">';
codeContent += '<button class="mt-2 btn btn-primary enpc_application_select button-select-application" id="btn_select_' + parseInt(element.id_app) + '" data-index="' + parseInt(element.id_app) + '" data-type-bloc="bloc_code" ><b>Sélectionner</b></button>';
codeContent += '<button class="mt-2 btn btn-success text-white enpc_application_deselect button-select-application" id="btn_deselect_' + parseInt(element.id_app) + '" style="display:none" data-index="' + parseInt(element.id_app) + '" data-type-bloc="bloc_code" ><b>Désélectionner</b></button>';
codeContent += '</div></div></div></div>';
});
$('#code-content').html(codeContent);
}
// Driving bloc
if (refsDrivingArray.length > 0) {
drivingContent += '<h4>Conduite</h4>';
refsDrivingArray.forEach(element => {
const labelProduct = '<p><strong>' + element.produit_libelle + '</strong></p>';
const categoryProduct = '<p><i>Catégorie: ' + element.categorie + '</i></p>';
let typeProduct = '';
if (element.produit_type == "acces") {
typeProduct = '<p><i><b>Stock restant : ' + element.stock_quantite + '</b></i></p>';
} else if (element.produit_type == "abonnement") {
typeProduct = '<p><i><b>Abonnement</b></i></p>';
} else if (element.produit_type == "acces.conso") {
typeProduct = '<p><i><b>À la consommation</b></i></p>';
}

let subCategoriesDrivingContent = '';
let subCategoriesDrivingFilieresContent = '';

if (element.array_sub_categories && element.array_sub_categories.length > 0) {
subCategoriesDrivingContent += '<div class="col-md-8 input-permis-application"><select class="mt-2 form-control select_bloc_code_permis" data-index="' + element.id_app + '" id="bloc_permis_' + parseInt(element.id_app) + '">';
subCategoriesDrivingContent += '<option value="">Permis</option>';
element.array_sub_categories.forEach(array_sub_category_element => {
subCategoriesDrivingContent += '<option value="' + array_sub_category_element.driver_license + '">' + array_sub_category_element.driver_license + '</option>';

// filière
if (array_sub_category_element.sub_categories && array_sub_category_element.sub_categories.length > 0) {
subCategoriesDrivingFilieresContent += '<div style="display:none" class="col-md-8 input-filiere-application-common_' + element.id_app + ' input-filiere-application_' + element.id_app + '_' + array_sub_category_element.driver_license + '"><select class="mt-2 form-control select_bloc_filiere" id="bloc_filiere_' + element.id_app + '_' + array_sub_category_element.driver_license + '">';
subCategoriesDrivingFilieresContent += '<option value="">Filière</option>';
array_sub_category_element.sub_categories.forEach(sub_category => {
subCategoriesDrivingFilieresContent += '<option value="' + sub_category.identifiant + '">' + sub_category.identifiant + '</option>';
})
subCategoriesDrivingFilieresContent += '</select></div>';
}
})
subCategoriesDrivingContent += '</select></div>';
subCategoriesDrivingContent += subCategoriesDrivingFilieresContent;
}

drivingContent += '<div class="col-md-3">';
drivingContent += '<div class="p-2 mx-0 my-2 text-center shadow-lg bloc-border bloc-radius offset-2" id="bloc_app_' + parseInt(element.id_app) + '">';
drivingContent += labelProduct;
drivingContent += categoryProduct;
drivingContent += typeProduct;
drivingContent += '<div class="row form-group justify-content-center">';
drivingContent += '<div class="col-sm-4 col-md-12 input-delais-application">';
drivingContent += '<input id="bloc_id_app_' + parseInt(element.id_app) + '" type="hidden" value="' + parseInt(element.id_app) + '" />';
drivingContent += '<input class="mt-2 form-control  bloc_duration_value" data-index="' + element.id_app + '" id="bloc_duration_value_' + parseInt(element.id_app) + '" type="number" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,\'\');" step="1" placeholder="Ex : 5" value="3" >';
drivingContent += '</div>';
drivingContent += '<div class="col-sm-4 col-md-12 input-delais-application"><select class="mt-2 form-control bloc_duration_type" data-index="' + element.id_app + '"  id="bloc_duration_type_' + parseInt(element.id_app) + '"><option value="month">Mois</option><option value="day">Jour(s)</option></select></div>';
drivingContent += subCategoriesDrivingContent;
drivingContent += '<div class="col-sm-12">';
drivingContent += '<button class="mt-2 btn btn-primary enpc_application_select button-select-application" id="btn_select_' + parseInt(element.id_app) + '" data-index="' + parseInt(element.id_app) + '" data-type-bloc="bloc_code" ><b>Sélectionner</b></button>';
drivingContent += '<button class="mt-2 btn btn-success text-white enpc_application_deselect button-select-application" id="btn_deselect_' + parseInt(element.id_app) + '" style="display:none" data-index="' + parseInt(element.id_app) + '" data-type-bloc="bloc_code" ><b>Désélectionner</b></button>';
drivingContent += '</div></div></div></div>';
});
$('#driving-content').html(drivingContent);
}
} else {
$('#message-select').html('<h3><i> Aucune application disponible</i></h3><p>Vous n\'avez plus de stock ou vous n\'êtes pas abonné aux codes d\'accès avec notre partenaire ENPC merci de vous mettre en contact avec leur service commercial.</p>')
}
}
$('#spinner').html('');
},
error: function () {
$('#spinner').html('');
$('#alert-message-other-bloc').html("Oups !! Une erreur inattendue, veuillez réessayer s'il vous plaît");
$('#show-alert-other-bloc').removeClass('alert-success').addClass('alert-danger')
$('#show-alert-other-bloc').show()
}
}); // */
}
// open bloc
$('#collapse_other_apps_bloc').removeClass('collapse').addClass('in');
}
});
// select permis and show filiére
$(document).on('change', '.select_bloc_code_permis', async function (e) {
const element = $(this);
const id_app = $(this).attr('data-index');
const all_filiere_selectors = 'input-filiere-application-common_' + id_app;
const filiere_selector = 'input-filiere-application_' + id_app + '_' + element.val();
// hide all filiere selectors of the selected APP
$('.' + all_filiere_selectors).hide();
// show selected PERMIS filieres of the selected APP
$('.' + filiere_selector).show();
// call update function
updateSelectedData(id_app);

// check permis value
checkPermis(id_app);


// RETURN
return false;
});
// select permis and show filiére
$(document).on('change', '.select_bloc_filiere', async function (e) {
const element = $(this);
const id_app = $(this).attr('data-index');
updateSelectedData(id_app, element.val())
return false;
});

// change duration value
$(document).on('change', '.bloc_duration_value', async function (e) {
const element = $(this);
const id_app = $(this).attr('data-index');
// call update function
updateSelectedData(id_app);
// RETURN
return false;
});

// change duration type
$(document).on('change', '.bloc_duration_type', async function (e) {
const element = $(this);
const id_app = $(this).attr('data-index');
// call update function
updateSelectedData(id_app);
// RETURN
return false;
});

// update selected data
function updateSelectedData(id_app, filiere = '') { // search the index of application if selected
index = appsSelected.findIndex(x => x.idApplication && parseInt(x.idApplication) === parseInt(id_app));
if (index >= 0) {
const submittedData = {
idApplication: $("#bloc_id_app_" + id_app).val(),
durationValue: $("#bloc_duration_value_" + id_app).val(),
durationType: $("#bloc_duration_type_" + id_app).val(),
drivingCategory: $("#bloc_permis_" + id_app).val(),
subCategory: filiere
};
// then
appsSelected[index] = submittedData;
}
}

// check is selected permis
function checkPermis(indexElement) {
const element_bloc_permis = $("#bloc_permis_" + indexElement);
const bloc_permis_error = $("#bloc_permis_error_" + indexElement);

if (element_bloc_permis) {
if (! element_bloc_permis.val()) {
$('#btn_deselect_' + indexElement).click();
element_bloc_permis.addClass('is-invalid border-danger');
bloc_permis_error.html('ce champ est obligatoire');
return false;
} else {
bloc_permis_error.html('');
element_bloc_permis.removeClass('is-invalid border-danger');
}
}
return true;
}
</script>{% endblock %}