@extends('layouts.master')

@section('editable_content')

    {{-- If Image is added in KMS (home_slogan) it will show up as hero image --}}
    <section class="hero-image streamer"
             @if(isset($page->content->home_slogan) && $page->content->home_slogan->images->count() != 0) style="background-image: url('{{$page->content->home_slogan->images->first()->large_image_url}}');" @endif>
        <div class="placeholder">
            <div class="grid-row">
                @if(isset($page->content->home_slogan))
                    {{ $page->content->home_slogan->translation->description }}
                @else
                    <h1>Voeg een tekstblok toe met<br/>code_name 'home_slogan'</h1>
                    <p>Titel + Omschrijving + 1 afbeelding. In de titel kan eventueel &lt;br/&gt; gezet<br/>worden om
                        een enter te maken.
                    </p>
                @endif
            </div>
        </div>
    </section>

    <section class="intro">
        @include('layouts.partials.introRow')
    </section>

    <section class="home-video-news">
        <div class="grid-row">
            <div class="video">
                @if(isset($page->content->home_video))
                    {{$page->content->home_video->translation->description}}

                    <div class="dynamic-block video-block" id="player">
                        <div class="video-wrapper">
                            <div class="video-overlay"
                                 @if($page->content->home_video->images->count() == 0)
                                 style="background-image: url('https://img.youtube.com/vi/{{$page->content->home_video->translation->name}}/hqdefault.jpg');"
                                 @else
                                 style="background-image: url('{{$page->content->home_video->images->first()->large_image_url}}');"
                                    @endif
                            >
                                <div class="button">
                                    <img alt="youtube-play-buton" src="/img/youtubeButton.svg"/>
                                </div>
                            </div>
                            <div id="ytplayer"></div>
                        </div>
                    </div>

                @endif
            </div>
            <div class="latest-news">
                <h2>Laatste nieuws</h2>
                @if($posts->count() == 0)
                    <p>Geen nieuws beschikbaar</p>
                @else
                    <div class="post">
                        {{ $posts->first()->translation->meta_description }}
                    </div>
                    <div class="buttons">
                        <a href="/{{$posts->first()->translation->route->route}}">
                            Lees meer <img id="contact-icon" class="svg" src="/img/icons/arrow_right_icon_blue.svg"/>
                        </a>
                        <a class="news-link" href="/{{$links->news->route}}">
                            Alle nieuwsberichten <img id="contact-icon" class="svg"
                                                      src="/img/icons/arrow_right_icon_blue.svg"/>
                        </a>
                    </div>
                    {{--{{ dde($posts->first()) }}--}}
                @endif
            </div>
        </div>
    </section>

    <section class="home-reference">
        <div class="grid-row">
            @if(isset($page->content->home_reference))
                <div class="references-block">
                    <div class="reference">
                        <div class="reference-title">
                            <h3>{{$page->content->home_reference->translation->name}}</h3>
                        </div>
                        <div class="reference-body">
                            <p>{{$page->content->home_reference->translation->description}}</p>
                        </div>
                    </div>
                    <a class="reference-link" href="/{{$links->references->route}}">
                        Lees alle referenties <img id="contact-icon" class="svg"
                                                   src="/img/icons/arrow_right_icon_blue.svg"/>
                    </a>
                </div>
            @endif
        </div>
    </section>

    <section class="discover">
        @include('layouts.partials.discoverRow')
    </section>

    <section class="cta">
        @include('layouts.partials.cta')
    </section>

@endsection

@section('extra-js')

    @if(isset($page->content->home_video))

        <script>
            // Load the IFrame Player API code asynchronously.
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/player_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            // Replace the 'ytplayer' element with an <iframe> and
            // YouTube player after the API code downloads.

            var player = null;

            function loadYoutubePlayer() {
                player = new YT.Player(('ytplayer'), {
                    height: '360',
                    width: '640',
                    videoId: '{{$page->content->home_video->translation->name}}',
                    host: 'https://www.youtube-nocookie.com',
                    playerVars: {
                        modestbranding: 1,
                        showinfo: 0,
                        rel: 0,
                    },
                    events: {
                        'onReady': onPlayerReady,
                    }
                });
            }


            document.querySelector('#player .video-overlay').addEventListener('click', function () {
                if (player === null) {
                    loadYoutubePlayer();
                }

                this.classList.add('hide');

            }, false);


            function onPlayerReady(event) {
                event.target.playVideo();
            }
        </script>

    @endif
@endsection