@extends('layouts.frontend')
@section('content')
	<div class="banner_page">
		<div class="heading_image">
			<img src="{{ asset('images/banner_inner.png') }}">
		</div>
		<div class="page_heading">
			<h1>Book Session</h1>
		</div>
	</div>
	<div class="booking_page">
		<div class="section_cols choose_experience">
			<div class="container">
				<div class="heading_choose">
					<h4 class="number_heading">01</h4>
					<h3>Choose your experience</h3>
				</div>
				<div class="button_choose show_tab">
					<a href="#" class="active_choose">V2 Motion</a>
					<a href="#">Name 2</a>
				</div>
				<div class="row hide_tab">
					<div class="col_about">
						<img src="{{ asset('images/booking.png') }}">
						<div class="col_about_details">
							<h3>V2 Motion</h3>
							<div class="line"></div>
							<p>Donec at interdum massa, in ultrices nulla. Vestibulum</p>
						</div>
					</div>
					<div class="col_about">
						<img src="{{ asset('images/booking.png') }}">
						<div class="col_about_details">
							<h3>Name 2</h3>
							<div class="line"></div>
							<p>Donec at interdum massa, in ultrices nulla. Vestibulum</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="section_products choose_duration">
			<div class="row right_image">
				<div class="product_detail">
					<div class="heading_choose">
						<h4 class="number_heading">02</h4>
						<h3>SELECt Duration</h3>
					</div>
					<div class="button_choose">
						<a href="#" class="active_choose">30 mins</a>
						<a href="#">1 hours</a>
					</div>
				</div>
				<div class="product_image">
					<img src="{{ asset('images/product.png') }}">
				</div>
			</div>
		</div>
		<div class="experiences_section choose_session">
			<div class="container">
				<div class="heading_choose">
					<h4 class="number_heading">03</h4>
					<h3>SELECt Session</h3>
					<div class="heading_line hide_tab"></div>
				</div>
			</div>
			<div class="experiences_slide">
				<div class="experiences_item">
					<div class="experiences_rate hide_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_image">
						<img src="{{ asset('images/experience.png') }}">
					</div>
					<div class="experiences_rate show_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_details">
						<h3>Experience Name</h3>
						<p>Donec at interdum massa, in ultrices nulla. Vestibulum faucibus sapien urna, eget fermentum urna faucibus vel. </p>
					</div>
				</div>
				<div class="experiences_item">
					<div class="experiences_rate hide_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_image">
						<img src="{{ asset('images/experience.png') }}">
					</div>
					<div class="experiences_rate show_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_details">
						<h3>Experience Name</h3>
						<p>Donec at interdum massa, in ultrices nulla. Vestibulum faucibus sapien urna, eget fermentum urna faucibus vel. </p>
					</div>
				</div>
				<div class="experiences_item">
					<div class="experiences_rate hide_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_image">
						<img src="{{ asset('images/experience.png') }}">
					</div>
					<div class="experiences_rate show_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_details">
						<h3>Experience Name</h3>
						<p>Donec at interdum massa, in ultrices nulla. Vestibulum faucibus sapien urna, eget fermentum urna faucibus vel. </p>
					</div>
				</div>
				<div class="experiences_item">
					<div class="experiences_rate hide_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_image">
						<img src="{{ asset('images/experience.png') }}">
					</div>
					<div class="experiences_rate show_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_details">
						<h3>Experience Name</h3>
						<p>Donec at interdum massa, in ultrices nulla. Vestibulum faucibus sapien urna, eget fermentum urna faucibus vel. </p>
					</div>
				</div>
				<div class="experiences_item">
					<div class="experiences_rate hide_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_image">
						<img src="{{ asset('images/experience.png') }}">
					</div>
					<div class="experiences_rate show_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_details">
						<h3>Experience Name</h3>
						<p>Donec at interdum massa, in ultrices nulla. Vestibulum faucibus sapien urna, eget fermentum urna faucibus vel. </p>
					</div>
				</div>
				<div class="experiences_item">
					<div class="experiences_rate hide_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_image">
						<img src="{{ asset('images/experience.png') }}">
					</div>
					<div class="experiences_rate show_tab">
						<p>DIFFICULTY</p>
						<div class="rate_star"><span class="active_rate"></span><span class="active_rate"></span><span class="active_rate"></span><span class=""></span><span class=""></span></div>
					</div>
					<div class="experiences_details">
						<h3>Experience Name</h3>
						<p>Donec at interdum massa, in ultrices nulla. Vestibulum faucibus sapien urna, eget fermentum urna faucibus vel. </p>
					</div>
				</div>
			</div>
		</div>
		<div class="cart_section choose_payment">
			<div class="container">
				<div class="heading_choose">
					<h4 class="number_heading">04</h4>
					<h3>DETAILS & PAYMENT</h3>
				</div>
				<div class="show_tab">
					<div class="cart_mobile">
						<div class="mobile_total">
							<select>
								<option>Show Order Summary</option>
							</select>
							<p>$XXX.00</p>
						</div>
					</div>
				</div>
			</div>
			<div class="form_booking">
				<div class="row">
					<div class="left_form">
						<div class="form_detail">
							<div class="form_row">
								<div class="col_half">
									<div class="form_field">
										<label>Name</label>
										<p>What name is your booking under?</p>
										<input type="text" class="form_control" placeholder="Eg. Mike Smith">
									</div>
								</div>
								<div class="col_half">
									<div class="form_field">
										<label>Email</label>
										<p>Where would you like your confirmation sent?</p>
										<input type="text" class="form_control" placeholder="name@email.com">
									</div>
								</div>
							</div>
							<div class="form_field checkout_fields">
								<label class="hide_mobile">Payment with..</label>
								<label class="show_mobile">Checkout</label>
								<p class="hide_mobile">Choose what service you want to use for your transaction</p>
								<div class="show_mobile mobile_checkout">
									<div class="mobile_payment">
										<img src="{{ asset('images/gpay.png') }}">
									</div>
									<div class="mobile_payment">
										<img src="{{ asset('images/paypal_logo.png') }}">
									</div>
								</div>
								<div class="show_mobile choose_more">
									<p>OR</p>
								</div>
								<div class="payment_choices">
									<div class="payment_choices_left">
										<div class="payment_radio active_payment">
											<div class="custom_choice">
												<input type="radio" checked="" id="test3" value="card" name="radio-group">
												<label for="test3"></label>
											</div>
											<div class="type_payment">
												<p>Credit Card</p>
												<img src="{{ asset('images/mastercard.png') }}">
												<img src="{{ asset('images/visa.png') }}">
											</div>
											<p>We accept Visa and Master Card.</p>
										</div>
									</div>
									<div class="payment_choices_right">
										<div class="payment_radio">
											<div class="custom_choice">
												<input type="radio" id="test4" value="paypal" name="radio-group">
												<label for="test4"></label>
											</div>
											<div class="type_payment">
												<p>Paypal</p>
												<img src="{{ asset('images/paypal.png') }}">
											</div>
											<p>Insert your account email of paypal. We will process your payment.</p>
										</div>
									</div>
								</div>
							</div>
							<div class="card_details">
								<div class="form_row">
									<div class="col_half">
										<div class="form_field">
											<label>Card name</label>
											<input type="text" class="form_control" placeholder="Eg. Mike Smith">
										</div>
									</div>
									<div class="col_half">
										<div class="form_field">
											<label>Card number</label>
											<input type="text" class="form_control" placeholder="1234 1234 1234 1234">
										</div>
									</div>
								</div>
								<div class="card_date">
									<div class="col_small">
										<div class="form_field">
											<label>Month</label>
											<select class="form_control">
												<option>Select month</option>
											</select>
										</div>
									</div>
									<div class="col_small">
										<div class="form_field">
											<label>Year</label>
											<select class="form_control">
												<option>Select year</option>
											</select>
										</div>
									</div>
									<div class="col_min">
										<div class="form_field">
											<label>CVV</label>
											<input type="text" class="form_control" placeholder="000">
										</div>
									</div>
								</div>
							</div>
							<div class="form_button">
								<input type="submit" value="Pay Now">
							</div>
						</div>
					</div>
					<div class="right_form">
						<div class="cart_mini">
							<div class="cart_heading">
								<h3>Order Summary</h3>
							</div>
							<div class="product_list">
								<div class="product_item">
									<div class="cart_image">
										<img src="{{ asset('images/product_cart.png') }}">
									</div>
									<div class="product_details">
										<div class="product_info">
											<h3>Experience 3</h3>
											<div class="product_qty">
												<div class="product_name">$XX</div>
												<div class="qty">1 item</div>
											</div>
										</div>
										<div class="remove_product">
											<a href="#"><img src="{{ asset('images/close_btn.png') }}"></a>
										</div>
									</div>
								</div>
								<div class="product_item">
									<div class="cart_image">
										<img src="{{ asset('images/product_cart.png') }}">
									</div>
									<div class="product_details">
										<div class="product_info">
											<h3>Experience 3</h3>
											<div class="product_qty">
												<div class="product_name">$XX</div>
												<div class="qty">1 item</div>
											</div>
										</div>
										<div class="remove_product">
											<a href="#"><img src="{{ asset('images/close_btn.png') }}"></a>
										</div>
									</div>
								</div>
								<div class="product_item">
									<div class="cart_image">
										<img src="{{ asset('images/product_cart.png') }}">
									</div>
									<div class="product_details">
										<div class="product_info">
											<h3>Experience 3</h3>
											<div class="product_qty">
												<div class="product_name">$XX</div>
												<div class="qty">1 item</div>
											</div>
										</div>
										<div class="remove_product">
											<a href="#"><img src="{{ asset('images/close_btn.png') }}"></a>
										</div>
									</div>
								</div>
								<div class="product_item">
									<div class="cart_image">
										<img src="{{ asset('images/product_cart.png') }}">
									</div>
									<div class="product_details">
										<div class="product_info">
											<h3>Experience 3</h3>
											<div class="product_qty">
												<div class="product_name">$XX</div>
												<div class="qty">1 item</div>
											</div>
										</div>
										<div class="remove_product">
											<a href="#"><img src="{{ asset('images/close_btn.png') }}"></a>
										</div>
									</div>
								</div>
							</div>
							<div class="cart_subtotal">
								<div class="total_line">
									<div class="name_line">Subtotal</div>
									<div class="price_line">$XXX.00</div>
								</div>
								<div class="total_line">
									<div class="name_line">Shipping</div>
									<div class="price_line">-</div>
								</div>
								<div class="total_line">
									<div class="name_line">GST</div>
									<div class="price_line">$X.00</div>
								</div>
							</div>
							<div class="cart_total">
								<div class="total_line">
									<div class="name_line">Order Total</div>
									<div class="price_line">$XXX.00</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
	<script>
		$(".experiences_slide").slick({
			autoplay: false,
			dots: false,
			arrows: false,
			focusOnSelect: true,
			slidesToShow: 5,
			slidesToScroll: 1,
			responsive: [
				{
					breakpoint: 1081,
					settings: {
						slidesToShow: 3,
						slidesToScroll: 1,
						variableWidth: true,
					}
				},
				{
					breakpoint: 768,
					settings: {
						slidesToShow: 2,
						slidesToScroll: 1,
						variableWidth: true,
					}
				}
			]
		});
		$('input[type=radio][name=radio-group]').change(function() {
			$('.payment_radio').removeClass('active_payment');
			$(this).closest('.payment_radio').addClass('active_payment');
			if (this.value == 'paypal') {
				$('.card_details').hide();
			}
			else if (this.value == 'card') {
				$('.card_details').show();
			}
		});
	</script>
@parent
@endsection