@extends('layouts/master')

@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="{{url('nieuws')}}">Nieuws</a></li>
		<li class="separator icon_small_arrow right_gray">&nbsp;</li>
		<li>{{$title}}</li>
	</ul>
	@endif
@endsection

@section('content')
  @php($imgBase = 'https://nhgooi.nl')

@yield('breadcrumb')
		
	<div class="page_layout page_margin_top clearfix">
		<div class="row">
			<div class="column column_1_1">
				<div class="blog_grid">
					{{-- Desktop --}}
					<div class="grid_view">
						<div class="row">
							<div class="column">
								@if($item = current($news))
								<div class="post large">
									<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>
									<div class="slider_content_box">
										<ul class="post_details simple">
											<li class="category">
												<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}" class="over_image">{{$item->region->title}}</a>
											</li>
										</ul>
										<h2><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h2>
									</div>
								</div>
								@endif
							</div>
							<div class="column">
								@for($i = 0; ($i < 3) && ($item = next($news)); ++$i)
								<div class="row">
									<div class="post small">
										<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>
										<div class="slider_content_box">
											<ul class="post_details simple">
												<li class="category">
													<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}" class="over_image">{{$item->region->title}}</a>
												</li>
											</ul>
											<h5><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h5>
										</div>
									</div>
								</div>
								@endfor
							</div>
						</div>
					</div>
					{{-- Mobile --}}
					<div class="slider_view">
						<div class="caroufredsel_wrapper caroufredsel_wrapper_slider">
							<ul class="slider id-small_slider">
								@foreach($news as $item)
								@if($loop->index > 3) @break @endif
								<li class="slide">
									<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>
									<div class="slider_content_box">
										<ul class="post_details simple">
											<li class="category">
												<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}" class="over_image">{{$item->region->title}}</a>
											</li>
										</ul>
										<h2><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h2>
									</div>
								</li>
								@endforeach
							</ul>
						</div>
						<div id="small_slider" class='slider_posts_list_container small'>
						</div>
					</div>
				</div>
			</div>
		</div>
		{{-- Meer nieuws --}}
		<div class="row page_margin_top">
			<div class="column column_2_3">
				<h4 class="box_header">Meer nieuws</h4>
				@foreach(array_slice($news, 4, 10) 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="{{$item->title}}">{{$item->title}}</a></h2>
									<ul class="post_details">
										<li class="category">
											<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}">{{$item->region->title}}</a>
										</li>
										<li class="category">
											<a title="Thema: {{$item->theme->title}}" href="{{url('nieuws/thema/' . $item->theme->slug)}}">{{$item->theme->title}}</a>
										</li>
36										@if($item->edited && ($item->edited != $item->published))
										<li class="date edited">
											Bijgewerkt 
											@if($item->edited->format('d m') != $item->published->format('d m'))
											op {{Formatter::relativeDate($item->edited)}} 
											@endif
											om {{$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, 11, count($news))])
				</div>

				<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>
			</div>

			<div class="column column_1_3">
				<h4 class="box_header"><span class="fa fa-fire"></span> &nbsp; Meest gelezen</h4>
				@include('widgets.populairnieuws')


				<h4 class="page_margin_top box_header"><span class="fa fa-history"></span> &nbsp; Laatste podcasts</h4>
				@include('widgets.laatstepodcasts')	
				<a class="more page_margin_top" href="{{url('radio/gemist')}}">Meer Fragment Gemist</a>


				@if(!$title)
				<h4 class="page_margin_top box_header"><span class="fa fa-tag"></span> &nbsp; Recente berichten</h4>
				<?php
					$regions = [];
					$themes = [];
					foreach($news as $item) {
						$regions[$item->region->slug] = $item->region->title;
						$themes[$item->theme->slug] = $item->theme->title;
					}
				?>

				<ul class="taxonomies clearfix page_margin_top">
				@foreach($regions as $slug => $title) 
					<li><a href="{{url('nieuws/regio/' . $slug)}}" title="Meer nieuws uit regio {{$title}}"><span class="fa fa-map-marker"></span> {{$title}}</a></li>
				@endforeach
				@foreach($themes as $slug => $title) 
					<li class="active"><a href="{{url('nieuws/thema/' . $slug)}}" title="Meer nieuws met thema {{$title}}"><span class="fa fa-tag"></span> {{$title}}</a></li>
				@endforeach
				</ul>
				@endif
			</div>
		</div>
	</div>
@endsection

@section('oud')
  @if($title) <h2> <a href="{{url('nieuws')}}" title="Terug naar het nieuwsoverzicht" class="btn btn-primary"><i class="icon-arrow-small-left"></i></a> {{$title}} </h2> @endif

  <section class="page-content col-lg-8 col-md-12">
    <div id="items">
      @include('partial/newslistitems', ['news' => $news])
    </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 nieuwsberichten ophalen...</b>
        </div>
      </div>
    </div>
  </section>
@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;
						$button.attr("disabled", "disabled").text("Geen nieuws meer.");
						return;
					}

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