@extends('layouts/sidebar')

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

@section('page_class')
    news_post post_container
@endsection
@section('page_container_class')
    grey_background
@endsection
@section('site_container_class')
    grey_background
@endsection

@section('breadcrumb')
    @if($title)
        <ul class="bread_crumb" style="margin-top: -10px; margin-bottom: 4px; ">
            <li><a title="Home" href="/">Home</a></li>
            <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
            <li><a title="Nieuws" href="{{route('nieuws')}}">Nieuws</a></li>
            <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
            <li>{{$title}}</li>
        </ul>
    @endif
@endsection

@section('content')
    <div class="post_body">
        {{-- 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 auto_height">
                                <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 class="post_title"><a href="{{url($item->url)}}"
                                                          title="{{strip_tags($item->title)}}">{!!$item->title!!}</a>
                                </h2>
                                <ul class="post_details clearfix">
				    @foreach($item->tags as $tag) 
                                        <li class="detail category"><i class="fa-solid fa-location-dot"></i> <a
                                                    href="{{route('nieuws.tag', $tag->slug)}}"
                                                    title="{{$tag->titel}}">{{$tag->titel}}</a></li>
                                    @endforeach
                                    @if($item->edited && ($item->edited != $item->published))
                                        <li class="date edited">
                                            <i class="fa-regular fa-clock"></i>
                                            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">
                                            <i class="fa-regular fa-clock"></i>
                                            {{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', ['id' => 'items-more-news', 'news' => array_slice($news, 6, count($news))])
        </div>

        @if(count($news) >= 15)
            <div>
                <a class="btn auto_width" id="meer-nieuws" href="#"
                   data-loadmorenews='{"container":["#items-more-news"]}'>
                    <span class="fas fa-spinner fa-spin" id="loading"></span>
                    LAAD MEER NIEUWSBERICHTEN
                </a>
            </div>
        @endif
    </div>

@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