@extends('layouts/full')

@section('title')
    Regioagenda
@endsection

@section('breadcrumb')
    <ul class="bread_crumb">
        <li><a title="Home" href="/">Home</a></li>
        <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
        <li>Regio-agenda</li>
    </ul>
@endsection

@if(!count($events))
    @section('content')
        <div class="page_body">
            <p>Er zijn geen items in de regioagenda. Iets te melden? Mail het naar {{Html::mailto("info@nhgooi.nl")}}
                .</p>
        </div>
    @endsection
@else

    @section('content')
        @parent
        <div class="page_body">
            <nav>
                <ul class="pager">
                    <li class="action_button previous-month"><a href="#">&larr; Eerder</a></li>
                    <li class="action_button current-month"><a href="#">Komende week</a></li>
                    <li class="action_button everything"><a href="#">Toon alles</a></li>
                    <li class="action_button next-month"><a href="#">Later &rarr;</a></li>
                </ul>
            </nav>


            <div class="row">
                <div class="month" data-month="0">
                    <h4 class="box_header page_margin_top_section">Komende week</h4>
                    <ul class="blog big">

                        @php($nextWeek = new DateTimeImmutable('midnight +7 days'))
                        @php($heading = null)
                        @php($month = 0)

                        @foreach($events as $event)
                            @if($event->starts >= ($heading ? $heading : $nextWeek))
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="month" data-month="{{++$month}}">
                    <h4 class="box_header page_margin_top_section">{{$heading ? "De agenda van" : "De rest van"}} {{Formatter::fullDate($event->starts, 'm y?')}}</h4>
                    <ul class="blog big">
                        @php($heading = new DateTimeImmutable('first day of next month ' . $event->starts->format('Y-m-d')))
                        @endif

                        @php($image = isset($event->images) && count($event->images) ? $event->images[0] : null)
                        <li class="post {{$image ? "" : "no_img"}}">
                            @if($image)
                                <a href="{{$event->url}}" title="{{$event->title}}">
                                    <img src='{{$imgBase . $image->url}}' alt="{{$image->title}}">
                                </a>
                            @endif
                            <div class="post_content">
                                <h2><a href="{{$event->url}}" title="{{$event->title}}">{{$event->title}}</a></h2>
                                <ul class="post_details">
                                    <li class="category"><span href="#"
                                                               title="{{$event->region}}">{{$event->region}}</span></li>
                                    <li class="date">
                                        {{Formatter::relativeDate($event->starts, 'W d m y?')}}
                                        @if($event->ends && $event->starts != $event->ends)
                                            t/m {{Formatter::relativeDate($event->ends, 'd m y?')}}
                                        @endif
                                    </li>
                                </ul>
                                <p>{!!Formatter::excerpt($event->content, 250)!!}</p>
                                <a class="read_more" href="{{$event->url}}" title="Lees verder"><span
                                            class="arrow"></span><span>Lees verder</span></a>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>{{--row--}}
            <nav>
                <ul class="pager">
                    <li class="action_button previous-month"><a href="#">&larr; Eerder</a></li>
                    <li class="action_button current-month"><a href="#">Komende week</a></li>
                    <li class="action_button everything"><a href="#">Toon alles</a></li>
                    <li class="action_button next-month"><a href="#">Later &rarr;</a></li>
                </ul>
            </nav>
        </div>
    @endsection

    @push('styles')
        <style>
            .pager {
                display: flex;
                width: 100%;
                margin-top: 5px;
                margin-bottom: 5px;
            }

            .pager .action_button {
                flex: 1;
            }

            .pager .current-month,
            .pager .everything {
                text-align: center;
            }

            .pager .next-month {
                text-align: right;
            }
        </style>
    @endpush

    @push('scripts')
        <script type="text/javascript">
          var month = 0;
          var months = {{$month}};
          var $current = null;

          function gotoPage(month) {
            $new = (month === null) ? $(".month") : $(".month[data-month=" + month + "]");
            if ($current == null) {
              $(".month").hide("fast");
              $new.fadeIn("fast");
            } else {
              ($container = $("#contentSection")).css('height', $container.height() + "px").css('overflow', 'hidden');
              animations = $current.length;
              $current.fadeOut("fast", function () {
                $new.fadeIn("fast", function () {
                  if (--animations > 0) {
                    return;
                  }
                  curHeight = $container.height();
                  autoHeight = $container.css('height', 'auto').height();
                  $container.height(curHeight).animate({height: autoHeight}, 250, function () {
                    $container.css('height', 'auto');
                  });
                });
              });
            }

            $current = $new;
            window.location.hash = (month === null) ? "alles" : ("page-" + month);

            $previous = $(".pager .previous-month, .pager .current-month");
            if (month == 0) {
              $previous.addClass('disabled');
            } else {
              $previous.removeClass('disabled');
            }

            $next = $(".pager .next-month");
            if (month == months) {
              $next.addClass('disabled');
            } else {
              $next.removeClass('disabled');
            }
          }

          $(".pager .previous-month").click(function (e) {
            if (month > 0) gotoPage(--month);
            e.preventDefault();
          });
          $(".pager .current-month").click(function (e) {
            if (month != 0) gotoPage(month = 0);
            e.preventDefault();
          });
          $(".pager .next-month").click(function (e) {
            if (month < months) gotoPage(++month);
            e.preventDefault();
          });
          $(".pager .everything").click(function (e) {
            gotoPage(null);
            e.preventDefault();
          });
          gotoPage(0);

          window.onhashchange = function () {
            if (window.location.hash == "#alles") {
              gotoPage(null);
            } else {
              newMonth = window.location.hash.substr(6);
              if (newMonth != month) {
                gotoPage(newMonth);
              }
            }
          }
        </script>

    @endpush
@endif