@extends('layouts.app')

@section('head-title')
    <title>Covet Foundation TV</title>
@endsection

@section('head-style')
<link rel="stylesheet" type="text/css" href="{{ URL::asset('css/style.css')}}">

@endsection

@section('content')
<div class="container-fluid nopadding">
	<div class="first-section-summit-2019">
	</div>

	<div class="titles-geral">
		<h1>Highlights</h1>
	</div>

	<div class="col-xs-12 bg-video-highlights lastvideos">
	</div>

	<div class="col-xs-12 nopadding b-fully">
		<a href="" target="_blank">
			<img src="https://via.placeholder.com/1920x500?text=1920x500_subcribechannel" class="img-responsive center-block">	
		</a>
	</div>

	<div class="col-xs-12 sectiontabs nopadding">
		<ul class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
			<li class="active">
          		<a class="nav-item nav-link active" href="#all" role="tab" data-toggle="tab" id="all-tab"> ALL </a>
          	</li>
          	<li>
          		<a class="nav-item nav-link" href="#ldcsummit" role="tab" data-toggle="tab" id="ldcsummit-tab"> LDC SUMMIT </a>
          	</li>
          	<li>
          		<a class="nav-item nav-link" href="#masters" role="tab" data-toggle="tab"> MASTERS OF CRAFTSMANSHIP </a>
          	</li>
          	<li>
          		<a class="nav-item nav-link" href="#masterstecniques" role="tab" data-toggle="tab"> MASTERS OF CRAFTSMANSHIP - TECNIQUES </a>
          	</li>
          	<li>
          		<a class="nav-item nav-link" href="#designevents" role="tab" data-toggle="tab"> DESIGN EVENTS </a>
          	</li>
    	</ul>
    	<div class="container tab-content">
    		<div class="tab-pane fade active in" id="all">
		      	<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
				<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
				<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
			</div>

	      	<div class="tab-pane fade" id="ldcsummit">
	          	<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
				<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
				<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
	      	</div>

	      	<div class="tab-pane fade" id="masters">
	          	<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
				<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
				<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
	      	</div>

	      	<div class="tab-pane fade" id="masterstecniques">
	          	<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
				<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
				<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
	      	</div>

	      	<div class="tab-pane fade" id="designevents">
	          	<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
				<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
				<div class="col-xs-12 col-md-4 videosingle">
					<a href="">
						<img src="https://via.placeholder.com/1920x1000" class="img-responsive center-block">
						<h2>titulo</h2>
						<p>Watch video</p>
					</a>
					<div class="btn-shared">
						<a href="">Share +</a>
					</div>
				</div>
	      	</div>
	    </div>
	</div>	

	

</div>

@include ('includes.modal-sharevideos')

@endsection

@section('foot')


<script type="text/javascript">

        jQuery.ajax({
            url: 'https://www.googleapis.com/youtube/v3/search?key=AIzaSyCUs4F0YGPaUzcPFILr3SGIEexJGakarP8&channelId=UCD1WD4PW3nFaQbCgFAeb1NQ&type=video&maxResults=3&part=snippet&order=date&fields=items(id%2Csnippet(publishedAt%2Cthumbnails%2Ctitle))',
            type: 'GET',
            dataType: 'json',
            success: function(lastvideos) {
                jQuery.each(lastvideos.items, function(i, item) {

                   jQuery('.lastvideos').append("<div class='col-xs-12 col-md-4 videosingle'><a href='https://www.youtube.com/watch?v="+item.id.videoId+"' target='_blank'>" +
                            "<img class='img-responsive center-block' src='"+item.snippet.thumbnails.high.url.replace('hqdefault', 'maxresdefault')+"'>" +
                            "<h3>"+item.snippet.title+"</h3>"+
                            "<p>Watch Video</p>"+
                            "</a>"+
                            "<div class='btn-shared'><a href='' data-id-video='"+item.id.videoId+"' data-toggle='modal' data-target='#sharedvideos'>Share +</a></div>"+
                            "</div>");
                                               
                        jQuery('.btn-shared').click(function(i) {
                            var idvideo = jQuery(this).children('a').attr('data-id-video');
                            jQuery('.shareModal .modal-body').html("<ul><li><a href='https://www.facebook.com/sharer/sharer.php?u=https://www.youtube.com/watch?v="+idvideo+"' target='_blank'><i class='fab fa-facebook'></i></a></li>"+
                                "<li><a href='https://twitter.com/home?status=https://www.youtube.com/watch?v="+idvideo+"' target='_blank'><i class='fab fa-twitter-square'></i></a></li>"+
                                "<li><a href='https://pinterest.com/pin/create/link/?url=https://www.youtube.com/watch?v="+idvideo+"' target='_blank'><i class='fab fa-pinterest'></i></a></li>"+
                                "<li><a href='https://www.linkedin.com/shareArticle?mini=true&url=https://www.youtube.com/watch?v="+idvideo+"' target='_blank'><i class='fab fa-linkedin'></i></a></li>"+
                                "</ul>"
                                    );
                        });
                        

                    });
                },
            error: function(lastvideos) {
            }
        });

</script>

@endsection