{% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}


{% block stylesheets %}
{{ parent() }}
 <link rel="stylesheet" href="{{ asset('themes/coworking/css/reservation.css') }}" />
 
{#<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" />#}
<style>
.fs-5{
  font-size: 18px !important;
}
.title {
font-family: 'Montserrat', sans-serif;
font-weight:bold;
font-size: 12px;
padding-bottom: 0px;
margin-top: 0px;color:black;
}

  .modal-backdrop.fade.show {
        display: none;
}

i.fa-solid.fa-users {
    font-size: 24px;
}

.col-md-12.col-lg-12.col-sm-12.d-flex.justify-content-end.align-items-end.mb-3 {
    flex: 0 0 86%;
}
i.fa.fa-users {
  font-size: 22px;
}
 
 @media only screen and (max-width: 600px) {
    
      html, body {
                  overflow-x: hidden  !important;
                }
                body {
                  position: relative !important;
                }
    
     .multistep-container .active-button li {
        display: inline-block;
        width: 89px;
     }

    .multistep-container .mutistep-form-area .form-box {
        position: relative;
        top: 35px;
    }
    .col-sm-8.reservation-steeps {
        padding:0px;
    }
    .multistep-container .active-button li:not(:first-child) .round-btn:before {
            left: -114px;
    }
    .smlstyl{
        margin-right:2%;
    }

    .col-sm-6 a{
        margin-right:2%;
    }
    .panel-sticky {
        padding:2px;
    }
    
    
            a#seeDetails {
                margin-bottom: -11%;
            }
            a#seePrice {
                float: right;
                margin-right: 22%;
            }
            
            .col-md-4.float-right{
                margin-right: 25% !important;
            }
         
    
           
}

#seePrice {
    font-weight: 400 !important;
    width: 170px !important;
}
.titre-page{
margin-top:10px;
font-size: 20px;
line-height:45.29px;
color: #000000;
}


    .imageForMobile{
        display:none;
    } 
    .imageForDesktop{
        display:block;
    }
    

    @media (max-width:767px) {
                
        .imageForDesktop{
            display:none;
        } 
        .imageForMobile{
            display:block;
        }
        
        .col-sm-8.reservation-steeps{
                top: 0px
        }
        .divCardsForMobile{
            top: 0px !important;
        }
        .multistep-container .mutistep-form-area{
            margin-top: 25px !important;
        }
        
        
        .titre-page{
              padding-left: 10px;
              font-size: 15px !important;
              line-height: 23.29px !important;
              margin-top: 0px !important;
        }

         .forMobile{
                margin-top: 5% !important;
        }
        #btnTarifs{
                padding: 5px  !important;
                font-size: 12px !important;
        }
        
         #btnInformation{
                   width: 170px !important;
                    font-size: 10px !important;
        }
        #btnReservation{
                font-size: 10px !important;
                width: 100px!important;
        }
        .bureaux-desc{
            padding: 15px!important;
        }
       
        .close{
          width:25px !important;
      }
        
      }
    
</style>
  
