@extends('layouts/full')

@section('title')
  Regioagenda
@endsection

@section('content')
@parent

@if(!count($events))
<p>Er zijn geen items in de regioagenda. Iets te melden? Mail het naar {{Html::mailto("info@6fm.nl")}}.</p> 
@else

<nav>
  <ul class="pager">
    <li class="previous-month"><a href="#">&larr; Eerder</a></li>
    <li class="current-month"><a href="#">Komende week</a></li>
    <li class="everything"><a href="#">Toon alles</a></li>
    <li class="next-month"><a href="#">Later &rarr;</a></li>
  </ul>
</nav>

<div class="month" data-month="0">
<h2>Komende week</h2>

@php($nextWeek = new \DateTimeImmutable('midnight +7 days'))
@php($heading = null) 
@php($month = 0)

@foreach($events as $event) 
@if($event->starts >= ($heading ? $heading : $nextWeek))
</div>
<div class="month" data-month="{{++$month}}">
  <h2>{{$heading ? "De agenda van" : "De rest van"}} {{Formatter::fullDate($event->starts, 'm y?')}}</h2>
  @php($heading = new \DateTimeImmutable('first day of next month ' . $event->starts->format('Y-m-d')))
@endif
<div class='row details' data-index="{{$month}}">
    @php($image = isset($event->images) && count($event->images) ? $event->images[0] : null)
    <div class='col-lg-3 @if(!$image) hidden-sm hidden-xs @endif'>
      <div class="news-item news-item-small wow fadeInDown">
        <div class="thumb">
          <a href="{{$event->url}}" rel="bookmark" title="{{$event->title}}">
            <img style="width: 100%;" src="{{ $image ? url( $image->url ) : url( 'images/noimage.png') }}" alt="{{$image ? $image->title : $event->title}}" title="{{$image ? $image->title : $event->title}}"/> 
          </a>
        </div><!--/.thumb-->
      </div><!--/.wow-->
    </div><!--/.col-->
    <div class='col-lg-9'>
      <h2><a href="{{$event->url}}">{{$event->title}}</a></h2>
      <div class="event-date">
        {{Formatter::relativeDate($event->starts, 'W d m y?')}} @if($event->ends && $event->starts != $event->ends) t/m {{Formatter::relativeDate($event->ends, 'd m y?')}} @endif
      </div>
      <b>{{$event->region}}.</b> {!!Formatter::excerpt($event->content, 250)!!}
      <p><a href="{{$event->url}}" class="btn btn-info">Lees verder</a>
    </div><!--/.col-->
  </div><!--/.row-->
@endforeach
</div>

<nav>
  <ul class="pager">
    <li class="previous-month"><a href="#">&larr; Eerder</a></li>
    <li class="current-month"><a href="#">Komende week</a></li>
    <li class="everything"><a href="#">Toon alles</a></li>
    <li class="next-month"><a href="#">Later &rarr;</a></li>
  </ul>
</nav>

<script type="text/javascript">
  var month = 0;
  var months = {{$month}};
  var $current = null;

  function gotoPage(month) {
    $new = (month === null) ? $(".month") : $(".month[data-month=" + month + "]");
    if($current == null) {
      $(".month").hide("fast");
      $new.fadeIn("fast");
    } else {
      ($container = $("#contentSection")).css('height', $container.height() + "px").css('overflow', 'hidden');
      animations = $current.length;
      $current.fadeOut("fast", function() {
        $new.fadeIn("fast", function() {
          if(--animations > 0) { return; }
          curHeight = $container.height();
          autoHeight = $container.css('height', 'auto').height();
          $container.height(curHeight).animate({ height: autoHeight }, 250, function() { 
            $container.css('height', 'auto');
          });
       });
      });
    }

    $current = $new;
    window.location.hash = (month === null) ? "alles" : ("page-" + month);
  
    $previous = $(".pager .previous-month, .pager .current-month");
    if(month == 0) { $previous.addClass('disabled'); } else { $previous.removeClass('disabled'); }

    $next = $(".pager .next-month");
    if(month == months) { $next.addClass('disabled'); } else { $next.removeClass('disabled'); }
  }

  $(".pager .previous-month").click(function(e) { if(month > 0) gotoPage(--month); e.preventDefault(); });
  $(".pager .current-month").click(function(e) { if(month != 0) gotoPage(month = 0); e.preventDefault(); });
  $(".pager .next-month").click(function(e) { if(month < months) gotoPage(++month); e.preventDefault(); });
  $(".pager .everything").click(function(e) { gotoPage(null); e.preventDefault(); });
  gotoPage(0);

  window.onhashchange = function() { 
    if(window.location.hash == "#alles") { 
      gotoPage(null); 
    } else {
      newMonth = window.location.hash.substr(6);
      if(newMonth != month) { 
        gotoPage(newMonth); 
      }
    }
  }
</script>

@endif
@endsection