<?php $__env->startSection('content'); ?>
<div class="container-fluid" style="margin: 0 1em 0 1em;">
	<div class="row"> <!-- Row for player and ad -->
		<div class="col-xs-12 col-md-8 col-lg-9">
			<div class="row"> <!-- New row for player -->
				<div class="col-xs-12">
					<div class="skip" id="skipContainer" 
						<?php if(!array_key_exists(31, $event->categories)): ?>
							style="display: none;"
							<?php endif; ?>
						>
						<button id="skipButton" onclick="skipAd()">Skip Ad	</button>
					</div>
					<div id="CentraComPlayer">Loading Player...</div>
					<div id="connecting" style="text-align: center; margin-top: 140px; margin-bottom: 30px; height: 540px; top: 0px; right: 0; left: 0; position: absolute; display: none; ">
        			<h1>CONNECTING</h1>
						<h4>PLEASE WAIT</h4>
<!-- 						   	        <div class="alert"><p style="color:red;">There is a network problem at the event location. We are unable to get the stream active. Technicians are working on the issue and we will have the stream going as soon as we can. Thank you for your patience.</p></div> -->

						<i class="fa fa-refresh fa-spin" style="font-size: 1.5em; cursor: pointer;" onclick="location.reload()"></i>
					</div>
				</div>
			</div> <!-- End row for player -->
			<div class="row"> <!-- New row for description to be under player -->
				<div class="col-xs-6 col-sm-3">
					<p class="event_title"><?php echo e($event->title); ?></p>
				</div>
				<div class="col-xs-6 col-sm-6">
					<p class="event_desc"><?php echo e($event->description); ?></p>
				</div>
				<div class="col-xs-6 col-sm-3">
					<?php if($event->display_date): ?>
						<p class="event_date"><?php echo e(date('F j, Y', strtotime($event->start_time))); ?></p>
					<?php endif; ?>
				</div>
			</div> <!-- End row for description -->
		</div> <!-- End player column -->
		<div class="col-xs-12 col-md-4 col-lg-3">
			<img src="https://local10.centracom.com/images/ch10/banner_ad/<?php echo e($banner_ad->file); ?>" style="max-width: 100%; min-width: 300px; height: 600px; cursor: pointer;" onclick="window.open('<?php echo e($banner_ad->url); ?>')"/>
		</div>
	</div>
	<div class="row" >			
		<div class="col-sm-12 col-md-12 hl" style="background-color: #333;">
			<div class="suggested-title" style="">
				Suggested Events:
			</div>
<!--
				<div class="next" id="next-suggested">
					<i class="fa fa-arrow-right"></i>
				</div>
				<div class="prev" id="prev-suggested">
					<i class="fa fa-arrow-left"></i>
				</div>
-->
			<div id="owl-suggested" class="owl-carousel">
				<?php foreach($recent_events as $event2): ?>
				<div class="card-content">
					<a href="<?php echo e(url('stream/'.$event2->id.'/'.\App\Event::seo($event2->title))); ?>">
						<img class="card-img" src="<?php echo e(asset('images/ch10/banner/'.$event2->banner)); ?>" id="suggested-row" />
						<div class="card-title">
							<?php echo e($event2->title); ?>

						</div>
					</a>
				</div>
				<?php endforeach; ?>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<a href="https://centracom.com" target="_blank"><img style="margin-top: 20px;" height="70px" src="<?php echo $variable->getMedia('provided_by_CentraCom-white'); ?>"></a>
		</div>
	</div>
</div>


<?php $__env->stopSection(); ?>

