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

Open in your IDE?
  1. {% extends 'front.html.twig' %}
  3. {% block title %}Certificats personnalisés | {{slug }} | CIMEF-INTERNATIONAL{% endblock %}
  4. {% block styleSheets %}
  5. <script src="https://code.jquery.com/jquery-3.7.1.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. }
  184. .events_pagination ul.pagination {
  185.     display: flex;
  186.     flex-wrap: wrap;
  187.     justify-content: center;
  188.     list-style: none;
  189.     margin: 0;
  190.     padding: 0;
  191. }
  192. .page-item.active .page-link {
  193.     background-color: #ff6600;
  194.     color: #fff;
  195. }
  196. .page-link {
  197.     margin: 10px;
  198.     color: #051a53;
  199.     background-color: #ededed;
  200.     border-radius: 5px;
  201.     padding: 10px;
  202.     /* margin: 0 3px; */
  203. }
  204. .titre-certificat{
  205.     color: #051a53;
  206.     font-family: arial !important;
  207.     font-size: 14px;
  208.     line-height: 1.3;
  209.     font-weight: bold;
  210. }
  211. .row {
  212.     display: flex;            /* flexbox pour aligner les colonnes */
  213.     flex-wrap: wrap;          /* les colonnes passent à la ligne si nécessaire */
  214.     margin-right: -0.75rem;   /* -gutter/2 */
  215.     margin-left: -0.75rem;    /* -gutter/2 */
  216. }
  217. .events_pagination ul.pagination {
  218.     display: flex;
  219.     flex-wrap: wrap;
  220.     justify-content: center;
  221.     list-style: none;
  222.     margin: 0;
  223.     padding: 0;
  224. }
  225. .page-item.active .page-link {
  226.     background-color: #ff6600;
  227.     color: #fff;
  228. }
  229. .page-link {
  230.     margin: 10px;
  231.     color: #051a53;
  232.     background-color: #ededed;
  233.     border-radius: 5px;
  234.     padding: 10px;
  235.     /* margin: 0 3px; */
  236. }
  238. .text-lien{
  239.    color: #ff6600;
  240.    /* font-size: 16px; */
  241. }
  243. /* Small devices ≥576px */
  244. @media (min-width: 576px) {
  245.   .col-3 { flex: 0 0 100%; max-width: 100%; }
  246.   .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  247.   .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  248.   .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  249. }
  251. /* Medium devices ≥768px */
  252. @media (min-width: 768px) {
  253.   .col-md-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  254.   .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  255.   .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  256.   .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  257. }
  259. /* Large devices ≥992px */
  260. @media (min-width: 992px) {
  261.   .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  262.   .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  263.   .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  264.   .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  265. }
  267. .type1 .date-event {
  268.     transition: all 0.5s ease;
  269.     position: absolute;
  270.     bottom: 20px;
  271.     left: 30px;
  272.     z-index: 1;
  273.     font-size: 12px;
  274.     color: #fff;
  275.     font-weight: 700;
  276.     text-transform: uppercase;
  277.     text-align: center;
  278.     line-height: 1.3;
  279.     letter-spacing: 1px;
  280.     background-color: #ff6600 !important;
  281.     padding: 12px;
  282. }
  283. .icon_event{
  284.     color: #ff6600 !important;
  285. }
  286. .wrap_header_banner .overlay-slider {
  287.     position: absolute;
  288.     top: 0;
  289.     left: 0;
  290.     padding-top: 30px; 
  291.     width: 100%;
  292.     height: 100%;
  293.     background-color: rgba(0, 0, 0, 0.6392156863);
  294. }
  295. </style>
  296. {% endblock %}
  297. {% block body %}
  298. {% include 'section/navbar.html.twig' %}
  299. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/wp-content/uploads/2023/06/header-banner.jpg')}});">
  300.     <div class="overlay-slider">
  301.         <div class="row_site">
  302.             <div class="container_site">
  303.                 <div class="cover_color"></div>
  304.                 <div class="header_banner_el">
  305.                     <div class="header_breadcrumbs">
  306.                         <div id="breadcrumbs">
  307.                         <ul class="breadcrumb">
  308.                             <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  309.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  310.                             <li style="color: #fff!important;">Certificats certyou</li>
  311.                         </ul>
  312.                         </div>
  313.                     </div>
  314.                     <h1 class="header_title" style="color: #fff!important; text-transform: lowercase !important;">{{ slug|replace({'-': ' '}) }}</h1>
  315.                 </div>
  316.             </div>
  317.         </div>
  318.     </div>
  319. </div>
  321.     {% for message in app.flashes('success') %}
  322.     <div class="row toast_success" style="top: 100px !important; float: right !important; position: absolute;">
  323.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  324.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  325.         </div>
  326.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  327.             {{ message }}
  328.         </div>
  329.     </div>    
  330.     {% endfor %}
  331.     {% for message in app.flashes('warning') %}
  332.     <div class="row toast_warning" style="top: 100px !important; float: right !important; position: absolute;">
  333.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  334.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  335.         </div>
  336.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  337.             {{ message }}
  338.         </div>
  339.     </div>   
  340.     {% endfor %}
  341.     {% for message in app.flashes('danger') %}
  342.     <div class="row toast_danger" style="top: 100px !important; float: right !important; position: absolute;">
  343.         <div class="col-md-2 col-sm-2" style="padding: 10px;">
  344.             <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  345.         </div>
  346.         <div class="col-md-10 col-sm-10" style="padding: 10px;">
  347.             {{ message }}
  348.         </div>
  349.     </div>   
  350.     {% endfor %}
  352. <div class="container-event">
  353.    <div id="sidebar-active" class="content-event">
  354.       <!-- search form -->
  356.         
  357.             
  358.             {{ form_start(inscriptionCertyouForm, {attr: {style: 'background-color: #fff !important;'} }) }}
  359.                 <div style="margin-bottom: 10px;">
  360.                     <label style="font-size: 20px; font-weight: bold; font-family: arial; color: #ff6600;">Certificat presonnalisé</label>
  361.                 </div>
  362.             
  363.                 <div class="row" style="border: 1px solid #c4c4c4; width: auto !important; padding: 20px !important; ">
  364.                     <div class="col-lg-12 col-md-12 col-sm-12" id="choix">
  365.                         {{ form_row(inscriptionCertyouForm.choix,{'value': certyou.type}) }}
  366.                     </div>
  367.                     <div class="col-lg-12 col-md-12 col-sm-12" id="type">
  368.                         {{ form_row(inscriptionCertyouForm.types) }}
  369.                     </div>
  370.                     <div class="col-lg-6 col-md-6 col-sm-12" id="duree" style="padding-right: 10px;">
  371.                         {{ form_row(inscriptionCertyouForm.duree,{'value': certyou.duree}) }}
  372.                     </div>
  373.                     <div class="col-lg-6 col-md-6 col-sm-12" id="lieu" style="padding-left: 10px;">
  374.                         {{ form_row(inscriptionCertyouForm.lieu) }}
  375.                     </div>
  376.                     <div class="col-lg-6 col-md-6 col-sm-12" id="session" style="padding-left: 10px;">
  377.                         {{ form_row(inscriptionCertyouForm.session) }}
  378.                     </div>
  379.                     <div class="col-lg-12 col-md-12 col-sm-12" id="virtuelle" style="padding-right: 10px;">
  380.                         {{ form_row(inscriptionCertyouForm.prixvirtuelle,{'value': certyou.prixvirtuelle~ ' ' ~ certyou.devise}) }}
  381.                     </div>
  382.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel">
  383.                         {{ form_row(inscriptionCertyouForm.prixpresentiel,{'value': certyou.prixpresentiel~ ' ' ~ certyou.devise}) }}
  384.                     </div>
  385.                 </div>
  386.                 
  387.                 <div id="info-perso" class="row" style="margin-bottom: 10px; border: 1px solid #c4c4c4; width: auto !important; padding: 20px !important;">
  388.                     <div class="col-lg-12 col-md-12 col-sm-12">
  389.                         {{ form_row(inscriptionCertyouForm.civilite) }}
  390.                     </div>
  391.                     <div class="col-lg-6 col-md-6 col-sm-12" style="padding-right: 10px;">
  392.                         {{ form_row(inscriptionCertyouForm.nom) }}
  393.                     </div>
  394.                     <div class="col-lg-6 col-md-6 col-sm-12" style="padding-left: 10px;">
  395.                         {{ form_row(inscriptionCertyouForm.prenoms) }}
  396.                     </div>
  397.                     <div class="col-lg-6 col-md-6 col-sm-12" style="padding-right: 10px;">
  398.                         {{ form_row(inscriptionCertyouForm.fonction) }}
  399.                     </div>
  400.                     <div class="col-lg-6 col-md-6 col-sm-12" id="virtuelle" style="padding-left: 10px;">
  401.                         {{ form_row(inscriptionCertyouForm.telephone) }}
  402.                     </div>
  403.                     <div class="col-lg-12 col-md-12 col-sm-12" id="presentiel" style="padding-right: 10px;">
  404.                         {{ form_row(inscriptionCertyouForm.mail) }}
  405.                     </div>
  406.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding-right: 10px;">
  407.                         {{ form_row(inscriptionCertyouForm.entreprise) }}
  408.                     </div>
  409.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding-left: 10px;">
  410.                         {{ form_row(inscriptionCertyouForm.siteweb) }}
  411.                     </div>
  412.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding-right: 10px;">
  413.                         {{ form_row(inscriptionCertyouForm.nbparticipant) }}
  414.                     </div>
  415.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding-left: 10px;">
  416.                         {{ form_row(inscriptionCertyouForm.pays) }}
  417.                     </div>
  418.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding-right: 10px;">
  419.                         {{ form_row(inscriptionCertyouForm.ville) }}
  420.                     </div>
  421.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding-left: 10px;">
  422.                         {{ form_row(inscriptionCertyouForm.boitepostale) }}
  423.                     </div>
  424.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding-right: 10px;">
  425.                         {{ form_row(inscriptionCertyouForm.whatsapp) }}
  426.                     </div>
  427.                     <div class="col-lg-6 col-md-6 col-sm-12" id="presentiel" style="padding-left: 10px;">
  428.                         {{ form_row(inscriptionCertyouForm.adresse) }}
  429.                     </div>
  430.                     <div class="col-lg-12 col-md-12 col-sm-12" id="presentiel">
  431.                         {{ form_row(inscriptionCertyouForm.commentaire, {attr: {style: 'height: 100px !important;'} }) }}
  432.                     </div>
  433.                     <div style="margin: 10px !important;" class="g-recaptcha" data-sitekey="6LfPYkosAAAAANaQq5rVy_x44wv122vknRu-sw3C"></div>
  434.                 </div>
  435.                 
  436.             {{ form_end(inscriptionCertyouForm) }}
  437.             
  441.    </div>
  443.    {% include 'section/aside.html.twig' %}
  445. </div>
  446.   {% include 'section/footer.html.twig' %}
  449. {% endblock %}