@extends('layouts.empty')

@section('content')
   <a href="javascript:window.close();" class="close"><span class='fa fa-times fa-fw'></span> Venster sluiten</a>
   <p class="logo"><a href="{{ url('/') }}"><img src="{{ url( 'images/logo.png' )}}"></a></p>

@if(false && $isStream)
   <p>Wegens een technisch probleem is NH Gooi momenteel niet via Internet te beluisteren. Onze excuses voor het ongemak.</p>
   <p>In Hilversum, Huizen en de BEL-gemeenten zijn wij te ontvangen op 92.0 FM of 105.1 FM.</p>
@else
					<div class="now-playing-header">
						<div class="title"></div>
						<div class="artist"></div>
@if(!$isStream)
						<div class="controls">
							<ul>
								<li class="program-link">
									<a href='{{route('luister.live')}}' title="Luister naar NH Gooi Radio">
										<span class="fa fa-music"></span>
										<label>Luister live</label>
									</a>	
								</li>
							</ul>
						</div>
@endif
					</div>

<div class="player">
   <p><b>U luistert nu naar</b> {!!$content!!}</p>
@if(isset($tabs))
   <p>
     @foreach($tabs as $link => $caption)
     <a class="tab {{$link == '#' ? "active" : ""}}" href="{{$link}}">{{$caption}}</a>
     @endforeach
   </p>
   @endif
   <p>
   <audio controls autoplay="true">
     <source src="{{$source}}" type="audio/mp3" />
   </audio>
   </p>

     <p>
     @if(!$isStream && $canDownload) 
        <a href="{{$source}}" class="action_button">
          <span class="fa fa-download"></span><span>Download .mp3-bestand</span>
        </a>
     @endif
     @if(!$isStream)
        <a href="{{route('luister.live')}}" class="action_button">
          <span class="fa fa-music"></span><span>Schakel naar live-uitzending</span>
        </a>
     @endif
     </p>
@endif
</div>
@endsection


@push('styles')
  <style>
    body { padding: 10px; }
    .close {
        float: right;
    }

    p {
      padding: 5px; 
      margin: 0; 
    }

    .action_button {
        float: none;
    }
 
    .logo { 
      width: 90%;
      max-width: 300px;
      margin: auto;
    }

        .logo img {
            width: 100%;
        }

    .now-playing {
      color: black;
    }   

    .player { 
        border: outset 2px #21BBEF; 
        border-radius: 8px;
        margin-top: 10px;
        padding: 10px;
    }
        .player p { 
          color: black;
        }
        .player .tab {
            color: black;
            padding: 5px;
            border-bottom: solid 4px transparent;
        } 
        .player .tab.active {
            border-bottom: solid 4px #5796C8;
         }
        .player .tab:hover {
            text-decoration: none;
            border-bottom: solid 4px #21BBEF;
         }
  </style>
@endpush

@push('scripts')
		<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
		<script>
			function updateOnAir() {
				$.ajax({
					url: '{{route('onair')}}', 
					success: function(data) {
						$(document).trigger('onAirUpdated', data);
					}
				});
			}
			$(updateOnAir);
			var onAirUpdater = setInterval(updateOnAir, 5000);
var $nowPlaying = { 
	container: $(".now-playing-header").hide(),
	title: $(".now-playing-header .title"),
	artist: $(".now-playing-header .artist"),
};
$(document).on('onAirUpdated', function(evt, data) {
	if(data.inProgram) {
		$nowPlaying.title.text(data.program.name).attr('title', data.program.name);
		$nowPlaying.artist.text(data.program.tagline);
	} else {
		$nowPlaying.title.text(data.current.title).attr('title', data.current.title);
		$nowPlaying.artist.text(data.current.artist).attr('title', data.current.artist);
	}
	$nowPlaying.container.slideDown();
});
</script>
@endpush

@include('widgets.mediaplayer')
