templates/demande/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-0">{% trans %}Brochure ÉSTIAM{% endtrans %}</h1>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </section>
  14. <section class="section section-form section-form-2 mb-4 mt-3" data-aos='fade-up'>
  15.   <div class="container">
  16.     <div class="row">
  17.       <form id="document-apply">
  18.         <div class="col-xl-10 mx-auto">
  19.           <div class="row mb-4">
  20.             <div class="col-12">
  21.               <div class="py-3 px-xl-4 px-2 text-center" data-aos='zoom-in'>
  22.                 <div class="font-weight-bold font-20 mb-2 text-dark-purple">{% trans %}Retrouvez toutes les informations d'ÉSTIAM dans notre brochure{% endtrans %} !</div>
  23.                 <div class="section-title mb-2"><span>/</span>{% trans %} Découvrez ÉSTIAM en vidéo{% endtrans %}</div>
  24.               </div>
  25.             </div>
  26.             <div class="col-lg-7 mx-auto">
  27.               <div class="embed-responsive embed-responsive-16by9 hvr-glow">
  28.                 <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/I4BJraM6ESU?rel=0" allowfullscreen></iframe>
  29.               </div>
  30.             </div>
  31.           </div>
  33.           <div class="section-title text-left mb-3"><span>/</span>{% trans %} Téléchargement de la brochure{% endtrans %}</div>
  34.           <p>{% trans %}ÉSTIAM est une école d'informatique appliquée. Elle délivre une formation innovante avec des méthodes et un enseignement professionnalisant. L’école crée une relation individualisée entre chaque étudiant et les formateurs, tous des professionnels de l’informatique{% endtrans %}.<br/>{% trans %}Merci de rentrer vos coordonnées afin de lancer le téléchargement de la brochure{% endtrans %}.</p>
  35.           
  36.           <div class="row">
  37.             <div class="col-12 d-flex flex-column">
  38.               <div class="form-group row row-gender align-items-center mt-2">
  39.                 <label class="col-form-label font-weight-normal px-3 pt-0 pb-0 text-dark-purple text-nowrap">{% trans %}Civilité{% endtrans %}<span class="text-orange">*</span> :</label>
  40.                 <div class="flex-1">
  41.                     <div class="form-check form-check-inline mr-0">
  42.                       <div class="custom-control custom-radio">
  43.                           <input type="radio" class="custom-control-input" id="mr" name="user[gender]" value="1" required>
  44.                           <label class="custom-control-label text-dark-purple" for="mr">{% trans %}Madame{% endtrans %}</label>
  45.                       </div>
  46.                     </div>
  47.                     <div class="form-check form-check-inline ml-3 mr-0">
  48.                       <div class="custom-control custom-radio">
  49.                           <input type="radio" class="custom-control-input" id="mrs" name="user[gender]" value="0" required>
  50.                           <label class="custom-control-label text-dark-purple" for="mrs">{% trans %}Monsieur{% endtrans %}</label>
  51.                       </div>
  52.                     </div>
  53.                 </div>
  54.               </div>
  55.             </div>
  56.             <div class="col-lg-4 col-md-6">
  57.               <div class="form-group">
  58.                 <input type="text" class="form-control" name="user[firstName]" placeholder="{% trans %}Prénom{% endtrans %}*" required>
  59.               </div>
  60.             </div>
  61.             <div class="col-lg-4 col-md-6">
  62.               <div class="form-group">
  63.                 <input type="text" class="form-control" name="user[lastName]" placeholder="{% trans %}Nom{% endtrans %}*" required>
  64.               </div>
  65.             </div>
  66.             <div class="col-lg-4 col-md-6">
  67.               <div class="form-group">
  68.                 <input type="text" class="form-control" name="user[email]" placeholder="{% trans %}E-mail{% endtrans %}*" required>
  69.               </div>
  70.             </div>
  71.             <div class="col-lg-4 col-md-6">
  72.               <div class="form-group">
  73.                 <input type="text" class="form-control" name="user[phone]" placeholder="{% trans %}Téléphone{% endtrans %}*" required>
  74.               </div>
  75.             </div>
  76.             <div class="col-lg-4 col-md-6">
  77.               <div class="form-group">
  78.                 <select class="form-control" name="level" required>
  79.                   <option value="">{% trans %}Votre niveau d'étude actuel{% endtrans %}</option>
  80.                   <option value="1">BAC</option>
  81.                   <option value="2">BAC +1</option>
  82.                   <option value="3">BAC +2</option>
  83.                   <option value="4">BAC +3</option>
  84.                   <option value="5">BAC +4</option>
  85.                   <option value="6">BAC +5</option>
  86.                 </select>
  87.               </div>
  88.             </div>
  89.             <div class="col-lg-4 col-md-6">
  90.               <div class="form-group">
  91.                 <input type="text" class="form-control" name="" placeholder="{% trans %}Votre filière d'études actuelle*{% endtrans %}" required>
  92.               </div>
  93.             </div>
  94.           </div>
  96.           <div class="font-weight-bold text-dark-purple mb-2 mt-3">Établissement scolaire actuel</div>
  97.           <div class="row">
  98.             <div class="col-lg-4 col-md-6">
  99.               <div class="form-group">
  100.                 <input type="text" class="form-control" name="schoolName" placeholder="{% trans %}Nom d'établissement{% endtrans %}">
  101.               </div>
  102.             </div>
  103.             <div class="col-lg-4 col-md-6">
  104.               <div class="form-group">
  105.                 <input type="text" class="form-control" name="schoolPostal" placeholder="{% trans %}CP Établissement{% endtrans %}">
  106.               </div>
  107.             </div>
  108.             <div class="col-lg-4 col-md-6">
  109.               <div class="form-group">
  110.                 <input type="text" class="form-control" name="schoolCity" placeholder="{% trans %}Ville d'établissement{% endtrans %}">
  111.               </div>
  112.             </div>
  113.           </div>
  115.           <div class="font-weight-bold text-purple my-3"><span class="text-orange">/</span> {% trans %}Sélectionnez le(s) programme(s) auxquels vous envisagez de candidater{% endtrans %} <span class="text-orange">*</span></div>
  116.             <div class="form-group row">
  117.               <div class="col-lg-4 program-level-sidebar">
  118.                 <div class="font-weight-bold text-dark-purple mb-2">BTS</div>
  119.                 {% for bts in programs %}
  120.                   {% if bts.level == 1 %}
  121.                     <div class="form-check mx-0 px-0 mb-2">
  122.                       <div class="custom-control custom-checkbox">
  123.                         <input type="checkbox" class="custom-control-input" id="p-{{ bts.id }}" data-level="1" name="programs[]" value="{{ bts.id }}"
  124.                         {% if programId == bts.id %} checked {% endif %}
  125.                         >
  126.                         <label class="custom-control-label text-dark-purple font-weight-normal" for="p-{{ bts.id }}">{{ bts.name }}</label>
  127.                       </div>
  128.                     </div>
  129.                   {% endif %}
  130.                 {% endfor %}
  131.               </div>
  132.               <div class="col-lg-4 program-level-sidebar">
  133.                 <div class="font-weight-bold text-dark-purple mb-2">Bachelor</div>
  134.                 {% for bachelor in programs %}
  135.                   {% if bachelor.level == 2 %}
  136.                     <div class="form-check mx-0 px-0 mb-2">
  137.                       <div class="custom-control custom-checkbox">
  138.                         <input type="checkbox" class="custom-control-input" id="p-{{ bachelor.id }}" data-level="2" name="programs[]" value="{{ bachelor.id }}"
  139.                         {% if programId == bachelor.id %} checked {% endif %}
  140.                         >
  141.                         <label class="custom-control-label text-dark-purple font-weight-normal" for="p-{{ bachelor.id }}">{{ bachelor.name }}</label>
  142.                       </div>
  143.                     </div>
  144.                   {% endif %}
  145.                 {% endfor %}
  146.               </div>
  147.               <div class="col-lg-4 program-level-sidebar">
  148.                 <div class="font-weight-bold text-dark-purple mb-2">MSc & MBA</div>
  149.                   {% for mba in programs %}
  150.                   {% if mba.level == 3 %}
  151.                     <div class="form-check mx-0 px-0 mb-2">
  152.                       <div class="custom-control custom-checkbox">
  153.                         <input type="checkbox" class="custom-control-input" id="p-{{ mba.id }}" data-level="3" name="programs[]" value="{{ mba.id }}"
  154.                         {% if programId == mba.id %} checked {% endif %}
  155.                         >
  156.                         <label class="custom-control-label text-dark-purple font-weight-normal" for="p-{{ mba.id }}">{{ mba.name }}</label>
  157.                       </div>
  158.                     </div>
  159.                   {% endif %}
  160.                 {% endfor %}
  161.               </div>
  162.             </div>
  164.           <div class="font-weight-bold text-dark-purple mb-2 mt-3">{% trans %}Campus ÉSTIAM souhaité{% endtrans %} <span class="text-orange">*</span></div>
  165.           <div class="form-group row list-campus-checkbox">
  166.             {% for campus in campuses %}
  167.               <div class="col-xl col-lg col-md-3 col-sm-4 col-6">
  168.                 <div class="form-check mx-0 px-0 mb-2">
  169.                   <div class="custom-control custom-radio">
  170.                     <input type="radio" class="custom-control-input" id="campuses-{{ campus.id }}" name="campus1" value="{{ campus.id }}" required>
  171.                     <label class="custom-control-label text-dark-purple font-weight-normal text-nowrap" for="campuses-{{ campus.id }}">{{ campus.name }}</label>
  172.                   </div>
  173.                 </div>
  174.               </div>
  175.             {% endfor %}
  176.           </div>
  178.           {% if captcha_enabled %}
  179.             <div class="captcha-row mb-4 d-flex justify-content-center">
  180.                 <div class="g-recaptcha animate__animated" data-sitekey="{{captcha_key}}"></div>
  181.             </div>
  182.           {% endif %}
  184.           <div class="notification-error mb-4 text-center text-danger font-weight-bold" style="display: none;"></div>
  186.           <div class="text-center form-submit">
  187.             <input type="hidden" name="campaign" value="{{ campaign.id }}">
  188.             
  189.             <button type="submit" id="btn-submit" class="link-gradient"><span>{% trans %}Télécharger la brochure{% endtrans %}</span><i class="far fa-arrow-right"></i></button>
  190.           </div>
  191.         </div>
  192.         <a href="{{ asset('assets/files/Brochure_ESTIAM_2023_light_2.pdf') }}" id="brochure" download="Estiam-Brochure.pdf" style="display: none;">Brochure</a>
  193.       </form>
  194.     </div>
  195.   </div>
  196. </section>
  198. <div class="modal fade" id="thankYouModal" tabindex="-1" role="dialog" aria-labelledby="thankYouModalTitle" aria-hidden="true">
  199.   <div class="modal-dialog modal-dialog-centered" role="document">
  200.     <div class="modal-content">
  201.       <div class="modal-header">
  202.         <a href="{{ path('home') }}">
  203.           <img src="{{ asset('assets/images/logo.svg') }}" alt="Estiam France">
  204.         </a>
  205.       </div>
  206.       <div class="modal-body">
  207.         <div class="text-center mb-4">
  208.           {% trans %}Merci pour votre soumission{% endtrans %}
  209.         </div>
  210.         <div class="text-center">
  211.           <a href="{{ path('home') }}"><button type="button" class="common-btn">{% trans %}Fermer{% endtrans %}</button></a>
  212.         </div>
  213.       </div>
  214.     </div>
  215.   </div>
  216. </div>
  217. {% endblock %}
  218. {% block custom_javascripts %}
  219. <script type="text/javascript">
  220. $(document).ready(function(){
  221.   $('[name^="programs"]').change(function() {
  222.     if ($(this).prop('checked')) {
  223.       const siblings = $(this).closest('.program-level-sidebar').siblings();
  224.       siblings.find('[name^="programs"]').prop('checked', false)      
  225.     }
  226.   })
  228.   $("[name='service']").click(function() {
  229.     var radio = $(this).attr('id'); console.log(radio);
  230.     if(radio == 'service-other') {
  231.         $(".service-other").show();
  232.     } else {
  233.         $(".service-other").hide();
  234.     }
  235.   });
  237.   $('#document-apply').on('submit', function (e) {
  239.     $('.notification-error').hide();
  241.     event.preventDefault();
  243.     if($("input:checkbox[name='programs[]']:checked").length <= 0){
  244.         $('.notification-error').text('{% trans %}Veuillez sélectionner au moins 1 programme{% endtrans %}');
  245.         $('.notification-error').show();
  246.         return false;
  247.     }
  249.     if(typeof(grecaptcha) !== 'undefined') {
  250.       var checkCaptcha = grecaptcha.getResponse();
  251.       if(grecaptcha.getResponse() == ""){
  252.           $('.g-recaptcha').css({"box-shadow": "0px 0px 4px #ff0000b3"});
  253.           return;
  254.       }
  255.     }
  257.     let data = $(this).serialize();
  259.     let $button = $(this).find('#btn-submit');
  260.       $button.prepend('<i class="fas fa-spinner fa-pulse mr-1"></i>');
  261.       $button.prop('disabled', true);
  263.     $.ajax({
  264.         url: "/save-document",
  265.         type: 'POST',
  266.         dataType: 'json',
  267.         data : data,
  268.         success: function (res) {
  269.  
  270.             if(res.status == 'failed'){
  271.                $('.notification-error').text(res.errors.errorMessage);
  272.                $('.notification-error').show();
  273.             }
  274.             if(res.status == 'success'){
  275.                 document.getElementById("brochure").click();
  276.                 document.getElementById("document-apply").reset();
  277.                 $('#thankYouModal').modal();
  278.                 dataLayer.push({'event':'lead_brochure'});
  279.             }
  280.         },
  281.     }).always(function () {
  282.         
  283.         $button.find('.fa-pulse').remove();
  284.         $button.prop('disabled', false);
  285.         handleNotification($('.notification-success, .notification-error'));
  286.     });
  287.     
  288.   });
  290. });
  291. </script>
  292. {% endblock %}