@extends('layouts.app2')

@section('head-title')
    <title>Covet Foundation</title>
    <style type="text/css">

@media only screen and (min-width: 768px) and (max-width: 991px) {

  ul.countdown {
    width: 100%;
  }
}
@media(max-width:767px){

  ul.countdown li {
      padding: 2em !important;
  }
  ul.countdown {
    width: 100%;
  }
}
@media only screen and (max-width: 640px) {

  ul.countdown {
    width: 100%;
  }
  ul.countdown li {
    padding: 2em !important;
    font-size: 1.2rem !important;
  }
  ul.countdown li span {
      font-size: 6.5rem !important;;
  }
}

@media only screen and (max-width: 480px) {

  ul.countdown li {
    padding: 1em !important;
    font-size: 1.2rem !important;
  }
  ul.countdown li span {
      font-size: 4.5rem !important;;
  }
}

@media only screen and (max-width: 360px) {

  ul.countdown li {
    padding: 1em !important;
    font-size: 1.2rem !important;
  }
  ul.countdown li span {
      font-size: 4.5rem !important;;
  }
}

#homo-faber-section a.arrowdo span {
    position: absolute;
    bottom: 9%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-left: -12px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb10 1.5s infinite;
    animation: sdb10 1.5s infinite;
    box-sizing: border-box;
}

@media only screen and (max-width: 767px){
  .section:nth-child(2) .c-hero-flex .c-hero-flex__item .see-more-btn {
      bottom: 0px !important;
  }

  h2.title-foundation{
    padding: 0 !important;

  }
}

.dropdown-menu{
  padding-top:0 !important;
}

.dark{
  transition: background-color 0.5s ease;
}

ul.countdown {
    display: inline-flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}
ul.countdown li {
    padding: 3em;
    text-transform: uppercase;
    font-size: 1.5rem;
}
ul.countdown li span {
    display: block;
    font-size: 9.5rem;
    font-family: 'Montserrat';
    font-weight: 300;
}
</style>

@endsection

@section('head-style')
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('css/Fullpage/jquery.fullpage.css')}}">
    <!-- <link rel="preload" href="../videos/brhands.mp4" as="video" type="video/mp4"> -->

@endsection

