templates/front/inscriptions/inscription-certyou.html.twig line 1

Open in your IDE?
  1. {% extends 'front.html.twig' %}
  3. {% block title %}Certificats certificats internationaux II | {{slug }} | CIMEF-INTERNATIONAL{% endblock %}
  4. {% block styleSheets %}
  5. <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  6. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
  7. <script>
  8.      $(document).ready(function(){
  9.         //
  10.         var form_choix = $('#inscription_certyou_form_choix');
  11.         var choix = $('#choix');
  12.         var form_type = $('#inscription_certyou_form_types');
  13.         var type = $('#type');
  14.         var form_duree = $('#inscription_certyou_form_duree');
  15.         var duree = $('#duree');
  16.         var form_session = $('#inscription_certyou_form_session');
  17.         var session = $('#session');
  18.         var form_lieu = $('#inscription_certyou_form_lieu');
  19.         var lieu = $('#lieu');
  20.         var form_prixvirtuelle = $('#inscription_certyou_form_prixvirtuelle');
  21.         var virtuelle = $('#virtuelle');
  22.         var form_prixpresentiel = $('#inscription_certyou_form_prixpresentiel');
  23.         var presentiel = $('#presentiel');
  24.         var titre_info = $('#titre-info-perso');
  25.         var info = $('#info-perso');
  26.         var form_submit = $('#inscription_certyou_form_submit');
  27.         
  28.         choix.hide();
  29.         form_session.hide();
  30.         session.hide();
  31.         form_lieu.hide();
  32.         lieu.hide();
  33.         form_duree.hide();
  34.         duree.hide();
  35.         form_prixvirtuelle.hide();
  36.         virtuelle.hide();
  37.         form_prixpresentiel.hide();
  38.         presentiel.hide();
  39.         
  40.         info.hide();
  41.         titre_info.hide();
  42.         form_submit.hide();
  43.         
  44.       
  45.         /*function updateByType() {*/
  46.             if (form_choix.val() === 'virtuelle'){
  47.                 choix.hide();
  48.                 form_duree.show();
  49.                 duree.show();
  50.                 form_prixvirtuelle.show();
  51.                 virtuelle.show();
  52.                 
  53.                 form_session.show();
  54.                 session.show();
  55.                 
  56.                 form_type.hide();
  57.                 type.hide();
  58.                 form_prixpresentiel.hide();
  59.                 presentiel.hide();
  60.                 
  61.                 info.show();
  62.                 titre_info.show();
  63.                 form_submit.show();
  64.                 
  65.                 //alert(form_choix.val());
  66.             }else{
  67.                 //alert(form_choix.val());
  68.                 form_choix.hide();
  69.                 choix.hide();
  71.                 form_type.show();
  72.                 type.show();
  73.                 
  74.                 form_session.show();
  75.                 session.show();
  76.                 
  77.                 form_type.on('change', function () {
  78.                     var value = $(this).val();
  79.                     if (value === 'virtuelle') {
  81.                         duree.show();
  82.                         form_duree.show();
  83.                 
  84.                         lieu.hide();
  85.                         form_lieu.hide();
  86.                         
  87.                         info.show();
  88.                         titre_info.show();
  89.                         form_submit.show();
  90.                         
  91.                         form_session.show();
  92.                         session.show();
  93.                         
  94.                         virtuelle.show();
  95.                         form_prixvirtuelle.show();
  96.                         presentiel.hide();
  97.                         form_prixpresentiel.hide();
  98.                         
  99.                     } else if (value === 'presentiel') {
  100.                         duree.show();
  101.                         form_duree.show();
  102.                         
  103.                         lieu.show();
  104.                         form_lieu.show();
  105.                         
  106.                         info.show();
  107.                         titre_info.show();
  108.                         form_submit.show();
  109.                         
  110.                         form_session.show();
  111.                         session.show();
  112.                         
  113.                         virtuelle.hide();
  114.                         form_prixvirtuelle.hide();
  115.                         presentiel.show();
  116.                         form_prixpresentiel.show();
  117.                     } else if(value === ''){
  118.                         duree.hide();
  119.                         form_duree.hide();
  120.                         presentiel.hide();
  121.                         form_prixpresentiel.hide();
  122.                         virtuelle.hide();
  123.                         form_prixvirtuelle.hide();
  124.                         
  125.                         form_lieu.hide();
  126.                         lieu.hide();
  127.                         
  128.                         info.hide();
  129.                         titre_info.hide();
  130.                         form_submit.hide();
  131.                         
  132.                         form_session.hide();
  133.                         session.hide();
  134.                     }
  135.                 });
  136.       
  137.             }
  138.         /*}    
  139.         form_choix.on('change', updateByType);
  140.         form_type.on('change', updateByType);*/
  141.         
  142.         
  143.         if(form_type.val() === 'presentiel'){
  144.             info.show();
  145.             titre_info.show();
  146.             form_submit.show(); 
  147.         }else if(form_type.val() === 'virtuelle'){
  148.             info.show();
  149.             titre_info.show();
  150.             form_submit.show(); 
  151.         }else if(form_choix.val() === 'virtuelle'){
  152.             session.show();            
  153.             form_session.show();
  154.             
  155.             info.show();
  156.             titre_info.show();
  157.             form_submit.show();
  158.         } else{
  159.             lieu.hide();
  160.             form_lieu.hide();
  161.             info.hide();
  162.             titre_info.hide();
  163.             form_submit.hide(); 
  164.             form_session.hide();
  165.             session.hide();
  166.         }
  167.      });
  168. </script>
  169. <style id='wp-emoji-styles-inline-css' type='text/css'>
  170. span{
  171.     font-family: arial;
  172. }
  173. label{
  174.     font-family: arial;
  175. }
  176. .form-control{
  177.     width:100%;
  178.     height:45px;
  179.     padding:10px;
  180.     font-family: arial;
  181.     margin-bottom: 20px;
  182.     border:1px solid #ccc;
  183. }
  185. .events_pagination ul.pagination {
  186.     display: flex;
  187.     flex-wrap: wrap;
  188.     justify-content: center;
  189.     list-style: none;
  190.     margin: 0;
  191.     padding: 0;
  192. }
  193. .page-item.active .page-link {
  194.     background-color: #ff6600;
  195.     color: #fff;
  196. }
  197. .page-link {
  198.     margin: 10px;
  199.     color: #051a53;
  200.     background-color: #ededed;
  201.     border-radius: 5px;
  202.     padding: 10px;
  203.     /* margin: 0 3px; */
  204. }
  205. .titre-certificat{
  206.     color: #051a53;
  207.     font-family: arial !important;
  208.     font-size: 14px;
  209.     line-height: 1.3;
  210.     font-weight: bold;
  211. }
  212. .row {
  213.     display: flex;            /* flexbox pour aligner les colonnes */
  214.     flex-wrap: wrap;          /* les colonnes passent à la ligne si nécessaire */
  215.     margin-right: -0.75rem;   /* -gutter/2 */
  216.     margin-left: -0.75rem;    /* -gutter/2 */
  217. }
  218. .events_pagination ul.pagination {
  219.     display: flex;
  220.     flex-wrap: wrap;
  221.     justify-content: center;
  222.     list-style: none;
  223.     margin: 0;
  224.     padding: 0;
  225. }
  226. .page-item.active .page-link {
  227.     background-color: #ff6600;
  228.     color: #fff;
  229. }
  230. .page-link {
  231.     margin: 10px;
  232.     color: #051a53;
  233.     background-color: #ededed;
  234.     border-radius: 5px;
  235.     padding: 10px;
  236.     /* margin: 0 3px; */
  237. }
  239. .text-lien{
  240.    color: #ff6600;
  241.    /* font-size: 16px; */
  242. }
  243.   .header_title_1{font-weight: bolder !important;}
  244. /* Small devices ≥576px */
  245. @media (min-width: 576px) {
  246.   .col-3 { flex: 0 0 100%; max-width: 100%; }
  247.   .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  248.   .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  249.   .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  250.   .header_title_1{font-size: 18px}
  251. }
  253. /* Medium devices ≥768px */
  254. @media (min-width: 768px) {
  255.   .col-md-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  256.   .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  257.   .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  258.   .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  259. }
  261. /* Large devices ≥992px */
  262. @media (min-width: 992px) {
  263.   .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  264.   .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  265.   .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  266.   .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  267. }
  269. .type1 .date-event {
  270.     transition: all 0.5s ease;
  271.     position: absolute;
  272.     bottom: 20px;
  273.     left: 30px;
  274.     z-index: 1;
  275.     font-size: 12px;
  276.     color: #fff;
  277.     font-weight: 700;
  278.     text-transform: uppercase;
  279.     text-align: center;
  280.     line-height: 1.3;
  281.     letter-spacing: 1px;
  282.     background-color: #ff6600 !important;
  283.     padding: 12px;
  284. }
  285. .icon_event{
  286.     color: #ff6600 !important;
  287. }
  288. .wrap_header_banner .overlay-slider {
  289.     position: absolute;
  290.     top: 0;
  291.     left: 0;
  292.     padding-top: 30px; 
  293.     width: 100%;
  294.     height: 100%;
  295.     background-color: rgba(0, 0, 0, 0.6392156863);
  296. }
  297. @media (max-width:575px){
  298.   .header_title_1{
  299.     width:100%;
  300.     display:-webkit-box;
  301.     -webkit-line-clamp:3;
  302.     -webkit-box-orient:vertical;
  303.     overflow:hidden;
  304.   }
  305. }
  306. .header_title_1{
  307.   margin:0;
  308.   padding:0;
  309.   font-size:20px;
  310.   font-weight:bold;
  311.   line-height:1.2;
  312.   display:-webkit-box;
  313.   -webkit-line-clamp:3;
  314.   -webkit-box-orient:vertical;
  315.   overflow:hidden;
  316. }
  318. /* tablette */
  319. @media (min-width:768px){
  320.   .header_title_1{
  321.     font-size:32px;
  322.   }
  323. }
  325. /* desktop */
  326. @media (min-width:992px){
  327.   .header_title_1{
  328.     font-size:45px;
  329.   }
  330. }
  331. @media (max-width:575px){
  332.     .truncate {
  333.         width:100%;
  334.         display:-webkit-box;
  335.         -webkit-line-clamp:2;
  336.         -webkit-box-orient:vertical;
  337.         overflow:hidden;
  338.     }
  339.     .header_title_1 {
  340.         font-size: 20px !important;
  341.     }
  342. }
  343. </style>
  344. {% endblock %}
  345. {% block body %}
  346. {% include 'section/navbar.html.twig' %}
  347. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/table.jpeg')}});        
  348.         background-size: cover;
  349.         background-position: center;
  350.         background-repeat: no-repeat;">
  351.     <div class="overlay-slider">
  352.         <div class="row_site">
  353.             <div class="container_site">
  354.                 <div class="cover_color"></div>
  355.                 <div class="header_banner_el">
  356.                     <div class="header_breadcrumbs">
  357.                         <div id="breadcrumbs">
  358.                         <ul class="breadcrumb">
  359.                             <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  360.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  361.                             <li style="color: #fff!important;">Formations</a></li>
  362.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  363.                             <li style="color: #fff!important;">Certificats internationaux II</li>
  364.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  365.                             <li style="color: #fff!important;">Inscription</a></li>
  366.                         </ul>
  367.                         </div>
  368.                     </div> 
  369.                     <div class="truncate">
  370.                         <h1 class="header_title_1" style="color: #fff!important;">
  371.                             {{ theme }}
  372.                         </h1>
  373.                     </div> 
  374.                 </div>
  375.             </div>
  376.         </div>
  377.     </div>
  378. </div>
  380.     {% for message in app.flashes('success') %}
  381.     <div class="row toast_success" style="top: 100px !important; float: right !important; position: absolute;">
  382.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  383.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  384.         </div>
  385.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  386.             {{ message }}
  387.         </div>
  388.     </div>    
  389.     {% endfor %}
  390.     {% for message in app.flashes('warning') %}
  391.     <div class="row toast_warning" style="top: 100px !important; float: right !important; position: absolute;">
  392.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  393.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  394.         </div>
  395.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  396.             {{ message }}
  397.         </div>
  398.     </div>   
  399.     {% endfor %}
  400.     {% for message in app.flashes('danger') %}
  401.     <div class="row toast_danger" style="top: 100px !important; float: right !important; position: absolute;">
  402.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  403.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  404.         </div>
  405.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  406.             {{ message }}
  407.         </div>
  408.     </div>   
  409.     {% endfor %}
  411.     <div class="container-event">
  412.         <div id="sidebar-active" class="content-event">
  413.           <!-- search form -->
  414.        
  415.             {{ form_start(inscriptionCertyouForm, {attr: {style: 'background-color: #fff !important;'} }) }}
  416.                 <div style="margin-bottom: 10px;">
  417.                     <label style="font-size: 20px; font-weight: bold; font-family: arial; color: #ff6600;">Certificats internationaux II</label>
  418.                 </div>
  419.             
  420.                 <div class="row" style="border: 1px solid #c4c4c4; width: auto !important; padding: 20px !important; ">
  421.                     <div class="col-lg-12 col-md-12 col-sm-12" id="choix">
  422.                         {{ form_row(inscriptionCertyouForm.choix,{'value': certyou.type}) }}
  423.                     </div>
  424.                     <div class="col-lg-12 col-md-12 col-sm-12" id="type">
  425.                         {{ form_row(inscriptionCertyouForm.types) }}
  426.                     </div>
  427.                     <div class="col-lg-6 col-md-6 col-sm-12" id="duree" style="padding: 5px !important; width: 100% !important;">
  428.                         {{ form_row(inscriptionCertyouForm.duree,{'value': certyou.duree}) }}
  429.                     </div>
  430.                     <div class="col-lg-6 col-md-6 col-sm-12" id="lieu" style="padding: 5px !important; width: 100% !important;">
  431.                         {{ form_row(inscriptionCertyouForm.lieu) }}
  432.                     </div>
  433.                     <div class="col-lg-6 col-md-6 col-sm-12" id="session" style="padding: 5px !important; width: 100% !important;">
  434.                         {{ form_row(inscriptionCertyouForm.session) }}
  435.                     </div>
  436.                     <div class="col-lg-12 col-md-12 col-sm-12" id="virtuelle" style="padding: 5px !important; width: 100% !important;">
  437.                         {{ form_row(inscriptionCertyouForm.prixvirtuelle,{'value': certyou.prixvirtuelle~ ' ' ~ certyou.devise}) }}
  438.                     </div>
  439.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel">
  440.                         {{ form_row(inscriptionCertyouForm.prixpresentiel,{'value': certyou.prixpresentiel~ ' ' ~ certyou.devise}) }}
  441.                     </div>
  442.                 </div>
  443.                 
  444.                 <div id="info-perso" class="row" style="margin-bottom: 10px; border: 1px solid #c4c4c4; width: auto !important; padding: 20px !important;">
  445.                     <div class="col-lg-12 col-md-12 col-sm-12">
  446.                         {{ form_row(inscriptionCertyouForm.civilite) }}
  447.                     </div>
  448.                     <div class="col-lg-6 col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  449.                         {{ form_row(inscriptionCertyouForm.nom) }}
  450.                     </div>
  451.                     <div class="col-lg-6 col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  452.                         {{ form_row(inscriptionCertyouForm.prenoms) }}
  453.                     </div>
  454.                     <div class="col-lg-6 col-md-6 col-sm-12" style="padding: 5px !important; width: 100% !important;">
  455.                         {{ form_row(inscriptionCertyouForm.fonction) }}
  456.                     </div>
  457.                     <div class="col-lg-6 col-md-6 col-sm-12" id="virtuelle" style="padding: 5px !important; width: 100% !important;">
  458.                         {{ form_row(inscriptionCertyouForm.telephone) }}
  459.                     </div>
  460.                     <div class="col-lg-12 col-md-12 col-sm-12" id="presentiel" style="padding: 5px !important; width: 100% !important;">
  461.                         {{ form_row(inscriptionCertyouForm.mail) }}
  462.                     </div>
  463.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding: 5px !important; width: 100% !important;">
  464.                         {{ form_row(inscriptionCertyouForm.entreprise) }}
  465.                     </div>
  466.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding: 5px !important; width: 100% !important;">
  467.                         {{ form_row(inscriptionCertyouForm.nbparticipant) }}
  468.                     </div>
  469.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding: 5px !important; width: 100% !important;">
  470.                         {{ form_row(inscriptionCertyouForm.siteweb) }}
  471.                     </div>
  472.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding: 5px !important; width: 100% !important;">
  473.                         {{ form_row(inscriptionCertyouForm.pays) }}
  474.                     </div>
  475.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding: 5px !important; width: 100% !important;">
  476.                         {{ form_row(inscriptionCertyouForm.ville) }}
  477.                     </div>
  478.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding: 5px !important; width: 100% !important;">
  479.                         {{ form_row(inscriptionCertyouForm.boitepostale) }}
  480.                     </div>
  481.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding: 5px !important; width: 100% !important;">
  482.                         {{ form_row(inscriptionCertyouForm.whatsapp) }}
  483.                     </div>
  484.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding: 5px !important; width: 100% !important;">
  485.                         {{ form_row(inscriptionCertyouForm.adresse) }}
  486.                     </div>
  487.                     <div class="col-lg-12 col-md-12 col-sm-12" id="presentiel">
  488.                         {{ form_row(inscriptionCertyouForm.commentaire, {attr: {style: 'height: 100px !important;'} }) }}
  489.                     </div>
  490.                     {{ form_row(inscriptionCertyouForm.recaptchaToken) }}
  491.                 </div>
  492.                 <script>
  493.                     grecaptcha.ready(function() {
  494.                         grecaptcha.execute('{{ recaptcha_site_key }}', {
  495.                             action: 'contact'
  496.                         }).then(function(token) {
  497.                             document.getElementById('{{ inscriptionCertyouForm.recaptchaToken.vars.id }}').value = token;
  498.                         });
  499.                     });
  500.                 </script>                
  501.             {{ form_end(inscriptionCertyouForm) }}
  502.     
  503.         </div>
  504.     
  505.        {% include 'section/aside.html.twig' %}
  506.     
  507.     </div>
  508.     {% include 'section/footer.html.twig' %}
  511. {% endblock %}