{% 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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
  .modal-backdrop.fade.show {
        display: none;
}
 
 
/* css checkbox*/


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


.imageForMobile{
        display:none;
    } 
    .imageForDesktop{
        display:block;
    }
    
    
 @media (max-width:767px) {
                html, body {
                  overflow-x: hidden  !important;
                }
                body {
                  position: relative !important;
                }
                .col-sm-8.reservation-steeps {
                    padding:0%;
                    top: 0px;
                }
                .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%;
            }
            
             .imageForDesktop{
            display:none;
        } 
        .imageForMobile{
            display:block;
        }
        
        .container.text-center{
            margin-top: 0% !important;
        }
        .multistep-container .mutistep-form-area{
             margin-top: 0% !important;
        }
        .forMobile{
                margin-top: 5% !important;
        }
        .btn-res{
                padding: 5px  !important;
        }
        .title{
            font-size: 15px !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" />
    
    
      
  
  <br>
  <div class="container">
    <div class="row">
      <div class="col-sm-8 reservation-steeps">
       
       <div class="row">
           <div class="forMobile" style="display: inline-flex;">
               
         
          <div class="col-sm-6">
            <h6  class="title" style="margin-top:10px">    {{"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"|trans({},"front")}}</a>
          </div>
          
            </div>
        </div>
        
      
        
        
        
        
        
      
       
       
        <div class="container">
         
              
          
          <div class="row">
            
            
            <div class="col-xl-12">
              
              <div class="multistep-container">
                <div class="mutistep-form-area">
                    
                 
                  <div class="form-box">
                
                    <!--  
                    <ul class="active-button">
                      <li >
                        <span class="round-btn">1</span>
                      </li>
                      <li class="active" >
                        <span class="round-btn">2</span>
                      </li>
                      <li>
                        <span class="round-btn">3</span>
                      </li>
                     
                    </ul>
                      -->
 
                 	<div class="col-sm-12">
        						<form id="formForMobile" class="m-auto mt-4 p-3" style="width:100%;" action="{{path('sendEmailFromPageInformation')}}" method="POST">
        							<div class="row gy-3 gx-5">
        							     <div class="col-md-12">
        							        {% for label, messages in app.flashes %}
                                                {% for message in messages %}
                                                    <div class="alert alert-{{ label }} alert-dismissible fade show text-center" role="alert" style="font-size: 13px;">
                                                        {{ message }}
                                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                {% endfor %}
                                            {% endfor %}
                                        </div>
        								<div class="col-md-6">
        								    <input class="w-100" type="hidden"  name="newLead" value="newLead">
        								    
        									<input class="w-100" type="text"  name="nom"    {% set searchString = '/en' %} {% if searchString in app.request.uri %} placeholder="Full name" {% else %} placeholder="Nom" {% endif %} style="height:42px; border: none; outline: none; padding-inline: 9px;    background: #ffffff;
            border: 2px solid #dcdcdc !important;" required>
        								</div>
        								<div class="col-md-6">
        									<input class="w-100" type="text" name="prenom" {% set searchString = '/en' %} {% if searchString in app.request.uri %} placeholder="Prénom" {% else %} placeholder="Prénom" {% endif %} style="height:42px; border: none; outline: none; padding-inline: 9px;    background: #ffffff;
            border: 2px solid #dcdcdc !important;">
        								</div>
        								
        									<div class="col-md-6">
        									<input class="w-100" type="tel" name="tel" placeholder="+212" style="height:42px; border: none; outline: none; padding-inline: 9px;    background: #ffffff;
            border: 2px solid #dcdcdc !important;" required>
        								</div>
        									<div class="col-md-6">
        									<input class="w-100" type="ville" name="ville"   placeholder="Ville" style="height:42px; border: none; outline: none; padding-inline: 9px;    background: #ffffff;
            border: 2px solid #dcdcdc !important;" required>
        								</div>
        								<div class="col-md-12">
        									<input class="w-100" type="email" name="email" placeholder="email@example.com" style="height:42px; border: none; outline: none; padding-inline: 9px;    background: #ffffff;
            border: 2px solid #dcdcdc !important;" required>
        								</div>
        							</div>
        							<div class="mt-4">
        								<textarea placeholder="Message" name="message" class="form-control w-100 border-0 rounded-0" id="textAreaExample" rows="6" required style="border: 2px solid #dcdcdc !important;"></textarea>
        							</div>
        							<div class="row py-3">
        								<div class="col-12">
        									<input class="float" type="submit"   {% set searchString = '/en' %} {% if searchString in app.request.uri %} value="Send"  {% else %} value="envoyer" {% endif %}style="border: none; background-color: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 1); text-transform:uppercase; letter-spacing:3px; font-size:12px; font-family:'PT Sans', sans-serif; height: 45px; width: 180px;">
        								</div>
        							</div>
        						
        						</form>
        					</div>
                       
                            <div class="container text-center" style="" >
                               
                                <img src="/themes/coworking/front/images/confirmationBureaux.png" style="width: 35%;margin-top: 23px;" class="img-fluid">

                                <p style="margin: 0px 0 0 0;color:#9D9D9D;">
                                  
                                    
                                    {{"Notre site est en cours de construction,"|trans({},"front")}}
                                    <br>
                                    {{"prière de nous contacter par téléphone"|trans({},"front")}}
                                    <b>+212 662641479</b> <br>
                                    {{"ou par e-mail"|trans({},"front")}}
                                    <b>coworkandlive@gmail.com</b> 
                                    {{"afin de procéder à votre réservation. Nos équipes se feront un plaisir de répondre à vos questions"|trans({},"front")}}
                                    <br> 
                                    {{"et confirmer votre réservation."|trans({},"front")}}
                                </p>
                    
                 
                          
              
              
               
                 <div id="form-attribue" style="line-height: 30px;" class="mt-4"> </div>
              
              
                 </div>
                            
                            
                           
                             

           

                    
                   
                  </div>
                   

                
                </div>
              </div>
            </div>
          </div>
        </div>
         

      </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(){

 
 

        $("#select").change(function(){
            var selectedValue = $(this).val();
 
             
            $.ajax({
                url: '/reservation/ajax-formule-reservation',
                type: 'GET', // ou 'GET' en fonction de votre besoin
                data: { office : selectedValue },
                success: function(response) {
                    
                   // Vider le contenu de la div #form-attribue
               $('#form-attribue').empty();
                    

            setTimeout(function() {
              // Cacher la div loader après le délai spécifié (par exemple, 2 secondes)
                 

              // Afficher le résultat dans la div
                   $('#form-attribue').html(response);
             }, 1000); // Délai de 2 secondes (2000 millisecondes)
        
                

                },
                error: function(xhr, status, error) {
                    // Gérez les erreurs ici
                    console.error(error);
                }
            });

        });

        // Ajouter la délégation d'événements pour le clic sur le label 'service'
$('#form-attribue').on('click', 'label[for="service"]', function() {
    var checkBox = $(this).prev();
    var value = checkBox.val();
    if (checkBox.is(":checked")) {
        checkBox.prop('checked', false);
        console.log("Case à cocher décochée : " + value);
    } else {
        checkBox.prop('checked', true);
        console.log("Case à cocher cochée : " + value);
    }
});
 


 var radioButtons = document.getElementsByName('radioGroup');

for (var i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
        var selectedValue = radioButtons[i].value;
        break;
    }
}

console.log(selectedValue); // Vous pouvez utiliser la valeur comme vous le souhaitez ici

    });

   

 
 
</script>

 
{% endblock %}