@extends('layouts/sidebar')

@section('title') 
  @if($title) {{$title}} - Nieuws @endif
@endsection


@section('breadcrumb')
	@if($title)
	<ul class="bread_crumb" style="margin-top: -10px; margin-bottom: 4px; ">
		<li><a title="Nieuws" href="{{route('nieuws')}}">Nieuws</a></li>
		<li class="separator icon_small_arrow right_gray">&nbsp;</li>
		<li>{{$title}}</li>
	</ul>
	@endif
@endsection

@section('content')
	{{-- Nieuws komt met 15 berichten per pagina. Deel op in 3 x 2-breed + 3 x 3-breed --}}
	@foreach(array_slice($news, 0, 6) as $item)
		@if($loop->index % 2 == 0)
		<div class="row">
		@endif
			<div class="column column_1_2">
				<ul class="blog">
					<li class="post">
						<a href="{{url($item->url)}}" title="{{$item->title}}">
							@if($item->video)
							<span class="icon video"></span>
							@elseif($item->images && count($item->images) > 1)
							<span class="icon gallery"></span>
							@endif
							<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='img'>
						</a>
						<h2><a href="{{url($item->url)}}" title="{{strip_tags($item->title)}}">{!!$item->title!!}</a></h2>
						<ul class="post_details">
							@if($item->region)
							<li class="category">
								<a title="Regio: {{$item->region->title}}" href="{{route('nieuws.regio', ['region' => $item->region->slug])}}">{{$item->region->title}}</a>
							</li>
							@endif
							@if($item->theme)
							<li class="category">
								<a title="Thema: {{$item->theme->title}}" href="{{route('nieuws.thema', ['theme' => $item->theme->slug])}}">{{$item->theme->title}}</a>
							</li>
							@endif
36							@if($item->edited && ($item->edited != $item->published))
							<li class="date edited">
								Bijgewerkt:
								@if($item->edited->format('d m') != $item->published->format('d m'))
								{{Formatter::relativeDate($item->edited)}} om
								@endif
								{{$item->edited->format('H:i')}} uur
							</li>
							@else
							<li class="date">
								{{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}} uur
							</li>
							@endif
						</ul>
						<p>{!!Formatter::excerpt($item->content, 150)!!}</p>
						<a class="read_more" href="{{url($item->url)}}" title="Lees verder"><span class="arrow"></span><span>Lees verder...</span></a>
					</li>
				</ul>
			</div>
		@if($loop->index % 2 == 1)
		</div>
		@endif
	@endforeach

	<div id="items">
		@include('partial/newslist_small', ['news' => array_slice($news, 6, count($news))])
	</div>

	@if(count($news) >= 15)
	<div>
		<button class="more page_margin_top" type="button" id='meer-nieuws'>
			<span class="fa-2x fas fa-spinner fa-spin" id="loading"></span>
			LAAD MEER NIEUWSBERICHTEN
		</button>
	</div>
	@endif

@endsection

@push('scripts')
<script>
	var nextPage = 2;
	var isLoading = 0;
	var $isLoading = $('#loading').hide();

	$('#meer-nieuws').click(function(e) {
		e.preventDefault();
		if(!isLoading) {
			// Set flag and update UI
			isLoading = 1;
			$isLoading.show();
			var $button = $(this).attr("disabled", "disabled");
	
			// Fire request for the next page
			$.ajax({ url: document.location.pathname + '?pagina=' + nextPage })
				.always(function() { 
					// Whether success or failure, update the UI again
					isLoading = 0; 
					$isLoading.hide(); 
					$button.removeAttr("disabled");
				})
				.done(function(data) { 
					if(!data) { 
						// When no data was returned, disable the button permanently
						page = -1;
                				$('#items').append("<hr /><p>Er zijn geen nieuwsberichten (meer).</p>"); 
						$button.remove();
						return;
					}

					$('#items').append(data); 
					++nextPage;
				});
		}
	});
</script>
@endpush