src/Flexy/FrontBundle/Themes/CoWorking/templates/pages/reservation-offices.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*/
  17.   .fs-5{
  18.   font-size: 17px !important;
  19. }
  20. /* css checkbox*/
  21. .title {
  22. font-family: 'Montserrat', sans-serif;
  23. font-weight:bold;
  24. font-size: 12px;
  25. padding-bottom: 0px;
  26. margin-top: 0px;color:black;
  27. }
  28. +
  29. /* hide checkbox */
  30. input[type="checkbox"] {
  31.   display: none;
  32. }
  34. /* if checkbox is checked, then do these things */
  35. input[type="checkbox"]:checked + label {
  36.   color: white;
  37.   background:#FFD86E;
  38.   border-radius: 5px;
  39.   padding: 0px 10px 0px 10px;
  40. }
  42. /* styles when hovering over options */
  43. label:hover {
  45.   cursor: pointer;
  46.   
  47.   /* transitions and animations */
  48.   -webkit-transition: color .5s ease;
  49.   -moz-transition: color .5s ease;
  50.   -ms-transition: color .5s ease;
  51.   -o-transition: color .5s ease;
  52.   transition: color .5s ease;
  53. }
  54.   
  55. input.button {
  56.   
  57.     width:130px;
  58.     height:50px;
  59.     margin: 20px 0 30px 0;
  60.     padding: 0px 20px 0px 20px;
  61.     background: #e6e6e6;
  62.     border-radius:5px;
  63.     border: 1px solid #ccc;
  65.     font-family: OpenSans, sans-serif;
  66.     font-size:16pt;
  67.     color:#444;
  68. }
  70. .Addons label{
  71.     font-size:12px !important;
  72.     font-family: 'roboto';
  73.     font-weight: 500;
  74.     border: 1px solid #80808024;
  75.     margin: 2px;
  76.     padding: 0px 5px 0px 5px;
  77.     border-radius: 5px;
  78. }
  79. .multistep-container .active-button li:not(:first-child) .round-btn:before {
  80.     position: absolute;
  81.     content: '';
  82.     width: 141px;
  83.     height: 3px;
  84.     background-color: #E9F2FA;
  85.     left: -120px;
  86. }
  89. .multistep-container .active-button li {
  90.     display: inline-block;
  91.     width: 140px;
  92. }
  94. .form-check {
  95.     line-height: 16px;
  96. }   
  98. .col-md-12.col-lg-12.col-sm-12.d-flex.justify-content-end.align-items-end.mb-3{
  99.         flex: 0 0 86%;
  100. }
  102.  @media (max-width:767px) {
  103.                 html, body {
  104.                   overflow-x: hidden  !important;
  105.                 }
  106.                 body {
  107.                   position: relative !important;
  108.                 }
  109.                 .col-sm-8.reservation-steeps {
  110.                     padding:0%;
  111.                 }
  112.                 .multistep-container .mutistep-form-area .form-box{
  113.                     position: relative;
  114.                     top: 33px;
  115.                     left: 0px;
  116.                 }
  117.                 .multistep-container .active-button li{
  118.                     display: inline-block;
  119.                     width: 100px;
  120.                 }
  121.                 .panel-sticky{
  122.                     font-size:12px;
  123.                 }
  124.               h6.display-6.header-steeps {
  125.                 margin-left: 3%;
  126.             }
  127.             h6.datetime{
  128.                  margin-left: 3%;
  129.             }
  130.             a#seeDetails {
  131.                 margin-bottom: -11%;
  132.             }
  133.             a#seePrice {
  134.                 float: right;
  135.                 margin-right: 52%;
  136.             }
  137.  }
  138.     
  139.     
  140.     
  141.     @media (max-width:767px) { 
  142.         .multistep-container .mutistep-form-area {
  143.               
  144.               position: relative;
  145.           overflow: hidden;
  146.           min-height: 100%;
  147.           max-height: 100%;
  148.           overflow: none;
  149.         }
  150.         .col-sm-8.reservation-steeps {
  151.             box-shadow: none;
  152.         }
  153.         .multistep-container{
  154.                height: auto !important; 
  155.         }
  156.         
  157.         
  158.         
  159.     }
  160.     
  161.     
  162.     
  163.     
  164.     
  165.     .imageForMobile{
  166.         display:none;
  167.     } 
  168.     .imageForDesktop{
  169.         display:block;
  170.     }
  171.     
  173.     @media (max-width:767px) {
  174.                 
  175.         .imageForDesktop{
  176.             display:none;
  177.         } 
  178.         .imageForMobile{
  179.             display:block;
  180.         }
  181.         
  182.         .col-sm-8.reservation-steeps{
  183.                 top: 0px
  184.         }
  185.         .divCardsForMobile{
  186.             top: 0px !important;
  187.         }
  188.         .multistep-container .mutistep-form-area{
  189.             margin-top: 0px !important;
  190.         }
  191.         
  192.         
  193.         .titre-page{
  194.             padding-left: 10px;
  195.              font-size: 15px !important;
  196.         }
  198.         .divCardsSalleReunionMobile{
  199.             margin-top: 0px !important;
  200.         }
  201.            
  202.          .forMobile{
  203.                 margin-top: 5% !important;
  204.         }
  205.         #btnTarifs{
  206.                 padding: 5px !important;
  207.         }
  208.         .title{
  209.             font-size: 15px !important;
  210.         }
  211.         #btnInformation{
  212.                    width: 170px !important;
  213.                     font-size: 10px !important;
  214.         }
  215.         #btnReservation{
  216.                 font-size: 10px !important;
  217.                 width: 100px!important;
  218.         }
  219.         .bureaux-desc{
  220.             padding: 15px!important;
  221.         }
  222.          .close{
  223.           width:25px !important;
  224.       }
  225.       }
  226.       
  227.       
  228.      
  229.     
  230. </style> 
  231. </style>
  233.   
  234. {% endblock  %}
  235.  
  236. {% block body %}
  237.  
  239.  
  240.  
  241.  
  242.  
  243.   <img loading="lazy" src="{{asset('themes/coworking/front/images/background_BUREAUX.png')}}" style="width: 100%;height: 520px;" class="img-fluid imageForDesktop" />
  244.     <img loading="lazy" src="{{asset('themes/coworking/front/images/Bg-bureau-Mobile.png')}}" style="width: 100%;" class="img-fluid imageForMobile" />
  245.     
  246.   
  247.   
  248.   
  249.   
  250.   
  251.   <div class="container">
  252.     <div class="row">
  254.       
  255.       <div class="col-sm-8 reservation-steeps" style="overflow: hidden;">
  257.            <div class="row">
  258.                <div class="forMobile" style="display: inline-flex;">
  259.                    
  260.           <div class="col-sm-6">
  261.             <h6 class="titre-page">{{ "Réservation bureau"|trans({},"front") }}</h6>
  262.           </div>
  263.           <div class="col-sm-6">
  264.             <a href="/uploads/front-images/LISTEDEPRIXCOWORK2.pdf" class="btn-res text-center text-light text-uppercase bg-dark"  id="btnTarifs" style="float: right;padding: 8px;border-radius: 6px;font-size:13px;" target="_blank" > Afficher nos tarifs</a>
  265.           </div>
  266.           
  267.           </div>
  268.         </div>
  269.         
  270.         <div class="container">
  271.           <div class="row">
  273.              <div class="container d-flex justify-content-center align-items-center">
  274.   
  275.         </div>
  277.             <div class="col-xl-12 divCardsForMobile" style="top: 17px;" >
  278.               <div class="multistep-container">
  279.                 <div class="mutistep-form-area">
  280.                  
  281.                             <div class="container" style="margin-top:40px;">
  283.                                 <div class="panel">
  284.                                     {% set displayed_categories = [] %}  
  285.                                    {% for bureau in products   %} 
  286.                                     {% for cat in bureau.categoriesProduct   %}
  287.                                      {% if cat.name not in displayed_categories and cat.name != "Services supplémentaires bureaux" %}
  288.                                      
  289.                                           <div class="card-brx row mt-3 panel" style="width:auto; border: none; border-radius:17px; box-shadow: 0 0 12px 5px rgba(0, 0, 0, 0.05);">
  290.                                             <div class="col-md-6 col-lg-6 col-sm-12">
  291.                                               <img loading="lazy" class="img-fluid" src="{{ asset('uploads/coworking/' ~ cat.image) }}" style="width:100%; border-radius:6px;margin-top: 10px;" />
  292.                                             </div>
  293.                 
  294.                                             <div class="bureaux-desc col-md-6 col-lg-6 col-sm-12 mt-3" style="font-family:'Roboto',sans-serif; line-height:24px;">
  295.                                               <div>
  296.                                                     <div style="float: right;">
  297.                                                         
  298.                                                             {%  if  cat.oldId  == 1 %}
  299.                                                         
  300.                                                               <i class="fa fa-user" style="color:black;"></i><br>
  301.                                                   
  302.                                                             {% elseif  cat.oldId  == 2 %}
  303.                                                            
  304.                                                                         <i class="fa fa-user" style="color:black;"></i> <i class="fa fa-user" style="color:black;"></i><br>
  305.                                                                 
  306.                                                                  {% elseif  cat.oldId   == 4 %}
  307.                                                            
  308.                                                                             <i class="fa fa-user" style="color:black;"></i><i class="fa fa-user" style="color:black;"></i><i class="fa fa-user" style="color:black;"></i><i class="fa fa-user" style="color:black;"></i><br>
  309.                                                                    {% elseif  cat.oldId   == 0 %}
  310.                                                            
  311.                                                                                 <i class="fa fa-user" style="color:black;"></i><br>
  312.                                                              {% endif %}
  313.                                                  
  314.                                                     </div>
  315.                                                
  316.                                                
  317.                                               <p class="fs-5 title" style="font-weight:bold;padding-bottom: 0px;margin-top: 0px;color:black;" >{{ cat.name|trans({},"front") }} </p>
  318.                                                
  319.                                                 
  320.                                                 {% if cat.oldId  == 1 %}
  321.                                                     {% set priceBureau = "300" %}
  322.                                                 {% elseif cat.oldId  == 2 %}
  323.                                                     {% set priceBureau = "990" %}
  324.                                                 {% elseif cat.oldId  == 4 %}
  325.                                                     {% set priceBureau = "1900" %}
  326.                                                 {% else  %}
  327.                                                   {% set priceBureau = "220" %}
  328.                                                 {% endif %}
  329.                                                    <a class="float-left" href="#"  id="seePrice" style="white-space:nowrap;padding-top: 10px;padding-right: 10px;text-decoration:none;font-size:13px; font-family:'PT Sans', sans-serif; letter-spacing:2px;color: #020202;font-weight: 800;">À partir de<br> {{priceBureau}}* MAD TTC / 
  330.                                                    
  331.                                                 {% if priceBureau == 300 %}
  332.                                                     Journée
  333.                                                 {% elseif priceBureau == 990  %}
  334.                                                     3 Jours
  335.                                                 {% elseif priceBureau == 1900  %}
  336.                                                     Semaine
  337.                                                 {% elseif priceBureau == 220  %}
  338.                                                     Journée
  339.                                                 {% endif %}  
  340.                                                    
  341.                                                  </a>
  342.                                                        <br><br><br><br>
  343.                                                       
  344.                                                         <a  href="#" data-toggle="modal" id="seeDetails" data-target="#aynModal{{ cat.id }}"style="padding: 10px;text-decoration: none;width: 129px;font-size: 13px;font-family: 'PT Sans', sans-serif;letter-spacing: 2px;/* float: right; */color: #020202;text-decoration: underline;margin-right: 10px;margin-right: 10px;font-weight: 800;"><u>Voir Details</u></a>
  345.                                                         <a href="{{path("reservationbureauxstep1",{id:cat.id})}}" class="btn-res text-center text-light text-uppercase bg-dark ReserveNext__"   style="padding:10px; text-decoration:none; width:230px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;">Réserver</a>
  346.                                                       
  347.                                                         
  348.                                                <span class="title" style="float: right;text-align: center;" > </span>
  349.                                            
  350.                                               </div>
  351.                                             </div>
  352.                 
  353.                                           </div>
  354.                                   
  355.                                           {% endif %}
  356.                                     {% set displayed_categories = displayed_categories|merge([cat.name]) %}
  357.                                     
  358.                                 {% endfor %} 
  359.                                 {% endfor %} 
  360.                                 </div>
  361.                             
  362.                             </div>
  363.                             
  364.                     </form>
  365.                   </div>
  366.                   <!--  -->
  367.                 </div>
  368.               </div>
  369.             </div>
  370.           </div>
  371.         </div>
  372.         
  373.                                            
  374.                                             
  375.         
  376.                          {% set displayed_categories = [] %}  
  377.                                    {% for bureau in products|sort((a, b) => b <=> a)   %} 
  378.                                     {% for cat in bureau.categoriesProduct   %}
  379.                                      {% if cat.name not in displayed_categories %}
  380.                            
  381.                                              <div class="modal fade" id="aynModal{{cat.id}}">
  382.                             <div class="modal-dialog modal-lg">
  383.                                 <div
  384.                                     class="modal-content">
  386.                                     <!-- Modal Header -->
  387.                                     <div class="modal-header" style="justify-content: end;">
  388.                                         <button type="button" class="close" data-dismiss="modal" style="background: #ffffff;font-size: 27px;width:30px;border: 1px solid #878787;">&times;</button>
  389.                                     </div>
  390.                                     <div class="container">
  391.                                         <div class="row">
  393.                                           <h2 class="mt-3 title " style="font-size:25px; font-weight:bold;">{{ cat.name }}</h2>
  394.                                           <p class="text-muted mt-3"><small>{{ cat.description }}</small></p>
  395.                                             
  396.                                   
  397.                                              
  398.                                         </div>
  399.                                         
  400.                                         <!-- Modal body -->
  401.                                     
  402.                                         <div class="modal-body">
  404.                                              
  405.                                                 <img loading="lazy" src="{{ asset('uploads/coworking/' ~ cat.image) }}"  id="main">
  406.                                             <div id="thumbnails">
  407.                                                 {# {% for image in bureau.images  %} 
  408.                                               <img loading="lazy" src="/uploads/coworking/detail/{{image.path}}" alt="Bridge">
  409.                    
  410.                                             {% endfor %}#}
  411.                                             </div>
  412.                                             
  413.                                             <div class="row" style="margin-top:5%;">
  414.                                             {#    <div class="col-sm-6">
  415.                                                     <p class="m-1 fs-6" style="font-weight:bold;">
  416.                                                         Équipements</p>
  417.                                                     <ul style="font-size:12px;">
  418.                                                      <li></li>
  419.                                                          
  420.                                                     </ul>
  421.                                                 </div>#}
  422.                                                     <div class="col-md-12">
  423.                                                     <p class="m-1 fs-6" style="font-weight:bold;">Services</p>
  424.                                                 <ul style="font-size:12px;">
  425.                                                         <li><b>Restaurant Melliber :</b> Dans une atmosphère conviviale et accueillante, notre restaurant partage gracieusement un bouquet de saveurs, du petit déjeuner au dîner</li>
  426.                                                         <li class="souligne"><b>Hammam & Spa :</b> Notre spa offre un refuge tranquille avec une variété de soins relaxants. Profitez de massages apaisants, de hammams revigorants et d'autres thérapies régénérantes conçues pour revitaliser votre corps et votre esprit</li>
  427.                                                         <li class="souligne"><b>Salon de coiffure et de bien-être :</b> Notre salon de beauté et de bien-être propose des services experts de manucure, pédicure et coiffure pour hommes et femmes. C'est l'endroit idéal pour être au meilleur de sa forme.</li>
  428.                                                         <li class="souligne"><b>Parking :</b> Notre établissement dispose également d'un vaste parking, garantissant un stationnement pratique et sécurisé pour tous nos membres et invités</li>
  429.                                                         <li class="souligne"><b>Events & Exhibition : </b>Le Cowork&Live by Melliber propose régulièrement des événements variés, allant des concours de cuisine aux séminaires en comptabilité, en passant par des expositions de peinture. Nous créons ainsi un environnement dynamique qui allie travail, apprentissage et culture pour enrichir vos expériences.</li>
  430.                                                         <li class="souligne"><b>2 kitchenettes :</b> Nos kitchenettes sont entièrement équipées, y compris des minibars et d'autres commodités, offrant à nos membres tout ce dont ils ont besoin pour une expérience culinaire pratique et agréable</li>
  431.                                                         <li class="souligne"><b>Salle de Fitness :</b> Notre centre de fitness est équipé d'installations de premier ordre et propose diverses options d'entraînement pour répondre à tous les besoins et préférences.</li>
  432.                                                         <li class="souligne"><b>Espace gaming :</b> Notre espace de jeux comprend des jeux d'arcade, un baby-foot et une table de billard américain, offrant divertissement et détente à tous nos membres.</li>
  433.                                                         <li class="souligne"><b>Services suplémetaires :</b> Options additionnelles permettant aux clients de personnaliser leur expérience avec des équipements techniques et des services, pour répondre à des besoins spécifiques lors de la location de salles ou de bureaux</li>
  434.                                                          
  435.                                                      
  436.                                                     </ul>
  437.                                                 </div>
  438.                                             </div>
  439.                                             
  440.                                             <div class="row">
  441.                                                 <div class="col-sm-12">
  442.                                                     
  443.                                                             <a href="/uploads/front-images/LISTEDEPRIXCOWORK2.pdf" class=""  target="_blank" id="btnInformation" style="padding:10px; text-decoration:none; width:200px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:left;margin-top:5%; margin-bottom:5%;font-size: 13px;text-decoration: underline;font-weight: 800;color:black !important;">
  444.                                                                 Plus d'information
  445.                                                             </a>
  446.                                                             <a href="{{path("reservationbureauxstep1",{id:cat.id})}}" class="btn-res text-center text-light text-uppercase bg-dark" id="btnReservation"  style="padding:10px; text-decoration:none; width:130px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:right;margin-top:5%; margin-bottom:5%;">
  447.                                                                 Réserver
  448.                                                             </a>
  449.                                                         
  450.                                                     </div>
  451.                                                     
  452.                                                     
  453.                                                 </div>
  454.                                             </div>
  455.                                         </div>
  458.                                     </div>
  459.                                 </div>
  460.                             </div>
  461.                         </div>
  462.                         {%  endif  %}
  463.                         {%  endfor  %}
  464.                          {%  endfor  %}
  465.       </div>
  466.     </div>
  467.   
  468.   
  469.   
  470.   
  471.   
  472.   
  473.   
  474.   
  475.     <div class="container">
  476.         <div class="row">
  477.             <div class="col-xl-12 text-center" >
  478.                 <p>*Le prix de revient journalier calculé sur la base d’un abonnement mensuel</p>
  479.             </div>
  480.         </div>
  481.     </div>
  482.   
  483. {% endblock %}
  489. {% block javascripts %}
  490.   <!-- MAIN CONTENT -->
  493. <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  494. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  495. <script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>
  496. <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
  500.   <script>
  501.        $(document).ready(function () {
  502.              
  503.       $("#seeDetails").click(function(){
  504.           $(".panel-sticky").css('z-index','0');
  505.       });
  506.        $(".close").click(function(){
  507.           $(".panel-sticky").css('z-index','9999999');
  508.       });
  509.       $("#selectAdon").chosen();
  510.       $('.multistep-container .form-box .button-row .next').click(function () {
  511.         $(this).parents('.form-box').fadeOut('fast')
  512.         $(this).parents('.form-box').next().fadeIn('fast')
  513.       })
  514.       $('.multistep-container .form-box .button-row .previous').click(function () {
  515.         $(this).parents('.form-box').fadeOut('fast')
  516.         $(this).parents('.form-box').prev().fadeIn('fast')
  517.       })
  518.       
  519.     
  520.       
  521.        $('.ReserveNext').click(function () {
  522.         $(this).parents('.form-box').fadeOut('fast')
  523.         $(this).parents('.form-box').next().fadeIn('fast')
  524.       })
  525.       $('.ReservePrevious').click(function () {
  526.         $(this).parents('.form-box').fadeOut('fast')
  527.         $(this).parents('.form-box').prev().fadeIn('fast')
  528.       })
  529.     
  530.     
  531.     $('#demo').daterangepicker({
  532.     "showISOWeekNumbers": true,
  533.     "timePicker": true,
  534.     "autoUpdateInput": true,
  535.     "locale": {
  536.         "cancelLabel": 'Clear',
  537.         "format": "MMMM DD, YYYY @ h:mm A",
  538.         "separator": " - ",
  539.         "applyLabel": "Apply",
  540.         "cancelLabel": "Cancel",
  541.         "fromLabel": "From",
  542.         "toLabel": "To",
  543.         "customRangeLabel": "Custom",
  544.         "weekLabel": "W",
  545.         "daysOfWeek": [
  546.             "Su",
  547.             "Mo",
  548.             "Tu",
  549.             "We",
  550.             "Th",
  551.             "Fr",
  552.             "Sa"
  553.         ],
  554.         "monthNames": [
  555.             "January",
  556.             "February",
  557.             "March",
  558.             "April",
  559.             "May",
  560.             "June",
  561.             "July",
  562.             "August",
  563.             "September",
  564.             "October",
  565.             "November",
  566.             "December"
  567.         ],
  568.         "firstDay": 1
  569.     },
  570.     "linkedCalendars": true,
  571.     "showCustomRangeLabel": false,
  572.     "startDate": 1,
  573.     "endDate": "December 31, 2016 @ h:mm A",
  574.     "opens": "center"
  575. });
  576.     
  577.     
  578.     /**/
  579.     
  580.     $('#categorie-bureaux').change(function() {
  581.         var selectedOption = $(this).val();
  583.         $.ajax({
  584.             url: '/ajax/getbureauajax',
  585.             type: 'GET',
  586.             data: {
  587.                 selected_option: selectedOption,
  588.             },
  589.             success: function(response) {
  590.                 console.log("Ajax request successful");
  592.                 // Clear the container first, if needed
  593.                 $('.container-bureau').empty();
  595.                 // Iterate over each bureau in the response and insert them into the container
  596.                 response.bureaux.forEach(function(bureau) {
  597.                     var bureauHtml = `
  598.                       <div class="card-brx row mt-3" style="width:auto; border: none; border-radius:17px; box-shadow: 0 0 12px 5px rgba(0, 0, 0, 0.05);">
  599.                         <div class="col-md-4 col-lg-4 col-sm-12">
  600.                           <img loading="lazy" class="img-fluid" src="${bureau.image}" style="width:90%; border-radius:6px;margin-top: 10px;" />
  601.                         </div>
  603.                         <div class="bureaux-desc col-md-8 col-lg-8 col-sm-12 mt-3" style="font-family:'Roboto',sans-serif; line-height:24px;">
  604.                           <div>
  605.                             <img loading="lazy" src="{{ asset('/front/images/usershands.png') }}" style="float: right;" />
  606.                             <p class="fs-5" style="font-family: Roboto;font-weight:bold;">${bureau.title}</p>
  607.                             <p style="color:rgba(51, 51, 51, 1);">
  608.                               <i class="fa-solid fs-6 fa-location-dot"></i> <span class="m-1 fs-6" style="font-weight:400;">${bureau.location}</span>
  609.                             </p>
  611.                             <div style="color:rgba(107, 111, 123, 1); line-height:20px; font-size:13px; font-weight:400;">
  612.                               <p>${bureau.description1}</p>
  613.                               <p>
  614.                                 <i class="fa-regular fa-lightbulb fs-6" style="color: #e2b653; "></i> <span>Ideal pour: ${bureau.description}</span>
  615.                               </p>
  616.                             </div>
  617.                           </div>
  618.                         </div>
  620.                         <div class="col-md-12 col-lg-12 col-sm-12 d-flex justify-content-center align-items-end mb-3">
  621.                           <a class="btn-res text-center text-light text-uppercase bg-dark" href="${bureau.reservationLink}" style="padding:10px; text-decoration:none; width:230px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;">Réserver</a>
  622.                         </div>
  623.                       </div>
  624.                     `;
  626.                     $('.container-bureau').append(bureauHtml);
  627.                 });
  629.                 // Rest of your code
  630.             },
  631.             error: function(xhr, status, error) {
  632.                 // Handle any error that occurred during the AJAX request
  633.                 console.error(error);
  634.             }
  635.         });
  636.     });
  637.     
  638.     /***/
  639.       
  640.       
  641.     //   alert("frfr");
  643.     var thumbnails = document.getElementById("thumbnails")
  644. var imgs = thumbnails.getElementsByTagName("img")
  645. var main = document.getElementById("main")
  646. var counter=0;
  648. for(let i=0;i<imgs.length;i++){
  649.   let img=imgs[i]
  650.   
  651.   
  652.   img.addEventListener("click",function(){
  653.   main.src=this.src
  654. })
  655.   
  656. }
  657.     });
  658.     
  659.     
  660.     
  661.     
  662.     
  663.     
  664.     /**/
  665.       var stickyHeaders = (function() {
  667.   var $window = $(window),
  668.       $stickies;
  670.   var load = function(stickies) {
  672.     if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {
  674.       $stickies = stickies.each(function() {
  676.         var $thisSticky = $(this).wrap('<div class="followWrap" />');
  677.   
  678.         $thisSticky
  679.             .data('originalPosition', $thisSticky.offset().top)
  680.             .data('originalHeight', $thisSticky.outerHeight())
  681.               .parent()
  682.               .height($thisSticky.outerHeight());               
  683.       });
  685.       $window.off("scroll.stickies").on("scroll.stickies", function() {
  686.           _whenScrolling();        
  687.       });
  688.     }
  689.   };
  691.   var _whenScrolling = function() {
  693.     $stickies.each(function(i) {            
  695.       var $thisSticky = $(this),
  696.           $stickyPosition = $thisSticky.data('originalPosition');
  697.       
  698.       console.log($thisSticky.data('num') + ' is at' + $stickyPosition);
  700.       if ($stickyPosition <= $window.scrollTop()) {        
  701.         
  702.         var $nextSticky = $stickies.eq(i + 1),
  703.             $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');
  705.         $thisSticky.addClass("fixed");
  707.         if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) {
  709.           $thisSticky.addClass("absolute").css("top", $nextStickyPosition);
  710.         }
  712.       } else {
  713.         
  714.         var $prevSticky = $stickies.eq(i - 1);
  716.         $thisSticky.removeClass("fixed");
  718.         if ($prevSticky.length > 0 && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight')) {
  720.           $prevSticky.removeClass("absolute").removeAttr("style");
  721.         }
  722.       }
  723.     });
  724.   };
  726.   return {
  727.     load: load
  728.   };
  729. })();
  731. $(function() {
  732.   stickyHeaders.load($(".followMeBar"));
  733. });
  734.   </script>
  735. {% endblock %}