@extends('layouts.app')
@section('stylesheets')
     {!! Html::style('css/details.css') !!} 
     {!! Html::style('css/parsley.css') !!}
@endsection
@section('content')
<section class="page-banner booking tour-result" style="background-image: url({{ env('URL_APPLICATION').$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="{{ URL::asset($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="disabled" aria-disabled="true">
                            <a  href="javascript:;" >
                                <span class="number">2</span> 
                                <span class="title">Bike Rental</span>
                            </a>
                        </li>
                        <li role="tab" class="last current" aria-disabled="true">
                            <a = href="javascript:;" >
                                <span class="current-info audible">current step: </span>
                                <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) }}
                            <input name="step" type="hidden" value="pay">
                            {{-- adding bikes --}}
                            <div class="col-md-12 col-xs-12 marginTop20 marginBottom20">
                                
                            </div>      
                            <!-- <p class="tripdate_subtitle col-md-12 marginTop20 marginBottom20 col-xs-12">Chose your paiement method:</p> -->
                            <div class="form-group col-md-12 col-xs-12 list-bikes">
                                <h3>Booking summary</h3>
                            </div>

							<div class="col-lg-12">
								<table class="table table-bordered table-hover table-striped">								
									<tbody>
										<tr>
											<th>Full Name: </th>
											<td>{{ $booking['customer']['title'] }} {{ $booking['customer']['firstname'] }} {{ $booking['customer']['lastname'] }}</td>
										</tr>
										<tr>
											<th>Number Phone: </th>
											<td>{{ $booking['customer']['phone'] }}</td>
										</tr>
										<tr>
											<th>Email: </th>
											<td>{{ $booking['customer']['email'] }}</td>
										</tr>
										<tr>
											<th>Passport: </th>
											<td>{{ $booking['customer']['passport'] }}</td>
										</tr>
										<tr>
											<th>Date Departure: </th>
											<td>{{ $booking['booking']['departure_date'] }}</td>
										</tr>
										<tr>
											<th>Date Arrival: </th>
											<td>{{ $booking['booking']['arrival_date'] }}</td>
										</tr>
									</tbody>
								</table>
							</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 Options</a>
                                </div>
                                <div class="col-md-6 col-xs-6">
                                    {{ Form::submit('Book',array_merge(['class'=>'submit detail_book col-xs-7 detail_book_btn'])) }}
                                </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) + ($sumbike) }} €</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" >
                        <h4 class=""> Bikes</h4>
                        <ul class="holiday-card-info">
                            @foreach ($booking['accessories'] as $element)
                                
                                <li id="bike-{{ $element->element_id }}">
                                    <span>{{ $element->name .' x '. $element->qte }}</span>
                                    <span class="remove ng-binding" onclick="removeBike('{{ $element->element_id }}')"><i class="fa fa-times"></i></span>
                                    <span class="price ng-binding">{{ $element->price * $element->qte }} €</span>
                                </li>

                            @endforeach
                          
                        </ul>
                    </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>

@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') !!}
    
    <script type="text/javascript">
        
        function removeBike(bike_id) {
        
            var price = parseFloat($('#bike-'+bike_id+' .price').text());
            var total = parseFloat($('.booking-side-price').text());
            
            $.ajax({
                url:APP_URL+'bookings/'+bike_id+'/removeBike',
                type:"GET",
                dataType: 'JSON',
                success:function(responce){
                    if(responce['code'] =='200'){
                        $('#bike-'+bike_id).remove();
                        $('.booking-side-price').text((total - responce['sum'] )+' €');
                    }else{
                        console.log('error');
                    }
                }
            });
        }
    </script>
@endsection