templates/inscription_site/inscription.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <title>Inscription</title>
  7.   <link rel="shortcut icon" href="{{asset('adminn/img/fav.ico')}}">
  8.   <!-- Google Font: Source Sans Pro -->
  9.   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  10.   <!-- Font Awesome -->
  11.   <link rel="stylesheet" href="{{asset('adminn/plugins/fontawesome-free/css/all.min.css')}}">
  12.   <!-- Ionicons -->
  13.   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  14.   <!-- Tempusdominus Bootstrap 4 -->
  15.   <link rel="stylesheet" href="{{asset('adminn/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css')}}">
  16.   <!-- iCheck -->
  17.   <link rel="stylesheet" href="{{asset('adminn/plugins/icheck-bootstrap/icheck-bootstrap.min.css')}}">
  18.   <!-- JQVMap -->
  19.   <link rel="stylesheet" href="{{asset('adminn/plugins/jqvmap/jqvmap.min.css')}}">
  20.   <!-- Theme style -->
  21.   <link rel="stylesheet" href="{{asset('adminn/dist/css/adminlte.min.css')}}">
  22.   <!-- overlayScrollbars -->
  23.   <link rel="stylesheet" href="{{asset('adminn/plugins/overlayScrollbars/css/OverlayScrollbars.min.css')}}">
  24.   <!-- Daterange picker -->
  25.   <link rel="stylesheet" href="{{asset('adminn/plugins/daterangepicker/daterangepicker.css')}}">
  26.  <!-- Select2 -->
  27.   <link rel="stylesheet" href="{{asset('adminn/plugins/select2/css/select2.min.css')}}">
  28.   <link rel="stylesheet" href="{{asset('adminn/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}">
  29.   <!-- stpper-->
  30.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css">
  31.     <!-- Toastr -->
  32.   <link rel="stylesheet" href="{{asset('adminn/plugins/toastr/toastr.min.css')}}">
  33.   {#<link rel="stylesheet" href="{{asset('/admin/loader.css')}}">#}
  34.   <!-- SimEditor -->
  35.   <link href="{{asset('simditor/site/assets/styles/simditor.css')}}" rel="stylesheet" type="text/css" /> 
  36.   <style>
  37.   .thead-theme {
  38.         background-color: #f39c12;
  39.         color: white;
  40.     }
  41.   thead {
  42.     background-color: #f39c12 !important;
  43.         color: white !important;
  44.   }
  46.     .btn-primary{
  47.         background-color: #f39c12 !important;
  48.         border-color: #f39c12 !important;
  49.         color: white !important;
  50.     }
  52.     .btn-primary:hover{
  53.         background-color: #f39a00 !important;
  54.         border-color: #f3fa00 !important;
  55.         color: white !important;
  56.     }
  58.     .btn-brown {
  59.         background-color: #f39c12;
  60.         color: white;
  61.         border-radius: 0px;
  62.         border: none;
  63.     }
  65.     .btn-brown:hover {
  66.         color: #111;
  67.     }
  69.   </style>
  71. </head>
  73. <body class="hold-transition layout-fixed">
  74.     <!-- Content Wrapper. Contains page content -->
  76. <div class="">
  77.     <!-- Content Header (Page header) -->
  78.     <div class="content-header">
  79.         <div class="container-fluid">
  80.             {# include ("titre.html.twig",{'titre':'Inscription',"class":"fas fa-bars","path":"app_inscrit_index",'button':'Liste','page':page,'menu':menu})  #}
  81.             <div class="card">
  82.                 <div class="card-header text-white thead-theme">
  83.                     <h3 class="card-title">Nouvelle inscription</h3>
  84.                 </div>
  85.                 <div class="card-body">
  86.                 
  87.                     <!-- start stepper-->
  88.                     <div class="bs-stepper">
  89.                     <div class="bs-stepper-header" role="tablist">
  90.                         <!-- your steps here -->
  91.                         <div class="step" data-target="#information-part">
  92.                             <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
  93.                                 <span class="bs-stepper-circle">1</span>
  94.                                 <span class="bs-stepper-label">Formation</span>
  95.                             </button>
  96.                         </div>
  97.                         <div class="line"></div>
  98.                        
  99.                        
  100.                         
  101.                         
  102.                         <div class="step" data-target="#validation-part">
  103.                         <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
  104.                             <span class="bs-stepper-circle">2</span>
  105.                             <span class="bs-stepper-label">Validation</span>
  106.                         </button>
  107.                         </div>
  108.                     </div>
  109.                     <div class="bs-stepper-content">
  110.                         <!-- your steps content here -->
  111.                         <form method="post" id="forminscrit" action="{{path('app_inscrit_site_new', {'site':carte.id})}}" enctype="multipart/form-data">
  112.                         
  113.                         
  114.                         <div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
  115.                             <div class="row">
  116.                                 <div class="col-md-3">
  117.                                     <label>Type inscription</label>
  118.                                     <select class="form-control" name="typeIns" id="typeInscrit">
  119.                                         <option value="" disabled>Sélectionner</option>
  120.                                         <option value="2">Particulier</option>
  121.                                         {% if carte.duree == null or carte.thinkificFormationId == null %}
  122.                                         <option value="4">CPF</option>
  123.                                         {% endif %}
  124.                                     </select>
  125.                                 </div>
  126.                             </div>
  127.                             <hr>
  128.                             <div class="row">
  129.                                 {#<div class="col-md-3">#}
  130.                                     {#<label>Formation</label>#}
  131.                                     
  132.                                     {% for item in formations %}
  133.                                         <label class="mt-2">
  134.                                             {# if item.getTypeformation() == 3 %}
  135.                                                 
  136.                                             {% elseif item.getTypeformation() == 1 %}
  137.                                                 
  138.                                             {% elseif item.getTypeformation() == 2 %}
  139.                                                 
  140.                                             {% elseif item.getTypeformation() == 4 %}
  141.                                                 
  142.                                             {% endif #}
  143.                                         </label>
  144.                                        {# <input class="form-control " name="formationshow" id="formationshow" value="{{item.wording}}">#}
  145.                                         <input type="hidden" class="form-control" name="formation[]"  value="{{item.getId()}}">
  146.                                     {% endfor %}
  147.                                     </select>
  148.                                 {#</div>#}
  149.                                 <div class="col-md-3">
  150.                                     
  151.                                     {% for item in session %}
  152.                                         
  153.                                         {% if item[0].startdate is defined %}    
  154.                                         <label>Séléctionnez la session de {{item[0].formation.wording}}</label>
  155.                                             <select class="form-control session mt-2" name="session[]" id="session">
  156.                                                     {% for itemsession in item %}
  157.                                                         <option value="{{itemsession.id}}">{{itemsession.getStartDate() | date('d/m/Y') ~' '~itemsession.getEndDate() | date('d/m/Y')}}</option>
  158.                                                     {% endfor %}
  159.                                                     
  160.                                                 
  161.                                             </select>
  162.                                             
  163.                                         {% elseif item[0].lieu is defined%}
  164.                                             <label>Sélectionnez votre date d'examen</label>
  165.                                             <select class="form-control mt-1 " name="examen" id="dateexamen">
  166.                                                 {# if demandeSessionDate is not empty %}
  167.                                                     <option value="{{demandeSession}}" selected>{{demandeSessionDate}}</option>
  168.                                                 {% else #}
  169.                                                     {% for itemsession in item %}
  170.                                                         <option value="{{itemsession.id}}">{{itemsession.dateexamen() | date('d/m/Y') }}</option>
  171.                                                     {% endfor %}
  172.                                                     
  173.                                                 
  174.                                             </select>
  175.                                         {% elseif item[0] is defined and item[0] == "elearning" %}
  176.                                             <label>Définissez votre période de E-learning</label>
  177.                                             <div class="d-flex mt-2">
  178.                                                 Du <input type="date" 
  179.                                                         id="datedebut" 
  180.                                                         {% if carte.duree != null and carte.thinkificFormationId != null %} 
  181.                                                             value="{{ datedebutelearning|date('Y-m-d') }}" 
  182.                                                             class="form-control mx-2 disabled" 
  183.                                                             readonly 
  184.                                                         {% else %}
  185.                                                             class="form-control mx-2" 
  186.                                                         {% endif %} 
  187.                                                         name="datedebut">
  188.                                                 au 
  189.                                                 <input type="date" 
  190.                                                     id="datefin" 
  191.                                                     {% if carte.duree != null and carte.thinkificFormationId != null %} 
  192.                                                         value="{{ datefinelearning|date('Y-m-d') }}" 
  193.                                                     {% endif %} class="form-control ml-2 disabled" readonly name="datefin" style="z-index: 10000000;"> 
  194.                                             </div>
  195.                                         {% elseif item[0] is defined and item[0] == "conduite" %}
  196.                                             <label>Vous avez {{conduitehoure}}H de conduite </label>
  197.                                             <input type="number" class="form-control mt-2" id="conduite" readonly value="{{ conduitehoure }}" required min="1" name="conduite">
  198.                                         {% endif %}
  199.                                         
  200.                                             
  201.                                     {#<input type="hidden" class="form-control" name="session[]"  value="">#}
  202.                                     {% endfor %}
  203.                                      
  204.                                 </div>
  205.                                 {#<div class="col-md-3">
  206.                                     <label>Statut</label><br>
  207.                                     <span id="statut" class="mt-5" style="font-size:20px"></span>
  208.                                 </div>#}
  209.                                 <hr>
  210.                             </div>
  211.                             
  212.                             <button class="btn next mt-2 text-white thead-theme" >Suivant</button>
  213.                         </div>
  214.                         
  215.                          <!-- validation -->
  216.                         <div id="validation-part" class="content" role="tabpanel" aria-labelledby="piece-part-trigger">
  217.                            
  218.                              <div class="row">
  219.                                 <div class="col-md-4">
  220.                                     <label>Nom <span class="red-star" style="font-size:10px;color:red;">★</span></label>
  221.                                     <input type="text" required name="lastname" id="lastname" class='form-control'>
  222.                                 </div>
  223.                                 <div class="col-md-4">
  224.                                     <label>Prénom <span class="red-star" style="font-size:10px;color:red;">★</span></label>
  225.                                     <input type="text" required name="firstname" id="firstname" class='form-control'>
  226.                                 </div>
  227.                                 <div class="col-md-4">
  228.                                     <label>Civilité <span class="red-star" style="font-size:10px;color:red;">★</span></label>
  229.                                     <select required name="civilite" class='form-control form-select'>
  230.                                         <option value="g" selected>Monsieur</option>
  231.                                         <option value="f">Madame</option>
  232.                                     </select>
  233.                                 </div>
  234.                                 <div class="col-md-4">
  235.                                     <label>Téléphone </label>
  236.                                     <input type="text" required name="telephone" id="telephone" class='form-control' >
  237.                                 </div>
  238.                                 <div class="col-md-4">
  239.                                     <label>Email <span class="red-star" style="font-size:10px;color:red;"></span></label>
  240.                                     <input type="email" required name="email" id="email" class='form-control'>
  241.                                 </div>
  242.                                 <input type="hidden" name="paeiement" id="paeiement">
  243.                                
  244.                             </div>
  245.                             
  246.     
  247.                             <button class="btn previous mt-2 text-white thead-theme" >Précédent</button>
  248.                             <button class="btn btn-success mt-2" id="submitPaiement" >Terminer et payer</button>
  249.                             <button class="btn btn-success mt-2" id="submitWithoutPaiement">Terminer et payer en agence</button>
  250.                         </div>
  251.                     </div>
  252.                     </div> <!--end stepper-->
  253.                     </form>
  254.                 </div>
  255.             </div>
  256.         </div>
  257.     </div>
  258. </div>
  259. <!-- modal tier -->
  261.   
  263. </div>
  264.     <footer class="main-footer">
  265.     
  266.     <strong>Copyright &copy; <script>
  267.                         document.write(new Date().getFullYear())
  268.                     </script> </strong>
  269.     Tout droit réserver.
  271.     <!-- jQuery -->
  272. <script src="{{asset('adminn/plugins/jquery/jquery.min.js')}}"></script>
  273. <!-- jQuery UI 1.11.4 -->
  274. <script src="{{asset('adminn/plugins/jquery-ui/jquery-ui.min.js')}}"></script>
  275.   <!-- Required datatable js -->
  276.   <script src="{{asset('adminn/plugins/datatables/jquery.dataTables.min.js')}}"></script>
  278. <script>
  279.   $.widget.bridge('uibutton', $.ui.button)
  280. </script>
  281. <!-- Bootstrap 4 -->
  282. <script src="{{asset('adminn/plugins/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
  284. <!-- daterangepicker -->
  285. <script src="{{asset('adminn/plugins/moment/moment.min.js')}}"></script>
  286. <script src="{{asset('adminn/plugins/daterangepicker/daterangepicker.js')}}"></script>
  287. <!-- Tempusdominus Bootstrap 4 -->
  288. <script src="{{asset('adminn/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js')}}"></script>
  289. <!-- Summernote -->
  290. <script src="{{asset('adminn/plugins/summernote/summernote-bs4.min.js')}}"></script>
  291. <!-- overlayScrollbars -->
  292. <script src="{{asset('adminn/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js')}}"></script>
  293. <!-- AdminLTE App -->
  294. <script src="{{asset('adminn/dist/js/adminlte.js')}}"></script>
  296. <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  297. <!-- Select2 -->
  298. <script src="{{asset('adminn/plugins/select2/js/select2.full.min.js')}}"></script>
  299. <!--setpper-->
  300. <script src="https://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.min.js"></script>
  301. <script src="{{asset('adminn/dist/js/pages/dashboard.js')}}"></script>
  302. <!-- Toastr -->
  303. <script src="{{asset('adminn/plugins/toastr/toastr.min.js')}}"></script>
  305. <script>
  306. let sourceAuto = 1, sourceExt = 0;
  307. let montant = 0; //montant a utiliser dans les calculs
  308. let montantcompany = {{ carte.pricecompany }}, montantpersonal = {{ carte.pricepersonal }}; montantcpf = {{ carte.pricecpf }}, montantcollectivite = {{ carte.pricecollectivite == null ? 0 : carte.pricecollectivite }}, montantexamen = 0; //montant selon la source de financement pour appliquer la remise
  309. $(document).ready(function(){
  310.     $("#submitPaiement").on("click",function (params) {
  312.         params.preventDefault();
  313.         $("#paeiement").val(1);
  314.         if(validateForm())
  315.         document.getElementById("forminscrit").submit();
  316.     });
  318.     $("#submitWithoutPaiement").on("click",function (params) {
  319.         params.preventDefault();
  320.         $("#paeiement").val(2);
  321.         if(validateForm())
  322.         document.getElementById("forminscrit").submit();
  323.     });
  324. });
  325. $("#typeInscrit").on("change",function(params){
  326.     if($("#typeInscrit").val() == "4"){
  327.         $("#submitPaiement").hide();
  328.     }
  329.     else
  330.         $("#submitPaiement").show();
  331. });
  332. /*$(document).ready(function () {
  333.   var stepper = new Stepper($('.bs-stepper')[0])
  334. })*/
  335. var stepper = new Stepper(document.querySelector('.bs-stepper'))
  337.     $('#forminscrit').on('submit', function(){
  338.         $('#loader').removeClass('d-none');
  339.     });
  342. $('#telephone').on('keypress',function (evt) {
  343.      var ASCIICode = (evt.which) ? evt.which : evt.keyCode
  344.                       if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
  345.                           return false;
  346.                       return true;
  347.   })
  348.   $('#conduite').on('keypress',function (evt) {
  349.      var ASCIICode = (evt.which) ? evt.which : evt.keyCode
  350.                       if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
  351.                           return false;
  352.                       return true;
  353.   })
  354.  
  355. //initalization selct2
  357. function demandeInfo(){
  359. }
  361. function validateForm() {
  362.     let x = $("#lastname").val();
  363.     if (x == "") {
  364.         $("#lastname").addClass("is-invalid");
  365.         return false;
  366.     }
  367.      x = $("#firstname").val();
  368.     if (x == "") {
  369.         $("#firstname").addClass("is-invalid");
  370.         return false;
  371.     }
  372.      x = $("#telephone").val();
  373.     if (x == "") {
  374.         $("#telephone").addClass("is-invalid");
  375.         return false;
  376.     }
  377.      x = $("#email").val();
  378.     if (x == "") {
  379.         $("#email").addClass("is-invalid");
  380.         return false;
  381.     }
  382.     return true;
  383. } 
  384. $(function () {
  385.     //Initialize Select2 Elements
  386.     $('.select2').select2()
  388.    });
  389.    
  390.    //demandeInfo();
  391.    //getSession(); // recupere les sessions
  392.    
  395.   $(document).ready(function () {
  396.     $('#montantTotal').on('change', function(){
  397.         checkFormationAmount();
  398.         if(parseFloat($('#montantTotal').val()) < 1.00){
  399.             toastr.error("Le montant de la formation ne peut être égal à 0 €");
  400.         }
  401.     });
  403.     $('.iconCheck').on('click',function(params) {
  404.       $('#datatable').find('input[name="check"]').each(function(){
  405.         if($(this).is(":checked"))
  406.         $(this).prop( "checked", false )
  407.         else
  408.         $(this).prop( "checked", true )
  409.       })
  410.     });
  411.     
  412.     $('.next').on('click',function (params) {        
  413.         /*if(stepper._currentIndex == 0 && $('#tier').val() == '')
  414.         {
  415.             $('#queryTier').addClass('is-invalid');
  416.             return false;
  417.         }
  418.         $('#queryTier').removeClass('is-invalid');*/
  420.         
  421.         if(stepper._currentIndex == 0 )
  422.         {
  423.             $('.session').each(function (index, element) {
  424.                 if($(this).val() == null || $(this).val() == ''){
  425.                     $(this).addClass('is-invalid');
  426.                     return false;
  427.                 }
  428.                 else
  429.                     $(this).removeClass('is-invalid');
  430.             });
  432.             $('.session').removeClass('is-invalid');
  434.             if($('#dateexamen').val()!= undefined && $('#dateexamen').val() == ''){
  435.                 $('#dateexamen').addClass('is-invalid');
  436.                 return false;
  437.             }
  438.             else
  439.                 $('#dateexamen').removeClass('is-invalid');
  441.             if($('#conduite').val()!= undefined && $('#conduite').val() == ''){
  442.                 $('#conduite').addClass('is-invalid');
  443.                 return false;
  444.             }
  445.             $('#conduite').removeClass('is-invalid');
  447.             //choix de la date elearning
  449.             if($('#datedebut').val()!= undefined && $('#datedebut').val() == ''){
  450.                 $('#datedebut').addClass('is-invalid');
  451.                 $('#datefin').addClass('is-invalid');
  452.                 return false;
  453.             }
  454.             else{
  455.                 $('#datedebut').removeClass('is-invalid');
  456.                 $('#datefin').removeClass('is-invalid');
  457.             }
  459.         }
  460.        
  462.       
  463.         
  464.         stepper.next();
  465.         params.preventDefault();
  466.     });
  467.     $('.previous').on('click',function (params) {
  468.         stepper.previous();
  469.         params.preventDefault();
  470.     });
  472.     //controle date de debut elearning
  473.     $('#datedebut').on('change', function(){
  474.         if($('#datedebut').val() == ''){
  475.             $('#datefin').val('');
  476.             return;
  477.         }
  479.         let debut = new Date($('#datedebut').val());
  480.         let fin;
  482.         Date.isLeapYear = function (year) { 
  483.             return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0)); 
  484.         };
  486.         Date.getDaysInMonth = function (year, month) {
  487.             return [31, (Date.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
  488.         };
  490.         Date.prototype.isLeapYear = function () { 
  491.             return Date.isLeapYear(this.getFullYear()); 
  492.         };
  494.         Date.prototype.getDaysInMonth = function () { 
  495.             return Date.getDaysInMonth(this.getFullYear(), this.getMonth());
  496.         };
  498.         Date.prototype.addMonths = function (value) {
  499.             var n = this.getDate();
  500.             this.setDate(1);
  501.             this.setMonth(this.getMonth() + value);
  502.             this.setDate(Math.min(n, this.getDaysInMonth()));
  503.             return this;
  504.         };
  506.         fin = debut.addMonths(2);
  507.         $('#datefin').val(fin.toLocaleString("fr-CA", { year: "numeric" }) + "-" + fin.toLocaleString("fr-CA", { month: "2-digit" }) + "-" + fin.toLocaleString("fr-CA", { day: "2-digit" }));
  509.     });
  511.     
  512.   });
  513.   
  514.   
  517.     function parse(str) {
  518.     var args = [].slice.call(arguments, 1),
  519.         i = 0;
  521.     return str.replace(/'/g,'&quot;');
  522. }
  524.   
  525.   
  526. </script>
  527. <script>
  528.  
  529.     {% for message in app.flashes('messageerror') %}
  530.           toastr.error('{{ message }}');
  531.         {% endfor %}
  532.         {% for message in app.flashes('message') %}
  533.           toastr.error('{{ message }}');
  534.           console.log("dfdfd");
  535.         {% endfor %}
  536.     $("#optioncategorieinscrit").hide(); 
  537.      $(function () {
  538.     //Initialize Select2 Elements
  539.     $('.select2bs4').select2({
  540.       theme: 'bootstrap4'
  541.     })});
  542.    
  543.     </script>
  544.     
  545. </body>
  546. </html>