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

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