@extends('layouts/full')

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


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

@section('content')
        <p class='bouwmee'>Ook jouw foto op deze pagina? <a href="mailto:beelden@nhgooi.nl">Mail naar beelden@nhgooi.nl!</a></p>

	<div id="items">
		@include('partial/imageslist_small', ['images' => $images])
	</div>

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

@endsection

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

	$('#meer-beelden').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 beelden (meer).</p>"); 
						$button.remove();
						return;
					}

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

