{% extends 'user/profile/profile_layout.html.twig' %}{% use "user/profile/section_sidebar.html.twig" with javascript as javascript_sidebar, content as section_sidebar %}{% from "form/inputs.twig.html" import text_field, date_picker, dropdownlist, radio_group, check_box, textarea, uploader %}{% if app.user is not empty and constant('App\\Entity\\Role::USER') in app.user.getSubRoleNames() %} {% set mode = 'EDIT' %}{% else %} {% set mode = 'NEW' %}{% endif %}{% block step %}<form autocomplete="off" name="form-apply" id="form-profile-step1" action="{{ path('profile.step1_save') }}" method="POST" enctype="multipart/form-data" class="form-outline {{ validated is defined ? 'was-validated' : '' }} row">{% if mode == 'EDIT' %} <input type='hidden' name='_method' value='PUT'>{% endif %}<div class="col-lg-3"> {{ block('section_sidebar') }}</div><div class="col-lg-9 pl-lg-5"> <div class="d-flex flex-md-row flex-column mb-4"> <div class="section-title text-left d-flex align-items-center pt-5 pt-lg-0 mb-0"> <span class="mr-2">/</span> {% trans %}Vos informations personnelles{% endtrans %} </div> <div class="ml-auto"> <span class="required-note text-orange ml-4 mb-0 d-lg-inline d-block text-right"> <small>{% trans %}Champs obligatoires{% endtrans %} *</small> </span> </div> </div> <div class="text-center p-2 p-lg-4 mb-5 bg-light" style="border-radius: 0.9rem;"> <div class="text-orange text-uppercase font-weight-bold text-center h5 my-3">Accélérez votre inscription grâce à l’autoremplissage intelligent</div> Importez votre carte d’identité ou votre passeport (PDF, JPG, PNG).<br> Notre système analyse automatiquement le document et préremplit vos informations personnelles.<br> <span style="color: #FF0033;font-weight: 500;">Moins de saisie, moins d’erreurs, plus de rapidité.</span> <p class="text-purple mt-2">Vos données sont traitées de manière sécurisée et confidentielle.</p> <input type="file" id="uploadDocument" name="uploadDocument" class="d-none" accept=".pdf, .jpg, .jpeg, .png"> <input type="file" name="fileIdentity" class="d-none" disabled> <input type="hidden" name="expireIdentity" class="d-none" disabled> <label for="uploadDocument" class="link-gradient mb-3" style=" display: flex; width: 290px; margin: 0 auto; font-size: 18px; font-weight: 500; cursor: pointer; " > <i class="fas fa-cloud-arrow-up mr-3 ml-2" style=" font-size: 16px !important; display: flex; align-items: center; " ></i> Importer mon document </label> </div> {{ radio_group( 'user[gender]', "Vous êtes" | trans, [ { value: 0, text: "Homme" | trans }, { value: 1, text: "Femme" | trans }, ], formData, { required: true, inline: true } ) }} <div class="form-row"> <div class="col-lg-4"> {{ text_field('user[lastName]', "Nom de famille" | trans, formData, { required: true }) }} </div> <div class="col-lg-4"> {{ text_field('user[firstName]', "Prénom" | trans, formData, { required: true }) }} </div> <div class="col-lg-4"> {{ date_picker( 'user[birthDay]', "Date de naissance" | trans, formData, { attributes: { "maxDate": "-14Y", "minDate": "-100Y" }, required: true } ) }} </div> </div> <div class="form-row"> <div class="col-lg-4"> {{ dropdownlist( 'user[country]', "Pays de naissance" | trans, countries, formData, { valueProperty: 'id', textProperty: 'name' } ) }} </div> <div class="col-lg-4"> {{ dropdownlist( 'user[department]', "Département de naissance" | trans, departments, formData, { attributes: { disabled: formData.inputValues and formData.inputValues.user.country and ( formData.inputValues.user.country is object ? formData.inputValues.user.country.id != 1 : formData.inputValues.user.country != '1' ) } } ) }} </div> <div class="col-lg-4"> {{ text_field('user[birthPlace]', "Ville de naissance" | trans, formData) }} </div> </div> <div class="form-row"> <div class="col-lg-4"> {{ dropdownlist( 'user[nationality]', "Nationalité" | trans, countries, formData, { valueProperty: 'id', textProperty: 'nationality' } ) }} </div> <div class="col-lg-4"> {{ text_field('user[email]', "Email" | trans, formData, { required: true, attributes: { disabled: mode == 'EDIT' } }) }} </div> <div class="col-lg-4"> {{ text_field('user[phone]', "Téléphone" | trans, formData, { required: true }) }} </div> </div> <div class="form-row"> <div class="col-lg-4"> {{ text_field('information[address]', "Adresse" | trans, formData) }} </div> <div class="col-lg-4"> {{ text_field('information[postalCode]', "Code postal" | trans, formData) }} </div> <div class="col-lg-4"> {{ text_field('information[city]', "Ville" | trans, formData) }} </div> </div> <div class="form-row"> <div class="col-lg-4"> {{ dropdownlist( 'information[country]', "Pays de résidence" | trans, countries, formData, { valueProperty: 'id', textProperty: 'name' } ) }} </div> <div class="col-lg-4"> {{ text_field('information[socialSecutiryNumber]', "N° sécurité sociale" | trans, formData) }} </div> </div> <div class="form-row"> <div class="col"> {{ check_box( 'isHandicap', "Êtes-vous en situation de handicap ?" | trans, 1, formData, { labelClass: '', wrapperClass: 'mt-1', showIfChecked: textarea('handicapInfo', "Préciser les aménagements nécessaires au bon suivi de votre scolarité" | trans ~ ' *', formData), isBooleanCheck: true, mapShowIfChecked: uploader('fileHandicap', "Votre justificatif de handicap éventuel" | trans, formData, { checkSize: true }), } ) }} </div> </div> <div class="form-row"> <div class="col"> <div class="form-group agreefield mb-2 mt-2"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="internalRegulations" required {{ validated is defined or mode == 'EDIT' ? 'checked' : '' }} /> <label class="custom-control-label text-dark-purple" for="internalRegulations"> {% trans with {'%link%': '<a class="text-purple" href="' ~ path('reglement_interieur') ~ '">' ~ 'règlement intérieur' | trans ~ '</a>' } %}J'atteste avoir pris connaissance du %link%{% endtrans %} </label> </div> </div> </div> </div> <div class="form-row"> <div class="col"> <div class="form-group agreefield"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="accept" required {{ validated is defined or mode == 'EDIT' ? 'checked' : '' }} /> <label class="custom-control-label text-dark-purple" for="accept"> <small> <b>{% trans %}J'accepte qu' ÉSTIAM utilise mes données personnelles dans le cadre du traitement de ma candidature.{% endtrans %}</b> <br/> <i>{% trans %}ÉSTIAM s'engage à ne pas communiquer vos données personnelles. Conformément à la loi RGPD du 25 Mai 2018 : Vous bénéficiez d'un droit d'accès, de rectification, de portabilité, d'effacement de celles-ci ou une limitation du traitement. Vous pouvez vous opposer au traitement des données vous concernant et disposez du droit de retirer votre consentement à tout moment. Vous avez la possibilité d'introduire une réclamation auprès d'une autorité de contrôle.{% endtrans %}</i> </small> </label> </div> </div> </div> </div> <div class="mt-3" data-aos='fade-up'> <div class="font-20 text-purple font-weight-bold mb-3"><span class="text-orange mr-1" style="text-shadow: 2px 0px #f50;">/</span> Quel matériel pour étudier ?</div> <p>Quelle que soit la classe que vous rejoindrez l’année prochaine, vous aurez besoin d’un ordinateur portable et d’un smartphone avec les caractéristiques minimales suivantes :</p> <div class="d-flex align-items-start font-weight-bold mb-2"><span class="pt-1 line-height-small"><i class="fa-solid fa-angles-right text-purple mr-2"></i></span>Caractéristiques minimales de l’ordinateur portable :</div> <ul class="list-unstyled mb-3 ml-4"> <li class="d-flex align-items-start mb-1"><span class="pt-1 line-height-small"><i class="fa-solid fa-check text-success mr-3"></i></span>Processeur Core i7 ou i9 (12ème génération),</li> <li class="d-flex align-items-start mb-1"><span class="pt-1 line-height-small"><i class="fa-solid fa-check text-success mr-3"></i></span>RAM 16 Go minimum,</li> <li class="d-flex align-items-start mb-1"><span class="pt-1 line-height-small"><i class="fa-solid fa-check text-success mr-3"></i></span>Carte graphique avec 6 Go de mémoire,</li> <li class="d-flex align-items-start mb-1"><span class="pt-1 line-height-small"><i class="fa-solid fa-check text-success mr-3"></i></span>Webcam et micro,</li> <li class="d-flex align-items-start mb-1"><span class="pt-1 line-height-small"><i class="fa-solid fa-check text-success mr-3"></i></span>Disque dur 1 To minimum,</li> <li class="d-flex align-items-start mb-1"><span class="pt-1 line-height-small"><i class="fa-solid fa-check text-success mr-3"></i></span>Pour les ordinateurs Apple, utilisation d’un émulateur Windows 11.</li> </ul> <div class="d-flex align-items-start font-weight-bold mb-2"><span class="pt-1 line-height-small"><i class="fa-solid fa-angles-right text-purple mr-2"></i></span class="pt-1 line-height-small">Caractéristiques minimales du smartphone personnel de l’étudiant :</div> <ul class="list-unstyled mb-3 ml-4"> <li class="d-flex align-items-start mb-1"><span class="pt-1 line-height-small"><i class="fa-solid fa-check text-success mr-3"></i></span>Téléphone Android 13 minimum (avec appareil photo) ou Apple iPhone avec iOS 15 minimum. Avec possibilité de se connecter à internet.</li> </ul> <div class="d-flex align-items-start font-weight-bold mb-2"><span class="pt-1 line-height-small"><i class="fa-solid fa-angles-right text-purple mr-2"></i></span>Caractéristiques minimales de la connexion Internet personnelle de l’étudiant (ADSL, Fibre optique ou 4G) :</div> <ul class="list-unstyled ml-4"> <li class="d-flex align-items-start mb-1"><span class="pt-1 line-height-small"><i class="fa-solid fa-check text-success mr-3"></i></span>1 Mbps de débit ascendant</li> <li class="d-flex align-items-start mb-1"><span class="pt-1 line-height-small"><i class="fa-solid fa-check text-success mr-3"></i></span>7 Mbps de débit descendant minimum</li> </ul> </div> {% if mode == 'NEW' and captcha_enabled %} <div class="captcha-row mb-4 d-flex justify-content-center"> <div class="g-recaptcha animate__animated" data-sitekey="{{ captcha_key }}"></div> </div> {% endif %} {% if valid_programs is defined %} <div class="captcha-row mb-4 d-flex justify-content-center"> <p class="error text-red font-italic">{{ valid_programs }}</p> </div> {% endif %} <div class="text-center form-submit mt-4"> <button type="submit" id="btn-submit" class="link-gradient d-block d-lg-inline-block"> <span>SUIVANT</span><i class="far fa-arrow-right"></i> </button> </div> </div></form>{% endblock %}{% block custom_javascripts %}<script>function loadButtonAnalyze(element) { element.find('i').removeClass('fas fa-cloud-arrow-up'); element.find('i').addClass('fas fa-spinner fa-pulse ml-1'); element.prop('disabled', true);}function removeLoadButtonAnalyze(element) { element.find('i').removeClass('fas fa-spinner fa-pulse ml-1'); element.find('i').addClass('fas fa-cloud-arrow-up'); element.prop('disabled', false);}$(document).ready(function(){ {% if mode == 'EDIT' %} $([document.documentElement, document.body]).animate({ scrollTop: $(".section-apply-tabs").offset().top - 60 }, 400); {% else %} $('#form-profile-step1').on('submit', function (e) { {% if captcha_enabled %} if (grecaptcha.getResponse().length == 0) { e.preventDefault(); $('.g-recaptcha').css({"box-shadow": "0px 0px 4px #ff0000b3"}); $('.preloader').fadeOut(); return false; } {% endif %} }); {% endif %} $('[name="isHandicap"]').change(function() { if ($(this).prop('checked')) { $('[name="handicapInfo"]').prop('required', true) } else { $('[name="handicapInfo"]').prop('required', false) } }) $('[name="user[country]"]').change(function() { console.log($(this).val()) if ($(this).val() === '1') { console.log('france checked') $('[name="user[department]"]').prop('disabled', false) } else { console.log('not france') $('[name="user[department]"]').prop('disabled', true) $('[name="user[department]"]').val('') $('[name="user[department]"]').removeClass('active') } }) $('#uploadDocument').change(function(e) { if (this.files && this.files[0]) { const files = this.files; var formData = new FormData(); formData.append('file', files[0], 'image.jpg') ; let $button = $(document).find('[for="uploadDocument"]'); loadButtonAnalyze($button); $.ajax({ url: "{{ path('profile.analyze_file') }}", type: "POST", dataType: 'json', data : formData, contentType: false, processData: false, success: function(result) { const data = result.data[0]; if(data.country_id) { //$('[name="user\\[country\\]"]').val(data.country_id).trigger('change'); $('[name="user\\[nationality\\]"]').val(data.country_id).trigger('change'); } if(data.name) { $('[name="user\\[firstName\\]"]').val(data.name); } if(data.surname) { $('[name="user\\[lastName\\]"]').val(data.surname); } if(data.date_of_birth) { $('[name="user\\[birthDay\\]"]').val(data.date_of_birth); } if(data.place_of_birth) { $('[name="user\\[birthPlace\\]"]').val(data.place_of_birth); } if(data.personal_number) { //$('[name="information\\[socialSecutiryNumber\\]"]').val(data.personal_number); } if(data.gender) { if(data.gender === 'female') { $('[name="user\\[gender\\]"][value="1"]').prop('checked', true); } else { $('[name="user\\[gender\\]"][value="0"]').prop('checked', true); } } if(data.document_expiry) { $('[name="expireIdentity"]').val(data.document_expiry); $('[name="expireIdentity"]').removeAttr('disabled'); } $('[name="fileIdentity"]').removeAttr('disabled'); $('[name="fileIdentity"]')[0].files = files; } }).always(function () { $('#uploadDocument').val(''); removeLoadButtonAnalyze($button); }); } })})</script> {{ block('javascript_sidebar') }}{% endblock %}