src/Flexy/FrontBundle/Themes/CoWorking/templates/reservation/reservation-freework-step.html.twig line 1

  1. {% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}
  4. {% block stylesheets %}
  5. {{ parent() }}
  8.  <link rel="stylesheet" href="{{ asset('themes/coworking/css/reservation.css') }}" />
  9.  
  10. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" />
  11. <style>
  12.  
  13.   
  14.   .modal-backdrop.fade.show {
  15.         display: none;
  16. }
  17.  
  18.  
  19. /* css checkbox*/
  21. /* hide checkbox */
  22. input[type="checkbox"] {
  23.   display: none;
  24. }
  26. /* if checkbox is checked, then do these things */
  27. /*input[type="checkbox"]:checked + label {
  28.   color: white;
  29.   background:#FFD86E;
  30.   border-radius: 5px;
  31.   padding: 0px 10px 0px 10px;
  32. }
  34. /* styles when hovering over options */
  35. label:hover {
  37.   cursor: pointer;
  38.   
  39.   /* transitions and animations */
  40.   -webkit-transition: color .5s ease;
  41.   -moz-transition: color .5s ease;
  42.   -ms-transition: color .5s ease;
  43.   -o-transition: color .5s ease;
  44.   transition: color .5s ease;
  45. }
  46. .boutton-step{
  47.   padding:10px; 
  48.   text-decoration:none; 
  49.   width:230px; 
  50.    font-size: 12px;
  51.     font-family: 'PT Sans', sans-serif;
  52.     letter-spacing:2px;
  53. }
  54.   
  55. input.button {
  56.   
  57.     width:130px;
  58.     height:50px;
  59.     margin: 20px 0 30px 0;
  60.     padding: 0px 20px 0px 20px;
  61.     background: #e6e6e6;
  62.     border-radius:5px;
  63.     border: 1px solid #ccc;
  65.     font-family: OpenSans, sans-serif;
  66.     font-size:16pt;
  67.     color:#444;
  68. }
  70. .Addons label{
  71.     font-size:12px !important;
  72.     font-family: 'roboto';
  73.     font-weight: 500;
  74.     border: 1px solid #80808024;
  75.     margin: 2px;
  76.     padding: 0px 5px 0px 5px;
  77.     border-radius: 5px;
  78. }
  79. .multistep-container .active-button li:not(:first-child) .round-btn:before {
  80.     position: absolute;
  81.     content: '';
  82.     width: 141px;
  83.     height: 3px;
  84.     background-color: #E9F2FA;
  85.     left: -120px;
  86. }
  89. .multistep-container .active-button li {
  90.     display: inline-block;
  91.     width: 140px;
  92. }
  94. .form-check {
  95.     line-height: 22px;
  96. }   
  98. .col-md-12.col-lg-12.col-sm-12.d-flex.justify-content-end.align-items-end.mb-3{
  99.         flex: 0 0 86%;
  100. }
  102.  @media (max-width:767px) {
  103.                 html, body {
  104.                   overflow-x: hidden  !important;
  105.                 }
  106.                 body {
  107.                   position: relative !important;
  108.                 }
  109.                 .col-sm-8.reservation-steeps {
  110.                     padding:0%;
  111.                 }
  112.                 .multistep-container .mutistep-form-area .form-box{
  113.                     position: relative;
  114.                     top: 33px;
  115.                     left: 0px;
  116.                 }
  117.                 .multistep-container .active-button li{
  118.                     display: inline-block;
  119.                     width: 100px;
  120.                 }
  121.                 .panel-sticky{
  122.                     font-size:12px;
  123.                 }
  124.               h6.display-6.header-steeps {
  125.                 margin-left: 3%;
  126.             }
  127.             h6.datetime{
  128.                  margin-left: 3%;
  129.             }
  130.             a#seeDetails {
  131.                 margin-bottom: -11%;
  132.             }
  133.             a#seePrice {
  134.                 float: right;
  135.                 margin-right: 52%;
  136.             }
  137.  }
  139.    .titre-page{
  140. margin-top:10px;
  141. font-size: 20px;
  142. line-height:45.29px;
  143. color: #000000;
  144. } 
  146.   li.etape1:before {
  147.     background: #7ED670 !important; /* Change the background color */
  148.     color: white !important;
  149. } 
  150.  .message {
  151.         
  152.                color: white;
  153.             background: rgb(199, 200, 204);
  154.             
  155.             font-size: 15px;
  156.             padding: 20px;
  157.             border-radius: 10px;
  158.             text-align: center;
  159.             font-weight: bold;
  160.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  161.             height: 100px; /* Adjust the height as necessary */
  162.             display: flex;
  163.             align-items: center;
  164.             justify-content: center;
  165.         }
  167. </style>
  169.   
  170. {% endblock  %}
  171. {% block body %}
  172.  
  174.  
  175.  
  177.  
  178.   <img src="{{asset('themes/coworking/front/images/freewor.jpg')}}" style="width: 100%;height: 520px;" class="img-fluid" />
  179.   <div class="container">
  180.     <div class="row justify-content-between">
  181.       <div class="col-sm-8 reservation-steeps">
  182.        
  183.        <div class="row">
  184.           <div class="col-sm-6">
  185.             <h6 class="titre-page">Réservation {{name}}
  186.                 
  188.             </h6>
  189.           </div>
  190.           <div class="col-sm-6" style="margin-top:10px;">
  191.             <a href="/themes/coworking/front/images/FREEWORK.pdf" class="btn-res text-center text-light text-uppercase bg-dark" style="float: right;padding: 8px;border-radius: 6px;font-size:13px;" target="_blank"> NOS TARIFS</a>
  192.           </div>
  193.         </div>
  194.        
  195.        
  196.         <div class="container">
  197.          
  198.               
  199.           
  200.        <div class="container d-flex justify-content-center align-items-center">
  201.          
  202.          
  203.           <ul id="progressbar">
  204.                     <li class="etape1" > 
  205.              <span>   Type </span>
  206.              </li>
  207.                     <li class="active" >  <span> Formule </span></li>
  208.                     <li> Dates</li>
  209.                         <li> Confirmation </li>
  210.            
  211.           
  212.                 </ul>
  213.         </div>
  215.         
  216.             
  217.             <div class="col-xl-12" style="top: 20px;">
  218.               
  219.               <div class="multistep-container">
  220.                 <div class="mutistep-form-area">
  221.                     
  222.                  
  223.                   <div class="form-box">
  224.                 
  225.                      
  226.                  
  227.                        
  228.                             <div class="container" >
  230.                   
  231.               
  232.             
  233.                  <div id="form-attribue" style="line-height: 30px;" class="mt-4"> </div>
  234.                <h5>Veuillez choisir une formule </h5>
  236.                     
  237.                   {% for attr in  attributValues %}
  239.                   {% if attr.code == "simple" %}
  241.                   
  242.                 <div class="form-check"  >
  243.                 <input class="form-check-input option"  data-days="10" data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"  data-price="{{attr.price}}" type="radio" name="radioGroup" class="option" id="radio1" value="{{attr.attribut.name}}" />
  244.                 <label class="form-check-label"  data-days="10" data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"  data-price="{{attr.price}}" for="radio1">{{attr.attribut.name}}</label><br>
  245.                 <small>
  246.                   
  247.                   {{attr.attribut.description}}
  248.                   </small>
  249.                 </div>
  251.                 
  252.                   {% endif %}
  253.                   {% endfor %}
  255.                   
  257.                        {% if attributValues|length > 0 %}
  258.                 
  259.                  <div class="form-check">
  260.                         <input class="form-check-input" type="radio" name="radioGroup" id="radio2" />
  261.                         <label class="form-check-label" for="radio2">Location “Pass jours”</label><br>
  262.                         <small>Cette formule est déclinée comme suit :</small>
  263.                         <select style="padding: 4px;" class="col-6  option " id="serviceFormule" >
  264.                              <option value="" data-price=""  >Sélectionner un choix</option>
  265.                     
  266.                          {% for attr in attributValues %}
  267.                          {% if attr.code == "multiple" %}
  268.                         <option  value="{{attr.attribut.name}}"  data-days="{{attr.attribut.description}}"   data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"  data-price="{{attr.price}}"  >{{attr.attribut.name}}</option>
  269.                         {% endif %}
  270.                         {% endfor %}
  271.                         </select>
  272.                  </div>
  273.                {% endif %}
  275.              {% for attr in  attributValues %}
  276.                    {% if attr.code == "personalized" %}     
  277.                      
  278.                      <div class="form-check">
  279.                       <input class="form-check-input option" data-days="30"  data-id="{{attr.product.id}}" data-name="{{attr.product.name}}" {% if(attr.price is null) %} data-price="0"  {% else %}  data-price="{{attr.price}}"  {% endif %}    type="radio" name="radioGroup"  {% if(attr.attribut.name=="Période personnalisée") %}   value="Mois"   {% else %}  value="{{attr.attribut.name}}" {% endif %}  id="radioMois"    />
  280.                       <label class="form-check-label " data-days="30" data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"   data-price="{{attr.price}}"    for="radio{{ attr.attribut.id}}"  >  {{ attr.attribut.name}}   </label><br>
  281.                       
  282.                        <small> {{ attr.attribut.description}}</small>
  283.                     </div>
  284.                      
  285.                      {% endif %}
  286.                    {% endfor %}
  288.                  
  289.                     <h5 style="font-weight:bold; margin-top: 30px;">Services supplémentaires:</h5>
  290.                     <h6 style="font-weight:bold; margin-top: 30px;">Voulez-vous ajouter des services supplémentaires?</h6>
  291.                     <small style="color:grey">Disponible en location au mois ou à la journée</small>
  292.                     <div class="row">
  293.                          <div class="col-sm-12 Addons">
  294.                             {% for service in  services %}
  296.                                     <input id="{{ service.name}}" data-id="{{service.id}}" data-name="{{service.name}}"  data-price="{{service.price}}" type="checkbox" class="CK" name="services" value="{{ service.id}}"><label for="service"> {{ service.name}}  </label> 
  297.                             {% endfor %}<br>
  299.                               {% for servicesCommun in  servicesCommuns %}
  300.                                     <input id="{{ servicesCommun.name}} " data-id="{{servicesCommun.id}}" data-name="{{servicesCommun.name}}"  data-price="{{servicesCommun.price}}" type="checkbox" class="CK" name="serviceCommun" value="{{ servicesCommun.id}}"><label for="service"> {{ servicesCommun.name}}   </label>
  301.                                       
  302.                               {% endfor %}     
  303.  
  304.                              </div>
  305.                      <!-- <h5 style="font-weight:bold;margin-top: 10px; ">Informations additionnelles </h5>
  306.                      <h6 style="font-weight:bold; margin-top: 10px;">Avez vous des demandes spécifiques ?</h6>
  307.                       <textarea class="form-control" id="textAreaExample1" rows="1" placeholder="Saisissez votre texte Ici" style="font-size: 12px;"></textarea>
  308.                    -->
  309.                     
  310.                     </div>
  312.                <div class="message" style=" display: none;">Les Services supplémentaires sont indisponibles pour cette sélection.</div>
  314.                  </div>
  315.                             
  316.                             
  317.                      <div class="button-row">
  318.                          
  319.             <a href="{{path("reservationfreework")}}" style="border:1px solid #FFCB00 !important; color:black !important; background: #ffff !important;"  class="btn-res text-center text-light text-uppercase bg-dark ReserveNext__ boutton-step" >Étape précédente</a>
  320.             &nbsp;&nbsp;
  321.              <a href="{{path("reservationstep2",{id:product, 'paramFormule': 'days'})}}" style="background: #FFCB00 !important;"  id="reservationLink" class="btn-res text-center text-light text-uppercase bg-dark ReserveNext__ boutton-step">Étape suivante</a>
  322.             
  323.                       </div>      
  324.                      
  326.            
  328.                     
  329.                    
  330.                   </div>
  331.                    
  333.                 
  334.                 </div>
  335.               </div>
  336.             </div>
  337.           </div>
  338.          
  339.          
  341.       </div>
  342.           <div class="col-sm-4 reservation-steeps-panier" style="overflow-y: auto;">
  343.       
  344.         {{render(path("ajax_cart"))}}
  345.     </div>
  346.     </div>
  347.   </div>
  348.   
  349.   
  350. {% endblock %}
  357. {% block javascripts %}
  358.   <!-- MAIN CONTENT -->
  359.  
  360. <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  361. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  362.  
  363.  
  366. <script>
  368.     //recuperer la valeur des jours dans le formulaire .
  369.     document.getElementById('reservationLink').addEventListener('click', function() {
  370.          
  371.         var days=0;
  372.         var selectedOption = document.getElementById('serviceFormule');
  373.          var selected = selectedOption.value;
  374.           if(selected != ""){
  375.            days = selectedOption.options[selectedOption.selectedIndex].getAttribute('data-days');
  377.           }else{
  378.          var radioButtons = document.getElementsByName('radioGroup');
  379.           for (var i = 0; i < radioButtons.length; i++) {
  380.             if (radioButtons[i].checked) {
  381.              days = parseInt(radioButtons[i].getAttribute('data-days'));
  382.             break;
  383.             }
  384.         }  }
  385.             
  386.  if (days === 0) {
  387.         event.preventDefault(); // Empêche le lien de se déclencher
  388.         alert("Vous n'avez rien sélectionné. Veuillez sélectionner une option.");
  389.     }  
  390.         var link = document.getElementById('reservationLink');
  391.         link.href = "{{ path('reservationstep2', {id: product, 'paramFormule': 'days'}) }}".replace('days', days);
  392.     
  393.            });
  395.   
  396.     $(document).ready(function(){
  399.  $('input[type=radio][name=radioGroup]').click(function() {
  400.     //$('input[type=checkbox]').prop('checked', false);
  401. });
  402.  
  403.   $('#serviceFormule').change(function(){ 
  404.        var radio = document.getElementById('radio2');
  405.             radio.checked = true;
  406.              $('.Addons').show();
  407.              $('.message').hide();
  408.              // $('input[type=checkbox]').prop('checked', false); 
  409.     
  410.       });
  411.       
  416.       var radioButtons = document.getElementsByName('radioGroup');
  417.  var selectElement = document.getElementById('serviceFormule');
  419. radioButtons.forEach(function(radio) {
  420.     radio.addEventListener('click', function() {
  422.      
  423.         if (radio.id === 'radio2') {
  424.               $('.Addons').show();
  425.              $('.message').hide()
  426.             selectElement.disabled = false;
  427.          var idProduct = $('option:nth-child(2)').attr("data-id");
  428.           var price = $('option:nth-child(2)').attr("data-price");
  429.            var name = $('option:nth-child(2)').attr("data-name");
  430.           var actionType = "add";
  431.     
  433.     $.ajax({
  434.       url:"{{path('ajax_cart')}}",
  435.       data:{
  436.         idProduct:idProduct,
  437.         price:price,
  438.         name:name,
  439.         actionType:actionType
  440.       },
  441.       success:function(result){
  442.         console.log(result);
  443.           $(".reservation-steeps-panier").html(result);
  444.       }
  445.     });
  446.             
  447.               selectElement.val($('option:nth-child(2)').prop('selected', true));
  448.         } else if(radio.id === 'radio1'){
  449.                
  450.                     $('.Addons').hide();
  451.                     $('.message').show();
  453.         } 
  454.         
  455.         else {
  456.             selectElement.selectedIndex = 0; // Sélection du premier élément
  457.             selectElement.disabled = true;
  458.              $('.Addons').show();
  459.                     $('.message').hide();
  460.         }
  461.     });
  462. });
  465.       
  468.          $('body').on("click",".option",function() {
  469.         
  470.            /*var selectedServiceIds = [];
  471.            var formule ="";
  472.             formule = $(".radio1").val();*/
  473.               if ($(this).is(':checked')) {  
  474.         var formule = $(this).val(); 
  475.        
  476.     }
  477.             
  478.              $('.CK:checked').each(function() {
  479.         // Ajouter l'ID du service sélectionné à la liste
  480.        // selectedServiceIds.push($(this).data('id'));
  481.   
  482.            var currentCheckbox = $(this);
  484.           $.ajax({
  485.                 url: '/reservation/ajax-service-price',
  486.                 type: 'GET', // ou 'GET' en fonction de votre besoin
  487.                 data: { 
  488.                   serviceId : $(this).data('id'),
  489.                   formule : formule
  490.                  },
  491.                 success: function(response) {
  492.                     currentCheckbox.attr('data-price', response);
  494.                     var idProduct = currentCheckbox.attr("data-id");
  495.                     var price = currentCheckbox.attr("data-price");
  496.                     var name = currentCheckbox.attr("data-name");
  497.                    
  498.                     if(price != 0){
  499.                     var actionType = "add";
  500.                      currentCheckbox.next('label').css({'color': 'white', 'background': 'rgb(255, 216, 110)'});
  501.                     }else{
  502.                       var actionType = "remove";
  503.                       currentCheckbox.next('label').css({'color': 'white', 'background': '#C7C8CC'});
  504.                     }
  505.                     
  506.              $.ajax({
  507.                 url:"{{path('ajax_cart')}}",
  508.                 data:{
  509.                   idProduct:idProduct,
  510.                   price:price,
  511.                   name:name,
  512.                   actionType:actionType
  513.                 },
  514.                 success:function(result){
  515.                   console.log(result);
  516.                     $(".reservation-steeps-panier").html(result);
  517.                 }
  518.               });
  520.                             
  521.                        
  522.         },
  523.                 error: function(xhr, status, error) {
  524.                     // Gérez les erreurs ici
  525.                     console.error(error);
  526.                 }
  527.             });
  529.          
  530.   
  532.           
  533.     
  534.         
  535.     });
  537.         
  538.           
  539.     var idProduct = $(this).attr("data-id");
  540.     var price = $(this).attr("data-price");
  541.     var name = $(this).attr("data-name");
  542.     var actionType = "add";
  544.     $.ajax({
  545.       url:"{{path('ajax_cart')}}",
  546.       data:{
  547.         idProduct:idProduct,
  548.         price:price,
  549.         name:name,
  550.         actionType:actionType
  551.       },
  552.       success:function(result){
  553.         console.log(result);
  554.           $(".reservation-steeps-panier").html(result);
  555.       }
  556.     });
  557.     });
  559.     
  560.              $('body').on("change","select.option",function() {
  562.  var selectedServiceIds = [];
  563.                  if($("#serviceFormule").val() != "" || $("#radio3").val() != ""){
  564.          if($("#serviceFormule").val() != "" ){
  565.                  formule =$("#serviceFormule").val();
  566.                 }else{
  567.                  formule = $(".radio1").val();
  568.                 }
  569.           }
  571.             // Parcourir toutes les cases cochées avec la classe CK
  572.     $('.CK:checked').each(function() {
  573.         // Ajouter l'ID du service sélectionné à la liste
  574.        // selectedServiceIds.push($(this).data('id'));
  575.   
  576.            var currentCheckbox = $(this);
  578.           $.ajax({
  579.                 url: '/reservation/ajax-service-price',
  580.                 type: 'GET', // ou 'GET' en fonction de votre besoin
  581.                 data: { 
  582.                   serviceId : $(this).data('id'),
  583.                   formule : formule
  584.                  },
  585.                 success: function(response) {
  586.                     currentCheckbox.attr('data-price', response);
  588.                     var idProduct = currentCheckbox.attr("data-id");
  589.                     var price = currentCheckbox.attr("data-price");
  590.                     var name = currentCheckbox.attr("data-name");
  592.                     if(price != 0){
  593.                     var actionType = "add";
  594.                      currentCheckbox.next('label').css({'color': 'white', 'background': 'rgb(255, 216, 110)'});
  595.                     }else{
  596.                       var actionType = "remove";
  597.                       currentCheckbox.next('label').css({'color': 'white', 'background': '#C7C8CC'});
  598.                     }
  599.                
  600.              $.ajax({
  601.                 url:"{{path('ajax_cart')}}",
  602.                 data:{
  603.                   idProduct:idProduct,
  604.                   price:price,
  605.                   name:name,
  606.                   actionType:actionType
  607.                 },
  608.                 success:function(result){
  609.                   console.log(result);
  610.                     $(".reservation-steeps-panier").html(result);
  611.                 }
  612.               });
  614.                             
  615.                        
  616.         },
  617.                 error: function(xhr, status, error) {
  618.                     // Gérez les erreurs ici
  619.                     console.error(error);
  620.                 }
  621.             });
  623.          
  624.   
  626.           
  627.     
  628.         
  629.     });
  631.     
  634.       
  635.               
  636.           
  637.     var idProduct = $(this).find("option:selected").attr("data-id");
  638.     var price = $(this).find("option:selected").attr("data-price");
  639.     var name = $(this).find("option:selected").attr("data-name");
  640.     var actionType = "add";
  641.   
  642.    
  644.     $.ajax({
  645.       url:"{{path('ajax_cart')}}",
  646.       data:{
  647.         idProduct:idProduct,
  648.         price:price,
  649.         name:name,
  650.         actionType:actionType
  651.       },
  652.       success:function(result){
  653.         console.log(result);
  654.           $(".reservation-steeps-panier").html(result);
  655.       }
  656.     });
  657.     });
  660.           $('body').on("click",".delete-cart-item",function() {
  662.           
  663.     var idProduct = $(this).attr("data-id");
  664.     var price = $(this).attr("data-price");
  665.     var name = $(this).attr("data-name");
  666.     var actionType = "remove";
  668.     $.ajax({
  669.       url:"{{path('ajax_cart')}}",
  670.       data:{
  671.         idProduct:idProduct,
  672.         price:price,
  673.         name:name,
  674.         actionType:actionType
  675.       },
  676.       success:function(result){
  677.         console.log(result);
  678.           $(".reservation-steeps-panier").html(result);
  679.       }
  680.     });
  681.         
  682.         
  684.     
  685.     });
  688.       $('body').on("click",".delete-cart-item",function() {
  690.                 
  691.           var idProduct = $(this).attr("data-id");
  692.           var price = $(this).attr("data-price");
  693.           var name = $(this).attr("data-name");
  694.           var actionType = "remove";
  696.           $.ajax({
  697.             url:"{{path('ajax_cart')}}",
  698.             data:{
  699.               idProduct:idProduct,
  700.               price:price,
  701.               name:name,
  702.               actionType:actionType
  703.             },
  704.             success:function(result){
  705.               console.log(result);
  706.                 $(".reservation-steeps-panier").html(result);
  707.             }
  708.           });
  709.           });
  710.         // Ajouter la délégation d'événements pour le clic sur le label 'service'
  712.    $('label[for="service"]').click(function(){ 
  713.  
  714.     var checkBox = $(this).prev();
  715.     var value = checkBox.val();
  716.     if (checkBox.is(":checked")) {
  717.         checkBox.prop('checked', false);
  718.         console.log("Case à cocher décochée : " + value);
  719.          checkBox.next('label').css({ 'color': '#626262' ,'background': 'none'});
  720.   var idProduct = checkBox.attr("data-id");
  721.     var price = checkBox.attr("data-price");
  722.     var name = checkBox.attr("data-name");
  723.     var actionType = "remove";
  724.       $.ajax({
  725.       url:"{{path('ajax_cart')}}",
  726.       data:{
  727.         idProduct:idProduct,
  728.         price:price,
  729.         name:name,
  730.         actionType:actionType
  731.       },
  732.       success:function(result){
  733.         console.log(result);
  734.           $(".reservation-steeps-panier").html(result);
  735.       }
  736.     });
  738.     } else {
  739.         checkBox.prop('checked', true);
  740.         console.log("Case à cocher cochée : " + value);
  741.         var formule = "";
  742.  
  743.        
  744.               if($("#serviceFormule").val() != "" || $("#radio3").val() != ""){
  745.                 if($("#serviceFormule").val() != "" ){
  746.                  formule =$("#serviceFormule").val();
  747.                 }
  748.                   else if ($('#radio1').is(':checked')) {
  749.                   formule = $(".radio1").val();
  750.                  }
  751.                  else if ($('#radio1').is(':checked')) {
  752.                   formule = $("#radio1").val();
  753.                  }
  754.                   else if ($('#radioMois').is(':checked')) {
  755.                   formule = $("#radioMois").val();
  756.                  }
  757.               
  758.                  
  759.               var serviceId = $(this).prev().data('id');
  760.               var dataElement = $(this).prev();
  761.       
  762.              $.ajax({
  763.                 url: '/reservation/ajax-service-price',
  764.                 type: 'GET', // ou 'GET' en fonction de votre besoin
  765.                 data: { 
  766.                   serviceId : value,
  767.                   formule : formule
  768.                  },
  769.                 success: function(response) {
  770.                     
  771.                      dataElement.attr("data-price", response);
  772.                      var idProduct = dataElement.attr("data-id");
  773.                     var price = dataElement.attr("data-price");
  774.                     var name = dataElement.attr("data-name");
  775.                     var actionType = "add";
  776.             if(price != 0 ){
  777.                 $.ajax({
  778.                 url:"{{path('ajax_cart')}}",
  779.                 data:{
  780.                   idProduct:idProduct,
  781.                   price:price,
  782.                   name:name,
  783.                   actionType:actionType
  784.                 },
  785.                 success:function(result){
  786.                   console.log(result);
  787.                     $(".reservation-steeps-panier").html(result);
  788.                 }
  789.               });
  790.                checkBox.next('label').css({ 'color': 'white' ,'background': '#FFD86E'});
  791.                  
  792.                    }else {
  793.                 // Si le prix est égal à zéro, changer le fond du checkbox en gris
  794.                 checkBox.next('label').css({'color': 'white', 'background': '#C7C8CC'});
  795.             }    
  797.                  
  798.    
  800.                 },
  801.                 error: function(xhr, status, error) {
  802.                     // Gérez les erreurs ici
  803.                     console.error(error);
  804.                 }
  805.             });
  806.             }
  807.     }
  808. });
  809.  
  812.  var radioButtons = document.getElementsByName('radioGroup');
  814. for (var i = 0; i < radioButtons.length; i++) {
  815.     if (radioButtons[i].checked) {
  816.         var selectedValue = radioButtons[i].value;
  817.         break;
  818.     }
  819. }
  821. console.log(selectedValue); // Vous pouvez utiliser la valeur comme vous le souhaitez ici
  823.     });
  825.    
  827.  
  828.  
  829. </script>
  831.  
  832. {% endblock %}