@extends('layouts.base')

@section('editable_content')
    <section class="project-detail">
        @include('layouts.partials.project.projectHeader')

        <?php
        $dynamicBlocks = json_decode($data->content->dynamic);
        $players = [];
        ?>

        <div class="dynamic-content content-container">
            @foreach($dynamicBlocks as $key => $block)
                @if($block->status)
                    @include('layouts.partials.element.'.$block->typeSlug, ['dynamicContent' => $block, 'order' => $key])

                    @if($block->typeSlug == 'video-block')
                        <?php
                        $players[$key] = $block;
                        ?>
                    @endif

                @endif
            @endforeach
            @if(count($players) != 0 )

                <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.

                            @foreach($players as $key => $player)
                    var player{{$key}};

                    @endforeach

                    function onYouTubePlayerAPIReady() {

                        @foreach($players as $key => $player)
                            player{{$key}} = new YT.Player('ytplayer-{{$key}}', {
                            height: '360',
                            width: '640',
                            host: 'https://www.youtube-nocookie.com',
                            videoId: '{{ $player->youtube }}',
                            playerVars: {
                                modestbranding: 1,
                                showinfo: 0,
                                rel: 0,
                                @if(isset($player->autoPlay) && $player->autoPlay)
                                controls: 0
                                @endif
                            },
                            events: {
                                'onStateChange': onPlayerStateChange{{$key}},
                            @if(isset($player->autoPlay) && $player->autoPlay)
                                'onReady': onPlayerReady,
                            @endif
                            }
                        });
                        @endforeach

                    }

                    @foreach($players as $key => $player)
                    document.querySelector('#player{{$key}} .video-overlay').addEventListener('click', function () {
                        player{{$key}}.playVideo();
                        this.classList.add('hide');
                    }, false);


                    function onPlayerStateChange{{$key}}(state) {

                        if(state.data === YT.PlayerState.ENDED || state.data === YT.PlayerState.PAUSED){
                            document.querySelector('#player{{$key}} .video-overlay').classList.remove('hide');
                        }
                    }
                    @endforeach

                    function onPlayerReady(event) {
                        event.target.playVideo();
                    }

                </script>
            @endif

        </div>

        @if(isset($data->content->reference) && $data->content->reference != '')
            @include('layouts.partials.project.reference')
        @endif

        <div class="sticky-previous-next">
            <div class="placeholder">
                <a class="previous"
                   href="/{{$data->previousNext['previous']->route}}"><span>{{$data->previousNext['previous']->name}}</span></a>
                <a class="over" href="/our-work"><span></span></a>
                <a class="next"
                   href="/{{$data->previousNext['next']->route}}"><span>{{$data->previousNext['next']->name}}</span>
                </a>
            </div>
        </div>
        <div class="nosticky-previous-next">
            <div class="placeholder">
                <a class="previous"
                   href="/{{$data->previousNext['previous']->route}}"><span>{{$data->previousNext['previous']->name}}</span></a>
                <a class="over" href="/our-work"><span></span></a>
                <a class="next"
                   href="/{{$data->previousNext['next']->route}}"><span>{{$data->previousNext['next']->name}}</span>
                </a>
            </div>
        </div>
    </section>
@endsection