<?php
    $locations = \App\Repositories\LocationRepository::getHeroData();
?>
<section class="locations" style="--locations-bg: url(<?php echo e($block->image('image')); ?>);">
    <div class="locations__video-wrap">
        <video class="location-video" src="<?php echo e($block->file('video')); ?>" autoplay="true" loop="true" muted="muted" poster="<?php echo e($block->image('image')); ?>"></video>
    </div>
    <div class="container">
        <div class="locations__inner">
            <div class="locations__selector">
                <div id="selector-marker" class="locations__selector-marker"></div>
                <?php $__currentLoopData = $locations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $location): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php
                        $locationPageRoute = route('location.show', [$location->slug]);
                    ?>
                <a class="locations__place"
                   href="<?php echo e($locationPageRoute); ?>"
                     data-img="<?php echo e($location->image('video_poster', 'flexible')); ?>"
                     data-video="<?php echo e($location->file('video')); ?>"
                     data-positions="<?php echo e($location->getVacancyCount()); ?>"
                     data-description="<?php echo e($location->description); ?>"
                     data-prepositional="<?php echo e($location->title_prepositional); ?>"
                   rel="noopener"
                >
                    <div class="locations__city"><?php echo e($location->title); ?></div>
                    <div class="locations__country"><?php echo e($location->country); ?></div>
                </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <div class="locations__page">
                <header class="locations__header">
                    <h1><?php echo app('translator')->get('messages.Work with us'); ?> <span class="js-location-title"><?php echo app('translator')->get('messages.around the world'); ?></span></h1>
                </header>
                <a href class="locations__positions-num js-location-pos-num" rel="noopener"></a>
                <div class="locations__positions-location">
                    <a href class="locations__positions-location-pos js-location-pos" rel="noopener"></a>
                    <span class="locations__positions-location-message"><?php echo app('translator')->get('messages.positions-currently'); ?></span>
                </div>
                <div class="locations__description js-location-description"></div>
            </div>
        </div>
    </div>


    <script>

        // Loading video on mouse in for every location via theirs data-video-name attribute and other data
        const $link = $('.locations__place');
        const $linkWrapper = $('locations__selector');
        const $videoWrapper = $('.locations__video-wrap');
        const $video = $('.location-video');
        const $marker = $('#selector-marker');
        const $pageTitle = $('.js-location-title');
        const $pagePositions = $('.js-location-pos-num');
        const $pageLocationPos = $('.js-location-pos');
        const $pageDescription = $('.js-location-description');
        const $pagePositionPlural = $('.locations__positions-location-message');
        // const defaultText = 'around the world';
        const breakpointSm = window.matchMedia('(max-width: 720)');
        const breakpointSmMin = window.matchMedia('(min-width: 719px)');
        const breakpointSmMax = window.matchMedia('(max-width: 1200px)');

        const noun = "<?php echo app('translator')->get('messages.positions-currently'); ?>".split('|');
        const plural = function(number, five, one, two) {
            number = Math.abs(number);
            number %= 100;
            if (number >= 5 && number <= 20) {
                return five;
            }
            number %= 10;
            if (number == 1) {
                return one;
            }
            if (number >= 2 && number <= 4) {
                return two;
            }
            return five;
        }

        $link.click(function () {

            if (breakpointSmMin.matches && breakpointSmMax.matches) return false;
        });

        $link.mouseenter(function() {
            // Setting current elem
            if (!breakpointSm.matches) {
                $link.removeClass('is-current');
                $(this).addClass('is-current');

                // Add new videoframe and remove old for transition
                var $newVideo = $video.clone().addClass('animate').attr({
                    'src': $(this).data('video'),
                    'poster': $(this).data('img')
                });
                $newVideo.appendTo($videoWrapper);
                $('video:first-child').remove();

                // Set marker position
                var offsetTop = $(this).position().top;
                $marker.show().height($(this).height()).css('top', offsetTop + 15);

                // Set data for selection
                $pageTitle.text($(this).data('prepositional'));
                $pagePositions.text($(this).data('positions'));
                $pageLocationPos.text($(this).data('prepositional'));
                $pageLocationPos.attr('href', $(this).attr('href'));
                $pagePositions.attr('href', $(this).attr('href'));
                $pageDescription.text($(this).data('description'));
                $pagePositionPlural.text(plural($(this).data('positions'), noun[0], noun[1], noun[2]))
            }

            if ($pagePositions.text() > 0) {
                $pagePositions.addClass('locations__positions-num--active')
            }
            else {
                $pagePositions.removeClass('locations__positions-num--active')
            }
        });

        const breakpointChecker = () => {
            // $pageTitle.text(defaultText);
            $link.removeClass('is-current');
            $marker.hide();
        };

        breakpointSm.addListener(breakpointChecker);

        breakpointChecker();
    </script>
</section>
<?php /**PATH /var/www/quadcode-jobs/resources/views/site/blocks/hero_locations.blade.php ENDPATH**/ ?>