@extends('layouts/full')

@section('title')
  Fragment gemist
@endsection


@section('content')
  <div class="">
    <div class="row news_post post_container">
      <div class="col-12">
        <ul class="bread_crumb">
          <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>
        </ul>
        <div id="gemist_tabs" class="no_scroll clearfix">
          <div class="tabs fit_content">
            <h4 class="box_header active">
              <a href="{{route('gemist.programma')}}" title="Programma gemist">
                <span>Programma gemist</span>
              </a>
            </h4>
            <h4 class="box_header">
              <a href="{{route('gemist.fragment')}}" title="Fragment gemist">
                <span>Fragment gemist</span>
              </a>
            </h4>
          </div>
        </div>
      </div>
      <div class="col-12 col-md content_container">
        <div class="box full-width">
        </div>
      </div>

      <div class="col-12 col-md-auto sidebar">
          @if ((isset($podcasts) && $podcasts))
            <div data-tabs>
              <div class="tabs">
                @if (isset($podcasts) && $podcasts)
                  <h4 data-tab-content-id="tab_most_read"
                      class="box_header extra_small flex-grow-1 active"><span>Meest gelezen</span>
                  </h4>
                @endif
              </div>
              @if (isset($podcasts) && $podcasts)
                <div id="tab_most_read" class="box tab_content active">
                  @include('partial/newslist_small', ['id' => 'items-podcasts', 'news' => $podcasts])
                  <a class="btn auto_width" id="meer-nieuws-most-read" href="#"
                     data-loadmorenews='{"container":["#items-podcasts"]}'>
                    <span class="fas fa-spinner fa-spin" id="loading"></span>
                    Klik hier voor meer nieuws
                  </a>
                </div>
              @endif
            </div>
          @endif

          <div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
            - Advertentie -
          </div>
          <div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
      </div>
    </div>
  </div>

  @if(isset($program))
    <h2>{{$program->name}}</h2>
    <p class="intro">
    {!! $program->description !!}
    </p>
  @endif

  @if($podcasts)

  <div class="page_layout clearfix">
  <div class="row grid" id="items">
  @include('partial.podcastdirectitems', ['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