templates/job_board/apply.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 pt-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">
  9.           {% trans %}DÉPOSER VOTRE CANDIDATURE{% endtrans %}
  10.         </h1>
  11.       </div>
  12.     </div>
  13.   </div>
  14. </section>
  16. <section class="section section-form section-form-2 mb-5 mt-4">
  17.   <div class="container">
  18.     <div class="row">
  19.       <div class="col-12 text-center mb-4">
  20.         <div class="offre-logo mb-3">
  21.           {% if job.logoUrl %}
  22.             <img src="{{ job.logoUrl }}" alt />
  23.           {% endif %}
  24.         </div>
  25.         <div class="font-weight-bold font-30 text-dark-purple mb-3">{{ job.offerTitle }}</div>
  26.         <div class="font-italic text-dark-purple">{% trans %}Référence de l'offre{% endtrans %} : {{ job.code }}</div>
  27.       </div>
  28.       <div class="col-12">
  29.         <form id="apply-job">
  30.           <input type="hidden" name="offer" value="{{ job.id }}">
  31.           <div class="section-title text-left mb-2"><span>/</span> {% trans %}Mon statut ÉSTIAM{% endtrans %}</div>
  32.           <div class="form-group">
  33.             {% for status in statusCandidate %}
  34.               <div class="form-check mx-0 px-0 mb-2">
  35.                 <div class="custom-control custom-radio">
  36.                     <input type="radio" class="custom-control-input" id="status-{{ status.id }}" name="status" value="{{ status.id }}">
  37.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="status-{{ status.id }}">{{ status.name }}</label>
  38.                 </div>
  39.               </div>
  40.             {% endfor %}
  41.           </div>
  42.           
  43.           <div class="section-title text-left mb-2"><span>/</span> {% trans %}Mon dossier ÉSTIAM{% endtrans %}</div>
  44.           <div class="row">
  45.             <div class="col-lg-4">
  46.               <div class="form-group row row-gender align-items-center mt-2">
  47.                 <label class="col-form-label font-weight-normal col-4 pt-0 pb-0">{% trans %}Civilité{% endtrans %}<span class="text-orange">*</span> :</label>
  48.                 <div class="col-8 pl-0">
  49.                     <div class="form-check form-check-inline mr-0">
  50.                       <div class="custom-control custom-radio">
  51.                           <input type="radio" class="custom-control-input" id="mr" name="gender" value="1" required>
  52.                           <label class="custom-control-label text-dark-purple" for="mr">{% trans %}Madame{% endtrans %}</label>
  53.                       </div>
  54.                     </div>
  55.                     <div class="form-check form-check-inline ml-3 mr-0">
  56.                       <div class="custom-control custom-radio">
  57.                           <input type="radio" class="custom-control-input" id="mrs" name="gender" value="0" required>
  58.                           <label class="custom-control-label text-dark-purple" for="mrs">{% trans %}Monsieur{% endtrans %}</label>
  59.                       </div>
  60.                     </div>
  61.                 </div>
  62.               </div>
  63.             </div>
  64.             <div class="col-lg-4">
  65.               <div class="form-group">
  66.                 <input type="text" class="form-control" name="firstName" placeholder="{% trans %}Nom de famille*{% endtrans %}">
  67.               </div>
  68.             </div>
  69.             <div class="col-lg-4">
  70.               <div class="form-group">
  71.                 <input type="text" class="form-control" name="lastName" placeholder="{% trans %}Prénom*{% endtrans %}" required>
  72.               </div>
  73.             </div>
  74.           </div>
  75.           <div class="row">
  76.             <div class="col-lg-4">
  77.               <div class="form-group">
  78.                 <input type="text" class="form-control" name="phone" placeholder="{% trans %}Téléphone*{% endtrans %}" required>
  79.               </div>
  80.             </div>
  81.             <div class="col-lg-4">
  82.               <div class="form-group">
  83.                 <input type="text" class="form-control" name="email" placeholder="{% trans %}Adresse e-mail*{% endtrans %}" required>
  84.               </div>
  85.             </div>
  86.             <div class="col-lg-4">
  87.               <div class="form-group">
  88.                 <select class="form-control" name="studyLevel">
  89.                 <option value>{% trans %}Niveau d'étude{% endtrans %}</option>
  90.                 {% for studyLevel in studyLevels %}
  91.                   <option value="{{ studyLevel.id }}">{{ studyLevel.name }}</option>
  92.                 {% endfor %}
  93.               </select>
  94.               </div>
  95.             </div>
  96.           </div>
  97.           <div class="form-group">
  98.             <textarea class="form-control" name="message" placeholder="{% trans %}Message au recruteur*{% endtrans %}" required></textarea>
  99.           </div>
  101.           <div class="section-title text-left mb-2"><span>/</span> {% trans %}Pièces complémentaires{% endtrans %}</div>
  102.           <p class="font-italic font-weight-300">{% trans %}2 Mo maximum par pièces jointes.{% endtrans %}<br/>
  103.           {% trans %}Formats autorisés : JPG, PDF, PNG (les CV et lettre de motivation peuvent aussi être au format Word).{% endtrans %}</p>
  105.           <div class="row field-upload">
  106.             <div class="col-12 form-group curriculumVitae">
  107.               <div>
  108.                 <div class="group-item mb-1">
  109.                   <input id="file_cv" type="file" class="form-control" name="file_cv" value accept=".pdf,.docx,.doc,.png,.jpg"/>
  110.                   <label class="d-flex flex-column" for="file_cv">
  111.                     <div class="d-flex align-items-center">
  112.                       <span class="upload-btn cursor cloud-btn px-3">
  113.                         <i class="fas fa-cloud-arrow-up"></i>
  114.                       </span>
  115.                       <span class="text-dark-purple ml-3 font-weight-normal">{% trans %}Votre cv <span class="text-orange">*</{% endtrans %}</span>
  116.                     </div>
  117.                     <span class="file-desc flex-1 d-flex align-items-center mt-2">
  118.                       <i class="fa-solid fa-paperclip-vertical text-orange mr-2"></i>
  119.                       <span class="upload-file-name"></span>
  120.                       <i class="far fa-xmark ml-3 cursor"></i>
  121.                     </span>
  122.                   </label>
  123.                 </div>
  124.                 <div class="group-item mb-1">
  125.                   <input id="file_cover" type="file" class="form-control" name="file_cover" value accept=".pdf,.docx,.doc,.png,.jpg"/>
  126.                   <label class="d-flex flex-column" for="file_cover">
  127.                     <div class="d-flex align-items-center">
  128.                       <span class="upload-btn cursor cloud-btn px-3">
  129.                         <i class="fas fa-cloud-arrow-up"></i>
  130.                       </span>
  131.                       <span class="text-dark-purple ml-3 font-weight-normal">{% trans %}Votre lettre de motivation <span class="text-orange">*</{% endtrans %}</span>
  132.                     </div>
  133.                     <span class="file-desc flex-1 d-flex align-items-center mt-2">
  134.                       <i class="fa-solid fa-paperclip-vertical text-orange mr-2"></i>
  135.                       <span class="upload-file-name"></span>
  136.                       <i class="far fa-xmark ml-3 cursor"></i>
  137.                     </span>
  138.                   </label>
  139.                 </div>
  140.               </div>
  141.             </div>
  142.           </div>
  144.           {% if captcha_enabled %}
  145.             <div class="captcha-row mb-4 d-flex justify-content-center">
  146.                 <div class="g-recaptcha animate__animated" data-sitekey="{{captcha_key}}"></div>
  147.             </div>
  148.           {% endif %}
  150.           <div class="notification-error mb-4 text-center text-danger font-weight-bold" style="display: none;"></div>
  152.           <div class="text-center form-submit">
  153.             <button type="submit" id="btn-submit" class="link-gradient"><span>{% trans %}Envoyer votre candidature{% endtrans %}</span><i class="far fa-arrow-right"></i></button>
  154.           </div>
  155.         </form>
  156.       </div>
  157.     </div>
  158.   </div>
  159. </section>
  161. <div class="modal fade" id="thankYouModal" tabindex="-1" role="dialog" aria-labelledby="thankYouModalTitle" aria-hidden="true">
  162.   <div class="modal-dialog modal-dialog-centered" role="document">
  163.     <div class="modal-content">
  164.       <div class="modal-header">
  165.         <a href="{{ path('home') }}">
  166.           <img src="{{ asset('assets/images/logo.svg') }}" alt="Estiam">
  167.         </a>
  168.       </div>
  169.       <div class="modal-body">
  170.         <div class="text-center mb-4">
  171.           {% trans with {'%name%': job.offerTitle} from 'app' %}Nous vous confirmons la bonne réception de votre candidature au poste de <b>%name%</b>. Nous allons l'étudier rapidement afin de vous donner une réponse dans les plus brefs délais. Merci ! %name%{% endtrans %}
  172.         </div>
  173.         <div class="text-center">
  174.           <button type="button" class="common-btn" data-dismiss="modal">{% trans %}Fermer{% endtrans %}</button>
  175.         </div>
  176.       </div>
  177.     </div>
  178.   </div>
  179. </div>
  180. {% endblock %}
  182. {% block custom_javascripts %}
  183. <script type="text/javascript">
  185. $(document).ready(function($){
  186.   var input = $('input[type=file]');
  187.   input.each(function(event){
  188.     $('.curriculumVitae .fa-xmark').click(function (event) {
  189.       event.preventDefault();
  190.       event.stopPropagation();
  191.       $(this).val('')
  192.       $(this).removeClass('selected')
  193.       $(this).next('label .upload-file-name').html('')
  194.     })
  195.     $(this).change(function(event) {
  196.     
  197.       let result = checkFile($(this));
  198.       if(result){
  199.         $(this).val('');
  200.         showMessage(result);
  201.         return false;
  202.       }
  203.       $(this).addClass('selected');
  205.       $(this).next('label').find('.upload-file-name').html(event.target.files[0].name)
  206.     });
  207.   });
  209.   var current_input;
  210.   $('.fa-xmark').click(function (event) {
  211.     current_input = $(this).closest('.group-item').find('input[type=file]');
  212.     event.preventDefault();
  213.     event.stopPropagation();
  214.     current_input.val('');
  215.     current_input.removeClass('selected');
  216.   });
  218.   $('#apply-job').on('submit', function (e) {
  219.       event.preventDefault();
  221.       let $button = $(this).find('#btn-submit');
  223.       loadButton($button);
  225.       {% if captcha_enabled %}
  226.         if (grecaptcha.getResponse().length == 0) {
  227.           showMessage('{% trans %}Veuillez vérifier le recaptcha{% endtrans %}');
  228.           return false;
  229.         }
  230.       {% endif %}
  232.       if(!$("#file_cv").val()){
  233.         showMessage('{% trans %}Merci de choisir votre CV{% endtrans %}');
  234.         return false;
  235.       }
  237.       if(!$("#file_cover").val()){
  238.         showMessage('{% trans %}Merci de choisir votre lettre de motivation{% endtrans %}');
  239.         return false;
  240.       }
  241.       
  242.       let formData = new FormData(this);
  244.       $.ajax({
  245.         url: "{{ path('job.save_apply') }}",
  246.         type: "POST",
  247.         dataType: 'json',
  248.         data : formData,
  249.         contentType: false,
  250.         processData: false,
  251.         success: function(result) {
  252.           if(result.status == 'success'){
  253.             resetForm();
  254.             $('#thankYouModal').modal();
  255.             removeLoadButton($button);
  256.           }else{
  257.             showMessage(result.errors.errorMessage);
  258.           }
  259.           grecaptcha.reset();
  260.         }
  261.       }).always(function () {
  262.         removeLoadButton($button)
  263.       });
  264.   });
  266. });
  267. function resetForm(){
  268.   $('#apply-job').each(function(){
  269.     this.reset();
  270.     $('.fa-xmark').trigger('click');
  271.     $('#skill-selected').text(0);
  272.   });
  273. }
  274. </script>
  275. {% endblock %}