@extends('layouts.app')
@section('stylesheets')
     {!! Html::style('css/details.css') !!} 
     {!! Html::style('css/parsley.css') !!}
@endsection
@section('content')
<div id="app_vue">
	<section class="page-banner booking tour-result" style="background-image: url({{ URL::asset($tour->booking_image)  }})">
		<div class="container">
			<div class="page-title-wrapper">
				<div class="page-title-content">
					<div class="clearfix"></div>
					<h1 class="captions">Book your {{ $tour->name_en  }}</h1>
				</div>
			</div>
		</div>
	</section>
	<div class="bookingpage trip-info padding-details">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="label-route-widget bike-breadcrumb">
						<span class="departure">
							<a href="{{url('/')}}">
								<span class="city">Home</span>
							</a>
						</span>
						<i class="fa fa-long-arrow-right"></i>
						<span class="arrival">
							<a href="{{ url($tour->categorie->slug_en) }}">
								<span class="city">{{ ucwords(strtolower($tour->categorie->name_en)) }}</span>
							</a>
						</span>
						<i class="fa fa-long-arrow-right"></i>
						<span class="arrival">
							<a href="{{ url('/'.$tour->categorie->slug_en.'/'.$tour->SubCategorie->slug_en) }}">
								<span class="city">{{ ucwords(strtolower($tour->SubCategorie->name_en)) }}</span>
							</a>
						</span>
						<i class="fa fa-long-arrow-right"></i>
						<span class="arrival">
							<a href="{{ url('/'.$tour->categorie->slug_en.'/'.$tour->SubCategorie->slug_en.'/'.$tour->slug_en) }}">
								<span class="city">{{ ucwords(strtolower($tour->name_en)) }}</span>
							</a>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<section class="tour-info-suplement no-desktop marginBottom20">
		<div class="container">
			<div class="row">
				<div class="col-md-12 full-info">
					<div class="activity container">
						<div class="col-md-8 col-xs-12 activity_part">
							<p class="activity_text">
								<span class="activity_title">Activity : </span>
								{{ $tour->activity_en }}
							</p>
						</div>
						<div class="col-md-3 col-xs-12 activity_part">
							<p class="assistance_text">
								<span class="assistance_title">Assistance : </span>
								{{ $tour->assistance()->first()->name_en }}
							</p>
							<div class="assistance_img">
								<img src="{{ env('URL_APPLICATION').$tour->assistance()->first()->image}}" />
							</div>
						</div>
						<div class="col-md-3 col-xs-12 level_part">
							<p class="assistance_text">
								<span class="assistance_title">Level : </span>
								{{ $tour->level()->first()->name_en }}
							</p>
							<div class="level_img">
								<img src="{{ env('URL_APPLICATION').$tour->level()->first()->image}}" />
							</div>
						</div>
					</div>
					<div class="period container">
						<div class="col-md-9 period_part">
							<p class="period_text">
								<span class="period_title">Period : </span>
								@if($tour->month)
									@foreach (get_months() as $element)
										@if(in_array($element, $tour->month ))
											<span> {{ $element }} </span>
										@else
											<span class="month_gray"> {{ $element }} </span>
										@endif
										@if(!$loop->last)
											|
										@endif

									@endforeach
								@endif
							</p>
						</div>
						<a class="col-md-3 detail_book" href="#"> <span> Book this Tour </span> </a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<div class="vc_empty_space height-70 no-mobile"><span class="vc_empty_space_inner"></span></div>
	<section class="day_by_day bookings-bikes">
		<div class="container">
			<div class="row">
				<div class="col-md-9 col-xs-12 left-part">
					@include('layouts/partials/_messages')
					<div class="bookings-steps clearfix">
						<ul role="tablist">
							<li role="tab" class="first disabled" aria-disabled="false" aria-selected="true">
								<a  href="javascript:;">
									<span class="number">1</span> 
									<span class="title">Personal Information</span>
								</a>
							</li>
							<li role="tab" class="current" aria-disabled="true">
								<a  href="javascript:;" >
									<span class="current-info audible">current step: </span>
									<span class="number">2</span> 
									<span class="title">Bike Rental</span>
								</a>
							</li>
							<li role="tab" class="disabled last" aria-disabled="true">
								<a  href="javascript:;" >
									<span class="number">3</span> 
									<span class="title">Booking</span>
								</a>
							</li>
						</ul>
					</div>
					<h2 class="booking-title">Book your {{ ucwords(strtolower($tour->name_en))  }} : <span class="booking-date" >{{ $tourdate->dates_en }} </span></h2>
					<div class="tab-content">

						<div id="tripdates" class="tab-pane fade active in">
							
							{!! Form::open(['route' => 'bookings.next','data-parsley-validate'=>'','class'=>'booking-form']) !!}
								{{ Form::hidden('tour_date_id',$tourdate->id) }}
								{{ Form::hidden('tour',$tourdate->id) }}
								<input name="step" type="hidden" value="addbike">
								{{-- adding bikes --}}
								<p class="tripdate_subtitle col-md-12 marginTop20 marginBottom20 col-xs-12">Add rental bike to your tour:</p>
								<div class="form-group col-md-12 col-xs-12 list-bikes">
									@if(count($bikes->data) > 0)
										@foreach($bikes->data as $bike)
											<div class="col-md-12">
												<div class="col-md-5">
													<div class="wrapper-content" id="bike-4">
														<div class="bike_header">
															<p class="bike_bigtitle">{{ $bike->bike->title }}</p>
															<p class="bike_price">Price: {{ $bike->price }} €</p>
														</div>
														<div class="bike_image">
															<a href="javascript:;" class="bike_img">
																<img src="{{ $bike->image }}" />
															</a>
														</div>
														<div class="add-size col-md-6">
															<select class="form-control form-control-lg" name="size" id="size{{ $bike->bike->id }}" onchange="ChangecatList()">
																<option value=""> Sizes </option>
																@foreach($bike->sizes as $size)
																	<option value="{{ $size->id }}"> {{ $size->libelle }} </option>
																@endforeach
															</select>
														</div>
														<div class="add-bike col-md-3" style="padding: 0px;">
															<input type="number" name="qte[]" id="qte{{ $bike->bike->id }}" min="1" class="form-control qte" placeholder="Qte" style="margin:0px;" disabled>
														</div>
														<div class="col-md-3">
															<button type="button" id="{{ $bike->bike->reference }}">Add</button>
														</div>
														<div id="bikes_hidden"></div>
													</div>
												</div>
												<div class="col-md-7">
													{!! $bike->bike->desciption !!}
												</div>
											</div>
										@endforeach
									@else
										<p>There are no bike rentals for this tour.</p>
									@endif
								</div>
								<div class="form-group col-md-12 col-xs-12">
									<div class="col-md-6 col-xs-6">
										<a href="javascript:history.go(-1)" class="detail_book col-xs-7 submit back-tour detail_book_btn" title="">Back to Personal Info</a>
									</div>
									<div class="col-md-6 col-xs-6">
										{{ Form::submit('Next or Skip',array_merge(['class'=>'submit detail_book detail_book_btn col-xs-7'])) }}
									</div>
								</div>
							{!! Form::close() !!}
						</div>
						<!-- TOUR INFO -->
						
						<!-- BIKE HIRE -->
						
					</div>
				</div>
				<div class="col-md-3 col-xs-12">
					<div class="col-md-12 col-sm-6 chat-part">
						<h4 class="booking-side-title">{{ ucwords(strtolower($tour->name_en)) }}</h4>
						<span class="booking-side-sub-title">{{ ucwords(strtolower($tour->subtitle_en)) }}</span>
						<div class="booking-side-img"><img src="{{ env('URL_APPLICATION').$tour->image}}" /></div>
						<div class="booking-info" >
							<h4>Total Price</h4>
							<h5 class="booking-side-price">{{ ($tourdate->price * count($booking['passengers'])) + ($tourdate->price * 1) }} €</h5>
							<span class="booking-side-tour"> <span class="count-passengers">1 person</span> ,{{ ucwords(strtolower($tourdate->dates_en)) }}</span>
						</div>
						<div class="booking-passengers-info" >
							<h4 class=""> Passengers</h4>
							<ul class="holiday-card-info">
								<li>
									<span>Passenger 1</span>
									<span class="price ng-binding">{{ $tourdate->price }} €</span>
								</li>
								@foreach ($booking['passengers'] as $element)
									
									<li>
										<span>Passenger {{ $loop->index +2 }}</span>
										<span class="price ng-binding">{{ $tourdate->price }} €</span>
									</li>

								@endforeach
							  
							</ul>
						</div>
						<div class="booking-bikes-info hidden" id="bikes_info">
							<h4 class=""> Bikes</h4>
							<ul class="holiday-card-info" id="bikes_ul"></ul>
							<input type="hidden" id="countPassengers" value="0">
						</div>
					</div>
					<div class="col-md-12 col-sm-6 pdf-part">
						<p class="pdf-title">General Terms & Conditions</p>
						<a class="pdf-img" href="{{ url('conditions') }}" >
							<img src="{{ URL::asset('assets/images/icons/pdf-icon.png')}}" /> 
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<div class="vc_empty_space height-70 no-mobile"><span class="vc_empty_space_inner"></span></div>
	<section class="galleries">
		<div class="container">
			<div class="row">
				<div class="gallery-block margin-top70">
					<div class="container">
						<h3 class="title-style-2">Gallery</h3>
						<div class="grid">
							<div class="grid-sizer"></div>
							<div class="gutter-sizer"></div>
							 @if($tour->tourGalleries()->get())
								@foreach ($tour->tourGalleries()->get() as $element)                                  
									<div class="grid-item grid-item--medium">
										<div class="gallery-image">
											<a href="{{ URL::asset($element->name) }}" data-fancybox-group="gallery" class="title-hover dh-overlay fancybox">
												<i class="icons fa fa-eye"></i>
											</a>
											<div class="bg"></div>
										</div>
									</div>
								@endforeach
							@endif
						</div>
					</div>
				</div>

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

