{%  extends "WebFrontBundle::layout.html.twig" %}





{% block styles %}

    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/offers_styles.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/offers_responsive.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/select2.min.css")}}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/about_styles.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/about_responsive.css") }}">
    <link rel="stylesheet" type="text/css" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">

{% endblock %}






{% block body %}

<style type="text/css">
::-webkit-input-placeholder { /* Chrome */
  color: red;
}
</style>

 <div class="home">
        <div id="overlay"></div>
        <div class="home_background parallax-window" style="background-image:url({{ asset("assets/uploads/offers/"~pack[0].getImage()~"")}})" data-parallax="scroll" data-image-src=""></div>
        <div class="home_content">
            <div class="home_title">Fast Track : Test Formulaire Heure bookings  </div>
        </div>

    </div>

    <div class="contact_form_section">
        <div class="container">
            <div class="row">
                <div class="col">

                    <!-- Contact Form -->
                    <div class="contact_form_container">
						<div class="input-group input-group-lg">

							<input placeholder="yyyy-mm-dd" data-toggle="datepicker" class="form-control hasDatepicker" required name="" id="datepicker" onchange="checkToDayHour()">

							<span class="input-group-addon span-icon" id="sizing-addon1">

								<label for="datepicker" style="display: inline-block;"> 
									<i class="fa fa-calendar icon-color" aria-hidden="true"></i>
								</label>
							</span>

						</div>

						<div class="input-group input-group-lg">
							<input class="form-control timepicker" type="time" required="" value="00:00" name="heure_fasttrack_arriv" id="example-time-input" min="18:00" max="00:00">
							<span class="input-group-addon" id="sizing-addon1"><i class="fa fa-clock-o icon-color" aria-hidden="true"></i></span>
						</div>

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

{% endblock %}





{% block scripts %}

    <script src="{{ asset("assets/plugins/parallax-js-master/parallax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/Isotope/isotope.pkgd.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/TweenMax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/TimelineMax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/scrollmagic/ScrollMagic.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/animation.gsap.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/ScrollToPlugin.min.js")}}"></script>
    <script src="{{ asset("assets/js/select2.min.js")}}"></script>
    <script src="{{ asset("assets/js/sweetalert.min.js")}}"></script>
    <script src="{{ asset("assets/js/datepicker.js")}}"></script>


<script type="text/javascript">
    $('[data-toggle="datepicker"]').datepicker({
      format: 'yyyy-mm-dd'
    });

    $("#datepicker").change( function(){
    	alert("Date chnaged");
		var inputDate = $("#datepicker").val();
    	console.log(inputDate);
    });

	//DateAddingHours
	Date.prototype.addHours= function(h){
		this.setHours(this.getHours()+h);
		return this;
	}


    function checkToDayHour() {

		var date = $( "#datepicker").val();
		var inputDate = new Date(date);

		var moroccanDate= new Date().toLocaleString("en-US", {timeZone: "Africa/Casablanca"});
		moroccanDate = new Date(moroccanDate);
		//console.log('Morocco time: '+moroccoTime.toLocaleString());

		//var currentDate = new Date();
		//console.log('Current time: '+currentDate);
		//console.log('input Date : '+inputDate);

		//if(inputDate )

		var Difference_In_Time = inputDate.getTime() - moroccanDate.getTime();
		var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);

		var minDate = new Date().addHours(5);
		
		console.log(Difference_In_Days);

		console.log(Difference_In_Time);
		
		console.log(minDate);

		if( Difference_In_Days>0 && Difference_In_Days<=1){
			alert("1 Day after today");
			var inputHour = $("#example-time-input").val();
			var hour	= inputHour.split(":")[0];
			var minutes = inputHour.split(":")[1];
			var bookDate= inputDate;
			bookDate.setHours(hour,minutes);

			console.log(moroccanDate);
			console.log(bookDate);
		}

		// block hour at 1PM
		if(Difference_In_Days <= 0) {
			//$("#example-time-input").setAttribute("max","01:00");
			console.log();
		}
	}

</script>


{% endblock %}