{% 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;
}
 
 
/* css checkbox*/

  .fs-5{
  font-size: 17px !important;
}
/* css checkbox*/
.title {
font-family: 'Montserrat', sans-serif;
font-weight:bold;
font-size: 12px;
padding-bottom: 0px;
margin-top: 0px;color:black;
}
+
/* hide checkbox */
input[type="checkbox"] {
  display: none;
}

/* if checkbox is checked, then do these things */
input[type="checkbox"]:checked + label {
  color: white;
  background:#FFD86E;
  border-radius: 5px;
  padding: 0px 10px 0px 10px;
}

/* styles when hovering over options */
label:hover {

  cursor: pointer;
  
  /* transitions and animations */
  -webkit-transition: color .5s ease;
  -moz-transition: color .5s ease;
  -ms-transition: color .5s ease;
  -o-transition: color .5s ease;
  transition: color .5s ease;
}
  
input.button {
  
	width:130px;
	height:50px;
	margin: 20px 0 30px 0;
	padding: 0px 20px 0px 20px;
	background: #e6e6e6;
	border-radius:5px;
	border: 1px solid #ccc;

	font-family: OpenSans, sans-serif;
	font-size:16pt;
	color:#444;
}

.Addons label{
    font-size:12px !important;
    font-family: 'roboto';
    font-weight: 500;
    border: 1px solid #80808024;
    margin: 2px;
    padding: 0px 5px 0px 5px;
    border-radius: 5px;
}
.multistep-container .active-button li:not(:first-child) .round-btn:before {
    position: absolute;
    content: '';
    width: 141px;
    height: 3px;
    background-color: #E9F2FA;
    left: -120px;
}


.multistep-container .active-button li {
    display: inline-block;
    width: 140px;
}

.form-check {
    line-height: 16px;
}   

