@extends('layouts/sidebar')

@section('title') 
  Fragment gemist
@endsection

@section('breadcrumb')
  <ul class="bread_crumb">
    @if(isset($program))
    <li><a title="Fragment gemist" href="{{url('radio/gemist')}}">Fragment 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>
          <a href="{{route('gemist.programma')}}" title="Programma gemist">
            Programma gemist
          </a>
          <span></span>
        </li>
        <li class="ui-tabs-active col_1_2"">
          <a href="{{route('gemist.fragment')}}" title="Fragment gemist">
            Fragment gemist
          </a>
          <span></span>
        </li>
      </ul>
  </div>

  @if(isset($program)) 
    <h2>{{$program->name}}</h2>
    <p class="align-right">
      <a href="{{route('gemist')}}" title="Alle programma's" class="btn btn-info">&larr; Toon alles</a>
      <a href="{{route('programma') . $program->url}}" title="{{$program->name}}" class="btn btn-info">Programmainfo</a>
    </p>
  @else
    <p>Hele uitzendingen kunt u binnen twee weken terugluisteren via <a href="{{route('gemist.programma')}}">programma gemist</a>.
  @endif

  @if($podcasts)

  <div class="page_layout clearfix">
  <div class="row grid" id="items">
  @include('partial.podcastitems', ['podcasts' => $podcasts])
  </div><!--/.row-->
  </div>
  
  <div id="loading" style="display: none">
    <div class="progress progress-striped active">
      <div class="progress-bar"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
        <b>Meer podcasts aan het ophalen...</b>
      </div>
    </div>
  </div>

  @push('scripts')
  <script>
    var page = 1;
    var isLoading = 0;
    var $items = $('#items');  
    var $isLoading = $('#loading');  
    $(function() {
      $(window).scroll(function () {
        var $this = $(this);       
        var tweak = 10;
        
        if(!isLoading && (page > 0) && ($this.scrollTop() >= $items.height() - $this.height() - tweak))
        {
          isLoading = 1; 
          $isLoading.show();
          $.ajax({ url: document.location.pathname + '?pagina=' + (++page) })
            .always(function() { isLoading = 0; $isLoading.hide(); })
            .done(function(data) { 
              if(!data) { 
                if(page > 1) $items.append("<hr /><p>Er zijn geen podcasts (meer).</p>"); 
                page = -1; 
                return;
              }
              $newPage = $("<div />").append(data); 
              $items.append($newPage);
              $newPage.find("audio, video").mediaelementplayer({ stretching: 'responsive' }); 
            });
        }
      });
    });
  </script>
  @endpush
  @else
  
  <p>Er zijn geen fragmenten beschikbaar.</p>
 
  @endif
 
@endsection

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