templates/recrutement/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block page_contents %}
  4. <section class="section section-page-title bg-gradient py-xl-5 py-4" data-aos='fade-down'>
  5.   <div class="container">
  6.     <div class="row">
  7.       <div class="col-12 text-center text-white">
  8.         <h1 class="page-name font-weight-bold my-2">{% trans %}Carrière chez ÉSTIAM{% endtrans %}</h1>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </section>
  14. <section class="section section-form section-form-2 mb-xl-5 mb-4 mt-4">
  15.   <form id="submit-recruitmemt">
  16.     <div class="container">
  17.       <div class="row">
  18.         <div class="col-xl-3 col-lg-4 col-md-5">
  19.           <div class="group-theme mb-4 checkbox-theme-required">
  20.             <div class="font-weight-bold text-dark-purple mb-2">{% trans %}Sélectionnez les thématiques{% endtrans %} <span class="text-orange">*</span></div>
  21.             {% for i,theme in themes %}
  22.             <div class="form-check mx-0 px-0 mb-2">
  23.               <div class="custom-control custom-checkbox">
  24.                 <input type="checkbox" class="custom-control-input" id="theme-{{ theme.id }}" name="recruitmentThemes[{{ i }}]" value="{{ theme.id }}">
  25.                 <label class="custom-control-label text-dark-purple font-weight-normal pl-2" for="theme-{{ theme.id }}">{{ theme.name }}</label>
  26.               </div>
  27.             </div>
  28.             {% endfor %}
  29.           </div>
  31.           <div class="group-campuses mb-4 checkbox-campus-required">
  32.             <div class="font-weight-bold text-dark-purple mb-2">{% trans %}À proximité du campus{% endtrans %} <span class="text-orange">*</span></div>
  33.             {% for i,campus in campuses %}
  34.             <div class="form-check mx-0 px-0 mb-2">
  35.               <div class="custom-control custom-checkbox">
  36.                 <input type="checkbox" class="custom-control-input" id="campuses-{{ campus.id }}" name="campuses[{{ i }}]" value="{{ campus.id }}">
  37.                 <label class="custom-control-label text-dark-purple font-weight-normal pl-2" for="campuses-{{ campus.id }}">{{ campus.name }}</label>
  38.               </div>
  39.             </div>
  40.             {% endfor %}
  41.           </div>
  42.         </div>
  43.         <div class="col-xl-9 col-lg-8 col-md-7">
  44.           <div class="mb-4 text-justify">
  45.             <p>{% trans %}Découvrez nos opportunités professionnelles en interne chez ÉSTIAM ! Vous êtes à la recherche de nouveaux défis dans les domaines de l'éducation, des relations entreprises, des admissions, de la communication, et bien d'autres ? Chez ÉSTIAM, nous offrons un large éventail d'opportunités au sein de notre équipe pédagogique et administrative{% endtrans %}.</p>
  46.             <p>{% trans %}Que vous souhaitiez partager votre expertise en tant que formateur/trice, contribuer au développement de partenariats avec les entreprises, participer au processus d'admission des étudiants ou encore jouer un rôle clé dans notre stratégie de communication, vous trouverez chez ÉSTIAM un environnement stimulant et dynamique{% endtrans %}.</p>
  47.           </div>
  48.           <div class="section-title text-left d-flex align-items-center mb-3"><span>/</span> {% trans %}VEUILLEZ NOUS INFORMER LES INFORMATIONS SUR VOTRE CANDIDATURE CI-DESSOUS{% endtrans %}</div>
  49.           <div class="row">
  50.             <div class="col-12 d-flex flex-column">
  51.               <div class="form-group row row-gender align-items-start mt-2 flex-lg-row flex-column">
  52.                 <label class="col-form-label font-weight-normal px-3 pt-0 pb-0 text-dark-purple text-nowrap mb-lg-0 mb-1">{% trans %}Titre{% endtrans %} <span class="text-orange">*</span>:</label>
  53.                 <div class="flex-1 pl-lg-0 pl-3">
  54.                   <div class="form-check form-check-inline mr-0">
  55.                     <div class="custom-control custom-radio">
  56.                         <input type="radio" class="custom-control-input" id="p1" name="pronoun" value="Prof." required>
  57.                         <label class="custom-control-label text-dark-purple" for="p1">{% trans %}Prof.{% endtrans %}</label>
  58.                     </div>
  59.                   </div>
  60.                   <div class="form-check form-check-inline ml-lg-3 ml-2 mr-0">
  61.                     <div class="custom-control custom-radio">
  62.                         <input type="radio" class="custom-control-input" id="p2" name="pronoun" value="Dr." required>
  63.                         <label class="custom-control-label text-dark-purple" for="p2">{% trans %}Dr.{% endtrans %}</label>
  64.                     </div>
  65.                   </div>
  66.                   <div class="form-check form-check-inline ml-lg-3 ml-2 mr-0">
  67.                     <div class="custom-control custom-radio">
  68.                         <input type="radio" class="custom-control-input" id="p3" name="pronoun" value="M." required>
  69.                         <label class="custom-control-label text-dark-purple" for="p3">{% trans %}M.{% endtrans %}</label>
  70.                     </div>
  71.                   </div>
  72.                   <div class="form-check form-check-inline ml-lg-3 ml-2 mr-0">
  73.                     <div class="custom-control custom-radio">
  74.                         <input type="radio" class="custom-control-input" id="p4" name="pronoun" value="Melle." required>
  75.                         <label class="custom-control-label text-dark-purple" for="p4">{% trans %}Mlle.{% endtrans %}</label>
  76.                     </div>
  77.                   </div>
  78.                   <div class="form-check form-check-inline ml-lg-3 ml-2 mr-0">
  79.                     <div class="custom-control custom-radio">
  80.                         <input type="radio" class="custom-control-input" id="p5" name="pronoun" value="Mme." required>
  81.                         <label class="custom-control-label text-dark-purple" for="p5">{% trans %}Mme.{% endtrans %}</label>
  82.                     </div>
  83.                   </div>
  84.                 </div>
  85.               </div>
  86.             </div>
  87.             <div class="col-lg-6">
  88.               <div class="form-group">
  89.                 <input type="text" class="form-control" name="firstName" placeholder="{% trans %}Nom *{% endtrans %}" required>
  90.               </div>
  91.             </div>
  92.             <div class="col-lg-6">
  93.               <div class="form-group">
  94.                 <input type="text" class="form-control" name="lastName" placeholder="{% trans %}Prénom *{% endtrans %}" required>
  95.               </div>
  96.             </div>
  97.             <div class="col-lg-6">
  98.               <div class="form-group">
  99.                 <input type="text" class="form-control" name="email" placeholder="{% trans %}Email *{% endtrans %}" required>
  100.               </div>
  101.             </div>
  102.             <div class="col-lg-6">
  103.               <div class="form-group">
  104.                 <input type="text" class="form-control" name="phone" placeholder="{% trans %}Téléphone *{% endtrans %}" required>
  105.               </div>
  106.             </div>
  107.             <div class="col-lg-6">
  108.               <div class="form-group">
  109.                 <input type="text" class="form-control" name="nationality" placeholder="{% trans %}Nationalité *{% endtrans %}" required>
  110.               </div>
  111.             </div>
  112.             <div class="col-lg-6">
  113.               <div class="form-group">
  114.                 <select class="form-control" name="livingIn" required>
  115.                   <option>{% trans %}Pays de résidence{% endtrans %}</option>
  116.                   {% for country in countries %}
  117.                     <option value="{{ country.name }}">{{ country.name }}</option>
  118.                   {% endfor %}
  119.                 </select>
  120.               </div>
  121.             </div>
  122.             <div class="col-12">
  123.               <div class="form-group">
  124.                 <textarea class="form-control" name="research" placeholder="{% trans %}Précision sur votre recherche *{% endtrans %}" required></textarea>
  125.               </div>
  126.             </div>
  127.             <div class="col-12">
  128.               <div class="font-weight-bold text-dark-purple mb-3">{% trans %}Document à télécharger{% endtrans %} <span class="font-weight-normal font-italic">{% trans %}(format PDF, JPG, PNG et JPEG acceptés){% endtrans %}</span></div>
  129.               <div class="row field-upload">
  130.                 <div class="col-12 form-group curriculumVitae">
  131.                   <div>
  132.                     <div class="group-item mb-3">
  133.                       <input id="cv_file" type="file" class="single-files form-control" name="cv_file" value accept=".pdf,.docx,.doc,.jpg,.png,.jpeg"/>
  134.                       <label class="d-flex flex-column" for="cv_file">
  135.                         <div class="d-flex align-items-center cursor">
  136.                           <span class="upload-btn cursor cloud-btn px-3">
  137.                             <i class="fas fa-cloud-arrow-up"></i>
  138.                           </span>
  139.                           <span class="text-dark-purple ml-3 font-weight-normal cv_file">{% trans %}CV <span class="text-orange">*</span>{% endtrans %}</span>
  140.                         </div>
  141.                         <span class="file-desc flex-1 d-flex align-items-center mt-1">
  142.                           <i class="fa-solid fa-paperclip-vertical text-orange mr-2"></i>
  143.                           <span class="upload-file-name"></span>
  144.                           <i class="far fa-xmark ml-3 cursor"></i>
  145.                         </span>
  146.                       </label>
  147.                     </div>
  148.                     <div class="group-item mb-3">
  149.                       <input id="letter_file" type="file" class="single-files form-control" name="letter_file" value accept=".pdf,.docx,.doc,.jpg,.png,.jpeg"/>
  150.                       <label class="d-flex flex-column" for="letter_file">
  151.                         <div class="d-flex align-items-center cursor">
  152.                           <span class="upload-btn cursor cloud-btn px-3">
  153.                             <i class="fas fa-cloud-arrow-up"></i>
  154.                           </span>
  155.                           <span class="text-dark-purple ml-3 font-weight-normal letter_file">{% trans %}Lettre de motivation <span class="text-orange">*</span>{% endtrans %}</span>
  156.                         </div>
  157.                         <span class="file-desc flex-1 d-flex align-items-center mt-1">
  158.                           <i class="fa-solid fa-paperclip-vertical text-orange mr-2"></i>
  159.                           <span class="upload-file-name"></span>
  160.                           <i class="far fa-xmark ml-3 cursor"></i>
  161.                         </span>
  162.                       </label>
  163.                     </div>
  164.                     <div class="group-item mb-3">
  165.                       <input type="file" id="other_files" name="other_files[]" multiple="multiple" class="form-control" value accept=".pdf,.docx,.doc,.jpg,.png,.jpeg"/>
  166.                       <label class="d-flex flex-column" for="other_files">
  167.                         <div class="d-flex align-items-center cursor" id="fileSelect">
  168.                           <span class="upload-btn cursor cloud-btn px-3">
  169.                             <i class="fas fa-cloud-arrow-up"></i>
  170.                           </span>
  171.                           <span class="text-dark-purple ml-3 font-weight-normal line-height-small">{% trans %}Autres documents facultatifs (diplômes, certifications,...){% endtrans %}<br/><small class="font-italic">Appuyer sur le bouton "Ctrl" de votre clavier pour sélectionner plusieurs fichiers</small></span>
  172.                         </div>
  173.                       </label>
  174.                       <div id="output" class="mt-2"></div>
  175.                     </div>
  176.                   </div>
  177.                 </div>
  178.               </div>
  179.             </div>
  180.             <div class="col-12">
  181.               <div class="font-weight-bold text-dark-purple mb-3">{% trans %}Données personnelles obligatoires{% endtrans %} <span class="text-orange">*</span></div>
  182.               <div class="form-check pl-0 mb-3">
  183.                 <div class="custom-control custom-checkbox">
  184.                   <input type="checkbox" class="custom-control-input" id="obligatoires" name="obligatoires" value="1" required>
  185.                   <label class="custom-control-label text-dark-purple text-justify" for="obligatoires">{% trans %}J'accepte que ÉSTIAM collecte et utilise les données personnelles que je viens de renseigner dans ce formulaire dans le but de m'envoyer des propositions éducatives adaptées à mon projet, que j'ai acceptées de recevoir, en accord avec notre politique de protection des données.{% endtrans %}</label>
  186.                 </div>
  187.               </div>
  188.               <p class="font-italic text-dark-purple line-height-normal text-justify"><small>{% trans %}Les informations recueillies sur ce formulaire sont enregistrées dans un fichier informatisé par ÉSTIAM en vue de permettre la transmission d’informations complémentaires ou personnalisées sur des programmes ou des offres de formation et/ou de permettre l’inscription en ligne à ces programmes. Elles sont conservées pendant 5 ans et sont destinées aux services marketing et commercial. Conformément à la loi « informatique et libertés », vous pouvez exercer votre droit d'accès aux données vous concernant et les faire rectifier en contactant{% endtrans %} : ÉSTIAM - <a href="mailto:info@estiam.com">info@estiam.com</a></small></p>
  190.               {% if captcha_enabled %}
  191.                 <div class="captcha-row mb-4 d-flex justify-content-center">
  192.                     <div class="g-recaptcha animate__animated" data-sitekey="{{captcha_key}}"></div>
  193.                 </div>
  194.               {% endif %}
  196.               <div class="notification-error mb-4 text-center text-danger font-weight-bold" style="display: none;"></div>
  198.               <div class="text-center form-submit mt-3">
  199.                 <button type="submit" id="btn-submit" class="link-gradient"><span class="font-weight-bold text-uppercase font-20">{% trans %}ENVOYER{% endtrans %}</span><i class="far fa-arrow-right"></i></button>
  200.               </div>
  201.             </div>
  202.           </div>
  203.         </div>
  204.       </div>
  205.     </div>
  206.   </form>
  207. </section>
  209. <div class="modal fade" id="thankYouModal" tabindex="-1" role="dialog" aria-labelledby="thankYouModalTitle" aria-hidden="true">
  210.   <div class="modal-dialog modal-dialog-centered" role="document">
  211.     <div class="modal-content">
  212.       <div class="modal-header">
  213.         <a href="{{ path('home') }}">
  214.           <img src="{{ asset('assets/images/logo.svg') }}" alt="Estiam">
  215.         </a>
  216.       </div>
  217.       <div class="modal-body">
  218.         <div class="text-center mb-4">
  219.           {% trans %}Nous vous confirmons la bonne réception de votre candidature à ÉSTIAM. Nous allons l'étudier rapidement afin de vous donner une réponse dans les plus brefs délais. Merci !{% endtrans %}<br/>
  220.           {% trans %}L'équipe ÉSTIAM{% endtrans %}
  221.         </div>
  222.         <div class="text-center">
  223.           <button type="button" class="common-btn" data-dismiss="modal">{% trans %}Fermer{% endtrans %}</button>
  224.         </div>
  225.       </div>
  226.     </div>
  227.   </div>
  228. </div>
  229. {% endblock %}
  231. {% block custom_javascripts %}
  232. <script type="text/javascript">
  234. function checkFileAvec(inputFile)
  235. {
  236.   if(inputFile[0].files[0].name.match(/.(pdf|docx|doc|jpg|jpeg|png)$/i))
  237.   {
  238.     var size = parseInt(inputFile[0].files[0].size) / 1024;
  239.     if(size > 5120){
  240.       return "Large file size. You can upload a max of 5MB";
  241.     }
  242.   }else{
  243.     return "Invalid file type. You can only upload PDF/Word file";
  244.   }
  245. }
  247. $(document).ready(function($){
  249.   var input = $('input.single-files');
  250.   input.each(function(event){
  251.     $('.curriculumVitae .fa-xmark').click(function (event) {
  252.       event.preventDefault();
  253.       event.stopPropagation();
  254.       $(this).val('')
  255.       $(this).removeClass('selected')
  256.       $(this).next('label .upload-file-name').html('')
  257.     })
  258.     $(this).change(function(event) {
  259.       let result = checkFileAvec($(this));
  260.       if(result){
  261.         $(this).val('');
  262.         showMessage(result);
  263.         return false;
  264.       }
  265.       $(this).addClass('selected');
  267.       $(this).next('label').find('.upload-file-name').html(event.target.files[0].name)
  268.     });
  269.   });
  271.   var current_input;
  272.   $('.fa-xmark').click(function (event) {
  273.     current_input = $(this).closest('.group-item').find('input[type=file]');
  274.     event.preventDefault();
  275.     event.stopPropagation();
  276.     current_input.val('');
  277.     current_input.removeClass('selected');
  278.   });
  280.   // Tham khao: https://codepen.io/scarulli/pen/bGGXdEZ
  281.   const dt = new DataTransfer();
  282.   $("input#other_files").change(function() {
  283.     var ele = document.getElementById($(this).attr('id'));
  284.     var result = ele.files;
  285.     for(var x = 0;x< result.length;x++){
  286.       var fle = result[x];
  287.       $("#output").append('<div class="file-desc has-file flex-1 d-flex align-items-center mt-1"><i class="fa-solid fa-paperclip-vertical text-orange mr-2"></i><span class="upload-file-name">' + fle.name + '</span><i class="far fa-xmark ml-3 cursor"></i></div>');           
  288.     }
  289.     for (let file of result) {
  290.       dt.items.add(file);
  291.     }
  292.     result = dt.files;
  294.     $('#output .fa-xmark').click(function(){
  295.       $(this).parent().remove();
  296.       for(let i = 0; i < dt.items.length; i++){
  297.         if(name === dt.items[i].getAsFile().name){
  298.           dt.items.remove(i);
  299.           continue;
  300.         }
  301.       }
  302.       document.getElementById('other_files').files = dt.files;
  303.     });
  304.   });
  306.   $('#submit-recruitmemt').on('submit', function (e) {
  307.       event.preventDefault();
  309.       let $button = $(this).find('#btn-submit');
  311.       loadButton($button);
  313.       {% if captcha_enabled %}
  314.         if (grecaptcha.getResponse().length == 0) {
  315.           showMessage('{% trans %}Veuillez vérifier le recaptcha{% endtrans %}');
  316.           return false;
  317.         }
  318.       {% endif %}
  320.       if(isChecked('.checkbox-theme-required')){
  321.         showMessage('{% trans %}Veuillez sélectionner sélectionnez les thématiques{% endtrans %}');
  322.         return false;
  323.       }
  325.       if(isChecked('.checkbox-campus-required')){
  326.         showMessage('{% trans %}Veuillez sélectionner campus{% endtrans %}');
  327.         return false;
  328.       }
  330.       if(requiredFile('cv_file') || requiredFile('letter_file')){
  331.         return false;
  332.       }
  334.       let formData = new FormData(this);
  336.       $.ajax({
  337.         url: "{{ path('recruitmemt.save') }}",
  338.         type: "POST",
  339.         dataType: 'json',
  340.         data : formData,
  341.         contentType: false,
  342.         processData: false,
  343.         success: function(result) {
  344.           if(result.status == 'success'){
  345.             resetForm();
  346.             $('#thankYouModal').modal();
  347.             removeLoadButton($button);
  348.           }else{
  349.             showMessage(result.errors.errorMessage);
  350.           }
  351.           grecaptcha.reset();
  352.         }
  353.       }).always(function () {
  354.         removeLoadButton($button)
  355.       });
  356.   });
  358. });
  359. function resetForm(){
  360.   $('#submit-recruitmemt').each(function(){
  361.     this.reset();
  362.     $('.fa-xmark').trigger('click');
  363.   });
  364. }
  365. </script>
  366. {% endblock %}