templates/admission/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% set extendClass = 'admission-en' %}
  3. {% block custom_css %}
  4.   <link href="{{ asset('assets/css/intlTelInput.css') }}" rel="stylesheet">
  5. {% endblock %}
  6. {% block page_contents %}
  7. <section class="section section-page-title bg-gradient py-4" data-aos='fade-down'>
  8.     <div class="container">
  9.         <div class="row">
  10.             <div class="col-12 mb-3 text-center">
  11.                 <a href="/"><img class="landing-logo" src="/assets/images/logo-white.svg" width="250" alt="Estiam France"></a>
  12.             </div>
  13.             <div class="col-12 text-left text-white d-inline-flex justify-content-md-start justify-content-center align-items-center flex-wrap">
  14.                 <div class="l-logo order-md-1 order-1">
  15.                   {% if landing.landingpageFiles[0] is defined %}
  16.                     <img src="{{ landing.landingpageFiles[0].path }}" alt="{{ landing.name }}" />
  17.                   {% else %}
  18.                     <img src="{{ asset('assets/images/no-img/jpo.jpg') }}" alt="{{ landing.name }}"/>
  19.                   {% endif %}
  20.                 </div>
  21.                 <div class="l-name mx-3 order-md-2 order-3 mt-md-0 mt-3"> 
  22.                   <h1 class="page-name font-weight-bold mb-0">{{ landing.name }}</h1>
  23.                 </div>
  24.                 <div class="l-qrcode order-md-3 order-2">
  25.                   <div id="qrcode"></div>
  26.                 </div>
  27.             </div>
  28.         </div>
  29.     </div>
  30. </section>
  32. <section class="section section-form section-form-2 section-form-addmission mb-lg-5 mb-4 pt-4" data-aos="fade-up">
  33.   <form autocomplete="off" name="form-apply" id="form-landing-page-agent" action="{{ path('landingpage_agent.save') }}" method="POST" enctype="multipart/form-data" class="form-outline">
  34.     <div class="container">
  35.       <div class="row">   
  36.         <div class="col-12 mb-4">
  37.           <div class="row">
  38.             <div class="col-lg-4">
  39.                 <div class="form-header font-weight-bold text-purple mb-2">Preferred campus</div>
  40.                 <div class="form-group selectbox">
  41.                     <select class="form-control cursor" name="campus1" required="">
  42.                         <option val=""></option>
  43.                         {% for campus in campuses %}
  44.                             <option value="{{ campus.id }}">{{ campus.name }}</option>
  45.                         {% endfor %}
  46.                     </select>
  47.                     <label class="form-label">
  48.                         Please select a campus
  49.                     </label>
  50.                 </div>
  51.             </div>
  52.             <div class="col-lg-4 preferred-program" style="display: none;">
  53.                 <div class="form-header font-weight-bold text-purple mb-2">Preferred program</div>
  54.                 <div class="form-group selectbox">
  55.                     <select class="form-control cursor" name="programs[]" required="" id="programsByCampus" disabled>
  56.                     </select>
  57.                     <label class="form-label">
  58.                         Please select a program
  59.                     </label>
  60.                 </div>
  61.             </div>
  62.             <div class="col-12"><i><small>(Please note that admission to the 5<sup>th</sup> year is not possible for students who have not first completed their 4<sup>th</sup> year at ÉSTIAM.)</small></i></div>
  63.           </div>
  64.         </div>
  65.       </div>
  66.     </div>
  67.     <div class="bg-white form-add mx-xl-auto mx-md-3 mx-2">
  68.       <div class="container">
  69.         <div class="row">
  70.           <div class="col-12 py-lg-4 py-4">
  71.             {# STEP 1 #}
  72.             <div class="d-flex flex-md-row flex-column mb-4">
  73.                 <div class="section-title text-left d-flex align-items-center mb-0">
  74.                     <span class="mr-2">
  75.                       <img src="/assets/images/landing/s-1.png" height="39" alt="Your personal information" />
  76.                     </span>
  77.                     Your personal information 
  78.                 </div>
  79.             </div>
  80.             <div class="form-group checklist">
  81.                 <label class="form-label pr-md-5 pr-3">
  82.                     You are
  83.                 </label>
  84.                 <div class="d-inline">
  85.                     <div class="form-check form-check-inline">
  86.                         <div class="custom-control custom-radio pr-md-5 pr-2">
  87.                             <input type="radio" class="custom-control-input" id="user[gender]-0" name="user[gender]" value="0" required="">
  88.                             <label class="custom-control-label" for="user[gender]-0">Mr.</label>
  89.                         </div>
  90.                     </div>
  91.                     <div class="form-check form-check-inline">
  92.                         <div class="custom-control custom-radio pr-md-5 pr-2">
  93.                             <input type="radio" class="custom-control-input" id="user[gender]-1" name="user[gender]" value="1" required="">
  94.                             <label class="custom-control-label" for="user[gender]-1">
  95.                                 Ms.
  96.                             </label>
  97.                         </div>
  98.                     </div>
  99.                 </div>
  100.             </div>
  101.             <div class="form-row">
  102.                 <div class="col-lg-4">
  103.                     <div class="form-group">
  104.                         <input type="text" placeholder=" " class="form-control" name="user[lastName]" required="" value="">
  105.                         <label class="form-label">
  106.                             Surname
  107.                         </label>
  108.                     </div>
  109.                 </div>
  110.                 <div class="col-lg-4">
  111.                     <div class="form-group">
  112.                         <input type="text" placeholder=" " class="form-control" name="user[firstName]" required="" value="">
  113.                         <label class="form-label">
  114.                             First name
  115.                         </label>
  116.                     </div>
  117.                 </div>
  118.                 <div class="col-lg-4">
  119.                     <div class="form-group date-picker-en">
  120.                         <input type="text"  placeholder=" " class="form-control " name="user[birthDay]" required value="" maxDate="-16Y" minDate="-100Y">
  121.                         <label class="form-label">
  122.                             Date of birth
  123.                         </label>
  124.                     </div>
  125.                 </div>
  126.             </div>
  127.             <div class="form-row">
  128.                 <div class="col-lg-4">
  129.                     <div class="form-group selectbox">
  130.                         <select class="form-control cursor" name="user[country]">
  131.                             <option val=""></option>
  132.                             {% for country in countries %}
  133.                                 <option value="{{ country.id }}">{{ country.name }}</option>
  134.                             {% endfor %}
  135.                         </select>
  136.                         <label class="form-label">
  137.                             Country of birth
  138.                         </label>
  139.                     </div>
  140.                 </div>
  141.                 <div class="col-lg-4">
  142.                     <div class="form-group selectbox">
  143.                         <select class="form-control cursor" name="user[nationality]">
  144.                             <option val=""></option>
  145.                             {% for country in countries %}
  146.                                 <option value="{{ country.id }}">{{ country.name }}</option>
  147.                             {% endfor %}
  148.                         </select>
  149.                         <label class="form-label">
  150.                             Nationality
  151.                         </label>
  152.                     </div>
  153.                 </div>
  154.                 <div class="col-lg-4">
  155.                     <div class="form-group">
  156.                         <input type="text" placeholder=" " class="form-control" name="user[email]" required="" value="">
  157.                         <label class="form-label">
  158.                             Email
  159.                         </label>
  160.                     </div>
  161.                 </div>
  162.             </div>
  163.             <div class="form-row">
  164.                 <div class="col-lg-4">
  165.                     <div class="form-group py-0 form-phone">
  166.                         <input type="text" id="telephone" placeholder="Phone" class="form-control phone-input" name="user[phone]" required="" value="">
  167.                         <label class="form-label d-none">
  168.                             Phone
  169.                         </label>
  170.                     </div>
  171.                 </div>
  172.                 <div class="col-lg-4">
  173.                     <div class="form-group">
  174.                         <input type="text" placeholder=" " class="form-control" name="information[address]" value="">
  175.                         <label class="form-label">
  176.                             Address
  177.                         </label>
  178.                     </div>
  179.                 </div>
  180.                 <div class="col-lg-4">
  181.                     <div class="form-group">
  182.                         <input type="text" placeholder=" " class="form-control" name="information[postalCode]" value="">
  183.                         <label class="form-label">
  184.                             Postal code
  185.                         </label>
  186.                     </div>
  187.                 </div>
  188.             </div>
  189.             <div class="form-row">
  190.                 <div class="col-lg-4">
  191.                     <div class="form-group">
  192.                         <input type="text" placeholder=" " class="form-control" name="information[city]" value="">
  193.                         <label class="form-label">
  194.                             City
  195.                         </label>
  196.                     </div>
  197.                 </div>
  198.                  <div class="col-lg-4">
  199.                   <div class="form-group selectbox">
  200.                       <select class="form-control cursor" name="information[country]">
  201.                           <option val=""></option>
  202.                           {% for country in countries %}
  203.                               <option value="{{ country.id }}">{{ country.name }}</option>
  204.                           {% endfor %}
  205.                       </select>
  206.                       <label class="form-label">
  207.                           Country of Residence
  208.                       </label>
  209.                   </div>
  210.               </div>
  211.             </div>
  212.             <div class="form-row">
  213.                 <div class="col">
  214.                     <div class="custom-control custom-checkbox mt-1">
  215.                         <input type="hidden" name="isHandicap" value="0"><input type="checkbox" class="custom-control-input showIfChecked" id="isHandicap-1" name="isHandicap" value="1" onclick="this.previousSibling.value=1-this.previousSibling.value">
  216.                         <label class="custom-control-label" for="isHandicap-1">Do you have any physical or mental challenges?</label>
  217.                         <div class="showIfCheckedContent mt-2">
  218.                             <div class="form-group">
  219.                                 <textarea placeholder=" " class="form-control textarea" name="handicapInfo"></textarea>
  220.                                 <label class="form-label">
  221.                                     Specify the adjustments necessary for the proper monitoring of your education *
  222.                                 </label>
  223.                             </div>
  224.                             <div class="group-item mb-3 field-upload">
  225.                                 <input type="file" class="form-control uploader-required" id="fileHandicap" name="fileHandicap"/>
  226.                                 <label class="d-inline-flex flex-column" for="fileHandicap">
  227.                                     <div class="d-flex align-items-start cursor">
  228.                                         <div class="upload-btn cloud-btn px-3">
  229.                                             <i class="fas fa-cloud-arrow-up"></i>
  230.                                         </div>
  231.                                         <div class="ml-3 mt-1">
  232.                                             <span class="text-dark-purple font-weight-500">
  233.                                                 Your disability certificate, if applicable
  234.                                                 <span class="text-red"></span>
  235.                                             </span>
  236.                                         </div>
  237.                                     </div>
  238.                                 </label>
  239.                                 <span class="file-desc flex-1 d-flex align-items-start mt-n2 ">
  240.                                     <i class="fa-solid fa-paperclip-vertical text-orange mr-2 mt-1"></i>
  241.                                     <span class="upload-file-name"></span>
  242.                                     <i class="far fa-xmark ml-3 cursor uploader-clear text-red mt-1"></i>
  243.                                 </span>
  244.                             </div>
  245.                         </div>
  246.                     </div>
  247.                 </div>
  248.             </div>
  249.             <div class="mt-3">
  250.                 <div class="font-20 text-purple font-weight-bold mb-3">
  251.                   What material do I need to study?
  252.                 </div>
  253.                 <p class="text-orange mb-1">
  254.                   <i>For IT programs</i>
  255.                 </p>
  256.                 <p>
  257.                     Regardless of which class you join next year, you will need a laptop and a smartphone with the following minimum specifications:
  258.                 </p>
  259.                 <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>
  260.                     Minimum laptop specifications:
  261.                 </div>
  262.                 <ul class="list-unstyled mb-3 ml-4">
  263.                     <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>
  264.                         Core i7 or i9 processor (12th generation),
  265.                     </li>
  266.                     <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>
  267.                         RAM 16 GB minimum,
  268.                     </li>
  269.                     <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>
  270.                         Graphics card with 6 GB of memory,
  271.                     </li>
  272.                     <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>
  273.                         Webcam and microphone,
  274.                     </li>
  275.                     <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>
  276.                         Minimum 1TB hard drive,
  277.                     </li>
  278.                     <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>
  279.                         For Apple computers, use a Windows 11 emulator.
  280.                     </li>
  281.                 </ul>
  282.                 <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>
  283.                     Minimum specifications of the student's personal smartphone:
  284.                 </div>
  285.                 <ul class="list-unstyled mb-3 ml-4">
  286.                     <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>
  287.                         Android 13 or later phone (with camera) or Apple iPhone with iOS 15 or later. With internet connectivity.
  288.                     </li>
  289.                 </ul>
  290.                 <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>
  291.                     Minimum characteristics of the student's personal Internet connection (ADSL, Fiber optic or 4G):
  292.                 </div>
  293.                 <ul class="list-unstyled ml-4">
  294.                     <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>
  295.                         1 Mbps upload speed
  296.                     </li>
  297.                     <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>
  298.                         7 Mbps minimum download speed
  299.                     </li>
  300.                 </ul>
  301.             </div>
  302.             {# end step 1 #}
  304.             {# STEP 2 #}
  305.             <div class="section-title text-left mb-4 d-flex align-items-center pt-4">
  306.                 <span class="mr-2">
  307.                   <img src="/assets/images/landing/s-2.png" height="39" alt="Education background" />
  308.                 </span>
  309.                 <span class="text-nowrap">Education background</span>
  310.             </div>
  311.             <div class="form-row">
  312.                 <div class="col-lg-4">
  313.                     <div class="form-group selectbox ">
  314.                         <select class="form-control cursor" name="studyLevel">
  315.                             <option val=""></option>
  316.                             {% for level in studyLevels %}
  317.                                 <option value="{{ level.id }}">{{ level.name }}</option>
  318.                             {% endfor %}
  319.                         </select>
  320.                         <label class="form-label">Current level of study</label>
  321.                     </div>
  322.                 </div>
  323.                 <div class="col-lg-8">
  324.                     <div class="form-group">
  325.                         <input type="text" placeholder=" " class="form-control" name="information[previousSchool]" value="">
  326.                         <label class="form-label">Last establishment attended</label>
  327.                     </div>
  328.                 </div>
  329.             </div>
  330.             <div class="form-row">
  331.                 <div class="col-lg-4">
  332.                     <div class="form-group">
  333.                         <input type="text" placeholder=" " class="form-control" name="information[previousDegree]" value="">
  334.                         <label class="form-label">Last diploma obtained</label>
  335.                     </div>
  336.                 </div>
  337.                 <div class="col-lg-4">
  338.                     <div class="form-group">
  339.                         <input type="text" placeholder=" " class="form-control" name="information[previousDegreeYear]" value="">
  340.                         <label class="form-label">School year</label>
  341.                     </div>
  342.                 </div>
  343.                 <div class="col-lg-4">
  344.                     <div class="form-group">
  345.                         <input type="text" placeholder=" " class="form-control" name="information[previousDegreeDescription]" value="">
  346.                         <label class="form-label">Specify your specialization</label>
  347.                     </div>
  348.                 </div>
  349.             </div>
  350.             <div class="form-row">
  351.                 <div class="col-lg-4">
  352.                     <div class="form-group">
  353.                         <input type="text" placeholder=" " class="form-control" name="information[currentDegree]" value="">
  354.                         <label class="form-label">Diploma in progress</label>
  355.                     </div>
  356.                 </div>
  357.                 <div class="col-lg-4">
  358.                     <div class="form-group">
  359.                         <input type="text" placeholder=" " class="form-control" name="information[currentDegreeYear]" value="">
  360.                         <label class="form-label">School year</label>
  361.                     </div>
  362.                 </div>
  363.                 <div class="col-lg-4">
  364.                     <div class="form-group">
  365.                         <input type="text" placeholder=" " class="form-control" name="information[currentDegreeDescription]" value="">
  366.                         <label class="form-label">Specify your specialization</label>
  367.                     </div>
  368.                 </div>
  369.             </div>
  370.             {# end step 2 #}
  372.             {# STEP 3 #}
  373.             <div class="section-title text-left mb-4 d-flex align-items-center pt-4">
  374.                 <span class="mr-2">
  375.                   <img src="/assets/images/landing/s-3.png" height="39" alt="CV & Cover Letter" />
  376.                 </span>
  377.                 <span class="text-nowrap ">CV & Cover Letter</span>
  378.             </div>
  379.             <div class="group-item mb-3 field-upload">
  380.                 <input type="file" class="form-control uploader-required" id="fileCv" name="fileCv" />
  381.                 <label class="d-inline-flex flex-column" for="fileCv">
  382.                     <div class="d-flex align-items-start cursor">
  383.                         <div class="upload-btn cloud-btn px-3">
  384.                             <i class="fas fa-cloud-arrow-up"></i>
  385.                         </div>
  386.                         <div class="ml-3 mt-1">
  387.                             <span class="text-dark-purple font-weight-500">
  388.                                 Resume
  389.                                 <span class="text-red"></span>
  390.                             </span>
  391.                         </div>
  392.                     </div>
  393.                 </label>
  394.                 <span class="file-desc flex-1 d-flex align-items-start mt-n2 ">
  395.                     <i class="fa-solid fa-paperclip-vertical text-orange mr-2 mt-1"></i>
  396.                     <span class="upload-file-name"></span>
  397.                     <i class="far fa-xmark ml-3 cursor uploader-clear text-red mt-1"></i>
  398.                 </span>
  399.             </div>
  400.             <div class="group-item mb-3 field-upload">
  401.                 <input type="file" class="form-control uploader-required" id="fileLetter" name="fileLetter"/>
  402.                 <label class="d-inline-flex flex-column" for="fileLetter">
  403.                     <div class="d-flex align-items-start cursor">
  404.                         <div class="upload-btn cloud-btn px-3">
  405.                             <i class="fas fa-cloud-arrow-up"></i>
  406.                         </div>
  407.                         <div class="ml-3 mt-1">
  408.                             <span class="text-dark-purple font-weight-500">
  409.                                 Cover letter
  410.                                 <span class="text-red"></span>
  411.                             </span>
  412.                         </div>
  413.                     </div>
  414.                 </label>
  415.                 <span class="file-desc flex-1 d-flex align-items-start mt-n2 ">
  416.                     <i class="fa-solid fa-paperclip-vertical text-orange mr-2 mt-1"></i>
  417.                     <span class="upload-file-name"></span>
  418.                     <i class="far fa-xmark ml-3 cursor uploader-clear text-red mt-1"></i>
  419.                 </span>
  420.             </div>
  421.             <div class="row">
  422.               <div class="col-lg-6">
  423.                 <div class="form-group">
  424.                     <textarea placeholder=" " class="form-control textarea long-label" name="motivation"></textarea>
  425.                     <label class="form-label">Can you describe your motivation for joining one of ÉSTIAM’s courses?</label>
  426.                 </div>
  427.               </div>
  428.               <div class="col-lg-6">
  429.                 <div class="form-group">
  430.                     <textarea placeholder=" " class="form-control textarea" name="admissionMessage"></textarea>
  431.                     <label class="form-label">Message to the admissions department</label>
  432.                 </div>
  433.               </div>
  434.             </div>
  435.             {# end step 3 #}
  437.             {# STEP 4 #}
  438.             <div class="section-title text-left d-flex align-items-center mb-4 pt-4">
  439.               <span class="mr-2">
  440.                 <img src="/assets/images/landing/s-4.png" height="39" alt="Documents to be attached to the file" />
  441.               </span>
  442.               <span>Documents to be attached to the file</span>
  443.             </div>
  444.             <div class="font-weight-bold text-purple mb-2">Last three report cards</div>
  445.             <div class="group-item mb-3 field-upload">
  446.                 <input type="file" class="form-control uploader-required" id="fileReportCard1" name="fileReportCard1"/>
  447.                 <label class="d-inline-flex flex-column" for="fileReportCard1">
  448.                     <div class="d-flex align-items-start cursor">
  449.                         <div class="upload-btn cloud-btn px-3">
  450.                             <i class="fas fa-cloud-arrow-up"></i>
  451.                         </div>
  452.                         <div class="ml-3 mt-1">
  453.                             <span class="text-dark-purple font-weight-500">
  454.                                 Bulletin 1
  455.                                 <span class="text-red"></span>
  456.                             </span>
  457.                         </div>
  458.                     </div>
  459.                 </label>
  460.                 <span class="file-desc flex-1 d-flex align-items-start mt-n2 ">
  461.                     <i class="fa-solid fa-paperclip-vertical text-orange mr-2 mt-1"></i>
  462.                     <span class="upload-file-name"></span>
  463.                     <i class="far fa-xmark ml-3 cursor uploader-clear text-red mt-1"></i>
  464.                 </span>
  465.             </div>
  466.             <div class="group-item mb-3 field-upload">
  467.                 <input type="file" class="form-control uploader-required" id="fileReportCard2" name="fileReportCard2"/>
  468.                 <label class="d-inline-flex flex-column" for="fileReportCard2">
  469.                     <div class="d-flex align-items-start cursor">
  470.                         <div class="upload-btn cloud-btn px-3">
  471.                             <i class="fas fa-cloud-arrow-up"></i>
  472.                         </div>
  473.                         <div class="ml-3 mt-1">
  474.                             <span class="text-dark-purple font-weight-500">
  475.                                 Bulletin 2
  476.                                 <span class="text-red"></span>
  477.                             </span>
  478.                         </div>
  479.                     </div>
  480.                 </label>
  481.                 <span class="file-desc flex-1 d-flex align-items-start mt-n2 ">
  482.                     <i class="fa-solid fa-paperclip-vertical text-orange mr-2 mt-1"></i>
  483.                     <span class="upload-file-name"></span>
  484.                     <i class="far fa-xmark ml-3 cursor uploader-clear text-red mt-1"></i>
  485.                 </span>
  486.             </div>
  487.             <div class="group-item mb-3 field-upload">
  488.                 <input type="file" class="form-control uploader-required" id="fileReportCard3" name="fileReportCard3"/>
  489.                 <label class="d-inline-flex flex-column" for="fileReportCard3">
  490.                     <div class="d-flex align-items-start cursor">
  491.                         <div class="upload-btn cloud-btn px-3">
  492.                             <i class="fas fa-cloud-arrow-up"></i>
  493.                         </div>
  494.                         <div class="ml-3 mt-1">
  495.                             <span class="text-dark-purple font-weight-500">
  496.                                 Bulletin 3
  497.                                 <span class="text-red"></span>
  498.                             </span>
  499.                         </div>
  500.                     </div>
  501.                 </label>
  502.                 <span class="file-desc flex-1 d-flex align-items-start mt-n2 ">
  503.                     <i class="fa-solid fa-paperclip-vertical text-orange mr-2 mt-1"></i>
  504.                     <span class="upload-file-name"></span>
  505.                     <i class="far fa-xmark ml-3 cursor uploader-clear text-red mt-1"></i>
  506.                 </span>
  507.             </div>
  508.             <div class="group-item mb-3 field-upload">
  509.                 <input type="file" class="form-control uploader-required" id="fileDiplome" name="fileDiplome"/>
  510.                 <label class="d-inline-flex flex-column" for="fileDiplome">
  511.                     <div class="d-flex align-items-start cursor">
  512.                         <div class="upload-btn cloud-btn px-3">
  513.                             <i class="fas fa-cloud-arrow-up"></i>
  514.                         </div>
  515.                         <div class="ml-3 mt-1">
  516.                             <span class="text-dark-purple font-weight-500">
  517.                                 Last diploma obtained
  518.                                 <span class="text-red"></span>
  519.                             </span>
  520.                         </div>
  521.                     </div>
  522.                 </label>
  523.                 <span class="file-desc flex-1 d-flex align-items-start mt-n2 ">
  524.                     <i class="fa-solid fa-paperclip-vertical text-orange mr-2 mt-1"></i>
  525.                     <span class="upload-file-name"></span>
  526.                     <i class="far fa-xmark ml-3 cursor uploader-clear text-red mt-1"></i>
  527.                 </span>
  528.             </div>
  529.             <div class="form-row">
  530.                 <div class="col-xl-7 col-lg-8">
  531.                     <div class="group-item mb-3 field-upload">
  532.                         <input type="file" class="form-control uploader-required" id="fileIdentity" name="fileIdentity"/>
  533.                         <label class="d-inline-flex flex-column" for="fileIdentity">
  534.                             <div class="d-flex align-items-start cursor">
  535.                                 <div class="upload-btn cloud-btn px-3">
  536.                                     <i class="fas fa-cloud-arrow-up"></i>
  537.                                 </div>
  538.                                 <div class="ml-3 mt-1">
  539.                                     <span class="text-dark-purple font-weight-500">
  540.                                         Your identity document
  541.                                         <span class="text-red"></span>
  542.                                     </span>
  543.                                     (passport, national identity card)
  544.                                 </div>
  545.                             </div>
  546.                         </label>
  547.                         <span class="file-desc flex-1 d-flex align-items-start mt-n2 ">
  548.                             <i class="fa-solid fa-paperclip-vertical text-orange mr-2 mt-1"></i>
  549.                             <span class="upload-file-name"></span>
  550.                             <i class="far fa-xmark ml-3 cursor uploader-clear text-red mt-1"></i>
  551.                         </span>
  552.                     </div>
  553.                 </div>
  554.                 <div class="col-xl-5 col-lg-4">
  555.                     <div class="form-group date-picker-en">
  556.                         <input type="text" placeholder=" " class="form-control" name="expireIdentity" value="" minDate="-10Y">
  557.                         <label class="form-label">Expiration date of the identity document</label>
  558.                     </div>
  559.                 </div>
  560.             </div>
  561.             <div class="form-row">
  562.                 <div class="col-xl-7 col-lg-8">
  563.                     <div class="group-item mb-3 field-upload">
  564.                         <input type="file" class="form-control uploader-required" id="fileResidencePermit" name="fileResidencePermit"/>
  565.                         <label class="d-inline-flex flex-column" for="fileResidencePermit">
  566.                             <div class="d-flex align-items-start cursor">
  567.                                 <div class="upload-btn cloud-btn px-3">
  568.                                     <i class="fas fa-cloud-arrow-up"></i>
  569.                                 </div>
  570.                                 <div class="ml-3 mt-1">
  571.                                     <span class="text-dark-purple font-weight-500">
  572.                                         Your residence permit
  573.                                         <span class="text-red"></span>
  574.                                     </span>
  575.                                     (non-EU nationalities only)
  576.                                     <br><i><small class="d-block line-height-normal">(If you don't have it yet, we will provide you with a registration certificate to present to Campus France after submitting your application.)</small></i>
  577.                                 </div>
  578.                             </div>
  579.                         </label>
  580.                         <span class="file-desc flex-1 d-flex align-items-start mt-n2 ">
  581.                             <i class="fa-solid fa-paperclip-vertical text-orange mr-2 mt-1"></i>
  582.                             <span class="upload-file-name"></span>
  583.                             <i class="far fa-xmark ml-3 cursor uploader-clear text-red mt-1"></i>
  584.                         </span>
  585.                     </div>
  586.                 </div>
  587.                 <div class="col-xl-5 col-lg-4">
  588.                     <div class="form-group date-picker-en">
  589.                         <input type="text" placeholder=" " class="form-control" name="expireResidencePermit" value="" minDate="-10Y">
  590.                         <label class="form-label">Expiration date of the identity document</label>
  591.                     </div>
  592.                 </div>
  593.             </div>
  594.             <div class="group-item mb-3 field-upload">
  595.                 <input type="file" class="form-control uploader-required" id="user[media]" name="media"/>
  596.                 <label class="d-inline-flex flex-column" for="user[media]">
  597.                     <div class="d-flex align-items-start cursor">
  598.                         <div class="upload-btn cloud-btn px-3">
  599.                             <i class="fas fa-cloud-arrow-up"></i>
  600.                         </div>
  601.                         <div class="ml-3 mt-1">
  602.                             <span class="text-dark-purple font-weight-500">
  603.                                 Your passport photo
  604.                                 <span class="text-red"></span>
  605.                             </span>
  606.                         </div>
  607.                     </div>
  608.                 </label>
  609.                 <span class="file-desc flex-1 d-flex align-items-start mt-n2 ">
  610.                     <i class="fa-solid fa-paperclip-vertical text-orange mr-2 mt-1"></i>
  611.                     <span class="upload-file-name"></span>
  612.                     <i class="far fa-xmark ml-3 cursor uploader-clear text-red mt-1"></i>
  613.                 </span>
  614.             </div>
  615.             {# end step 4 #}
  616.             {% if captcha_enabled %}
  617.                 <div class="captcha-row mb-4 d-flex justify-content-center">
  618.                     <div class="g-recaptcha animate__animated" data-sitekey="{{ captcha_key }}"></div>
  619.                 </div>
  620.             {% endif %}
  621.             <div class="notification-error mb-4 text-center text-danger font-weight-bold" style="display: none;"></div>
  623.             <div class="d-flex justify-content-center form-submit mt-5">
  624.                 <input type="hidden" value="{{ landing.id }}" name="landingpage">
  625.                 <input type="hidden" value="1" name="isAgent">
  626.                 <input type="hidden" value="{{ year }}" name="year">
  627.                 <button type="submit" id="btn-submit" class="link-gradient d-block d-lg-inline-block">
  628.                     <span>SEND</span><i class="far fa-arrow-right"></i>
  629.                 </button>
  630.             </div>
  631.           </div>
  632.         </div>
  633.       </div>
  634.     </div>
  635.   </form>
  636. </section>
  638. <div class="modal fade" id="thankYouModal" tabindex="-1" role="dialog" aria-labelledby="thankYouModalTitle" aria-hidden="true">
  639.   <div class="modal-dialog modal-dialog-centered" role="document">
  640.     <div class="modal-content">
  641.       <div class="modal-header">
  642.         <a href="{{ path('home') }}">
  643.           <img src="{{ asset('assets/images/logo.svg') }}" alt="Estiam France">
  644.         </a>
  645.       </div>
  646.       <div class="modal-body">
  647.         <div class="text-center mb-4">
  648.             Your registration has been successfully completed.<br/>
  649.             Thank you!<br/>
  650.             The Éstiam team
  651.         </div>
  652.         <div class="text-center">
  653.           <button type="button" class="common-btn" data-dismiss="modal">Close</button>
  654.         </div>
  655.       </div>
  656.     </div>
  657.   </div>
  658. </div>
  660. {% endblock %}
  661. {% block custom_javascripts %}
  662. <script src="{{ asset('assets/js/intlTelInput.min.js') }}"></script>
  663. <script src="{{ asset('assets/js/qrcode.min.js') }}"></script>
  664. <script type="text/javascript">
  665. $(document).ready(function(){
  666.   const input = document.querySelector("#telephone");
  667.   window.intlTelInput(input, {
  668.     nationalMode: false,
  669.     separateDialCode: true,
  670.     initialCountry: "auto",
  671.     preferredCountries: [],
  672.     geoIpLookup: function (success, failure) {
  673.         $.get("https://ipinfo.io", function () {}, "jsonp").always(
  674.             function (resp) {
  675.                 var countryCode =
  676.                     resp && resp.country ? resp.country : "vn";
  677.                 success(countryCode);
  678.             }
  679.         );
  680.     },
  681.   });
  683.   $(".phone-input").on("keypress", function (e) {
  684.       var input_key_code = e.which ? e.which : e.keyCode;
  686.       if (!(input_key_code >= 48 && input_key_code <= 57)) {
  687.           return false;
  688.       }
  689.   });
  691.     $('[name="campus1"]').change(function () {
  692.         var campus = $(this).val();
  693.         $('#programsByCampus').html('');
  695.         if(campus != '') {
  696.             $('#programsByCampus').removeClass('active');
  697.             $.ajax({
  698.                 url: '{{ path('programs_by_campus') }}?campus='+campus,
  699.                 type: 'GET',
  700.                 success: function(data) {
  701.                     console.log(data);
  702.                     if(data.data.html) {
  703.                         $('.preferred-program').show();
  704.                         $('#programsByCampus').append(data.data.html);
  705.                         $('#programsByCampus').prop('disabled', false);
  706.                     } else {
  707.                         console.error('No programs found for this campus');
  708.                     }
  709.                 },
  710.                 error: function() {
  711.                     console.error('Error fetching programs');
  712.                 }
  713.             });
  715.         } else {
  716.             $('.preferred-program').hide();
  717.             $('.selectbox').removeClass('focused');
  718.             $('[name="campus1"]').removeClass('active');
  719.         }
  720.     });
  722.     $('#form-landing-page-agent').on('submit', function (e) {
  723.         e.preventDefault();
  724.         
  725.         let $button = $(this).find('#btn-submit');
  726.         loadButton($button);
  728.         {% if captcha_enabled %}
  729.             if (grecaptcha.getResponse().length == 0) {
  730.                 showMessage('Please complete the captcha.');
  731.                 return false;
  732.             }
  733.         {% endif %}
  734.         
  735.         let formData = new FormData(this);
  737.         var phoneCode = $('.iti__selected-dial-code').text();
  738.         if( phoneCode){
  739.             formData.set('user[phone]', phoneCode + ' ' + $('#telephone').val());
  740.         }
  742.         $.ajax({
  743.             url: "{{ path('landingpage_agent.save') }}",
  744.             type: "POST",
  745.             dataType: 'json',
  746.             data : formData,
  747.             contentType: false,
  748.             processData: false,
  749.             success: function(result) {
  750.             if(result.status == 'success'){
  751.                 resetForm();
  752.                 $('#thankYouModal').modal();
  753.                 removeLoadButton($button);
  754.             }else{
  755.                 if(result.errors.errorMessage){
  756.                     showMessage('The email you entered is already registered.');
  757.                 }else{
  758.                     showMessage(result.error);
  759.                 }
  760.             }
  761.             grecaptcha.reset();
  762.             },
  763.             error: function (response) {
  764.                 if(response.responseJSON.data.email){
  765.                     showMessage('The email you entered is already registered.');
  766.                 }else{
  767.                     showMessage(response.error);
  768.                 }
  769.             }
  770.         }).always(function () {
  771.             removeLoadButton($button)
  772.         });
  773.     });
  774. })
  776. function resetForm(){
  777.   $('#form-landing-page-agent').each(function(){
  778.     this.reset();
  779.   });
  780. }
  782. let qrcode = new QRCode(document.getElementById("qrcode"), {
  783.     width : 100,
  784.     height : 100
  785. });
  787. function makeCode () {        
  788.     let url = "{{ url('admission',{'slug':landing.slug}) }}";
  789.     if (url) {
  790.         qrcode.makeCode(url);
  791.     }
  792. }
  793. makeCode();
  794. </script>
  795. {% endblock %}