{% 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>
  .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: 150px !important;
}
</style>
  
{% endblock  %}
{% block body %}
 

 
 

 
  <img src="{{asset('themes/coworking/front/images/sallereunion.jpg')}}" style="width: 100%;height: 520px;" class="img-fluid" />
  <div class="container">
    <div class="row">

      
      <div class="col-sm-8 reservation-steeps">

           <div class="row">
          <div class="col-sm-6">
            <h6 style="margin-top:10px">Réservation Salles de réunion</h6>
          </div>
          <div class="col-sm-6" style="margin-top:10px;">
            <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>
          </div>
        </div>
        
       

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

            <div class="col-xl-9">
                <div class="stepbox-dots__wrapper" id="js-stepbox__nav" data-number="2">
							<div class="stepbox-dots__line01 lazyloaded" data-bg="/themes/coworking/front/images/step-line-x.png" style="background-image: url(&quot;/themes/coworking/front/images/step-line-x.png&quot;);"></div>
							<div class="stepbox-dots__line02 lazyloaded" data-bg="/themes/coworking/front/images/step-line-x2.png" style="background-image: url(&quot;/themes/coworking/front/images/step-line-x2.png&quot;);"></div>
							<ul class="stepbox-dots" role="tablist">
								<li class="active" data-number="1">
									<button type="button" role="tab">1</button>
								</li>
								<li data-number="2" class="">
									<button type="button" role="tab">2</button>
								</li>
								<li data-number="3" class="">
									<button type="button" role="tab">3</button>
								</li>
								 
							</ul>
						</div>
            </div>

            <div class="col-xl-12">
              <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-4 col-lg-4 col-sm-12">
                                              <img class="img-fluid" src="{{ asset('uploads/coworking/shop/products/' ~ salle.image) }}" style="width:90%; border-radius:6px;margin-top: 10px;" />
                                            </div>
                
                                            <div class="bureaux-desc col-md-8 col-lg-8 col-sm-12 mt-3" style="font-family:'Roboto',sans-serif; line-height:24px;">
                                              <div>
                                                   <div style="float: right;">
                                                 <i class="fa fa-users" style="color:black;"></i> 
                                                   </div>
                                               
                                               
                                                <p class="fs-5" style="font-family: Roboto;font-weight:bold;padding-bottom: 0px;color: black;">{{ salle.name }}</p>
                                               <span class="" style="font-family: Roboto;padding-bottom: 0px;color:black;float: right;font-size: 15px;font-weight: 500;padding-bottom: 12px;text-align: center;"> {% if salle.valueReduction %}Capacité maximale<br>{{ salle.valueReduction }}{% endif %}</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</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>
                                            </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">&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 %}
                                            </div>
										   

<!--<img src="{{asset('themes/coworking/front/images/iimg6.png')}}" id="main">
<div id="thumbnails">
  <img src="{{asset('themes/coworking/front/images/iimg6.png')}}">
  <img src="{{asset('themes/coworking/front/images/iimg1.png')}}">
  <img src="{{asset('themes/coworking/front/images/iimg2.png')}}">
</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">
													<div>
														<a class="btn-res text-center text-light text-uppercase bg-dark" href="{{path("reservationMeetingstep1",{id:salle.id})}}" 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
														</a>
													</div>
												</div>
											</div>
										</div>


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



      </div>
    </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 () {
             
      $("#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')
      })
    
    
    /**/
    
    $('#categorie-bureaux').change(function() {
        var selectedOption = $(this).val();

        $.ajax({
            url: '/ajax/getbureauajax',
            type: 'GET',
            data: {
                selected_option: selectedOption,
            },
            success: function(response) {
                console.log("Ajax request successful");

                // Clear the container first, if needed
                $('.container-bureau').empty();

                // Iterate over each bureau in the response and insert them into the container
                response.bureaux.forEach(function(bureau) {
                    var bureauHtml = `
                      <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);">
                        <div class="col-md-4 col-lg-4 col-sm-12">
                          <img class="img-fluid" src="${bureau.image}" style="width:90%; border-radius:6px;margin-top: 10px;" />
                        </div>

                        <div class="bureaux-desc col-md-8 col-lg-8 col-sm-12 mt-3" style="font-family:'Roboto',sans-serif; line-height:24px;">
                          <div>
                            <img src="{{ asset('/front/images/usershands.png') }}" style="float: right;" />
                            <p class="fs-5" style="font-family: Roboto;font-weight:bold;">${bureau.title}</p>
                            <p style="color:rgba(51, 51, 51, 1);">
                              <i class="fa-solid fs-6 fa-location-dot"></i> <span class="m-1 fs-6" style="font-weight:400;">${bureau.location}</span>
                            </p>

                            <div style="color:rgba(107, 111, 123, 1); line-height:20px; font-size:13px; font-weight:400;">
                              <p>${bureau.description1}</p>
                              <p>
                                <i class="fa-regular fa-lightbulb fs-6" style="color: #e2b653; "></i> <span>Ideal pour: ${bureau.description}</span>
                              </p>
                            </div>
                          </div>
                        </div>

                        <div class="col-md-12 col-lg-12 col-sm-12 d-flex justify-content-center align-items-end mb-3">
                          <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>
                        </div>
                      </div>
                    `;

                    $('.container-bureau').append(bureauHtml);
                });

                // Rest of your code
            },
            error: function(xhr, status, error) {
                // Handle any error that occurred during the AJAX request
                console.error(error);
            }
        });
    });
    
    /***/
      
      
    //   alert("frfr");

    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
})
  
}
    });
    
    
    
    
    
    
    /**/
      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 %}