{% 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: 17px !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;
}
.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: 0px !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;
            }
            
             .forMobile .col-sm-6{
                padding-right: 0px !important;
                padding-left: 0px !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;
      }
        
      }
      
       #btnTarifs:hover{
            background: #dfb150 !important;
            color: white !important;
        }
</style>
  
{% endblock  %}
{% block body %}
 

 
 

 
  <img src="{{asset('themes/coworking/front/images/background_FREEWORK.png')}}" style="width: 100%;height: 520px;" class="img-fluid imageForDesktop" />
    <img src="{{asset('uploads/front-images/BgFreeworkMobile.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 </h6>
                      </div>
                      <div class="col-sm-6">
                        <a href="/themes/coworking/front/images/FREEWORK.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 Freework </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 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-6 col-lg-6 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-6 col-lg-6 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 title" >{{ freework.name }}</p>
                                                  <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> 50* MAD TTC / J</a>
                                               
                                                <br><br><br><br>
                                                      
                                                        <a  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;text-decoration: underline;margin-right: 10px;margin-right: 10px;font-weight: 800;"><u>Voir Details</u></a>
                                                        <a href="{{path("confirmation_reservation_freework")}}" 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 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" id="forDesktop">#}
                                                {#        <div class="col-md-4">#}
                                                        
                                                {#        </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("confirmation_reservation_freework")}}" 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" 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%;">{{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 %}
                                             <img src="{{ asset('uploads/coworking/shop/products/' ~ freework.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-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">
												
													    
													    	<a href="/themes/coworking/front/images/FREEWORK.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;" >
															Plus d'information
														</a>
														<a class="btn-res text-center text-light text-uppercase bg-dark" href="{{path("reservationMeetingstep1",{id:freework.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
														</a>
												
												</div>
											</div>
										</div>


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




      </div>
    </div>
  </div>
  
   <div class="container">
        <div class="row">
            <div class="col-xl-12 text-center" >
                <p style="font-weight: 700;">*Le prix de revient journalier calculé sur la base d’un abonnement mensuel</p>
            </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')
      })
    
    

    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 %}