@section('content')
<div id="homepage">
	<div class="row">
		<div class="scroll-inner">
			<div class="menu-lateral">
				<ul id="myMenu">
          <li data-menuanchor="summit2019"><a href="#summit2019"><i class="fa fa-circle"></i></a></li>
          <!-- <li data-menuanchor="talkconference"><a href="#talkconference"><i class="fa fa-circle"></i></a></li> -->
          <li data-menuanchor="foundation" class="active"><a href="#foundation"><i class="fa fa-circle"></i></a></li>
					{{-- <li data-menuanchor="foundation" class="active"><a href="#foundation"><i class="fa fa-circle"></i></a></li> --}}

					<li data-menuanchor="creativeminds"><a href="#creativeminds"><i class="fa fa-circle"></i></a></li>
					{{-- <li data-menuanchor="craftsmanship"><a href="#craftsmanship"><i class="fa fa-circle"></i></a></li> --}}

					<!-- <li data-menuanchor="workshopsandjobcareers"><a href="#workshopsandjobcareers"><i class="fa fa-circle"></i></a></li> -->
				</ul>
			</div>
			<div id="fullpage">
        <div class="section" data-anchor="summit2019">
          <div class="c-hero-flex text-left"> {{--  --}}
            <a class="dark" style="width:100%; height:100%; position:absolute; display:inline-block;background-image:linear-gradient(transparent 100%)!important;" href="https://www.covetfoundation.com/landing/summit-2019">  </a>
              <div class="c-hero-flex__item">
                <video muted data-autoplay loop id="videoplay" width="640" class="videoHt" controls style="display: block;" class="embed-responsive embed-responsive-16by9">
                  <source class="embed-responsive-item" id="videogo" src="../videos/teaser_summit_2019.mp4" type="video/mp4">
                </video>

              </div>
          </div>
        </div>
        <!-- <div class="section" id="section" data-anchor="talkconference">
          <div class="c-hero-flex">
            <a class="dark" style="width:100%; height:100%; position:absolute; display:inline-block;background-image:linear-gradient(transparent 0%)!important;" href="{{ url('/masters-craftsmanship/5/mo-paris-january-2019') }}">  </a>
            <div class="c-hero-flex__item">
                <div style="position:absolute;bottom:10%;left:10%;z-index:1; color:white" class="overlay text-left">
                      <h2 style="font-size:20px; line-height:30px;" class="title-foundation"><a href="https://designandcraftsmanship.com/"><span style="padding: 2px 8px;background-color: #efc802;color: #000;">M&O PARIS 2019 | TALK CONFERENCE</span><br><span style="background-color: #efc802;padding: 2px 8px;color: #000;">Curated by Covet Foundation</span></a></h2>
                      <div class="see-more-btn">
                        <a href="{{ url('/masters-craftsmanship/5/mo-paris-january-2019') }}">WATCH CONFERENCE +</a>
                      </div>
                </div>
            </div>
          </div>
        </div> -->
        <div class="section" id="homo-faber-section" data-anchor="foundation">
          <div class="c-hero-flex text-left"> {{--  --}}
            <a class="dark" style="width:100%; height:100%; position:absolute; display:inline-block;background-image:linear-gradient(transparent 100%)!important;" href="https://www.covetfoundation.com/foundation/mission">  </a>
              <div class="c-hero-flex__item">
                <video muted data-autoplay loop id="videoplay" width="640" class="videoHt hidden-xs" controls style="display: block;" class="embed-responsive embed-responsive-16by9">
                  <source class="embed-responsive-item" id="videogo" src="../videos/brhands_short_version.mp4" type="video/mp4">
                </video>
                <video preload="auto" data-autoplay loop id="videoplay" width="640" class="videoHt hidden-md" controls style="display: block;" class="embed-responsive embed-responsive-16by9">
                  <source class="embed-responsive-item" id="videogo" src="../videos/brhands-mobile.mp4" type="video/mp4">
                </video>
              <div style="position:absolute;bottom:10%;left:10%;z-index:1; color:white" class="overlay text-left">
                      <h2 style="font-size:20px; line-height:30px;" class="title-foundation text-left"><a href="https://www.covetfoundation.com/foundation/mission"><span style="padding: 2px 8px;background-color: #efc802;color: #000;">WE SUPPORT THOSE WHO DEVOTE THEMSELVES </span><br><span style="background-color: #efc802;padding: 2px 8px;color: #000;">to the Excellence of Craftsmanship</span></a></h2>
                      <div class="see-more-btn ">
      						    	<a href="https://www.covetfoundation.com/foundation/mission">DISCOVER WHY +</a>

      						    </div>
                </div>
                {{-- <a class="arrowdo" href="#masterofcraftsmanship"><span></span></a> --}}
              </div>
          </div>
        </div>

				<div class="section" id="section" data-anchor="creativeminds">
					<div class="c-hero-flex">
            <a class="dark" style="width:100%; height:100%; position:absolute; display:inline-block;background-image:linear-gradient(transparent 100%)!important;" href="https://www.covetfoundation.com/foundation/mission">  </a>
						  <div class="c-hero-flex__item">

                <div style="position:absolute;bottom:10%;left:10%; z-index:1; color:white" class="overlay text-left">
                        <h2 style="font-size:20px; text-transform:uppercase; text-align:left" class="title-foundation"><a href="https://www.covetfoundation.com/foundation/mission"><span style="background-color: #efc802;padding: 2px 8px;color: #000;line-height:30px;">We celebrate and honour the craftsmanship</span></a></h2>
                        <div class="see-more-btn">
                          <a href="https://www.covetfoundation.com/foundation/mission" style="color: #000;">KNOW OUR MISSION +</a>

                        </div>
                  </div>
						  </div>
					</div>
				</div>
				{{-- <div class="section" id="section2" data-anchor="craftsmanship">
					<div class="c-hero-flex">
            <a class="dark" style="width:100%; height:100%; position:absolute; display:inline-block; background-image:linear-gradient(transparent 100%)!important;" href="https://www.youtube.com/watch?v=_FUYtfmmInk">  </a>
						  <div class="c-hero-flex__item">
						    <video data-autoplay loop id="videoplay" width="640" class="videoHt" controls style="display: block;" class="embed-responsive embed-responsive-16by9">
							  	<source class="embed-responsive-item" id="videogo" src="../videos/brhands.mp4" type="video/mp4">
							</video>
              <div style="position:absolute;bottom:25%;left:10%;z-index:1; color:white" class="overlay text-left">
                      <h2 style="font-size:20px; text-transform:uppercase;" class="title-foundation"><span style="background-color: #ffde00;padding: 2px 8px;color: #000; line-height:30px;">A Tribute To All Makers</span></h2>
                      <div class="see-more-btn">
      						    	<a href="https://www.youtube.com/watch?v=_FUYtfmmInk">WATCH FULL VIDEO +</a>

      						    </div>
                </div>
						  </div>
					</div>
				</div> --}}

				<!-- <div class="section" data-anchor="workshopsandjobcareers">
					<div class="c-hero-flex">
            <a style="width:100%; height:100%; position:absolute; display:inline-block;" href="https://www.covetfoundation.com/training-programme/training-and-careers-oportunities">  </a>
						<div class="c-hero-flex__item">
						    <h2 class="title-foundation">WORKSHOPS AND JOB CAREERS</h2>
						    <div class="excerpt-f">
						    	<p>FIND OUT THE OPPORTUNITY TO LEARN IN WORK-BASED METHOD <br>
						    		AND INTERNATIONAL ENVIRONMENT.</p>
						    </div>
						    <div class="see-more-btn">
						    	<a href="https://www.covetfoundation.com/training-programme/training-and-careers-oportunities">SEE MORE +</a>
						    </div>
						</div>
					</div>
				</div> -->
				@include('includes.footer-black')
			</div>
		</div>
	</div>
