src/Flexy/FrontBundle/Themes/CoWorking/templates/reservation/reservation-meeting-next.html.twig line 1

  1. {% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}
  4. {% block stylesheets %}
  5. {{ parent() }}
  6.  
  7.  <link rel="stylesheet" href="{{ asset('themes/coworking/css/reservation.css') }}" />
  8.  
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" />
  11.  <style>
  12.  
  13.  .card{
  14.    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px ;
  15. }
  17. .custom-tooltip .tooltip-inner {
  18.     background-color: #fff; /* Remplacez #ff0000 par la couleur de votre choix */
  19.     text-align: left;
  20.     color: #000; /* Couleur du texte à l'intérieur de l'info-bulle */
  21. }
  22. /* Tooltip */
  23. .tooltip {
  24.     background-color: #fff; /* Couleur de fond */
  25.     color: #fff; /* Couleur du texte */
  26.     border: 1px solid #fff; /* Bordure */
  27.     border-radius: 4px; /* Coins arrondis */
  28.     padding: 5px 10px; /* Espacement intérieur */
  29.     font-size: 13px; /* Taille de la police */
  30.     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Ombre */
  31. }
  34. /* Tooltip - flèche */
  35. .tooltip .arrow::before {
  36.     border-top-color: #fff; /* Couleur de fond */
  37. }
  39. /* Tooltip - position */
  40. .tooltip.top {
  41.     margin-top: -3px; /* Positionnement par rapport à l'élément parent */
  42. }
  44.  .menu {
  45.   display: flex;
  46.   justify-content: space-around;
  47. }
  49. h5 {
  50.     color: #7b7b7b !important;
  51. }
  53. .category {
  54.   flex: 1;
  55.   margin: 0 10px;
  56.   border: 1px solid #ccc;
  57.   border-radius: 5px;
  58.   padding: 10px;
  59. }
  61. h2 {
  62.   font-size: 13px;
  63.   margin-bottom: 5px;
  64.   padding: 5px;
  65. }
  67. .menu .category ul {
  68.   list-style-type: none;
  69.   padding: 0;
  70. }
  72. .menu .category   li {
  73.   margin-bottom: 5px;
  74.  
  75.   font-size: 12px; /* Taille de police légèrement augmentée */
  76. }
  78. /* Style additionnel pour un meilleur aspect */
  79. .menu {
  80.   background-color: #f9f9f9;
  81.   padding: 20px;
  82.   border-radius: 10px;
  83. }
  85. .category {
  86.   background-color: #fff;
  87.   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  88. }
  90. .list-group li {
  91.   font-size: 11px;
  92.     color: #333;
  93.  
  94. }
  96. /* Ajout de styles de survol pour un effet interactif */
  97. .list-group li:hover {
  98.   color: #FFCB00 !important; /* Changement de couleur au survol */
  99.   cursor: pointer; /* Curseur de la souris en pointeur */
  100. }
  102. /* Animation de survol */
  103. .list-group li:hover {
  104.   transform: scale(1.1); /* Agrandissement au survol */
  105.   transition: transform 0.2s ease; /* Transition fluide */
  106. }
  110. .form-control {
  111.     border-radius: 9px;
  112.      padding: 0px !important
  113. }
  115.   .form-check {
  116.  
  117.     min-height: 1.9rem !important;
  118.     }
  120.   .modal-backdrop.fade.show {
  121.         display: none;
  122. }
  123.  
  124.  
  125. /* css checkbox*/
  127. /* hide checkbox */
  128. input[type="checkbox"] {
  129.   display: none;
  130. }
  132. /* if checkbox is checked, then do these things */
  133. input[type="checkbox"]:checked + label {
  134.   color: white;
  135.   background:#FFD86E;
  136.   border-radius: 5px;
  137.   padding: 0px 10px 0px 10px;
  138. }
  140. /* styles when hovering over options */
  141. label:hover {
  143.   cursor: pointer;
  144.   
  145.   /* transitions and animations */
  146.   -webkit-transition: color .5s ease;
  147.   -moz-transition: color .5s ease;
  148.   -ms-transition: color .5s ease;
  149.   -o-transition: color .5s ease;
  150.   transition: color .5s ease;
  151. }
  152. .boutton-step{
  153.   padding:10px; 
  154.   text-decoration:none; 
  155.   width:230px; 
  156.    font-size: 12px;
  157.     font-family: 'PT Sans', sans-serif;
  158.     letter-spacing:2px;
  159. }
  160.   
  161. input.button {
  162.   
  163.     width:130px;
  164.     height:50px;
  165.     margin: 20px 0 30px 0;
  166.     padding: 0px 20px 0px 20px;
  167.     background: #e6e6e6;
  168.     border-radius:5px;
  169.     border: 1px solid #ccc;
  171.     font-family: OpenSans, sans-serif;
  172.     font-size:16pt;
  173.     color:#444;
  174. }
  176. .Addons label{
  177.     font-size:12px !important;
  178.     font-family: 'roboto';
  179.     font-weight: 500;
  180.     border: 1px solid #80808024;
  181.     margin: 2px;
  182.     padding: 0px 5px 0px 5px;
  183.     border-radius: 5px;
  184. }
  185. .multistep-container .active-button li:not(:first-child) .round-btn:before {
  186.     position: absolute;
  187.     content: '';
  188.     width: 141px;
  189.     height: 3px;
  190.     background-color: #E9F2FA;
  191.     left: -120px;
  192. }
  195. .multistep-container .active-button li {
  196.     display: inline-block;
  197.     width: 140px;
  198. }
  200. .form-check {
  201.     line-height: 22px;
  202. }   
  204. .col-md-12.col-lg-12.col-sm-12.d-flex.justify-content-end.align-items-end.mb-3{
  205.         flex: 0 0 86%;
  206. }
  208.  p.badge.badge-light {
  209.     background-color: black;
  210. }
  211.     
  212.      li.etape1:before {
  213.     background: #7ED670 !important; /* Change the background color */
  214.     color: white !important;
  215. }
  217.   .titre-page{
  218. margin-top:10px;
  219. font-size: 20px;
  220. line-height:45.29px;
  221. color: #000000;
  222. } 
  224. .radio-buttons {
  225.   display: flex;
  226. }
  228. .radio-buttons input[type="radio"] {
  229.   display: none;
  230. }
  232. .radio-buttons label {
  233.   display: block;
  234.   margin-right: 40px;
  235.   cursor: pointer;
  236. }
  238. .radio-buttons label img {
  239.   border-radius: 10px;
  240.   width: 100px;  
  241.   height: 110px;  
  242.   box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
  244. }
  245. .radio-buttons input[type="radio"]:checked + label img {
  246.   border: 2px solid #FFCB00 ; /* Style pour indiquer la sélection, vous pouvez personnaliser */
  247. }
  248.  
  249.   .form-select{
  250.     width: 100% !important;
  251.   }
  253.    .custom-radio {
  254.       padding-right: 20px; /* Ajoutez le padding ici */
  255.     }
  259.  
  260. </style>
  262.   
  264.   
  265. {% endblock  %}
  266. {% block body %}
  267.  
  269.  
  270.  
  272.  
  273.   <img src="{{asset('themes/coworking/front/images/sallereunion.jpg')}}" style="width: 100%;height: 520px;" class="img-fluid" />
  274.   <div class="container">
  275.     <div class="row justify-content-between">
  276.       <div class="col-sm-8 reservation-steeps">
  277.        
  278.        <div class="row">
  279.           <div class="col-sm-8">
  280.             <h6 class="titre-page">Réservation 
  281.                 
  283.             </h6>
  284.           </div>
  285.           <div class="col-sm-4" style="margin-top:10px;">
  286.             <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>
  287.           </div>
  288.         </div>
  289.        
  290.        
  291.         <div class="container">
  292.          
  293.               
  294.                    
  295.   <div class="container d-flex justify-content-center align-items-center">
  296.          
  297.          
  298.           <ul id="progressbar">
  299.          <li class="etape1"> <span> Type</span>  </li>
  300.         <li class="active" > Formule + extra </li>
  301.         <li> Dates</li>
  302.         <li> Confirmation</li>
  303.            
  304.           
  305.                 </ul>
  306.         </div>
  307.             
  308.             <div class="col-xl-12" style="top: 20px;">
  309.               
  310.               <div class="multistep-container">
  311.                 <div class="mutistep-form-area">
  312.                     
  313.                  
  314.                   <div class="form-box">
  315.                 
  316.                     
  317.                  
  318.                        
  319.                             <div class="container" >
  321.                   
  322.               
  323.                
  324.                  <div id="form-attribue" style="line-height: 20px;" class="mt-4"> 
  325.              
  326.           <div class="form-check">
  327.         <input class="form-check-input" type="radio" name="choix" id="repas_demande" value="repas">
  328.         <label class="form-check-label" for="repas_demande">
  329.          <h5 style="font-weight:bold; margin-top: 2px;" >Voulez-vous choisir un extra ?</h5>
  330.          
  331.         </label>
  332.       </div>
  333.    <div class="container">
  334.   <div class="row">
  335.       <div class="col-md-4">
  336.          
  337.       <div class="card">
  338.           {% for break in breakfast %}
  339.          {%if break.photo is not empty %}
  340.         <img style="widh:100%"  src="{{asset('/uploads/coworking/' ~ break.photo )}}" class="card-img-top" alt="Breakfast Image">
  341.             {% endif %}
  342.                  {% endfor %}
  343.                 <div  >
  344.        
  345.           <ul class="list-group">
  346.             {% for break in breakfast %}
  347.             <li class="list-group-item" data-placement="top" data-toggle="tooltip" title="<b>{{ break.type }}</b><br>{{ break.description|raw|nl2br }}"> {{ break.name }}</li>
  348.              {% endfor %}
  349.           </ul>
  350.         </div>
  351.       </div>
  352.     </div>
  354.     <div class="col-md-4">
  355.        <div class="card">
  356.              {% for lun in lunch %}
  357.          {%if lun.photo is not empty %}
  358.         <img style="widh:100%" src="{{asset('/uploads/coworking/' ~ lun.photo )}}" class="card-img-top" alt="Lunch Image">
  359.          {% endif %}
  360.                  {% endfor %}
  361.  
  362.           <ul class="list-group">
  363.             {% for lun in lunch %}
  364.             <li class="list-group-item" data-placement="top" data-toggle="tooltip" title="<b>{{ lun.type }}</b><br> {{lun.description|raw|nl2br}}">{{ lun.name }}</li>
  365.             {% endfor %}
  366.           </ul>
  367.        
  368.       </div>
  369.     </div>
  370.      
  372.     <div class="col-md-4">
  373.       <div class="card">
  374.            {% for after in afternoonBreak %}
  375.          {%if after.photo is not empty %}
  376.           <img style="widh:100%" src="{{asset('/uploads/coworking/' ~ after.photo )}}" class="card-img-top" alt="Lunch Image">
  377.          {% endif %}
  378.                  {% endfor %}
  379.         <ul class="list-group">
  380.           {% for after in afternoonBreak %}
  381.           <li class="list-group-item" data-placement="top" data-toggle="tooltip" title="<b>{{ after.type }}</b> <br> {{ after.description|raw|nl2br }}">{{ after.name }}</li>
  382.           {% endfor %}
  383.         </ul>
  384.       </div>
  385.     </div>
  386.   </div>
  387. </div>
  388.           
  389.         
  391.     <div class="form-group" style="margin-top: 10px;">
  392.      
  393.         <div id="repas" style="padding: 0 20px !important;">
  394.            <div class="row">
  395.            <div class="col-md-6">
  396.                 <div class="form-group">
  397.                     <label for="select_repas_matin">Pause matin</label>
  398.                     <select class="form-select" id="select_repas_matin" name="select_repas_matin" disabled>
  399.                         <option value="">Choisissez un repas pour le matin</option>
  400.                        {% for break in  breakfast %}
  401.                         <option data-id="{{break.id}}"  value="{{break.price}}">{{break.name}} ({{break.price}} DH)</option>
  402.                         
  403.                         {% endfor  %}
  404.                     </select>
  405.                 </div>
  406.             </div>
  407.             <div class="col-md-6">
  408.                 <div class="form-group" id="quantity_input" style="display: none;">
  409.                     <label for="quantity"><small>Quantité </small></label>
  410.                     <input type="number" class="form-control" id="quantity" name="quantity" min="0" style="width: 50px;">
  411.                 </div>
  412.                 <div id="total_price" style="display: none;">
  413.                    <span class="badge badge-light">Total : <span id="total_amount" class="total-amount"></span> DH</span> 
  414.                 </div>
  415.             </div>
  416.         </div>
  417.       
  418.       <div class="row">
  419.            <div class="col-md-6">
  420.       <div class="form-group">
  421.         <label for="select_repas_dejeuner"> Déjeuner </label>
  422.         <select class="form-select" id="select_repas_dejeuner" name="select_repas_dejeuner" disabled>
  423.              <option value="">Choisissez un repas pour le déjeuner </option>
  424.             {% for lun in  lunch %}
  425.             <option data-id="{{lun.id}}" value="{{lun.price}}">{{lun.name}} ({{lun.price}} DH)</option>
  426.             {% endfor  %}
  427.         </select>
  428.       </div>
  429.         </div>
  432.          <div class="col-md-6">
  433.                 <div class="form-group" id="quantity_dejeune" style="display: none;" >
  434.                     <label for="quantity"><small>Quantité </small></label>
  435.                     <input type="number" class="form-control" id="quantity_input_dejeuner" name="quantity_input_dejeuner" min="0" style="width: 50px;">
  436.                 </div>
  437.                 <div id="total_price_dejeune" style="display: none;">
  438.                    <span class="badge badge-light">Total : <span id="total_amount_dejeune" class="total-amount"></span> DH</span> 
  439.                 </div>
  440.                 
  441.             </div>
  442.         </div>
  443.         
  444.       
  445.       <div class="row">
  446.            <div class="col-md-6">
  448.       <div class="form-group">
  449.         <label for="select_repas_apres_midi">  Pause après-midi  </label>
  450.         <select class="form-select" id="select_repas_apres_midi" name="select_repas_apres_midi" disabled>
  451.             <option value="">Choisissez un repas pour la pause après-midi </option>
  452.              {% for after in  afternoonBreak %}
  453.             <option data-id="{{after.id}}" value="{{after.price}}">{{after.name}} ({{after.price}} DH)</option>
  454.             {% endfor  %}
  455.         </select>
  456.       </div>
  457.       </div>
  459.  <div class="col-md-6">
  460.                 <div class="form-group" id="quantity_input_apres" style="display: none;" >
  461.                     <label for="quantity"><small>Quantité</small></label>
  462.                     <input type="number" class="form-control" id="quantity_apres" name="quantity_apres" min="0" style="width: 50px;">
  463.                 </div>
  464.                 <div id="total_price_apres" style="display: none;">
  465.                    <span class="badge badge-light">Total : <span id="total_amount_apres" class="total-amount"></span> DH</span> 
  466.                 </div>
  467.                 
  468.             </div>
  470. <div class="col-md-6">
  471.    
  472. </div>
  473. <div id="total_sum_section"  class="col-md-6">
  474.     <p class="badge badge-light">Total : <span id="total_sum"></span> DH</p>
  475. </div>
  477.         
  478.         </div>
  481.  
  482.       </div>
  483.       <div class="form-check mt-4">
  484.         <input class="form-check-input" type="radio" name="choix"  value="demande">
  485.         <label class="form-check-label" for="repas_demande">
  486.          <h5 style="font-weight:bold; " >Non merci </h5>
  487.         </label>
  488.       </div>
  489.         
  490.     </div>
  491.  
  492.     
  494.   
  495.   </form>
  496.                    
  497.  
  498.                   
  500.                   </div>
  501.               
  503.                                
  504.                     
  505.               
  506.                  </div>
  507.                     <div class="button-row">
  508.         <form action="{{path('reservationstep2',{id:id})}}" id="myForm"   method="GET" data-turbo="false">          
  509.             <input type="hidden" name="days"  id="formule_" value="{{ days }}"/>
  510.               <input type="hidden" name="Plage"  id="horaire_" value="{{ Plage }}"/>
  511.               <input type="hidden" name="amount_extra"  id="amount_extra" value=""/>
  512.               <input type="hidden" name="id_extra"  id="id_extra" value=""/>
  513.               <input type="hidden" name="time"  id="time_" value="{{ time }}"/>
  514.               <input type="hidden" name="device"  id="device_" value="{{ device }}"/>
  515.               <input type="hidden" name="nbrApproximatif" id="nbrApproximatif" value="{{ nbrApproximatif }}"/>
  517.            
  518.             <a href="javascript:void(0)" onclick="history.back()" 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>
  519.             &nbsp;&nbsp;
  520.              <button type="submit" class="btn-res text-center text-light text-uppercase bg-dark ReserveNext__" style="background: #FFCB00 !important;padding:5px;    border: none; text-decoration:none; width:177px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;">
  521.               Étape suivante
  522.                     </button>
  523.              </form>
  526.                       </div> 
  527.                             
  528.                             
  529.                            
  530.                      
  532.            
  534.                     
  535.                    
  536.                   </div>
  537.                    
  539.                 
  540.                 </div>
  541.               </div>
  542.             </div>
  543.           
  544.         </div>
  545.          
  546.       
  547.       </div>
  549.          <div class="col-sm-4 reservation-steeps-panier" style="overflow-y: auto;">
  550.       
  551.         {{render(path("ajax_cart"))}}
  552.     </div>
  553.     </div>
  554.   </div>
  555.   
  556.   
  557. {% endblock %}
  564. {% block javascripts %}
  565.   <!-- MAIN CONTENT -->
  566.  
  567. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  569. <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  570. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  571.  
  572.  
  573. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  574. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
  576.  
  577. <script>
  579.   $(document).ready(function(){
  580.       
  581.          $('#myForm').on('submit', function(event) {
  582.             if (!$('input[name="choix"]:checked').length) {
  583.                 alert('Veuillez sélectionner une option.');
  584.                 event.preventDefault();
  585.             }
  586.         });
  587.         
  588.   
  589.    $('[data-toggle="tooltip"]').tooltip({
  590.       placement: 'top', // Position de l'info-bulle
  591.       trigger: 'hover', // Déclencheur de l'info-bulle
  592.       delay: { "show": 500, "hide": 100 }, // Délai d'affichage et de masquage en millisecondes
  593.       html: true, // Autoriser le contenu HTML dans l'info-bulle
  594.       template: '<div class="tooltip custom-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' // Utilisation d'un modèle personnalisé pour l'info-bulle
  595.     });
  597. $('body').on("click",".delete-cart-item",function() {
  599.           
  600.     var idProduct = $(this).attr("data-id");
  601.     var price = $(this).attr("data-price");
  602.     var name = $(this).attr("data-name");
  603.     var actionType = "remove";
  605.     $.ajax({
  606.       url:"{{path('ajax_cart')}}",
  607.       data:{
  608.         idProduct:idProduct,
  609.         price:price,
  610.         name:name,
  611.         actionType:actionType
  612.       },
  613.       success:function(result){
  614.         console.log(result);
  615.           $(".reservation-steeps-panier").html(result);
  616.       }
  617.     });
  618.     });
  621.      // Fonction de mise à jour du prix total pour le repas du matin
  622.     $('#select_repas_matin, #quantity').change(function() {
  623.       if ($(this).val() === "0") {
  624.         $('#select_repas_matin').val(""); 
  625.     }
  626.         updateTotalPrice('#select_repas_matin', '#quantity', '#total_amount', '#total_price');
  627.         calculateTotalSum();
  628.         updateIdExtra(); // Mettre à jour l'ID extra
  629.     });
  631.     // Fonction de mise à jour du prix total pour le repas du déjeuner
  632.     $('#select_repas_dejeuner, #quantity_input_dejeuner').change(function() {
  633.       if ($(this).val() === "0") {
  634.         $('#select_repas_dejeuner').val(""); // Réinitialiser la sélection si la quantité est 0
  635.     }
  636.      updateTotalPrice('#select_repas_dejeuner', '#quantity_input_dejeuner', '#total_amount_dejeune', '#total_price_dejeune');
  637.         calculateTotalSum();
  638.         updateIdExtra(); // Mettre à jour l'ID extra
  639.     });
  641.     // Fonction de mise à jour du prix total pour la pause de l'après-midi
  642.     $('#select_repas_apres_midi, #quantity_apres').change(function() {
  643.         updateTotalPrice('#select_repas_apres_midi', '#quantity_apres', '#total_amount_apres', '#total_price_apres');
  644.         calculateTotalSum();
  645.          updateIdExtra(); // Mettre à jour l'ID extra
  646.     });
  647.     
  650. function updateIdExtra() {
  651.     var selectedIds = [];
  652.     $('#select_repas_dejeuner, #select_repas_matin , #select_repas_apres_midi').each(function() {
  653.         var selectedOption = $(this).find(':selected');
  654.         if (selectedOption.length > 0) {
  655.             var dataId = selectedOption.data('id');
  656.             selectedIds.push(dataId);
  657.         }
  658.     });
  659.     $('#id_extra').val(selectedIds.join(',')); // Mettre à jour la valeur de l'input caché avec les data-ids séparés par une virgule
  660. }
  663.  // Fonction de mise à jour du prix total
  664.     function updateTotalPrice(selectElement, quantityElement, totalAmountElement, totalPriceElement) {
  665.         var selectedOptionValue = parseInt($(selectElement).val());
  666.         var quantity = parseInt($(quantityElement).val());
  667.         if (!isNaN(selectedOptionValue) && !isNaN(quantity)) {
  668.             var totalPrice = selectedOptionValue * quantity;
  669.             $(totalAmountElement).text(totalPrice);
  670.             $(totalPriceElement).show();
  671.         } else {
  672.             $(totalPriceElement).hide();
  673.         }
  674.     }
  676.      // Fonction de calcul de la somme totale
  677.     function calculateTotalSum() {
  678.         var totalSum = 0;
  679.         $('.total-amount').each(function() {
  680.             var amount = parseInt($(this).text());
  681.             if (!isNaN(amount)) {
  682.                 totalSum += amount;
  683.             }
  684.         });
  685.         $('#total_sum').text(totalSum);
  686.         $('#amount_extra').val(totalSum);
  687.     }
  689.  // Écouter le changement de la sélection pour le repas du matin
  690.     $('#repas_demande').change(function() {
  691.         if ($(this).is(':checked')) {
  692.             $('#quantity_input').show();
  693.             $('#select_repas_matin').prop('disabled', false);
  694.         } else {
  695.             $('#quantity_input').hide();
  696.             $('#select_repas_matin').prop('disabled', true);
  697.             $('#total_price').hide();
  698.         }
  699.     });
  701.         // Écouter le changement de la sélection pour le déjeuner
  702.     $('#repas_demande').change(function() {
  703.         if ($(this).is(':checked')) {
  704.             $('#quantity_dejeune').show();
  705.             $('#select_repas_dejeuner').prop('disabled', false);
  706.         } else {
  707.             $('#quantity_input_dejeuner').hide();
  708.             $('#select_repas_dejeuner').prop('disabled', true);
  709.             $('#total_price_dejeune').hide();
  710.         }
  711.     });
  713.       // Écouter le changement de la sélection pour l'après-midi
  714.     $('#repas_demande').change(function() {
  715.         if ($(this).is(':checked')) {
  716.             $('#quantity_input_apres').show();
  717.             $('#select_repas_apres_midi').prop('disabled', false);
  718.         } else {
  719.             $('#quantity_input_apres').hide();
  720.             $('#select_repas_apres_midi').prop('disabled', true);
  721.             $('#total_price_apres').hide();
  722.         }
  723.     });
  725.  
  727.   
  731.      $('input[name="choix"]').change(function(){ 
  733.       if($(this).val() == "demande"){
  734.           
  735.            $('#select_repas_apres_midi').prop('selectedIndex', 0);
  736.            $('#select_repas_dejeuner').prop('selectedIndex', 0);
  737.            $('#select_repas_matin').prop('selectedIndex', 0);
  738.            $('#quantity').val(0);
  739.            $('#quantity_input_dejeuner').val(0);
  740.            $("#quantity_apres").val(0);
  741.             $("#total_amount").text(0);
  742.             $("#total_amount_dejeune").text(0);
  743.             $("#total_amount_apres").text(0);
  744.             $("#total_sum").text(0);
  745.             $("#amount_extra").val(0);
  747.            $("#select_repas_matin").prop('disabled', true);
  748.             $("#select_repas_dejeuner").prop('disabled', true);
  749.                 $("#select_repas_apres_midi").prop('disabled', true);  
  750.          
  751.       }else if($(this).val() == "non"){
  752.          
  753.         $('#select_repas_apres_midi').prop('selectedIndex', 0);
  754.         $('#select_repas_dejeuner').prop('selectedIndex', 0);
  755.         $('#select_repas_matin').prop('selectedIndex', 0);
  756.          $('#quantity').val(0);
  757.           $('#quantity_input_dejeuner').val(0);
  758.            $("#quantity_apres").val(0);
  759.            $("#total_amount").text(0);
  760.            $("#total_amount_dejeune").text(0);
  761.            $("#total_amount_apres").text(0);
  762.            $("#total_sum").text(0);
  763.            $("#amount_extra").val(0);
  765.         
  766.          $("#select_repas_matin").prop('disabled', true);
  767.          $("#select_repas_dejeuner").prop('disabled', true);
  768.          $("#select_repas_apres_midi").prop('disabled', true); 
  770.       }else if($(this).val() == "repas"){
  772.           
  773.             $("#select_repas_matin").prop('disabled', false);
  774.                $("#select_repas_dejeuner").prop('disabled', false);
  775.                 $("#select_repas_apres_midi").prop('disabled', false);
  778.       }
  779.    
  780.         
  781.         });
  783.   /*$('input[name="repas"]').change(function(){
  784.  
  785.       
  786.     if($(this).val() === 'pause_matin') {
  787.       
  788.        // $("#select_repas_matin").val($('option:nth-child(1)').prop('selected', true));
  790.       $("#select_repas_matin").prop('disabled', false);
  791.       $("#select_repas_dejeuner").prop('disabled', true);
  792.        $("#select_repas_apres_midi").prop('disabled', true);
  793.       
  794.       
  795.     } else if($(this).val() == 'dejeuner') {
  796.       
  797.        // $("#select_repas_dejeuner").val($('option:nth-child(1)').prop('selected', true));
  798.         
  799.          $("#select_repas_dejeuner").prop('disabled', false);
  800.           $("#select_repas_matin").prop('disabled', true);
  801.           $("#select_repas_apres_midi").prop('disabled', true);
  802.       
  803.     } else if($(this).val() == 'pause_apres_midi') {
  805.        // $("#select_repas_apres_midi").val($('option:nth-child(1)').prop('selected', true));
  806.           
  807.       $("#select_repas_apres_midi").prop('disabled', false);
  808.          $("#select_repas_dejeuner").prop('disabled', true);
  809.           $("#select_repas_matin").prop('disabled', true);
  810.          
  811.     }
  813.   });*/
  814.   
  815.   function updateSession() {
  816.         let meals = {
  817.             breakfast: {
  818.                 name: $("#select_repas_matin option:selected").text(),
  819.                 price: $("#select_repas_matin").val(),
  820.                 quantity: $("#quantity").val() || 0
  821.             },
  822.             lunch: {
  823.                 name: $("#select_repas_dejeuner option:selected").text(),
  824.                 price: $("#select_repas_dejeuner").val(),
  825.                 quantity: $("#quantity_input_dejeuner").val() || 0
  826.             },
  827.             afternoonBreak: {
  828.                 name: $("#select_repas_apres_midi option:selected").text(),
  829.                 price: $("#select_repas_apres_midi").val(),
  830.                 quantity: $("#quantity_apres").val() || 0
  831.             }
  832.         };
  834.         // Envoi des données à Symfony via AJAX
  835.         $.ajax({
  836.             url: "{{path('save_meals_session')}}",
  837.             type: "POST",
  838.             contentType: "application/json",
  839.             data: JSON.stringify(meals),
  840.             success: function (response) {
  841.                 console.log("Session updated", response);
  842.             },
  843.             error: function (xhr, status, error) {
  844.                 console.error("Error:", error);
  845.             }
  846.         });
  847.     }
  849.     // Écoute des changements sur les sélections de repas
  850.    
  851.     $("#select_repas_matin, #quantity, #select_repas_dejeuner, #quantity_input_dejeuner, #select_repas_apres_midi, #quantity_apres").on("change", updateSession);
  852.  
  857.     });
  859.  
  860. </script>
  862.  
  863. {% endblock %}