@endsection

@section('scripts')
    {!! Html::script('assets/js/pages/details-page.js') !!}
    {!! Html::script('assets/js/pages/tour-view.js') !!}
    {!! Html::script('js/parsley.min.js') !!}
    {!! Html::script('assets/libs/isotope/isotope.min.js') !!}
    {!! Html::script('assets/libs/fancybox/js/jquery.mousewheel-3.0.6.pack.js') !!}
    {!! Html::script('assets/libs/fancybox/js/jquery.fancybox.js') !!}
    {!! Html::script('assets/libs/fancybox/js/jquery.fancybox-buttons.js') !!}
    {!! Html::script('assets/libs/fancybox/js/jquery.fancybox-thumbs.js') !!}
    {!! Html::script('assets/libs/mouse-direction-aware/jquery.directional-hover.js') !!}
    {!! Html::script('js/vue.js') !!}
    {!! Html::script('js/axios.min.js') !!} 

    <script type="text/javascript">

        $(document).ready(function () {
        	var countPassengers = "{{ $countpassengers }}";
            var bikes = null;
            console.log(bikes);
            $.each(bikes, function (i, bike) {
            	$('#size'+bike.bike.id).on('change', function(){
        			var size = $(this).val();
        			$.each(bike.count_sizes, function (i, bsize) {
        				if(bsize.id == size){
		            		if(size != ""){
			            		$('#qte'+bike.bike.id).removeAttr('disabled');
			            		if(parseInt(countPassengers) > parseInt(bsize.count)){
			            			$('#qte'+bike.bike.id).attr('max', bsize.count);
			            		}else{
			            			$('#qte'+bike.bike.id).attr('max', countPassengers);			            			
			            		}
		            		}else{
			            		$('#qte'+bike.bike.id).attr('disabled', 'disabled');
		            		}
            			}
            		});
            	});
            	$('#qte'+bike.bike.id).on('change', function(){
            		if( $(this).attr('max') < $(this).val() ){
            			alert('you can get max ' + $(this).attr('max'));
            			$(this).val("");
            		}	
            	});
            	$('#'+bike.bike.reference).on('click', function(){
        			var size = $('#size'+bike.bike.id).val();
            		var qte = $('#qte'+bike.bike.id).val();
            		var countP = $('#countPassengers').val();
            		var html = "";
            		var bikes_hidden = "";
            		console.log(countP, countPassengers)
            		if(size != "" && qte != ""){
            			$('#bikes_info').removeClass('hidden');
            			$.each(bike.sizes, function (i, bsize) {
            				if(bsize.id == size && countPassengers > countP){
            					var te = "liClose"+size+bike.bike.id;
            					var inputs = "input"+bike.bike.id;
		            			html += '<li id="liClose'+size+bike.bike.id+'">'+
			            					'<span>'+bike.bike.title+' | '+bsize.libelle+' x '+qte+'</span>'+
			            					'<span class="price ng-binding">'+bike.price*qte+' €</span>'+
			            					'<span class="close" id="close'+bike.bike.id+'" onclick="fn('+te+','+inputs+')">x</span>'+
			            				'</li>';

			            		bikes_hidden += '<div id="input'+bike.bike.id+'"><input type="hidden" name="ids[]" value="'+bike.bike.id+'">';
			            		bikes_hidden += '<input type="hidden" name="qte[]" value="'+qte+'">';
			            		bikes_hidden += '<input type="hidden" name="prices[]" value="'+bike.price+'">';
			            		bikes_hidden += '<input type="hidden" name="names[]" value="'+bike.bike.title+'">';
			            		bikes_hidden += '<input type="hidden" name="sizes[]" value="'+size+'">';
			            		bikes_hidden += '<input type="hidden" name="sizes_libelle[]" value="'+bsize.libelle+'"><div>';


			            		$('#countPassengers').val(parseInt(countP)+1);
		        				$('#bikes_ul').append(html);
		        				$('#bikes_hidden').append(bikes_hidden);
		        				$('#size'+bike.bike.id).val("");
		        				$('#qte'+bike.bike.id).val("");
			            		$('#qte'+bike.bike.id).attr('disabled', 'disabled');
            				}
            			});
            		}
            	});
            });
        });
        function fn(li, inputs){
    		var countP = $('#countPassengers').val();
    		console.log(li.id);
    		$('#'+li.id).remove();
    		$('#'+inputs.id).remove();
    		$('#countPassengers').val(parseInt(countP)-1);
            if(countP == 1) {$('#bikes_info').addClass('hidden');}
        }

        function addBike(bike_id) {
            var countPassengers = $('.holiday-card-info li').length;
            var title = $('#'+bike_id+' .bike_bigtitle').text();
            var subtitle = $('#'+bike_id+' .bike_subtitle').text();
            var price = parseFloat($('#'+bike_id+' .bike_price').text());
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');


            var data= {_token: CSRF_TOKEN,bike_id: bike_id,title: title,subtitle: subtitle, price: price};
            
            $(this).attr('onclick','return false;');
            $.ajax({
                url:APP_URL+'bookings/addbike',
                type:"POST",
                data: data,
                dataType: 'JSON',
                success:function(responce){
                    if(responce['code'] =='200'){
                        // traitement
                        $('#'+bike_id+' .detail_book').css("background","gray"," !important" );
                        $('#'+bike_id+' .detail_book').css("pointer-events","none");
                        $('#'+bike_id+' .detail_book').css("cursor", "default");
                        /*
                        $('ul.holiday-card-info').append('<li id="passenger-price-'+(countPassengers +1)+'"><span>Passenger '+(countPassengers +1)+'</span><span class="price ng-binding">{{ $tourdate->price }} €</span></li>');
                        var total = ((countPassengers +1) * {{ $tourdate->price }});
                        $('.booking-side-price').text(total+' €');
                        */
                    }else{

                    }
                }
            });
        }

        function bookingSubmit(){
            $('.booking-form').submit();
        }
        function removePassenger(passenger_id,passenger_price_id) {
            $('#'+passenger_id).remove();
            $('#'+passenger_price_id).remove();

            var total = parseFloat($('.booking-side-price').text());
            total = (total - {{ $tourdate->price }});
            $('.booking-side-price').text(total+' €');
        }
        function addPassenger() {
            var countPassenger = $('.passenger_number').length;
            var countPassengers = $('.holiday-card-info li').length;
            var countPassengerStr = "";
            if(countPassenger == 0){
                countPassengerStr = '2nd';
            }else if(countPassenger == 1){
                countPassengerStr = '3rd';
            }else{
                countPassenger = (countPassenger + 2);
                countPassengerStr = countPassenger+'th';
            }
            var passenger_id = "'passenger-"+countPassenger+"'";
            var passenger_price_id = "'passenger-price-"+(countPassengers +1)+"'";
            var html = '<div id="passenger-'+countPassenger+'">';
                html += '<h3 class="passenger_number">'+countPassengerStr+' Passenger <span class="remove-passenger pull-right" onclick="removePassenger('+passenger_id+','+passenger_price_id+')"><i class="fa fa-times-circle"></i></span></h3>';
                html += '<p class="tripdate_subtitle col-md-12 marginTop20 marginBottom20 col-xs-12">Personnal Info</p>';
                html += '<div class="form-group col-md-12 col-xs-12">';
                    html += '<label for="inputTitle" class="col-sm-3 col-xs-3 col-form-label">Title</label>';
                    html += '<div class="col-sm-3 col-xs-7">';
                        html += '<select class="form-control" id="inputTitle" required="" name="title[]"><option selected="selected" value="">Select your title</option><option value="Mr">Mr</option><option value="Ms">Ms</option><option value="Mss">Mss</option></select>';
                    html += '</div>';

                    html += '<label for="inputSurname" class="col-sm-3 col-xs-3 col-form-label">Surname</label>';
                    html += '<div class="col-sm-3 col-xs-7">';
                        html += '<input class="form-control" placeholder="Surname" id="inputSurname" required="" name="firstname[]" type="text">';
                    html += '</div>';
                html += '</div>';
                html += '<div class="form-group col-md-12 col-xs-12">';
                    html += '<label for="inputFamily" class="col-sm-3 col-xs-5 col-form-label">Family Name</label>';
                    html += '<div class="col-sm-3 col-xs-7">';
                        html += '<input class="form-control" placeholder="Family Name" id="inputFamily" required="" name="lastname[]" type="text">';
                    html += '</div>';
                    html += '<label for="inputDate" class="col-sm-3 col-xs-5 col-form-label">Date of Birth</label>';
                    html += '<div class="col-sm-3 col-xs-7">';
                        html += '<input class="form-control datepicker" data-date-format="yyyy/mm/dd" placeholder="YYYY-MM-DD" id="inputDate" required="" name="birthdate[]" type="text">';
                    html += '</div>';
                html += '</div>';
                    html += '<div class="form-group col-md-12 col-xs-12">';
                        html += '<label for="inputTown" class="col-sm-3 col-xs-3 col-form-label">Town</label>';
                        html += '<div class="col-sm-3 col-xs-9">';
                            html += '<input class="form-control" placeholder="Town" id="inputTown" required="" name="city[]" type="text">';
                        html += '</div>';

                        html += '<label for="inputCountry" class="col-sm-3 col-xs-3 col-form-label">Country</label>';
                        html += '<div class="col-sm-3 col-xs-9">';
                            html += '<input class="form-control" placeholder="Country" id="inputCountry" required="" name="country[]" type="text">';
                        html += '</div>';
                    html += '</div>';
                    html += '<div class="form-group col-md-12 col-xs-12">';
                        html += '<label for="inputPassport" class="col-sm-3 col-xs-6 col-form-label">Passport Number</label>';
                        html += '<div class="col-sm-3 col-xs-6">';
                            html += '<input class="form-control" placeholder="Passport Number" id="inputPassport" required="" name="passport[]" type="text">';
                        html += '</div>';

                        html += '<label for="inputIssue" class="col-sm-3 col-xs-12 col-form-label">Date &amp; Place of issue</label>';
                        html += '<div class="col-sm-3 col-xs-12">';
                            html += '<input class="form-control" placeholder="Date &amp; Place of issue" id="inputPassport" required="" name="date_place_issue[]" type="text">';
                        html += '</div>';
                    html += '</div>';
                    html += '<div class="form-group col-md-12 col-xs-12">';
                        html += '<label for="inputEmail" class="col-sm-3 col-xs-6 col-form-label">Email Address</label>';
                        html += '<div class="col-sm-3 col-xs-6">';
                            html += '<input class="form-control" placeholder="Email Address" id="inputEmail" required="" name="email[]" type="email">';
                        html += '</div>';

                        html += '<label for="inputPhone" class="col-sm-3 col-xs-6 col-form-label">Phone Number</label>';
                        html += '<div class="col-sm-3 col-xs-6">';
                            html += '<input class="form-control" placeholder="Phone Number" id="inputPhone" required="" name="phone[]" type="text">';
                        html += '</div>';
                    html += '</div>';
                html += '<div class="form-group col-md-12 col-xs-12 height-25"></div>';
                html += '</div>';
            $('#passengers').append(html);
            $('ul.holiday-card-info').append('<li id="passenger-price-'+(countPassengers +1)+'"><span>Passenger '+(countPassengers +1)+'</span><span class="price ng-binding">{{ $tourdate->price }} €</span></li>');
            var total = ((countPassengers +1) * {{ $tourdate->price }});
            $('.booking-side-price').text(total+' €');

            $( ".datepicker" ).datepicker("refresh");
        }

        // function getBikesTour() 
        // {
        //     var selected_bikes = {selected_bikes : "{{ $tour->bikes }}", duration: "{{ $tour->duration }}"}; 
        //     $.ajax({
        //         url: "http://administration.rent-bike-morocco.com/getBikesTours",
        //         type: 'post',
        //         data: selected_bikes,                 
        //         dataType: "json",
        //         headers: {
        //             'Access-Control-Allow-Origin': '*'
        //         },
        //         async: false, 
        //         success: function(result) {
        //             console.log(result);
        //             console.log('result');
        //         }
        //     });

        // }

    </script>
@endsection