<?php $__env->startSection('extras'); ?>
	<link rel="image_src" href="<?php echo e(asset('images/ch10/banner/'.$event->banner)); ?>" />
	<meta property="og:url"           content="<?php echo e(url('stream/'.$event->id.'/'.\App\Event::seo($event->title))); ?>" />
	<meta property="og:type"          content="website" />
	<meta property="og:title"         content="<?php echo e($event->title); ?>" />
	<meta property="og:description" content="<?php echo e($event->description); ?>" />
	<meta property="og:image" content="<?php echo e(asset('images/ch10/banner/'.$event->banner)); ?>" />
	<meta property="fb:app_id" content="188108276122" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
	
	<style>
		body {
			background-color: white;
			background-color: #232323;
		}
		.container-fluid {
			background-color: #232323;
/* 			background-color: white; */
			padding-top: 10px;
			margin-top: 0px;
			
		}
		.containerHelper {
			background-color: white;
			border-radius: 5px;
			background-color: #232323;
		}
		#CentraComPlayer {
			margin-top: 0px;
			margin-bottom: 15px;
			
		}
		#banner_ad {

		}
		#pbc {
			float: right;
		}
		.infoDiv {
			padding-left: 5px;
/* 			max-height: 85px; */
/* 			overflow-x: hidden; */
/* 			overflow-y: scroll; */
		}
		@media(max-width:767px) {

			#banner_ad {
			float: none;
			text-align: left;

			}
		#pbc {
			float: none;
			text-align: left;
			}
		.infoDiv {
			padding-left: 5px;
			max-height: 200px;
			overflow-x: visible;
			overflow-y: visible;
			text-align: left;
			}
		.containerHelper {
			border-radius: 0px;
			padding-top: 10px;
			}
		.container-fluid {
			background-color: #232323;
			padding-top: 0px;
			margin-top: 0px;
			}
		}
		
		.suggested-title {
			padding-left: 5px;
			max-height: 20px;
			text-transform: uppercase;
			letter-spacing: 2px;
			color: white;
			opacity: 0.6;
		}
		.noEvents {			
			opacity: .6;
		}
		.card-content {
			padding: 5px;
		}
		.card-img {
			width: 100%;
			max-width: 100%;
		}
		.card-title {
			color: white;
			opacity: 0.6;
			font-size: 1em;
			text-align: center;
		}
		.card-content a {
			text-decoration: none;
		}
		.prev {
			width: 30px;
			max-width: 20%;
			background-color: black;
			opacity: .6;
			position: absolute;
			z-index: 9999;
			text-align: center;
			cursor: pointer;
			top: 25px;
			border-right: 1px solid white;
		}
		.next {
			right: 0;
			width: 30px;
			max-width: 20%;
			background-color: black;
			opacity: .6;
			position: absolute;
			z-index: 9999;
			text-align: center;
			cursor: pointer;
			top: 25px;
			border-left: 1px solid white;
		}
		.prev i, .next i {
			margin: auto;
		}
		.next:hover, .prev:hover {
			opacity: .7;
		}
		
		.hl {
			margin-top: 20px;
		}
		
		.skip {  
	        position: absolute;
	        top: 15px;
	        left: 25px;
	        z-index: 9999;
    	}

		h1 {
			font-size: 1.5em;
			color: white;
			opacity: .5;
			font-weight: normal;

		}
		.event_title, .event_desc, .event_date {
			color: white;
			font-size: 1em;
		}
		.event_title {
			opacity: 0.6;
			text-align: left;
		}
		.event_desc {
			font-style: italic;
			opacity: 0.5;
			text-align: center;
		}
		.event_date {
			color: white;
			opacity: 0.4;
			font-size: .75em;
			text-align: right;
		}
	</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('bottom'); ?>
	<script type="text/javascript" src="/streaming/jwplayer7126/jwplayer.js"></script>
	
	<script>
		var error = false;
		var skipable = false;
		var playedIntended = false;
		var cPlayer =  jwplayer("CentraComPlayer");
		cPlayer.setup({
			skin: 'five',
			visualplaylist: false,
            controls: true,
            primary: "html5",
            autostart: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? false : true,
            image: "/uploads/Local10_logo.png",
            <?php if(!array_key_exists(6, $event->categories) && !array_key_exists(44, $event->categories)): ?>
            logo: {
        		file: '/uploads/local10_small_60opacity.png',
        		link: 'http://l10.tv',
        		hide: false
        	},
        	<?php endif; ?>
        	abouttext: "Service Provided By CentraCom",
	        aboutlink: "https://centracom.com",
	        // key: 'C/BMdFbIRUwYH9TWp5Fhq0qPjCW9K4vlbklfHfbFNnU=',
	        key: 'C/BMdFbIRUwYH9TWp5Fhq0qPjCW9K4vlbklfHfbFNnU=',
	        width: '100%',
	        aspectratio: '16:9',
	        playlist: [{
	              file: 'https://5beb169e8a234.streamlock.net:443/ad/mp4:<?php echo e($video_ad->file); ?>/playlist.m3u8',
	              image: '/uploads/Local10_logo.png',
	              title: 'Ad (1 of 1)'  
	        }],
	        sharing: {
		        sites: ['facebook','twitter', 'pinterest', 'googleplus', 'email'],
	        },
		});

		cPlayer.onPlaylistComplete(function(){
            if(!playedIntended || error){
                document.getElementById('skipContainer').style.display = 'none';
                    cPlayer.load(
                {
                  file: '<?php echo e($stream_url); ?>',
                  image: '/uploads/Local10_logo.png',
                  title: '<?php echo e($event->title); ?>'
                });
                  skipable = true;
                  playedIntended = true;
                  error = false;
                  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
                      cPlayer.play();  
           			 }
        });


		
		
		var seeking = false;
        var currentPosition = 0;
        cPlayer.onTime(function (callback) {
        currentPosition = callback.position;
        if(!skipable && currentPosition >= 20)
        {
            document.getElementById('skipContainer').style.display = '';
            
        }
        else
        {
        	if(playedIntended)
        	{
        		document.getElementById('skipContainer').style.display = 'none';
        	}
            
            
        }
        });

        cPlayer.onSeek(function(position, offset) {
            var localPosition = currentPosition;
            if(!skipable)
            {
                if(!seeking)
                {
                    seeking = true;
                    cPlayer.seek(localPosition);
                }
                else
                {
                    
                    seeking = false;
                }
            }
            
        });

        var touches = 0;
        
        cPlayer.onDisplayClick(function(){
		    if(!skipable)
		    {
		        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
		        {
		            if(cPlayer.getState() != 'playing')
		            {
		                cPlayer.play();
		                
		            }
		            else
		            {
		                if(touches != 0)
		                {
		                    if(!skipable)
		                    {
		                        window.open('<?php echo e($video_ad->url); ?>');
		                    }
		                    
		                }
		            }
		
		            touches++;
		        }
		        else
		        {
		            window.open('<?php echo e($video_ad->url); ?>');
		        }
		    }
	        });

        cPlayer.on('error', function() {
            	error = true;
            	document.getElementById('CentraComPlayer').style.visibility = "hidden";
            	document.getElementById('CentraComPlayer').childNodes[5].style.backgroundImage = '';
            	document.getElementById('CentraComPlayer').childNodes[5].style.backgroundColor = 'white';
            	document.getElementById('connecting').style.display = "";
            	if(window.innerWidth < 767)
            	{
					document.getElementById('banner_ad').style.visibility = "hidden";
            	}
                	

            	theTimeout = setTimeout(function() {
            	    cPlayer.load({
            	    	file: '<?php echo e($stream_url); ?>',
                        image: '/uploads/Local10_logo.png',
                        title: '<?php echo e($event->title); ?>'
            	    });
            	    
            	    cPlayer.play();

            	  }, 10000);
				
            	
        	});

        cPlayer.on('play', function() {
            if(typeof theTimeout !== 'undefined')
            {
            	document.getElementById('CentraComPlayer').style.visibility = "visible";
        	    document.getElementById('connecting').style.display = "none";
        	    document.getElementById('CentraComPlayer').childNodes[5].style.backgroundColor = 'black';
        	    document.getElementById('banner_ad').style.visibility = "visible";
          	  clearTimeout(theTimeout);
          	  
            }
    		
      	});
        

        var keys = [];

        document.onkeydown = function(evt){    
           var key = evt.keyCode;
           keys[key] = true;
            if(keys[65] && keys[68]){
               skipable = true;
               //alert(playerInstance.getBuffer());
               //var duration = Math.floor(playerInstance.getDuration());
               //alert(Math.floor(duration));
               //playerInstance.seek(duration);
               if(!playedIntended || error){
            	   cPlayer.load(
                           {
                             file: '<?php echo e($stream_url); ?>',
                             image: '/uploads/Local10_logo.png',
                             title: '<?php echo e($event->title); ?>'
                           });
                  skipable = true;
                  playedIntended = true;
                  error = false;
                  document.getElementById('skipContainer').style.display = 'none';
            }
               
            } 
        }
        document.onkeyup = function(evt){    
           var key = evt.keyCode;
           keys[key] = false;
        }

        function skipAd()
        {
            
            skipable = true;

            if(!playedIntended || error){
            		cPlayer.load(
                        {
                          file: '<?php echo e($stream_url); ?>',
                          image: '/uploads/Local10_logo.png',
                          title: '<?php echo e($event->title); ?>'
                        });
                  skipable = true;
                  playedIntended = true;
                  error = false;
                  document.getElementById('skipContainer').style.display = 'none';
                  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
                      playerInstance.play();
            	}
        }
	</script>
	
	
	<script>
		$(document).ready(function() {
		 
		 var suggested = $("#owl-suggested").owlCarousel({
			 	autoPlay : 20000,
				pagination: false
			 });


	 	$("#next-suggested").click(function(){
	   	 	suggested.trigger('owl.next');
	  	});
	  	$("#prev-suggested").click(function(){
	  		suggested.trigger('owl.prev');
	  	});

		//navHeight();
		 
		});


		function navHeight()
		{
			var liveHeight = $('#suggested-row').height();

			var nextLive = document.getElementById('next-suggested');
			var prevLive = document.getElementById('prev-suggested');
			nextLive.style.height = liveHeight + 'px';
			prevLive.style.height = liveHeight + 'px';
			nextLive.childNodes[1].style.marginTop = liveHeight/2.5 + "px";
			prevLive.childNodes[1].style.marginTop = liveHeight/2.5 + "px";

		}
	</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('residential.local10.stream_template', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>