{% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}


{% block stylesheets %}
{{ parent() }}
 <link rel="stylesheet" href="{{ asset('themes/coworking/css/reservation.css') }}" />
 
 
<style>

td.off.disabled {
    color: #000 !important;
    font-weight: 600;
    background-color: #FFCB00 !important;
    border-radius: 30px !important;
}

.calendar-time {
    display: none;
}

  .daterangepicker {
     
    border: 1px solid #fff !important;  
    font-family: 'Montserrat' !important; 
    line-height: 20px !important;
 }
 .daterangepicker th.month {
    width: auto;
    font-weight: 700 !important;
    
}
  
  .daterangepicker .drp-calendar th {
    font-weight: 600 !important;
     color: black !important; 
     font-size: 14px;
}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    min-width: 32px;
    width: 36px !important;
    height: 24px;
    line-height: 27px !important;
    font-size: 13px !important;
    }

  .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    border-radius: 0.475rem !important;
    background-color: white !important;
    border-color: transparent !important;
    color: black;
    font-weight: 500;
    outline: 0 !important;
}

thead {
    background-color: #ffffff;
}
 thead > tr td:last-child {
  border-top-right-radius: 0.475rem;
}
.daterangepicker .drp-calendar.left, .daterangepicker .drp-calendar.right {
    padding: 1rem 1rem;
}
 

 
/* Changer la couleur de fond et le style des boutons Apply et Cancel */
.daterangepicker .drp-buttons button {
    background-color: #009ef7;
    color: #fff;
    border-radius: 3px;
    padding: 10px 25px !important;
}


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

 
/* css checkbox*/

 
 
</style>

  
{% endblock  %}
{% block body %}
 

 
 

 
  <img src="{{asset('themes/coworking/front/images/office.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 {{nameOffice}} 
          

            </h6>
          </div>
          <div class="col-sm-6" style="margin-top:10px;">
            <a href="/themes/coworking/front/images/BUREAUX.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-10" 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" class="previous">1</button>
								</li>
								<li data-number="2" class="">
									<button type="button" role="tab">2</button>
								</li>
								<li data-number="3" class="active">
									<button type="button" role="tab">3</button>
								</li>
								<li data-number="4" class="">
									<button type="button" role="tab">4</button>
								</li>
							</ul>
						</div>
            </div>
            
            <div class="col-xl-12">
              
              <div class="multistep-container">
                <div class="mutistep-form-area">
                    
                 
                  <div class="form-box">
                
                    
 
                    <div class="container" >

                       <h5>Veuillez choisir une date de reservation :</h5>   
                    <input type="text" name="datetimes"  id="dateReservation" disabled="disabled"/> 





                    


  
 

 
                   
                    
              <!-- hire -->
              
               
             
                
              
                 </div>
                 
                            
                            
                           
                     

           

                    
                   
                  </div>
                   

                
                </div>
                
            <div style="position: absolute; top: 467px;    right: 300px;">
              <a href="{{path('reservationPaiement')}}" 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;">
                Etape suivante</a>
              </div>
              
              </div>
            </div>
          </div>
        </div>
         

      </div> 

        <div class="col-sm-4 reservation-steeps-panier">
           {{render(path("ajax_cart"))}}
       
        </div>
  </div>
  
  
{% endblock %}






{% block javascripts %}
  <!-- MAIN CONTENT -->

 
 
  

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<script>

  
$(document).ready(function(){
 

$('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);
      }
    });
    });

 $(function() {
   var dateInput = $('input[name="datetimes"]');
       var datesToDisable = [

  {% for date in allDates %}
    
     moment('{{ date }}'),
        
       {% endfor %}
                
    ];
    
  var picker = dateInput.daterangepicker({
    timePicker: true,
    timePicker24Hour: true, // Afficher l'heure au format 24 heures
    startDate:  moment().startOf('day'),
    endDate: moment().startOf('day').add(24, 'hour'),
    minDate: moment().startOf('day'),
    locale: {
      format: 'DD/MM/YYYY', // HH:mm
            
            "daysOfWeek": [
                "Dim",
                "Lun",
                "Mar",
                "Mer",
                "Jeu",
                "Ven",
                "Sam"
            ],
            "monthNames": [
                "Janvier",
                "Février",
                "Mars",
                "Avril",
                "Mai",
                "Juin",
                "Juillet",
                "Août",
                "Septembre",
                "Octobre",
                "Novembre",
                "Décembre"
            ],
            "applyLabel": "Valider",
            "cancelLabel": "Annuler"
        
    },
    
    isInvalidDate: function (date) {
             
              // Vérifier si la date est présente dans le tableau de dates à désactiver
            for (var i = 0; i < datesToDisable.length; i++) {
                if (date.isSame(datesToDisable[i], 'day')) {
                    return true;
                }
            }
           
            return false;
        },
        maxSpan: {
            days: {{ days-1 }} // Limiter la plage de sélection à 3 jours
        },
        outsideClick: function (close) {
            if (!$(event.target).closest('.daterangepicker').length) {
                close();
            }
        }
         
         
 
   
  });
   // Empêcher la fermeture du calendrier après avoir cliqué sur "Valider"
    picker.on('apply.daterangepicker', function(ev, picker) {
        picker.show();
        
    });

    
    // Empêcher la fermeture du calendrier lors du clic à l'extérieur
    $(document).on('click', function (e) {
        var isDatePickerInput = $(e.target).is('input[name="datetimes"]');
        var isDatePickerOpen = $('.daterangepicker').is(':visible');

        if (!isDatePickerInput && !isDatePickerOpen) {
            dateInput.click();
        }
    });
     
      dateInput.click();
});


 
 
 


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