@extends('layouts.frontend')
@section('content')
	<div class="machine_header">
		<div class="machine_slides">
			<div class="machine_banner">
				<div class="machine_banner_image">
					<img src="{{ asset('images/banner.png') }}">
				</div>
				<div class="machine_banner_details">
					<div class="container">
						<h3>V2 Motion</h3>
						<p>Donec at interdum massa, in ultrices nulla. Vestibulum faucibus sapien urna, eget fermentum.</p>
					</div>
				</div>
			</div>
			<div class="machine_banner">
				<div class="machine_banner_image">
					<img src="{{ asset('images/banner.png') }}">
				</div>
				<div class="machine_banner_details">
					<div class="container">
						<h3>V2 Motion</h3>
						<p>Donec at interdum massa, in ultrices nulla. Vestibulum faucibus sapien urna, eget fermentum.</p>
					</div>
				</div>
			</div>
			<div class="machine_banner">
				<div class="machine_banner_image">
					<img src="{{ asset('images/banner.png') }}">
				</div>
				<div class="machine_banner_details">
					<div class="container">
						<h3>V2 Motion</h3>
						<p>Donec at interdum massa, in ultrices nulla. Vestibulum faucibus sapien urna, eget fermentum.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="welcome_section">
		<div class="container">
			<div class="welcome_details">
				<h3>The V2 Motion Experience.</h3>
				<div class="welcome_line"></div>
				<p>Donec at interdum massa, in ultrices nulla. Vestibulum faucibus sapien urna, eget fermentum urna faucibus vel. Curabitur dictum sapien ut urna pharetra, a interdum eros aliquam. </p>
			</div>
		</div>
	</div>
	<div class="video_section">
		<div class="container">
			<div class="video_content">
				<div class="video_embed"></div>
				<div class="btn_play"><img src="{{ asset('images/btn_play.png') }}"></div>
			</div>
		</div>
	</div>
	<div class="experiences_section">
		<div class="container">
			<div class="section_heading">
				<h3>RECOMMENDED EXPERIENCES</h3>
				<div class="heading_line"></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="own_section">
		<div class="container">
			<div class="section_heading">
				<h3>RECOMMENDED EXPERIENCES</h3>
				<div class="heading_line"></div>
			</div>
		</div>
		<div class="own_items">
			<div class="own_col">
				<div id="own_slide_1" class="own_slides">
					<div class="own_item">
						<div class="own_image">
							<img src="{{ asset('images/own_placeholder.png') }}">
						</div>
					</div>
					<div class="own_item">
						<div class="own_image">
							<img src="{{ asset('images/own_placeholder.png') }}">
						</div>
					</div>
					<div class="own_item">
						<div class="own_image">
							<img src="{{ asset('images/own_placeholder.png') }}">
						</div>
					</div>
				</div>
				<div class="custom_arrow" id="arrow_slide_1">
					<button class="prev-btn"><img src="{{ asset('images/arrow_left.png') }}"></button>
					<h3><span>SEARCH</span> CARS</h3>
					<button class="next-btn"><img src="{{ asset('images/arrow_right.png') }}"></button>
				</div>
			</div>
			<div class="own_col">
				<div id="own_slide_2" class="own_slides">
					<div class="own_item">
						<div class="own_image">
							<img src="{{ asset('images/own_placeholder.png') }}">
						</div>
					</div>
					<div class="own_item">
						<div class="own_image">
							<img src="{{ asset('images/own_placeholder.png') }}">
						</div>
					</div>
					<div class="own_item">
						<div class="own_image">
							<img src="{{ asset('images/own_placeholder.png') }}">
						</div>
					</div>
				</div>
				<div class="custom_arrow" id="arrow_slide_2">
					<button class="prev-btn"><img src="{{ asset('images/arrow_left.png') }}"></button>
					<h3><span>SEARCH</span> TRACKS</h3>
					<button class="next-btn"><img src="{{ asset('images/arrow_right.png') }}"></button>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
	<script>
		$(".machine_slides").slick({
			autoplay: true,
			dots: true,
			arrows: false,
			customPaging : function(slider, i) {
				var j = i+1;
				return '<a class="dot">'+j+'</a>';
			},
		});
		$(".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,
					}
				}
			]
		});
		$("#own_slide_1").slick({
			autoplay: false,
			dots: false,
			arrows: false,
			focusOnSelect: true,
			slidesToShow: 1,
			slidesToScroll: 1,
			responsive: [
				{
					breakpoint: 1081,
					settings: {
						dots: true,
					}
				},
				{
					breakpoint: 768,
					settings: {
						dots: true,
					}
				}
			]
		});
		$("#arrow_slide_1 .prev-btn").click(function () {
			$("#own_slide_1").slick("slickPrev");
		});
		$("#arrow_slide_1  .next-btn").click(function () {
			$("#own_slide_1").slick("slickNext");
		});
		$("#own_slide_2").slick({
			autoplay: false,
			dots: false,
			arrows: false,
			focusOnSelect: true,
			slidesToShow: 1,
			slidesToScroll: 1,
			responsive: [
				{
					breakpoint: 1081,
					settings: {
						dots: true,
					}
				},
				{
					breakpoint: 768,
					settings: {
						dots: true,
					}
				}
			]
		});
		$("#arrow_slide_2 .prev-btn").click(function () {
			$("#own_slide_2").slick("slickPrev");
		});
		$("#arrow_slide_2  .next-btn").click(function () {
			$("#own_slide_2").slick("slickNext");
		});
	</script>
@parent
@endsection