{% 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;
}
 
</style>
  
{% endblock  %}
{% block body %}
 

 
 

 
  <img src="{{asset('themes/coworking/front/images/freewor.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 Freework</h6>
          </div>
          <div class="col-sm-6" style="margin-top:10px;">
            <a href="/themes/coworking/front/images/FREEWORK.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">    <a href="{{path("reservationfreework")}}"> 1</a> </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 freework 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/' ~ freework.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-user" style="color:black;"></i> 
                                                   </div>
                                               
                                               
                                                <p class="fs-5" style="font-family: Roboto;font-weight:bold;padding-bottom: 0px;color: black;">{{ freework.name }}</p>
                                               
                                                <div style="color:rgba(107, 111, 123, 1); line-height:20px; font-size:13px; font-weight:400;">
                                                 <!-- <p style="padding-top: 0px;">{{ freework.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-left" href="#" id="seePrice"  style="padding-top: 10px;text-decoration:none;font-size:13px; font-family:'PT Sans', sans-serif; letter-spacing:2px;float:left;color: #020202;font-weight: 500;width: 139px;">À partir de<br> 300 MAD TTC / J</a>
                                                        </div> 
                                                         <div class="col-md-4">
                                                           <a class="float-right" href="#" data-toggle="modal" id="seeDetails"  data-target="#aynModal{{ freework.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("reservationFreeworkstep1",{id:freework.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>
                                                        </div> 
                                                </div>
                                            </div>
                                          </div>
                                  
                                   
                                {% endfor %} 
                                </div>
                                

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

                  

                 
                  <!--  -->
                </div>
              </div>
            </div>
          </div>
        </div>
        
    {% for freework in products %}
    <div class="modal fade" id="aynModal{{freework.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%;">{{freework.name}}</h2>
											</div>
											<small>
											{{freework.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/' ~ freework.image) }}"  id="main">
                                            <div id="thumbnails">
                                                 {% for image in freework.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>{{ freework.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">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:freework.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')
      })
    
    
    
      
    //   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 %}