<?php use App\Models\Location;use App\Repositories\OfficeRepository; ?>



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

<?php $__env->startSection('description', 'Work with us around the world, visit us to know about our offices in different countries.'); ?>

<?php $__env->startSection('keywords', 'Quadcode'); ?>

<?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" autoplay="true" loop="true" muted="muted" poster="<?php echo e(asset('/files/locations/Around_the_worldvideo.jpg')); ?>"
                   data-mobile="<?php echo e(asset('/files/locations/Around_the_worldvideo.jpg')); ?>">
                <source data-src="<?php echo e(asset('/files/locations/Around_the_worldvideo.mp4')); ?>" type="video/mp4">
            </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>
                    <?php $__currentLoopData = OfficeRepository::getOffices(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $office): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php if('worldwide' === $office->external_id): ?>
                            <?php continue; ?>
                        <?php endif; ?>

                        <?php /** @var Location $office */ ?>
                        <a class="locations__place" href="<?php echo e(route('office', [$office->slug])); ?>"
                           data-img="<?php echo e(asset('/files/locations/' . $office->title . '.jpg')); ?>"
                           data-video="<?php echo e(asset('/files/locations/' . $office->title . '.mp4')); ?>"
                           data-positions="<?php echo e($office->count_positions); ?>"
                           data-prepositional="<?php echo e($office->title); ?>"
                           rel="noopener">
                            <div class="locations__city"><?php echo e($office->title); ?></div>
                            <div class="locations__country"><?php echo e($office->country); ?></div>
                        </a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </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>
            </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
                    if ($(window).width() > 899) {
                        var $newVideo = $video.clone().addClass('animate').attr({
                            'src': $(this).data('video'),
                            'poster': $(this).data('img')
                        });
                    } else {
                        var $newVideo = $video.clone().addClass('animate').attr({
                            'poster': $(this).data('img')
                        });
                    }
                    $newVideo.appendTo($videoWrapper);
                    setTimeout(function () {
                        $('video:first-child').remove();
                    }, 300);

                    // 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'));
                    $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/offices.blade.php ENDPATH**/ ?>