{% 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*/

/* 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;
}
.boutton-step{
  padding:10px; 
  text-decoration:none; 
  width:230px; 
   font-size: 12px;
    font-family: 'PT Sans', sans-serif;
    letter-spacing:2px;
}
  
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%;
            }
 }

   .titre-page{
margin-top:10px;
font-size: 20px;
line-height:45.29px;
color: #000000;
} 


</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 justify-content-between">
      <div class="col-sm-8 reservation-steeps">
       
       <div class="row">
          <div class="col-sm-6">
            <h6 class="titre-page">Réservation {{name}}
                

            </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" style="text-align:center">
                <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="nav-01" data-number="1">
									<button type="button" role="tab" style="color:black !important;"><a href="{{path("reservationfreework")}}" title="Étape précédente"  >1</a></button>
								</li>
								<li data-number="2" class="active">
									<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 >
                        <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="container" >

                  
              
            
                 <div id="form-attribue" style="line-height: 30px;" class="mt-4"> </div>
               <h5>Veuillez choisir une formule :</h5>

                    
                  {% for attr in  attributValues %}

                  {% if attr.code == "simple" %}

                  
                <div class="form-check"  >
                <input class="form-check-input option"  data-days="10" data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"  data-price="{{attr.price}}" type="radio" name="radioGroup" class="option" id="radio1" value="{{attr.attribut.name}}" />
                <label class="form-check-label"  data-days="10" data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"  data-price="{{attr.price}}" for="radio1">{{attr.attribut.name}}</label><br>
                <small>
                  
                  {{attr.attribut.description}}
                  </small>
                </div>

                
                  {% endif %}
                  {% endfor %}

                  

                       {% if attributValues|length > 0 %}
                
                 <div class="form-check">
                        <input class="form-check-input" type="radio" name="radioGroup" id="radio2" />
                        <label class="form-check-label" for="radio2">Location “pass jours”</label><br>
                        <small>cette formule est déclinée comme suit :</small>
                        <select style="padding: 4px;" class="col-6  option " id="serviceFormule" >
                             <option value="" data-price=""  >Sélectionner un choix</option>
                    
                         {% for attr in attributValues %}
                         {% if attr.code == "multiple" %}
                        <option  value="{{attr.attribut.name}}"  data-days="{{attr.attribut.description}}"   data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"  data-price="{{attr.price}}"  >{{attr.attribut.name}}</option>
                        {% endif %}
                        {% endfor %}
                        </select>
                 </div>
               {% endif %}

             {% for attr in  attributValues %}
                   {% if attr.code == "personalized" %}     
                    
                     <div class="form-check">
                      <input class="form-check-input " data-days="30"  data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"  data-price="0" type="radio" name="radioGroup"  id="radio{{ attr.attribut.id}}"  />
                      <label class="form-check-label " data-days="30" data-id="{{attr.product.id}}" data-name="{{attr.product.name}}"  data-price="0"  for="radio{{ attr.attribut.id}}"  >  {{ attr.attribut.name}}   </label><br>
                      
                       <small> {{ attr.attribut.description}}</small>
                    </div>
                     
                     {% endif %}
                   {% endfor %}

                 
                    <h5 style="font-weight:bold; margin-top: 30px;">Services supplémentaires:</h5>
                    <h6 style="font-weight:bold; margin-top: 30px;">Voulez-vous ajouter des services supplémentaires?</h6>
                    <small style="color:grey">Disponible en location au mois ou à la journée</small>
                    <div class="row">
                         <div class="col-sm-12 Addons">
                            {% for service in  services %}

                                    <input id="{{ service.name}}" data-id="{{service.id}}" data-name="{{service.name}}"  data-price="{{service.price}}" type="checkbox" class="CK" name="services" value="{{ service.id}}"><label for="service"> {{ service.name}}  </label> 
                            {% endfor %}<br>

                              {% for servicesCommun in  servicesCommuns %}
                                    <input id="{{ servicesCommun.name}} " data-id="{{servicesCommun.id}}" data-name="{{servicesCommun.name}}"  data-price="{{servicesCommun.price}}" type="checkbox" class="CK" name="serviceCommun" value="{{ servicesCommun.id}}"><label for="service"> {{ servicesCommun.name}}   </label>
                                      
                              {% endfor %}     
 
                             </div>
                     <!-- <div class="col-sm-12">
                        <small style="color:grey; margin-top: 5px;">Autre</small>
                        <input type="text" class="form-control" id="information" placeholder="Saisissez votre texte ici" style="height: 30px;border-radius: 4px;">
                      </div>-->
                    
                    </div>

              
                 </div>
                            
                            
                     <div class="button-row">
                         
            <a href="{{path("reservationfreework")}}"   class="btn-res text-center text-light text-uppercase bg-dark ReserveNext__ boutton-step" >Etape précédent</a>
            &nbsp;&nbsp;
             <a href="{{path("reservationstep2",{id:product, 'paramFormule': 'days'})}}"  id="reservationLink" class="btn-res text-center text-light text-uppercase bg-dark ReserveNext__ boutton-step">Etape suivante</a>
            
                      </div>      
                     

           

                    
                   
                  </div>
                   

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

      </div>
          <div class="col-sm-4 reservation-steeps-panier" style="overflow-y: auto; max-height: 750px;">
      
        {{render(path("ajax_cart"))}}
    </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>

    //recuperer la valeur des jours dans le formulaire .
    document.getElementById('reservationLink').addEventListener('click', function() {
         
        var days=0;
        var selectedOption = document.getElementById('serviceFormule');
         var selected = selectedOption.value;
          if(selected != ""){
           days = selectedOption.options[selectedOption.selectedIndex].getAttribute('data-days');

          }else{
         var radioButtons = document.getElementsByName('radioGroup');
          for (var i = 0; i < radioButtons.length; i++) {
            if (radioButtons[i].checked) {
             days = parseInt(radioButtons[i].getAttribute('data-days'));
            break;
            }
        }  }
            
 if (days === 0) {
        event.preventDefault(); // Empêche le lien de se déclencher
        alert("Vous n'avez rien sélectionné. Veuillez sélectionner une option.");
    }  
        var link = document.getElementById('reservationLink');
        link.href = "{{ path('reservationstep2', {id: product, 'paramFormule': 'days'}) }}".replace('days', days);
    
           });

  
    $(document).ready(function(){


 $('input[type=radio][name=radioGroup]').click(function() {
    //$('input[type=checkbox]').prop('checked', false);
});
 
  $('#serviceFormule').change(function(){ 
       var radio = document.getElementById('radio2');
            radio.checked = true;
             // $('input[type=checkbox]').prop('checked', false); 
    
      });
      




      var radioButtons = document.getElementsByName('radioGroup');
 var selectElement = document.getElementById('serviceFormule');

radioButtons.forEach(function(radio) {
    radio.addEventListener('click', function() {

     
        if (radio.id === 'radio2') {
            selectElement.disabled = false;
         var idProduct = $('option:nth-child(2)').attr("data-id");
          var price = $('option:nth-child(2)').attr("data-price");
           var name = $('option:nth-child(2)').attr("data-name");
          var actionType = "add";
    

    $.ajax({
      url:"{{path('ajax_cart')}}",
      data:{
        idProduct:idProduct,
        price:price,
        name:name,
        actionType:actionType
      },
      success:function(result){
        console.log(result);
          $(".reservation-steeps-panier").html(result);
      }
    });
            
              selectElement.val($('option:nth-child(2)').prop('selected', true));
        } else {
            selectElement.selectedIndex = 0; // Sélection du premier élément
            selectElement.disabled = true;
        }
    });
});


     $('body').on("click",".option",function() {
     var selectedServiceIds = [];
           var formule ="";
            formule = $("#radio1").val();
             $('.CK:checked').each(function() {
        // Ajouter l'ID du service sélectionné à la liste
        selectedServiceIds.push($(this).data('id'));
  
           var currentCheckbox = $(this);

          $.ajax({
                url: '/reservation/ajax-service-price',
                type: 'GET', // ou 'GET' en fonction de votre besoin
                data: { 
                  serviceId : $(this).data('id'),
                  formule : formule
                 },
                success: function(response) {
                    currentCheckbox.attr('data-price', response);

                    var idProduct = currentCheckbox.attr("data-id");
                    var price = currentCheckbox.attr("data-price");
                    var name = currentCheckbox.attr("data-name");
                    var actionType = "add";
             $.ajax({
                url:"{{path('ajax_cart')}}",
                data:{
                  idProduct:idProduct,
                  price:price,
                  name:name,
                  actionType:actionType
                },
                success:function(result){
                  console.log(result);
                    $(".reservation-steeps-panier").html(result);
                }
              });                     
        },
                error: function(xhr, status, error) {
                    // Gérez les erreurs ici
                    console.error(error);
                }
            });   });

     
          
    var idProduct = $(this).attr("data-id");
    var price = $(this).attr("data-price");
    var name = $(this).attr("data-name");
    var actionType = "add";
    

    $.ajax({
      url:"{{path('ajax_cart')}}",
      data:{
        idProduct:idProduct,
        price:price,
        name:name,
        actionType:actionType
      },
      success:function(result){
        console.log(result);
          $(".reservation-steeps-panier").html(result);
      }
    });
    });


    $('body').on("change","select.option",function() {

        var selectedServiceIds = [];
        if($("#serviceFormule").val() != "" || $("#radio3").val() != ""){
         if($("#serviceFormule").val() != "" ){
                 formule =$("#serviceFormule").val();
                }else{
                 formule = $("#radio1").val();
                }
          }

    // Parcourir toutes les cases cochées avec la classe CK
    $('.CK:checked').each(function() {
        // Ajouter l'ID du service sélectionné à la liste
        selectedServiceIds.push($(this).data('id'));
  
           var currentCheckbox = $(this);

          $.ajax({
                url: '/reservation/ajax-service-price',
                type: 'GET', // ou 'GET' en fonction de votre besoin
                data: { 
                  serviceId : $(this).data('id'),
                  formule : formule
                 },
                success: function(response) {
                    currentCheckbox.attr('data-price', response);

                    var idProduct = currentCheckbox.attr("data-id");
                    var price = currentCheckbox.attr("data-price");
                    var name = currentCheckbox.attr("data-name");
                    var actionType = "add";
             $.ajax({
                url:"{{path('ajax_cart')}}",
                data:{
                  idProduct:idProduct,
                  price:price,
                  name:name,
                  actionType:actionType
                },
                success:function(result){
                  console.log(result);
                    $(".reservation-steeps-panier").html(result);
                }
              });

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

         
  

          
    
        
    });

    
                
          
    var idProduct = $(this).find("option:selected").attr("data-id");
    var price = $(this).find("option:selected").attr("data-price");
    var name = $(this).find("option:selected").attr("data-name");
    var actionType = "add";

   

    $.ajax({
      url:"{{path('ajax_cart')}}",
      data:{
        idProduct:idProduct,
        price:price,
        name:name,
        actionType:actionType
      },
      success:function(result){
        console.log(result);
          $(".reservation-steeps-panier").html(result);
      }
    });
    });



      $('body').on("click",".delete-cart-item",function() {

                
          var idProduct = $(this).attr("data-id");
          var price = $(this).attr("data-price");
          var name = $(this).attr("data-name");
          var actionType = "remove";

          $.ajax({
            url:"{{path('ajax_cart')}}",
            data:{
              idProduct:idProduct,
              price:price,
              name:name,
              actionType:actionType
            },
            success:function(result){
              console.log(result);
                $(".reservation-steeps-panier").html(result);
            }
          });
          });
        // Ajouter la délégation d'événements pour le clic sur le label 'service'

   $('label[for="service"]').click(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);
  var idProduct = checkBox.attr("data-id");
    var price = checkBox.attr("data-price");
    var name = checkBox.attr("data-name");
    var actionType = "remove";
      $.ajax({
      url:"{{path('ajax_cart')}}",
      data:{
        idProduct:idProduct,
        price:price,
        name:name,
        actionType:actionType
      },
      success:function(result){
        console.log(result);
          $(".reservation-steeps-panier").html(result);
      }
    });

    } else {
        checkBox.prop('checked', true);
        console.log("Case à cocher cochée : " + value);
        var formule = "";
 
       
              if($("#serviceFormule").val() != "" || $("#radio3").val() != ""){
                if($("#serviceFormule").val() != "" ){
                 formule =$("#serviceFormule").val();
                }
                if ($('#radio1').is(':checked')) {
                  formule = $("#radio1").val();
                 }
                 
              var serviceId = $(this).prev().data('id');
              var dataElement = $(this).prev();
      
             $.ajax({
                url: '/reservation/ajax-service-price',
                type: 'GET', // ou 'GET' en fonction de votre besoin
                data: { 
                  serviceId : value,
                  formule : formule
                 },
                success: function(response) {
                    
                     dataElement.attr("data-price", response);
                     var idProduct = dataElement.attr("data-id");
                    var price = dataElement.attr("data-price");
                    var name = dataElement.attr("data-name");
                    var actionType = "add";
             $.ajax({
                url:"{{path('ajax_cart')}}",
                data:{
                  idProduct:idProduct,
                  price:price,
                  name:name,
                  actionType:actionType
                },
                success:function(result){
                  console.log(result);
                    $(".reservation-steeps-panier").html(result);
                }
              });
                 
   

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


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