templates/offer/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 %}Soumettre une offre d’emploi{% endtrans %}</h1>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </section>
  14. <section class="section section-form-information my-4">
  15.   <div class="container">
  16.     <div class="row">
  17.       <div class="col-xl-10 mx-auto">
  18.         <div class="i-box pt-4 pb-3 px-4" data-aos='zoom-in'>
  19.           <div class="font-weight-bold text-center text-purple mb-3 font-20">{% trans %}Vous souhaitez déposer une offre d’emploi pour une alternance, un stage ou une embauche ?{% endtrans %}</div>
  20.           <div class="row text-dark-purple">
  21.             <div class="col-lg-6">
  22.               <div class="font-weight-bold mb-2">{% trans %}Comment intégrer nos étudiants ?{% endtrans %}</div>
  23.               <ul class="pl-4">
  24.                 <li>{% trans %}Alternance (disponibles 4 jours/semaine en entreprise, 1 jour à l’école){% endtrans %}</li>
  25.                 <li>{% trans %}Stage pour l’été ou en stage alterné toute l’année{% endtrans %}</li>
  26.                 <li>{% trans %}CDI pour les étudiants en fin d’études{% endtrans %}</li>
  27.               </ul>
  28.             </div>
  29.             <div class="col-lg-6">
  30.               <div class="font-weight-bold mb-2">{% trans %}3 Spécialisations technologiques et 2 MBA :{% endtrans %}</div>
  31.               <ul class="pl-4">
  32.                 {% for expertise in expertises %}
  33.                   <li>{{ expertise.name }}</li>
  34.                 {% endfor %}
  35.               </ul>
  36.             </div>
  37.           </div>
  38.         </div>
  39.       </div>
  40.     </div>
  41.   </div>
  42. </section>
  44. <section class="section section-form section-form-2">
  45.   <div class="container">
  46.     <div class="row">
  47.       <div class="col-xl-10 mx-auto mb-4" data-aos='fade-up'>
  48.         <div class="section-title mb-3"><span>/</span> {% trans %}Déposer une offre{% endtrans %}</div>
  49.         <p class="text-center text-dark-purple">{% trans %}Merci de remplir le formulaire ci-dessous, suite auquel nous vous recontacterons.{% endtrans %}</p>
  51.         <form id="form-offer" data-aos='fade-up'>
  52.           <div class="row">
  53.             <div class="col-lg-3 col-md-4">
  54.               <div class="box-logo d-flex flex-column h-100">
  55.                 <div class="mb-1 text-md-left text-center">{% trans %}Logo{% endtrans %}</div>
  56.                 <div class="text-center b-user-img mb-3">
  57.                   <div class="ml-md-0 mx-auto">
  58.                     <img id='item-img-output' class="img-photo rounded" src="{{ asset('assets/images/no-img/mask-logo.png') }}">
  59.                     <input hidden id="file_photo" name="logo" accept=".jpg, .jpeg, .png" type="file">
  60.                     <i class="fa-solid fa-camera" aria-hidden="true"></i>
  61.                   </div>
  62.                 </div>
  64.               </div>
  65.             </div>
  66.             <div class="col-lg-9 col-md-8 d-flex flex-column justify-content-center">
  67.               <div class="form-group">
  68.                 <input type="text" class="form-control" name="companyName" placeholder="{% trans %}Nom de l'entreprise *{% endtrans %}" required>
  69.               </div>
  70.               <div class="form-group">
  71.                 <input type="text" class="form-control" name="website" placeholder="Site web">
  72.               </div>
  73.             </div>
  74.           </div>
  75.           <div class="form-group">
  76.             <textarea class="form-control" name="presentation" placeholder="{% trans %}Bref présentaion de l'entreprise{% endtrans %}"></textarea>
  77.           </div>
  79.           <div class="form-header font-weight-bold text-dark-purple mb-3">{% trans %}Information de contact{% endtrans %}</div>
  80.           <div class="row">
  81.             <div class="col-lg-4 d-flex flex-column">
  82.               <div class="form-group row row-gender align-items-center mt-2">
  83.                 <label class="col-form-label font-weight-normal col-4 pt-0 pb-0">{% trans %}Civilité{% endtrans %}<span class="text-orange">*</span> :</label>
  84.                 <div class="col-8 pl-0">
  85.                     <div class="form-check form-check-inline mr-0">
  86.                       <div class="custom-control custom-radio">
  87.                           <input type="radio" class="custom-control-input" id="mrs" name="gender" value="1" required>
  88.                           <label class="custom-control-label text-dark-purple" for="mrs">{% trans %}Madame{% endtrans %}</label>
  89.                       </div>
  90.                     </div>
  91.                     <div class="form-check form-check-inline ml-3 mr-0">
  92.                       <div class="custom-control custom-radio">
  93.                           <input type="radio" class="custom-control-input" id="mr" name="gender" value="0" required>
  94.                           <label class="custom-control-label text-dark-purple" for="mr">{% trans %}Monsieur{% endtrans %}</label>
  95.                       </div>
  96.                     </div>
  97.                 </div>
  98.               </div>
  99.               <div class="form-group mt-auto">
  100.                 <input type="text" class="form-control" name="position" placeholder="{% trans %}Fonction{% endtrans %}*" required>
  101.               </div>
  102.             </div>
  103.             <div class="col-lg-4">
  104.               <div class="form-group">
  105.                 <input type="text" class="form-control" name="firstName" placeholder="{% trans %}Prénom{% endtrans %}*" required>
  106.               </div>
  107.               <div class="form-group">
  108.                 <input type="text" class="form-control" name="email" placeholder="Email*" required>
  109.               </div>
  110.             </div>
  111.             <div class="col-lg-4">
  112.               <div class="form-group">
  113.                 <input type="text" class="form-control" name="lastName" placeholder="Nom*" required>
  114.               </div>
  115.               <div class="form-group">
  116.                 <input type="text" class="form-control" name="phone" placeholder="{% trans %}Téléphone{% endtrans %}*" required>
  117.               </div>
  118.             </div>
  119.           </div>
  120.           <div class="form-group row row-gender align-items-center mt-2">
  121.             <label class="col-form-label font-weight-normal pl-3 pt-0 pb-0 text-nowrap">{% trans %}De quelle manière préférez-vous être contactée ?{% endtrans %}</label>
  122.             <div class="col pl-0 ml-3">
  123.               <div class="form-check form-check-inline mr-0">
  124.                 <div class="custom-control custom-checkbox">
  125.                     <input type="checkbox" class="custom-control-input" id="offerType-phone" name="offerType[0]" value="0">
  126.                     <label class="custom-control-label text-dark-purple" for="offerType-phone">{% trans %}Téléphone{% endtrans %}</label>
  127.                 </div>
  128.               </div>
  129.               <div class="form-check form-check-inline ml-3 mr-0">
  130.                 <div class="custom-control custom-checkbox">
  131.                     <input type="checkbox" class="custom-control-input" id="offerType-email" name="offerType[1]" value="1">
  132.                     <label class="custom-control-label text-dark-purple" for="offerType-email">{% trans %}Email{% endtrans %}</label>
  133.                 </div>
  134.               </div>
  135.             </div>
  136.           </div>
  138.           <div class="form-header font-weight-bold text-purple mb-3">{% trans %}Votre offre d’emploi{% endtrans %}</div>
  139.           <div class="form-group">
  140.             <input type="text" class="form-control" name="offerTitle" placeholder="{% trans %}Intitulé de l'offre *{% endtrans %}" required>
  141.           </div>
  143.           <div class="form-header font-weight-bold text-dark-purple mb-3">{% trans %}Type de contrat{% endtrans %}</div>
  144.           <div class="form-group row">
  145.             <div class="col-lg-2">
  146.               <div class="form-check mx-0 px-0 mb-2">
  147.                 <div class="custom-control custom-radio">
  148.                     <input type="radio" class="custom-control-input" id="contract-1" name="contract" value="1">
  149.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="contract-1">CDI</label>
  150.                 </div>
  151.               </div>
  152.               <div class="form-check mx-0 px-0 mb-2">
  153.                 <div class="custom-control custom-radio">
  154.                     <input type="radio" class="custom-control-input" id="contract-2" name="contract" value="2">
  155.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="contract-2">CDD</label>
  156.                 </div>
  157.               </div>
  158.             </div>
  159.             <div class="col-lg-4">
  160.               <div class="form-check mx-0 px-0 mb-2">
  161.                 <div class="custom-control custom-radio">
  162.                     <input type="radio" class="custom-control-input" id="contract-3" name="contract" value="3">
  163.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="contract-3">Stage d’été</label>
  164.                 </div>
  165.               </div>
  166.               <div class="form-check mx-0 px-0 mb-2">
  167.                 <div class="custom-control custom-radio">
  168.                     <input type="radio" class="custom-control-input" id="contract-4" name="contract" value="4">
  169.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="contract-4">Stage alterné • 4j/semaine</label>
  170.                 </div>
  171.               </div>
  172.             </div>
  173.             <div class="col-lg-6">
  174.               <div class="form-check mx-0 px-0 mb-2">
  175.                 <div class="custom-control custom-radio">
  176.                     <input type="radio" class="custom-control-input" id="contract-5" name="contract" value="5">
  177.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="contract-5">Contrat d’apprentissage • 4j/semaine</label>
  178.                 </div>
  179.               </div>
  180.               <div class="form-check mx-0 px-0 mb-2">
  181.                 <div class="custom-control custom-radio">
  182.                     <input type="radio" class="custom-control-input" id="contract-6" name="contract" value="6">
  183.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="contract-6">Contrat de professionnalisation • 4j/semaine</label>
  184.                 </div>
  185.               </div>
  186.             </div>
  187.           </div>
  189.           <div class="form-header font-weight-bold text-dark-purple mb-3">{% trans %}Domaine/Expertise <span class="text-orange">*</span>{% endtrans %}</div>
  190.           <div class="form-group checkbox-expertise-required">
  191.             {% for i,expertise in expertises %}
  192.             <div class="form-check mx-0 px-0 mb-2">
  193.               <div class="custom-control custom-checkbox">
  194.                   <input type="checkbox" class="custom-control-input" id="expertise-{{ expertise.id }}" name="expertise[{{i}}]" value="{{ expertise.id }}">
  195.                   <label class="custom-control-label text-dark-purple font-weight-normal" for="expertise-{{ expertise.id }}">{{ expertise.name }}</label>
  196.               </div>
  197.             </div>
  198.             {% endfor %}
  199.           </div>
  201.           <div class="form-header font-weight-bold text-dark-purple mb-3">{% trans %}À proximité du campus{% endtrans %}</div>
  202.           <div class="form-group row">
  203.             {% for i,campus in campuses %}
  204.             <div class="col-lg-3 col-md-6">
  205.               <div class="form-check mx-0 px-0 mb-2">
  206.                 <div class="custom-control custom-checkbox">
  207.                   <input type="checkbox" class="custom-control-input" id="campuses-{{ campus.id }}" name="campuses[{{i}}]" value="{{ campus.id }}">
  208.                   <label class="custom-control-label text-dark-purple font-weight-normal" for="campuses-{{ campus.id }}">{{ campus.name }}</label>
  209.                 </div>
  210.               </div>
  211.             </div>
  212.             {% endfor %}
  213.           </div>
  215.           <div class="form-group row">
  216.             <div class="col-lg-6 mb-lg-0 mb-3">
  217.               <select class="form-control" name="studyLevel">
  218.                 <option value>{% trans %}Niveau minimum requis{% endtrans %}</option>
  219.                 {% for studyLevel in studyLevels %}
  220.                   <option value="{{ studyLevel.id }}">{{ studyLevel.name }}</option>
  221.                 {% endfor %}
  222.               </select>
  223.             </div>
  224.             <div class="col-lg-6">
  225.               <input type="number" class="form-control" min="0" name="duration" placeholder="{% trans %}Durée du contrat (par mois){% endtrans %}">
  226.             </div>
  227.           </div>
  228.           <div class="form-group">
  229.             <textarea class="form-control" name="description" placeholder="{% trans %}Description de votre offre{% endtrans %}"></textarea>
  230.           </div>
  231.           <div class="form-group">
  232.             <textarea class="form-control" name="expectProfile" placeholder="{% trans %}Profil recherché{% endtrans %}"></textarea>
  233.           </div>
  235.           <div class="form-header font-weight-bold text-dark-purple mb-3">
  236.             {% trans %}Sélectionnez les compétences nécessaires pour cette offre <span class="font-weight-normal font-italic">(<span id="skill-selected">0</span> compétence(s) sélectionnée(s))</span>{% endtrans %}
  237.           </div>
  238.           <div class="list-offre-checkbox mb-3">
  239.             {% for i,skill in skills %}
  240.             <label class="switch">
  241.               <input type="checkbox" name="skill[{{i}}]" value="{{ skill.id }}">
  242.               <span class="slider">{{ skill.name }}</span>
  243.             </label>
  244.             {% endfor %}
  245.           </div>
  247.           <div class="form-group row">
  248.             <div class="col-lg-6 mb-lg-0 mb-3">
  249.               <div class="offre-date position-relative mt-1">
  250.                 <input type="text" class="form-control" id="datepicker-min" name="validDate" placeholder="{% trans %}Date de validité{% endtrans %}" required>
  251.               </div>
  252.             </div>
  253.             <div class="col-lg-6 field-upload">
  254.               <div class="group-item">
  255.                 <input id="curriculumVitae" type="file" class="form-control" name="descriptionFile" accept=".pdf,.docx,.doc"/>
  256.                 <label class="d-flex flex-column" for="curriculumVitae">
  257.                   <div class="d-flex flex-sm-row flex-column">
  258.                     <div class="flex-1 text-dark-purple line-height-normal">
  259.                       <div class="font-weight-bold">{% trans %}Pièce jointe de la fiche du poste{% endtrans %}</div>
  260.                       <div class="font-weight-normal font-14">{% trans %}(format accepté : pdf, word. Taille max : 10 MB){% endtrans %}</div>
  261.                     </div>
  262.                     <span class="upload-btn cursor bg-dark-purple ml-sm-auto mx-auto mt-sm-0 mt-3">{% trans %}Télécharger{% endtrans %}</span>
  263.                   </div>
  264.                   <div class="file-desc flex-1 d-flex align-items-center mt-2 mb-4 pl-0">
  265.                     <i class="fa-solid fa-paperclip-vertical text-orange mr-2"></i>
  266.                     <span class="upload-file-name"></span>
  267.                     <i class="far fa-xmark ml-3 text-red cursor" data-id></i>
  268.                   </div>
  269.                 </label>
  270.               </div>
  271.             </div>
  272.           </div>
  274.           {% if captcha_enabled %}
  275.             <div class="captcha-row mb-4 d-flex justify-content-center">
  276.                 <div class="g-recaptcha animate__animated" data-sitekey="{{captcha_key}}"></div>
  277.             </div>
  278.           {% endif %}
  280.           <div class="notification-error mb-4 text-center text-danger font-weight-bold" style="display: none;"></div>
  282.           <div class="text-center form-submit">
  283.             <button type="submit" id="btn-submit" class="link-gradient"><span>{% trans %}Soumettre votre offre{% endtrans %}</span><i class="far fa-arrow-right"></i></button>
  284.           </div>
  285.         </form>
  286.       </div>
  287.     </div>
  288.   </div>
  289. </section>
  291. <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalTitle" aria-hidden="true">
  292.   <div class="modal-dialog" role="document">
  293.     <div class="modal-content">
  294.       <div class="modal-header">
  295.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  296.           <span aria-hidden="true">&times;</span>
  297.         </button>
  298.       </div>
  299.       <div class="modal-body">
  300.         <div class="container px-0">
  301.           <div class="row">
  302.             <div class="col-12">
  303.               <div id="upload-demo"></div>
  304.             </div>
  305.           </div>
  306.         </div>
  307.         <div class="text-center mt-3">
  308.           <button type="button" id="cancelCropBtn" class="common-btn btn-cancel" data-dismiss="modal">{% trans %}Annuler{% endtrans %}</button>
  309.           <button type="button" id="cropImageBtn" class="common-btn">{% trans %}Recadrer{% endtrans %}</button>
  310.         </div>
  311.       </div>
  312.     </div>
  313.   </div>
  314. </div>
  316. <div class="modal fade" id="thankYouModal" tabindex="-1" role="dialog" aria-labelledby="thankYouModalTitle" aria-hidden="true">
  317.   <div class="modal-dialog modal-dialog-centered" role="document">
  318.     <div class="modal-content">
  319.       <div class="modal-header">
  320.         <a href="{{ path('home') }}">
  321.           <img src="{{ asset('assets/images/logo.svg') }}" alt="Estiam France">
  322.         </a>
  323.       </div>
  324.       <div class="modal-body">
  325.         <div class="text-center mb-4">
  326.           {% trans %}Merci ! Votre offre a été bien envoyée.{% endtrans %}<br/>
  327.           {% trans %}Notre service dédié va vous contacter très bientôt.{% endtrans %}<br/>
  328.           {% trans %}L'équipe ÉSTIAM.{% endtrans %}
  329.         </div>
  330.         <div class="text-center">
  331.           <button type="button" class="common-btn clean-form" data-dismiss="modal">{% trans %}Fermer{% endtrans %}</button>
  332.         </div>
  333.       </div>
  334.     </div>
  335.   </div>
  336. </div>
  338. {% endblock %}
  340. {% block custom_javascripts %}
  341. <script src="{{ asset('assets/js/croppie.js') }}"></script>
  342. <script type="text/javascript">
  344. $(document).ready(function(){
  345.   /* === Crop logo --- */
  346.   $('.img-photo').on('click', function () {
  347.       $('#file_photo').click();
  348.     });
  349.     $('.b-user-img i').on('click', function () {
  350.       $('#file_photo').click();
  351.     });
  352.     $('#file_photo').change(function(){
  353.       $('#uploadModal').modal('show');
  354.       $('.close').click(function () {
  355.           $("#myModal").modal('hide');
  356.       });
  357.       $('#cancelCropBtn').click(function () {
  358.           $("#myModal").modal('hide');
  359.       });
  360.   });
  362.   var $uploadCrop,
  363.       tempFilename,
  364.       rawImg,
  365.       imageId,
  366.       base64ImageContent;
  368.   function readFile(input) {
  369.     if (input.files && input.files[0]) {
  370.       var reader = new FileReader();
  371.       reader.onload = function (e) {
  372.         $('.upload-demo').addClass('ready');
  373.         $('#uploadModal').modal('show');
  374.         rawImg = e.target.result;
  375.       }
  376.       reader.readAsDataURL(input.files[0]);
  377.     }
  378.     else {
  379.       swal("Sorry - you're browser doesn't support the FileReader API");
  380.     }
  381.   }
  383.   $uploadCrop = $('#upload-demo').croppie({
  384.     viewport: {
  385.       width: 150,
  386.       height: 150,
  387.       type: 'square'
  388.     },
  389.     boundary: {
  390.         width: 300,
  391.         height: 300
  392.     },
  393.     enforceBoundary: false,
  394.     enableExif: true
  395.   });
  397.   $('#uploadModal').on('shown.bs.modal', function(){
  398.     $uploadCrop.croppie('bind', {
  399.       url: rawImg
  400.     }).then(function(){
  401.       console.log('jQuery bind complete');
  402.     });
  403.   });
  405.   $('#file_photo').on('change', function () { 
  406.     readFile(this); 
  407.   });
  409.   $('#cropImageBtn').on('click', function (ev) {
  410.     $uploadCrop.croppie('result', {
  411.       type: 'base64',
  412.       format: 'png',
  413.       fill: '#fff',
  414.       size: {
  415.         width: 160, 
  416.         height: 160
  417.       }
  418.     }).then(function (resp) {
  419.       $('#item-img-output').attr('src', resp);
  420.       var image = $('#item-img-output').attr('src');
  421.       // base64ImageContent = image.replace(/^data:image\/(jpeg|jpg);base64,/, "");
  422.       base64ImageContent = image;
  423.     });
  424.     $('#uploadModal').modal('hide');
  425.   });
  427.   /* === Upload file --- */
  428.   var input = $('.field-upload input[type=file]');
  429.   input.each(function(event){
  430.     $(this).change(function(event) {
  432.       let result = checkFile($(this));
  433.       if(result){
  434.         $(this).val('');
  435.         $('.notification-error').text(result).show();
  436.         handleNotification($('.notification-error'));
  437.         return false;
  438.       }
  439.       $(this).addClass('selected');
  440.       $('.upload-file-name').html(event.target.files[0].name);
  441.     });
  442.   });
  444.   var current_input;
  445.   $('.fa-xmark').click(function (event) {
  446.     current_input = $(this).closest('.group-item').find('input[type=file]');
  447.     event.preventDefault();
  448.     event.stopPropagation();
  449.     current_input.val('');
  450.     current_input.removeClass('selected');
  451.   });
  453.   $('.switch input').click(function(){
  454.     let selectedSkill = $('.switch input:checked').length;
  455.     // if(selectedSkill > 5){
  456.     //   this.checked = false;
  457.     //   $('.notification-error').text(`{% trans %}Vous avez la possibilité de choisir 5 options au maximum{% endtrans %}`).show();
  458.     //   handleNotification($('.notification-error'));
  459.     //   return false;
  460.     // }
  461.     $('#skill-selected').text(selectedSkill);
  462.   });
  463.   
  464.  
  465.   
  466.   $('#form-offer').on('submit', function (e) {
  467.       event.preventDefault();
  469.       let $button = $(this).find('#btn-submit');
  471.       loadButton($button);
  473.       {% if captcha_enabled %}
  474.         if (grecaptcha.getResponse().length == 0) {
  476.           $('.notification-error').text('{% trans %}Veuillez vérifier le recaptcha{% endtrans %}').show();
  477.           handleNotification($('.notification-error'));
  478.           removeLoadButton($button);
  479.  
  480.           e.preventDefault();
  481.           return false;
  482.         }
  483.       {% endif %}
  485.       if(isChecked('.checkbox-expertise-required')){
  486.         showMessage('{% trans %}Veuillez sélectionner Domaine/Expertise{% endtrans %}');
  487.         return false;
  488.       }
  490.       // Cover form data
  491.       let data = {};
  492.       var formData = new FormData();
  493.       $(this).serializeArray().forEach((object)=>{
  494.           data[object.name] = object.value;
  495.       });
  497.       if(base64ImageContent){
  498.         const file = DataURIToBlob(base64ImageContent);
  499.         formData.append('logo', file, 'image.jpg') ;
  500.       }
  502.       if($("input[name=descriptionFile]")[0].files[0]){
  503.         formData.append(`descriptionFile`, $("input[name=descriptionFile]")[0].files[0]);
  504.       }
  506.       for (var key in data ) {
  507.         formData.append(key, data[key]);
  508.       }
  509.       // End cover form data
  511.       $.ajax({
  512.         url: "{{ path('offer.save') }}",
  513.         type: "POST",
  514.         dataType: 'json',
  515.         data : formData,
  516.         contentType: false,
  517.         processData: false,
  518.         success: function(result) {
  519.           if(result.status == 'success'){
  520.             base64ImageContent = null;
  521.             resetForm();
  522.             $('#thankYouModal').modal();
  523.             removeLoadButton($button)
  524.           }else{
  525.             $('.notification-error').text(result.errors.errorMessage).show();
  526.           }
  527.           grecaptcha.reset();
  528.         }
  529.       }).always(function () {
  530.         removeLoadButton($button)
  531.       });
  532.   });
  533. }) ;
  535. function resetForm(){
  536.   $('#form-offer').each(function(){
  537.     this.reset();
  538.     $('.fa-xmark').trigger('click');
  539.     $('#item-img-output').attr('src','');
  540.     $('#skill-selected').text(0);
  541.   });
  542. }
  543. </script>
  544. {% endblock %}