{% 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') }}
	<div class="row">
		<div class="col-md-12 grid-margin stretch-card">
			<div class="card">
				<div class="card-body bloc-radius bloc-border bloc-box-shadow dashboard-tabs p-0">
					<ul class="nav nav-tabs nav-fill px-4" role="tablist">
						<li class="nav-item">
							<a 
								class="nav-link {% if category == 'auto' %} active {% endif %}"
								href="{{ path('enpc_register_student', {'id':student.id, 'id_customer':customer.id, 'permis': 'auto'})}}" 
							>
								<span>
									<i class="mdi mdi-car menu-icon"></i>
									<label class="pt-0">Auto</label>
								</span>
							</a>
						</li>
						<li class="nav-item">
							<a 
								class="nav-link {% if category == 'moto' %} active {% endif %}"
								href="{{ path('enpc_register_student', {'id':student.id, 'id_customer':customer.id, 'permis': 'moto'})}}" 
							>
								<i class="mdi mdi-motorbike menu-icon"></i>
								<label class="pt-0">Moto</label>
							</a>
						</li>
						<li class="nav-item">
							<a 
								class="nav-link {% if category == 'bateau' %} active {% endif %}"
								href="{{ path('enpc_register_student', {'id':student.id, 'id_customer':customer.id, 'permis': 'bateau'})}}" 
							>
								<span>
									<i class="mdi mdi-ferry menu-icon"></i>
									<label class="pt-0">Bateau</label>
								</span>
							</a>
						</li>
						{# <li class="nav-item">
							<a class="nav-link" id="admins-tab" href="#admins" role="tab" aria-controls="admins" aria-selected="false">
								<span>
									<i class="mdi mdi-cast menu-icon"></i>
									<label class="pt-0">Live code</label>
								</span>
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="admins-tab" href="#admins" role="tab" aria-controls="admins" aria-selected="false">
								<span>
									<i class="mdi mdi-library-books menu-icon"></i>
									<label class="pt-0">Fiches de code</label>
								</span>
							</a>
						</li> #}
					</ul>
					<div class="tab-content py-0 px-0">
						<div class="tab-pane fade show active" role="tabpanel" aria-labelledby="informations-tab">
							{{ include('enpc/includes/new/_student_registration_applications.html.twig') }}
						</div>
					</div>
			</div>
		</div>
	</div>
</div>
<!-- Hidden routs -->
{% if student.id %}
	<input type="hidden" id="route_enpc_new_register_applications" value="{{ path('enpc_new_register_applications', {'id' : student.id }) }}">
	{# {% if is_granted('ROLE_SUPER_ADMIN') == true %}
		<input type="hidden" id="route_enpc_student_applications" value="{{ path('enpc_auto_student_card', {'id' : student.id, 'id_customer':student.customer.id }) }}">
	{% else %}
		<input type="hidden" id="route_enpc_student_applications" value="{{ path('enpc_auto_student_card', {'id' : student.id }) }}">
	{% endif %} #}
	<input type="hidden" id="route_enpc_student_applications" value="{{ path('enpc_auto_student_card', {'id' : student.id, 'id_customer':student.customer.id }) }}">
	<input type="hidden" id="id_student" value="{{ student.id }}">
{% endif %}
<!-- Modal delete manager -->
{% endblock %}
{% block pageJavascript %}
    <script>
		//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_code_app_'+indexElement).removeClass('opacity-75');
			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');
            const submittedData = {
				idApplication : $("#bloc_code_id_app_"+indexElement).val(),
				durationValue : $("#bloc_code_duration_value_"+indexElement).val(),
				durationType : $("#bloc_code_duration_type_"+indexElement).val()
			};

			element.hide();
			$('#btn_deselect_'+indexElement).show();
			$('#bloc_code_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},
				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;
							}, 
							1000
						);
					}
					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()
				},
			});//*/
        });
	</script>
{% endblock %}