</div>
@endsection

@section('foot')

{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/vendors/scrolloverflow.js"></script> --}}

<script src="{{ URL::asset('js/Fullpage/jquery.fullpage.js')}}"></script>
<script src="{{ URL::asset('js/Fullpage/jquery.easings.min.js')}}"></script>
<script src="{{ URL::asset('js/Fullpage/scrolloverflow.js')}}"></script>


<script type="text/javascript">


/*durationLeft = $('#videoplay').attr('duration') – $('#videoplay').attr('buffered').end(0);
if (durationLeft == 0) {
}*/

$(document).ready(function() {

  $('.nav .dropdown a').hover(function(){
    $('.dark').css("background","rgba(0,0,0,0.5)");
  }, function(){
    $('.dark').css({"background":"linear-gradient(transparent 100%, black)"});
  });

	$('#fullpage').fullpage({
		anchors: ['summit2019', 'foundation', 'creativeminds'],
		menu: '#myMenu',
    azyLoading: false,
    afterLoad: function(index, nextIndex, direction) {
      if (index != 'summit2019') {
        $('#menunative').fadeOut(10);
        $('#menuonscroll').fadeIn(400).addClass('fixed');
        $('#menunative').toggleClass('is-active');
    } else {
      $('#menunative').fadeIn(400);
      $('#menuonscroll').fadeOut();
    }
    }
	});
	$('#footer').addClass('fp-auto-height');

    /*const second = 1000,
    minute = second * 60,
    hour = minute * 60,
    day = hour * 24;

    let countDown = new Date('Jan 18, 2019 00:00:00').getTime(),
    x = setInterval(function() {

    let now = new Date().getTime(),
      distance = countDown - now;

      document.getElementById('days').innerText = Math.floor(distance / (day)),
      document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
      document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
      document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);*/

      //do something later when date is reached
      //if (distance < 0) {
      //  clearInterval(x);
      //  'IT'S MY BIRTHDAY!;
      //}

    //}, second)
});


//adding the action to the button
$(document).on('click', '#moveUp', function(){
		$.fn.fullpage.moveSectionUp();
});

var x = document.getElementById("videoplay");

function playVideo() {
	if(x.paused){
	    x.play();
	    x.style.display = "block";
	}else{
	    x.pause();
	}
}

</script>

@endsection