@extends('layouts/sidebar')

@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="action_button previous-month"><a href="#">&larr; Eerder</a></li>
    <li class="action_button current-month"><a href="#">Komende week</a></li>
    <li class="action_button everything"><a href="#">Toon alles</a></li>
    <li class="action_button next-month"><a href="#">Later &rarr;</a></li>
  </ul>
</nav>


<div class="row">
	<div class="month" data-month="0">
		<h4 class="box_header page_margin_top_section">Komende week</h4>
		<ul class="blog big">

	@php($imgBase = 'https://nhgooi.nl')
	@php($nextWeek = new \DateTimeImmutable('midnight +7 days'))
	@php($heading = null) 
	@php($month = 0)

	@foreach($events as $event) 
		@if($event->starts >= ($heading ? $heading : $nextWeek))
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="month" data-month="{{++$month}}">
		  <h4 class="box_header page_margin_top_section">{{$heading ? "De agenda van" : "De rest van"}} {{Formatter::fullDate($event->starts, 'm y?')}}</h4>
		  <ul class="blog big">
		  @php($heading = new \DateTimeImmutable('first day of next month ' . $event->starts->format('Y-m-d')))
		@endif

		@php($image = isset($event->images) && count($event->images) ? $event->images[0] : null)
		<li class="post {{$image ? "" : "no_img"}}">
			@if($image)
			<a href="{{$event->url}}" title="{{$event->title}}">
				<img src='{{$imgBase . $image->url}}' alt="{{$image->title}}">
			</a>
			@endif
			<div class="post_content">
				<h2><a href="{{$event->url}}" title="{{$event->title}}">{{$event->title}}</a></h2>
				<ul class="post_details">
					<li class="category"><span href="#" title="{{$event->region}}">{{$event->region}}</span></li>
					<li class="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
					</li>
				</ul>
				<p>{!!Formatter::excerpt($event->content, 250)!!}</p>
				<a class="read_more" href="{{$event->url}}" title="Lees verder"><span class="arrow"></span><span>Lees verder</span></a>
			</div>
		</li>
	@endforeach
		</ul>
	</div>
</div>{{--row--}}
<nav>
  <ul class="pager">
    <li class="action_button previous-month"><a href="#">&larr; Eerder</a></li>
    <li class="action_button current-month"><a href="#">Komende week</a></li>
    <li class="action_button everything"><a href="#">Toon alles</a></li>
    <li class="action_button next-month"><a href="#">Later &rarr;</a></li>
  </ul>
</nav>
@endsection

@push('styles')
<style>
	.pager {
		display: flex;
		width: 100%;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.pager .action_button {
		flex: 1;
	}

	.pager .current-month,
	.pager .everything {
		text-align: center;
	}
    
	.pager .next-month {
		text-align: right;
	}
</style>
@endpush

@push('scripts')
<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
@endpush