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

Open in your IDE?
  1. {% extends 'front.html.twig' %}
  3. {% block title %}Inscription | CIMEF-INTERNATIONAL{% endblock %}
  4. {% block styleSheets %}
  5. <!-- jQuery (OBLIGATOIRE avant Select2) -->
  6. <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  8. <script>
  9. $(document).ready(function () {
  11.     const $thematique = $('#new_inscription_form_thematique');
  12.     const $theme      = $('#new_inscription_form_theme');
  13.     const $lieu       = $('#new_inscription_form_lieu');
  14.     const $periode    = $('#new_inscription_form_periode');
  15.     const $prix       = $('#new_inscription_form_prix');
  16.     const $loader     = $('#loader');
  17.     
  18.     $('#new_inscription_form_prix').prop('readonly', true);
  19.     $('#new_inscription_form_periode').prop('readonly', true);
  22.     $theme.parent().hide();
  23.     $lieu.parent().hide();
  24.     $periode.parent().hide();
  25.     $prix.parent().hide();
  27.     /* =========================
  28.        THÉMATIQUE → THÈMES
  29.     ========================= */
  30.     $thematique.on('change', function () {
  32.         let thematiqueVal = $(this).val();
  33.         
  34.         $theme.parent().hide();
  35.         $lieu.parent().hide();
  36.         $periode.parent().hide();
  37.         $prix.parent().hide();
  39.         if (!thematiqueVal) return;
  40.         
  41.         $loader.show();
  43.         $.ajax({
  44.             url: "{{ path('front.inscriptions', { annee: annee }) }}",
  45.             type: "POST",
  46.             dataType: "json",
  47.             data: {
  48.                 action: 'themes',
  49.                 thematiqueVal: thematiqueVal
  50.             },
  51.             success: function (data) {
  53.                 $theme.empty();
  54.                 $theme.append('<option value="">Sélectionner un thème</option>');
  56.                 data.forEach(item => {
  57.                     $theme.append(
  58.                         `<option value="${item.id}">${item.nom}</option>`
  59.                     );
  60.                 });
  62.                 $theme.parent().show();
  63.             },
  64.             complete: function () {
  65.                 $loader.hide();
  66.             }
  67.         });
  68.     });
  70.     /* =========================
  71.        THÉMATIQUE → THÈME → LIEUX
  72.     ========================= */
  73.     $theme.on('change', function () {
  75.         let themeVal = $(this).val();
  76.         $lieu.parent().hide();
  77.         $periode.parent().hide();
  78.         $prix.parent().hide();
  80.         if (!themeVal) return;
  81.         
  82.         $loader.show();
  84.         $.ajax({
  85.             url: "{{ path('front.inscriptions', { annee: annee }) }}",
  86.             type: "POST",
  87.             dataType: "json",
  88.             data: {
  89.                 action: 'lieux',
  90.                 themeVal: themeVal
  91.             },
  92.             success: function (data) {
  93.                 $lieu.empty();
  94.                 $lieu.append('<option value="">Sélectionner le lieu</option>');
  96.                 data.forEach(item => {
  97.                     $lieu.append(
  98.                         `<option value="${item.id}">${item.lieu}</option>`
  99.                     );
  100.                 });
  101.                 $lieu.parent().show();
  102.             },
  103.             complete: function () {
  104.                 $loader.hide();
  105.             }
  106.         });
  107.     });
  109.     /* =========================
  110.        THÉMATIQUE → THÈME → LIEUX → DATE
  111.     ========================= */
  112.     $lieu.on('change', function () {
  113.     
  114.         let formationId = $(this).val();
  115.     
  116.         $periode.parent().hide();
  117.         $prix.parent().hide();
  118.     
  119.         if (!formationId) return;
  120.         
  121.         $loader.show();
  122.     
  123.         $.ajax({
  124.             url: "{{ path('front.inscriptions', { annee: annee }) }}",
  125.             type: "POST",
  126.             dataType: "json",
  127.             data: {
  128.                 action: 'lieu_details',
  129.                 formationId: formationId
  130.             },
  131.             success: function (data) {
  132.     
  133.                 // Session (date)
  134.                 $('#new_inscription_form_periode')
  135.                     .val(data.session)
  136.                     .parent()
  137.                     .show();
  138.     
  139.                 // Prix
  140.                 $('#new_inscription_form_prix')
  141.                     .val(data.prix + ' ' + data.devise)
  142.                     .parent()
  143.                     .show();
  144.             },
  145.             complete: function () {
  146.                 $loader.hide();
  147.             }
  148.         });
  149.     });
  153. });
  154. </script>
  158. <style id='wp-emoji-styles-inline-css' type='text/css'>
  159. .select{
  160.     padding: 10px !important;
  161.     border:1px solid red !important;
  162. }
  163. .select2{
  164.     padding: 10px;
  165.     border:1px solid red;
  166. }
  167. /* 🔄 Spinner */
  168. .loader {
  169.     display: none;
  170.     width: 25px;
  171.     height: 25px;
  172.     border: 3px solid #ddd;
  173.     border-top: 3px solid #007bff;
  174.     border-radius: 50%;
  175.     animation: spin 0.8s linear infinite;
  176.     margin-top: 10px;
  177. }
  178. @keyframes spin {
  179.     100% { transform: rotate(360deg); }
  180. }
  181. label {
  182.     font-family: arial;
  183.     font-weight: bold;
  184. }
  185. .form-control{
  186.     width:100%;
  187.     height:50px;
  188.     padding:10px;
  189.     border-radius:8px;
  190.     font-family: arial;
  191.     margin-bottom: 5px;
  192.     border:1px solid #ccc;
  193. }
  194. .textarea{
  195.     width:100%;
  196.     height:45px;
  197.     padding:10px;
  198.     font-family: arial;
  199.     border:1px solid #ccc;
  200.     height: 100px !important;
  201.     border-radius:1px !important;
  202. }
  203. .row {
  204.     display: flex;            /* flexbox pour aligner les colonnes */
  205.     flex-wrap: wrap;          /* les colonnes passent à la ligne si nécessaire */
  206.     margin-right: -0.75rem;   /* -gutter/2 */
  207.     margin-left: -0.75rem;    /* -gutter/2 */
  208. }
  209. .events_pagination ul.pagination {
  210.     display: flex;
  211.     flex-wrap: wrap;
  212.     justify-content: center;
  213.     list-style: none;
  214.     margin: 0;
  215.     padding: 0;
  216. }
  217. .page-item.active .page-link {
  218.     background-color: #ff6600;
  219.     color: #fff;
  220. }
  221. .page-link {
  222.     margin: 10px;
  223.     color: #051a53;
  224.     background-color: #ededed;
  225.     border-radius: 5px;
  226.     padding: 10px;
  227.     /* margin: 0 3px; */
  228. }
  230. .text-lien{
  231.    color: #ff6600;
  232.    /* font-size: 16px; */
  233. }
  234. .shadow {
  235.     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
  236. }
  237. /* Small devices ≥576px */
  238. @media (min-width: 576px) {
  239.   .col-3 { flex: 0 0 100%; max-width: 100%; }
  240.   .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  241.   .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  242.   .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  243.   h1 { font-size: 20px !important; }
  244. }
  246. /* Medium devices ≥768px */
  247. @media (min-width: 768px) {
  248.   .col-md-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  249.   .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  250.   .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  251.   .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  252. }
  254. /* Large devices ≥992px */
  255. @media (min-width: 992px) {
  256.   .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  257.   .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  258.   .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  259.   .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  260. }
  262. .type1 .date-event {
  263.     transition: all 0.5s ease;
  264.     position: absolute;
  265.     bottom: 20px;
  266.     left: 30px;
  267.     z-index: 1;
  268.     font-size: 12px;
  269.     color: #fff;
  270.     font-weight: 700;
  271.     text-transform: uppercase;
  272.     text-align: center;
  273.     line-height: 1.3;
  274.     letter-spacing: 1px;
  275.     background-color: #ff6600 !important;
  276.     padding: 12px;
  277. }
  278. .icon_event{
  279.     color: #ff6600 !important;
  280. }
  281. .wrap_header_banner .overlay-slider {
  282.     position: absolute;
  283.     top: 0;
  284.     left: 0;
  285.     padding-top: 30px; 
  286.     width: 100%;
  287.     height: 100%;
  288.     background-color: rgba(0, 0, 0, 0.6392156863);
  289. }
  290. .left-column {
  291.     flex: 1;
  292.     /*background: linear-gradient(145deg, #051a53, 0%, #0a2a7a 100%);*/
  293.     background: #051a53;
  294.     color: white;
  295.     padding: 40px;
  296.     display: flex;
  297.     flex-direction: column;
  298.     justify-content: space-between;
  299.     position: relative;
  300.     overflow: hidden;
  301. }
  303. .left-column:before {
  304.     content: "";
  305.     position: absolute;
  306.     top: 0;
  307.     left: 0;
  308.     right: 0;
  309.     bottom: 0;
  310.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.05)"/></svg>');
  311.     opacity: 0.3;
  312. }
  313. .logo-header {
  314.     display: flex;
  315.     align-items: center;
  316.     gap: 15px;
  317.     margin-bottom: 40px;
  318.     z-index: 1;
  319.     position: relative;
  320. }
  322. .logo-circle {
  323.     width: 80px !important;
  324.     height: 65px !important;
  325.     background-color: #ff6600;
  326.     border-radius: 50%;
  327.     display: flex;
  328.     align-items: center;
  329.     justify-content: center;
  330.     font-size: 24px;
  331. }
  332. .left-content {
  333.     z-index: 1;
  334.     position: relative;
  335.     flex-grow: 1;
  336.     margin: 0px !important;
  337.     width: 100% !important;
  338. }
  340. .features-list {
  341.     list-style: none;
  342.     margin: 0px !important;
  343.     width: 100%;
  344. }
  346. .features-list li {
  347.     display: flex;
  348.     align-items: flex-start;
  349.     margin-bottom: 10px;
  350.     margin-left: -30px;
  351. }
  353. .feature-icon {
  354.     background-color: rgba(255, 255, 255, 0.15);
  355.     color: #fff;
  356.     border-radius: 50%;
  357.     width: 40px;
  358.     height: 40px;
  359.     display: flex;
  360.     align-items: center;
  361.     justify-content: center;
  362.     margin-right: 15px;
  363.     flex-shrink: 0;
  364.     margin-top: 10px !important;
  365. }
  367. .feature-text h4 {
  368.     font-size: 16px;
  369.     margin-bottom: 5px;
  370.     font-weight: 600;
  371. }
  373. .feature-text p {
  374.     font-size: 14px;
  375.     opacity: 0.8;
  376. }
  378. </style>
  379. {% endblock %}
  380. {% block body %}
  381. {% include 'section/navbar.html.twig' %}
  382. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/wp-content/uploads/2023/06/header-banner.jpg')}});">
  383.     <div class="overlay-slider">
  384.         <div class="row_site">
  385.             <div class="container_site">
  386.                 <div class="cover_color"></div>
  387.                 <div class="header_banner_el">
  388.                     <div class="header_breadcrumbs">
  389.                         <div id="breadcrumbs">
  390.                         <ul class="breadcrumb">
  391.                             <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  392.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  393.                             <li style="color: #fff!important;">Formations</li>
  394.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  395.                             <li style="color: #fff!important;">Séminaires internationaux et certificats</li>
  396.                         </ul>
  397.                         </div>
  398.                     </div>
  399.                     <h1 class="header_title" style="color: #fff!important;">Séminaires internationaux et certificats</h1>
  400.                 </div>
  401.             </div>
  402.         </div>
  403.     </div>
  404. </div>
  407. {% for message in app.flashes('success') %}
  408. <div class="row toast_success" style="top: 100px !important; float: right !important; position: absolute;">
  409.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  410.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  411.     </div>
  412.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  413.         <label style="font-family: arial;">{{ message }}</label>
  414.     </div>
  415. </div>    
  416. {% endfor %}
  417. {% for message in app.flashes('warning') %}
  418. <div class="row toast_warning" style="top: 100px !important; float: right !important; position: absolute;">
  419.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  420.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  421.     </div>
  422.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  423.         <label style="font-family: arial;">{{ message }}</label>
  424.     </div>
  425. </div>   
  426. {% endfor %}
  427. {% for message in app.flashes('danger') %}
  428. <div class="row toast_danger" style="top: 100px !important; float: right !important; position: absolute;">
  429.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  430.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  431.     </div>
  432.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  433.         <label style="font-family: arial;">{{ message }}</label>
  434.     </div>
  435. </div>   
  436. {% endfor %}
  439. <div class="container-event">
  440.     <div id="main-event" class="content-event">
  441.         
  442.          <div class="row" style="width: 100% !important; padding: 10px !important;">
  443.             <div class="col-lg-8 col-md-8 col-sm-12" style="padding: 20px">
  444.                 <div class="">
  445.             
  446.                     <div>
  447.                         <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Rejoignez nos programmes de formation professionnelle</h3>
  448.                     </div>
  449.                     <p style="font-size: 18px;">
  450.                         Merci de compléter le formulaire en sélectionnant <b>la thématique selon le thème et la ville de votre séminaire</b>, afin de bénéficier d’une prise en charge personnalisée.
  451.                     </p>
  452.             
  453.                     {{ form_start(demandeformationsForm, {attr: {style: 'width: 100%;'} }) }}
  454.                         <div>
  455.                             <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Formation souhaitée</h3>
  456.                         </div>
  457.                         <div class="row shadow" style="maring: 20px; padding: 30px; margin-top: 10px !important; margin-bottom: 20px !important; border: 2px solid #ededed;">
  458.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  459.                                 {{ form_row(demandeformationsForm.thematique) }}
  460.                             </div>
  461.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  462.                                 {{ form_row(demandeformationsForm.theme) }}
  463.                             </div>
  464.                             
  465.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  466.                                 {{ form_row(demandeformationsForm.lieu) }}
  467.                             </div>
  468.         
  469.                             <div class="col-md-3 col-sm-12" style="padding: 5px;">
  470.                                 {{ form_row(demandeformationsForm.periode) }}
  471.                             </div>
  472.                             <div class="col-md-3 col-sm-12" style="padding: 5px;">
  473.                                 {{ form_row(demandeformationsForm.prix) }}
  474.                             </div>
  475.                             <div class="col-12">
  476.                                 <div class="loader" id="loader"></div>
  477.                             </div>
  478.                         </div>
  479.                         
  480.    
  481.                         <div class="row shadow" style="border: 1px solid #ededed; padding: 20px;">
  482.                             <div>
  483.                                 <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Informations personnelles</h3>
  484.                             </div>
  485.                             <div class="col-md-12 col-sm-12">
  486.                                 {{ form_row(demandeformationsForm.civilite) }}
  487.                             </div>
  488.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  489.                                 {{ form_row(demandeformationsForm.nom) }}
  490.                             </div>
  491.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  492.                                 {{ form_row(demandeformationsForm.prenoms) }}
  493.                             </div>
  494.                             <div class="col-md-12 col-sm-12" style="padding: 5px;">
  495.                                 {{ form_row(demandeformationsForm.mail) }}
  496.                             </div>
  497.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  498.                                 {{ form_row(demandeformationsForm.boitepostale) }}
  499.                             </div>
  500.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  501.                                 {{ form_row(demandeformationsForm.telephone) }}
  502.                             </div>
  503.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  504.                                 {{ form_row(demandeformationsForm.whatsapp) }}
  505.                             </div>  
  506.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  507.                                 {{ form_row(demandeformationsForm.pays) }}
  508.                             </div>
  509.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  510.                                 {{ form_row(demandeformationsForm.ville) }}
  511.                             </div>
  512.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  513.                                 {{ form_row(demandeformationsForm.adresse) }}
  514.                             </div>
  515.                             <div style="margin-top: 10px; border: 1px solid #ededed !important; height: 5px; background-color: #ededed; width: 100%;"></div>
  516.                             <div class="form-header" style="border-top: 1px solid #051a53 !important; width: 100%;">
  517.                                 <h2 class="form-title">Informations sur votre formation</h2>
  518.                             </div>
  519.  
  520.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  521.                                 {{ form_row(demandeformationsForm.entreprise) }}
  522.                             </div>
  523.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  524.                                 {{ form_row(demandeformationsForm.fonction) }}
  525.                             </div>
  526.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  527.                                 {{ form_row(demandeformationsForm.nbparticipant) }}
  528.                             </div>
  529.                             <div class="col-md-6 col-sm-12" style="padding: 5px;">
  530.                                 {{ form_row(demandeformationsForm.siteweb) }}
  531.                             </div> 
  533.                             <div class="col-md-12 col-sm-12" style="padding: 5px;">
  534.                                 {{ form_row(demandeformationsForm.commentaire) }}
  535.                             </div>
  537.                             <div class="g-recaptcha" data-sitekey="6LfPYkosAAAAANaQq5rVy_x44wv122vknRu-sw3C"></div>
  539.                           </div>
  540.                         {{ form_end(demandeformationsForm) }}
  541.                 </div>
  542.             </div>
  543.             <div class="col-lg-4 col-md-4 col-sm-12" style="padding: 20px">
  544.                 
  545.                 <div class="left-column">
  546.                     <div>
  547.                         <div class="logo-header">
  548.                             <div class="logo-circle">
  549.                                 <i class="fas fa-globe-americas fa-2X"></i>
  550.                             </div>
  551.                             <div class="logo-text">
  552.                                 <h1 style="font-size: 20px !important; color: #fff !important;">CIMEF International</h1>
  553.                                 <p style="font-size: 14px !important; font-style: italic;">La formation précède la compétitivité !</p>
  554.                             </div>
  555.                         </div>
  556.                         
  557.                         <div class="left-content">
  558.                             <h2 class="left-title" style="font-size: 30px !important; color: #fff !important;">Inscription 2026</h2>
  559.                             <p class="left-subtitle">Rejoignez notre réseau mondial de professionnels et participez à des projets d'envergure internationale.</p>
  560.                             
  561.                             <ul class="features-list">
  562.                                 <li>
  563.                                     <div class="feature-icon">
  564.                                         <i class="fas fa-network-wired"></i>
  565.                                     </div>
  566.                                     <div class="feature-text">
  567.                                         <h4 style="color: #ff6600;">Une portée internationale</h4>
  568.                                         <p>Un réseau actif de professionnels répartis dans plusieurs pays</p>
  569.                                     </div>
  570.                                 </li>
  571.                                 <li>
  572.                                     <div class="feature-icon">
  573.                                         <i class="fas fa-graduation-cap"></i>
  574.                                     </div>
  575.                                     <div class="feature-text">
  576.                                         <h4 style="color: #ff6600;">Opportunités de collaboration internationale</h4>
  577.                                         <p>Participez à des projets stratégiques avec des partenaires de renom</p>
  578.                                     </div>
  579.                                 </li>
  580.                                 <li>
  581.                                     <div class="feature-icon">
  582.                                         <i class="fas fa-handshake"></i>
  583.                                     </div>
  584.                                     <div class="feature-text">
  585.                                         <h4 style="color: #ff6600;">Opportunités de collaboration</h4>
  586.                                         <p>Participez à des projets innovants avec des partenaires internationaux</p>
  587.                                     </div>
  588.                                 </li>
  589.                             </ul>
  590.                         </div>
  591.                     </div>
  592.                     
  593.                     <div class="contact-info">
  594.                         <h3 style="color: #fff;">Besoin d'aide ?</h3>
  595.                         <p>Contactez notre équipe à <strong>paris@cimef-international.org</strong> ou appelez-nous au <strong>+33 6 05 85 70 98 </strong></p>
  596.                     </div>
  597.                 </div>
  598.             
  599.             </div>        
  600.                  
  601.         </div>
  602.         
  603.     </div>
  604. </div>
  610. {% include 'section/footer.html.twig' %}
  612. {% block javascripts %}
  614.     <!-- Select2 JS -->
  615.     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  616.     
  617.     <script>
  618.         $(document).ready(function() {
  619.             // Appliquer Select2 sur le champ EntityType
  620.             //$('#new_inscription_form_thematique').select2({
  621.                 //placeholder: "Sélectionner une thématique",
  622.                 //allowClear: true,
  623.                 //width: '100%',
  624.                 //dropdownParent: $('#offcanvasRight') // ⭐ OBLIGATOIRE
  625.             //});
  626.             //$('#new_inscription_form_theme').select2({
  627.                 //placeholder: "Sélectionner un thème",
  628.                 //allowClear: true,
  629.                 //width: '100%',
  630.                 //dropdownParent: $('#offcanvasRight') // ⭐ OBLIGATOIRE
  631.             //});
  632.         });
  633.     </script>
  634. {% endblock %}
  637. {% endblock %}