{{--
     This page isn't actively used.
     Only if you type in the '/actueel' directly into the browser this will show.
     On request this page is implemented into the posts.index mapping.


--}}








@extends('layouts.master', ['view' => 'actual'])

@section('editable_content')

    <div class="image-wrapper">
        @include('layouts.partials.navigation')

        @if(isset($page->content))
            <div class="content-placeholder">

                {{-- Make extra block for the creative backgrounds in this design :p --}}
                {{--<div class="background"></div>--}}
                <div class="grey-block"></div>

                <div class="grid-row">

                    <h1 class="grid-col col-12">{{$page->translation->name}}</h1>
                    {{--<span class="right-icon styling"></span>--}}

                    {{-- Load news and seperate first newsitem --}}
                    <?php
                    $news = $page->getNews(3);
                    //                    $latestNewsItem = $news->shift();
                    $latestNewsItem = array_shift($news);
                    ?>

                    @if(isset($latestNewsItem))
                        @if(get_class($latestNewsItem) == 'Komma\Kms\Newsletters\Models\Newsletter')
                            <article
                                    class="grid-col mobile latest-news-item @if($latestNewsItem->images->count() == 0) no-image @endif">
                                <a href="/{{ $latestNewsItem->routes->first()->route  }}">
                                    <figure @if($latestNewsItem->images->count() != 0) style="background-image: url('{{$latestNewsItem->images->first()->large_image_url}}');"@endif>
                                        <span class="overlay"></span>
                                    </figure>

                                    <div class="content">
                                        <span class="highlighted">{{ KommaLang::get('highlighted') }}:</span>
                                        <h2>@lang('translations.newsletter')
                                            - {{ucfirst(trans('calender.months.'.$latestNewsItem->month))}} {{$latestNewsItem->year}}</h2>

                                        <span class="date"> {{$latestNewsItem->getDate()->format('j')}} @lang('calender.months.'.$latestNewsItem->getDate()->format('n')) {{$latestNewsItem->getDate()->format('Y')}}
            </span>
                                    </div>
                                </a>
                            </article>
                        @else
                            <article
                                    class="grid-col mobile latest-news-item @if($latestNewsItem->images->count() == 0) no-image @endif">
                                <a href="/{{
                        $latestNewsItem->translations->first()->routes->filter(function($route) use ($page) {
                            if( starts_with($route->route, $page->translation->route->route)){
                                return $route->route;
                            }
                        })->first()->route;
                    }}">
                                    <figure @if($latestNewsItem->images->count() != 0) style="background-image: url('{{$latestNewsItem->images->first()->large_image_url}}');"@endif>
                                        <span class="overlay"></span>
                                    </figure>

                                    <div class="content">
                                        <span class="highlighted">{{ KommaLang::get('highlighted') }}:</span>
                                        <h2>{{$latestNewsItem->translations->first()->name}}</h2>

                                        <span class="date">
                                {{$latestNewsItem->getDate()->format('j')}} @lang('calender.months.'.$latestNewsItem->getDate()->format('n')) {{$latestNewsItem->getDate()->format('Y')}}
            </span>
                                    </div>
                                </a>
                            </article>
                        @endif
                    @endif


                    {{-- Sideblock block --}}
                    <div class="page-impression grid-col">

                        {{-- Calender --}}
                        <section class="calender grid-col">

                            <a href="/{{$links->{$page->root->code_name.'-actual-calender'}->route }}">

                                {{-- Calender Header --}}
                                <h3>{{ KommaLang::get('home_agenda_title') }}</h3>

                                {{-- Load calender list --}}
                                @include('layouts.partials.calender.list', ['calenderItems' => $page->school->calenderItems()->with('translation')->orderBy('calender.date', 'asc')->where('active', 1)->where('calender.date', '>=', \Carbon\Carbon::today())->get()])

                                {{-- Calender Link / Footer --}}
                                <div class="link-block">
                                    <span>
                                        {{ KommaLang::get('full_agenda') }}
                                    </span>
                                </div>
                            </a>
                        </section>

                        {{-- Vacation planning link --}}
{{--                        <div class="vacation-link">--}}
{{--                            <a href="/{{$links->{$page->root->code_name.'-actual-vacation'}->route }}">--}}
{{--                                <p>{{ KommaLang::get('showVacationPlanning') }}</p>--}}
{{--                                <span>{{ KommaLang::get('readMore') }}</span>--}}
{{--                            </a>--}}
{{--                        </div>--}}

                        <span class="left-icon styling"></span>

                    </div>

                    {{-- Main content block --}}
                    <div class="grid-col main">


                        @if(isset($latestNewsItem))
                            @if(get_class($latestNewsItem) == 'Komma\Kms\Newsletters\Models\Newsletter')
                                <article
                                        class="grid-col desktop latest-news-item @if($latestNewsItem->images->count() == 0) no-image @endif">
                                    <a href="/{{ $latestNewsItem->routes->first()->route  }}">
                                        <figure @if($latestNewsItem->images->count() != 0) style="background-image: url('{{$latestNewsItem->images->first()->large_image_url}}');"@endif>
                                            <span class="overlay"></span>
                                        </figure>

                                        <div class="content">
                                            <span class="highlighted">{{ KommaLang::get('highlighted') }}:</span>
                                            <h2>@lang('translations.newsletter')
                                                - {{ucfirst(trans('calender.months.'.$latestNewsItem->month))}} {{$latestNewsItem->year}}</h2>

                                            <span class="date"> {{$latestNewsItem->getDate()->format('j')}} @lang('calender.months.'.$latestNewsItem->getDate()->format('n')) {{$latestNewsItem->getDate()->format('Y')}}
            </span>
                                        </div>
                                    </a>
                                </article>
                            @else
                                <article
                                        class="grid-col desktop latest-news-item @if($latestNewsItem->images->count() == 0) no-image @endif">
                                    <a href="/{{
                        $latestNewsItem->translations->first()->routes->filter(function($route) use ($page) {
                            if( starts_with($route->route, $page->translation->route->route)){
                                return $route->route;
                            }
                        })->first()->route;
                    }}">
                                        <figure @if($latestNewsItem->images->count() != 0) style="background-image: url('{{$latestNewsItem->images->first()->large_image_url}}');"@endif>
                                            <span class="overlay"></span>
                                        </figure>

                                        <div class="content">
                                            <span class="highlighted">{{ KommaLang::get('highlighted') }}:</span>
                                            <h2>{{$latestNewsItem->translations->first()->name}}</h2>

                                            <span class="date">
                                {{$latestNewsItem->getDate()->format('j')}} @lang('calender.months.'.$latestNewsItem->getDate()->format('n')) {{$latestNewsItem->getDate()->format('Y')}}
            </span>
                                        </div>
                                    </a>
                                </article>
                            @endif
                        @endif

                        <div class="main-placeholder">

                            {{-- Show next news items --}}
                            <div class="next-news-items">
                                <div class="header-placeholder">
                                    <h3> {{ KommaLang::get('latestNews') }} </h3>
                                    <a href="/{{$links->{$page->root->code_name.'-actual-news'}->route }}"> {{ KommaLang::get('showOlderNews') }} </a>
                                </div>
                                @include('layouts.partials.posts.newsLoop', ['news' => $news ])

                                <a class="button mobile"
                                   href="/{{$links->{$page->root->code_name.'-actual-news'}->route }}"> {{ KommaLang::get('showOlderNews') }} </a>
                            </div>


                            {{-- Photo Albums --}}
                            {{--<div class="photo-albums-row">--}}
                            {{--<div class="header-placeholder">--}}
                            {{--<h3> {{ KommaLang::get('latestPhotoAlbums') }} </h3>--}}
                            {{--<a href="/{{$links->{$page->root->code_name.'-actual-photoalbums'}->route }}"> {{ KommaLang::get('showAllAlbums') }} </a>--}}
                            {{--</div>--}}
                            {{--@include('layouts.partials.photoAlbums.photoAlbumLoop', ['photoAlbums' => $page->school->photoAlbums()->with('translations')->where('photo_albums.show_in_overview', 1)->orderBy('photo_albums.lft', 'asc')->get()->take(2) ])--}}
                            {{--</div>--}}

                            {{-- Relevant pages --}}
                            @include('layouts.partials.relevantPages', ['findChildren' => true])
                        </div>
                    </div>
                </div>
            </div>
        @endif

    </div>

@endsection

@section('extra-js')
    <script>
        $(function () {

            resizeMyPage();

            $(window).resize(
                $.throttle(100, resizeMyPage)
            );
        });

        function resizeMyPage() {
            // Main content must be at least 200px higher then the impression block
            $('.content-placeholder .main').css('min-height', $('.actual .page-impression').height() + 200);

            // Resizing for the grey block on (default)pages
            var greyHeight = $('.content-placeholder .main').height() - $('.actual .page-impression').height() + 100;
            var greyWidth = ($('.content-placeholder').width() - $('.actual .content-placeholder>.grid-row').width()) / 2 + $('.actual .page-impression').width();
            $('.grey-block').height(greyHeight).width(greyWidth);
        }
    </script>

@endsection