<?php $players = []; ?>

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

        <?php if(isset($block->view) && $block->view != ''): ?>
            <?php echo $__env->make($block->view, ['dynamicContent' => $block, 'order' => $key], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
        <?php else: ?>
            <?php echo $__env->make('layouts.partials.dynamic.'.$block->typeSlug, ['dynamicContent' => $block, 'order' => $key], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
        <?php endif; ?>

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

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

                <?php foreach($players as $key => $player): ?>
        var player<?php echo $key; ?>;
        <?php endforeach; ?>

        function onYouTubePlayerAPIReady() {
            <?php foreach($players as $key => $player): ?>
                player<?php echo $key; ?> = new YT.Player('ytplayer-<?php echo $key; ?>', {
                height: '360',
                width: '640',
                videoId: '<?php echo $player->youtube; ?>',
                playerVars: {
                    modestbranding: 1,
                    showinfo: 0,
                    rel: 0,
                    <?php if(isset($player->autoPlay) && $player->autoPlay): ?>
                    controls: 0
                    <?php endif; ?>
                },
                events: {
                    'onStateChange': onPlayerStateChange<?php echo $key; ?>,
                    <?php if(isset($player->autoPlay) && $player->autoPlay): ?>
                    'onReady': onPlayerReady,
                    <?php endif; ?>
                }
            });
            <?php endforeach; ?>
        }

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


        function onPlayerStateChange<?php echo $key; ?>(state) {

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

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