@extends('layouts/sidebar')

@section('title') 
  Programma gemist
@endsection

@section('breadcrumb')
	<ul class="bread_crumb">
		@if(isset($program))
		<li><a title="Programma gemist" href="{{route('gemist.programma')}}">Programma gemist</a></li>
		<li class="separator icon_small_arrow right_gray">&nbsp;</li>
		<li>{{$program->name}}</li>
		@endif
	</ul>
@endsection 

@section('content')
  @parent

  <div id="gemist_tabs" class="no_scroll clearfix">
    <ul class="tabs_navigation clearfix">
        <li class="ui-tabs-active">
          <a href="{{route('gemist.programma')}}" title="Programma gemist">
            Programma gemist
          </a>
          <span></span>
        </li>
        <li>
          <a href="{{route('gemist.fragment')}}" title="Fragment gemist">
            Fragment gemist
          </a>
          <span></span>
        </li>
      </ul>
  </div>

  <p>U kunt programma's terugluisteren tot twee weken na uitzending. Items blijven onbeperkt beschikbaar via <a href="{{route('gemist.fragment')}}">fragment gemist</a>.</p>

  <div class="page_layout clearfix">
	<div class="row grid" id="items">

            @php($i = 0)
            @foreach($programs as $program) 
            @if($i % 2 == 0)
            @if($i > 0) </ul><!--/.row--> @endif
            <ul class='blog row grid'>
            @endif
            	<?php $url = route('programma') . $program->program->url; ?>
		<?php $endStartDiff = $program->end->diff($program->start);
                      $duration = 24 * $endStartDiff->d + $endStartDiff->h; ?>
            	<li class="post card column column_1_2">
            		<div class="post_content">
            			<h2><a href="{{$url}}" title="{{$program->program->name}}">{!!$program->program->name!!}</a></h2>
				@if($program->current)
				 <a href="{{route('luister.live')}}" class="onair action_button player"><span class="fa"></span> <span>Nu live!</span></a>
				@else
            			<ul class="post_details" style="margin-top: 0;">
            				<li class="date">
            					{{ Formatter::relativeDate($program->start) }}
						van {{ $program->start->format('H:i') }} uur tot {{ $program->end->format('H:i') }} uur.
            				</li>
            			</ul>
				 <a href="{{route('luister.programma') . '/' . $program->start->format('Y/m/d/H') . '/' . $duration}}"  class="action_button player"><span class="fa fa-play"></span> <span>Luister terug</span></a>
				@endif
				 <a href="{{route('programma') . $program->program->url}}"  class="action_button"><span class="fa fa-question"></span> <span>Meer informatie</span></a>
            			<div class="clearfix"></div>
            			<p>{!! Formatter::excerpt($program->program->description, 200) !!}</p>
            		</div>
            	</li>
            
            @php($i++)
            @endforeach

            @if($i)
            </ul><!--/.row-->
            @endif

	</div><!--/.row-->
  </div>
  
@endsection

@push('scripts')
<script type="text/javascript">
var $onAirIcon = $('#items .onair span.fa');
setInterval(function() { 
	$onAirIcon.removeClass('fa-play');
	setTimeout(function() { 
		$onAirIcon.addClass('fa-play');
	}, 500);
}, 1000);
</script>
@endpush

@push('styles')
<style>
#gemist_tabs li {
  width: 50%;
}

</style>
@endpush