<?php $__env->startSection('title', 'Offices'); ?>
<?php $__env->startSection('description', ''); ?>
<?php $__env->startSection('keywords', ''); ?>

<?php $__env->startSection('app-inner', 'app-inner--overflow-hidden js-animation'); ?>

<?php $__env->startSection('content'); ?>
<section class="locations" style="--locations-bg: url(<?php echo e(asset('/files/locations/Around_the_worldvideo.jpg')); ?>);">
    <div class="locations__video-wrap">
        <video class="location-video" src="<?php echo e(asset('/files/locations/Around_the_worldvideo.mp4')); ?>" autoplay="true" loop="true" muted="muted" poster="<?php echo e(asset('/files/locations/Around_the_worldvideo.jpg')); ?>"></video>
    </div>
    <div class="container">
        <div class="locations__inner">
            <div class="locations__selector">
                <div id="selector-marker" class="locations__selector-marker" style="display: block; height: 46.75px; top: 168.5px;"></div>
                <a class="locations__place" href="<?php echo e(route('location-limassol')); ?>" data-img="<?php echo e(asset('/files/locations/Cyprus.jpg')); ?>" data-video="<?php echo e(asset('/files/locations/Cyprus.mp4')); ?>" data-positions="1" data-description="The Quadcode office is located near the tourist area of Limassol in a bright building with large panoramic windows." data-prepositional="in Cyprus" rel="noopener">
                    <div class="locations__city">Limassol</div>
                    <div class="locations__country">Cyprus</div>
                </a>
                <a class="locations__place" href="<?php echo e(route('location-london')); ?>" data-img="<?php echo e(asset('/files/locations/London.jpg')); ?>" data-video="<?php echo e(asset('/files/locations/London.mp4')); ?>" data-positions="0" data-description="The Quadcode office is located in Dawson House. It is  located in the old London City, not far from the  creative center of East London." data-prepositional="in London" rel="noopener">
                    <div class="locations__city">London</div>
                    <div class="locations__country">United Kingdom</div>
                </a>
                <a class="locations__place is-current" href="<?php echo e(route('location-sydney')); ?>" data-img="<?php echo e(asset('/files/locations/Sydney.jpg')); ?>" data-video="<?php echo e(asset('/files/locations/Sydney.mp4')); ?>" data-positions="0" data-description="The office is located on the 10th floor of a modern business center in North Sydney." data-prepositional="in Sydney" rel="noopener">
                    <div class="locations__city">Sydney</div>
                    <div class="locations__country">Australia</div>
                </a>
                <a class="locations__place" href="<?php echo e(route('location-gibraltar')); ?>" data-img="<?php echo e(asset('/files/locations/Gibraltar.jpg')); ?>" data-video="<?php echo e(asset('/files/locations/Gibraltar.mp4')); ?>" data-positions="0" data-description="Work with us in Gibraltar. Our office is in the World Trade Center—this is the northern part of Gibraltar." data-prepositional="in Gibraltar" rel="noopener">
                    <div class="locations__city">Gibraltar</div>
                    <div class="locations__country">United Kingdom</div>
                </a>
                <a class="locations__place" href="<?php echo e(route('location-dubai')); ?>" data-img="<?php echo e(asset('/files/locations/Around_the_worldvideo.jpg')); ?>" data-video="<?php echo e(asset('/files/locations/Around_the_worldvideo.mp4')); ?>" data-positions="0" data-description="Some information about Dubai" data-prepositional="in Dubai" rel="noopener">
                    <div class="locations__city">Dubai</div>
                    <div class="locations__country">United Arab Emirates</div>
                </a>
            </div>
            <div class="locations__page">
                <header class="locations__header">
                    <h1>Work with us  <span class="js-location-title">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">Vacancies</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 = "Vacancies|Vacancy".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 $__env->stopSection(); ?>

<?php echo $__env->make('site.layouts.app', [
    'light_menu' => false
], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/quadcode-jobs/resources/views/site/locations/offices.blade.php ENDPATH**/ ?>