@extends('layouts.master')

@section('editable_content')

    <div class="ajax-container our-studio-detail" id="{{$page->code_name}}" data-color-type="{{$page->colorType}}">

        <nav class="sub-menu">
            <ul>
                @foreach($page->siblings as $serviceMenuItem)
                    <li class=" @if($serviceMenuItem->code_name == $page->code_name) active @endif ">
                        <a data-pjax data-code-name="ourStudio" href="/{{$links->{$serviceMenuItem->code_name}->route }}">
                            {{--{{$links->{$serviceMenuItem->code_name}->name }}--}}
                        </a>
                    </li>
                @endforeach
            </ul>
        </nav>

        <div class="title">
            <div class="pre-title loaded-animation">
                <a data-pjax data-code-name="ourStudio" href="/{{$links->ourStudio->route}}">{{$links->ourStudio->name}}</a>
                <p>{{$page->letter}}{{ KommaLang::get('discover') }}</p>
            </div>
            <div class="main-title loaded-animation">
                <h1>
                    {{$page->translation->name}}
                </h1>
            </div>
        </div>

        {{--<a class="backToOverview" href="/{{$links->ourStudio->route}}">@lang('translations.backToOverview')</a>--}}

        <section class="content our-studio-block loaded-animation">

            @if($page->content->translation->description != '[]')
                @include('layouts.partials.dynamic.dynamicBlocks')
            @endif

        </section>
        <section class="image animation-part our-studio-block {{$page->code_name}}"
                 style="background-image: url('/img/{{$page->code_name}}.jpg');">
            <div class="shape ">
                @if(in_array($page->code_name, ['creativity']))
                    @include('layouts.svg.triangle')
                @elseif(in_array($page->code_name, ['ourFactory']))
                    @include('layouts.svg.square')
                @elseif(in_array($page->code_name, ['ourTeam']))
                    @include('layouts.svg.hexagon')
                @endif
            </div>

            <div class="placeholder">
                {{--<a href="">--}}
                <span class="youtube-play">
                    <img alt="youtube-play-button" src="/img/youtubeButton.svg"/>
                </span>

                {{--</a>--}}
            </div>
        </section>

        <a data-pjax data-code-name="ourStudio" class="next-studio-item" href="/{{$links->{$page->next->code_name}->route}}">
            <p>{{$links->{$page->next->code_name}->name}}</p>
            <span></span>
        </a>


        <section class="video-pop-up">
            <div id="ytplayer"></div>
        </section>

        <span class="close-button">
            <div class="left-corner corner">@include('layouts.svg.corner')</div>
            <div class="right-corner corner">@include('layouts.svg.corner')</div>
            x
        </span>


        <script>

            function onYouTubePlayerAPIReady() {
                player = new YT.Player('ytplayer', {
                    height: '360',
                    width: '640',
                    videoId: '{{ \Config::get('business.video_'.$page->code_name) }}',
                    playerVars: {
                        modestbranding: 0,
                        showinfo: 0,
                        rel: 0,
                        disablekb: 1
                    },
                    events: {
                        'onStateChange': onPlayerStateChange,
                    }
                });
            }

            if(document.querySelector('.our-studio-detail') != null ){

                document.querySelector('.our-studio-detail .image').addEventListener('click', function () {
                    document.querySelector('.our-studio-detail .video-pop-up').classList.add('active');
                    document.querySelector('body').classList.add('inProjects');
                    document.querySelector('.our-studio-detail .close-button').classList.add('show');
                    document.querySelector('.our-studio-block.content').classList.add('in-active');
                    document.querySelector('.our-studio-block.image').classList.add('in-active');
                    player.playVideo();
                }, false);

                document.querySelector('.our-studio-detail .close-button').addEventListener('click', function () {
                    closeVideo();
                    player.pauseVideo();
                }, false);

                document.querySelector('.our-studio-detail .video-pop-up').addEventListener('click', function () {
                    if (event.target.tagName == 'SECTION') {
                        closeVideo();
                        player.pauseVideo();
                    }
                }, false);

                document.querySelector('.our-studio-detail').addEventListener('click', function () {
                    if (event.target.tagName == 'BODY' || event.target.tagName == 'ASIDE') {
                        closeVideo();
                        player.pauseVideo();
                    }
                }, false);

            }

            function onPlayerStateChange(state) {

                if (state.data === YT.PlayerState.ENDED) {
                    closeVideo();
                }
            }

            function closeVideo() {
                document.querySelector('.our-studio-detail .video-pop-up').classList.remove('active');
                document.querySelector('body').classList.remove('inProjects');
                document.querySelector('.our-studio-detail .close-button').classList.remove('show');
                document.querySelector('.our-studio-block.content').classList.remove('in-active');
                document.querySelector('.our-studio-block.image').classList.remove('in-active');
            }

        </script>

    </div>

@endsection