{% endblock  %}
{% block body %}
 

 
 

 
  <img src="{{asset('themes/coworking/front/images/background_SALLEDEREU.png')}}" style="width: 100%;height: 520px;" class="img-fluid imageForDesktop" />
      <img src="{{asset('uploads/front-images/bgSalle-reunionMobile.png')}}" style="width: 100%;" class="img-fluid imageForMobile" />
  


  <div class="container">
    <div class="row">

      
      <div class="col-sm-8 reservation-steeps" style="overflow: hidden;">

           <div class="row">
                <div class="forMobile" style="display: inline-flex;">
                  <div class="col-sm-6">
                    <h6 class="titre-page">{{ "Réservation Salles de réunion"|trans({},"front") }}</h6>
                  </div>
                  <div class="col-sm-6" >
                    {#<a href="/themes/coworking/front/images/prixSalles.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>#}
                  
                   <a href="/themes/coworking/front/images/GRILLEUPDATEDSITEMeetingRooms.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>
                  
                  
                  </div>
                </div>
            </div>
        
       

        {#  #}
        <div class="container">
          <div class="row">

             <div class="container d-flex justify-content-center align-items-center">
         
         
    {#      <ul id="progressbar">#}
				{#	<li class="active"> #}
    {#         <span> Etape 1 : <br> Choix de Salle </span>#}
    {#         </li>#}
				{#	<li  ></li>#}
				{#	<li> </li>#}
				{#		<li> </li>#}
           
          
				{#</ul>#}
        </div>

            <div class="col-xl-12 divCardsForMobile" style="top: 60px;" >
              <div class="multistep-container">
                <div class="mutistep-form-area">
                  <!--  -->
                     <!--  <div class="form-box">
                   
                    <ul class="active-button">
                      <li class="active">
                        <span class="round-btn">1</span>
                      </li>
                      <li>
                        <span class="round-btn">2</span>
                      </li>
                      <li>
                        <span class="round-btn">3</span>
                      </li>
                    </ul>
                    <!--  -->
                  
                       
                            <div class="container" style="margin-top:40px;">

                    

                                <div class="panel">
                                   
                                     
                                 
                                      

                                             {% for salle in products   %}
                                          <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);">
                                            <div class="col-md-6 col-lg-6 col-sm-12">
                                              <img class="img-fluid" src="{{ asset('uploads/coworking/shop/products/' ~ salle.image) }}" style="width:100%; border-radius:6px;margin-top: 10px;" />
                                            </div>
                
                                            <div class="bureaux-desc col-md-6 col-lg-6 col-sm-12 mt-3" style="font-family:'Roboto',sans-serif; line-height:24px;">
                                              <div>
                                                   <div style="float: right;">
                                                 {#{% if salle.valueReduction %}#}
                                                 {#<b style="color: black;">{{ salle.valueReduction }} </b>#}
                                                 {#{% endif %}#}
                                                 <i class="fa fa-users" style="color:black;font-size: 15px;color: black;"></i> 
                                                   </div>
                                               
                                               
                                                <p class="fs-5 title" >{{ salle.name }}</p>
                                                <small style=" font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding-bottom: 0px;
    margin-top: 0px;
    color: black;">Capacité maximum {{ salle.valueReduction }}</small>
                                                           <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> {{salle.price}}* MAD TTC / 
                                                           
                                                        {% if salle.price < 121 %} Heure {% else %} Demi-journée {% endif  %}
                                                           
                                                           </a>
                                                       <br><br><br><br>
                                                      
                                                        <a  href="#" data-toggle="modal" id="seeDetails" data-target="#aynModal{{ salle.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>
                                                        <a href="{{path("confirmation_reservation_room")}}" 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>
                                                      
                                                        
                                               <span class="title" style="float: right;text-align: center;" > </span>
                                           
                                                <div style="color:rgba(107, 111, 123, 1); line-height:20px; font-size:13px; font-weight:400;">
                                                  <!--<p style="padding-top: 0px;">{{ salle.description }}</p>-->
                                                 
                                                </div>
                                              </div>
                                            </div>
                
                                             <div class="col-md-12 col-lg-12 col-sm-12 d-flex justify-content-end align-items-end mb-3">
                                               
                                                 <div class="row">
                                                        {#<div class="col-md-4">#}
                                                        {#   <a class="float-right" href="#"  id="seePrice" style="padding-top: 10px;padding-right: 10px;text-decoration:none;font-size:13px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:right;color: #020202;font-weight: 800;">*À partir de<br> {{salle.price}} MAD TTC / J</a>#}
                                                        {#</div> #}
                                                        {# <div class="col-md-4">#}
                                                        {#   <a class="float-right" href="#" data-toggle="modal" id="seeDetails" data-target="#aynModal{{ salle.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;font-weight: 800;"><u>{{ "Voir Details"|trans({},"front") }}</u></a>#}
                                                        {#</div> #}
                                                        {# <div class="col-md-4">#}
                                                        {#   <a href="{{path("reservationMeetingstep1",{id:salle.id})}}"  class="btn-res text-center text-light text-uppercase bg-dark ReserveNext_"   style="padding:10px; text-decoration:none; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;">Réserver</a>#}
                                                        {#</div> #}
                                                        
                                                        {# <div class="col-md-4">#}
                                                        {#    <a href="{{path("confirmation_reservation_room")}}" 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"|trans({},"front") }}</a>#}
                                                        {#</div> #}
                                                </div>
                                            </div>
                                          </div>
                                  
                                   
                                {% endfor %} 
                                </div>
                                

                            </div>
                            
                           
                     
 
                    </form>
                  </div>
                  <!--  -->

                  

                 
                  <!--  -->
                </div>
              </div>
            </div>
          </div>
        </div>
        
    {# {% for salle in products %}#}
    {#    <div class="modal fade" id="aynModal{{salle.id}}">#}
    {#							<div class="modal-dialog modal-lg">#}
    {#								<div#}
    {#									class="modal-content">#}
    
    {#									<!-- Modal Header -->#}
    {#									<div class="modal-header" style="justify-content: end;">#}
    {#										<button type="button" class="close" data-dismiss="modal" style="background: #ffffff;font-size: 27px;width:30px;border: 1px solid #878787;">&times;</button>#}
    {#									</div>#}
    {#									<div class="container">#}
    {#										<div class="row">#}
    
    {#											<div class="col-sm-6">#}
    {#												<h2 style="font-size:25px;font-wight:bold;margin-top:5%;">{{salle.name}}</h2>#}
    {#											</div>#}
    {#											<small>#}
    {#											{{salle.shortDescription}}    #}
    {#											</small>#}
    											{#<div class="col-sm-6">#}
    											{#	<a class="btn-res text-center text-light text-uppercase bg-dark" href="#" style="padding:10px; text-decoration:none; width:129px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:right;margin-top:5%;">#}
    											{#		Réserver#}
    											{#	</a>#}
    											{#</div>#}
    {#										</div>#}
    										
    {#										<!-- Modal body -->#}
    									
    {#										<div class="modal-body">#}
    										    
    {#										   <img src="{{ asset('uploads/coworking/shop/products/' ~ salle.image) }}"  id="main">#}
    {#                                            <div id="thumbnails">#}
    {#                                                 {% for image in salle.images  %} #}
    {#                                              <img src="/uploads/coworking/detail/{{image.path}}">#}
                       
    {#                                            {% endfor %}#}
    {#                                              <img src="{{ asset('uploads/coworking/shop/products/' ~ salle.image) }}">#}
    {#                                            </div>#}
    										   
    
    {#											<div class="row" style="margin-top:5%;">#}
    												{#<div class="col-sm-6">#}
    												{#	<p class="m-1 fs-6" style="font-weight:bold;">#}
    												{#		Équipements</p>#}
    												{#	<ul style="font-size:12px;">#}
    												{#		<li>{{ salle.description|nl2br|raw }}</li>#}
    														 
    												{#	</ul>#}
    												{#</div>#}
    {#												<div class="col-sm-6">#}
    {#													<p class="m-1 fs-6" style="font-weight:bold;">Services</p>#}
    {#													<ul style="font-size:12px;">#}
    {#														<li>Accès internet wifi haut débit ( Gratuit )</li>#}
    {#														<li class="souligne">Accès internet par cable</li>#}
    {#														<li class="souligne">Parking</li>#}
    {#														<li class="souligne">Restaurants</li>#}
    {#														<li class="souligne">Fitness et vestiaires</li>#}
    {#														<li class="souligne">Espace gaming</li>#}
    {#														<li class="souligne">Nap room</li>#}
    {#														<li class="souligne">Centre de beauté</li>#}
    {#														<li class="souligne">Espace kitchenette</li>#}
    {#														<li class="souligne">Salle de réunion#}
    {#														</li>#}
    {#														<li class="souligne">Free work</li>#}
    {#														<li class="souligne">Photocopie#}
    {#														</li>#}
    {#														<li class="souligne">Secrétariat</li>#}
    {#													</ul>#}
    {#												</div>#}
    {#											</div>#}
    											
    {#											<div class="row">#}
    {#												<div class="col-sm-12">#}
    													
    {#													    	<a href="/themes/coworking/front/images/prixSalles.pdf" target="_blank" class=""  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;">#}
    {#															    Plus d'information#}
    {#														    </a>#}
    													    
    {#    														<a class="btn-res text-center text-light text-uppercase bg-dark" href="{{path("reservationMeetingstep1",{id:salle.id})}}" id="btnReservation" style="padding:10px; text-decoration:none; width:129px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:right;margin-top:5%; margin-bottom:5%;">#}
    {#    															{{ "Réserver"|trans({},"front") }}#}
    {#    														</a>#}
    												
    {#												</div>#}
    {#											</div>#}
    {#										</div>#}
    
    
    {#									</div>#}
    {#								</div>#}
    {#							</div>#}
    {#						</div>#}
    {#{%  endfor  %}#}


{% for salle in products %}
    <div class="modal fade" id="aynModal{{salle.id}}">
							<div class="modal-dialog modal-lg">
								<div
									class="modal-content">

									<!-- Modal Header -->
									<div class="modal-header" style="justify-content: end;">
										<button type="button" class="close" data-dismiss="modal" style="background: #ffffff;font-size: 27px;width:30px;border: 1px solid #878787;">&times;</button>
									</div>
									<div class="container">
										<div class="row">

											 
												<h2 style="font-size:25px;font-wight:bold;margin-top:5%;">{{salle.name}}</h2>
										 <p class="text-muted mt-3"><small>{{ salle.shortDescription }}</small></p>
											
											
											{#<div class="col-sm-6">#}
											{#	<a class="btn-res text-center text-light text-uppercase bg-dark" href="#" style="padding:10px; text-decoration:none; width:129px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:right;margin-top:5%;">#}
											{#		Réserver#}
											{#	</a>#}
											{#</div>#}
										</div>
										
										<!-- Modal body -->
									
										<div class="modal-body">
										    
										   <img src="{{ asset('uploads/coworking/shop/products/' ~ salle.image) }}"  id="main">
                                            <div id="thumbnails">
                                                 {% for image in salle.images  %} 
                                              <img src="/uploads/coworking/detail/{{image.path}}">
                   
                                            {% endfor %}
                                             <img src="{{ asset('uploads/coworking/shop/products/' ~ salle.image) }}">
                                            </div>
                                            										   
                                            
											<div class="row" style="margin-top:5%;">
												{#<div class="col-sm-6">#}
												{#	<p class="m-1 fs-6" style="font-weight:bold;">#}
												{#		Équipements</p>#}
												{#	<ul style="font-size:12px;">#}
												{#		<li>{{ freework.description|nl2br|raw }}</li>#}
														 
												{#	</ul>#}
												{#</div>#}
									<div class="col-md-12">
    													<p class="m-1 fs-6" style="font-weight:bold;">Services</p>
    													<ul style="font-size:12px;">
														<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>
														<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>
														<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>
														<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>
														<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>
														<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>
														<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>
														<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>
														<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>
														 
													 
													</ul>
    												</div>
											</div>
											
											<div class="row">
												<div class="col-sm-12">
												    
													<a href="/themes/coworking/front/images/GRILLEUPDATEDSITEMeetingRooms.pdf" target="_blank" class=""  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;">
    												     Plus d'information
    												</a>
    													    
													<a class="btn-res text-center text-light text-uppercase bg-dark" href="{{path("reservationMeetingstep1",{id:salle.id})}}" id="btnReservation" style="padding:10px; text-decoration:none; width:129px; font-size:12px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:right;margin-top:5%; margin-bottom:5%;">
														{{ "Réserver"|trans({},"front") }}
													</a>
												
												</div>
											</div>
										</div>


									</div>
								</div>
							</div>
						</div>
{%  endfor  %}


      </div>
    </div>

  
{% endblock %}






{% block javascripts %}
  <!-- MAIN CONTENT -->


<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
{#<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>#}
{#<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>#}

  <script>
       $(document).ready(function () {
           
           
    var thumbnails = document.getElementById("thumbnails")
var imgs = thumbnails.getElementsByTagName("img")
var main = document.getElementById("main")
var counter=0;

for(let i=0;i<imgs.length;i++){
  let img=imgs[i]
  
  
  img.addEventListener("click",function(){
  main.src=this.src
})
  
}

             
      $("#seeDetails").click(function(){
          $(".panel-sticky").css('z-index','0');
      });
       $(".close").click(function(){
          $(".panel-sticky").css('z-index','9999999');
      });
    //   $("#selectAdon").chosen();
      $('.multistep-container .form-box .button-row .next').click(function () {
        $(this).parents('.form-box').fadeOut('fast')
        $(this).parents('.form-box').next().fadeIn('fast')
      })
      $('.multistep-container .form-box .button-row .previous').click(function () {
        $(this).parents('.form-box').fadeOut('fast')
        $(this).parents('.form-box').prev().fadeIn('fast')
      })
      
    
      
      $('.ReserveNext').click(function () {
        $(this).parents('.form-box').fadeOut('fast')
        $(this).parents('.form-box').next().fadeIn('fast')
      })
      $('.ReservePrevious').click(function () {
        $(this).parents('.form-box').fadeOut('fast')
        $(this).parents('.form-box').prev().fadeIn('fast')
      })
    
    

    });
    
    
    
    
    
    
//     /**/
//       var stickyHeaders = (function() {

//   var $window = $(window),
//       $stickies;

//   var load = function(stickies) {

//     if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {

//       $stickies = stickies.each(function() {

//         var $thisSticky = $(this).wrap('<div class="followWrap" />');
  
//         $thisSticky
//             .data('originalPosition', $thisSticky.offset().top)
//             .data('originalHeight', $thisSticky.outerHeight())
//               .parent()
//               .height($thisSticky.outerHeight()); 			  
//       });

//       $window.off("scroll.stickies").on("scroll.stickies", function() {
// 		  _whenScrolling();		
//       });
//     }
//   };

//   var _whenScrolling = function() {

//     $stickies.each(function(i) {			

//       var $thisSticky = $(this),
//           $stickyPosition = $thisSticky.data('originalPosition');
      
//       console.log($thisSticky.data('num') + ' is at' + $stickyPosition);

//       if ($stickyPosition <= $window.scrollTop()) {        
        
//         var $nextSticky = $stickies.eq(i + 1),
//             $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');

//         $thisSticky.addClass("fixed");

//         if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) {

//           $thisSticky.addClass("absolute").css("top", $nextStickyPosition);
//         }

//       } else {
        
//         var $prevSticky = $stickies.eq(i - 1);

//         $thisSticky.removeClass("fixed");

//         if ($prevSticky.length > 0 && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight')) {

//           $prevSticky.removeClass("absolute").removeAttr("style");
//         }
//       }
//     });
//   };

//   return {
//     load: load
//   };
// })();

// $(function() {
//   stickyHeaders.load($(".followMeBar"));
// });
  </script>
{% endblock %}