<?php $players = []; ?>

<div class="dynamic-content">
    <?php foreach($page->translation->description as $key => $block): ?>
        <?php if($block->status): ?>
            <?php echo $__env->make('layouts.partials.dynamic.'.$block->typeSlug, ['dynamicContent' => $block, 'order' => $key], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

            <?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; ?>
</div>