<template>
	<div class="home-page">
		<div class="call-us-div unselectable">
				Call us! 123-456-7890
		</div>
		<topBar></topBar>
		<div class="video-div">
			<video class="homepage-video" type="video/mp4" ref="video" autoplay loop>
				<source src="https://www.w3schools.com/html/mov_bbb.mp4">
			</video>
			<router-link to="/about-us"><button type="button" class="learn-more-btn">Learn more!</button></router-link>
		</div>
		<div class="">
			<p>TEST</p>
		</div>

		<!--This is suppost to have testimonials but the buttons currently don't work-->

			<div class="slideshow-container">

			<div class="mySlides">
			<blockqoute>I love you the more in that I believe you had liked me for my own sake and for nothing else</blockqoute>
			<p class="author">- John Keats</p>
			</div>

			<div class="mySlides">
			<blockqoute>But man is not made for defeat. A man can be destroyed but not defeated.</blockqoute>
			<p class="author">- Ernest Hemingway</p>
			</div>

			<div class="mySlides">
			<blockqoute>I have not failed. I've just found 10,000 ways that won't work.</blockqoute>
			<p class="author">- Thomas A. Edison</p>
			</div>

			<a class="prev" onclick="plusSlides(-1)">❮</a>
			<a class="next" onclick="plusSlides(1)">❯</a>

			</div>

		<div class = "container">
			<h2>Meet Our Founders</h2>
			<p>As college applicants ourselves, we recently went through the process and have spent hundreds and hundreds of hours researching top colleges and how to get through their admissions processes. Admissions Elite was founded in Central Jersey by Rahul Khatti, attending University of Michigan and Trishiet Ray, attending Stanford University. Trishiet among others, Trishiet was also accepted into Harvard College, the University of Pennsylvania for the prestigious Jerome Fisher Program in Management and Technology, Cornell University, Carnegie Mellon University, and Vanderbilt University. Since then, we have hired a number of talented admissions consultants, ranging from MIT, Harvard, UPenn, and more.</p>
			<br>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
import TopBar from "../TopBar.vue";
import Footer from "../Footer.vue";

export default {
	name: "HomePage",
	components: {
		"topBar": TopBar,
		"Footer": Footer
	},
	data () {
		return {
		}
	},
	mounted() {
		this.$refs.video.volume = 0;
	}
}

//slides
$( document ).ready({
	let slideIndex = 1;
	showSlides(slideIndex);

	function plusSlides(n) {
	showSlides(slideIndex += n);
	}

	function currentSlide(n) {
	showSlides(slideIndex = n);
	}

	function showSlides(n) {
	var i;
	var slides = document.getElementsByClassName("mySlides");
	if (n > slides.length) {slideIndex = 1}
	if (n < 1) {slideIndex = slides.length}
	for (i = 0; i < slides.length; i++) {
		slides[i].style.display = "none";
	}
	slides[slideIndex-1].style.display = "block";
	}
});
</script>

<style scoped>
h3,h2,p{
	color:white;
}
.home-page {
	--learn-more-btn-color: #00A000;
	--learn-more-btn-hover-color: #00C000;
	--learn-more-font-family: "Georgia";
}

.video-div {
	//position: absolute;
	margin-top: 0px;
	width: 100%;
	height: 650px;
	overflow: hidden;
	display:block;
}

.homepage-video {
	width: 100%;
}

.learn-more-btn {
	position: absolute;
	display: inline-block;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: 75px;
	background-color: var(--learn-more-btn-color);
	border: none;
	color: white;
	padding: 13px 20px;
	font-family: var(--learn-more-font-family);
	font-size: 18px;
	cursor: pointer;
	box-shadow: 0px 0px 75px 10px #000000;
}

.learn-more-btn:hover {
	background-color: var(--learn-more-btn-hover-color);
}

.call-us-div {
	background-color: #e5e5e5;
	//padding-bottom: 15px;
	//padding-top: 10px;
	padding-right: 10px;
	text-align: right;
	text-decoration: none;
	font-size: 22px;
	//float: right;
}

.tab{
    display:inline-block;
    width:20px;
}

* {box-sizing: border-box}

.slideshow-container {
	margin:0;
	font-family: Verdana, sans-serif;
  position: relative;
  background: #f1f1f1f1;
}

.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: grey;
  color: white;
}

blockqoute {font-style: italic;}

.author {color: cornflowerblue;}

</style>