{% 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 bloc-radius-bottom-left bloc-radius-bottom-right py-0 px-0">
						<div class="tab-pane fade show active">
							{{ include('student/includes/_nav_applications_type.html.twig') }}
							{# live code form section #}
							<div class="row px-4 my-2" id="app_bloc">
								<div class="col-md-12">
									<div class="alert alert-dismissible fade show"
									style="display:none"
									role="alert"
									id="show-alert">
									<span id="alert-message"></span>
									<button type="button"
										class="btn-close"
										data-bs-dismiss="alert"
										aria-label="Close">
									</button>
									</div>
								</div>
								<div class="accordion my-3 bloc-radius" id="applications">
									<div class="accordion-item bloc-radius shadow-lg my-3" >
										<div class="accordion-header bloc-radius" id="heading_live_code">
											<div class="row mx-0 pb-0 accordion-button bloc-radius bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_live_code" aria-expanded="true" aria-controls="collapse_live_code">
												<div class="col-sm-4">
													<strong>
														Fiches de code
													</strong>
												</div>
												<div class="col-sm-4">
													<span class="m-2 badge rounded-pill bg-secondary"><i class="mdi mdi-calendar menu-icon"></i> Inscrit le : {{student.createdAt|date("d/m/Y") }}</span>
												</div>
												<div class="col-sm-4">
													{% if ("now"|date('Y-m-d') > student.fichesCoursesDeadline|date('Y-m-d'))  %}
														<span class="m-2 badge rounded-pill bg-danger"><i class="mdi mdi-calendar menu-icon"></i> Valide jusqu'au {{student.fichesCoursesDeadline|date("d/m/Y") }}</span>
														<span class="m-2 badge rounded-pill bg-danger"> Accès fermé</span>
													{% else %}
														<span class="m-2 badge rounded-pill bg-success"><i class="mdi mdi-calendar menu-icon"></i> Valide jusqu'au {{student.fichesCoursesDeadline|date("d/m/Y") }}</span>
														<span class="m-2 badge rounded-pill bg-success">Accès ouvert</span>
													{% endif %}
												</div>
											</div>
										</div>
										<div id="collapse_live_code" class="accordion-collapse collapse" aria-labelledby="heading_live_code" data-bs-parent="#applications">
											<div class="accordion-body">
												<div class="row form-group">
													<div class="col-md-12">
						                                <p class="text-primary">
															<i>
																<b>Exemple : </b>Saisir "1 mois" prolonge l'accès à l'application de l'élève pendant 1 mois et saisir "-1 mois" le raccourci d'1 mois.
															</i>
														</p>
													</div>
													<div class="col-sm-2" style="margin-top: 10px;">
														<b>Changement de validité: </b>
													</div>
													<div class="col-sm-4">
							                            <input
															id="end_date_live_code" 
															type="hidden" value="{{student.fichesCoursesDeadline|date('Y-m-d')}}" />

														<input 
															class="mt-2 form-control" 
															id="duration_value_live_code" 
															type="number" 
															oninput="this.value=this.value.replace(/-[^0-9]/g,'');" 
															step="1" 
															placeholder="Ex : 5"
															value="1" >
													</div>
													<div class="col-sm-4">
														<select class="mt-2 form-control" id="duration_type_live_code">
															<option value="month">Mois</option>
															<option value="day">Jour(s)</option>
														</select>
													</div>
													<div class="col-sm-2">
														<button class="mt-2 btn btn-primary enpc_application_submit" data-index="live_code" >Valider</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							{{ include('student/includes/_nav_applications_type.html.twig') }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Hidden routs -->
{% if student.id %}
	<input type="hidden" id="route_extension_system_application" value="{{ path('extension_system_application', {'id' : student.id }) }}">
{% endif %}
<input type="hidden" id="id_student" value="{{ student.id }}">
<input type="hidden" id="route_send_access" value="{{path('send_access')}}" />    
<!-- 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é');
        });		
        //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(),
				typeApplication : "fiches de code",
				durationValue : $("#duration_value_"+indexElement).val(),
				durationType : $("#duration_type_"+indexElement).val(),
				endDate : $("#end_date_"+indexElement).val(),
			};
            $(this).html('<i class="fas fa-spinner fa-spin"></i>');
            e.preventDefault();
            const route = $("#route_extension_system_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{
						$('#alert-message').html(response.message);
						$('#show-alert').removeClass('alert-danger').addClass('alert-success')
						$('#show-alert').show()
						setTimeout(
							function() 
							{
								//reload only div
								$("#app_bloc").load(location.href+" #app_bloc>*","");
							}, 
							2000
						);

					}
					element.html('Valider');
				},
				error: function () {
					element.html('Valider');
				},
			});
        });
	</script>
{% endblock %}