@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"><i class="fa-solid fa-chevron-right"></i></li>
            <li>{{$title}}</li>
        </ul>
    @endif
@endsection

@section('content')
    <div class="page_body margin_bottom">
        <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
    </div>

@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