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>
  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. /* 🔄 Spinner */
  223. .loader {
  224.     display: none;
  225.     width: 25px;
  226.     height: 25px;
  227.     border: 3px solid #ddd;
  228.     border-top: 3px solid #007bff;
  229.     border-radius: 50%;
  230.     animation: spin 0.8s linear infinite;
  231.     margin-top: 10px;
  232. }
  233. @keyframes spin {
  234.     100% { transform: rotate(360deg); }
  235. }
  236. label {
  237.     font-family: arial;
  238.     font-weight: bold;
  239. }
  240. .form-control{
  241.     width:100%;
  242.     height:40px;
  243.     padding:10px;
  244.     border-radius:8px;
  245.     font-family: arial;
  246.     margin-bottom: 5px;
  247.     border:1px solid #ccc;
  248. }
  249. .textarea{
  250.     width:100%;
  251.     height:45px;
  252.     padding:10px;
  253.     font-family: arial;
  254.     border:1px solid #ccc;
  255.     height: 100px !important;
  256.     border-radius:1px !important;
  257. }
  258. .row {
  259.     display: flex;            /* flexbox pour aligner les colonnes */
  260.     flex-wrap: wrap;          /* les colonnes passent à la ligne si nécessaire */
  261.     margin-right: -0.75rem;   /* -gutter/2 */
  262.     margin-left: -0.75rem;    /* -gutter/2 */
  263. }
  264. .events_pagination ul.pagination {
  265.     display: flex;
  266.     flex-wrap: wrap;
  267.     justify-content: center;
  268.     list-style: none;
  269.     margin: 0;
  270.     padding: 0;
  271. }
  272. .page-item.active .page-link {
  273.     background-color: #ff6600;
  274.     color: #fff;
  275. }
  276. .page-link {
  277.     margin: 10px;
  278.     color: #051a53;
  279.     background-color: #ededed;
  280.     border-radius: 5px;
  281.     padding: 10px;
  282.     /* margin: 0 3px; */
  283. }
  285. .text-lien{
  286.    color: #ff6600;
  287.    /* font-size: 16px; */
  288. }
  290. /* Small devices ≥576px */
  291. @media (min-width: 576px) {
  292.   .col-3 { flex: 0 0 100%; max-width: 100%; }
  293.   .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  294.   .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  295.   .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  296. }
  298. /* Medium devices ≥768px */
  299. @media (min-width: 768px) {
  300.   .col-md-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  301.   .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  302.   .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  303.   .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  304. }
  306. /* Large devices ≥992px */
  307. @media (min-width: 992px) {
  308.   .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  309.   .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  310.   .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  311.   .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  312. }
  314. .type1 .date-event {
  315.     transition: all 0.5s ease;
  316.     position: absolute;
  317.     bottom: 20px;
  318.     left: 30px;
  319.     z-index: 1;
  320.     font-size: 12px;
  321.     color: #fff;
  322.     font-weight: 700;
  323.     text-transform: uppercase;
  324.     text-align: center;
  325.     line-height: 1.3;
  326.     letter-spacing: 1px;
  327.     background-color: #ff6600 !important;
  328.     padding: 12px;
  329. }
  330. .icon_event{
  331.     color: #ff6600 !important;
  332. }
  333. .wrap_header_banner .overlay-slider {
  334.     position: absolute;
  335.     top: 0;
  336.     left: 0;
  337.     padding-top: 30px; 
  338.     width: 100%;
  339.     height: 100%;
  340.     background-color: rgba(0, 0, 0, 0.6392156863);
  341. }
  342. </style>
  343. {% endblock %}
  344. {% block body %}
  345. {% include 'section/navbar.html.twig' %}
  346. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/wp-content/uploads/2023/06/header-banner.jpg')}});">
  347.     <div class="overlay-slider">
  348.         <div class="row_site">
  349.             <div class="container_site">
  350.                 <div class="cover_color"></div>
  351.                 <div class="header_banner_el">
  352.                     <div class="header_breadcrumbs">
  353.                         <div id="breadcrumbs">
  354.                         <ul class="breadcrumb">
  355.                             <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  356.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  357.                             <li style="color: #fff!important;">Formations</li>
  358.                             <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  359.                             <li style="color: #fff!important;">Séminaire Personnalisée</li>
  360.                         </ul>
  361.                         </div>
  362.                     </div>
  363.                     <h1 class="header_title" style="color: #fff!important;">Séminaire Personnalisée </h1>
  364.                 </div>
  365.             </div>
  366.         </div>
  367.     </div>
  368. </div>
  371. {% for message in app.flashes('success') %}
  372. <div class="row toast_success" style="top: 100px !important; float: right !important; position: absolute;">
  373.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  374.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  375.     </div>
  376.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  377.         <label style="font-family: arial;">{{ message }}</label>
  378.     </div>
  379. </div>    
  380. {% endfor %}
  381. {% for message in app.flashes('warning') %}
  382. <div class="row toast_warning" style="top: 100px !important; float: right !important; position: absolute;">
  383.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  384.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  385.     </div>
  386.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  387.         <label style="font-family: arial;">{{ message }}</label>
  388.     </div>
  389. </div>   
  390. {% endfor %}
  391. {% for message in app.flashes('danger') %}
  392. <div class="row toast_danger" style="top: 100px !important; float: right !important; position: absolute;">
  393.     <div class="col-md-2 col-sm-2" style="padding: 10px;">
  394.         <i class="fa fa-check fa-2x" aria-hidden="true"></i>
  395.     </div>
  396.     <div class="col-md-10 col-sm-10" style="padding: 10px;">
  397.         <label style="font-family: arial;">{{ message }}</label>
  398.     </div>
  399. </div>   
  400. {% endfor %}
  403. <div class="container-event">
  404.     <div id="main-event" class="content-event">
  405.         
  406.         <div class="card">
  407.             {{ form_start(demandeformationsForm, {attr: {style: 'width: 100%;'} }) }}
  408.                 <div>
  409.                     <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Données personnelles</h3>
  410.                 </div>
  411.                 <div class="row" style="padding: 20px; margin-top: 5px !important; margin-bottom: 5px !important; border: 2px solid #ededed;">
  412.                     <div class="col-md-12 col-sm-12" style="padding: 5px;">
  413.                         {{ form_row(demandeformationsForm.civilite) }}
  414.                     </div>
  415.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  416.                         {{ form_row(demandeformationsForm.nom) }}
  417.                     </div>
  418.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  419.                         {{ form_row(demandeformationsForm.prenoms) }}
  420.                     </div>
  421.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  422.                         {{ form_row(demandeformationsForm.fonction) }}
  423.                     </div>
  424.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  425.                         {{ form_row(demandeformationsForm.mail) }}
  426.                     </div>
  427.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  428.                         {{ form_row(demandeformationsForm.telephone) }}
  429.                     </div>
  430.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  431.                         {{ form_row(demandeformationsForm.whatsapp) }}
  432.                     </div>  
  433.                 </div>
  434.                 <div>
  435.                     <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Situation géographique</h3>
  436.                 </div>
  437.                 <div class="row" style="padding: 20px; margin-top: 5px !important; margin-bottom: 5px !important; border: 2px solid #ededed;">
  438.                     <div class="col-md-4 col-sm-12" style="padding: 5px;">
  439.                         {{ form_row(demandeformationsForm.pays) }}
  440.                     </div>
  441.                     <div class="col-md-4 col-sm-12" style="padding: 5px;">
  442.                         {{ form_row(demandeformationsForm.ville) }}
  443.                     </div>
  444.                     <div class="col-md-4 col-sm-12" style="padding: 5px;">
  445.                         {{ form_row(demandeformationsForm.adresse) }}
  446.                     </div>
  447.                 </div>
  448.                 <div>
  449.                     <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Votre entreprise</h3>
  450.                 </div>
  451.                 <div class="row" style="padding: 20px; margin-top: 5px !important; margin-bottom: 5px !important; border: 2px solid #ededed;">
  452.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  453.                         {{ form_row(demandeformationsForm.entreprise) }}
  454.                     </div>
  455.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  456.                         {{ form_row(demandeformationsForm.siteweb) }}
  457.                     </div>
  458.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  459.                         {{ form_row(demandeformationsForm.boitepostale) }}
  460.                     </div>
  461.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  462.                         {{ form_row(demandeformationsForm.nbparticipant) }}
  463.                     </div> 
  464.                 </div>
  465.                 <div>
  466.                     <h3 class="header_title" style="font-weight: bolder; color: #051a53; font-family: arial;">Formation souhaitée</h3>
  467.                 </div>
  468.                 <div class="row" style="padding: 30px; margin-top: 10px !important; margin-bottom: 10px !important; border: 2px solid #ededed;">
  469.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  470.                         {{ form_row(demandeformationsForm.thematique) }}
  471.                     </div>
  472.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  473.                         {{ form_row(demandeformationsForm.theme) }}
  474.                     </div>
  475.                     
  476.                     <div class="col-md-6 col-sm-12" style="padding: 5px;">
  477.                         {{ form_row(demandeformationsForm.lieu) }}
  478.                     </div>
  480.                     <div class="col-md-3 col-sm-12" style="padding: 5px;">
  481.                         {{ form_row(demandeformationsForm.periode) }}
  482.                     </div>
  483.                     <div class="col-md-3 col-sm-12" style="padding: 5px;">
  484.                         {{ form_row(demandeformationsForm.prix) }}
  485.                     </div>
  486.                     <div class="col-12">
  487.                         <div class="loader" id="loader"></div>
  488.                     </div>
  489.                 </div>
  490.                 <div class="row" style="padding: 30px; margin-top: 10px !important; margin-bottom: 10px !important; border: 2px solid #ededed;">
  491.                     <div class="col-md-12 col-sm-12" style="padding: 5px;">
  492.                         {{ form_row(demandeformationsForm.commentaire) }}
  493.                     </div>
  494.                 </div>  
  495.                 <div style="margin-left: -10px !important;" class="g-recaptcha" data-sitekey="6LfPYkosAAAAANaQq5rVy_x44wv122vknRu-sw3C"></div>
  496.                 <div style="margin-left: -10px; margin-top: 10px;">
  497.                     {{ form_end(demandeformationsForm) }}
  498.                 </div> 
  499.         </div>
  500.         
  501.     </div>
  502. </div>
  508. {% include 'section/footer.html.twig' %}
  510. {% block javascripts %}
  512.     <!-- Select2 JS -->
  513.     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  514.     
  515.     <script>
  516.         $(document).ready(function() {
  517.             // Appliquer Select2 sur le champ EntityType
  518.             //$('#new_inscription_form_thematique').select2({
  519.                 //placeholder: "Sélectionner une thématique",
  520.                 //allowClear: true,
  521.                 //width: '100%',
  522.                 //dropdownParent: $('#offcanvasRight') // ⭐ OBLIGATOIRE
  523.             //});
  524.             //$('#new_inscription_form_theme').select2({
  525.                 //placeholder: "Sélectionner un thème",
  526.                 //allowClear: true,
  527.                 //width: '100%',
  528.                 //dropdownParent: $('#offcanvasRight') // ⭐ OBLIGATOIRE
  529.             //});
  530.         });
  531.     </script>
  532. {% endblock %}
  535. {% endblock %}