@php use App\Models\Location;use App\Repositories\OfficeRepository; @endphp

@extends('site.layouts.app', ['light_menu' => false])

@section('title', 'Offices')

@section('description', 'Work with us around the world, visit us to know about our offices in different countries.')

@section('keywords', 'Quadcode')

@section('app-inner', 'app-inner--overflow-hidden js-animation')

@section('content')
    <section class="locations" style="--locations-bg: url({{ asset('/files/locations/Around_the_worldvideo.jpg') }});">
        <div class="locations__video-wrap">
            <video class="location-video" autoplay="true" loop="true" muted="muted" poster="{{ asset('/files/locations/Around_the_worldvideo.jpg') }}"
                   data-mobile="{{ asset('/files/locations/Around_the_worldvideo.jpg') }}">
                <source data-src="{{ 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>
                    @foreach (OfficeRepository::getOffices() as $office)
                        @if('worldwide' === $office->external_id)
                            @continue
                        @endif

                        @php /** @var Location $office */ @endphp
                        <a class="locations__place" href="{{ route('office', [$office->slug]) }}"
                           data-img="{{ asset('/files/locations/' . $office->title . '.jpg') }}"
                           data-video="{{ asset('/files/locations/' . $office->title . '.mp4') }}"
                           data-positions="{{ $office->count_positions }}"
                           data-prepositional="{{ $office->title }}"
                           rel="noopener">
                            <div class="locations__city">{{ $office->title }}</div>
                            <div class="locations__country">{{ $office->country }}</div>
                        </a>
                    @endforeach
                </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>
@endsection