<?php $players = []; ?>

@foreach($page->content->translation->description as $key => $block)
    @if($block->status && isset($block->code_name) && $block->code_name == '')

        @if(isset($block->view) && $block->view != '')
            @include($block->view, ['dynamicContent' => $block, 'order' => $key])
        @else
            @include('layouts.partials.dynamic.'.$block->typeSlug, ['dynamicContent' => $block, 'order' => $key])
        @endif

        <?php if($block->typeSlug == 'video-block') $players[$key] = $block; ?>
    @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',
                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