src/Flexy/FrontBundle/Themes/CoWorking/templates/reservation/reservation-meeting-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.   
  12.   .form-check {
  13.  
  14.     min-height: 1.9rem !important;
  15.     }
  17.   .modal-backdrop.fade.show {Théâtre
  18.         display: none;
  19. }
  20.  
  21.  
  22. /* css checkbox*/
  24. /* hide checkbox */
  25. input[type="checkbox"] {
  26.   display: none;
  27. }
  29. /* if checkbox is checked, then do these things */
  30. /*input[type="checkbox"]:checked + label {
  31.   color: white;
  32.   background:#FFD86E;
  33.   border-radius: 5px;
  34.   padding: 0px 10px 0px 10px;
  35. }
  37. /* styles when hovering over options */
  38. label:hover {
  40.   cursor: pointer;
  41.   
  42.   /* transitions and animations */
  43.   -webkit-transition: color .5s ease;
  44.   -moz-transition: color .5s ease;
  45.   -ms-transition: color .5s ease;
  46.   -o-transition: color .5s ease;
  47.   transition: color .5s ease;
  48. }
  49. .boutton-step{
  50.   padding:10px; 
  51.   text-decoration:none; 
  52.   width:230px; 
  53.    font-size: 12px;
  54.     font-family: 'PT Sans', sans-serif;
  55.     letter-spacing:2px;
  56. }
  57.   
  58. input.button {
  59.   
  60.     width:130px;
  61.     height:50px;
  62.     margin: 20px 0 30px 0;
  63.     padding: 0px 20px 0px 20px;
  64.     background: #e6e6e6;
  65.     border-radius:5px;
  66.     border: 1px solid #ccc;
  68.     font-family: OpenSans, sans-serif;
  69.     font-size:16pt;
  70.     color:#444;
  71. }
  73. .Addons label{
  74.     font-size:12px !important;
  75.     font-family: 'roboto';
  76.     font-weight: 500;
  77.     border: 1px solid #80808024;
  78.     margin: 2px;
  79.     padding: 0px 5px 0px 5px;
  80.     border-radius: 5px;
  81. }
  82. .multistep-container .active-button li:not(:first-child) .round-btn:before {
  83.     position: absolute;
  84.     content: '';
  85.     width: 141px;
  86.     height: 3px;
  87.     background-color: #E9F2FA;
  88.     left: -120px;
  89. }
  92. .multistep-container .active-button li {
  93.     display: inline-block;
  94.     width: 140px;
  95. }
  97. .form-check {
  98.     line-height: 22px;
  99. }   
  101. .col-md-12.col-lg-12.col-sm-12.d-flex.justify-content-end.align-items-end.mb-3{
  102.         flex: 0 0 86%;
  103. }
  105.  @media (max-width:767px) {
  106.                 html, body {
  107.                   overflow-x: hidden  !important;
  108.                 }
  109.                 body {
  110.                   position: relative !important;
  111.                 }
  112.                 .col-sm-8.reservation-steeps {
  113.                     padding:0%;
  114.                 }
  115.                 .multistep-container .mutistep-form-area .form-box{
  116.                     position: relative;
  117.                     top: 33px;
  118.                     left: 0px;
  119.                 }
  120.                 .multistep-container .active-button li{
  121.                     display: inline-block;
  122.                     width: 100px;
  123.                 }
  124.                 .panel-sticky{
  125.                     font-size:12px;
  126.                 }
  127.               h6.display-6.header-steeps {
  128.                 margin-left: 3%;
  129.             }
  130.             h6.datetime{
  131.                  margin-left: 3%;
  132.             }
  133.             a#seeDetails {
  134.                 margin-bottom: -11%;
  135.             }
  136.             a#seePrice {
  137.                 float: right;
  138.                 margin-right: 52%;
  139.             }
  140.  }
  141.     
  142.      li.etape1:before {
  143.     background: #7ED670 !important; /* Change the background color */
  144.     color: white !important;
  145. }
  147.   .titre-page{
  148. margin-top:10px;
  149. font-size: 20px;
  150. line-height:45.29px;
  151. color: #000000;
  152. } 
  155. .radio-buttons {
  156.   display: flex;
  157. }
  159. .radio-buttons input[type="radio"] {
  160.   display: none;
  161. }
  163. .radio-buttons label {
  164.   display: block;
  165.   margin-right: 40px;
  166.   cursor: pointer;
  167. }
  169. .radio-buttons label img {
  170.   border-radius: 10px;
  171.   width: 100px;  
  172.   height: 110px;  
  173.   box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
  175. }
  176. .radio-buttons input[type="radio"]:checked + label img {
  177.   border: 2px solid #FFCB00 ; /* Style pour indiquer la sélection, vous pouvez personnaliser */
  178. }
  179.  
  182. </style>
  184.   
  186.   
  187. {% endblock  %}
  188. {% block body %}
  189.  
  191.  
  192.  
  194.  
  195.   <img src="{{asset('themes/coworking/front/images/sallereunion.jpg')}}" style="width: 100%;height: 520px;" class="img-fluid" />
  196.   <div class="container">
  197.     <div class="row justify-content-between">
  198.       <div class="col-sm-8 reservation-steeps">
  199.        
  200.        <div class="row">
  201.           <div class="col-sm-8">
  202.             <h6 class="titre-page">Réservation {{name}}
  203.                 
  205.             </h6>
  206.           </div>
  207.           <div class="col-sm-4" style="margin-top:10px;">
  208.             <a href="/themes/coworking/front/images/prixSalles.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>
  209.           </div>
  210.         </div>
  211.        
  212.        
  213.         <div class="container">
  214.          
  215.               
  216.                    
  217.   <div class="container d-flex justify-content-center align-items-center">
  218.          
  219.          
  220.           <ul id="progressbar">
  221.          <li class="etape1"> <span> Type</span>  </li>
  222.         <li class="active" > Formule </li>
  223.         <li> Dates</li>
  224.         <li> Confirmation</li>
  225.            
  226.           
  227.                 </ul>
  228.         </div>
  229.             
  230.             <div class="col-xl-12" style="top: 20px;">
  231.               
  232.               <div class="multistep-container">
  233.                 <div class="mutistep-form-area">
  234.                     
  235.                  
  236.                   <div class="form-box">
  237.                 
  238.                     
  239.                  
  240.                        
  241.                             <div class="container" >
  243.                   
  244.               
  245.                
  246.                  <div id="form-attribue" style="line-height: 20px;" class="mt-4"> 
  247.                <h5>Veuillez choisir une formule </h5>
  249.                    
  250.                 
  253.                   {% for attr in  attributValues %}
  254.                    {% if attr.code == "check" %}     
  255.                     
  256.                      <div class="form-check">
  257.                       <input class="form-check-input option" data-time="{{attr.attribut.name}}"  data-days="{{ attr.attribut.description}}" data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"  data-price="{{attr.price}}" class="option"   type="radio" name="radioGroup" id="radio{{ attr.attribut.id}}" value="{{attr.attribut.name}}"  />
  258.                       <label class="form-check-label"  data-time="{{attr.attribut.name}}"  data-days=" {{ attr.attribut.description}}" data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"   data-price="{{attr.price}}"    for="radio{{ attr.attribut.id}}">  {% if(attr.attribut.name == "1 Jour") %} Journée entière  {% else %} {{attr.attribut.name}}  {% endif %}  </label><br>
  259.                       {% if(attr.attribut.name == "Demi-Journée") %} 
  261.                     
  262.                    
  263.                      <small>Choisir une plage horaire :</small>
  264.                       <select class="form-select" id="plage-horaire" style="width: 37%;" name="plage-horaire" disabled>
  265.                           <option value=""> Plage horaire</option>
  266.                         <option value="matin">Matin (8h00-13h00)</option>
  267.                         <option value="apres-midi">Après-midi (13h00-18H00)</option>
  268.                       </select>
  269.              
  270.                       {% endif %} 
  271.                       
  272.                     </div>
  273.                      
  274.                      {% endif %}
  275.                    {% endfor %}
  277.                     {% for attr in  attributValues %}
  279.                   {% if attr.code == "simple" %}
  281.                   
  282.                 <div class="form-check"  >
  283.                 <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}}" />
  284.                 <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>
  285.                 <small>
  286.                   
  287.                   {{attr.attribut.description}}
  288.                   </small>
  289.                 </div>
  291.                 
  292.                   {% endif %}
  293.                   {% endfor %}
  295.                      {#  {% if attributValues|length > 0 %}
  296.                 
  297.                 <!-- <div class="form-check">
  298.                         <input class="form-check-input" type="radio" name="radioGroup" id="radio2" />
  299.                         <label class="form-check-label" for="radio2">Location “Pass jours”</label><br>
  300.                         <small>Cette formule est déclinée comme suit :</small>
  301.                         <select style="padding: 4px;" class="col-6  option " id="serviceFormule" >
  302.                              <option value="" data-price=""  >Sélectionner un choix</option>
  303.                     
  304.                          {% for attr in attributValues %}
  305.                          {% if attr.code == "multiple" %}
  306.                         <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>
  307.                         {% endif %}
  308.                         {% endfor %}
  309.                         </select>
  310.                  </div>-->
  311.                {% endif %}  #} 
  313.              {% for attr in  attributValues %}
  314.                    {% if attr.code == "personalized" %}     
  315.                     
  316.                      <div class="form-check">
  317.                       <input class="form-check-input"  data-days="30" data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"  data-price="{{attr.price}}"   type="radio" name="radioGroup" id="radio{{ attr.attribut.id}}"  />
  318.                       <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>
  319.                       
  320.                        <small> {{ attr.attribut.description}}</small>
  321.                     </div>
  322.                      
  323.                      {% endif %}
  324.                    {% endfor %}
  325.                    
  326.                  {% set room = name|replace({'Meeting room ': ''}) %}
  327.                  {% set targetRooms = ['Omega', 'Beta', 'Epsilon', 'Alpha', 'Delta'] %}
  328.                  {% set isDisabled = room in targetRooms %}
  329.                  
  330.                     <h5 style="font-weight:bold; margin-top: 20px;{% if isDisabled %}opacity: 0.5; pointer-events: none;{% endif %}" >Veuillez choisir une disposition de la salle  </h5>
  331.                    <!-- <select class="form-select" aria-label="Default select example" name="disposition"  id="disposition" style="width: 50%;">
  332.                      <option value="">Sélectionnez un choix</option>
  333.                       <option value="u">U</option>
  334.                       <option value="Théâtre">Théâtre</option>
  335.                       <option value="Ecole">Ecole</option>
  336.                       
  337.                     </select>-->
  338.                      <div class="radio-buttons">
  339.                     <input type="radio" id="u" name="disposition" value="u" required  {% if isDisabled %} disabled{% endif %} >
  340.                     <label for="u">
  341.                         <img src="{{asset('themes/coworking/front/images/U.png')}}"  style="width: 110px;height: 100px;{% if isDisabled %}opacity: 0.5; pointer-events: none;{% endif %}" class="img-fluid"  title="Disposition U"/>
  342.                     <br>
  343.                       {% if dispotionU != 0 %}
  344.                     <div class="text-center mt-1"><small>{{dispotionU}} Personnes max</small> </div>
  345.                          {% endif  %}
  346.                     </label>
  348.                     <input type="radio" id="theatre" name="disposition" value="Théâtre"  {% if isDisabled %}disabled{% endif %} >
  349.                     <label for="theatre">
  350.                      <img src="{{asset('themes/coworking/front/images/theatre.png')}}" style="width: 110px;height: 100px;{% if isDisabled %}opacity: 0.5; pointer-events: none;{% endif %}" class="img-fluid"  title="Disposition Théâtre" />
  351.                     <br>
  352.                         {% if dispotionTheatre != 0 %}
  353.                     <div class="text-center mt-1"><small>{{dispotionTheatre}} Personnes max</small></div>
  354.                          {% endif  %}
  355.                     </label>
  357.                     <input type="radio" id="ecole" name="disposition" value="Ecole"  {% if isDisabled %}disabled{% endif %} >
  358.                     <label for="ecole">
  359.                       <img src="{{asset('themes/coworking/front/images/ecole.png')}}" style="width: 110px;height: 100px;{% if isDisabled %}opacity: 0.5; pointer-events: none;{% endif %}" class="img-fluid" title="Disposition École" />
  360.                      <br>
  361.                       {% if dispotionEcole != 0 %}
  362.                     <div class="text-center mt-1"><small>{{dispotionEcole}} Personnes max </small></div>
  363.                          {% endif  %}
  364.                     </label>
  365.                   </div>
  366.                    <div class="row">
  367.                   <div class="col-md-4">
  368.                       <label for="nbr" style="font-size: 12px;{% if isDisabled %}opacity: 0.5; pointer-events: none;{% endif %}">Le nombre approximatif de personnes présentes :</label>
  369.                   </div>
  370.                   <div class="col-md-4">
  371.                       <input type="number"  id="nbr_personne" name="nbr_personne"  class="form-control" style="width:40%;{% if isDisabled %}disabled{% endif %}" min="1"/>
  372.                   </div>
  373.               </div>
  374.                     <h5 style="font-weight:bold; margin-top: 22px;">Services supplémentaires</h5>
  375.                     <h6 style="font-weight:bold; margin-top: 22px;">Voulez-vous ajouter des services supplémentaires?</h6>
  376.                    <!-- <small style="color:grey">Disponible en location au mois ou à la journée</small>-->
  377.                     <div class="row">
  378.                          <div class="col-sm-12 Addons">
  379.                             {% for service in  services %}
  381.                                     <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> 
  382.                             {% endfor %}<br>
  383.                             
  384.                               {% set isSimple = false %}
  385.                                 {% for attr in attributValues %}
  386.                                     {% if attr.code == "simple" %}
  387.                                         {% set isSimple = true %}
  388.                                     {% endif %}
  389.                                 {% endfor %}
  390.                                 
  391.                             {% for servicesCommun in  servicesCommuns %}
  392.                                {% if not isSimple %}
  393.                                {% if servicesCommun.id not in [94, 92, 69]  %}
  394.                             <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 }} ">
  395.                             <label for="service"> {{ servicesCommun.name }} </label>
  396.                              {% endif %}
  397.                             {% else %}
  398.                         <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 }} ">
  399.                         <label for="service"> {{ servicesCommun.name }} </label>
  400.                            {% endif %}
  401.                               {% endfor %}
  403.                               {#{% for servicesCommun in  servicesCommuns %}
  404.                                     <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>
  405.                                       
  406.                               {% endfor %}#}     
  407.  
  408.                              </div>
  409.                      
  410.                     
  411.                     </div>
  412.  
  413.                      <!--<h6 style="font-weight:bold; margin-top: 10px;">Avez vous des demandes spécifiques ?</h6>
  414.                       <textarea class="form-control" name="demande" id="textAreaExample1" rows="1" placeholder="Saisissez votre texte Ici" style="font-size: 12px;"></textarea>
  415.                    -->
  417.                   </div>
  418.               
  420.                                
  421.                     
  422.               
  423.                  </div>
  424.                     <div class="button-row">
  425.                          
  426.             <a href="{{path("reservationsallereuninon")}}"  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>
  427.             &nbsp;&nbsp;
  428.              <a href="{{path("reservationMeetingNext",{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>
  429.             
  430.                       </div> 
  431.                             
  432.                             
  433.                            
  434.                      
  436.            
  438.                     
  439.                    
  440.                   </div>
  441.                    
  443.                 
  444.                 </div>
  445.               </div>
  446.             </div>
  447.           
  448.         </div>
  449.          
  450.       
  451.       </div>
  453.          <div class="col-sm-4 reservation-steeps-panier" style="overflow-y: auto;">
  454.       
  455.         {{render(path("ajax_cart"))}}
  456.     </div>
  457.     </div>
  458.   </div>
  459.   
  460.   
  461. {% endblock %}
  468. {% block javascripts %}
  469.   <!-- MAIN CONTENT -->
  470.  
  472. <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  473. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  474.  
  475.  
  477. <script>
  479.   //recuperer la valeur des jours dans le formulaire .
  480.     document.getElementById('reservationLink').addEventListener('click', function() {
  482.       
  483.          var errors = ""; // Variable pour stocker les messages d'erreur
  485.         var days=0;
  486.         var check=false;
  487.         var time ="";
  488.         var isChecked = false;
  489.          var selectValue = $('#plage-horaire').val();
  490.         //var disposition = $('#disposition').val();
  491.            // Obtention de la valeur de l'option de disposition sélectionnée
  492.          var disposition = $('input[name="disposition"]:checked').val(); 
  493.          var nbrApproximatif  = $('input[name="nbr_personne"]').val(); 
  494.         
  495.      
  496.       
  497.           
  498.          var radioButtons = document.getElementsByName('radioGroup');
  500.          
  503.           for (var i = 0; i < radioButtons.length; i++) {
  504.             if (radioButtons[i].checked) {
  505.              days = parseInt(radioButtons[i].getAttribute('data-days'));
  506.              time = radioButtons[i].getAttribute('data-time');
  507.             break;
  508.             }
  509.         } 
  510.         
  511.         if(time == "Horaire" ){
  512.           check = true;
  513.         }
  514.         
  515.         
  516.         
  517.        
  518.         
  519.    // Vérification pour la plage horaire
  520.      if (time == "DEMI JOURNÉE" && selectValue == "") {
  521.         errors += "Veuillez sélectionner une plage horaire.\n";
  522.     }
  523.    
  524.          
  525.           
  526.     if (days === 0 && !isChecked) {
  527.       
  528.          errors += "Vous n'avez rien sélectionné, Veuillez sélectionner une option.\n";
  529.   
  530.     }
  531.     
  532.       // Récupération du texte du titre de la page
  533.     var excludedNames = ["Omega", "Beta", "Epsilon", "Alpha", "Delta"];
  534.     var pageTitle = document.querySelector('.titre-page').textContent.trim();
  535.     var titleEndsWithExcludedName = excludedNames.some(name => pageTitle.endsWith(name));
  536.     
  537.     
  538.      // Vérification pour la disposition
  539.     if (!disposition && !titleEndsWithExcludedName )  {
  540.         
  541.         errors += "Veuillez sélectionner une disposition.\n";
  542.     }
  543.      
  545.     // Affichage des erreurs (s'il y en a)
  546.     if (errors !== "") {
  547.         event.preventDefault(); // Empêche le lien de se déclencher
  548.         alert(errors);
  549.     }
  550.   
  551.    
  552.     
  553.         var link = document.getElementById('reservationLink');
  554.         link.href = "{{ path('reservationMeetingNext', {id: product, 'paramFormule': 'days', 'Horai12': 'VALUE', 'dIS34': 'VALUE2', 'time': 'VALUE3','proxim':'VALUE4'}) }}".replace('days', days).replace('VALUE', selectValue).replace('VALUE2', disposition).replace('VALUE3', check).replace('VALUE4',nbrApproximatif);
  555.     });
  557.   
  558.     $(document).ready(function(){
  561.     var select= $('#plage-horaire');
  563.       $('input[name="radioGroup"]').change(function(){
  564.         if ($(this).attr('id') === 'radio24') {
  565.           select.prop('disabled', false);
  566.         } else {
  567.           select.prop('selectedIndex', 0).prop('disabled', true);
  568.         }
  569.       });
  574.  $('input[type=radio][name=radioGroup]').click(function() {
  575.    // $('input[type=checkbox]').prop('checked', false);
  576. });
  577.      
  579.  $('#serviceFormule').change(function(){ 
  580.    var radio = document.getElementById('radio2');
  581.         radio.checked = true;
  582.         
  583.   //$('input[type=checkbox]').prop('checked', false); 
  584.           
  586.   });
  588.    
  590.   var radioButtons = document.getElementsByName('radioGroup');
  591.  var selectElement = document.getElementById('serviceFormule');
  593. radioButtons.forEach(function(radio) {
  594.     radio.addEventListener('click', function() {
  595.         if (radio.id === 'radio2') {
  596.             selectElement.disabled = false;
  597.            
  598.           var idProduct = $('option:nth-child(2)').attr("data-id");
  599.           var price = $('option:nth-child(2)').attr("data-price");
  600.            var name = $('option:nth-child(2)').attr("data-name");
  601.           var actionType = "add";
  602.     
  604.     $.ajax({
  605.       url:"{{path('ajax_cart')}}",
  606.       data:{
  607.         idProduct:idProduct,
  608.         price:price,
  609.         name:name,
  610.         actionType:actionType
  611.       },
  612.       success:function(result){
  613.         console.log(result);
  614.           $(".reservation-steeps-panier").html(result);
  615.       }
  616.     });
  617.            // alert(idProduct);
  619.              selectElement.val($('option:nth-child(2)').prop('selected', true));
  621.         } else {
  622.             selectElement.selectedIndex = 0; // Sélection du premier élément
  623.             selectElement.disabled = true;
  624.         }
  625.     });
  626. });
  628.      $('body').on("click",".option",function() {
  629.      
  630.      var selectedServiceIds = [];
  631.            var formule ="";
  632.             if ($(this).is(':checked')) { // Vérifie si la case est cochée
  633.         var formule = $(this).val(); // Récupère la valeur de la case cochée
  634.          
  635.     }
  636.             
  637.              $('.CK:checked').each(function() {
  638.         // Ajouter l'ID du service sélectionné à la liste
  639.         selectedServiceIds.push($(this).data('id'));
  640.   
  641.            var currentCheckbox = $(this);
  643.           $.ajax({
  644.                 url: '/reservation/ajax-service-price',
  645.                 type: 'GET', // ou 'GET' en fonction de votre besoin
  646.                 data: { 
  647.                   serviceId : $(this).data('id'),
  648.                   formule : formule
  649.                  },
  650.                 success: function(response) {
  651.                     currentCheckbox.attr('data-price', response);
  653.                     var idProduct = currentCheckbox.attr("data-id");
  654.                     var price = currentCheckbox.attr("data-price");
  655.                     var name = currentCheckbox.attr("data-name");
  656.                      if(price != 0){
  657.                     var actionType = "add";
  658.                      currentCheckbox.next('label').css({'color': 'white', 'background': 'rgb(255, 216, 110)'});
  659.                     }else{
  660.                       var actionType = "remove";
  661.                       currentCheckbox.next('label').css({'color': 'white', 'background': '#C7C8CC'});
  662.                     }
  663.              $.ajax({
  664.                 url:"{{path('ajax_cart')}}",
  665.                 data:{
  666.                   idProduct:idProduct,
  667.                   price:price,
  668.                   name:name,
  669.                   actionType:actionType
  670.                 },
  671.                 success:function(result){
  672.                   console.log(result);
  673.                     $(".reservation-steeps-panier").html(result);
  674.                 }
  675.               });                     
  676.         },
  677.                 error: function(xhr, status, error) {
  678.                     // Gérez les erreurs ici
  679.                     console.error(error);
  680.                 }
  681.             });   });
  682.    
  683.           
  684.     var idProduct = $(this).attr("data-id");
  685.     var price = $(this).attr("data-price");
  686.     var name = $(this).attr("data-name");
  687.     var actionType = "add";
  688.     
  690.     $.ajax({
  691.       url:"{{path('ajax_cart')}}",
  692.       data:{
  693.         idProduct:idProduct,
  694.         price:price,
  695.         name:name,
  696.         actionType:actionType
  697.       },
  698.       success:function(result){
  699.         console.log(result);
  700.           $(".reservation-steeps-panier").html(result);
  701.       }
  702.     });
  703.     });
  705.     $('body').on("change","select.option",function() {
  706.                 
  707.                 var selectedServiceIds = [];
  708.      
  709.                  formule =$("#serviceFormule").val();
  710.                 
  711.           
  712.  
  713.     // Parcourir toutes les cases cochées avec la classe CK
  714.     $('.CK:checked').each(function() {
  715.         // Ajouter l'ID du service sélectionné à la liste
  716.         selectedServiceIds.push($(this).data('id'));
  717.   
  718.            var currentCheckbox = $(this);
  720.       
  722.           $.ajax({
  723.                 url: '/reservation/ajax-service-price',
  724.                 type: 'GET', // ou 'GET' en fonction de votre besoin
  725.                 data: { 
  726.                   serviceId : $(this).data('id'),
  727.                   formule : formule
  728.                  },
  729.                 success: function(response) {
  730.                     currentCheckbox.attr('data-price', response);
  732.                     var idProduct = currentCheckbox.attr("data-id");
  733.                     var price = currentCheckbox.attr("data-price");
  734.                     var name = currentCheckbox.attr("data-name");
  735.                     var actionType = "add";
  736.              $.ajax({
  737.                 url:"{{path('ajax_cart')}}",
  738.                 data:{
  739.                   idProduct:idProduct,
  740.                   price:price,
  741.                   name:name,
  742.                   actionType:actionType
  743.                 },
  744.                 success:function(result){
  745.                   console.log(result);
  746.                     $(".reservation-steeps-panier").html(result);
  747.                 }
  748.               });
  750.                             
  751.                        
  752.         },
  753.                 error: function(xhr, status, error) {
  754.                     // Gérez les erreurs ici
  755.                     console.error(error);
  756.                 }
  757.             });
  759.          
  760.   
  762.           
  763.     
  764.         
  765.     });
  767.     
  769.     
  770.           
  771.     var idProduct = $(this).find("option:selected").attr("data-id");
  772.     var price = $(this).find("option:selected").attr("data-price");
  773.     var name = $(this).find("option:selected").attr("data-name");
  774.     var actionType = "add";
  776.    
  778.     $.ajax({
  779.       url:"{{path('ajax_cart')}}",
  780.       data:{
  781.         idProduct:idProduct,
  782.         price:price,
  783.         name:name,
  784.         actionType:actionType
  785.       },
  786.       success:function(result){
  787.         console.log(result);
  788.           $(".reservation-steeps-panier").html(result);
  789.       }
  790.     });
  791.     });
  794.  $('body').on("click",".delete-cart-item",function() {
  796.           
  797.     var idProduct = $(this).attr("data-id");
  798.     var price = $(this).attr("data-price");
  799.     var name = $(this).attr("data-name");
  800.     var actionType = "remove";
  802.     $.ajax({
  803.       url:"{{path('ajax_cart')}}",
  804.       data:{
  805.         idProduct:idProduct,
  806.         price:price,
  807.         name:name,
  808.         actionType:actionType
  809.       },
  810.       success:function(result){
  811.         console.log(result);
  812.           $(".reservation-steeps-panier").html(result);
  813.       }
  814.     });
  815.     });
  817.         // Ajouter la délégation d'événements pour le clic sur le label 'service'
  819.  $('label[for="service"]').click(function(){ 
  820.  
  821.     var checkBox = $(this).prev();
  822.     var value = checkBox.val();
  823.     if (checkBox.is(":checked")) {
  824.         checkBox.prop('checked', false);
  825.         console.log("Case à cocher décochée : " + value);
  826.           checkBox.next('label').css({ 'color': '#626262' ,'background': 'none'});
  827.     var idProduct = checkBox.attr("data-id");
  828.     var price = checkBox.attr("data-price");
  829.     var name = checkBox.attr("data-name");
  830.     var actionType = "remove";
  831.       $.ajax({
  832.       url:"{{path('ajax_cart')}}",
  833.       data:{
  834.         idProduct:idProduct,
  835.         price:price,
  836.         name:name,
  837.         actionType:actionType
  838.       },
  839.       success:function(result){
  840.         console.log(result);
  841.           $(".reservation-steeps-panier").html(result);
  842.       }
  843.     });
  845.     } else {
  846.         checkBox.prop('checked', true);
  847.        // console.log("Case à cocher cochée : " + value);
  848.        var formule = "";
  849.          
  850.                    if ($('#radio1').is(':checked')) {
  851.                   formule = $("#radio1").val();
  852.                  }
  853.                 else if ($('#radio21').is(':checked')) {
  854.                   formule = $("#radio21").val();
  855.                  }
  856.                   else if ($('#radio24').is(':checked')) {
  857.                   formule = $("#radio24").val();
  858.                  }
  859.                  else if ($('#radio25').is(':checked')) {
  860.                   formule = $("#radio25").val();
  861.                  }else{
  862.                        formule = "";
  863.                  }
  864.             
  865.               var serviceId = $(this).prev().data('id');
  866.               var dataElement = $(this).prev();
  867.              $.ajax({
  868.                 url: "{{path('ajaxServicePrice')}}",
  869.                 type: 'GET', // ou 'GET' en fonction de votre besoin
  870.                 data: { 
  871.                   serviceId : value,
  872.                   formule : formule
  873.                  },
  874.                 success: function(response) {
  875.                       dataElement.attr("data-price", response);
  876.                       var idProduct = dataElement.attr("data-id");
  877.                     var price = dataElement.attr("data-price");
  878.                     var name = dataElement.attr("data-name");
  879.                     var actionType = "add";
  880.             
  881.             
  882.             if(price != 0 ){
  883.                 $.ajax({
  884.                 url:"{{path('ajax_cart')}}",
  885.                 data:{
  886.                   idProduct:idProduct,
  887.                   price:price,
  888.                   name:name,
  889.                   actionType:actionType
  890.                 },
  891.                 success:function(result){
  892.                   console.log(result);
  893.                     $(".reservation-steeps-panier").html(result);
  894.                 }
  895.               });
  896.                checkBox.next('label').css({ 'color': 'white' ,'background': '#FFD86E'});
  897.                  
  898.                    }else {
  899.                 // Si le prix est égal à zéro, changer le fond du checkbox en gris
  900.                 checkBox.next('label').css({'color': 'white', 'background': '#C7C8CC'});
  901.             }    
  903.                  
  905.                        
  907.                 },
  908.                 error: function(xhr, status, error) {
  909.                     // Gérez les erreurs ici
  910.                     console.error(error);
  911.                 }
  912.             });
  913.             
  914.     }
  915. });
  916.  
  919.  
  923.  var radioButtons = document.getElementsByName('radioGroup');
  925. for (var i = 0; i < radioButtons.length; i++) {
  926.     if (radioButtons[i].checked) {
  927.         var selectedValue = radioButtons[i].value;
  928.         break;
  929.     }
  930. }
  932. console.log(selectedValue); // Vous pouvez utiliser la valeur comme vous le souhaitez ici
  934.     });
  936.    
  938.  
  939.  
  940. </script>
  942.  
  943. {% endblock %}