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>
  7. <
  9. <script>
  10. /*    $(document).ready(function () {
  12.     let $thematique = $('#new_inscription_form_thematique');
  13.     let $theme = $('#new_inscription_form_theme');
  14.     let $lieu = $('#new_inscription_form_lieu');
  15.     let $periode = $('#new_inscription_form_periode');
  16.     let $prix = $('#new_inscription_form_prix');
  18.     $theme.hide();
  19.     $lieu.hide();
  20.     $periode.hide();
  21.     $prix.hide();
  23.     $thematique.on('change', function () {
  24.         let thematiqueVal = $(this).val();
  26.         if (thematiqueVal !== '') {
  27.             $theme.show();
  29.             $.ajax({
  30.                 url: "{{ path('front.inscriptions', { annee: annee }) }}",
  31.                 type: "POST",
  32.                 data: { thematiqueVal: thematiqueVal },
  33.                 dataType: "json",
  34.                 success: function (response) {
  36.                     if (response.thematique_id) {
  37.                         $periode.show();
  38.                         $('#new_inscription_form_periode').val(response.thematique_id).trigger('change');
  39.                     
  40.                         let $theme = $('#new_inscription_form_theme');
  41.                         $theme.empty();
  42.                         $theme.append('<option value="">Sélectionner un thème</option>');
  43.             
  44.                         data.forEach(function (item) {
  45.                             $theme.append(
  46.                                 `<option value="${item.id}">${item.nom}</option>`
  47.                             );
  48.                         });
  50.                     } else {
  51.                         $periode.hide();
  52.                     }
  54.                 },
  55.                 error: function () {
  56.                     console.error('Erreur AJAX');
  57.                 }
  58.             });
  60.         } else {
  61.             $theme.hide();
  62.             $lieu.hide();
  63.             $periode.hide();
  64.             $prix.hide();
  65.         }
  66.     });
  68. }); */
  69. </script>
  71. <script>
  72. $(document).ready(function () {
  74.     const $thematique = $('#new_inscription_form_thematique');
  75.     const $theme      = $('#new_inscription_form_theme');
  76.     const $lieu       = $('#new_inscription_form_lieu');
  77.     const $periode    = $('#new_inscription_form_periode');
  78.     const $prix       = $('#new_inscription_form_prix');
  79.     const $loader     = $('#loader');
  80.     
  81.     $('#new_inscription_form_prix').prop('readonly', true);
  82.     $('#new_inscription_form_periode').prop('readonly', true);
  85.     $theme.parent().hide();
  86.     $lieu.parent().hide();
  87.     $periode.parent().hide();
  88.     $prix.parent().hide();
  90.     /* =========================
  91.        THÉMATIQUE → THÈMES
  92.     ========================= */
  93.     $thematique.on('change', function () {
  95.         let thematiqueVal = $(this).val();
  96.         
  97.         $theme.parent().hide();
  98.         $lieu.parent().hide();
  99.         $periode.parent().hide();
  100.         $prix.parent().hide();
  102.         if (!thematiqueVal) return;
  103.         
  104.         $loader.show();
  106.         $.ajax({
  107.             url: "{{ path('front.inscriptions', { annee: annee }) }}",
  108.             type: "POST",
  109.             dataType: "json",
  110.             data: {
  111.                 action: 'themes',
  112.                 thematiqueVal: thematiqueVal
  113.             },
  114.             success: function (data) {
  116.                 $theme.empty();
  117.                 $theme.append('<option value="">Sélectionner un thème</option>');
  119.                 data.forEach(item => {
  120.                     $theme.append(
  121.                         `<option value="${item.id}">${item.nom}</option>`
  122.                     );
  123.                 });
  125.                 $theme.parent().show();
  126.             },
  127.             complete: function () {
  128.                 $loader.hide();
  129.             }
  130.         });
  131.     });
  133.     /* =========================
  134.        THÉMATIQUE → THÈME → LIEUX
  135.     ========================= */
  136.     $theme.on('change', function () {
  138.         let themeVal = $(this).val();
  139.         $lieu.parent().hide();
  140.         $periode.parent().hide();
  141.         $prix.parent().hide();
  143.         if (!themeVal) return;
  144.         
  145.         $loader.show();
  147.         $.ajax({
  148.             url: "{{ path('front.inscriptions', { annee: annee }) }}",
  149.             type: "POST",
  150.             dataType: "json",
  151.             data: {
  152.                 action: 'lieux',
  153.                 themeVal: themeVal
  154.             },
  155.             success: function (data) {
  156.                 $lieu.empty();
  157.                 $lieu.append('<option value="">Sélectionner le lieu</option>');
  159.                 data.forEach(item => {
  160.                     $lieu.append(
  161.                         `<option value="${item.id}">${item.lieu}</option>`
  162.                     );
  163.                 });
  164.                 $lieu.parent().show();
  165.             },
  166.             complete: function () {
  167.                 $loader.hide();
  168.             }
  169.         });
  170.     });
  172.     /* =========================
  173.        THÉMATIQUE → THÈME → LIEUX → DATE
  174.     ========================= */
  175.     $lieu.on('change', function () {
  176.     
  177.         let formationId = $(this).val();
  178.     
  179.         $periode.parent().hide();
  180.         $prix.parent().hide();
  181.     
  182.         if (!formationId) return;
  183.         
  184.         $loader.show();
  185.     
  186.         $.ajax({
  187.             url: "{{ path('front.inscriptions', { annee: annee }) }}",
  188.             type: "POST",
  189.             dataType: "json",
  190.             data: {
  191.                 action: 'lieu_details',
  192.                 formationId: formationId
  193.             },
  194.             success: function (data) {
  195.     
  196.                 // Session (date)
  197.                 $('#new_inscription_form_periode')
  198.                     .val(data.session)
  199.                     .parent()
  200.                     .show();
  201.     
  202.                 // Prix
  203.                 $('#new_inscription_form_prix')
  204.                     .val(data.prix + ' ' + data.devise)
  205.                     .parent()
  206.                     .show();
  207.             },
  208.             complete: function () {
  209.                 $loader.hide();
  210.             }
  211.         });
  212.     });
  216. });
  217. </script>
  221. <style id='wp-emoji-styles-inline-css' type='text/css'>
  222. .select{
  223.     padding: 10px !important;
  224.     border:1px solid red !important;
  225. }
  226. .select2{
  227.     padding: 10px;
  228.     border:1px solid red;
  229. }
  230. /* 🔄 Spinner */
  231. .loader {
  232.     display: none;
  233.     width: 25px;
  234.     height: 25px;
  235.     border: 3px solid #ddd;
  236.     border-top: 3px solid #007bff;
  237.     border-radius: 50%;
  238.     animation: spin 0.8s linear infinite;
  239.     margin-top: 10px;
  240. }
  241. @keyframes spin {
  242.     100% { transform: rotate(360deg); }
  243. }
  244. label {
  245.     font-family: arial;
  246.     font-weight: bold;
  247. }
  248. .form-control{
  249.     width:100%;
  250.     height:50px;
  251.     padding:10px;
  252.     border-radius:8px;
  253.     font-family: arial;
  254.     margin-bottom: 5px;
  255.     border:1px solid #ccc;
  256. }
  257. .textarea{
  258.     width:100%;
  259.     height:45px;
  260.     padding:10px;
  261.     font-family: arial;
  262.     border:1px solid #ccc;
  263.     height: 100px !important;
  264.     border-radius:1px !important;
  265. }
  266. .row {
  267.     display: flex;            /* flexbox pour aligner les colonnes */
  268.     flex-wrap: wrap;          /* les colonnes passent à la ligne si nécessaire */
  269.     margin-right: -0.75rem;   /* -gutter/2 */
  270.     margin-left: -0.75rem;    /* -gutter/2 */
  271. }
  272. .events_pagination ul.pagination {
  273.     display: flex;
  274.     flex-wrap: wrap;
  275.     justify-content: center;
  276.     list-style: none;
  277.     margin: 0;
  278.     padding: 0;
  279. }
  280. .page-item.active .page-link {
  281.     background-color: #ff6600;
  282.     color: #fff;
  283. }
  284. .page-link {
  285.     margin: 10px;
  286.     color: #051a53;
  287.     background-color: #ededed;
  288.     border-radius: 5px;
  289.     padding: 10px;
  290.     /* margin: 0 3px; */
  291. }
  293. .text-lien{
  294.    color: #ff6600;
  295.    /* font-size: 16px; */
  296. }
  298. /* Small devices ≥576px */
  299. @media (min-width: 576px) {
  300.   .col-3 { flex: 0 0 100%; max-width: 100%; }
  301.   .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  302.   .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  303.   .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  304. }
  306. /* Medium devices ≥768px */
  307. @media (min-width: 768px) {
  308.   .col-md-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  309.   .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  310.   .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  311.   .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  312. }
  314. /* Large devices ≥992px */
  315. @media (min-width: 992px) {
  316.   .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  317.   .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  318.   .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  319.   .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  320. }
  322. .type1 .date-event {
  323.     transition: all 0.5s ease;
  324.     position: absolute;
  325.     bottom: 20px;
  326.     left: 30px;
  327.     z-index: 1;
  328.     font-size: 12px;
  329.     color: #fff;
  330.     font-weight: 700;
  331.     text-transform: uppercase;
  332.     text-align: center;
  333.     line-height: 1.3;
  334.     letter-spacing: 1px;
  335.     background-color: #ff6600 !important;
  336.     padding: 12px;
  337. }
  338. .icon_event{
  339.     color: #ff6600 !important;
  340. }
  341. .wrap_header_banner .overlay-slider {
  342.     position: absolute;
  343.     top: 0;
  344.     left: 0;
  345.     padding-top: 30px; 
  346.     width: 100%;
  347.     height: 100%;
  348.     background-color: rgba(0, 0, 0, 0.6392156863);
  349. }
  350. </style>
  351. {% endblock %}
  352. {% block body %}
  353. {% include 'section/navbar.html.twig' %}
  354. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/wp-content/uploads/2023/06/header-banner.jpg')}});">
  355.     <div class="overlay-slider">
  356.         <div class="row_site">
  357.             <div class="container_site">
  358.                 <div class="cover_color"></div>
  359.                 <div class="header_banner_el">
  360.                     <div class="header_breadcrumbs">
  361.                         <div id="breadcrumbs">
  362.                         <ul class="breadcrumb">
  363.                             <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></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;">Formations</li>
  366.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  367.                             <li style="color: #fff!important;">Séminaires internationaux et certificats</li>
  368.                         </ul>
  369.                         </div>
  370.                     </div>
  371.                     <h1 class="header_title" style="color: #fff!important;">Séminaires internationaux et certificats</h1>
  372.                 </div>
  373.             </div>
  374.         </div>
  375.     </div>
  376. </div>
  379. {% for message in app.flashes('success') %}
  380. <div class="row toast_success" style="top: 100px !important; float: right !important; position: absolute;">
  381.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  382.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  383.     </div>
  384.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  385.         <label style="font-family: arial;">{{ message }}</label>
  386.     </div>
  387. </div>    
  388. {% endfor %}
  389. {% for message in app.flashes('warning') %}
  390. <div class="row toast_warning" style="top: 100px !important; float: right !important; position: absolute;">
  391.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  392.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  393.     </div>
  394.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  395.         <label style="font-family: arial;">{{ message }}</label>
  396.     </div>
  397. </div>   
  398. {% endfor %}
  399. {% for message in app.flashes('danger') %}
  400. <div class="row toast_danger" style="top: 100px !important; float: right !important; position: absolute;">
  401.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  402.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  403.     </div>
  404.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  405.         <label style="font-family: arial;">{{ message }}</label>
  406.     </div>
  407. </div>   
  408. {% endfor %}
  411. <div class="container-event">
  412.     <div id="main-event" class="content-event">
  413.         <div>
  414.             <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Rejoignez nos programmes de formation professionnelle</h3>
  415.         </div>
  416.         <p style="font-size: 18px;">
  417.             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.
  418.         </p>
  419.         
  420.         <div class="card">
  421.             {{ form_start(demandeformationsForm, {attr: {style: 'width: 100%;'} }) }}
  422.                 <div>
  423.                     <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Formation souhaitée</h3>
  424.                 </div>
  425.                 <div class="row" style="padding: 30px; margin-top: 10px !important; margin-bottom: 10px !important; border: 2px solid #ededed;">
  426.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  427.                         {{ form_row(demandeformationsForm.thematique) }}
  428.                     </div>
  429.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  430.                         {{ form_row(demandeformationsForm.theme) }}
  431.                     </div>
  432.                     
  433.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  434.                         {{ form_row(demandeformationsForm.lieu) }}
  435.                     </div>
  437.                     <div class="col-md-3 col-sm-12" style="padding: 5px;">
  438.                         {{ form_row(demandeformationsForm.periode) }}
  439.                     </div>
  440.                     <div class="col-md-3 col-sm-12" style="padding: 5px;">
  441.                         {{ form_row(demandeformationsForm.prix) }}
  442.                     </div>
  443.                     <div class="col-12">
  444.                         <div class="loader" id="loader"></div>
  445.                     </div>
  446.                 </div>
  447.                 <div>
  448.                     <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Données personnelles</h3>
  449.                 </div>
  450.                 <div class="row" style="padding: 20px; margin-top: 5px !important; margin-bottom: 5px !important; border: 2px solid #ededed;">
  451.                     <div class="col-md-12 col-sm-12" style="padding: 5px;">
  452.                         {{ form_row(demandeformationsForm.civilite) }}
  453.                     </div>
  454.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  455.                         {{ form_row(demandeformationsForm.nom) }}
  456.                     </div>
  457.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  458.                         {{ form_row(demandeformationsForm.prenoms) }}
  459.                     </div>
  460.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  461.                         {{ form_row(demandeformationsForm.fonction) }}
  462.                     </div>
  463.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  464.                         {{ form_row(demandeformationsForm.mail) }}
  465.                     </div>
  466.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  467.                         {{ form_row(demandeformationsForm.telephone) }}
  468.                     </div>
  469.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  470.                         {{ form_row(demandeformationsForm.whatsapp) }}
  471.                     </div>  
  472.                 </div>
  473.                 <div>
  474.                     <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Situation géographique</h3>
  475.                 </div>
  476.                 <div class="row" style="padding: 20px; margin-top: 5px !important; margin-bottom: 5px !important; border: 2px solid #ededed;">
  477.                     <div class="col-md-4 col-sm-12" style="padding: 5px;">
  478.                         {{ form_row(demandeformationsForm.pays) }}
  479.                     </div>
  480.                     <div class="col-md-4 col-sm-12" style="padding: 5px;">
  481.                         {{ form_row(demandeformationsForm.ville) }}
  482.                     </div>
  483.                     <div class="col-md-4 col-sm-12" style="padding: 5px;">
  484.                         {{ form_row(demandeformationsForm.adresse) }}
  485.                     </div>
  486.                 </div>
  487.                 <div>
  488.                     <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Votre entreprise</h3>
  489.                 </div>
  490.                 <div class="row" style="padding: 20px; margin-top: 5px !important; margin-bottom: 5px !important; border: 2px solid #ededed;">
  491.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  492.                         {{ form_row(demandeformationsForm.entreprise) }}
  493.                     </div>
  494.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  495.                         {{ form_row(demandeformationsForm.siteweb) }}
  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.nbparticipant) }}
  502.                     </div> 
  503.                 </div>
  505.                 <div class="row" style="padding: 30px; margin-top: 10px !important; margin-bottom: 10px !important; border: 2px solid #ededed;">
  506.                     <div class="col-md-12 col-sm-12" style="padding: 5px;">
  507.                         {{ form_row(demandeformationsForm.commentaire) }}
  508.                     </div>
  509.                 </div>  
  510.                 <div style="margin-left: -10px !important;" class="g-recaptcha" data-sitekey="6LfPYkosAAAAANaQq5rVy_x44wv122vknRu-sw3C"></div>
  511.                 <div style="margin-left: -10px; margin-top: 10px;">
  512.                     {{ form_end(demandeformationsForm) }}
  513.                 </div> 
  514.         </div>
  515.         
  516.     </div>
  517. </div>
  523. {% include 'section/footer.html.twig' %}
  525. {% block javascripts %}
  527.     <!-- Select2 JS -->
  528.     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  529.     
  530.     <script>
  531.         $(document).ready(function() {
  532.             // Appliquer Select2 sur le champ EntityType
  533.             //$('#new_inscription_form_thematique').select2({
  534.                 //placeholder: "Sélectionner une thématique",
  535.                 //allowClear: true,
  536.                 //width: '100%',
  537.                 //dropdownParent: $('#offcanvasRight') // ⭐ OBLIGATOIRE
  538.             //});
  539.             //$('#new_inscription_form_theme').select2({
  540.                 //placeholder: "Sélectionner un thème",
  541.                 //allowClear: true,
  542.                 //width: '100%',
  543.                 //dropdownParent: $('#offcanvasRight') // ⭐ OBLIGATOIRE
  544.             //});
  545.         });
  546.     </script>
  547. {% endblock %}
  550. {% endblock %}