.col-md-12.col-lg-12.col-sm-12.d-flex.justify-content-end.align-items-end.mb-3{
        flex: 0 0 86%;
}

 @media (max-width:767px) {
                html, body {
                  overflow-x: hidden  !important;
                }
                body {
                  position: relative !important;
                }
                .col-sm-8.reservation-steeps {
                    padding:0%;
                }
                .multistep-container .mutistep-form-area .form-box{
                    position: relative;
                    top: 33px;
                    left: 0px;
                }
                .multistep-container .active-button li{
                    display: inline-block;
                    width: 100px;
                }
                .panel-sticky{
                    font-size:12px;
                }
              h6.display-6.header-steeps {
                margin-left: 3%;
            }
            h6.datetime{
                 margin-left: 3%;
            }
            a#seeDetails {
                margin-bottom: -11%;
            }
            a#seePrice {
                float: right;
                margin-right: 52%;
            }
 }
    
    
    
    @media (max-width:767px) { 
        .multistep-container .mutistep-form-area {
              
              position: relative;
          overflow: hidden;
          min-height: 100%;
          max-height: 100%;
          overflow: none;
        }
        .col-sm-8.reservation-steeps {
            box-shadow: none;
        }
        .multistep-container{
               height: auto !important; 
        }
        
        
        
    }
    
    
    
    
    
    .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;
        }

        .divCardsSalleReunionMobile{
            margin-top: 0px !important;
        }
           
         .forMobile{
                margin-top: 5% !important;
        }
        #btnTarifs{
                padding: 5px !important;
        }
        .title{
            font-size: 15px !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_BUREAUX.png')}}" style="width: 100%;height: 520px;" class="img-fluid imageForDesktop" />
    <img src="{{asset('uploads/front-images/Bg-bureau-Mobile.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 bureau"|trans({},"front") }}</h6>
          </div>
          <div class="col-sm-6">
            <a href="/themes/coworking/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>
          </div>
          
          </div>
        </div>
        
        <div class="container">
          <div class="row">

             <div class="container d-flex justify-content-center align-items-center">
  
        </div>

            <div class="col-xl-12 divCardsForMobile" style="top: 17px;" >
              <div class="multistep-container">
                <div class="mutistep-form-area">
                 
                            <div class="container" style="margin-top:40px;">

                                <div class="panel">
                                    {% set displayed_categories = [] %}  
                                   {% for bureau in products   %} 
                                    {% for cat in bureau.categoriesProduct   %}
                                     {% if cat.name not in displayed_categories %}
                                     
                                          <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/' ~ cat.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  cat.oldId  == 1 %}
                                                        
                                                              <i class="fa fa-user" style="color:black;"></i><br>
                                                  
                                                            {% elseif  cat.oldId  == 2 %}
                                                           
                                                                        <i class="fa fa-user" style="color:black;"></i> <i class="fa fa-user" style="color:black;"></i><br>
                                                                
                                                                 {% elseif  cat.oldId   == 4 %}
                                                           
                                                                            <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>
                                                                   {% elseif  cat.oldId   == 0 %}
                                                           
                                                                                <i class="fa fa-user" style="color:black;"></i><br>
                                                             {% endif %}
                                                 
                                                    </div>
                                               
                                               
                                              <p class="fs-5" style="font-weight:bold;padding-bottom: 0px;margin-top: 0px;color:black;" >{{ cat.name|trans({},"front") }} </p>
                                               
                                                
                                                {% if cat.oldId  == 1 %}
                                                    {% set priceBureau = "300" %}
                                                {% elseif cat.oldId  == 2 %}
                                                    {% set priceBureau = "990" %}
                                                {% elseif cat.oldId  == 4 %}
                                                    {% set priceBureau = "1900" %}
                                                {% else  %}
                                                  {% set priceBureau = "220" %}
                                                {% endif %}
                                                   <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 / 
                                                   
                                                {% if priceBureau == 300 %}
                                                    Journée
                                                {% elseif priceBureau == 990  %}
                                                    3 Jours
                                                {% elseif priceBureau == 1900  %}
                                                    Semaine
                                                {% elseif priceBureau == 220  %}
                                                    Journée
                                                {% endif %}  
                                                   
                                                 </a>
                                                       <br><br><br><br>
                                                      
                                                        <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>
                                                        <a href="{{path("confirmation_reservation_bureaux")}}" 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>
                                            </div>
                
                                          </div>
                                  
                                          {% endif %}
                                    {% set displayed_categories = displayed_categories|merge([cat.name]) %}
                                    
                                {% endfor %} 
                                {% endfor %} 
                                </div>
                            
                            </div>
                            
                    </form>
                  </div>
                  <!--  -->
                </div>
              </div>
            </div>
          </div>
        </div>
        
                                           
                                            
        
                         {% set displayed_categories = [] %}  
                                   {% for bureau in products|sort((a, b) => b <=> a)   %} 
                                    {% for cat in bureau.categoriesProduct   %}
                                     {% if cat.name not in displayed_categories %}
                           
                                             <div class="modal fade" id="aynModal{{cat.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 class="mt-3" style="font-size:25px; font-weight:bold;">{{ cat.name }}</h2>
                                          <p class="text-muted mt-3"><small>{{ cat.description }}</small></p>
											
                                  
											 
										</div>
										
										<!-- Modal body -->
									
										<div class="modal-body">

                                             
                                                <img src="{{ asset('uploads/coworking/' ~ cat.image) }}"  id="main">
                                            <div id="thumbnails">
                                                {# {% for image in bureau.images  %} 
                                              <img src="/uploads/coworking/detail/{{image.path}}" alt="Bridge">
                   
                                            {% endfor %}#}
                                            </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></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="/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;">
    															Plus d'information
    														</a>
															<a href="{{path("confirmation_reservation_bureaux")}}" 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%;">
															    Réserver
														    </a>
														
													</div>
													
													
												</div>
											</div>
										</div>


									</div>
								</div>
							</div>
						</div>
						{%  endif  %}
                        {%  endfor  %}
                         {%  endfor  %}
      </div>
    </div>
  
  
  
  
  
  
  
  
    <div class="container">
        <div class="row">
            <div class="col-xl-12 text-center" >
                <p>*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')
      })
    
    
    $('#demo').daterangepicker({
    "showISOWeekNumbers": true,
    "timePicker": true,
    "autoUpdateInput": true,
    "locale": {
        "cancelLabel": 'Clear',
        "format": "MMMM DD, YYYY @ h:mm A",
        "separator": " - ",
        "applyLabel": "Apply",
        "cancelLabel": "Cancel",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "daysOfWeek": [
            "Su",
            "Mo",
            "Tu",
            "We",
            "Th",
            "Fr",
            "Sa"
        ],
        "monthNames": [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
        "firstDay": 1
    },
    "linkedCalendars": true,
    "showCustomRangeLabel": false,
    "startDate": 1,
    "endDate": "December 31, 2016 @ h:mm A",
    "opens": "center"
});
    
    
    /**/
    
    $('#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-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 %}